From d267396a7b0954fee380d8466ad2f6c9b1e6ad71 Mon Sep 17 00:00:00 2001
From: Gao xiaosong <704041637@qq.com>
Date: Fri, 30 Oct 2020 01:43:21 +0800
Subject: [PATCH] =?UTF-8?q?uniapp=20=E5=95=86=E5=93=81=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=97=A0=E6=95=88=EF=BC=8C=E5=B9=B6=E4=B8=94?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E5=88=86=E9=A1=B5=E5=90=8E=EF=BC=8C=E4=BC=9A?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0=E5=8E=BB=E6=8E=89=E5=85=B3=E9=94=AE=E5=AD=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Recommend.vue       | 110 +++++----
 pages/shop/GoodsList/index.vue | 413 ++++++++++++++++-----------------
 2 files changed, 265 insertions(+), 258 deletions(-)

diff --git a/components/Recommend.vue b/components/Recommend.vue
index 7107397..cbcf2e7 100644
--- a/components/Recommend.vue
+++ b/components/Recommend.vue
@@ -6,13 +6,11 @@
 			<text class="iconfont icon-zhuangshixian lefticon"></text>
 		</view>
 		<view class="recommendList acea-row row-between-wrapper">
-			<view
-				@click="routerGo(item)"
-				class="item"
-				v-for="(item, recommendIndex) in hostProduct"
-				:key="recommendIndex"
-			>
-				<view class="pictrue"><image :src="item.image" class="image" /></view>
+			<view @click="routerGo(item)" class="item" v-for="(item, recommendIndex) in hostProduct"
+				:key="recommendIndex">
+				<view class="pictrue">
+					<image :src="item.image" class="image" />
+				</view>
 				<view class="name line1">{{ item.storeName }}</view>
 				<view class="money font-color-red">
 					￥
@@ -24,47 +22,61 @@
 	</view>
 </template>
 <script>
