Merge branch 'feat/vipLife' into 'master'

Feat/vip life

See merge request !3

package-lock.json

@@ -1159,9 +1159,9 @@
       }
     },
     "@qg/ui-request": {
-      "version": "0.0.7",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fui-request/-/ui-request-0.0.7.tgz",
-      "integrity": "sha512-C6qxG0HMskn0KDc9TDfmYf2ysPcD8ewEGQCpRv505A89oW28qTA8FpGHEVGWEO20ZJ9I6KAmfMkNaPxIZXHgKg==",
+      "version": "0.0.8",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fui-request/-/ui-request-0.0.8.tgz",
+      "integrity": "sha512-BeS7fWiTM5uI/FzGpZ5phuU0ZQXWsjX5LDiMq6FhMz5IXQthd3gMn+Q1DyYF6YyQI6rG9eDq18CMvWMdkbtt/Q==",
       "requires": {
         "axios": "^0.19.2"
       }
@@ -3333,6 +3333,16 @@
       "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.8",
+      "resolved": "http://npmprivate.quantgroups.com/clipboard/-/clipboard-2.0.8.tgz",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clipboardy": {
       "version": "2.3.0",
       "resolved": "http://npmprivate.quantgroups.com/clipboardy/-/clipboardy-2.3.0.tgz",
@@ -3962,6 +3972,11 @@
         "randomfill": "^1.0.3"
       }
     },
