优化微信支付，优化全局过滤器

src/App.vue

@@ -3,7 +3,7 @@
     <template v-slot:main>
       <transition :name="transitionName" appear>
         <keep-alive :include="cashViews">
-          <router-view class="router j-container" :class="$env.isWeiXinBrowser ? 'wx' : 'app'" />
+          <router-view class="router j-container" :class="env.platform" />
         </keep-alive>
       </transition>
     </template>
@@ -24,7 +24,8 @@ export default {
   data () {
     return {
       // 需要被缓存的组件，组件的name属性数组
-      cashViews: ['home']
+      cashViews: ['home'],
+      env: this.$env
     }
   }
 }

src/utils/globalFilters.ts

@@ -1,5 +1,9 @@
 import Vue from 'vue'
-import moment from 'moment'
+import {
+  dateFormatter,
+  dateFromNow,
+  addSpaceForTel
+} from './globalFunctions'
 
 // 注册全局过滤器
 
@@ -7,6 +11,29 @@ Vue.filter('fen2Yuan', function (v) {
   return v / 100
 })
 
+// 时间格式化（同时间格式化函数）
+Vue.filter('dateFormatter', dateFormatter)
+// 时间戳转换 多少秒、多少分、多少小时前、多少天前  超出10天显示年月日
+Vue.filter('dateFromNow', dateFromNow)
+// 手机号加空格
+Vue.filter('addSpaceForTel', addSpaceForTel)
+
+// Vue.filter('addSpaceForBank', function (v) {
+//   // 纯数字银行卡号字符串加空格
+//   // return v.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, '$1 ')
+//   // 带有*的银行卡号字符串加空格
+//   return v.replace(/\s/g, '').replace(/(.{4})/g, '$1 ')
+// })
+
+// Vue.filter('addConfusionForBank', function (v) {
+//   // 带有*的银行卡号字符串加空格
+//   if (String(v).length < 12) {
+//     return v.replace(/\s/g, '').replace(/^(\d{2})\d+(\d{2})$/, '$1 **** **** $2')
+//   } else {
+//     return v.replace(/\s/g, '').replace(/^(\d{4})\d+(\d{4})$/, '$1 **** **** $2')
+//   }
+// })
+
 // 金额大写，链接：https://juejin.im/post/5a2a7a5051882535cd4abfce
 // upDigit(1682)
 // result："人民币壹仟陆佰捌拾贰元整"
@@ -40,61 +67,6 @@ Vue.filter('upPrice', function (n) {
   return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整')
 })
 
