全局过滤器优化

package.json

@@ -18,7 +18,6 @@
     "vant": "^2.8.2",
     "moment": "^2.24.0",
     "js-cookie": "^2.2.1",
-    "vconsole": "^3.3.4",
     "vue-class-component": "^7.2.2",
     "vue-property-decorator": "^8.3.0"
   },

public/index.html

@@ -32,5 +32,9 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+
+    <!-- vConsole debug -->
+    <!-- <script type="text/javascript" src="//cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
+    <script>new VConsole()</script> -->
   </body>
 </html>

src/utils/globalFilters.ts

@@ -2,11 +2,13 @@ import Vue from 'vue'
 import {
   dateFormatter,
   dateFromNow,
-  addSpaceForTel
+  addSpaceForTel,
+  upPrice,
+  formatPrice
 } from './globalFunctions'
 
 // 注册全局过滤器
-
+// 分转元
 Vue.filter('fen2Yuan', function (v) {
   return v / 100
 })
@@ -18,6 +20,11 @@ Vue.filter('dateFromNow', dateFromNow)
 // 手机号加空格
 Vue.filter('addSpaceForTel', addSpaceForTel)
 
+// 金额大写
+Vue.filter('upPrice', upPrice)
+// 金额3位逗号分隔
+Vue.filter('formatPrice', formatPrice)
+
 // Vue.filter('addSpaceForBank', function (v) {
 //   // 纯数字银行卡号字符串加空格
 //   // return v.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, '$1 ')
@@ -33,74 +40,3 @@ Vue.filter('addSpaceForTel', addSpaceForTel)
 //     return v.replace(/\s/g, '').replace(/^(\d{4})\d+(\d{4})$/, '$1 **** **** $2')
 //   }
 // })
-
-// 金额大写，链接：https://juejin.im/post/5a2a7a5051882535cd4abfce
-// upDigit(1682)
-// result："人民币壹仟陆佰捌拾贰元整"
-// upDigit(-1693)
-// result："欠壹仟陆佰玖拾叁元整"
-Vue.filter('upPrice', function (n) {
-  const fraction = ['角', '分', '厘']
-  const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
-  const unit = [
-    ['元', '万', '亿'],
-    ['', '拾', '佰', '仟']
-  ]
-  // const head = n < 0 ? '欠人民币' : '人民币'
-  const head = ''
-  n = Math.abs(n)
-  let s = ''
-  for (let i = 0; i < fraction.length; i++) {
-    s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '')
-  }
-  s = s || '整'
-  n = Math.floor(n)
-  for (let i = 0; i < unit[0].length && n > 0; i++) {
-    let p = ''
-    for (let j = 0; j < unit[1].length && n > 0; j++) {
-      p = digit[n % 10] + unit[1][j] + p
-      n = Math.floor(n / 10)
-    }
-    s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s
-    // s = p + unit[0][i] + s;
-  }
-  return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整')
-})
-
-// 金额3位逗号分隔
-Vue.filter('formatNumber', function (s, n = -1, comma = false) {
-  if (n !== -1) n = n > 0 && n <= 20 ? n : 2
-  const intS = parseInt(s)
-  let point = '.'
-  let left = []
-  let right = ''
-  s = parseFloat((s + '').replace(/[^\d.-]/g, ''))
-  // 没传n或者n为-1，默认(如果为整数，则不保留小数。如果为浮点数，则保留两位小数)
-  if (n === -1) {
-    if (s === intS) {
-      n = 0
-      right = ''
-      point = ''
-    } else {
-      n = 2
-      s = s.toFixed(n)
-      right = s.split('.')[1]
-    }
-    s = s + ''
-    left = s.split('.')[0].split('').reverse()
-  } else {
-    s = parseFloat((s + '').replace(/[^\d.-]/g, '')).toFixed(n) + ''
-    left = s.split('.')[0].split('').reverse()
-    right = s.split('.')[1]
-  }
-
-  if (comma) {
-    let t = ''
-    for (let i = 0; i < left.length; i++) {
-      t += left[i] + ((i + 1) % 3 === 0 && (i + 1) !== left.length ? ',' : '')
-    }
-    return t.split('').reverse().join('') + point + right
-  }
-
-  return left.reverse().join('') + point + right
-})

src/utils/globalFunctions.ts

@@ -1,6 +1,6 @@
 import moment from 'moment'
 
-// 是否是微信浏览器
+// 是否是微信浏览器 ------------>
 export function isWeiXinBrowser () {
   return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
 }
@@ -18,12 +18,12 @@ export function androidOrIOS () {
 }
 
 // 字符串处理相关函数
-// 手机号中间4位加*
+// 手机号中间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})$/,
@@ -37,6 +37,75 @@ export function addSpaceForTel (tel) {
   }
 }
 
