mirror of
http://git.coreshop.cn/jianweie/coreshoppro.git
synced 2026-02-04 22:49:49 +08:00
【优化】分销商店铺商品列表及代理商店铺商品列表瀑布流效果调整为【uv-waterfall】瀑布流插件。
This commit is contained in:
jianweie code
@@ -58,32 +58,75 @@
|
|||||||
</u-popup>
|
</u-popup>
|
||||||
</view>
|
</view>
|
||||||
<!-- 商品列表 -->
|
<!-- 商品列表 -->
|
||||||
<view>
|
<view class="waterfall " v-if="goodsData.length>0">
|
||||||
<view class="coreshop-goods-group" v-if="goodsData.length>0">
|
<uv-waterfall ref="waterfall"
|
||||||
<u-grid col="2" :border="false" align="left">
|
v-model="goodsData"
|
||||||
<u-grid-item bg-color="transparent" :custom-style="{padding: '0px'}" v-for="(item, index) in goodsData" :key="index" @click="goGoodsDetail(item.id)">
|
:add-time="10"
|
||||||
<view class="good_box">
|
:left-gap="leftGap"
|
||||||
<u--image :src="item.image" mode="widthFix" width="100%" radius="10"></u--image>
|
:right-gap="rightGap"
|
||||||
<view class="good_title u-line-2">
|
:column-gap="columnGap"
|
||||||
{{item.name}}
|
@changeList="changeList">
|
||||||
</view>
|
<!-- 第一列数据 -->
|
||||||
<view class="good-price">
|
<template v-slot:list1>
|
||||||
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-15 coreshop-text-gray">{{item.mktprice}}元</span>
|
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||||
</view>
|
<view>
|
||||||
<view class="good-tag-recommend" v-if="item.isRecommend">
|
<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||||
推荐
|
<view class="coreshop-margin-bottom-10">
|
||||||
</view>
|
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||||||
<view class="good-tag-hot" v-if="item.isHot">
|
<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>
|
</view>
|
||||||
</u-grid-item>
|
</view>
|
||||||
</u-grid>
|
</template>
|
||||||
</view>
|
<!-- 第二列数据 -->
|
||||||
<!-- 无数据时默认显示 -->
|
<template v-slot:list2>
|
||||||
<view class="coreshop-emptybox" v-else>
|
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||||
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="暂无商品列表" mode="list"></u-empty>
|
<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>
|
</view>
|
||||||
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
|
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
|
||||||
</view>
|
</view>
|
||||||
@@ -127,7 +170,12 @@
|
|||||||
page: 1, //默认页码
|
page: 1, //默认页码
|
||||||
searchKey: '请输入关键字搜索',
|
searchKey: '请输入关键字搜索',
|
||||||
shareUrl: this.$globalConstVars.shareUrl,
|
shareUrl: this.$globalConstVars.shareUrl,
|
||||||
lvvpopref: false
|
lvvpopref: false,
|
||||||
|
list1: [],// 瀑布流第一列数据
|
||||||
|
list2: [],// 瀑布流第二列数据
|
||||||
|
leftGap: 10,
|
||||||
|
rightGap: 10,
|
||||||
|
columnGap: 10
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onShow: function () {
|
onShow: function () {
|
||||||
@@ -146,7 +194,25 @@
|
|||||||
this.getAgent(store);
|
this.getAgent(store);
|
||||||
this.getGoods();
|
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: {
|
methods: {
|
||||||
|
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
|
||||||
|
changeList(e) {
|
||||||
|
this[e.name].push(e.value);
|
||||||
|
},
|
||||||
// 显示modal弹出框
|
// 显示modal弹出框
|
||||||
openPopup() {
|
openPopup() {
|
||||||
this.lvvpopref = true;
|
this.lvvpopref = true;
|
||||||
|
|||||||
@@ -58,32 +58,75 @@
|
|||||||
</u-popup>
|
</u-popup>
|
||||||
</view>
|
</view>
|
||||||
<!-- 商品列表 -->
|
<!-- 商品列表 -->
|
||||||
<view>
|
<view class="waterfall " v-if="goodsData.length>0">
|
||||||
<view class="coreshop-goods-group" v-if="goodsData.length>0">
|
<uv-waterfall ref="waterfall"
|
||||||
<u-grid col="2" :border="false" align="left">
|
v-model="goodsData"
|
||||||
<u-grid-item bg-color="transparent" :custom-style="{padding: '0px'}" v-for="(item, index) in goodsData" :key="index" @click="goGoodsDetail(item.id)">
|
:add-time="10"
|
||||||
<view class="good_box">
|
:left-gap="leftGap"
|
||||||
<u--image :src="item.image" mode="widthFix" width="100%" radius="10"></u--image>
|
:right-gap="rightGap"
|
||||||
<view class="good_title u-line-2">
|
:column-gap="columnGap"
|
||||||
{{item.name}}
|
@changeList="changeList">
|
||||||
</view>
|
<!-- 第一列数据 -->
|
||||||
<view class="good-price">
|
<template v-slot:list1>
|
||||||
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-15 coreshop-text-gray">{{item.mktprice}}元</span>
|
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||||
</view>
|
<view>
|
||||||
<view class="good-tag-recommend" v-if="item.isRecommend">
|
<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||||
推荐
|
<view class="coreshop-margin-bottom-10">
|
||||||
</view>
|
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||||||
<view class="good-tag-hot" v-if="item.isHot">
|
<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>
|
</view>
|
||||||
</u-grid-item>
|
</view>
|
||||||
</u-grid>
|
</template>
|
||||||
</view>
|
<!-- 第二列数据 -->
|
||||||
<!-- 无数据时默认显示 -->
|
<template v-slot:list2>
|
||||||
<view class="coreshop-emptybox" v-else>
|
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||||
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="暂无商品列表" mode="list"></u-empty>
|
<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>
|
</view>
|
||||||
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
|
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
|
||||||
</view>
|
</view>
|
||||||
@@ -126,7 +169,12 @@
|
|||||||
page: 1, //默认页码
|
page: 1, //默认页码
|
||||||
searchKey: '请输入关键字搜索',
|
searchKey: '请输入关键字搜索',
|
||||||
shareUrl: this.$globalConstVars.shareUrl,
|
shareUrl: this.$globalConstVars.shareUrl,
|
||||||
lvvpopref: false
|
lvvpopref: false,
|
||||||
|
list1: [],// 瀑布流第一列数据
|
||||||
|
list2: [],// 瀑布流第二列数据
|
||||||
|
leftGap: 10,
|
||||||
|
rightGap: 10,
|
||||||
|
columnGap: 10
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onShow: function () {
|
onShow: function () {
|
||||||
@@ -145,7 +193,25 @@
|
|||||||
this.getDistribution(store);
|
this.getDistribution(store);
|
||||||
this.getGoods();
|
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: {
|
methods: {
|
||||||
|
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
|
||||||
|
changeList(e) {
|
||||||
|
this[e.name].push(e.value);
|
||||||
|
},
|
||||||
// 显示modal弹出框
|
// 显示modal弹出框
|
||||||
openPopup() {
|
openPopup() {
|
||||||
this.lvvpopref = true;
|
this.lvvpopref = true;
|
||||||
|
|||||||
Reference in New Issue
Block a user