app支付逻辑基本完成

src/api/home.ts

@@ -21,6 +21,7 @@ export function getReportDetail (data: any) {
 
 // 数据报告详情页
 export function orderSubmit (data: any) {
+  data = qs.stringify(data)
   return request({
     url: '/datareport/orderSubmit',
     method: 'post',

src/api/pay.ts

@@ -12,7 +12,7 @@ export function getWxSdkSign (data: any) {
 }
 
 // app支付
-export function appPay (data: any) {
+export function paySign (data: any) {
   data = qs.stringify(data)
   return request({
     url: '/datareport/pay',

src/store/modules/home.ts

@@ -45,7 +45,7 @@ export default {
     // 保存数据报告详情
     saveReportInfo (state, data) {
       for (const key in data) {
-        state.reportList[key] = data[key]
+        state.reportInfo[key] = data[key]
       }
       sessionStorage.setItem('report-info', JSON.stringify(data))
     },

src/store/modules/pay.ts

@@ -1,6 +1,6 @@
 import {
   getWxSdkSign,
-  appPay,
+  paySign,
   isPaySuccess,
   orderDetail
 } from '@/api/pay'
@@ -18,9 +18,9 @@ export default {
       } catch (error) {}
     },
     // 支付接口
-    async appPay (state, data: any) {
+    async paySign (state, data: any) {
       try {
-        const res = await appPay(data)
+        const res = await paySign(data)
         return res.data
       } catch (error) {}
     },

src/utils/globalVariable.ts

@@ -22,15 +22,14 @@ Vue.prototype.$env = {
 if (inWeiXinBrowser) {
   getWxSdkSign({ url: location.href.split('#')[0] }).then(result => {
     const res = result.data
-    if (res.error_code === 0) {
-      if (res.data && Array.isArray(res.data) && res.data.length === 4) {
-        Vue.prototype.$wxSdk = new WeiXinSDK({
-          appId: res.data[0],
-          timestamp: res.data[1],
-          nonceStr: res.data[2],
-          signature: res.data[3]
-        })
-      }
+    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/utils/wx-js-sdk-register.ts

@@ -84,7 +84,7 @@ class WeiXinSDK {
   }
 
   constructor (data: object) {
-    // if (!this.env.isWeiXinBrowser) return
+    if (!this.env.isWeiXinBrowser) return
     this.initSignature(data)
   }
 
@@ -257,6 +257,7 @@ class WeiXinSDK {
   chooseWXPay (config: object, callbacks?: any) {
     // 执行分享
     wx.chooseWXPay({
+      appId: this.config.configData.appId,
       ...config,
       // timestamp: config.timestamp,
       // nonceStr: config.nonceStr,

src/views/buy/Buy.vue

@@ -28,7 +28,7 @@
             <template #button>
               <countdown-button
                 ref="countdownButton"
-                :countdown="120"
+                :countdown="300"
                 :disabled="sendButtonDisabled"
                 @click="sendCode"
               ></countdown-button>
@@ -166,7 +166,7 @@ export default class BuyReport extends Vue {
 
   // 用户信息(需要提交)
   userInfo = {
-    email: '',
+    email: 'cuiyalong@topnet.net.cn',
     phone: '',
     code: '',
     company: ''
@@ -244,7 +244,7 @@ export default class BuyReport extends Vue {
     const type = 'email'
     const reg = this.errorMsgMap[type].reg
     const email = this.userInfo[type]
-    return !reg.test(email)
+    return !reg.test(email) || (this.sendedEmail && this.emailCodePass)
   }
 
   created () {
@@ -329,17 +329,31 @@ export default class BuyReport extends Vue {
     const emailPass = reg.test(email)
     if (!emailPass) return
     this.sendedEmail = true
+    // 开启倒计时计时器
     cb && cb()
-    this.sendEmailCode({ email: this.userInfo.email })
+    this.sendEmailCode({ email: this.userInfo.email }).then(res => {
+      if (res.error_code === 0 && res.data.status === 1) {
+        this.$toast({
+          message: '邮箱验证码发送成功',
+          forbidClick: true,
+          duration: 1500
+        })
+      }
+    })
   }
 
   verifyCode () {
     return this.checkEmailCode({ email: this.userInfo.email, emailCode: this.userInfo.code }).then(res => {
       if (res.error_code === 0) {
-        if (res.status === 1) {
+        if (res.data.status === 1) {
           // 将错误提示清空
           this.errorMsg.code = ''
           this.emailCodePass = true
+          this.$toast({
+            message: '邮箱验证码验证成功',
+            forbidClick: true,
+            duration: 1000
+          })
           return true
         } else {
           // 给出错误提示
@@ -359,9 +373,17 @@ export default class BuyReport extends Vue {
       company: this.userInfo.company,
       reportId: this.orderInfo.reportId
     }
-    console.log(JSON.stringify(data))
-    // this.$router.push('/pay/00e2d1')
-    this.orderSubmit(data)
+    this.$toast.loading({
+      message: '加载中...',
+      forbidClick: true,
+      duration: 0
+    })
+    this.orderSubmit(data).then(res => {
+      if (res.error_code === 0 && res.data.ordercode) {
+        this.$toast.clear()
+        this.$router.push(`/pay/${res.data.ordercode}`)
+      }
+    })
   }
 
   recoverState () {
@@ -383,7 +405,6 @@ export default class BuyReport extends Vue {
       emailCodePass: this.emailCodePass,
       errorMsg: this.errorMsg
     }
-    console.log(JSON.stringify(pageState))
     this.saveBuyState(pageState)
   }
 }

src/views/pay/Pay.vue

@@ -48,7 +48,7 @@ declare const JyObj: any
   methods: {
     ...mapActions({
       getOrderDetail: 'pay/orderDetail',
-      getAppPayInfo: 'pay/appPay',
+      getPaySign: 'pay/paySign',
       isPaySuccess: 'pay/isPaySuccess'
     })
   }
@@ -56,7 +56,7 @@ declare const JyObj: any
 
 export default class Pay extends Vue {
   protected getOrderDetail!: any
-  protected getAppPayInfo!: any
+  protected getPaySign!: any
   protected isPaySuccess!: any
 
   orderInfo = {
@@ -115,9 +115,7 @@ export default class Pay extends Vue {
       toast.clear()
       if (res.error_code === 0) {
         if (res.data.status === 1) {
-          for (const key in this.orderInfo) {
-            this.orderInfo.paymoney = res.data.paymoney
-          }
+          this.orderInfo.paymoney = res.data.paymoney
         } else {
           this.$toast(res.error_msg || '查询订单信息失败')
         }
@@ -127,22 +125,98 @@ export default class Pay extends Vue {
 
   // 确认支付
   confirmPay () {
-    if (this.env.isWeiXinBrowser) {
-      this.wxPayCallBack()
-    } else {
-      this.appPayCallBack()
+    this.$toast.loading({
+      message: '加载中...',
+      forbidClick: true,
+      duration: 0
+    })
+    const data = {
+      payway: this.payWay,
+      ordercode: this.orderInfo.ordercode
     }
+    this.getPaySign(data).then(res => {
+      if (res.error_code === 0) {
+        this.$toast.clear()
+        if (res.status === 1) {
+          // 获取参数成功，判断是微信h5还是非微信h5
+          if (this.env.isWeiXinBrowser) {
+            this.wxPayCallBack(res.data.payStr)
+          } else {
+            this.appPayCallBack(res.data.payStr)
+          }
+        } else {
+          this.$toast(res.error_msg || '获取支付信息失败')
+        }
+      }
+    })
   }
 
-  // 微信支付逻辑
-  wxPayCallBack () {
+  // 微信h5支付逻辑
+  wxPayCallBack (paySign) {
     console.log('wxPay')
+    console.log(paySign)
+    if (!this.$wxSdk) {
+      return this.$toast({
+        message: '微信Sdk初始化失败',
+        forbidClick: true,
+        duration: 1000
+      })
+    }
+    const sign = {
+      timestamp: '',
+      nonceStr: '',
+      package: '',
+      signType: '',
+      paySign: '',
+      appId: ''
+    }
+    // 进行支付
+    console.log(this.$wxSdk)
+    this.$wxSdk.chooseWXPay({
+      config: {
+        timestamp: sign.timestamp,
+        nonceStr: sign.nonceStr,
+        package: sign.package,
+        signType: sign.signType,
+        paySign: sign.paySign,
+        appId: sign.appId
+      }
+    })
   }
 
   // app支付逻辑
-  appPayCallBack () {
+  appPayCallBack (paySign) {
     console.log('appPay')
-    console.log(this.payWay)
+    if (this.payWay === 'wx_app') {
+      // 调微信支付
+      try {
+        JyObj.wxPay(paySign)
+      } catch (error) {
+        console.log('请在指定环境运行', error)
+      }
+    } else if (this.payWay === 'ali_app') {
+      // 调支付宝支付
+      try {
+        JyObj.aliPay(paySign)
+      } catch (error) {
+        console.log('请在指定环境运行', error)
+      }
+    }
+    this.checkAppPaySuccess()
+  }
+
+  // 开启定时任务，3s查询一次是否支付成功
+  checkAppPaySuccess () {
+    const ordercode = this.orderInfo.ordercode
+    const checkPaySuccessTimer = setInterval(() => {
+      this.isPaySuccess({ ordercode }).then(res => {
+        if (res.error_code === 0 && res.data.status === 1) {
+          // 支付完成订单，关闭定时器
+          clearInterval(checkPaySuccessTimer)
+          this.$router.push(`/pay-success/${ordercode}`)
+        }
+      })
+    }, 3000)
   }
 }
 </script>