+// 金额大写，链接：https://juejin.im/post/5a2a7a5051882535cd4abfce
+// upDigit(1682) result："人民币壹仟陆佰捌拾贰元整"
+// upDigit(-1693) result："欠壹仟陆佰玖拾叁元整"
+export function upPrice (n) {
+  const fraction = ['角', '分', '厘']
+  const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
+  const unit = [
+    ['元', '万', '亿'],
+    ['', '拾', '佰', '仟']
+  ]
+  // const head = n < 0 ? '欠人民币' : '人民币'
+  const head = ''
+  n = Math.abs(n)
+  let s = ''
+  for (let i = 0; i < fraction.length; i++) {
+    s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '')
+  }
+  s = s || '整'
+  n = Math.floor(n)
+  for (let i = 0; i < unit[0].length && n > 0; i++) {
+    let p = ''
+    for (let j = 0; j < unit[1].length && n > 0; j++) {
+      p = digit[n % 10] + unit[1][j] + p
+      n = Math.floor(n / 10)
+    }
+    s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s
+    // s = p + unit[0][i] + s;
+  }
+  return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整')
+}
+
+// 金额3位逗号分隔  ------------>
+export function formatPrice (s, n = -1, comma = false) {
+  if (n !== -1) n = n > 0 && n <= 20 ? n : 2
+  const intS = parseInt(s)
+  let point = '.'
+  let left = []
+  let right = ''
+  s = parseFloat((s + '').replace(/[^\d.-]/g, ''))
+  // 没传n或者n为-1，默认(如果为整数，则不保留小数。如果为浮点数，则保留两位小数)
+  if (n === -1) {
+    if (s === intS) {
+      n = 0
+      right = ''
+      point = ''
+    } else {
+      n = 2
+      s = s.toFixed(n)
+      right = s.split('.')[1]
+    }
+    s = s + ''
+    left = s.split('.')[0].split('').reverse()
+  } else {
+    s = parseFloat((s + '').replace(/[^\d.-]/g, '')).toFixed(n) + ''
+    left = s.split('.')[0].split('').reverse()
+    right = s.split('.')[1]
+  }
+
+  if (comma) {
+    let t = ''
+    for (let i = 0; i < left.length; i++) {
+      t += left[i] + ((i + 1) % 3 === 0 && (i + 1) !== left.length ? ',' : '')
+    }
+    return t.split('').reverse().join('') + point + right
+  }
+
+  return left.reverse().join('') + point + right
+}
+
 // 时间格式化相关函数
 /*
 * 时间格式化函数(将时间格式化为，2019年08月12日，2019-08-12，2019/08/12的形式)

src/utils/index.ts

@@ -1,4 +1,3 @@
 import './globalDirectives'
 import './globalFilters'
 import './globalVariable'
-import './vConsole'

src/utils/vConsole.ts

@@ -1,13 +0,0 @@
-// if (process.env.NODE_ENV === 'development') {
-//   // eslint-disable-next-line @typescript-eslint/no-var-requires
-//   const VConsole = require('vconsole')
-//   const vConsole = new VConsole()
-//   console.log('vConsole', vConsole)
-//   // console.log('env', process.env)
-// }
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const VConsole = require('vconsole')
-const vConsole = new VConsole()
-console.log('vConsole', vConsole)
-// console.log('env', process.env)

src/views/buy/Buy.vue

@@ -67,14 +67,14 @@
           <span class="price-t-label">支付金额：</span>
           <span class="price-t-count-now">
             <span class="cn-l">&yen;</span>
-            <span class="cn-r">{{ orderInfo.price | fen2Yuan | formatNumber(-1, true)  }}</span>
+            <span class="cn-r">{{ orderInfo.price | fen2Yuan | formatPrice(-1, true)  }}</span>
           </span>
         </div>
         <div class="price-bottom" v-if="orderInfo.before_price && orderInfo.before_price > orderInfo.price">
           <span class="price-b-label">原价：</span>
           <span class="price-b-count-o">
             <span class="co-l">&yen;</span>
-            <span class="co-r">{{ orderInfo.before_price | fen2Yuan | formatNumber(-1, true)  }}</span>
+            <span class="co-r">{{ orderInfo.before_price | fen2Yuan | formatPrice(-1, true)  }}</span>
           </span>
         </div>
       </div>

src/views/main/ReportDetail.vue

@@ -73,14 +73,24 @@ export default class Home extends Vue {
   protected clearBuyState!: any
 
   skeletonShow = true
+  // detail = {
+  //   id: 12,
+  //   title: '2019-2020年城际高速铁路和城际轨道交通市场研究报告',
+  //   img: '/upload/datareport/2020051500263.png',
+  //   price: 199,
+  //   before_price: 299,
+  //   pushtime: 1577780169,
+  //   content: '<p>城际高速铁路是指在人口稠密的都市圈或者城市带（城市群）中，规划和修建的高速铁路客运专线运输系统，主要运营于城市群或城市带，线路总长一般不超过200千米，允许列车行驶的最大速度在250km/h以上。城际轨道交通是指以城际运输为主的轨道交通客运系统，相当于低速版的城际高铁。凭借人均能耗低、承载量大、互通互联等诸多优点，成为助力绿色出行、创建智慧城市、缓解拥堵等的重要手段。<br> 城际高速铁路和城际轨道交通产业链可分为上游（施工准备）、中游（建设施工）以及下游（运营维护）。上游施工准备主要包括设计咨询、原材料、机械设备；中游建设施工主要包括建筑施工和智能化设备；下游运营维护主要包括运营维护，产业应用于检修设备及运营。</p>'
+  // }
+
   detail = {
     id: 12,
-    title: '2019-2020年城际高速铁路和城际轨道交通市场研究报告',
-    img: '/upload/datareport/2020051500263.png',
-    price: 199,
-    before_price: 299,
-    pushtime: 1577780169,
-    content: '<p>城际高速铁路是指在人口稠密的都市圈或者城市带（城市群）中，规划和修建的高速铁路客运专线运输系统，主要运营于城市群或城市带，线路总长一般不超过200千米，允许列车行驶的最大速度在250km/h以上。城际轨道交通是指以城际运输为主的轨道交通客运系统，相当于低速版的城际高铁。凭借人均能耗低、承载量大、互通互联等诸多优点，成为助力绿色出行、创建智慧城市、缓解拥堵等的重要手段。<br> 城际高速铁路和城际轨道交通产业链可分为上游（施工准备）、中游（建设施工）以及下游（运营维护）。上游施工准备主要包括设计咨询、原材料、机械设备；中游建设施工主要包括建筑施工和智能化设备；下游运营维护主要包括运营维护，产业应用于检修设备及运营。</p>'
+    title: '',
+    img: '',
+    price: 0,
+    before_price: 0,
+    pushtime: 0,
+    content: ''
   }
 
   mounted () {

src/views/order/detail.vue

@@ -51,7 +51,7 @@
               </span>
               <span class="rp-right">
                 <span class="product-type">数据报告</span>
-                <span class="pay-money">&yen; {{ orderInfo.payMoney | fen2Yuan | formatNumber(-1, true) }}</span>
+                <span class="pay-money">&yen; {{ orderInfo.payMoney | fen2Yuan | formatPrice(-1, true) }}</span>
               </span>
             </div>
             <div class="j-card product-info">
@@ -108,7 +108,7 @@
                 </div>
                 <div class="j-card-item">
                   <span class="card-item-l">实付金额：</span>
-                  <span class="card-item-r">&yen; {{ orderInfo.payMoney | fen2Yuan | formatNumber(-1, true) }} 元</span>
+                  <span class="card-item-r">&yen; {{ orderInfo.payMoney | fen2Yuan | formatPrice(-1, true) }} 元</span>
                 </div>
               </div>
             </div>
@@ -162,7 +162,7 @@ export default class OrderDetail extends Vue {
       surplusTimeShow: true,
       bottomButton: {
         show: true,
-        url: '/weixin/pay/datareport?ordercode=',
+        url: '',
         text: '立即支付'
       }
     },
@@ -311,10 +311,17 @@ export default class OrderDetail extends Vue {
 
   onConfirm () {
     // orderInfo 0:待支付 1:已完成 -2:已取消
-    const url = this.orderStateMap[this.orderInfo.state].bottomButton.url
+    const payUrl = {
+      app: `/pay?ordercode=${this.ordercode}`,
+      wx: `/weixin/pay/datareport?ordercode=${this.ordercode}`
+    }
     if (this.orderInfo.state === 0) {
-      // 去支付
-      location.href = url + this.ordercode
+      // 去支付, 微信需要跳转到指定路径
+      if (this.$env.isWeiXinBrowser) {
+        location.href = payUrl[this.$env.platform]
+      } else {
+        this.$router.push(payUrl[this.$env.platform])
+      }
     } else if (this.orderInfo.state === 1) {
       // 已完成状态是否已开发票
       if (this.orderInfo.applybillStatus === 0) {

src/views/pay/Pay.vue

@@ -5,7 +5,7 @@
         <span class="info-text">需支付金额</span>
         <span class="price-count">
           <span class="pc-l">&yen;</span>
-          <span class="pc-r">{{ orderInfo.payMoney | fen2Yuan | formatNumber(-1, true) }}</span>
+          <span class="pc-r">{{ orderInfo.payMoney | fen2Yuan | formatPrice(-1, true) }}</span>
         </span>
       </div>
       <van-radio-group v-model="payWay">

src/views/pay/PaySuccess.vue

@@ -6,7 +6,7 @@
         <span class="pay-text">支付成功</span>
         <span class="pay-count">
           <span class="pc-l">&yen;</span>
-          <span class="pc-r">{{ orderInfo.payMoney | fen2Yuan | formatNumber(-1, true)  }}</span>
+          <span class="pc-r">{{ orderInfo.payMoney | fen2Yuan | formatPrice(-1, true)  }}</span>
         </span>
         <p class="pay-text-desc">我们会尽快将数据报告发送至</p>
         <p class="pay-text-desc">{{ orderInfo.email }}</p>