wgh/coreshoppro
1
0
Fork 0
mirror of http://git.coreshop.cn/jianweie/coreshoppro.git synced 2025-12-06 19:53:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

【优化】优化商品选项卡【goodTabBar】效果，弃用瀑布流组件，启用手写float瀑布流样式，解决tab切换闪烁及二次渲染导致容器伸缩撑破的问题。

Browse Source
This commit is contained in:
大灰灰
2022-11-09 00:16:10 +08:00
parent 771d20c890
commit 543bb281f4
2 changed files with 101 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
CoreCms.Net.Uni-App/CoreShop/components/coreshop-page/coreshop-goodTabBar.vue
View File

@@ -1,15 +1,15 @@
<template> <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> <u-tabs :list="nameList" :current="current" @change="onChange"></u-tabs>
<view class="coreshop-divider"> <view class="coreshop-divider">
<view class="complete"></view> <view class="complete"></view>
</view> </view>
<view class="coreshop-text-black"> <view class="coreshop-text-black" v-for="(newData, indexParent) in coreshopData.parameters.list" :key="indexParent" v-show="newData.isShow">
<custom-waterfalls-flow ref="waterfallsFlowRef" :value="newData.list" :column="newData.column" @wapperClick="wapperClick" @imageClick="imageClick" v-if="newData.column>1"> <view class="flex-box clear-fix">
<!-- #ifdef MP-WEIXIN --> <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="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" @click="goGoodsDetail(item.id)">
<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"> <image :src="item.image" class="img" mode="widthFix"></image>
<view class="coreshop-multiple-line-clamp"> <view class="coreshop-multiple-line-clamp">
<text class="coreshop-font-14">{{item.name}}</text> <text class="coreshop-font-14">{{item.name}}</text>
</view> </view>
@@ -26,7 +26,7 @@
<view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0"> <view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
<view class="complete"></view> <view class="complete"></view>
</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> <view>
{{ pointShowName}}兑换价: {{ pointShowName}}兑换价:
</view> </view>
@@ -44,51 +44,50 @@
</view> </view>
</view> </view>
</view> </view>
<!-- #endif --> </view>
<!-- #ifndef MP-WEIXIN --> <view class="flex-box3 clear-fix">
<template v-slot:default="item"> <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="goods"> <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)">
<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"> <image :src="item.image" class="img" mode="widthFix"></image>
<view class="coreshop-multiple-line-clamp"> <view class="coreshop-multiple-line-clamp">
<text class="coreshop-font-14">{{item.name}}</text> <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>
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5"> <view>
<view class="coreshop-text-red coreshop-font-weight-bold"> <text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
<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> </view>
<view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0"> </view>
<view class="complete"></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>
<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-text-red">
<view> {{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
{{ pointShowName}}兑换价:
</view>
<view class="coreshop-text-red">
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
</view>
</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-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"> </view>
{{item.points}}{{ pointShowName}} <view class="coreshop-text-red">
</view> {{item.points}}{{ pointShowName}}
</view> </view>
</view> </view>
</view> </view>
</template> </view>
<!-- #endif --> </view>
</custom-waterfalls-flow>
<view class="coreshop-text-black" v-for="(item, index) in newData.list" :key="index" v-if="newData.column==1"> <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> <view>
<u--image :src="item.image" mode="widthFix" width="130px" height="130px" radius="8"></u--image> <u--image :src="item.image" mode="widthFix" width="130px" height="130px" radius="8"></u--image>
</view> </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-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 class="coreshop-font-11 coreshop-bg-olive coreshop-padding-2 coreshop-border-radius-4">{{item.viewCount}}人访问</view>
</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-justify-between coreshop-flex-direction-row coreshop-align-center">
<view class="coreshop-flex 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-14 coreshop-text-red">￥{{ item.price }}</view>
<view class="coreshop-font-12 coreshop-text-gray coreshop-text-through">￥{{ item.mktprice }}</view> <view class="coreshop-font-12 coreshop-text-gray coreshop-text-through">￥{{ item.mktprice }}</view>
</view> </view>
<view class="coreshop-buy-btn" @tap="goPinTuanDetail(item.id,item.pinTuanRule.id)">立即购</view> <view class="coreshop-buy-btn">立即购</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> </view>
</view> </view>
</view> </view>
@@ -139,7 +138,6 @@
return { return {
current: 0, current: 0,
nameList: [], nameList: [],
newData: {}
}; };
}, },
name: "coreshopGoodTabBar", name: "coreshopGoodTabBar",
@@ -151,14 +149,15 @@
}, },
mounted() { mounted() {
var _this = this; var _this = this;
this.newData = this.coreshopData;
for (var i = 0; i < this.coreshopData.parameters.list.length; i++) { for (var i = 0; i < this.coreshopData.parameters.list.length; i++) {
let item = { let item = {
name: this.coreshopData.parameters.list[i].title name: this.coreshopData.parameters.list[i].title
} }
this.nameList.push(item); this.nameList.push(item);
if (_this.current == i) { 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 }, pointShowPoint() { return this.$store.state.config.pointShowPoint },
}, },
methods: { methods: {
wapperClick(item) {
this.goGoodsDetail(item.id)
},
imageClick(item) {
this.goGoodsDetail(item.id)
},
onChange(item) { onChange(item) {
uni.showLoading({
title: '加载中',
mask: true
});
var _this = this; var _this = this;
this.current = item.index; this.current = item.index;
for (var i = 0; i < _this.coreshopData.parameters.list.length; i++) { for (var i = 0; i < _this.coreshopData.parameters.list.length; i++) {
if (_this.current == i) { if (_this.current == i) {
_this.newData = this.coreshopData.parameters.list[i]; _this.coreshopData.parameters.list[i].isShow = true;
_this.$refs.waterfallsFlowRef.refresh(); } else {
setTimeout(function () { _this.coreshopData.parameters.list[i].isShow = false;
uni.hideLoading();
}, 300);
} }
} }
} }
@@ -200,20 +187,13 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.goodsBox { border-radius: 16rpx; color: #333333 !important; margin: 5px 5px; .flex-box { column-count: 2; column-gap: 8px;
.good_box { border-radius: 8px; margin: 3px; background-color: #ffffff; padding: 5px; position: relative; width: calc(100% - 6px); .column-value2 { width: 100%; break-inside: avoid; color: #333333 !important; margin-bottom: 8px; }
.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-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> </style>

87
CoreCms.Net.Web.Admin/Doc.xml
View File

@@ -154,7 +154,7 @@
代理商表 代理商表
</summary> </summary>
</member> </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>
构造函数 构造函数
</summary> </summary>
@@ -171,6 +171,19 @@
</summary> </summary>
<returns></returns> <returns></returns>
</member> </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)"> <member name="M:CoreCms.Net.Web.Admin.Controllers.CoreCmsAgentController.GetEdit(CoreCms.Net.Model.FromBody.FMIntId)">
<summary> <summary>
编辑数据 编辑数据
@@ -918,7 +931,7 @@
分销商表 分销商表
</summary> </summary>
</member> </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>
构造函数 构造函数
</summary> </summary>
@@ -935,6 +948,19 @@
</summary> </summary>
<returns></returns> <returns></returns>
</member> </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)"> <member name="M:CoreCms.Net.Web.Admin.Controllers.CoreCmsDistributionController.GetEdit(CoreCms.Net.Model.FromBody.FMIntId)">
<summary> <summary>
编辑数据 编辑数据
@@ -5835,62 +5861,5 @@
</summary> </summary>
<returns></returns> <returns></returns>
</member> </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> </members>
</doc> </doc>