+    "crypto-js": {
+      "version": "3.1.9-1",
+      "resolved": "http://npmprivate.quantgroups.com/crypto-js/-/crypto-js-3.1.9-1.tgz",
+      "integrity": "sha1-/aGedh/Ad+Af+/3G6f38WeiAbNg="
+    },
     "css": {
       "version": "2.2.4",
       "resolved": "http://npmprivate.quantgroups.com/css/-/css-2.2.4.tgz",
@@ -4500,6 +4515,11 @@
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
       "dev": true
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "http://npmprivate.quantgroups.com/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "http://npmprivate.quantgroups.com/depd/-/depd-1.1.2.tgz",
@@ -5902,6 +5922,14 @@
         "slash": "^2.0.0"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "http://npmprivate.quantgroups.com/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "http://npmprivate.quantgroups.com/graceful-fs/-/graceful-fs-4.2.4.tgz",
@@ -8462,10 +8490,9 @@
       }
     },
     "node-forge": {
-      "version": "0.9.0",
-      "resolved": "http://npmprivate.quantgroups.com/node-forge/-/node-forge-0.9.0.tgz",
-      "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
-      "dev": true
+      "version": "0.10.0",
+      "resolved": "http://npmprivate.quantgroups.com/node-forge/-/node-forge-0.10.0.tgz",
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA=="
     },
     "node-ipc": {
       "version": "9.1.1",
@@ -10704,6 +10731,11 @@
         "ajv-keywords": "^3.4.1"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "http://npmprivate.quantgroups.com/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "http://npmprivate.quantgroups.com/select-hose/-/select-hose-2.0.0.tgz",
@@ -10717,6 +10749,14 @@
       "dev": true,
       "requires": {
         "node-forge": "0.9.0"
+      },
+      "dependencies": {
+        "node-forge": {
+          "version": "0.9.0",
+          "resolved": "http://npmprivate.quantgroups.com/node-forge/-/node-forge-0.9.0.tgz",
+          "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
+          "dev": true
+        }
       }
     },
     "semver": {
@@ -11998,6 +12038,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "http://npmprivate.quantgroups.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "http://npmprivate.quantgroups.com/tmp/-/tmp-0.0.33.tgz",

package.json

@@ -13,9 +13,12 @@
     "@qg/cherry-ui": "^2.20.23",
     "@qg/js-bridge": "^1.1.9",
     "@qg/qg-scroll": "^1.4.2",
-    "@qg/ui-request": "0.0.7",
+    "@qg/ui-request": "0.0.8",
+    "clipboard": "^2.0.8",
     "core-js": "^3.6.5",
+    "crypto-js": "^3.1.9-1",
     "js-cookie": "^2.2.1",
+    "node-forge": "^0.10.0",
     "raven-js": "^3.27.2",
     "sa-sdk-javascript": "^1.15.16",
     "vue": "2.6.11",

src/api/demo.auth.js

-import config from '@/config';
-import { saDeviceId } from '@/service/sa.service';
-import http from '@/service/httpDecorator';
-const { talosHost } = config;
-
-export default {
-  // 猜你喜欢-（商品详情页）
-  recommendLike: async function() {
-    // return http.get(talosHost + '/vcc/xyqb/recommend/like');
-    return http.get(`${talosHost}/vcc/xyqb/recommend/goods-list`, {
-      customHeader: {
-        scDeviceId: await saDeviceId()
-      }
-    });
-  }
-};

src/service/cherryUI.service.js

@@ -31,7 +31,9 @@ import {
   CountDown,
   PwdField,
   AuthcodeField,
-  CouponList
+  CouponList,
+  Swipe,
+  SwipeItem
 } from '@qg/cherry-ui';
 import DialogFn from '@qg/cherry-ui/src/dialog/func';
 // import "@qg/cherry-ui/dist/cherry.css";
@@ -66,6 +68,8 @@ Vue.use(CountDown);
 Vue.use(PwdField);
 Vue.use(AuthcodeField);
 Vue.use(CouponList);
+Vue.use(Swipe);
+Vue.use(SwipeItem);
 
 // const _proto = Vue.prototype;
 // const proto = Object.create(_proto);

src/service/encrypt.js

@@ -2,13 +2,13 @@
  * @Description: 数据加密，aes加密数据主体，rsa加密aes密钥，aes密钥前端自己存储
  * @Date: 2020-12-08 11:08:28
  * @LastEditors: gzw
- * @LastEditTime: 2021-01-29 19:06:27
+ * @LastEditTime: 2021-07-07 17:44:22
  */
 import { cipher as AES, util as UTIL, pki as PKI, md as SHA1 } from 'node-forge';
 import uuidv1 from 'uuid/v1';
 import { parseTime } from './utils.service';
-import { APP_ID, PUBLIC_KEY, PRIVATE_KEY } from './encrypt.config';
-const CryptoJS = require('./crypto.min');
+import { APP_ID, PUBLIC_KEY, PRIVATE_KEY } from '@/config/encrypt.config';
+import CryptoJS from 'crypto-js';
 import { desSalt } from '@/api/pay.api';
 
 /**

src/service/httpDecorator.js

@@ -10,5 +10,5 @@ const http = new HttpRequest(
   function(loadingState) {
     store.dispatch('change_loading', loadingState);
   }
-);
+).getInstance();
 export default http;

src/service/init.service.js

@@ -6,7 +6,13 @@ import { isWechat, isApp } from './validation.service';
 import Cookies from './cookieStorage.service';
 import localStorage from './localStorage.service';
 //formXcxPage:标识是从小程序跳转过来的;
-const localStorageParams = ['creditToken', 'vccToken', 'vccChannel', 'formXcxPage'];
+const localStorageParams = [
+  'creditToken',
+  'vccToken',
+  'vccChannel',
+  'sonVccChannel',
+  'formXcxPage'
+];
 const cookiesParams = ['h'];
 
 export default {

src/service/utils.service.js

 import { isAndroid, isIOS } from './validation.service';
+import Clipboard from 'clipboard';
 
 /**
  * 替换邮箱字符
@@ -343,3 +344,37 @@ export function phoneTrim(mobile) {
 export function isObject(value) {
   return Object.prototype.toString.call(value) === '[object Object]';
 }
+
+export function setClipboardData(
+  options = {
+    data: '',
+    success: () => {},
+    fail: () => {}
+  }
+) {
+  const fakeEl = document.createElement('button');
+  const clipboard = new Clipboard(fakeEl, {
+    text() {
+      return options.data || '';
+    },
+    action() {
+      return 'copy';
+    },
+    container: document.body
+  });
+  clipboard.on('success', e => {
+    clipboard.destroy();
+    if (options.success) {
+      options.success(e);
+    }
+  });
+  clipboard.on('error', e => {
+    clipboard.destroy();
+    if (options.fail) {
+      options.fail(e);
+    }
+  });
+  document.body.appendChild(fakeEl);
+  fakeEl.click();
+  document.body.removeChild(fakeEl);
+}

src/views/orderDetail/index.vue

@@ -121,7 +121,7 @@
 <script>
 import ListItem from '../orderList/components/ListItem.vue';
 import CancelPopup from '../orderList/components/CancelPopup.vue';
-
+import { setClipboardData } from '@/service/utils.service';
 import orderApi from '@/api/order.api';
 import img11 from '@/assets/images/order/11.png';
 import img21 from '@/assets/images/order/21.png';
@@ -194,7 +194,12 @@ export default {
       this.$toast.success('已通知卖家');
     },
     copyPwd(item) {
-      this.$toast.success('已复制');
+      setClipboardData({
+        data: `${item.cardPassword}`,
+        success: () => {
+          this.$toast.success('已复制');
+        }
+      });
       console.log(item);
     }
   }

src/views/vipLife/components/AccountInput.vue

 <template>
   <div class="Vl__account">
-    <cr-field
-      v-model="accountMask"
-      :placeholder="`请输入${info.name || ''}账号`"
-      clearable
-      @focus="inputBlur = false"
-      @blur="inputBlur = true"
-    >
+    <cr-field v-model="accountMask" :placeholder="`请输入${info.name || ''}账号`" clearable>
       <template #button>
         <cr-image v-if="info.icon" :src="info.icon" width="0.64rem" height="0.64rem" />
       </template>
     </cr-field>
-    <div class="Vl__list" :class="{ show: !inputBlur }">
+    <!-- <div class="Vl__list" :class="{ show: !inputBlur }">
       <div
         v-for="(item, index) in list"
         :key="index"
@@ -22,7 +16,7 @@
         <span class="phone-home">{{ item.home }}</span>
         <span v-if="index === 0" class="current">上次充值</span>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 <script>
@@ -39,28 +33,20 @@ export default {
   },
   data: function() {
     return {
-      inputBlur: true,
-      showList: false,
-      list: [
-        {
-          phone: '17165445433',
-          home: '北京 移动'
-        },
-        {
-          phone: '17165345433',
-          home: '北京 移动'
-        },
-        {
-          phone: '17165345435',
-          home: '北京 移动'
-        }
-      ]
+      // inputBlur: true
+      // showList: false
+      // list: [
+      //   {
+      //     phone: '17165445433',
+      //     home: '北京 移动'
+      //   }
+      // ]
     };
   },
   computed: {
     accountMask: {
       get() {
-        return this.phoneFormat(this.value);
+        return this.info.rechargeAccountType !== 3 ? this.phoneFormat(this.value) : this.value;
       },
       set(val) {
         this.$emit('input', val.replace(/\s/g, ''));

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 functional>
-  <div class="Vl__spu">
-    <div
-      v-for="(item, index) in props.list"
-      :key="index"
-      class="Vl__spu-item"
-      :class="{ 'Vl__spu-item_active': props.info.spuNo === item.spuNo }"
-      @click="parent.handleSpuSelected(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>
+<template>
+  <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="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: function() {
+    return {
+      listWrapper: null
+    };
+  },
+  computed: {
+    contentWidth() {
+      this.$nextTick(() => {
+        this.listWrapper && this.listWrapper.refresh();
+      });
+      return ITEM_WIDTH * this.list.length + this.placeholderWidth;
+    },
+    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: {
+    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);
+    }
   }
 };
 </script>
 <style lang="less" scoped>
 .Vl {
   &__spu {
-    padding: @padding-sm 0;
-    display: flex;
-    align-items: center;
-    overflow: auto;
-    &::before,
-    &::after {
-      content: ' ';
-      flex-shrink: 0;
-      display: block;
-      width: @padding-sm;
-      height: 97px;
+    &-wrapper {
+      width: 375px;
+      height: 121px;
+      overflow: hidden;
     }
-    &::after {
-      width: @padding-unit;
+    &-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;
+    position: relative;
+    // &::before,
+    // &::after {
+    //   content: ' ';
+    //   flex-shrink: 0;
+    //   display: block;
+    //   width: @padding-sm;
+    //   height: 97px;
+    // }
+    // &::after {
+    //   width: @padding-unit;
+    // }
     &-item {
       height: 97px;
       width: 95px;
@@ -55,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

 @bottom-height: 60px;
 .Vl {
-  &__spu {
-    padding: @padding-sm 0;
-    display: flex;
-    align-items: center;
-    overflow: auto;
-    &::before, &::after {
-      content: ' ';
-      flex-shrink: 0;
-      display: block;
-      width: @padding-sm;
-      height: 97px;
-    }
-    &::after {
-      width: @padding-unit;
-    }
-    &-item {
-      height: 97px;
-      width: 95px;
-      border-radius: @border-radius-md;
-      background-color: @white;
-      flex-shrink: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      margin-right: @padding-xs;
-      transition: all .2s linear;
-      &_active {
-        box-shadow: 0px 2px 12px 0px rgba(100, 101, 102, 0.12);
-        transform: scale(1.03);
-      }
-    }
-    &-name {
-      .text-14();
-      color: @text-grey;
-      padding: 0 @padding-sm;
-      margin-top: @padding-xs;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 1;
-      flex-shrink: 0;
-      overflow: hidden;
-    }
-  }
-  &__sku {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    position: relative;
-    z-index: 1;
-    &.disabled::before {
-      content: ' ';
-      z-index: 2;
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 100%;
-      width: 100%;
-      background: rgba(255, 255, 255, 0.6);
-    }
-    &-item {
-      width: 162px;
-      height: 72px;
-      border-radius: @border-radius-sm - 2;
-      border: 1px solid @grey-border;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      position: relative;
-      margin-bottom: @padding-xs;
-      transition: all .1s linear;
-      &.cheap {
-        .Vl__sku-tag {
-          display: block;
-          color: @white;
-          background: linear-gradient(269deg, #FF5D00 12%, #FF1900 86%);
-        }
-      }
-      &.active {
-        background: #FFF5F5;
-        border: 1px solid @red;
-        .Vl__sku-name {
-          color: @red;
-        }
-        .Vl__sku-price {
-          color: @red;
-        }
-      }
-    }
-    &-name {
-      color: @text-color;
-      .text-17();
-      font-weight: @font-weight-bold - 100;
-    }
-    &-price {
-      color: @gray-5;
-      .text-12();
-    }
-    &-tag {
-      background: @gray-2;
-      .text-10();
-      border-radius: 0 @border-radius-sm - 2 0 @border-radius-sm - 2;
-      padding: 0 @padding-unit;
-      position: absolute;
-      top: 0;
-      right: 0;
-      display: none;
-    }
-  }
   &__panel {
     background-color: @white;
     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;
     }
@@ -126,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

@@ -3,18 +3,23 @@
     <cr-tabs v-model="currentTab" @change="handleTabChange">
       <cr-tab v-for="(item, index) in spuData" :key="index" :title="item.name" :name="+item.type" />
     </cr-tabs>
-    <spu-list :list="spuList" :info="spuInfo" />
+    <spu-list ref="spuList" :list="spuList" :info="spuInfo" />
     <div class="Vl__panel">
-      <account-input v-if="spuInfo.rechargeAccountType !== 2" v-model="account" :info="spuInfo" />
-      <div v-else class="Vl__panel-placeholder" />
+      <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,37 +70,57 @@ 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.spuInfo = this.spuData[name].itemList[0];
-      this.getSkuList();
+      this.updateSpuInfo(this.spuData[this.currentTab - 1].itemList[0]);
+      this.getSkuListDebounce();
     },
-    handleSpuSelected(item, index) {
+    handleSpuSelected(item) {
       this.spuInfo = item;
-      this.spuInfo.index = index;
-      this.getSkuList();
+      this.updateSpuInfo(item);
+      this.getSkuListDebounce();
     },
     handleSkuSelected(item, index) {
       this.skuInfo = item;
       this.skuInfo.index = index;
     },
+    updateSpuInfo(info) {
+      this.$set(this, 'spuInfo', info);
+    },
     async getList() {
       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;
       const [res] = await rechargeApi.getSkuList({ spuNos, type });
       if (res) {
         this.skuList = res.rechargeList;
+        this.handleSkuSelected(res.rechargeList[0], 0);
       }
+      this.showLoading = false;
     },
     async goOrder() {
       if (!this.account && this.spuInfo.rechargeAccountType !== 2)

vue.config.js

@@ -9,6 +9,8 @@ const externals = {
   vue: 'Vue',
   'vue-router': 'VueRouter',
   vuex: 'Vuex',
+  'node-forge': 'forge',
+  'crypto-js': 'CryptoJS',
   'sa-sdk-javascript': 'sensorsDataAnalytic201505' // 神策js在window下的全局引用会出现两个，这个才是真物
   // axios: "axios"
 };
@@ -19,6 +21,8 @@ const cdn = {
       'https://activitystatic.lkbang.net/vue/2.6.11/vue.min.js',
       'https://activitystatic.lkbang.net/vue-router/3.2.0/vue-router.min.js',
       'https://activitystatic.lkbang.net/vuex/3.4.0/vuex.min.js',
+      'https://activitystatic.lkbang.net/node-forge/0.10.0/forge.min.js',
+      'https://appsync.lkbang.net/crypto.min.js',
       'https://activitystatic.lkbang.net/sa-sdk-javascript/1.15.16/sensorsdata.min.js'
     ]
   }