From 040c5ce981950b8e337008ce37fe9f6242d59f79 Mon Sep 17 00:00:00 2001
From: jianweie code <jianweie@live.com>
Date: Mon, 18 Mar 2024 15:05:56 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91=E5=88=86?=
 =?UTF-8?q?=E9=94=80=E5=95=86=E5=BA=97=E9=93=BA=E5=95=86=E5=93=81=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=8F=8A=E4=BB=A3=E7=90=86=E5=95=86=E5=BA=97=E9=93=BA?=
 =?UTF-8?q?=E5=95=86=E5=93=81=E5=88=97=E8=A1=A8=E7=80=91=E5=B8=83=E6=B5=81?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C=E8=B0=83=E6=95=B4=E4=B8=BA=E3=80=90uv-waterf?=
 =?UTF-8?q?all=E3=80=91=E7=80=91=E5=B8=83=E6=B5=81=E6=8F=92=E4=BB=B6?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/member/agent/myStore/myStore.vue    | 116 ++++++++++++++----
 .../member/distribution/myStore/myStore.vue   | 116 ++++++++++++++----
 2 files changed, 182 insertions(+), 50 deletions(-)

diff --git a/CoreCms.Net.Uni-App/CoreShop/pages/member/agent/myStore/myStore.vue b/CoreCms.Net.Uni-App/CoreShop/pages/member/agent/myStore/myStore.vue
index fac9e8a9..93eaf463 100644
--- a/CoreCms.Net.Uni-App/CoreShop/pages/member/agent/myStore/myStore.vue
+++ b/CoreCms.Net.Uni-App/CoreShop/pages/member/agent/myStore/myStore.vue
@@ -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;
diff --git a/CoreCms.Net.Uni-App/CoreShop/pages/member/distribution/myStore/myStore.vue b/CoreCms.Net.Uni-App/CoreShop/pages/member/distribution/myStore/myStore.vue
index b67cf74a..c59ed932 100644
--- a/CoreCms.Net.Uni-App/CoreShop/pages/member/distribution/myStore/myStore.vue
+++ b/CoreCms.Net.Uni-App/CoreShop/pages/member/distribution/myStore/myStore.vue
@@ -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;