fix: 问题修复

src/App.vue

@@ -2,7 +2,9 @@
   <div id="app">
     <cr-nav-bar v-if="header" :title="title" left-text="" @click-left="backFun" />
     <div class="app">
-      <router-view />
+      <transition :name="transitionName">
+        <router-view />
+      </transition>
     </div>
     <div v-if="loading" class="loading-container">
       <cr-loading class="loading" size="24px">加载中...</cr-loading>
@@ -13,13 +15,16 @@
 <script>
 import { mapState } from 'vuex';
 import NetError from '@/components/NetError';
+import { routerStorage } from '@/service/routerStorage';
 export default {
   name: 'App',
   components: {
     NetError
   },
   data() {
-    return {};
+    return {
+      transitionName: 'slide-right'
+    };
   },
   computed: {
     ...mapState({
@@ -36,6 +41,19 @@ export default {
           document.body.className = val ? 'has-header' : '';
         }
       }
+    },
+    $route(to, from) {
+      routerStorage(to.path, from.path);
+      const firstPath = ['/home', '/orderDetail', '/payWaiting'];
+      if (
+        [to.path, from.path].every(v => firstPath.includes(v)) ||
+        [to.path, from.path].includes('/')
+      ) {
+        this.transitionName = '';
+        return;
+      }
+      this.transitionName = this.$router.isBack ? 'slide-right' : 'slide-left';
+      this.$router.isBack = false;
     }
   },
   methods: {
@@ -95,4 +113,33 @@ export default {
 .b-t:after {
   top: 0;
 }
+
+.slide-right-enter-active,
+.slide-right-leave-active,
+.slide-left-enter-active,
+.slide-left-leave-active {
+  will-change: transform;
+  transition: all 500ms;
+  position: absolute;
+}
+
+.slide-right-enter {
+  opacity: 0;
+  transform: translate3d(-100%, 0, 0);
+}
+
+.slide-right-leave-active {
+  opacity: 0;
+  transform: translate3d(100%, 0, 0);
+}
+
+.slide-left-enter {
+  opacity: 0;
+  transform: translate3d(100%, 0, 0);
+}
+
+.slide-left-leave-active {
+  opacity: 0;
+  transform: translate3d(-100%, 0, 0);
+}
 </style>

src/api/tips.js

 export default {
-  1: {
-    title: '温馨提示',
-    content: `<p>充值类商品售出后无法进行退换，非充值用户请谨慎购买。</p>`
-  },
-  2: {
-    title: '温馨提示',
-    content: `<p>充值类商品售出后无法进行退换，非充值用户请谨慎购买。</p>`
-  },
   401: {
     title: '使用方法',
     content: `<p>1. 进入猫眼APP，登陆后打开“我的”，点击“优惠券”；</p>

src/main.js

@@ -26,6 +26,14 @@ saService.init(router);
 
 Vue.config.productionTip = false;
 
+window.addEventListener(
+  'popstate',
+  () => {
+    router.isBack = true;
+  },
+  false
+);
+
 new Vue({
   router,
   store,

src/service/routerStorage.js

+import localStorage from '@/service/localStorage.service';
+
+export function routerStorage(toPath, fromPath) {
+  let storage = localStorage.get('history') || { isBack: false, paths: [], fromPath: '' };
+  // 初始化
+  if (fromPath === '/') storage.paths = [];
+  if (storage.paths.includes(toPath)) {
+    const toPathIndex = storage.paths.indexOf(toPath);
+    storage = { ...storage, isBack: true, fromPath };
+    storage.paths.splice(toPathIndex + 1);
+  } else {
+    storage = { ...storage, isBack: false, fromPath };
+    storage.paths.push(toPath);
+  }
+  localStorage.set('history', storage);
+}
+
+export function isBack(excludeFromPath = '') {
+  let storage = localStorage.get('history') || { isBack: false, paths: [], fromPath: '' };
+  if (storage.isBack && excludeFromPath !== storage.fromPath) {
+    return true;
+  }
+  return false;
+}

src/service/validation.service.js

@@ -298,7 +298,7 @@ export const isIOS = /iphone|ipad|ipod/.test(ua);
 export const isAndroid = /android/.test(ua);
 
 // 判断
-export const appVersion = ua.match(/xyqb\/([\d|.]+)/);
+export const appVersion =  ua.match(/xyqb\/([\d|.]+)/) && ua.match(/xyqb\/([\d|.]+)/)[1];
 
 export const isQQ = ua.match(/QQ/i) == 'qq';
 

src/views/home/index.vue

@@ -50,7 +50,7 @@ export default {
       phoneRecharge: {},
       userPhoneInfo: {},
       rechargeType: 'recharge',
-      historyRecordList: ['17611682272', '222222222'],
+      historyRecordList: [],
       rechargePhoneInfo: {},
       selectedRechargeInfo: {}
     };

src/views/orderDetail/index.vue

@@ -61,7 +61,7 @@
         微信支付金额：<span>{{ orderInfo.payDetail.wxPayAmt || '' }}</span>
       </div>
       <div v-if="orderInfo.orderDetail.payType" class="Od__info-item">
-        支付方式：<span>{{ payType }}</span>
+        支付方式：<span>{{ orderInfo.orderDetail.payType }}</span>
       </div>
     </div>
     <div class="Od__bottom">
@@ -106,7 +106,7 @@
         提醒发货
       </cr-button>
       <cr-button
-        v-if="orderInfo.orderStatusInfo.orderStatus === 31"
+        v-if="orderInfo.orderStatusInfo.orderStatus === 41"
         size="small"
         plain
         type="primary"
@@ -121,6 +121,7 @@
 <script>
 import ListItem from '../orderList/components/ListItem.vue';
 import { setClipboardData } from '@/service/utils.service';
+import { isBack } from '@/service/routerStorage';
 import orderApi from '@/api/order.api';
 import img11 from '@/assets/images/order/11.png';
 import img21 from '@/assets/images/order/21.png';
@@ -162,13 +163,17 @@ export default {
         orderNo: this.orderNo
       };
     },
-    payType() {
-      return this.orderInfo.orderDetail.payType === 1 ? '微信' : '支付宝';
-    },
     isKeyChange() {
       return this.currentOrder.virtualChargeAttrs && this.currentOrder.virtualChargeAttrs.cardKey;
     }
   },
+  beforeRouteLeave(from, to, next) {
+    if (isBack() || from.path.indexOf('pay') > -1) {
+      window.location.href = window.location.origin;
+    } else {
+      next();
+    }
+  },
   mounted() {
     this.orderNo = this.$route.query.orderNo;
     this.getDetail();

src/views/pay/extends.js

@@ -27,7 +27,7 @@ export const goUrlExtends = {
         window.location.replace = `${toBHost}/orderDetail?orderNo=${orderNo}`;
         return;
       }
-      this.$router.replace({
+      this.$router.push({
         name: 'orderDetail',
         query: { orderNo }
       });

src/views/pay/payWaiting.vue

@@ -73,7 +73,7 @@ export default {
     },
     goSuccess() {
       // 支付成功
-      this.$router.replace({ name: 'paySuccess' });
+      this.$router.push({ name: 'paySuccess' });
     },
     goPay() {
       this.$router.replace({ name: 'pay', query: { orderNo: this.orderNo } });
@@ -81,7 +81,7 @@ export default {
     async query() {
       const [data, error] = await queryPayStatus({ orderNo: this.orderNo });
       if (error) {
-        this.$router.replace({
+        this.$router.push({
           name: 'payFail',
           query: { reason: error.message, orderNo: this.orderNo }
         });

src/views/vipLife/components/SpuList.vue

@@ -4,6 +4,7 @@
       <div
         v-for="(item, index) in list"
         :key="index"
+        ref="spuItem"
         class="Vl__spu-item"
         :class="{ 'Vl__spu-item_active': info.spuNos === item.spuNos }"
         @click="handleSpuClick($event, item, index)"
@@ -48,15 +49,26 @@ export default {
   },
   computed: {
     contentWidth() {
-      return ITEM_WIDTH * (this.list.length + 2.34);
+      this.listWrapper &&
+        this.$nextTick(() => {
+          this.listWrapper.scrollTo(0, 0);
+          this.listWrapper.refresh();
+        });
+      return ITEM_WIDTH * (this.list.length + 2.28);
     }
   },
   watch: {
-    contentWidth() {
-      this.$nextTick(() => {
-        this.listWrapper.scrollTo(0, 0);
-        this.listWrapper.refresh();
-      });
+    info: {
+      deep: true,
+      handler(val) {
+        if (Object.hasOwnProperty.call(val, 'index')) {
+          const itemIndex = this.list.findIndex(item => item.index === val.index);
+          if (itemIndex === -1) return;
+          this.$nextTick(() => {
+            this.handleSpuClick(this.$refs.spuItem[itemIndex], val, itemIndex);
+          });
+        }
+      }
     }
   },
 
@@ -84,7 +96,7 @@ export default {
     },
     handleSpuClick(e, item, index) {
       this.$parent.handleSpuSelected(item, index);
-      const target = e.path.find(item => item.className.indexOf('Vl__spu-item') > -1);
+      const target = e.path ? e.path.find(item => item.className.indexOf('Vl__spu-item') > -1) : e;
       this.listWrapper.scrollToElement(target, 500, -10, 0);
     }
   }

src/views/vipLife/index.vue

@@ -18,6 +18,10 @@
         <div class="Vl__panel-title">{{ tips.title }}</div>
         <div class="Vl__panel-tips" v-html="tips.content" />
       </template>
+      <div class="Vl__panel-title">温馨提示</div>
+      <div class="Vl__panel-tips">
+        <p>充值类商品售出后无法进行退换，非充值用户请谨慎购买。</p>
+      </div>
     </div>
     <div class="Vl__bottom">
       <cr-button type="primary" block shape="circle" :disabled="disabled" @click="goOrder">
@@ -61,12 +65,15 @@ export default {
       return (this.spuInfo.rechargeAccountType !== 2 && !this.account) || !this.skuList.length;
     },
     spuList() {
-      return this.spuData[this.currentTab - 1] ? this.spuData[this.currentTab - 1].itemList : [];
+      let spuList = [];
+      this.spuData.forEach((item, index) => {
+        item.itemList[0].index = index;
+        spuList = [...spuList, ...item.itemList];
+      });
+      return spuList;
     },
     tips() {
-      return this.spuInfo.type
-        ? tipsData[this.spuInfo.type] || tipsData[+('' + this.spuInfo.type)[0]] || {}
-        : {};
+      return this.spuInfo.type ? tipsData[this.spuInfo.type] : {};
     }
   },
   mounted() {
@@ -104,6 +111,7 @@ export default {
     async getList() {
       const [res] = await rechargeApi.getSpuList();
       if (res) {
+        this.account = res.userPhoneInfo.phoneNo;
         this.spuData = res.vipLife;
         this.updateSpuInfo(this.spuData[this.currentTab - 1].itemList[0]);
         this.getSkuListDebounce();