fix: 优化

src/views/vipLife/components/SkuList.vue

@@ -11,7 +11,9 @@
       }"
       @click="parent.handleSkuSelected(item, index)"
     >
-      <div class="Vl__sku-name">{{ props.threeCol ? item.salePrice : item.skuName }}元</div>
+      <div class="Vl__sku-name">
+        {{ props.threeCol ? item.salePrice : item.skuName }}{{ showUnit ? '元' : '' }}
+      </div>
       <div class="Vl__sku-price">售价{{ props.threeCol ? item.price : item.salePrice }}元</div>
       <div class="Vl__sku-tag">优惠</div>
     </div>
@@ -30,6 +32,10 @@ export default {
       type: Object,
       default: () => {}
     },
+    showUnit: {
+      type: Boolean,
+      default: true
+    },
     disabled: Boolean
   }
 };

src/views/vipLife/components/SpuList.vue

 <template>
-  <div class="Vl__spu">
+  <div ref="spuList" class="Vl__spu-wrapper">
+    <div class="Vl__spu" :style="{ width: numAddUnit(contentWidth) }">
       <div
         v-for="(item, index) in list"
         :key="index"
         class="Vl__spu-item"
         :class="{ 'Vl__spu-item_active': info.spuNo === item.spuNo }"
-      @click="$parent.handleSpuSelected(item, index)"
+        @click="handleSpuClick($event, item, index)"
       >
         <cr-image :src="item.icon" height="1.093333rem" width="1.093333rem" class="Vl__spu-icon" />
         <div class="Vl__spu-name">{{ item.name }}</div>
       </div>
+      <div class="Vl__spu-placeholder" :style="{ width: numAddUnit(placeholderWidth) }" />
+    </div>
   </div>
 </template>
 <script>
