fix: 动画优化

src/directives/fontResize.js

@@ -4,7 +4,6 @@ const TXT_MIN_SIZE = 12;
 export default {
   inserted(el) {
     let txtSize = TXT_SIZE;
-    console.dir(el.clientWidth);
     const containerWidth = el.offsetWidth;
     const txtLength = el.innerText.length * TXT_SIZE;
     const overTxtWidth = txtLength - containerWidth;

src/views/vipLife/components/SpuList.vue

@@ -6,16 +6,10 @@
         :key="index"
         ref="spuItem"
         class="Vl__spu-item"
-        :class="{ 'Vl__spu-item_active': info.spuNos === item.spuNos }"
-        @click="handleSpuClick($event, item, index)"
+        :class="{ 'Vl__spu-item_active': info.index === item.index }"
+        @click="$parent.handleSpuSelected(item)"
       >
-        <cr-image
-          :src="item.icon"
-          height="1.093333rem"
-          width="1.093333rem"
-          fit="contain"
-          class="Vl__spu-icon"
-        />
+        <img :src="item.icon" class="Vl__spu-icon" />
         <div class="Vl__spu-name">{{ item.name }}</div>
       </div>
     </div>
@@ -62,13 +56,18 @@ export default {
     info: {
       deep: true,
       handler(val) {
-        if (Object.hasOwnProperty.call(val, 'parentIndex')) {
-          const itemIndex = this.list.findIndex(item => item.parentIndex === val.parentIndex);
-          if (itemIndex === -1) return;
+        let itemIndex = val.index;
+        if (Object.hasOwnProperty.call(val, 'parentFlagIndex')) {
+          const index = this.list.findIndex(item => item.parentIndex === val.parentIndex);
+          if (index !== -1) {
+            itemIndex = index;
+          }
+        }
+        this.$nextTick(() => {
           this.$nextTick(() => {
-            this.handleSpuClick(this.$refs.spuItem[itemIndex], val);
+            this.listWrapper.scrollToElement(this.$refs.spuItem[itemIndex], 500, -10, 0);
           });
-        }
+        });
       }
     }
   },
@@ -89,7 +88,7 @@ export default {
         click: true,
         scrollX: true,
         scrollY: false,
-        probeType: 2
+        probeType: 3
       });
       this.listWrapper.on('scroll', this.handleScroll);
     },
@@ -112,11 +111,10 @@ export default {
     numAddUnit(num) {
       return num / 37.5 + 'rem';
     },
-    handleSpuClick(e, item) {
+    handleSpuClick(item, index) {
       this.$parent.handleSpuSelected(item);
-      const target = e.path ? e.path.find(item => item.className.indexOf('Vl__spu-item') > -1) : e;
       this.$nextTick(() => {
-        this.listWrapper.scrollToElement(target, 500, -10, 0);
+        this.listWrapper.scrollToElement(this.$refs.spuItem[index], 500, -10, 0);
       });
     }
   }
@@ -130,6 +128,11 @@ export default {
       height: 121px;
       overflow: hidden;
     }
+    &-icon {
+      width: 40px;
+      height: 40px;
+      object-fit: contain;
+    }
     &-placeholder {
       height: 97px;
       width: 95px;

src/views/vipLife/index.vue

@@ -63,14 +63,22 @@ export default {
   },
   computed: {
     disabled() {
-      return (this.spuInfo.rechargeAccountType !== 2 && !this.account) || !this.skuList.length;
+      return (
+        (this.spuInfo.rechargeAccountType !== 2 && !this.account) ||
+        !this.skuList.length ||
+        !!this.skuInfo.skuNo
+      );
     },
     spuList() {
       let spuList = [];
       let spuNum = 0;
       this.spuData.forEach((item, index) => {
-        item.itemList.forEach(it => {
+        item.itemList.forEach((it, idx) => {
+          if (idx === 0) {
+            it.parentFlagIndex = index;
+          }
           it.parentIndex = index;
+          it.index = spuNum;
           it.posX = spuNum * ITEM_WIDTH;
           spuList.push(it);
           spuNum++;
@@ -110,9 +118,8 @@ export default {
       this.updateSpuInfo(item);
       this.getSkuListDebounce();
     },
-    handleSkuSelected(item, index) {
+    handleSkuSelected(item) {
       this.skuInfo = item;
-      this.skuInfo.index = index;
     },
     updateSpuInfo(info) {
       this.$set(this, 'spuInfo', info);
@@ -141,8 +148,6 @@ export default {
         this.skuList = res.rechargeList;
         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;
@@ -152,8 +157,7 @@ export default {
         return this.$toast.fail('请填写账号！');
       if (!this.skuInfo.skuNo) return this.$toast.fail('请选择类型！');
       const { skuNo, salePrice } = this.skuInfo;
-      const [res, error] = await orderApi.orderCreate({
-        account: this.account,
+      const params = {
         totalFee: salePrice,
         virtualRechargeType: this.spuInfo.type,
         skuList: [
@@ -162,7 +166,13 @@ export default {
             count: 1
           }
         ]
-      });
+      };
+      if (this.spuInfo.rechargeAccountType !== 2) {
+        params.account = this.account;
+      } else {
+        delete params.account;
+      }
+      const [res, error] = await orderApi.orderCreate(params);
       if (error) {
         return;
       }