-// 时间格式化（同时间格式化函数）
-/*
-* 时间格式化函数(将时间格式化为，2019年08月12日，2019-08-12，2019/08/12的形式)
-*   pattern参数（想要什么格式的数据就传入什么格式的数据）
-*     · 'yyyy-MM-dd'  ---> 输出如2019-09-20
-*     · 'yyyy-MM-dd HH:mm'  --->  输出如2019-09-20 08:20
-*     · 'yyyy-MM-dd HH:mm:ss'  --->  输出如2019-09-20 08:20:23
-*     · 'yyyy/MM/dd'  --->  输出如2019/09/20
-*     · 'yyyy年MM月dd日'  --->  输出如2019年09月20日
-*     · 'yyyy年MM月dd日 HH时mm分'  --->  输出如2019年09月20日 08时20分
-*     · 'yyyy年MM月dd日 HH时mm分ss秒'  --->  输出如2019年09月20日 08时20分23秒
-*     · 'yyyy年MM月dd日 HH时mm分ss秒 EE'  --->  输出如2019年09月20日 08时20分23秒 周二
-*     · 'yyyy年MM月dd日 HH时mm分ss秒 EEE'  --->  输出如2019年09月20日 08时20分23秒 星期二
-*  参考: https://www.cnblogs.com/mr-wuxiansheng/p/6296646.html
-*/
-Vue.filter('dateFormatter', function (date, fmt = 'yyyy-MM-dd HH:mm:ss') {
-  if (!date) return
-  date = new Date(moment(date).valueOf())
-  const o = {
-    'y+': date.getFullYear(),
-    'M+': date.getMonth() + 1, // 月份
-    'd+': date.getDate(), // 日
-    // 12小时制
-    'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
-    // 24小时制
-    'H+': date.getHours(), // 小时
-    'm+': date.getMinutes(), // 分
-    's+': date.getSeconds(), // 秒
-    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
-    S: date.getMilliseconds(), // 毫秒
-    'E+': date.getDay() // 周
-  }
-  const week = {
-    0: '日',
-    1: '一',
-    2: '二',
-    3: '三',
-    4: '四',
-    5: '五',
-    6: '六'
-  }
-  if (/(y+)/.test(fmt)) {
-    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
-  }
-  if (/(E+)/.test(fmt)) {
-    fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '星期' : '周') : '') + week[date.getDay() + ''])
-  }
-  for (const k in o) {
-    if (new RegExp('(' + k + ')').test(fmt)) {
-      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
-    }
-  }
-  return fmt
-})
-
 // 金额3位逗号分隔
 Vue.filter('formatNumber', function (s, n = -1, comma = false) {
   if (n !== -1) n = n > 0 && n <= 20 ? n : 2
@@ -132,61 +104,3 @@ Vue.filter('formatNumber', function (s, n = -1, comma = false) {
 
   return left.reverse().join('') + point + right
 })
-
-Vue.filter('dateFromNow', function (time: string | number) {
-  const date1 = new Date(time) // 开始时间
-  const date2 = new Date() // 结束时间
-  const date3 = date2.getTime() - date1.getTime() // 时间差的毫秒数
-  // 计算出相差天数
-  const days = Math.floor(date3 / (24 * 3600 * 1000))
-  // 计算出小时数
-  const leave1 = date3 % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
-  const hours = Math.floor(leave1 / (3600 * 1000))
-  // 计算相差分钟数
-  const leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
-  const minutes = Math.floor(leave2 / (60 * 1000))
-  // 计算相差秒数
-  let td = '30秒前'
-  if (days > 0) {
-    if (days > 10) {
-      const date1year = date1.getFullYear()
-      const date2year = date2.getFullYear()
-      let date1month: any = date1.getMonth() + 1
-      let date1day: any = date1.getDate()
-      if (date1month < 10) {
-        date1month = '0' + date1month
-      }
-      if (date1day < 10) {
-        date1day = '0' + date1day
-      }
-      if (date1year < date2year) {
-        td = date1.getFullYear() + '-' + date1month + '-' + date1day
-      } else {
-        td = date1month + '-' + date1day
-      }
-    } else {
-      td = days + '天前'
-    }
-  } else if (hours > 0) {
-    td = hours + '小时前'
-  } else if (minutes > 0) {
-    td = minutes + '分钟前'
-  }
-  return td
-})
-
-// Vue.filter('addSpaceForBank', function (v) {
-//   // 纯数字银行卡号字符串加空格
-//   // return v.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, '$1 ')
-//   // 带有*的银行卡号字符串加空格
-//   return v.replace(/\s/g, '').replace(/(.{4})/g, '$1 ')
-// })
-
-// Vue.filter('addConfusionForBank', function (v) {
-//   // 带有*的银行卡号字符串加空格
-//   if (String(v).length < 12) {
-//     return v.replace(/\s/g, '').replace(/^(\d{2})\d+(\d{2})$/, '$1 **** **** $2')
-//   } else {
-//     return v.replace(/\s/g, '').replace(/^(\d{4})\d+(\d{4})$/, '$1 **** **** $2')
-//   }
-// })

src/utils/globalFunctions.ts

@@ -17,6 +17,27 @@ export function androidOrIOS () {
   return agent
 }
 
+// 字符串处理相关函数
+// 手机号中间4位加*
+export function addConfusionForTel (tel: string) {
+  const reg = /^(\d{3})\d{4}(\d{4})$/
+  return tel.replace(reg, '$1****$2')
+}
+// 手机号加空格
+export function addSpaceForTel (tel) {
+  const regMap = {
+    isConfuse: /^(\d{3})\*{4}(\d{4})$/,
+    addSpace: /^(\d{3})(\d{4})(\d{4})$/
+  }
+  const confusion = regMap.isConfuse.test(tel)
+  if (confusion) {
+    return tel.replace(regMap.isConfuse, '$1 **** $2')
+  } else {
+    return tel.replace(regMap.addSpace, '$1 $2 $3')
+  }
+}
+
+// 时间格式化相关函数
 /*
 * 时间格式化函数(将时间格式化为，2019年08月12日，2019-08-12，2019/08/12的形式)
 *   pattern参数（想要什么格式的数据就传入什么格式的数据）
@@ -33,7 +54,7 @@ export function androidOrIOS () {
 */
 export function dateFormatter (date, fmt = 'yyyy-MM-dd HH:mm:ss') {
   // 将传入的date转为时间对象
-  if (!date) return
+  if (!date) return ''
   date = new Date(moment(date).valueOf())
   const o = {
     'y+': date.getFullYear(),
@@ -73,7 +94,8 @@ export function dateFormatter (date, fmt = 'yyyy-MM-dd HH:mm:ss') {
 }
 
 // 时间戳转换 多少秒、多少分、多少小时前、多少天前  超出10天显示年月日
-export function dateFromNow (timestamp) {
+// 传入一个时间戳
+export function dateFromNow (timestamp: number) {
   const date1 = new Date(timestamp) // 开始时间
   const date2 = new Date() // 结束时间
   const date3 = date2.getTime() - date1.getTime() // 时间差的毫秒数
@@ -115,6 +137,7 @@ export function dateFromNow (timestamp) {
   return td
 }
 
+// DOM操作相关函数
 // 键盘抬起底部按钮隐藏
 // 传入输入框的DOM对象 和 footer的DOM对象
 export function inputFocusHideFooter (inputs: Array<any>, footer: any) {

src/utils/globalVariable.ts

@@ -1,11 +1,12 @@
 import Vue from 'vue'
-import { isWeiXinBrowser } from '@/utils/globalFunctions.ts'
 import WeiXinSDK from '@/utils/wx-js-sdk-register.ts'
+import { isWeiXinBrowser } from '@/utils/globalFunctions.ts'
 import { getWxSdkSign } from '@/api/pay.ts'
 
 declare module 'vue/types/vue' {
   interface Vue {
     $env: any;
+    $registerWxSdk: any;
     $wxSdk: any;
   }
 }
@@ -18,20 +19,22 @@ Vue.prototype.$env = {
   platform: inWeiXinBrowser ? 'wx' : 'app'
 }
 
-// 如果是微信浏览器,全局初始化一个微信SDK
+// 如果是微信浏览器, 注册一个微信SDK初始化函数
 if (inWeiXinBrowser) {
-  getWxSdkSign({ url: location.href.split('#')[0] }).then(result => {
-    const res = result.data
-    if (res && res.wxsdk && Array.isArray(res.wxsdk) && res.wxsdk !== 0) {
-      const sdk = res.wxsdk
-      Vue.prototype.$wxSdk = new WeiXinSDK({
-        appId: sdk[0],
-        timestamp: sdk[1],
-        nonceStr: sdk[2],
-        signature: sdk[3]
-      })
-    }
-  }).catch(err => {
-    console.log(err)
-  })
+  Vue.prototype.$registerWxSdk = () => {
+    getWxSdkSign({ url: location.href.split('#')[0] }).then(result => {
+      const res = result.data
+      if (res && res.wxsdk && Array.isArray(res.wxsdk) && res.wxsdk !== 0) {
+        const sdk = res.wxsdk
+        Vue.prototype.$wxSdk = new WeiXinSDK({
+          appId: sdk[0],
+          timestamp: sdk[1],
+          nonceStr: sdk[2],
+          signature: sdk[3]
+        })
+      }
+    }).catch(err => {
+      console.log(err)
+    })
+  }
 }

src/views/buy/Buy.vue

@@ -87,7 +87,7 @@
             <span>我已阅读，理解并接受</span>
             <a class="link highlight-text"
               @click.stop.prevent="toServiceTerms"
-              :href="$env.isWeiXinBrowser ? '/front/staticPage/serviceterms.html' : '/jyapp/front/staticPage/dataExport_serviceterms.html'"
+              :href="$env.isWeiXinBrowser ? '/front/staticPage/wx-serviceterms.html' : '/jyapp/front/staticPage/dataExport_serviceterms.html'"
             >
             《剑鱼标讯线上购买与服务条款》
             </a>
@@ -95,7 +95,7 @@
         </template>
       </van-cell>
       <div class="j-button-group">
-        <button class="j-button-confirm" @click="onSubmit" :disabled="confirmDisabled">立即支付</button>
+        <button class="j-button-confirm" @click="onSubmit" :disabled="confirmDisabled">提交订单</button>
       </div>
     </div>
   </div>

src/views/order/detail.vue

@@ -67,7 +67,7 @@
                 </div>
                 <div class="j-card-item">
                   <span class="card-item-l">手机号：</span>
-                  <span class="card-item-r">{{ productInfo.phone }}</span>
+                  <span class="card-item-r">{{ productInfo.phone | addSpaceForTel }}</span>
                 </div>
                 <div class="j-card-item">
                   <span class="card-item-l">公司名称：</span>
@@ -190,6 +190,8 @@ export default class OrderDetail extends Vue {
     }
   }
 
+  invokeUrlMap = {}
+
   payWayMap = {
     wx_js: '微信支付',
     wx_app: '微信支付',
@@ -210,6 +212,7 @@ export default class OrderDetail extends Vue {
   orderInfo = {
     // 0:待支付 1:已完成 -2:已取消
     state: 1,
+    applybillStatus: 1,
     ordercode: '',
     createTime: '',
     payTime: 0,
@@ -256,6 +259,7 @@ export default class OrderDetail extends Vue {
           for (const key in res.data.orderInfo) {
             this.orderInfo[key] = res.data.orderInfo[key]
           }
+          this.correctPageState()
         } else {
           this.$toast(res.error_msg || '查询订单信息失败')
         }
@@ -263,20 +267,63 @@ export default class OrderDetail extends Vue {
     })
   }
 
+  // 修正页面的展示数据
+  correctPageState () {
+    // 已完成支付，并且发票已开
+    if (this.orderInfo.state === 1) {
+      if (this.orderInfo.applybillStatus === 0) {
+        this.orderStateMap[this.orderInfo.state].bottomButton.text = '开发票'
+      } else {
+        this.orderStateMap[this.orderInfo.state].bottomButton.text = '查看发票'
+      }
+    }
+
+    // 设置开发票跳转url
+    // orderInfo.applybillStatus 0:未开票 1:已开票
+    this.invokeUrlMap = {
+      // 0:未开票 -> 去开发票
+      0: {
+        wx: {
+          can: `/front/invoice/showpage?order_code=${this.ordercode}`,
+          cannot: '/front/invoice/cantInvoice'
+        },
+        app: {
+          can: `/jyapp/front/invoice/showpage?order_code=${this.ordercode}`,
+          cannot: '/jyapp/front/cantInvoice'
+        }
+      },
+      // 1:已开票 -> 查看发票
+      1: {
+        wx: {
+          can: `/front/invoice/check_invoice.html?order_code=${this.ordercode}`
+        },
+        app: {
+          can: `/jyapp/front/invoice/check_invoice.html?order_code=${this.ordercode}`
+        }
+      }
+    }
+  }
+
   onCountdowFinish () {
     console.log('onCountdowFinish')
     // this.getInfo()
   }
 
   onConfirm () {
-    // 0:待支付 1:已完成 -2:已取消
+    // orderInfo 0:待支付 1:已完成 -2:已取消
     const url = this.orderStateMap[this.orderInfo.state].bottomButton.url
     if (this.orderInfo.state === 0) {
       // 去支付
       location.href = url + this.ordercode
     } else if (this.orderInfo.state === 1) {
-      // 开发票
-      this.checkInvokeIsOverFn()
+      // 已完成状态是否已开发票
+      if (this.orderInfo.applybillStatus === 0) {
+        // 0:未开票 -> 去开发票
+        this.checkInvokeIsOverFn()
+      } else {
+        // 1:已开票 -> 查看发票
+        location.href = this.invokeUrlMap[this.orderInfo.applybillStatus][this.$env.platform].can
+      }
     }
   }
 
@@ -286,23 +333,15 @@ export default class OrderDetail extends Vue {
       forbidClick: true,
       duration: 0
     })
-    const invokeUrlMap = {
-      wx: {
-        can: `/front/invoice/showpage?order_code=${this.ordercode}`,
-        cannot: '/front/invoice/cantInvoice'
-      },
-      app: {
-        can: `/jyapp/front/invoice/showpage?order_code=${this.ordercode}`,
-        cannot: '/jyapp/front/cantInvoice'
-      }
-    }
     this.checkInvokeIsOver({ order_code: this.ordercode }).then(res => {
       toast.clear()
       if (res) {
         if (res.status === 1) {
-          location.href = invokeUrlMap[this.$env.platform].can
+          // 可以开发票
+          location.href = this.invokeUrlMap[this.orderInfo.applybillStatus][this.$env.platform].can
         } else {
-          location.href = invokeUrlMap[this.$env.platform].cannot
+          // 开票时间过期
+          location.href = this.invokeUrlMap[this.orderInfo.applybillStatus][this.$env.platform].cannot
         }
       } else {
         this.$toast(res.error_msg || '查询发票状态失败')

src/views/pay/Pay.vue

@@ -94,6 +94,10 @@ export default class Pay extends Vue {
   created () {
     const query: any = this.$route.query
     this.orderInfo.ordercode = query.ordercode
+    if (this.env.isWeiXinBrowser) {
+      // 微信端注册wxjsSdk
+      this.$registerWxSdk()
+    }
   }
 
   mounted () {