From d01edbdfe2a3a2af10a9a8fcaab7956726b8d9ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E5=BE=88=E5=B7=AE=E5=95=A6?=
 <17633066053@163.com>
Date: Wed, 19 Oct 2022 11:56:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E6=A5=BC=E5=B1=82?=
 =?UTF-8?q?=E8=A3=85=E4=BF=AE=E6=96=B0=E5=A2=9E=E7=BB=91=E5=AE=9A=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/m-goods-list/base-list.vue    | 458 +++++++++++++----------
 pages/tabbar/home/index.vue              |   5 +
 pages/tabbar/home/template/tpl_goods.vue | 120 +++++-
 pages/tabbar/home/views.vue              |  11 +-
 4 files changed, 385 insertions(+), 209 deletions(-)

diff --git a/components/m-goods-list/base-list.vue b/components/m-goods-list/base-list.vue
index a64c302..bae5637 100644
--- a/components/m-goods-list/base-list.vue
+++ b/components/m-goods-list/base-list.vue
@@ -1,198 +1,276 @@
 <template>
-	<div>
-		<div v-for="(item, index) in res" :key="index" class="goods-row">
-			<div class="flex goods-col">
-				<div class="goods-img" @click="navigateToDetailPage(item)">
-					<u-image width="230rpx" border-radius='16' height="230rpx" :src="item.goodsImage || item.thumbnail">
-						<u-loading slot="loading"></u-loading>
-					</u-image>
-				</div>
-				<div class="goods-detail">
-					<div class="title clamp3" @click="navigateToDetailPage(item)">{{ item.goodsName }}</div>
-					<view class="price-box" @click="navigateToDetailPage(item)">
-						<div class="price" v-if="item.price!=undefined">
-							¥<span>{{ $options.filters.goodsFormatPrice(item.price )[0] }} </span>.{{
-			            $options.filters.goodsFormatPrice(item.price )[1]
-			          }}
-						</div>
-					</view>
-					<div class="promotion" @click="navigateToDetailPage(item)">
-						<div v-if="item.salesModel == 'WHOLESALE'">
-							<span>批</span>
-						</div>
-						<div v-for="(promotionItem,promotionIndex) in  getPromotion(item)" :key="promotionIndex">
-							<span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
-							<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
-							<span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
-						</div>
-					</div>
-					<div style="overflow: hidden" @click="navigateToDetailPage(item)" class="count-config">
-						<span style="float: left; font-size: 22rpx">已售 {{ item.buyCount || '0' }}</span>
-						<span style="float: right; font-size: 22rpx">{{ item.commentNum || '0' }}条评论</span>
-					</div>
-					
-				</div>
-			</div>
-
-		</div>
-	</div>
+  <div>
+    <!-- 一行两列商品展示 -->
+    <view class="goods-list" v-if="type == 'twoColumns'">
+      <view v-for="(item, index) in res" :key="index" class="goods-item">
+        <view class="image-wrapper" @click="navigateToDetailPage(item)">
+          <u-image
+            :src="item.thumbnail"
+            width="100%"
+            height="330rpx"
+            mode="aspectFill"
+          >
+            <u-loading slot="loading"></u-loading>
+          </u-image>
+        </view>
+        <view class="goods-detail">
+          <div
+            class="title clamp"
+            v-html="lightSearchStr(keyword, item.goodsName)"
+            @click="navigateToDetailPage(item)"
+          ></div>
+          <view class="price-box" @click="navigateToDetailPage(item)">
+            <div class="price" v-if="item.price != undefined">
+              ¥<span
+                >{{
+                  $options.filters.goodsFormatPrice(item.price)[0]
+                }} </span
+              >.{{ $options.filters.goodsFormatPrice(item.price)[1] }}
+            </div>
+          </view>
+          <div class="count-config" @click="navigateToDetailPage(item)">
+            <span>已售 {{ item.buyCount || "0" }}</span>
+            <span>{{ item.commentNum || "0" }}条评论</span>
+          </div>
+          <div
+            class="store-seller-name"
+            v-if="storeName"
+            @click="navigateToStoreDetailPage(item)"
+          >
+            <div class="text-hidden">
+              <u-tag
+                style="margin-right: 10rpx"
+                size="mini"
+                mode="dark"
+                v-if="item.selfOperated"
+                text="自营"
+                type="error"
+              />
+              <span>{{ item.storeName || "暂无" }}</span>
+            </div>
+            <span>
+              <u-icon name="arrow-right"></u-icon>
+            </span>
+          </div>
+        </view>
+      </view>
+    </view>
+	 <!-- 一行一列商品展示 -->
+    <div v-if="type == 'oneColumns'">
+      <div  v-for="(item, index) in res" :key="index" class="goods-row">
+        <div class="flex goods-col">
+          <div class="goods-img" @click="navigateToDetailPage(item)">
+            <u-image
+              width="230rpx"
+              border-radius="16"
+              height="230rpx"
+              :src="item.goodsImage || item.thumbnail"
+            >
+              <u-loading slot="loading"></u-loading>
+            </u-image>
+          </div>
+          <div class="goods-detail">
+            <div class="title clamp3" @click="navigateToDetailPage(item)">
+              {{ item.goodsName }}
+            </div>
+            <view class="price-box" @click="navigateToDetailPage(item)">
+              <div class="price" v-if="item.price != undefined">
+                ¥<span
+                  >{{ $options.filters.goodsFormatPrice(item.price)[0] }} </span
+                >.{{ $options.filters.goodsFormatPrice(item.price)[1] }}
+              </div>
+            </view>
+            <div class="promotion" @click="navigateToDetailPage(item)">
+              <div v-if="item.salesModel == 'WHOLESALE'">
+                <span>批</span>
+              </div>
+              <div
+                v-for="(promotionItem, promotionIndex) in getPromotion(item)"
+                :key="promotionIndex"
+              >
+                <span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
+                <span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1"
+                  >满减</span
+                >
+                <span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
+              </div>
+            </div>
+            <div
+              style="overflow: hidden"
+              @click="navigateToDetailPage(item)"
+              class="count-config"
+            >
+              <span style="float: left; font-size: 22rpx"
+                >已售 {{ item.buyCount || "0" }}</span
+              >
+              <span style="float: right; font-size: 22rpx"
+                >{{ item.commentNum || "0" }}条评论</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	import commonTpl from '@/components/m-goods-list/common'
-	export default {
-		data() {
-			return {
-				lightColor: this.$mainColor
-			}
-		},
-		mixins: [commonTpl],
-		props: {
-			// 遍历的数据
-			res: {
-				type: Array,
-				default: () => {
-					return []
-				}
-			},
-		},
-		methods:{
-			// 跳转到商品详情
-			navigateToDetailPage(item) {
-				uni.navigateTo({
-					url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
-				});
-			},
-		}
-	}
+import commonTpl from "@/components/m-goods-list/common";
+export default {
+  data() {
+    return {
+      lightColor: this.$mainColor,
+    };
+  },
+  mixins: [commonTpl],
+  props: {
+	// 展示的类型
+	type:{
+		type:String,
+		default:"oneColumns"
+	},
+    // 遍历的数据
+    res: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  methods: {
+    // 跳转到商品详情
+    navigateToDetailPage(item) {
+      uni.navigateTo({
+        url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
+      });
+    },
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .goods-list {
-			display: flex;
-			flex-wrap: wrap;
-			margin: 10rpx 20rpx 284rpx;
-			width: 100%;
-	
-			>.goods-item {
-				background-color: #ffffff;
-				display: flex;
-				border-radius: 16rpx;
-				flex-direction: column;
-				width: calc(50% - 30rpx);
-				margin-bottom: 20rpx;
-				padding-bottom: 20rpx;
-	
-				&:nth-child(2n + 1) {
-					margin-right: 20rpx;
-				}
-	
-	
-				.image-wrapper {
-					width: 100%;
-					height: 330rpx;
-					border-radius: 16rpx 16rpx 0 0;
-					overflow: hidden;
-					padding: 0;
-				}
-			}
-	
-			.count-config,
-			.store-seller-name {
-				font-size: $font-sm;
-			}
-	
-			.text-hidden {
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-			}
-		}
-	
-	
-		.goods-row {
-			background: #fff;
-			padding: 16rpx;
-	
-			>.goods-col {
-				display: flex;
-	
-				>.goods-img {
-					overflow: hidden;
-					flex: 4;
-				}
-	
-				>.goods-detail {
-					flex: 7;
-				}
-			}
-		}
-	
-		.goods-detail {
-			margin: 0 20rpx;
-	
-			>.title {
-				font-size: $font-base;
-				color: $font-color-dark;
-				line-height: 1.5;
-				height: 86rpx;
-				padding: 10rpx 0 0;
-				display: -webkit-box;
-				-webkit-box-orient: vertical;
-				-webkit-line-clamp: 2;
-				overflow: hidden;
-			}
-	
-			.promotion {
-				margin-top: 4rpx;
-				display: flex;
-	
-				div {
-					span {
-						font-size: 24rpx;
-						color: $light-color;
-						margin-right: 10rpx;
-						padding: 0 4rpx;
-						border-radius: 2rpx;
-					}
-				}
-			}
-	
-			.store-seller-name {
-				color: #666;
-				overflow: hidden;
-				display: flex;
-				justify-content: space-between;
-			}
-	
-			.count-config {
-				padding: 5rpx 0;
-				color: #666;
-				display: flex;
-				font-size: 24rpx;
-				justify-content: space-between;
-			}
-	
-			>.price-box {
-				margin-top: 10rpx;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				padding-right: 10rpx;
-				font-size: 24rpx;
-				color: $font-color-light;
-	
-				>.price {
-					font-size: 26rpx;
-					line-height: 1;
-					color: $main-color;
-					font-weight: bold;
-	
-					/deep/ span:nth-of-type(1) {
-						font-size: 38rpx;
-					}
-				}
-			}
-	
-		}
+  display: flex;
+  flex-wrap: wrap;
+  margin: 10rpx 20rpx 284rpx;
+  width: 100%;
+
+  > .goods-item {
+    background-color: #ffffff;
+    display: flex;
+    border-radius: 16rpx;
+    flex-direction: column;
+    width: calc(50% - 30rpx);
+    margin-bottom: 20rpx;
+    padding-bottom: 20rpx;
+
+    &:nth-child(2n + 1) {
+      margin-right: 20rpx;
+    }
+
+    .image-wrapper {
+      width: 100%;
+      height: 330rpx;
+      border-radius: 16rpx 16rpx 0 0;
+      overflow: hidden;
+      padding: 0;
+    }
+  }
+
+  .count-config,
+  .store-seller-name {
+    font-size: $font-sm;
+  }
+
+  .text-hidden {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.goods-row {
+  background: #fff;
+  padding: 16rpx;
+
+  > .goods-col {
+    display: flex;
+
+    > .goods-img {
+      overflow: hidden;
+      flex: 4;
+    }
+
+    > .goods-detail {
+      flex: 7;
+    }
+  }
+}
+
+.goods-detail {
+  margin: 0 20rpx;
+
+  > .title {
+    font-size: $font-base;
+    color: $font-color-dark;
+    line-height: 1.5;
+    height: 86rpx;
+    padding: 10rpx 0 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  .promotion {
+    margin-top: 4rpx;
+    display: flex;
+
+    div {
+      span {
+        font-size: 24rpx;
+        color: $light-color;
+        margin-right: 10rpx;
+        padding: 0 4rpx;
+        border-radius: 2rpx;
+      }
+    }
+  }
+
+  .store-seller-name {
+    color: #666;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .count-config {
+    padding: 5rpx 0;
+    color: #666;
+    display: flex;
+    font-size: 24rpx;
+    justify-content: space-between;
+  }
+
+  > .price-box {
+    margin-top: 10rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 10rpx;
+    font-size: 24rpx;
+    color: $font-color-light;
+
+    > .price {
+      font-size: 26rpx;
+      line-height: 1;
+      color: $main-color;
+      font-weight: bold;
+
+      /deep/ span:nth-of-type(1) {
+        font-size: 38rpx;
+      }
+    }
+  }
+}
 </style>
diff --git a/pages/tabbar/home/index.vue b/pages/tabbar/home/index.vue
index cbeebf5..ea9406e 100644
--- a/pages/tabbar/home/index.vue
+++ b/pages/tabbar/home/index.vue
@@ -15,6 +15,11 @@ export default {
       },
     };
   },
+  onReachBottom(){
+    // 给子级监听触底加载
+    uni.$emit('onReachBottom',true)
+  },
+  
   onPullDownRefresh() {
     this.$refs.tpl.init();
 
diff --git a/pages/tabbar/home/template/tpl_goods.vue b/pages/tabbar/home/template/tpl_goods.vue
index 98f6b15..9075aa0 100644
--- a/pages/tabbar/home/template/tpl_goods.vue
+++ b/pages/tabbar/home/template/tpl_goods.vue
@@ -1,21 +1,38 @@
-
 <template>
   <div class="layout">
     <u-sticky>
       <div class="goods-cell-title">
-        <div class="goods-item-title" :class="{ 'selected-title': selected.index == index }"
-          @click="handleClickTitle(title, index)" v-for="(title, index) in res.list[0].titleWay" :key="index">
+        <div
+          class="goods-item-title"
+          :class="{ 'selected-title': selected.index == index }"
+          @click="handleClickTitle(title, index)"
+          v-for="(title, index) in res.list[0].titleWay"
+          :key="index"
+        >
           <h4 class="h4">{{ title.title }}</h4>
           <div>{{ title.desc }}</div>
         </div>
       </div>
     </u-sticky>
     <div class="goods-list">
-      <div v-if="item.___index != undefined  ?   (selected.index == item.___index) : ( selected.val == item.type)"
-        @click="handleClick(item)" class="goods-item" v-for="(item, item_index) in res.list[0].listWay"
-        :key="item_index">
+      <div
+        v-if="
+          item.___index != undefined
+            ? selected.index == item.___index
+            : selected.val == item.type
+        "
+        @click="handleClick(item)"
+        class="goods-item"
+        v-for="(item, item_index) in res.list[0].listWay"
+        :key="item_index"
+      >
         <div class="goods-img">
-          <u-image :src="item.img" height="350rpx" mode="aspectFit" width="100%">
+          <u-image
+            :src="item.img"
+            height="350rpx"
+            mode="aspectFit"
+            width="100%"
+          >
             <u-loading slot="loading"></u-loading>
           </u-image>
         </div>
@@ -24,9 +41,42 @@
             {{ item.title }}
           </div>
           <div class="goods-bottom">
-            <div class="goods-price">	¥<span>{{ $options.filters.goodsFormatPrice(item.price )[0] }} </span>.{{
-										$options.filters.goodsFormatPrice(item.price)[1]
-									}}</div>
+            <div class="goods-price">
+              ¥<span
+                >{{ $options.filters.goodsFormatPrice(item.price)[0] }} </span
+              >.{{ $options.filters.goodsFormatPrice(item.price)[1] }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="res.list[0].titleWay[selected.index].bindCategory && goodsData.length"
+        v-for="(item, index) in goodsData"
+        :key="index"
+        class="goods-item"
+        @click="handleClick(item)"
+      >
+        <div class="goods-img">
+          <u-image
+            :src="item.thumbnail"
+            height="350rpx"
+            mode="aspectFit"
+            width="100%"
+          >
+            <u-loading slot="loading"></u-loading>
+          </u-image>
+        </div>
+        <div class="goods-desc">
+          <div class="goods-title">
+            {{ item.goodsName }}
+          </div>
+          <div class="goods-bottom">
+            <div class="goods-price">
+              ¥<span
+                >{{ $options.filters.goodsFormatPrice(item.price)[0] }} </span
+              >.{{ $options.filters.goodsFormatPrice(item.price)[1] }}
+            </div>
           </div>
         </div>
       </div>
@@ -34,6 +84,7 @@
   </div>
 </template>
 <script>
+import { getGoodsList } from "@/api/goods.js";
 export default {
   title: "商品分类以及商品",
   data() {
@@ -42,21 +93,43 @@ export default {
         index: 0,
         val: "",
       },
+      params: {
+        pageNumber: 1,
+        pageSize: 100,
+        categoryId: "",
+      },
+      goodsData: [], //商品循环内容
+      goodsResult:"", //es总返回内容
     };
   },
-  props: ["res"],
+  props: ["res","enableBottomLoad"],
   watch: {
     res: {
       handler(val) {
         // 监听父级的值 如果有值将值赋给selected
         if (val) {
-          this.selected.val = this.res.list[0].listWay[0].type;
+          console.log(val)
+          // 如果第一个标签页绑定为商品
+          this.selected.val = this.res.list[0].listWay[0] ? this.res.list[0].listWay[0].type: '';
+          // 如果第一个标签为绑定为分类
+          this.res.list[0].titleWay[0].bindCategory ? this.initGoods(this.res.list[0].titleWay[0]) : ''
         }
       },
       immediate: true,
     },
   },
-  mounted() {},
+  mounted() {
+    uni.$on('onReachBottom',()=>{
+      if(this.enableBottomLoad && this.goodsResult.totalElements >= this.params.pageNumber * this.params.pageSize){
+        this.params.pageNumber++
+        this.initGoods(this.res.list[0].titleWay[this.selected.index])
+      }
+      
+    })
+  },
+  destroyed(){
+    uni.$off('onReachBottom')
+  },
   methods: {
     handleClick(item) {
       uni.navigateTo({
@@ -66,9 +139,25 @@ export default {
     closeGoods(val, index) {
       this.res.list[0].listWay.splice(index, 1);
     },
+    async initGoods(val) {
+      if(this.enableBottomLoad) this.params.pageSize = 20
+      val ? this.params.categoryId = val.bindCategory.id : '';
+      const res = await getGoodsList(this.params);
+      if (res.data.success) {
+        this.goodsResult = res.data.result
+        const result = res.data.result.content.map(item=>item.content)
+        this.goodsData.push(...result);
+        console.log(this.goodsData)
+      }
+    },
     handleClickTitle(val, index) {
       this.selected.index = index;
       this.selected.val = val.title;
+      if (val.bindCategory) {
+        this.params.pageNumber = 1
+        this.goodsData = []
+        this.initGoods(val);
+      }
     },
   },
 };
@@ -151,7 +240,7 @@ $w_94: 94%;
   margin: 0 auto;
   > .goods-title {
     font-size: 24rpx;
-    height: 70rpx;
+    height: 67rpx;
     display: -webkit-box;
     font-weight: 500;
     -webkit-box-orient: vertical;
@@ -165,11 +254,10 @@ $w_94: 94%;
     > .goods-price {
       line-height: 2;
       color: $main-color;
-      >span{
+      > span {
         font-size: 42rpx;
       }
     }
   }
 }
-
 </style>
diff --git a/pages/tabbar/home/views.vue b/pages/tabbar/home/views.vue
index 414a9ec..e5b93b4 100644
--- a/pages/tabbar/home/views.vue
+++ b/pages/tabbar/home/views.vue
@@ -42,7 +42,7 @@
       <textPicture v-if="item.type == 'textPicture'" :res="item.options" />
       <menuLayout v-if="item.type == 'menu'" :res="item.options" />
       <flexOne v-if="item.type == 'flexOne'" :res="item.options" />
-      <goods v-if="item.type == 'goods'" :res="item.options" />
+      <goods :enableBottomLoad="enableLoad" v-if="item.type == 'goods'" :res="item.options" />
       <group v-if="item.type == 'group'" :res="item.options" />
       <notice v-if="item.type == 'notice'" :res="item.options" />
       <promotions v-if="item.type == 'promotionDetail'" :res="item.options" />
@@ -85,6 +85,7 @@ export default {
       config,
       pageData: "", //楼层页面数据
       isIos: "",
+      enableLoad:false, //触底加载 针对于商品模块
     };
   },
   components: {
@@ -124,8 +125,12 @@ export default {
       this.pageData = "";
       getFloorData().then((res) => {
         if (res.data.success) {
-          this.pageData = JSON.parse(res.data.result.pageData);
-          console.log(this.pageData);
+          const result = JSON.parse(res.data.result.pageData)
+          this.pageData = result;
+          if(result.list.length){
+            // 如果最后一个装修模块是商品模块的话 默认启用自动加载
+            result.list[result.list.length-1] ? result.list[result.list.length-1].model == 'goods' ? this.enableLoad = true : '' : ''
+         }
         }
       });
     },