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

【优化】分销商店铺商品列表及代理商店铺商品列表瀑布流效果调整为【uv-waterfall】瀑布流插件。

Browse Source
This commit is contained in:
jianweie code
2024-03-18 15:05:56 +08:00
parent aa2ffa0fa7
commit 040c5ce981
2 changed files with 182 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
CoreCms.Net.Uni-App/CoreShop/pages/member/agent/myStore/myStore.vue
View File

@@ -58,32 +58,75 @@
</u-popup>
</view>
<!-- 商品列表 -->
<view>
<view class="coreshop-goods-group" v-if="goodsData.length>0">
<u-grid col="2" :border="false" align="left">
<u-grid-item bg-color="transparent" :custom-style="{padding: '0px'}" v-for="(item, index) in goodsData" :key="index" @click="goGoodsDetail(item.id)">
<view class="good_box">
<u--image :src="item.image" mode="widthFix" width="100%" radius="10"></u--image>
<view class="good_title u-line-2">
{{item.name}}
</view>
<view class="good-price">
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-15 coreshop-text-gray">{{item.mktprice}}元</span>
</view>
<view class="good-tag-recommend" v-if="item.isRecommend">
推荐
</view>
<view class="good-tag-hot" v-if="item.isHot">
热门
<view class="waterfall " v-if="goodsData.length>0">
<uv-waterfall ref="waterfall"
v-model="goodsData"
:add-time="10"
:left-gap="leftGap"
:right-gap="rightGap"
:column-gap="columnGap"
@changeList="changeList">
<!-- 第一列数据 -->
<template v-slot:list1>
<!-- 为了磨平部分平台的BUG，必须套一层view -->
<view>
<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
<view class="coreshop-margin-bottom-10">
<view class="waterfall-item__image" :style="[imageStyle(item)]">
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
</view>
<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-title-294 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">
<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">{{item.mktprice}}元</span>
</view>
<view>
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
</view>
</view>
</view>
</view>
</view>
</u-grid-item>
</u-grid>
</view>
<!-- 无数据时默认显示 -->
<view class="coreshop-emptybox" v-else>
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="暂无商品列表" mode="list"></u-empty>
</view>
</view>
</template>
<!-- 第二列数据 -->
<template v-slot:list2>
<!-- 为了磨平部分平台的BUG，必须套一层view -->
<view>
<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
<view class="coreshop-margin-bottom-10">
<view class="waterfall-item__image" :style="[imageStyle(item)]">
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
</view>
<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-title-294 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">
<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">{{item.mktprice}}元</span>
</view>
<view>
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
</uv-waterfall>
</view>
<!-- 无数据时默认显示 -->
<view class="coreshop-emptybox" v-else>
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="暂无商品列表" mode="list"></u-empty>
</view>
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
</view>
@@ -127,7 +170,12 @@
page: 1, //默认页码
searchKey: '请输入关键字搜索',
shareUrl: this.$globalConstVars.shareUrl,
lvvpopref: false
lvvpopref: false,
list1: [],// 瀑布流第一列数据
list2: [],// 瀑布流第二列数据
leftGap: 10,
rightGap: 10,
columnGap: 10
}
},
onShow: function () {
@@ -146,7 +194,25 @@
this.getAgent(store);
this.getGoods();
},
computed: {
imageStyle(item) {
return item => {
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
const w = v / 2;
const rate = w / item.w;
const h = rate * item.h;
return {
width: w + 'px',
height: h + 'px'
}
}
}
},
methods: {
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
changeList(e) {
this[e.name].push(e.value);
},
// 显示modal弹出框
openPopup() {
this.lvvpopref = true;

116
CoreCms.Net.Uni-App/CoreShop/pages/member/distribution/myStore/myStore.vue
View File

@@ -58,32 +58,75 @@
</u-popup>
</view>
<!-- 商品列表 -->
<view>
<view class="coreshop-goods-group" v-if="goodsData.length>0">
<u-grid col="2" :border="false" align="left">
<u-grid-item bg-color="transparent" :custom-style="{padding: '0px'}" v-for="(item, index) in goodsData" :key="index" @click="goGoodsDetail(item.id)">
<view class="good_box">
<u--image :src="item.image" mode="widthFix" width="100%" radius="10"></u--image>
<view class="good_title u-line-2">
{{item.name}}
</view>
<view class="good-price">
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-15 coreshop-text-gray">{{item.mktprice}}元</span>
</view>
<view class="good-tag-recommend" v-if="item.isRecommend">
推荐
</view>
<view class="good-tag-hot" v-if="item.isHot">
热门
<view class="waterfall " v-if="goodsData.length>0">
<uv-waterfall ref="waterfall"
v-model="goodsData"
:add-time="10"
:left-gap="leftGap"
:right-gap="rightGap"
:column-gap="columnGap"
@changeList="changeList">
<!-- 第一列数据 -->
<template v-slot:list1>
<!-- 为了磨平部分平台的BUG，必须套一层view -->
<view>
<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
<view class="coreshop-margin-bottom-10">
<view class="waterfall-item__image" :style="[imageStyle(item)]">
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
</view>
<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-title-294 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">
<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">{{item.mktprice}}元</span>
</view>
<view>
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
</view>
</view>
</view>
</view>
</view>
</u-grid-item>
</u-grid>
</view>
<!-- 无数据时默认显示 -->
<view class="coreshop-emptybox" v-else>
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="暂无商品列表" mode="list"></u-empty>
</view>
</view>
</template>
<!-- 第二列数据 -->
<template v-slot:list2>
<!-- 为了磨平部分平台的BUG，必须套一层view -->
<view>
<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
<view class="coreshop-margin-bottom-10">
<view class="waterfall-item__image" :style="[imageStyle(item)]">
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
</view>
<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-title-294 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">
<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">{{item.mktprice}}元</span>
</view>
<view>
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
</uv-waterfall>
</view>
<!-- 无数据时默认显示 -->
<view class="coreshop-emptybox" v-else>
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="暂无商品列表" mode="list"></u-empty>
</view>
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
</view>
@@ -126,7 +169,12 @@
page: 1, //默认页码
searchKey: '请输入关键字搜索',
shareUrl: this.$globalConstVars.shareUrl,
lvvpopref: false
lvvpopref: false,
list1: [],// 瀑布流第一列数据
list2: [],// 瀑布流第二列数据
leftGap: 10,
rightGap: 10,
columnGap: 10
}
},
onShow: function () {
@@ -145,7 +193,25 @@
this.getDistribution(store);
this.getGoods();
},
computed: {
imageStyle(item) {
return item => {
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
const w = v / 2;
const rate = w / item.w;
const h = rate * item.h;
return {
width: w + 'px',
height: h + 'px'
}
}
}
},
methods: {
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
changeList(e) {
this[e.name].push(e.value);
},
// 显示modal弹出框
openPopup() {
this.lvvpopref = true;