小程序商品列表重复数据

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
-      <view @click="goGoodsCon(item)" class="item" :class="Switch === true ? '' : 'on'"
+      class="list acea-row row-between-wrapper"
-        v-for="(item, productListIndex) in productList" :key="productListIndex" :title="item.storeName">
+      :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,222 +76,231 @@
       </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"
+    <Recommend
-      @changeRecommendLoading="changeRecommendLoading"></Recommend>
+      v-if="productList.length === 0 && where.page > 1"
+      :recommendLoading="recommendLoading"
+      @changeRecommendLoading="changeRecommendLoading"
+    ></Recommend>
   </view>
 </template>
 <script>
-  import Recommend from "@/components/Recommend";
+import Recommend from "@/components/Recommend";
-  import {
+import { getProducts } from "@/api/store";
-    getProducts
+import Loading from "@/components/Loading";
-  } from "@/api/store";
-  import Loading from "@/components/Loading";
 
-  export default {
+export default {
-    name: "GoodsList",
+  name: "GoodsList",
-    components: {
+  components: {
-      Recommend,
+    Recommend,
-      Loading
+    Loading,
-    },
+  },
-    props: {},
+  props: {},
-    data: function () {
+  data: function () {
-      // const { s = "", id = 0, title = "" } = this.$yroute.query;
+    // const { s = "", id = 0, title = "" } = this.$yroute.query;
-      const s = "",
+    const s = "",
-        id = 0,
+      id = 0,
-        title = "";
+      title = "";
 
-      return {
+    return {
-        hostProduct: [],
+      hostProduct: [],
-        productList: [],
+      productList: [],
-        Switch: true,
+      Switch: true,
-        where: {
+      where: {
-          page: 1,
+        page: 1,
-          limit: 8,
+        limit: 8,
-          keyword: s,
+        keyword: s,
-          sid: id, //二级分类id
+        sid: id, //二级分类id
-          news: 0,
+        news: 0,
-          priceOrder: "",
+        priceOrder: "",
-          salesOrder: ""
+        salesOrder: "",
-        },
-        title: title && id ? title : "",
-        loadTitle: "",
-        loading: false,
-        loadend: false,
-        price: 0,
-        stock: 0,
-        nows: false,
-        recommendLoading: false
-      };
-    },
-    watch: {
-      title() {
-        this.updateTitle();
       },
-      $yroute(to) {
+      title: title && id ? title : "",
-        // if (to.name !== "GoodsList") return;
+      loadTitle: "",
-        // const { s = "", id = 0, title = "" } = to.query;
+      loading: false,
-        // if (s !== this.where.keyword || id !== this.where.sid) {
+      loadend: false,
-        //   this.where.keyword = s;
+      price: 0,
-        //   this.loadend = false;
+      stock: 0,
-        //   this.loading = false;
+      nows: false,
-        //   this.where.page = 1;
+      recommendLoading: false,
-        //   this.where.sid = id;
+      target: false,
-        //   this.title = title && id ? title : "";
+    };
-        //   this.nows = false;
+  },
-        //   this.$set(this, "productList", []);
+  watch: {
-        //   this.price = 0;
+    title() {
-        //   this.stock = 0;
+      this.updateTitle();
-        //   this.get_product_list();
-        // }
-      }
     },
-    mounted: function () {
+    $yroute(to) {
-      const {
+      // if (to.name !== "GoodsList") return;
-        s = "", id = 0, title = ""
+      // const { s = "", id = 0, title = "" } = to.query;
-      } = this.$yroute.query;
+      // if (s !== this.where.keyword || id !== this.where.sid) {
-      this.where.keyword = s;
+      //   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.updateTitle();
-      this.get_product_list();
+    this.get_product_list();
+  },
+  onReachBottom() {
+    this.recommendLoading = true;
+    !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: {
+    changeRecommendLoading(recommendLoading) {
+      this.recommendLoading = recommendLoading;
     },
-    onReachBottom() {
+    goGoodsCon(item) {
-      this.recommendLoading = true;
+      this.$yrouter.push({
-      !this.loading && this.get_product_list();
+        path: "/pages/shop/GoodsCon/index",
+        query: {
+          id: item.id,
+        },
+      });
     },
-    onHide() {
+    updateTitle() {
-      // this.hostProduct = [];
+      // document.title = this.title || this.$yroute.meta.title;
-      // 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: {
+    get_product_list() {
-      changeRecommendLoading(recommendLoading) {
+      var that = this;
-        this.recommendLoading = recommendLoading
+      this.setWhere();
-      },
+      // if (to.name !== "GoodsList") return;
-      goGoodsCon(item) {
+      const { s = "", id = 0, title = "" } = this.$yroute.query;
-        this.$yrouter.push({
+      if (s !== this.where.keyword || id !== this.where.sid) {
-          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.get_product_list();
+        this.where.page = 1;
-      },
+        this.where.sid = id;
-      //点击事件处理
+        this.title = title && id ? title : "";
-      set_where: function (index) {
+        this.nows = false;
-        let that = this;
+        this.$set(this, "productList", []);
-        switch (index) {
+        this.price = 0;
-          case 0:
+        this.stock = 0;
-            return that.$yrouter.push({
+        // this.get_product_list();
-              path: "/pages/shop/GoodsClass/index"
+      }
-            });
+      let q = that.where;
-          case 1:
+      getProducts(q).then((res) => {
-            if (that.price === 0) that.price = 1;
+        that.loading = false;
-            else if (that.price === 1) that.price = 2;
+        if (that.target) {
-            else if (that.price === 2) that.price = 0;
+          that.productList = res.data;
-            that.stock = 0;
+        } else {
-            break;
+          that.productList.push.apply(that.productList, res.data);
-          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";
+        that.target = false
-      },
+        that.loadend = res.data.length < that.where.limit; //判断所有数据是否加载完成；
-      switchTap: function () {
+        that.where.page = that.where.page + 1;
-        let that = this;
+      });
-        that.Switch = !that.Switch;
+    },
+    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;
+      }
+      this.productList = [];
+      that.$set(that, "productList", []);
+      that.where.page = 1;
+      that.target = true;
+      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;
+    },
+  },
+};
 </script>
 <style scoped lang="less">
-  .noCommodity {
+.noCommodity {
-    border-top: 3px solid #f5f5f5;
+  border-top: 3px solid #f5f5f5;
-    padding-bottom: 1px;
+  padding-bottom: 1px;
-  }
+}
 </style>