小程序商品列表重复数据

pages/shop/GoodsList/index.vue

@@ -6,11 +6,20 @@
           <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" />
@@ -24,21 +33,42 @@
         <image src="@/static/images/down.png" v-if="stock === 2" />
       </view>
       <!-- down -->
-      <view class="item" :class="nows ? 'font-color-red' : ''" @click="set_where(3)">新品</view>
+      <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>
         <view class="text" :class="Switch === true ? '' : 'on'">
           <view class="name line1">{{ item.storeName }}</view>
-          <view class="money font-color-red" :class="Switch === true ? '' : 'on'">
+          <view
+            class="money font-color-red"
+            :class="Switch === true ? '' : 'on'"
+          >
             ￥
             <text class="num">{{ item.price }}</text>
           </view>
-          <view class="vip acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'">
+          <view
+            class="vip acea-row row-between-wrapper"
+            :class="Switch === true ? '' : 'on'"
+          >
             <view class="vip-money">￥{{ item.otPrice }}</view>
             <view>已售{{ item.sales }}件</view>
           </view>
@@ -46,27 +76,32 @@
       </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" :recommendLoading="recommendLoading"
-      @changeRecommendLoading="changeRecommendLoading"></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 { getProducts } from "@/api/store";
 import Loading from "@/components/Loading";
 
 export default {
   name: "GoodsList",
   components: {
     Recommend,
-      Loading
+    Loading,
   },
   props: {},
   data: function () {
@@ -86,7 +121,7 @@
         sid: id, //二级分类id
         news: 0,
         priceOrder: "",
-          salesOrder: ""
+        salesOrder: "",
       },
       title: title && id ? title : "",
       loadTitle: "",
@@ -95,7 +130,8 @@
       price: 0,
       stock: 0,
       nows: false,
-        recommendLoading: false
+      recommendLoading: false,
+      target: false,
     };
   },
   watch: {
@@ -118,12 +154,10 @@
       //   this.stock = 0;
       //   this.get_product_list();
       // }
-      }
+    },
   },
   mounted: function () {
-      const {
-        s = "", id = 0, title = ""
-      } = this.$yroute.query;
+    const { s = "", id = 0, title = "" } = this.$yroute.query;
     this.where.keyword = s;
 
     this.updateTitle();
@@ -155,14 +189,14 @@
   },
   methods: {
     changeRecommendLoading(recommendLoading) {
-        this.recommendLoading = recommendLoading
+      this.recommendLoading = recommendLoading;
     },
     goGoodsCon(item) {
       this.$yrouter.push({
         path: "/pages/shop/GoodsCon/index",
         query: {
-            id: item.id
-          }
+          id: item.id,
+        },
       });
     },
     updateTitle() {
@@ -172,9 +206,7 @@
       var that = this;
       this.setWhere();
       // if (to.name !== "GoodsList") return;
-        const {
-          s = "", id = 0, title = ""
-        } = this.$yroute.query;
+      const { s = "", id = 0, title = "" } = this.$yroute.query;
       if (s !== this.where.keyword || id !== this.where.sid) {
         this.loadend = false;
         this.loading = false;
@@ -188,9 +220,14 @@
         // this.get_product_list();
       }
       let q = that.where;
-        getProducts(q).then(res => {
+      getProducts(q).then((res) => {
         that.loading = false;
+        if (that.target) {
+          that.productList = res.data;
+        } else {
           that.productList.push.apply(that.productList, res.data);
+        }
+        that.target = false
         that.loadend = res.data.length < that.where.limit; //判断所有数据是否加载完成；
         that.where.page = that.where.page + 1;
       });
@@ -208,7 +245,7 @@
       switch (index) {
         case 0:
           return that.$yrouter.push({
-              path: "/pages/shop/GoodsClass/index"
+            path: "/pages/shop/GoodsClass/index",
           });
         case 1:
           if (that.price === 0) that.price = 1;
@@ -228,8 +265,10 @@
         default:
           break;
       }
+      this.productList = [];
       that.$set(that, "productList", []);
       that.where.page = 1;
+      that.target = true;
       that.loadend = false;
       that.get_product_list();
     },
@@ -255,8 +294,8 @@
     switchTap: function () {
       let that = this;
       that.Switch = !that.Switch;
-      }
-    }
+    },
+  },
 };
 </script>
 <style scoped lang="less">