mirror of
http://git.coreshop.cn/jianweie/coreshoppro.git
synced 2025-12-06 18:13:26 +08:00
【优化】优化商品选项卡【goodTabBar】效果，弃用瀑布流组件，启用手写float瀑布流样式，解决tab切换闪烁及二次渲染导致容器伸缩撑破的问题。
This commit is contained in:
大灰灰
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18">
|
||||
<view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" style="overflow: hidden;">
|
||||
<u-tabs :list="nameList" :current="current" @change="onChange"></u-tabs>
|
||||
<view class="coreshop-divider">
|
||||
<view class="complete"></view>
|
||||
</view>
|
||||
|
||||
<view class="coreshop-text-black">
|
||||
<custom-waterfalls-flow ref="waterfallsFlowRef" :value="newData.list" :column="newData.column" @wapperClick="wapperClick" @imageClick="imageClick" v-if="newData.column>1">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods coreshop-padding-bottom-10 coreshop-bg-main" v-for="(item,index) in newData.list" :key="index" slot="slot{{index}}">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-main coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-text-black" v-for="(newData, indexParent) in coreshopData.parameters.list" :key="indexParent" v-show="newData.isShow">
|
||||
<view class="flex-box clear-fix">
|
||||
<view class="coreshop-padding-bottom-10 coreshop-bg-main column-value2" v-for="(item,index) in newData.list" :key="index" v-if="newData.column==2">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-main coreshop-border-radius-bl-18" @click="goGoodsDetail(item.id)">
|
||||
<image :src="item.image" class="img" mode="widthFix"></image>
|
||||
<view class="coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
@@ -26,7 +26,7 @@
|
||||
<view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view class="complete"></view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-font-11 coreshop-margin-top-10 coreshop-margin-bottom-5" :class="newData.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view class="coreshop-flex coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" :class="newData.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
@@ -44,51 +44,50 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="goods">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="flex-box3 clear-fix">
|
||||
<view class="coreshop-padding-bottom-10 coreshop-bg-main column-value3" v-for="(item,index) in newData.list" :key="index" v-if="newData.column==3">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-4 coreshop-padding-right-4 coreshop-bg-main coreshop-border-radius-bl-18" @click="goGoodsDetail(item.id)">
|
||||
<image :src="item.image" class="img" mode="widthFix"></image>
|
||||
<view class="coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray" v-if="newData.column==2">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray" v-if="newData.column==2">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
<view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view class="complete"></view>
|
||||
</view>
|
||||
<view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view class="complete"></view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" :class="newData.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-font-11 coreshop-margin-top-10 coreshop-margin-bottom-5" :class="newData.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="coreshop-text-black" v-for="(item, index) in newData.list" :key="index" v-if="newData.column==1">
|
||||
<view class="coreshop-flex coreshop-justify-start coreshop-padding-top-10 coreshop-padding-bottom-10" v-if="newData.list.length">
|
||||
<view class="coreshop-flex coreshop-justify-start coreshop-padding-top-10 coreshop-padding-bottom-10" v-if="newData.list.length" @click="goGoodsDetail(item.id)">
|
||||
<view>
|
||||
<u--image :src="item.image" mode="widthFix" width="130px" height="130px" radius="8"></u--image>
|
||||
</view>
|
||||
@@ -99,28 +98,28 @@
|
||||
<view class="coreshop-font-11 coreshop-bg-orange coreshop-padding-2 coreshop-border-radius-4 coreshop-margin-right-10">已售{{item.buyCount}}{{item.unit}}</view>
|
||||
<view class="coreshop-font-11 coreshop-bg-olive coreshop-padding-2 coreshop-border-radius-4">{{item.viewCount}}人访问</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-justify-between coreshop-flex-direction-row coreshop-align-center">
|
||||
<view class="coreshop-flex coreshop-align-center">
|
||||
<view class="coreshop-font-14 coreshop-text-red">￥{{ item.price }}</view>
|
||||
<view class="coreshop-font-12 coreshop-text-gray coreshop-text-through">￥{{ item.mktprice }}</view>
|
||||
</view>
|
||||
<view class="coreshop-buy-btn" @tap="goPinTuanDetail(item.id,item.pinTuanRule.id)">立即购</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
<view class="coreshop-buy-btn">立即购</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -139,7 +138,6 @@
|
||||
return {
|
||||
current: 0,
|
||||
nameList: [],
|
||||
newData: {}
|
||||
};
|
||||
},
|
||||
name: "coreshopGoodTabBar",
|
||||
@@ -151,14 +149,15 @@
|
||||
},
|
||||
mounted() {
|
||||
var _this = this;
|
||||
this.newData = this.coreshopData;
|
||||
for (var i = 0; i < this.coreshopData.parameters.list.length; i++) {
|
||||
let item = {
|
||||
name: this.coreshopData.parameters.list[i].title
|
||||
}
|
||||
this.nameList.push(item);
|
||||
if (_this.current == i) {
|
||||
_this.newData = this.coreshopData.parameters.list[i];
|
||||
this.coreshopData.parameters.list[i].isShow = true;
|
||||
} else {
|
||||
this.coreshopData.parameters.list[i].isShow = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -172,26 +171,14 @@
|
||||
pointShowPoint() { return this.$store.state.config.pointShowPoint },
|
||||
},
|
||||
methods: {
|
||||
wapperClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
imageClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
onChange(item) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
});
|
||||
var _this = this;
|
||||
this.current = item.index;
|
||||
for (var i = 0; i < _this.coreshopData.parameters.list.length; i++) {
|
||||
if (_this.current == i) {
|
||||
_this.newData = this.coreshopData.parameters.list[i];
|
||||
_this.$refs.waterfallsFlowRef.refresh();
|
||||
setTimeout(function () {
|
||||
uni.hideLoading();
|
||||
}, 300);
|
||||
_this.coreshopData.parameters.list[i].isShow = true;
|
||||
} else {
|
||||
_this.coreshopData.parameters.list[i].isShow = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -200,20 +187,13 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.goodsBox { border-radius: 16rpx; color: #333333 !important; margin: 5px 5px;
|
||||
.good_box { border-radius: 8px; margin: 3px; background-color: #ffffff; padding: 5px; position: relative; width: calc(100% - 6px);
|
||||
.good_title { font-size: 13px; margin-top: 5px; color: $u-main-color; }
|
||||
.good_title-xl { font-size: 14px; margin-top: 5px; color: $u-main-color; }
|
||||
.good-tag-hot { display: flex; margin-top: 5px; position: absolute; top: 7.5px; left: 7.5px; background-color: $u-type-error; color: #FFFFFF; display: flex; align-items: center; padding: 4rpx 14rpx; border-radius: 25px; font-size: 10px; line-height: 1; }
|
||||
.good-tag-recommend { display: flex; margin-top: 5px; position: absolute; top: 7.5px; right: 7.5px; background-color: $u-type-primary; color: #FFFFFF; margin-left: 10px; border-radius: 25px; line-height: 1; padding: 4rpx 14rpx; display: flex; align-items: center; border-radius: 25px; font-size: 10px; }
|
||||
.good-tag-recommend2 { display: flex; margin-top: 5px; position: absolute; bottom: 7.5px; left: 7.5px; background-color: $u-type-primary; color: #FFFFFF; border-radius: 25px; line-height: 1; padding: 4rpx 14rpx; display: flex; align-items: center; border-radius: 25px; font-size: 10px; }
|
||||
.good-price { font-size: 30rpx; color: $u-type-error; margin-top: 5px; }
|
||||
}
|
||||
|
||||
.indicator-dots { margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center;
|
||||
.indicator-dots-item { background-color: $u-tips-color; height: 6px; width: 6px; border-radius: 10px; margin: 0 3px; }
|
||||
.indicator-dots-active { background-color: $u-type-primary; }
|
||||
}
|
||||
.flex-box { column-count: 2; column-gap: 8px;
|
||||
.column-value2 { width: 100%; break-inside: avoid; color: #333333 !important; margin-bottom: 8px; }
|
||||
}
|
||||
|
||||
.flex-box3 { column-count: 3; column-gap: 8px;
|
||||
.column-value3 { width: 100%; break-inside: avoid; color: #333333 !important; margin-bottom: 5px; }
|
||||
}
|
||||
.img { width: 100%; }
|
||||
.clear-fix::after { content: ''; display: block; height: 0; clear: both; }
|
||||
.clear-fix { zoom: 1; }
|
||||
</style>
|
||||
|
||||
@@ -154,7 +154,7 @@
|
||||
代理商表
|
||||
</summary>
|
||||
</member>
|
||||
<member name="M:CoreCms.Net.Web.Admin.Controllers.CoreCmsAgentController.#ctor(Microsoft.AspNetCore.Hosting.IWebHostEnvironment,CoreCms.Net.IServices.ICoreCmsAgentServices,CoreCms.Net.IServices.ICoreCmsAgentGradeServices)">
|
||||
<member name="M:CoreCms.Net.Web.Admin.Controllers.CoreCmsAgentController.#ctor(Microsoft.AspNetCore.Hosting.IWebHostEnvironment,CoreCms.Net.IServices.ICoreCmsAgentServices,CoreCms.Net.IServices.ICoreCmsAgentGradeServices,CoreCms.Net.IServices.ICoreCmsUserServices)">
|
||||
<summary>
|
||||
构造函数
|
||||
</summary>
|
||||
@@ -171,6 +171,19 @@
|
||||
</summary>
|
||||
<returns></returns>
|
||||
</member>
|
||||
<member name="M:CoreCms.Net.Web.Admin.Controllers.CoreCmsAgentController.GetCreate">
|
||||
<summary>
|
||||
创建数据
|
||||
</summary>
|
||||
<returns></returns>
|
||||
</member>
|
||||
<member name="M:CoreCms.Net.Web.Admin.Controllers.CoreCmsAgentController.DoCreate(CoreCms.Net.Model.FromBody.FMAdminCreateAgentPost)">
|
||||
<summary>
|
||||
创建提交
|
||||
</summary>
|
||||
<param name="entity"></param>
|
||||
<returns></returns>
|
||||
</member>
|
||||
<member name="M:CoreCms.Net.Web.Admin.Controllers.CoreCmsAgentController.GetEdit(CoreCms.Net.Model.FromBody.FMIntId)">
|
||||
<summary>
|
||||
编辑数据
|
||||
@@ -918,7 +931,7 @@
|
||||
分销商表
|
||||
</summary>
|
||||
</member>
|
||||
<member name="M:CoreCms.Net.Web.Admin.Controllers.CoreCmsDistributionController.#ctor(Microsoft.AspNetCore.Hosting.IWebHostEnvironment,CoreCms.Net.IServices.ICoreCmsDistributionServices,CoreCms.Net.IServices.ICoreCmsUserGradeServices,CoreCms.Net.IServices.ICoreCmsDistributionGradeServices)">
|
||||
<member name="M:CoreCms.Net.Web.Admin.Controllers.CoreCmsDistributionController.#ctor(Microsoft.AspNetCore.Hosting.IWebHostEnvironment,CoreCms.Net.IServices.ICoreCmsDistributionServices,CoreCms.Net.IServices.ICoreCmsUserGradeServices,CoreCms.Net.IServices.ICoreCmsDistributionGradeServices,CoreCms.Net.IServices.ICoreCmsUserServices)">
|
||||
<summary>
|
||||
构造函数
|
||||
</summary>
|
||||
@@ -935,6 +948,19 @@
|
||||
</summary>
|
||||
<returns></returns>
|
||||
</member>
|
||||
<member name="M:CoreCms.Net.Web.Admin.Controllers.CoreCmsDistributionController.GetCreate">
|
||||
<summary>
|
||||
创建数据
|
||||
</summary>
|
||||
<returns></returns>
|
||||
</member>
|
||||
<member name="M:CoreCms.Net.Web.Admin.Controllers.CoreCmsDistributionController.DoCreate(CoreCms.Net.Model.FromBody.FMAdminCreateDistributionPost)">
|
||||
<summary>
|
||||
创建提交
|
||||
</summary>
|
||||
<param name="entity"></param>
|
||||
<returns></returns>
|
||||
</member>
|
||||
<member name="M:CoreCms.Net.Web.Admin.Controllers.CoreCmsDistributionController.GetEdit(CoreCms.Net.Model.FromBody.FMIntId)">
|
||||
<summary>
|
||||
编辑数据
|
||||
@@ -5835,62 +5861,5 @@
|
||||
</summary>
|
||||
<returns></returns>
|
||||
</member>
|
||||
<member name="T:CoreCms.Net.Web.Admin.Program">
|
||||
<summary>
|
||||
初始化
|
||||
</summary>
|
||||
</member>
|
||||
<member name="M:CoreCms.Net.Web.Admin.Program.Main(System.String[])">
|
||||
<summary>
|
||||
启动配置
|
||||
</summary>
|
||||
<param name="args"></param>
|
||||
</member>
|
||||
<member name="M:CoreCms.Net.Web.Admin.Program.CreateHostBuilder(System.String[])">
|
||||
<summary>
|
||||
创建启动支撑
|
||||
</summary>
|
||||
<param name="args"></param>
|
||||
<returns></returns>
|
||||
</member>
|
||||
<member name="T:CoreCms.Net.Web.Admin.Startup">
|
||||
<summary>
|
||||
启动配置
|
||||
</summary>
|
||||
</member>
|
||||
<member name="M:CoreCms.Net.Web.Admin.Startup.#ctor(Microsoft.Extensions.Configuration.IConfiguration,Microsoft.AspNetCore.Hosting.IWebHostEnvironment)">
|
||||
<summary>
|
||||
构造函数
|
||||
</summary>
|
||||
<param name="configuration"></param>
|
||||
<param name="env"></param>
|
||||
</member>
|
||||
<member name="P:CoreCms.Net.Web.Admin.Startup.Configuration">
|
||||
<summary>
|
||||
</summary>
|
||||
</member>
|
||||
<member name="P:CoreCms.Net.Web.Admin.Startup.Env">
|
||||
<summary>
|
||||
</summary>
|
||||
</member>
|
||||
<member name="M:CoreCms.Net.Web.Admin.Startup.ConfigureServices(Microsoft.Extensions.DependencyInjection.IServiceCollection)">
|
||||
<summary>
|
||||
This method gets called by the runtime. Use this method to add services to the container.
|
||||
</summary>
|
||||
<param name="services"></param>
|
||||
</member>
|
||||
<member name="M:CoreCms.Net.Web.Admin.Startup.ConfigureContainer(Autofac.ContainerBuilder)">
|
||||
<summary>
|
||||
Autofac规则配置
|
||||
</summary>
|
||||
<param name="builder"></param>
|
||||
</member>
|
||||
<member name="M:CoreCms.Net.Web.Admin.Startup.Configure(Microsoft.AspNetCore.Builder.IApplicationBuilder,Microsoft.AspNetCore.Hosting.IWebHostEnvironment)">
|
||||
<summary>
|
||||
This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
|
||||
</summary>
|
||||
<param name="app"></param>
|
||||
<param name="env"></param>
|
||||
</member>
|
||||
</members>
|
||||
</doc>
|
||||
|
||||
Reference in New Issue
Block a user