From 73e4ba9994b0fb520b7431f7f629ab547052c746 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?lemon=E6=A9=AA?= <17633066053@163.com>
Date: Mon, 30 May 2022 16:37:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85=E5=95=86=E5=93=81=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E6=A8=A1=E5=9D=97=EF=BC=8C=E5=85=A8=E5=B1=80=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E7=AE=A1=E7=90=86=E6=A0=BC=E5=BC=8F=EF=BC=8C=E5=B0=86?=
 =?UTF-8?q?=E6=97=A7=E7=89=88=E5=95=86=E5=93=81=E5=B1=95=E7=A4=BA=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E4=BC=98=E5=8C=96=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/m-goods-list/README.md             |  10 +
 components/m-goods-list/list.vue              | 293 ++++++++++++++++++
 components/m-goods-recommend/index.vue        |  21 +-
 pages/navigation/search/search.scss           | 180 -----------
 pages/navigation/search/searchPage.vue        |  96 +-----
 .../product/goods/-goods-recommend.vue        | 161 +---------
 pages/product/shopPage.vue                    |  64 +---
 pages/product/shopPageGoods.vue               | 204 +++++-------
 8 files changed, 402 insertions(+), 627 deletions(-)
 create mode 100644 components/m-goods-list/README.md
 create mode 100644 components/m-goods-list/list.vue

diff --git a/components/m-goods-list/README.md b/components/m-goods-list/README.md
new file mode 100644
index 0000000..74fa4c2
--- /dev/null
+++ b/components/m-goods-list/README.md
@@ -0,0 +1,10 @@
+## 商品列表展示
+
+### OBJECT 参数说明
+
+| 属性        | 说明                                                       | 类型    | 必填 |
+| ----------- | ---------------------------------------------------------- | ------- | ---- |
+| `res`       | 显示数据                                                   | Array   | 是   |
+| `type`      | 商品展示类型 oneColumns twoColumns  ，默认展示一行两列商品 | String  | 否   |
+| `storeName` | 是否展示店铺名称，默认展示                                 | Boolean | 否   |
+
diff --git a/components/m-goods-list/list.vue b/components/m-goods-list/list.vue
new file mode 100644
index 0000000..55446b7
--- /dev/null
+++ b/components/m-goods-list/list.vue
@@ -0,0 +1,293 @@
+<template>
+	<view>
+		<!-- 一行两列商品展示 -->
+		<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.content.thumbnail" width="100%" height='330rpx' mode="aspectFill">
+						  <u-loading slot="loading"></u-loading>
+					</u-image>
+				</view>
+				<view class="goods-detail">
+					<div class="title clamp" @click="navigateToDetailPage(item)">{{ item.content.goodsName }}</div>
+					<view class="price-box" @click="navigateToDetailPage(item)">
+						<div class="price" v-if="item.content.price!=undefined">
+							¥<span>{{ formatPrice(item.content.price )[0] }} </span>.{{
+	            formatPrice(item.content.price )[1]
+	          }}
+						</div>
+					</view>
+					<div class="promotion" @click="navigateToDetailPage(item)">
+						<div v-if="item.content.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 class="count-config" @click="navigateToDetailPage(item)">
+						<span>已售 {{ item.content.buyCount || "0" }}</span>
+						<span>{{ item.content.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.content.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.content.thumbnail">
+							<u-loading slot="loading"></u-loading>
+						</u-image>
+					</div>
+					<div class="goods-detail">
+						<div class="title clamp3" @click="navigateToDetailPage(item)">{{ item.content.goodsName }}</div>
+						<view class="price-box" @click="navigateToDetailPage(item)">
+							<div class="price" v-if="item.content.price!=undefined">
+								¥<span>{{ formatPrice(item.content.price )[0] }} </span>.{{
+			            formatPrice(item.content.price )[1]
+			          }}
+							</div>
+						</view>
+						<div class="promotion" @click="navigateToDetailPage(item)">
+							<div v-if="item.content.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.content.buyCount || '0' }}</span>
+							<span style="float: right; font-size: 22rpx">{{ item.content.commentNum || '0' }}条评论</span>
+						</div>
+						<div style="overflow: hidden" @click="navigateToStoreDetailPage(item)" class="count-config">
+							<div class="text-hidden" v-if="storeName">
+								<u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated"
+									text="自营" type="error" />
+								<span class="line1-store-name">{{ item.content.storeName }}</span>
+								<span class="to-store">进店<u-icon size="24" name="arrow-right" color="#666"></u-icon>
+								</span>
+							</div>
+							<span>
+								<u-icon name="arrow-right" color="#c5c5c5"></u-icon>
+							</span>
+						</div>
+					</div>
+				</div>
+
+			</div>
+		</div>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {}
+		},
+		props: {
+			// 遍历的数据
+			res: {
+				type: Array,
+				default: () => {
+					return []
+				}
+			},
+			// 一行两列还是一行一列显示
+			type: {
+				type: String,
+				default: 'twoColumns',
+				validator() {
+					return ['twoColumns', 'oneColumns']
+				}
+			},
+			storeName: {
+				type: Boolean,
+				default: true
+			}
+
+		},
+		methods: {
+			// 格式化金钱  1999 --> [1999,00]
+			formatPrice(val) {
+				if (typeof val == "undefined") {
+					return val;
+				}
+				return val.toFixed(2).split(".");
+			},
+
+			// 数据去重一下 只显示一次 减免 劵 什么的
+			getPromotion(item) {
+				if (item.promotionMap) {
+					let array = [];
+					Object.keys(item.promotionMap).forEach((child) => {
+						if (!array.includes(child.split("-")[0])) {
+							array.push(child.split("-")[0]);
+						}
+					});
+					return array;
+				}
+			},
+			// 跳转到商品详情
+			navigateToDetailPage(item) {
+				uni.navigateTo({
+					url: `/pages/product/goods?id=${item.content.id}&goodsId=${item.content.goodsId}`,
+				});
+			},
+			// 跳转地址
+			navigateToStoreDetailPage(item) {
+				uni.navigateTo({
+					url: `/pages/product/shopPage?id=${item.content.storeId}`,
+				});
+			},
+		}
+	}
+</script>
+
+<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: 84rpx;
+			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/components/m-goods-recommend/index.vue b/components/m-goods-recommend/index.vue
index dbd5815..8f60967 100644
--- a/components/m-goods-recommend/index.vue
+++ b/components/m-goods-recommend/index.vue
@@ -1,27 +1,11 @@
 <template>
   <div>
     <div class="goods-recommend">{{title ? `--${title}-- `:''}}</div>