-import { getHostProducts } from '@/api/store';
-import Loading from '@/components/Loading';
-export default {
-	name: 'Recommend',
-	props: {},
-	components: {
-		Loading
-	},
-	data: function() {
-		return {
-			hostProduct: [],
-			page: 1,
-			limit: 20,
-			loadTitle: '',
-			loading: false,
-			loadend: false
-		};
-	},
-	mounted: function() {
-		this.hostProducts();
-	},
-	methods: {
-		routerGo(item) {
-			this.$yrouter.push({ path: '/pages/shop/GoodsCon/index', query: { id: item.id } });
+	import {
+		getHostProducts
+	} from '@/api/store';
+	import Loading from '@/components/Loading';
+	export default {
+		name: 'Recommend',
+		props: {
+			recommendLoading: Boolean
+		},
+		components: {
+			Loading
+		},
+		watch: {
+			recommendLoading(nextLoading) {
+				if (nextLoading) {
+					this.hostProducts()
+				}
+			}
+		},
+		data: function () {
+			return {
+				hostProduct: [],
+				page: 1,
+				limit: 20,
+				loadTitle: '',
+				loading: false,
+				loadend: false
+			};
+		},
+		mounted: function () {
+			this.hostProducts();
+		},
+		methods: {
+			routerGo(item) {
+				this.$yrouter.push({
+					path: '/pages/shop/GoodsCon/index',
+					query: {
+						id: item.id
+					}
+				});
+			},
+			hostProducts: function () {
+				let that = this;
+				if (that.loading) return; //阻止下次请求（false可以进行请求）；
+				if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
+				that.loading = true;
+				getHostProducts(that.page, that.limit).then(res => {
+					that.loading = false;
+					//apply();js将一个数组插入另一个数组;
+					that.hostProduct.push.apply(that.hostProduct, res.data);
+					that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
+					that.page = that.page + 1;
+					this.$emit('changeRecommendLoading', false)
+				});
+			}
 		},
-		hostProducts: function() {
-			let that = this;
-			if (that.loading) return; //阻止下次请求（false可以进行请求）；
-			if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
-			that.loading = true;
-			getHostProducts(that.page, that.limit).then(res => {
-				that.loading = false;
-				//apply();js将一个数组插入另一个数组;
-				that.hostProduct.push.apply(that.hostProduct, res.data);
-				that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
-				that.page = that.page + 1;
-			});
-		}
-	},
-	onReachBottom() {
-		!this.loading && this.hostProducts();
-	}
-};
+	};
 </script>
diff --git a/pages/shop/GoodsList/index.vue b/pages/shop/GoodsList/index.vue
index 00ad99c..d70ab01 100644
--- a/pages/shop/GoodsList/index.vue
+++ b/pages/shop/GoodsList/index.vue
@@ -3,22 +3,14 @@
     <form @submit.prevent="submitForm">
       <view class="search bg-color-red acea-row row-between-wrapper">
         <view class="input acea-row row-between-wrapper">
-          <text class="iconfont icon-sousuo"></text>
           <input placeholder="搜索商品信息" v-model="where.keyword" />
+          <text class="iconfont icon-sousuo" @click="submitForm"></text>
         </view>
-        <view
-          class="iconfont"
-          :class="Switch === true ? 'icon-pailie' : 'icon-tupianpailie'"
-          @click="switchTap"
-        ></view>
+        <view class="iconfont" :class="Switch === true ? 'icon-pailie' : 'icon-tupianpailie'" @click="switchTap"></view>
       </view>
     </form>
     <view class="nav acea-row row-middle">
-      <view
-        class="item"
-        :class="title ? 'font-color-red' : ''"
-        @click="set_where(0)"
-      >{{ title ? title : "默认" }}</view>
+      <view class="item" :class="title ? 'font-color-red' : ''" @click="set_where(0)">{{ title ? title : "默认" }}</view>
       <view class="item" @click="set_where(1)">
         价格
         <image src="@/static/images/horn.png" v-if="price === 0" />
@@ -34,19 +26,9 @@
       <!-- down -->
       <view class="item" :class="nows ? 'font-color-red' : ''" @click="set_where(3)">新品</view>
     </view>
-    <view
-      class="list acea-row row-between-wrapper"
-      :class="Switch === true ? '' : 'on'"
-      ref="container"
-    >
-      <view
-        @click="goGoodsCon(item)"
-        class="item"
-        :class="Switch === true ? '' : 'on'"
-        v-for="(item, productListIndex) in productList"
-        :key="productListIndex"
-        :title="item.storeName"
-      >
+    <view class="list acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'" ref="container">
+      <view @click="goGoodsCon(item)" class="item" :class="Switch === true ? '' : 'on'"
+        v-for="(item, productListIndex) in productList" :key="productListIndex" :title="item.storeName">
         <view class="pictrue" :class="Switch === true ? '' : 'on'">
           <image :src="item.image" :class="Switch === true ? '' : 'on'" />
         </view>
@@ -64,209 +46,222 @@
       </view>
     </view>
     <Loading :loaded="loadend" :loading="loading"></Loading>
-    <view
-      class="noCommodity"
-      style="background-color: #fff;"
-      v-if="productList.length === 0 && where.page > 1"
-    >
+    <view class="noCommodity" style="background-color: #fff;" v-if="productList.length === 0 && where.page > 1">
       <view class="noPictrue">
         <image src="@/static/images/noGood.png" class="image" />
       </view>
     </view>
-    <Recommend v-if="productList.length === 0 && where.page > 1"></Recommend>
+    <Recommend v-if="productList.length === 0 && where.page > 1" :recommendLoading="recommendLoading"
+      @changeRecommendLoading="changeRecommendLoading"></Recommend>
   </view>
 </template>
 <script>
-import Recommend from "@/components/Recommend";
-import { getProducts } from "@/api/store";
-import Loading from "@/components/Loading";
+  import Recommend from "@/components/Recommend";
+  import {
+    getProducts
+  } from "@/api/store";
+  import Loading from "@/components/Loading";
 
-export default {
-  name: "GoodsList",
-  components: {
-    Recommend,
-    Loading
-  },
-  props: {},
-  data: function() {
-    // const { s = "", id = 0, title = "" } = this.$yroute.query;
-    const s = "",
-      id = 0,
-      title = "";
+  export default {
+    name: "GoodsList",
+    components: {
+      Recommend,
+      Loading
+    },
+    props: {},
+    data: function () {
+      // const { s = "", id = 0, title = "" } = this.$yroute.query;
+      const s = "",
+        id = 0,
+        title = "";
 
-    return {
-      hostProduct: [],
-      productList: [],
-      Switch: true,
-      where: {
-        page: 1,
-        limit: 8,
-        keyword: s,
-        sid: id, //二级分类id
-        news: 0,
-        priceOrder: "",
-        salesOrder: ""
+      return {
+        hostProduct: [],
+        productList: [],
+        Switch: true,
+        where: {
+          page: 1,
+          limit: 8,
+          keyword: s,
+          sid: id, //二级分类id
+          news: 0,
+          priceOrder: "",
+          salesOrder: ""
+        },
+        title: title && id ? title : "",
+        loadTitle: "",
+        loading: false,
+        loadend: false,
+        price: 0,
+        stock: 0,
+        nows: false,
+        recommendLoading: false
+      };
+    },
+    watch: {
+      title() {
+        this.updateTitle();
       },
-      title: title && id ? title : "",
-      loadTitle: "",
-      loading: false,
-      loadend: false,
-      price: 0,
-      stock: 0,
-      nows: false
-    };
-  },
-  watch: {
-    title() {
+      $yroute(to) {
+        // if (to.name !== "GoodsList") return;
+        // const { s = "", id = 0, title = "" } = to.query;
+        // if (s !== this.where.keyword || id !== this.where.sid) {
+        //   this.where.keyword = s;
+        //   this.loadend = false;
+        //   this.loading = false;
+        //   this.where.page = 1;
+        //   this.where.sid = id;
+        //   this.title = title && id ? title : "";
+        //   this.nows = false;
+        //   this.$set(this, "productList", []);
+        //   this.price = 0;
+        //   this.stock = 0;
+        //   this.get_product_list();
+        // }
+      }
+    },
+    mounted: function () {
+      const {
+        s = "", id = 0, title = ""
+      } = this.$yroute.query;
+      this.where.keyword = s;
+
       this.updateTitle();
+      this.get_product_list();
     },
-    $yroute(to) {
-      // if (to.name !== "GoodsList") return;
-      // const { s = "", id = 0, title = "" } = to.query;
-      // if (s !== this.where.keyword || id !== this.where.sid) {
-      //   this.where.keyword = s;
-      //   this.loadend = false;
-      //   this.loading = false;
-      //   this.where.page = 1;
-      //   this.where.sid = id;
-      //   this.title = title && id ? title : "";
-      //   this.nows = false;
-      //   this.$set(this, "productList", []);
-      //   this.price = 0;
-      //   this.stock = 0;
-      //   this.get_product_list();
-      // }
-    }
-  },
-  mounted: function() {
-    const { s = "", id = 0, title = "" } = this.$yroute.query;
-    this.updateTitle();
-    this.get_product_list();
-  },
-  onReachBottom() {
-    !this.loading && this.get_product_list();
-  },
-  onHide() {
-    // this.hostProduct = [];
-    // this.productList = [];
-    // this.Switch = true;
-    // this.where = {
-    //   page: 1,
-    //   limit: 8,
-    //   keyword: s,
-    //   sid: id, //二级分类id
-    //   news: 0,
-    //   priceOrder: "",
-    //   salesOrder: ""
-    // };
-    // this.loadTitle = "";
-    // this.loading = false;
-    // this.loadend = false;
-    // this.price = 0;
-    // this.stock = 0;
-    // this.nows = fals;
-  },
-  methods: {
-    goGoodsCon(item) {
-      this.$yrouter.push({
-        path: "/pages/shop/GoodsCon/index",
-        query: { id: item.id }
-      });
+    onReachBottom() {
+      this.recommendLoading = true;
+      !this.loading && this.get_product_list();
     },
-    updateTitle() {
-      // document.title = this.title || this.$yroute.meta.title;
+    onHide() {
+      // this.hostProduct = [];
+      // this.productList = [];
+      // this.Switch = true;
+      // this.where = {
+      //   page: 1,
+      //   limit: 8,
+      //   keyword: s,
+      //   sid: id, //二级分类id
+      //   news: 0,
+      //   priceOrder: "",
+      //   salesOrder: ""
+      // };
+      // this.loadTitle = "";
+      // this.loading = false;
+      // this.loadend = false;
+      // this.price = 0;
+      // this.stock = 0;
+      // this.nows = fals;
     },
-    get_product_list() {
-      var that = this;
-      this.setWhere();
-      // if (to.name !== "GoodsList") return;
-      const { s = "", id = 0, title = "" } = this.$yroute.query;
-      if (s !== this.where.keyword || id !== this.where.sid) {
-        this.where.keyword = s;
+    methods: {
+      changeRecommendLoading(recommendLoading) {
+        this.recommendLoading = recommendLoading
+      },
+      goGoodsCon(item) {
+        this.$yrouter.push({
+          path: "/pages/shop/GoodsCon/index",
+          query: {
+            id: item.id
+          }
+        });
+      },
+      updateTitle() {
+        // document.title = this.title || this.$yroute.meta.title;
+      },
+      get_product_list() {
+        var that = this;
+        this.setWhere();
+        // if (to.name !== "GoodsList") return;
+        const {
+          s = "", id = 0, title = ""
+        } = this.$yroute.query;
+        if (s !== this.where.keyword || id !== this.where.sid) {
+          this.loadend = false;
+          this.loading = false;
+          this.where.page = 1;
+          this.where.sid = id;
+          this.title = title && id ? title : "";
+          this.nows = false;
+          this.$set(this, "productList", []);
+          this.price = 0;
+          this.stock = 0;
+          // this.get_product_list();
+        }
+        let q = that.where;
+        getProducts(q).then(res => {
+          that.loading = false;
+          that.productList.push.apply(that.productList, res.data);
+          that.loadend = res.data.length < that.where.limit; //判断所有数据是否加载完成；
+          that.where.page = that.where.page + 1;
+        });
+      },
+      submitForm: function () {
+        this.$set(this, "productList", []);
+        this.where.page = 1;
         this.loadend = false;
         this.loading = false;
-        this.where.page = 1;
-        this.where.sid = id;
-        this.title = title && id ? title : "";
-        this.nows = false;
-        this.$set(this, "productList", []);
-        this.price = 0;
-        this.stock = 0;
-        // this.get_product_list();
-      }
-      let q = that.where;
-      getProducts(q).then(res => {
-        that.loading = false;
-        that.productList.push.apply(that.productList, res.data);
-        that.loadend = res.data.length < that.where.limit; //判断所有数据是否加载完成；
-        that.where.page = that.where.page + 1;
-      });
-    },
-    submitForm: function() {
-      this.$set(this, "productList", []);
-      this.where.page = 1;
-      this.loadend = false;
-      this.loading = false;
-      this.get_product_list();
-    },
-    //点击事件处理
-    set_where: function(index) {
-      let that = this;
-      switch (index) {
-        case 0:
-          return that.$yrouter.push({ path: "/pages/shop/GoodsClass/index" });
-        case 1:
-          if (that.price === 0) that.price = 1;
-          else if (that.price === 1) that.price = 2;
-          else if (that.price === 2) that.price = 0;
-          that.stock = 0;
-          break;
-        case 2:
-          if (that.stock === 0) that.stock = 1;
-          else if (that.stock === 1) that.stock = 2;
-          else if (that.stock === 2) that.stock = 0;
-          that.price = 0;
-          break;
-        case 3:
-          that.nows = !that.nows;
-          break;
-        default:
-          break;
-      }
-      that.$set(that, "productList", []);
-      that.where.page = 1;
-      that.loadend = false;
-      that.get_product_list();
-    },
-    //设置where条件
-    setWhere: function() {
-      let that = this;
-      if (that.price === 0) {
-        that.where.priceOrder = "";
-      } else if (that.price === 1) {
-        that.where.priceOrder = "asc";
-      } else if (that.price === 2) {
-        that.where.priceOrder = "desc";
-      }
-      if (that.stock === 0) {
-        that.where.salesOrder = "";
-      } else if (that.stock === 1) {
-        that.where.salesOrder = "asc";
-      } else if (that.stock === 2) {
-        that.where.salesOrder = "desc";
+        this.get_product_list();
+      },
+      //点击事件处理
+      set_where: function (index) {
+        let that = this;
+        switch (index) {
+          case 0:
+            return that.$yrouter.push({
+              path: "/pages/shop/GoodsClass/index"
+            });
+          case 1:
+            if (that.price === 0) that.price = 1;
+            else if (that.price === 1) that.price = 2;
+            else if (that.price === 2) that.price = 0;
+            that.stock = 0;
+            break;
+          case 2:
+            if (that.stock === 0) that.stock = 1;
+            else if (that.stock === 1) that.stock = 2;
+            else if (that.stock === 2) that.stock = 0;
+            that.price = 0;
+            break;
+          case 3:
+            that.nows = !that.nows;
+            break;
+          default:
+            break;
+        }
+        that.$set(that, "productList", []);
+        that.where.page = 1;
+        that.loadend = false;
+        that.get_product_list();
+      },
+      //设置where条件
+      setWhere: function () {
+        let that = this;
+        if (that.price === 0) {
+          that.where.priceOrder = "";
+        } else if (that.price === 1) {
+          that.where.priceOrder = "asc";
+        } else if (that.price === 2) {
+          that.where.priceOrder = "desc";
+        }
+        if (that.stock === 0) {
+          that.where.salesOrder = "";
+        } else if (that.stock === 1) {
+          that.where.salesOrder = "asc";
+        } else if (that.stock === 2) {
+          that.where.salesOrder = "desc";
+        }
+        that.where.news = that.nows ? "1" : "0";
+      },
+      switchTap: function () {
+        let that = this;
+        that.Switch = !that.Switch;
       }
-      that.where.news = that.nows ? "1" : "0";
-    },
-    switchTap: function() {
-      let that = this;
-      that.Switch = !that.Switch;
     }
-  }
-};
+  };
 </script>
 <style scoped lang="less">
-.noCommodity {
-  border-top: 3px solid #f5f5f5;
-  padding-bottom: 1px;
-}
+  .noCommodity {
+    border-top: 3px solid #f5f5f5;
+    padding-bottom: 1px;
+  }
 </style>