From 10d8f25ddfb0a31ac1e52c12b4c33953c55efd5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?lemon=E6=A9=AA?= <17633066053@163.com>
Date: Mon, 5 Jul 2021 11:30:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8F=AF=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/m-goods-recommend/README.md |  10 ++
 components/m-goods-recommend/index.vue | 153 +++++++++++++++++++++++++
 pages/cart/payment/success.vue         | 128 ++-------------------
 3 files changed, 173 insertions(+), 118 deletions(-)
 create mode 100644 components/m-goods-recommend/README.md
 create mode 100644 components/m-goods-recommend/index.vue

diff --git a/components/m-goods-recommend/README.md b/components/m-goods-recommend/README.md
new file mode 100644
index 0000000..b33849a
--- /dev/null
+++ b/components/m-goods-recommend/README.md
@@ -0,0 +1,10 @@
+## 商品推荐 
+
+
+### OBJECT 参数说明
+属性|说明|类型|必填
+---|---|---|---
+`title`|标题，用于顶部显示的内容|String|否
+`pageSize`|显示多少条数据，建议是2的倍数,默认为12条|*|否
+`categoryId`|分类id|Function|否
+`storeId`|卖家id，搜索店铺商品的时候使用|String|否
\ No newline at end of file
diff --git a/components/m-goods-recommend/index.vue b/components/m-goods-recommend/index.vue
new file mode 100644
index 0000000..bd61072
--- /dev/null
+++ b/components/m-goods-recommend/index.vue
@@ -0,0 +1,153 @@
+<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.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.goodsName }}
+          </div>
+          <div class="goods-bottom">
+            <div class="goods-price">￥{{ item.price | unitPrice }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getGoodsList } from "@/api/goods.js";
+export default {
+  data() {
+    return {
+      goodsList: [],
+      params: {
+        pageNumber: 1,
+      },
+    };
+  },
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    pageSize: {
+      type: null,
+      default: 12,
+    },
+    categoryId: {
+      type: null,
+      default: "",
+    },
+    storeId: {
+      type: null,
+      default: "",
+    },
+  },
+  mounted() {
+    this.initGoods();
+  },
+  methods: {
+    /**
+     * 初始化商品
+     */
+    async initGoods() {
+      let submit = JSON.parse(
+        JSON.stringify(
+          Object.assign(this.params, {
+            pageSize: this.pageSize,
+            categoryId: this.categoryId,
+            storeId: this.storeId,
+          })
+        )
+      );
+
+      Object.keys(submit).map((key) => {
+        if (!submit[key] || submit[key].length == 0) {
+          delete submit[key];
+        }
+      });
+
+      let goodsList = await getGoodsList(submit);
+      this.goodsList.push(...goodsList.data.result.content);
+    },
+    handleClick(item) {
+      uni.navigateTo({
+        url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+/**商品代码 */
+$w_94: 94%;
+.goods-recommend {
+  background: #f7f7f7;
+  height: 100rpx;
+  line-height: 100rpx;
+  text-align: center;
+  font-size: 30rpx;
+  font-weight: bold;
+}
+.goods-list {
+  display: flex;
+  flex-wrap: wrap;
+  background: #f7f7f7;
+}
+.goods-item {
+  width: 50%;
+  margin-bottom: 10px;
+  border-radius: 0.4em;
+  overflow: hidden;
+}
+.goods-img {
+  position: relative;
+  margin: 0 auto;
+  width: $w_94;
+  height: 350rpx;
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+  overflow: hidden;
+  > img {
+    width: 100%;
+    height: 100%;
+  }
+}
+.goods-desc {
+  border-bottom-left-radius: 20rpx;
+  border-bottom-right-radius: 20rpx;
+  width: $w_94;
+  background: #fff;
+  padding: 8rpx 0 8rpx 8rpx;
+  margin: 0 auto;
+  > .goods-title {
+    font-size: 12px;
+    height: 70rpx;
+    display: -webkit-box;
+    font-weight: 500;
+    -webkit-box-orient: vertical;
+
+    -webkit-line-clamp: 2;
+
+    overflow: hidden;
+  }
+
+  > .goods-bottom {
+    display: flex;
+    font-weight: bold;
+
+    > .goods-price {
+      line-height: 2;
+      color: $main-color;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/cart/payment/success.vue b/pages/cart/payment/success.vue
index 49b6766..3a67e16 100644
--- a/pages/cart/payment/success.vue
+++ b/pages/cart/payment/success.vue
@@ -31,46 +31,29 @@
       </div>
       <!-- #endif -->
     </div>
-    <div class="goods-recommend">--商品推荐--</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.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.goodsName }}
-          </div>
-          <div class="goods-bottom">
-            <div class="goods-price">￥{{ item.price | unitPrice }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <goodsRecommend />
   </div>
 
 </template>
 <script>
-import { getGoodsList } from "@/api/goods.js";
 import { getWeChatMpMessage } from "@/api/message.js";
-
+import goodsRecommend from "@/components/m-goods-recommend";
 export default {
   data() {
     return {
       checked: false,
       paymentMethod: "",
+
       from: "",
       payPrice: 0,
       goodsList: [],
       activeColor: this.$mainColor,
-      params: {
-        pageSize: 12,
-        pageNumber: 1,
-      },
+     
     };
   },
+  components: {
+    goodsRecommend,
+  },
   filters: {
     paymentTypeFilter(val) {
       switch (val) {
@@ -90,8 +73,6 @@ export default {
     this.from = options.from || "";
     this.payPrice = options.payPrice || 0;
     this.orderType = options.orderType;
-    //搜索商品
-    this.initGoods();
   },
   methods: {
     checkOrder() {
@@ -102,8 +83,8 @@ export default {
        */
       if (this.orderType == "RECHARGE") {
         uni.reLaunch({
-           url: `/pages/mine/deposit/operation`
-        })
+          url: `/pages/mine/deposit/operation`,
+        });
       } else {
         this.navigateTo("/pages/order/myOrder?status=0");
       }
@@ -113,10 +94,7 @@ export default {
         this.sendMessage();
       }
     },
-    async initGoods() {
-      let goodsList = await getGoodsList(this.params);
-      this.goodsList.push(...goodsList.data.result.content);
-    },
+
     sendMessage() {
       //订阅消息
       //#ifdef MP-WEIXIN
@@ -141,12 +119,6 @@ export default {
       //#endif
     },
 
-    handleClick(item) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
-      });
-    },
-
     navigateTo(url, type) {
       if (type === "switch") {
         uni.switchTab({
@@ -233,84 +205,4 @@ export default {
   background: #fff;
   border-top-right-radius: 100rpx;
 }
-
-/**商品代码 */
-$w_94: 94%;
-
-.goods-recommend {
-  background: #f7f7f7;
-  height: 100rpx;
-  line-height: 100rpx;
-  text-align: center;
-  font-size: 30rpx;
-  font-weight: bold;
-}
-
-.goods-list {
-  display: flex;
-
-  flex-wrap: wrap;
-  background: #f7f7f7;
-}
-
-.goods-item {
-  width: 50%;
-  margin-bottom: 10px;
-  border-radius: 0.4em;
-  overflow: hidden;
-}
-
-.goods-img {
-  position: relative;
-  margin: 0 auto;
-  // width: 158px;
-  width: $w_94;
-  height: 350rpx;
-  border-top-left-radius: 20rpx;
-  border-top-right-radius: 20rpx;
-
-  overflow: hidden;
-
-  > img {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.goods-desc {
-  border-bottom-left-radius: 20rpx;
-  border-bottom-right-radius: 20rpx;
-  width: $w_94;
-  background: #fff;
-  padding: 8rpx 0 8rpx 8rpx;
-  margin: 0 auto;
-
-  > .goods-title {
-    font-size: 12px;
-    height: 70rpx;
-    display: -webkit-box;
-    font-weight: 500;
-    -webkit-box-orient: vertical;
-
-    -webkit-line-clamp: 2;
-
-    overflow: hidden;
-  }
-
-  > .goods-bottom {
-    display: flex;
-    font-weight: bold;
-
-    > .goods-price {
-      line-height: 2;
-      color: $main-color;
-    }
-  }
-}
-
-.goods-icon {
-  right: 10rpx;
-  top: 10rpx;
-  position: absolute;
-}
 </style>