-    <div class="goods-list">
-      <div @click="handleClick(item)" class="goods-item" v-for="(item, item_index) in goodsList" :key="item_index">
-        <div class="goods-img">
-          <u-image :src="item.content.thumbnail" mode="aspectFill" height="350rpx" width="100%">
-            <u-loading slot="loading"></u-loading>
-          </u-image>
-        </div>
-        <div class="goods-desc">
-          <div class="goods-title">
-            {{ item.content.goodsName }}
-          </div>
-          <div class="goods-bottom">
-            <div class="goods-price">￥{{ item.content.price | unitPrice }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
+		 <goodsTemplate :res='goodsList' />
   </div>
 </template>
-
 <script>
+	import goodsTemplate from '@/components/m-goods-list/list'
 import { getGoodsList } from "@/api/goods.js";
 export default {
   data() {
@@ -50,6 +34,7 @@ export default {
       default: "",
     },
   },
+	components:{goodsTemplate},
   mounted() {
     this.initGoods();
   },
diff --git a/pages/navigation/search/search.scss b/pages/navigation/search/search.scss
index a3efed1..6985233 100644
--- a/pages/navigation/search/search.scss
+++ b/pages/navigation/search/search.scss
@@ -22,19 +22,6 @@
   }
 }
 
-.promotion {
-  margin-top: 4rpx;
-  display: flex;
-  div {
-    span {
-      font-size: 24rpx;
-      color: $light-color;
-      margin-right: 10rpx;
-      padding: 0 4rpx;
-      border-radius: 2rpx;
-    }
-  }
-}
 .status_bar {
   height: var(--status-bar-height);
   background: #fff !important;
@@ -437,180 +424,13 @@ view {
       margin-left: 4rpx;
       font-size: 26rpx;
       color: #888;
-
-    
     }
 
     .xia {
       transform: scaleY(-1);
     }
   }