+import BScroll from '@better-scroll/core';
+const ITEM_WIDTH = 108;
 export default {
   name: 'SpuList',
   props: {
     list: {
       type: Array,
-      default: () => []
+      default: () => [
+        {
+          spuNo: '',
+          icon: '',
+          name: ''
+        }
+      ]
     },
     info: {
       type: Object,
       default: () => {}
     }
   },
-  data() {
+  data: function() {
     return {
-      scrollWidth: 0,
-      scrollLeft: 0,
-      top: 0
+      listWrapper: null
     };
   },
-  mounted() {
-    this.getScrollInfo();
-    // this.$el.addEventListener('scroll', this.handleScoll);
+  computed: {
+    contentWidth() {
+      this.$nextTick(() => {
+        this.listWrapper && this.listWrapper.refresh();
+      });
+      return ITEM_WIDTH * this.list.length + this.placeholderWidth;
     },
-  // beforeDestroy() {
-  //   this.$el.removeEventListener('scroll', this.handleScoll);
-  // },
-  // activated() {
-  //   this.$el.addEventListener('scroll', this.handleScoll);
-  // },
-  // deactivated() {
-  //   this.$el.removeEventListener('scroll', this.handleScoll);
-  // },
-  updated() {
-    console.log(111);
+    placeholderWidth() {
+      return ((this.list.length % 4) + 1.335) * ITEM_WIDTH;
+    }
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.listWrapper = new BScroll(this.$refs.spuList, {
+        click: true,
+        scrollX: true,
+        scrollY: false
+      });
+    });
   },
   methods: {
-    getScrollInfo() {
-      this.scrollWidth = this.$el.scrollWidth;
+    numAddUnit(num) {
+      return num / 37.5 + 'rem';
+    },
+    handleSpuClick(e, item, index) {
+      this.$parent.handleSpuSelected(item, index);
+      const target = e.path.find(item => item.className.indexOf('Vl__spu-item') > -1);
+      console.dir(target);
+      this.listWrapper.scrollToElement(target, 500, -10, 0);
     }
   }
 };
@@ -58,22 +78,32 @@ export default {
 <style lang="less" scoped>
 .Vl {
   &__spu {
-    padding: @padding-sm 0;
+    &-wrapper {
+      width: 375px;
+      height: 121px;
+      overflow: hidden;
+    }
+    &-placeholder {
+      height: 97px;
+      width: 95px;
+      flex-shrink: 0;
+      margin-right: @padding-sm;
+    }
+    padding: @padding-sm 0 @padding-sm @padding-sm;
     display: flex;
     align-items: center;
-    overflow: auto;
     position: relative;
-    &::before,
-    &::after {
-      content: ' ';
-      flex-shrink: 0;
-      display: block;
-      width: @padding-sm;
-      height: 97px;
-    }
-    &::after {
-      width: @padding-unit;
-    }
+    // &::before,
+    // &::after {
+    //   content: ' ';
+    //   flex-shrink: 0;
+    //   display: block;
+    //   width: @padding-sm;
+    //   height: 97px;
+    // }
+    // &::after {
+    //   width: @padding-unit;
+    // }
     &-item {
       height: 97px;
       width: 95px;
@@ -84,7 +114,7 @@ export default {
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      margin-right: @padding-xs;
+      margin-right: @padding-sm;
       transition: all 0.2s linear;
       &_active {
         box-shadow: 0px 2px 12px 0px rgba(100, 101, 102, 0.12);

src/views/vipLife/index.less

@@ -5,6 +5,7 @@
     border-radius: @border-radius-lx @border-radius-lx 0 0;
     padding: @padding-lg @padding-lg @bottom-height;
     min-height: 340px;
+    position: relative;
     &-placeholder {
       margin-bottom: -@padding-lg;
     }
@@ -14,6 +15,20 @@
       font-weight: @font-weight-bold - 100;
       margin: @padding-lg + @padding-unit 0 @padding-sm;
     }
+    &-loading {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+      background: rgba(255, 255, 255, 0.7);
+      display: flex;
+      justify-content: center;
+      .cr-loading {
+        margin-top: 200px;
+      }
+    }
   }
   &__bottom {
     position: fixed;

src/views/vipLife/index.vue

@@ -5,16 +5,21 @@
     </cr-tabs>
     <spu-list ref="spuList" :list="spuList" :info="spuInfo" />
     <div class="Vl__panel">
+      <template>
         <account-input v-if="spuInfo.rechargeAccountType !== 2" v-model="account" :info="spuInfo" />
         <div v-else class="Vl__panel-placeholder" />
+      </template>
       <div class="Vl__panel-title">充值类型</div>
-      <sku-list :list="skuList" :info="skuInfo" />
+      <sku-list :list="skuList" :info="skuInfo" :show-unit="false" />
+      <div v-show="showLoading" class="Vl__panel-loading">
+        <cr-loading color="#ec1500" />
+      </div>
       <template v-if="tips">
         <div class="Vl__panel-title">温馨提示</div>
         <div class="Vl__panel-tips" v-html="tips" />
       </template>
     </div>
-    <div class="Vl__bottom">
+    <div v-if="!hideFixedBottom" class="Vl__bottom">
       <cr-button type="primary" block shape="circle" :disabled="disabled" @click="goOrder">
         立即充值
       </cr-button>
@@ -22,6 +27,7 @@
   </div>
 </template>
 <script>
+import { onKeyboardStateChange, clearKeyboard } from '@/service/utils.service';
 import rechargeApi from '@/api/recharge.api';
 import orderApi from '@/api/order.api';
 import tipsData from '@/api/tips';
@@ -42,7 +48,10 @@ export default {
       spuData: [],
       spuInfo: {},
       skuInfo: {},
-      skuList: []
+      skuList: [],
+      skuTimer: null,
+      showLoading: false,
+      hideFixedBottom: false
     };
   },
   computed: {
@@ -61,17 +70,25 @@ export default {
     this.$nextTick(() => {
       this.getList();
     });
+    onKeyboardStateChange(val => {
+      this.hideFixedBottom = val;
+    }, false);
+  },
+  beforeRouteLeave(to, from, next) {
+    // 清除键盘
+    clearKeyboard();
+    next();
   },
   methods: {
     handleTabChange(name) {
       this.currentTab = name;
       this.updateSpuInfo(this.spuData[this.currentTab - 1].itemList[0]);
-      this.getSkuList();
+      this.getSkuListDebounce();
     },
     handleSpuSelected(item) {
       this.spuInfo = item;
       this.updateSpuInfo(item);
-      this.getSkuList();
+      this.getSkuListDebounce();
     },
     handleSkuSelected(item, index) {
       this.skuInfo = item;
@@ -84,10 +101,17 @@ export default {
       const [res] = await rechargeApi.getSpuList();
       if (res) {
         this.spuData = res.vipLife;
-        this.spuInfo = this.spuData[this.currentTab].itemList[0];
-        this.getSkuList();
+        this.updateSpuInfo(this.spuData[this.currentTab - 1].itemList[0]);
+        this.getSkuListDebounce();
       }
     },
+    getSkuListDebounce() {
+      this.showLoading = true;
+      if (this.skuTimer) clearTimeout(this.skuTimer);
+      this.skuTimer = setTimeout(() => {
+        this.getSkuList();
+      }, 600);
+    },
     async getSkuList() {
       this.skuList = [];
       const { spuNo: spuNos, type } = this.spuInfo;
@@ -96,6 +120,7 @@ export default {
         this.skuList = res.rechargeList;
         this.handleSkuSelected(res.rechargeList[0], 0);
       }
+      this.showLoading = false;
     },
     async goOrder() {
       if (!this.account && this.spuInfo.rechargeAccountType !== 2)