fix: 数据模拟

src/views/vipLife/components/SpuList.vue

@@ -23,7 +23,7 @@
 </template>
 <script>
 import BScroll from '@better-scroll/core';
-const ITEM_WIDTH = 108;
+const SCROLL_ITEM_WIDTH = 108;
 export default {
   name: 'SpuList',
   props: {
@@ -54,18 +54,18 @@ export default {
           this.listWrapper.scrollTo(0, 0);
           this.listWrapper.refresh();
         });
-      return ITEM_WIDTH * (this.list.length + 2.28);
+      return SCROLL_ITEM_WIDTH * (this.list.length + 2.28);
     }
   },
   watch: {
     info: {
       deep: true,
       handler(val) {
-        if (Object.hasOwnProperty.call(val, 'index')) {
-          const itemIndex = this.list.findIndex(item => item.index === val.index);
+        if (Object.hasOwnProperty.call(val, 'parentIndex')) {
+          const itemIndex = this.list.findIndex(item => item.parentIndex === val.parentIndex);
           if (itemIndex === -1) return;
           this.$nextTick(() => {
-            this.handleSpuClick(this.$refs.spuItem[itemIndex], val, itemIndex);
+            this.handleSpuClick(this.$refs.spuItem[itemIndex], val);
           });
         }
       }
@@ -76,28 +76,34 @@ export default {
     this.createScroller();
   },
   beforeDestroy() {
+    this.listWrapper.off('scroll', this.handleScroll);
     this.listWrapper.destroy();
   },
   methods: {
     createScroller() {
-      this.$nextTick(() => {
-        if (this.listWrapper) {
-          this.listWrapper.destroy();
-        }
-        this.listWrapper = new BScroll(this.$refs.spuList, {
-          click: true,
-          scrollX: true,
-          scrollY: false
-        });
+      if (this.listWrapper) {
+        this.listWrapper.destroy();
+      }
+      this.listWrapper = new BScroll(this.$refs.spuList, {
+        click: true,
+        scrollX: true,
+        scrollY: false,
+        probeType: 1
       });
+      this.listWrapper.on('scroll', this.handleScroll);
+    },
+    handleScroll(e) {
+      console.log(e);
     },
     numAddUnit(num) {
       return num / 37.5 + 'rem';
     },
-    handleSpuClick(e, item, index) {
-      this.$parent.handleSpuSelected(item, index);
+    handleSpuClick(e, item) {
+      this.$parent.handleSpuSelected(item);
       const target = e.path ? e.path.find(item => item.className.indexOf('Vl__spu-item') > -1) : e;
-      this.listWrapper.scrollToElement(target, 500, -10, 0);
+      this.$nextTick(() => {
+        this.listWrapper.scrollToElement(target, 500, -10, 0);
+      });
     }
   }
 };

src/views/vipLife/index.vue

@@ -67,8 +67,10 @@ export default {
     spuList() {
       let spuList = [];
       this.spuData.forEach((item, index) => {
-        item.itemList[0].index = index;
-        spuList = [...spuList, ...item.itemList];
+        item.itemList.forEach(it => {
+          it.parentIndex = index;
+          spuList.push(it);
+        });
       });
       return spuList;
     },
@@ -130,8 +132,10 @@ export default {
       const [res] = await rechargeApi.getSkuList(spuNos, type);
       if (res) {
         this.skuList = res.rechargeList;
-        const defaultItem = res.rechargeList.find(item => item.hasStock);
-        const defaultIndex = res.rechargeList.findIndex(item => item.hasStock);
+        // const defaultItem = res.rechargeList.find(item => item.hasStock);
+        // const defaultIndex = res.rechargeList.findIndex(item => item.hasStock);
+        const defaultItem = res.rechargeList[0];
+        const defaultIndex = 0;
         defaultItem && this.handleSkuSelected(defaultItem, defaultIndex);
       }
       this.showLoading = false;