-
-  .cate-item {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 80rpx;
-    position: relative;
-    font-size: 44rpx;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      border-left: 1px solid #ddd;
-      width: 0;
-      height: 36rpx;
-    }
-  }
 }
-
-/* 分类 */
-.cate-mask {
-  position: fixed;
-  left: 0;
-  top: var(--window-top);
-  bottom: 0;
-  width: 100%;
-  background: rgba(0, 0, 0, 0);
-  z-index: 95;
-  transition: 0.3s;
-
-  .cate-content {
-    width: 630rpx;
-    height: 100%;
-    background: #fff;
-    float: right;
-    transform: translateX(100%);
-    transition: 0.3s;
-  }
-
-  &.none {
-    display: none;
-  }
-
-  &.show {
-    background: rgba(0, 0, 0, 0.4);
-
-    .cate-content {
-      transform: translateX(0);
-    }
-  }
-}
-
-.cate-list {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  .cate-item {
-    display: flex;
-    align-items: center;
-    height: 90rpx;
-    padding-left: 30rpx;
-    font-size: 28rpx;
-    color: #555;
-    position: relative;
-  }
-
-  .two {
-    height: 64rpx;
-    color: #303133;
-    font-size: 30rpx;
-    background: #f8f8f8;
-  }
-}
-.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;
-  }
-}
-/* 商品列表 */
-.goods-list {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 10rpx 20rpx 284rpx;
-
-
-  // background: #fff;
-  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;
-    }
-
-    .goods-detail {
-      margin: 0 20rpx;
-    }
-  }
-
-  .image-wrapper {
-    width: 100%;
-    height: 330rpx;
-    border-radius: 16rpx 16rpx 0 0;
-    overflow: hidden;
-    padding: 0;
-    image {
-      width: 100%;
-      height: 100%;
-      opacity: 1;
-      border-radius: 16rpx 16rpx 0 0;
-    }
-  }
-
-  .title {
-    font-size: $font-base;
-    color: $font-color-dark;
-    line-height: 1.5;
-    height: 84rpx;
-    padding: 10rpx 0 0;
-    display: -webkit-box;
-
-    -webkit-box-orient: vertical;
-
-    -webkit-line-clamp: 2;
-
-    overflow: hidden;
-  }
-
-  .count-config,
-  .store-seller-name {
-    font-size: $font-sm;
-  }
-
-  .text-hidden {
-    
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
 .status_bar {
   height: var(--status-bar-height);
   width: 100%;
diff --git a/pages/navigation/search/searchPage.vue b/pages/navigation/search/searchPage.vue
index 5aa2f2a..5cbc9f6 100644
--- a/pages/navigation/search/searchPage.vue
+++ b/pages/navigation/search/searchPage.vue
@@ -82,50 +82,7 @@
       <div v-if="isSWitch">
         <scroll-view :style="{ height: goodsHeight }" enableBackToTop="true" lower-threshold="250"
           @scrolltolower="loadmore()" scroll-with-animation scroll-y class="scoll-page">
-          <div class="goods-class">
-            <div v-for="(item, index) in goodsList" :key="index" class="goods-row">
-              <div class="flex goods-col">
-                <div class="goods-img" @click="navigateToDetailPage(item)">
-                  <u-image width="230rpx" height="230rpx" :src="item.content.thumbnail">
-                    <u-loading slot="loading"></u-loading>
-                  </u-image>
-                </div>
-                <div class="goods-detail">
-                  <div class="title clamp3" @click="navigateToDetailPage(item)">{{ item.content.goodsName }}</div>
-                  <view class="price-box" @click="navigateToDetailPage(item)">
-                    <div class="price" v-if="item.content.price!=undefined">
-                      ¥<span>{{ formatPrice(item.content.price )[0] }} </span>.{{
-                      formatPrice(item.content.price )[1]
-                    }}
-                    </div>
-                  </view>
-                  <div class="promotion" @click="navigateToDetailPage(item)">
-                    <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.content.buyCount || '0' }}</span>
-                    <span style="float: right; font-size: 22rpx">{{ item.content.commentNum || '0' }}条评论</span>
-                  </div>
-                  <div style="overflow: hidden" @click="navigateToStoreDetailPage(item)" class="count-config">
-                    <div class="text-hidden">
-                      <u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated" text="自营"
-                        type="error" />
-                      <span class="line1-store-name">{{ item.content.storeName }}</span>
-                      <span class="to-store">进店<u-icon size="24" name="arrow-right" color="#666"></u-icon></span>
-                    </div>
-                    <span>
-                      <u-icon name="arrow-right" color="#c5c5c5"></u-icon>
-                    </span>
-                  </div>
-                </div>
-              </div>
-
-            </div>
-          </div>
+          <goodsList :res='goodsList' type='oneColumns' />
           <uni-load-more :status="loadingType" @loadmore="loadmore()"></uni-load-more>
         </scroll-view>
       </div>
