fix: 问题修复

src/directives/fontResize.js

+const TXT_SIZE = 17;
+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;
+    if (overTxtWidth > 0) {
+      const overSize = Math.ceil(overTxtWidth / TXT_SIZE);
+      txtSize = txtSize - overSize;
+    }
+    txtSize = txtSize < TXT_MIN_SIZE ? TXT_MIN_SIZE : txtSize;
+    el.style.fontSize = txtSize + 'px';
+  }
+};

src/main.js

@@ -11,6 +11,7 @@ import Bridge from '@qg/js-bridge';
 import Raven from 'raven-js';
 import RavenVue from 'raven-js/plugins/vue';
 import { release } from '../.sentryclirc';
+import fontResize from './directives/fontResize';
 if (process.env.SENTRY_ENV !== 'test' && process.env.NODE_ENV === 'production') {
   Raven.config('//21779c2dcb594299bdc803c5560cfecd@sentry.q-gp.com/60', {
     release,
@@ -24,6 +25,7 @@ window.Bridge = Bridge;
 
 saService.init(router);
 
+Vue.directive('fontResize', fontResize);
 Vue.config.productionTip = false;
 
 window.addEventListener(

src/views/vipLife/components/SkuList.vue

@@ -13,7 +13,7 @@
         }"
         @click="item.hasStock && parent.handleSkuSelected(item, index)"
       >
-        <div class="Vl__sku-name">
+        <div v-font-resize class="Vl__sku-name">
           {{ props.threeCol ? item.salePrice : item.skuName }}{{ props.showUnit ? '元' : '' }}
         </div>
         <div class="Vl__sku-price">售价{{ item.price }}元</div>

src/views/vipLife/components/SpuList.vue

@@ -23,7 +23,8 @@
 </template>
 <script>
 import BScroll from '@better-scroll/core';
-const SCROLL_ITEM_WIDTH = 108;
+import { SCROLL_ITEM_WIDTH } from './constant';
+const EVENT_SCROLL = 'scroll';
 export default {
   name: 'SpuList',
   props: {
@@ -88,12 +89,25 @@ export default {
         click: true,
         scrollX: true,
         scrollY: false,
-        probeType: 1
+        probeType: 2
       });
       this.listWrapper.on('scroll', this.handleScroll);
     },
     handleScroll(e) {
-      console.log(e);
+      const currentX = Math.abs(e.x);
+      for (let i = 0; i < this.list.length; i++) {
+        const curItem = this.list[i];
+        let nextItemX = 0;
+        if (this.list[i + 1]) {
+          nextItemX = this.list[i + 1].posX;
+        } else {
+          nextItemX = this.contentWidth;
+        }
+        if (nextItemX >= currentX && curItem.posX <= currentX) {
+          this.$emit(EVENT_SCROLL, curItem, e.x);
+          break;
+        }
+      }
     },
     numAddUnit(num) {
       return num / 37.5 + 'rem';

src/views/vipLife/components/constant.js

+export const SCROLL_ITEM_WIDTH = 108;
+export const ITEM_WIDTH = 97;

src/views/vipLife/index.less

 @bottom-height: 60px;
-.Vl {
+@{deep} .Vl {
   &__panel {
     background-color: @white;
     border-radius: @border-radius-lx @border-radius-lx 0 0;

src/views/vipLife/index.vue

 <template>
   <div class="page page__nopad">
-    <cr-tabs v-model="currentTab" @change="handleTabChange">
+    <cr-tabs v-model="currentTab" @click="handleTabChange">
       <cr-tab v-for="(item, index) in spuData" :key="index" :title="item.name" :name="+item.type" />
     </cr-tabs>
-    <spu-list ref="spuList" :list="spuList" :info="spuInfo" />
+    <spu-list ref="spuList" :list="spuList" :info="spuInfo" @scroll="handleSpuScroll" />
     <div class="Vl__panel">
       <template>
         <account-input v-if="spuInfo.rechargeAccountType !== 2" v-model="account" :info="spuInfo" />
@@ -40,6 +40,7 @@ import SpuList from './components/SpuList.vue';
 import SkuList from './components/SkuList.vue';
 import AccountInput from './components/AccountInput.vue';
 import { throttle } from '@/service/utils.service';
+import { ITEM_WIDTH } from './components/constant';
 export default {
   name: 'VipLife',
   components: {
@@ -66,10 +67,13 @@ export default {
     },
     spuList() {
       let spuList = [];
+      let spuNum = 0;
       this.spuData.forEach((item, index) => {
         item.itemList.forEach(it => {
           it.parentIndex = index;
+          it.posX = spuNum * ITEM_WIDTH;
           spuList.push(it);
+          spuNum++;
         });
       });
       return spuList;
@@ -99,6 +103,9 @@ export default {
       this.updateSpuInfo(this.spuData[this.currentTab - 1].itemList[0]);
       this.getSkuListDebounce();
     },
+    handleSpuScroll(item) {
+      this.currentTab = item.parentIndex + 1;
+    },
     handleSpuSelected(item) {
       this.updateSpuInfo(item);
       this.getSkuListDebounce();
@@ -132,10 +139,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[0];
-        const defaultIndex = 0;
+        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;