From 9f94c2013a770efed674ddbf6ce72321d4b9426e Mon Sep 17 00:00:00 2001
From: Yer <17633066053@163.com>
Date: Fri, 22 Sep 2023 10:49:11 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=EF=BC=8C=E5=BA=97=E9=93=BA=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/lili-dialog/goods-dialog.vue   | 54 ++++++++++---------
 manager/src/components/lili-dialog/style.scss | 10 ++--
 .../components/lili-dialog/template/shops.vue | 35 +++++++-----
 3 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/manager/src/components/lili-dialog/goods-dialog.vue b/manager/src/components/lili-dialog/goods-dialog.vue
index 9d87e1fa..f5530563 100644
--- a/manager/src/components/lili-dialog/goods-dialog.vue
+++ b/manager/src/components/lili-dialog/goods-dialog.vue
@@ -46,10 +46,8 @@
         </div>
       </div>
       <div>
-        <Scroll
+        <div
           class="wap-content-list"
-          :on-reach-bottom="handleReachBottom"
-          :distance-to-edge="[3, 3]"
         >
           <div
             class="wap-content-item"
@@ -63,8 +61,8 @@
             </div>
             <div class="wap-content-desc">
               <div class="wap-content-desc-title">{{ item.goodsName }}</div>
-              <div class="wap-sku">{{ item.goodsUnit }}</div>
-              <div class="wap-sku"><Tag :color="item.salesModel === 'RETAIL' ? 'default' : 'geekblue'">{{item.salesModel === "RETAIL" ? "零售型" : "批发型"}}</Tag></div>
+
+              <div class="wap-sku">{{ item.goodsUnit }}<Tag style="margin-left: 10px;" :color="item.salesModel === 'RETAIL' ? 'default' : 'geekblue'">{{item.salesModel === "RETAIL" ? "零售型" : "批发型"}}</Tag></div>
               <div class="wap-content-desc-bottom">
                 <div>￥{{ item.price | unitPrice }}</div>
               </div>
@@ -73,7 +71,18 @@
           <Spin size="large" fix v-if="loading"></Spin>
 
           <div v-if="empty" class="empty">暂无商品信息</div>
-        </Scroll>
+        </div>
+        <Page
+          :total="total"
+          class="pageration"
+          @on-change="changePageSize"
+          :page-size="goodsParams.pageSize"
+          size="small"
+          show-total
+          show-elevator
+
+        >
+        </Page>
       </div>
     </div>
   </div>
@@ -89,7 +98,7 @@ export default {
       goodsParams: {
         // 商品请求参数
         pageNumber: 1,
-        pageSize: 18,
+        pageSize: 15,
         order: "desc",
         goodsName: "",
         sn: "",
@@ -135,17 +144,9 @@ export default {
     this.init();
   },
   methods: {
-    // 触底加载更多方法
-    handleReachBottom() {
-      setTimeout(() => {
-        if (
-          this.goodsParams.pageNumber * this.goodsParams.pageSize <=
-          this.total
-        ) {
-          this.goodsParams.pageNumber++;
-          this.getQueryGoodsList();
-        }
-      }, 1500);
+    changePageSize(v){
+      this.goodsParams.pageNumber = v;
+      this.getQueryGoodsList();
     },
     // 获取商品列表
     getQueryGoodsList() {
@@ -169,7 +170,7 @@ export default {
          * 解决数据请求中，滚动栏会一直上下跳动
          */
         this.total = res.result.total;
-        this.goodsData.push(...res.result.records);
+        this.goodsData = res.result.records;
       } else {
         this.empty = true;
       }
@@ -180,13 +181,11 @@ export default {
         // 商品
         this.initGoods(res);
       });
-      if (localStorage.getItem("category")) {
-        this.deepGroup(JSON.parse(localStorage.getItem("category")));
-      } else {
-        setTimeout(() => {
-          this.deepGroup(JSON.parse(localStorage.getItem("category")));
-        }, 3000);
-      }
+      API_Goods.getCategoryTree({deleteFlag: false}).then((res) => {
+        if (res.success) {
+          this.deepGroup(res.result);
+        }
+      });
     },
 
     deepGroup(val) {
@@ -271,7 +270,10 @@ export default {
   padding: 0;
 }
 .wap-content-list {
+  display: flex;
   position: relative;
+  flex-wrap: wrap;
+  height: 340px;
 }
 .wap-content-item {
   width: 210px;
diff --git a/manager/src/components/lili-dialog/style.scss b/manager/src/components/lili-dialog/style.scss
index 2e40c4fa..d4f866f9 100644
--- a/manager/src/components/lili-dialog/style.scss
+++ b/manager/src/components/lili-dialog/style.scss
@@ -21,7 +21,8 @@
   font-size: 12px;
   color: #999;
   overflow: hidden;
-
+  display: flex;
+  align-items: center;
   text-overflow: ellipsis;
 
   white-space: nowrap;
@@ -65,13 +66,16 @@
   background: #ededed;
 }
 
-
+.pageration {
+  text-align: right;
+  padding-right: 20px;
+}
 .wap-content-item {
 
   cursor: pointer;
 
   display: flex;
-  height: 100px;
+  height: 90px;
   padding: 2px;
   overflow: hidden;
   align-items: center;
diff --git a/manager/src/components/lili-dialog/template/shops.vue b/manager/src/components/lili-dialog/template/shops.vue
index fae0ad50..db841d38 100644
--- a/manager/src/components/lili-dialog/template/shops.vue
+++ b/manager/src/components/lili-dialog/template/shops.vue
@@ -13,7 +13,7 @@
         </div>
       </div>
       <div>
-        <Scroll class="wap-content-list" :on-reach-bottom="handleReachBottom" :distance-to-edge="23">
+        <div class="wap-content-list" >
           <div class="wap-content-item" @click="clickShop(item,index)" :class="{ active:selected == index }" v-for="(item, index) in shopsData" :key="index">
             <div>
               <img class="shop-logo" :src="item.storeLogo" alt="" />
@@ -26,7 +26,18 @@
             </div>
           </div>
           <Spin size="large" fix v-if="loading"></Spin>
-        </Scroll>
+        </div>
+        <Page
+          :total="total"
+          class="pageration"
+          @on-change="changePageSize"
+          :page-size="params.pageSize"
+          size="small"
+          show-total
+          show-elevator
+
+        >
+        </Page>
       </div>
     </div>
   </div>
@@ -40,7 +51,7 @@ export default {
       total: "", // 总数
       params: { // 请求参数
         pageNumber: 1,
-        pageSize: 10,
+        pageSize: 12,
         storeDisable: "OPEN",
         storeName: "",
       },
@@ -54,13 +65,9 @@ export default {
     this.init();
   },
   methods: {
-    handleReachBottom() {
-      setTimeout(() => {
-        if (this.params.pageNumber * this.params.pageSize <= this.total) {
-          this.params.pageNumber++;
-          this.init();
-        }
-      }, 1500);
+    changePageSize(v){
+      this.params.pageNumber = v;
+      this.init();
     },
     init() {
       this.loading = true;
@@ -71,7 +78,7 @@ export default {
            */
           this.total = res.result.total;
 
-          this.shopsData.push(...res.result.records);
+          this.shopsData = res.result.records;
 
           this.loading = false;
         }
@@ -95,13 +102,15 @@ export default {
   color: #999;
 }
 .wap-content-list {
+  display: flex;
   flex-wrap: wrap;
+  height: 340px;
 }
+
 .shop-logo {
   object-fit: cover;
 }
-.wap-content-item {
-}
+
 .active {
   background: url("../../../assets/selected.png") no-repeat;
   background-position: right;