@@ -136,49 +93,7 @@
         ">
         <scroll-view :style="{ height: goodsHeight }" scroll-anchoring enableBackToTop="true"
           @scrolltolower="loadmore()" scroll-with-animation scroll-y lower-threshold="250" class="scoll-page">
-          <view class="goods-list">
-            <view v-for="(item, index) in goodsList" :key="index" class="goods-item">
-              <view class="image-wrapper" @click="navigateToDetailPage(item)">
-                <image :src="item.content.thumbnail" mode="aspectFill"></image>
-              </view>
-              <view class="goods-detail">
-                <div class="title clamp" @click="navigateToDetailPage(item)">{{ item.content.goodsName }}</div>
-                <view class="price-box" @click="navigateToDetailPage(item)">
-                  <div class="price" v-if="item.content.price!=undefined">
-                    ¥<span>{{ formatPrice(item.content.price )[0] }} </span>.{{
-                      formatPrice(item.content.price )[1]
-                    }}
-                  </div>
-                </view>
-
-                <div class="promotion" @click="navigateToDetailPage(item)">
-									<div v-if="item.content.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 class="count-config" @click="navigateToDetailPage(item)">
-                  <span>已售 {{ item.content.buyCount || "0" }}</span>
-                  <span>{{ item.content.commentNum || "0" }}条评论</span>
-                </div>
-                <div class="store-seller-name" @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.content.storeName || "暂无" }}</span>
-                  </div>
-                  <span>
-                    <u-icon name="arrow-right"></u-icon>
-                  </span>
-                </div>
-              </view>
-            </view>
-          </view>
+					<goodsList :res='goodsList' />
           <uni-load-more :status="loadingType"></uni-load-more>
         </scroll-view>
       </div>
@@ -277,7 +192,7 @@
 
 <script>
 import { getGoodsList, getGoodsRelated } from "@/api/goods.js";
-
+import goodsList from '@/components/m-goods-list/list.vue'
 import { getHotKeywords } from "@/api/home.js";
 import mSearch from "@/components/m-search-revision/m-search-revision.vue";
 import storage from "@/utils/storage";
@@ -343,6 +258,7 @@ export default {
       routerVal: "",
     };
   },
+	
   onPageScroll(e) {
     console.log(e);
     this.scrollTop = e.scrollTop;
@@ -375,6 +291,7 @@ export default {
   },
   components: {
     mSearch,
+		goodsList
   },
   watch: {
     /**
@@ -766,6 +683,9 @@ export default {
     doSearchSwitch() {
       this.isSWitch = !this.isSWitch;
       this.isShowSeachGoods = true;
+			this.params.pageNumber = 1 
+			this.params.pageSize = 10
+			this.loadData("refresh", 1);
     },
 
     /**
diff --git a/pages/product/product/goods/-goods-recommend.vue b/pages/product/product/goods/-goods-recommend.vue
index c05de1e..3e3dadc 100644
--- a/pages/product/product/goods/-goods-recommend.vue
+++ b/pages/product/product/goods/-goods-recommend.vue
@@ -1,169 +1,20 @@
 <template>
   <view class="recommend-box" >
     <h4 class="goods-recommend-title">宝贝推荐</h4>
-    <view class="like-goods-list">
-      <view class="like-goods-list">
-        <view
-          class="like-goods-item"
-          @click="clickGoods(item)"
-          v-for="(item, index) in res"
-          :key="index"
-        >
-          <u-image
-            :fade="true"
-            duration="450"
-            :lazy-load="true"
-            :src="item.content.thumbnail"
-            width="330rpx"
-            height="330rpx"
-            class="like-goods-uimage"
-          >
-            <u-loading slot="loading"></u-loading>
-          </u-image>
-          <view style="background-color: #ffffff; width: 100%">
-            <view class="name">{{ item.content.goodsName }}</view>
-            <view class="price-sales">
-              <div class="item-price" v-if="item.content.price != undefined">
-                ￥
-                <span>{{ formatPrice(item.content.price)[0] }}</span>
-                .{{formatPrice(item.content.price)[1]}}
-                <!-- <text v-if="item.point != undefined">+{{ item.point }}积分</text> -->
-              </div>
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
+		<goodsList :res='res' :storeName="false" />
+	 </view>
 </template>
 
-<script>
+<script>
+import goodsList from '@/components/m-goods-list/list.vue'
 export default {
-  props: ["res"],
+  props: ["res"],
+	components:{goodsList},
   methods: {
-    // 点击店铺推荐
-    clickGoods(val) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${val.content.id}&goodsId=${val.content.goodsId}`
-      });
-    },
-    // 格式化金钱  1999 --> [1999,00]
-    formatPrice(val) {
-      if (typeof val == "undefined") {
-        return val;
-      }
-  
-      return val.toFixed(2).split(".");
     }
-  }
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../mp-goods.scss";
 @import "../product.scss";
-
-.goods_recomm {
-  padding: 12px 0 20rpx 20rpx;
-  color: #000;
-  font-size: 30rpx;
-  font-weight: 400;
-  margin-bottom: 28rpx;
-}
-
-.like-goods-uimage {
-  /deep/ .u-image {
-    height: 350rpx !important;
-  }
-
-  width: 100%;
-}
-
-.recommend-box {
-  background-color: #ffffff;
- 
-  width: 100%;
-
-  padding-bottom: 120rpx;
-
-  .title {
-    width: 120rpx;
-    height: 42rpx;
-    font-size: 30rpx;
-    font-weight: 700;
-    text-align: left;
-    color: #333333;
-    margin-left: 20rpx;
-  }
-}
-.like-goods-list {
-  display: flex;
-  width: 100%;
-  flex-wrap: wrap;
-}
-.like-goods-item {
-  padding: 0 !important;
-  width: 48%;
-  margin: 0 1% 10rpx 1%;
-  background: #f7f7f7;
-  border-radius: 12rpx;
-
-  overflow: hidden;
-
-  /deep/ .u-image {
-    width: 100%;
-  }
-}
-
-.like-goods-list {
-  // background-color: #f8f8f8;
-  width: 100%;
-  margin-bottom: 100rpx;
-
-  .name {
-    padding: 14rpx 8rpx 0 8rpx;
-
-    color: #333;
-    font-size: 24rpx;
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-
-    -webkit-line-clamp: 2;
-
-    background: #f7f7f7;
-    height: 80rpx;
-  }
-
-  .price-sales {
-    padding: 8rpx;
-    background: #f7f7f7;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .item-price {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-size: 26rpx;
-      text-align: left;
-      color: $price-color;
-      line-height: 23px;
-      font-weight: bold;
-      > span {
-        font-size: 32rpx;
-      }
-    }
-
-    .sales {
-      line-height: 23px;
-      font-size: 22rpx;
-      text-align: left;
-      letter-spacing: 0;
-      color: #cccccc;
-      // padding-right: 10rpx;
-    }
-  }
-}
 </style>
diff --git a/pages/product/shopPage.vue b/pages/product/shopPage.vue
index 07f050c..161bcf6 100644
--- a/pages/product/shopPage.vue
+++ b/pages/product/shopPage.vue
@@ -60,18 +60,7 @@
     <!-- 商品 -->
     <div class="contant" v-if="current == 0">
       <view v-if="!goodsList.length" class="empty">暂无商品信息</view>
-      <view v-else class="item" v-for="(item,index) in goodsList" :key="index" @click="navigateToGoodsDetail(item)">
-        <u-image width="100%" height="330rpx" mode="aspectFit" :src="item.content.thumbnail">
-          <u-loading slot="loading"></u-loading>
-        </u-image>
-        <div class="name wes-2">{{ item.content.goodsName }}</div>
-        <div class="price">
-          <div>￥{{ item.content.price | unitPrice }}</div>
-        </div>
-        <view class="buyCount">
-          <div>已售 {{ item.content.buyCount || "0" }}</div>
-        </view>
-      </view>
+			<goodsTemplate :res="goodsList" :storeName="false" />
     </div>
     <!-- 全部分类 -->
     <div class="category" v-if="current == 1">
@@ -94,7 +83,8 @@
 </template>
 
 <script>
-import { getStoreBaseInfo, getStoreCategory } from "@/api/store.js";
+import { getStoreBaseInfo, getStoreCategory } from "@/api/store.js";
+import goodsTemplate from '@/components/m-goods-list/list'
 import {
   receiveCoupons,
   deleteStoreCollection,
@@ -128,7 +118,8 @@ export default {
     current(val) {
       val == 0 ? ()=>{ this.goodsList = []; this.getGoodsData()} : this.getCategoryData();
     },
-  },
+  },
+	components:{goodsTemplate},
 
   /**
    * 加载
@@ -277,15 +268,6 @@ export default {
       }
     },
 
-    /**
-     * 跳转到商品详情
-     */
-    navigateToGoodsDetail(val) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${val.content.id}&goodsId=${val.content.goodsId}`,
-      });
-    },
-
     /**
      *  是否收藏
      */
@@ -404,42 +386,6 @@ export default {
     justify-content: center;
     margin-top: 40rpx;
   }
-  .item {
-    overflow: hidden;
-
-    background: #fff;
-    width: 49%;
-    height: 484rpx;
-    font-size: 26rpx;
-    display: flex;
-    flex-direction: column;
-    border: 1px solid #f8f8f8;
-    margin-bottom: 20rpx;
-
-    .name {
-      text-align: left !important;
-      color: #333;
-      padding: 0 20rpx;
-      margin-top: 20rpx;
-      height: 80rpx;
-      overflow: hidden;
-    }
-    .price {
-      font-weight: 500;
-      color: $main-color;
-      font-size: 30rpx;
-      padding: 0 20rpx;
-      margin-top: 20rpx;
-      white-space: nowrap;
-    }
-    .buyCount {
-      display: flex;
-      padding: 0 20rpx;
-      font-size: 24upx;
-      justify-content: space-between;
-      color: #999;
-    }
-  }
 }
 .discount {
   height: 154rpx;
diff --git a/pages/product/shopPageGoods.vue b/pages/product/shopPageGoods.vue
index 91ec53b..7780148 100644
--- a/pages/product/shopPageGoods.vue
+++ b/pages/product/shopPageGoods.vue
@@ -1,127 +1,77 @@
-<template>
-  <div>
-    <u-navbar :title="title"></u-navbar>
-    <!-- 商品 -->
-    <div class="contant">
-      <view v-if="!goodsList.length" class="empty">暂无商品信息</view>
-      <view v-else class="item" v-for="(item,index) in goodsList" :key="index" @click="navigateToGoodsDetail(item)">
-        <u-image width="100%" mode="aspectFit" height="324rpx" :src="item.content.thumbnail">
-          <u-loading slot="loading"></u-loading>
-        </u-image>
-        <div class="name">{{ item.content.goodsName }}</div>
-        <div class="price">
-          <div>￥{{ item.content.price | unitPrice }}</div>
-        </div>
-        <view class="buyCount">
-          <div>已售 {{ item.content.buyCount || "0" }}</div>
-        </view>
-      </view>
-    </div>
-  </div>
-
-</template>
-
-<script>
-import { getGoodsList } from "@/api/goods.js";
-export default {
-  data() {
-    return {
-      title: "",
-      routerVal: "",
-      goodsList: [],
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-        keyword: "",
-        storeCatId: "",
-        storeId: "",
-      },
-    };
-  },
-  onLoad(options) {
-    this.routerVal = options;
-    this.params.storeId = options.storeId;
-    this.params.storeCatId = options.id;
-    this.title = options.title;
-  },
-  onShow() {
-    this.goodsList =[]
-    this.params.pageNumber = 1;
-    this.getGoodsData();
-  },
-  onReachBottom(){
-    this.params.pageNumber ++;
-    this.getGoodsData();
-  },
-  methods: {
-    /**
-     * 跳转到商品详情
-     */
-    navigateToGoodsDetail(val) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${val.content.id}&goodsId=${val.content.goodsId}`,
-      });
-    },
-
-    async getGoodsData() {
-      // #TODO
-      let goodsList = await getGoodsList(this.params);
-      if (goodsList.data.success) {
-        this.goodsList.push(...goodsList.data.result.content);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.contant {
-  margin-top: 20rpx;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  > .empty {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    margin-top: 40rpx;
-  }
-  .item {
-    overflow: hidden;
-
-    background: #fff;
-    width: 49%;
-    height: 484rpx;
-    font-size: 26rpx;
-    display: flex;
-    flex-direction: column;
-    border: 1px solid #f8f8f8;
-    margin-bottom: 20rpx;
-
-    .name {
-      text-align: left !important;
-      color: #333;
-      padding: 0 20rpx;
-      margin-top: 20rpx;
-      line-height: 1.4em;
-      max-height: 2.8em; //height是line-height的整数倍，防止文字显示不全
-      overflow: hidden;
-    }
-    .price {
-      font-weight: 500;
-      color: $main-color;
-      font-size: 30rpx;
-      padding: 0 20rpx;
-      margin-top: 20rpx;
-      white-space: nowrap;
-    }
-    .buyCount {
-      display: flex;
-      padding: 0 20rpx;
-      font-size: 24upx;
-      justify-content: space-between;
-      color: #999;
-    }
-  }
-}
-</style>
\ No newline at end of file
+<template>
+	<div>
+		<u-navbar :title="title"></u-navbar>
+		<!-- 商品 -->
+		<div class="contant">
+			<view v-if="!goodsList.length" class="empty">暂无商品信息</view>
+			<goodsTemplate :res='goodsList' :storeName='false' />
+		</div>
+	</div>
+
+</template>
+
+<script>
+	import {
+		getGoodsList
+	} from "@/api/goods.js";
+	import goodsTemplate from '@/components/m-goods-list/list'
+	export default {
+		data() {
+			return {
+				title: "",
+				routerVal: "",
+				goodsList: [],
+				params: {
+					pageNumber: 1,
+					pageSize: 10,
+					keyword: "",
+					storeCatId: "",
+					storeId: "",
+				},
+			};
+		},
+		components: {
+			goodsTemplate
+		},
+		onLoad(options) {
+			this.routerVal = options;
+			this.params.storeId = options.storeId;
+			this.params.storeCatId = options.id;
+			this.title = options.title;
+		},
+		onShow() {
+			this.goodsList = []
+			this.params.pageNumber = 1;
+			this.getGoodsData();
+		},
+		onReachBottom() {
+			this.params.pageNumber++;
+			this.getGoodsData();
+		},
+		methods: {
+			async getGoodsData() {
+				// #TODO
+				let goodsList = await getGoodsList(this.params);
+				if (goodsList.data.success) {
+					this.goodsList.push(...goodsList.data.result.content);
+				}
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.contant {
+		margin-top: 20rpx;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+
+		>.empty {
+			width: 100%;
+			display: flex;
+			justify-content: center;
+			margin-top: 40rpx;
+		}
+}
+</style>