支付接口引入 & 购买成功页面完成

src/api/config.ts

@@ -26,10 +26,18 @@ $ajax.interceptors.request.use(config => {
 $ajax.interceptors.response.use((response) => {
   // 判断是否需要重新登录
   if (response.data.error_msg === '需要登录' || response.data.error_code === 1001) {
-    Toast('需要登录')
+    Toast({
+      message: '需要登录',
+      forbidClick: true,
+      duration: 1500
+    })
   }
   if (response.data.error_code !== 0 && response.config.headers.noToast !== 1) {
-    Toast(response.data.error_msg || '请求失败，请重试')
+    Toast({
+      message: response.data.error_msg || '请求失败，请重试',
+      forbidClick: true,
+      duration: 1500
+    })
   }
   return response
 }, function (error) {

src/router/index.ts

@@ -49,12 +49,6 @@ const myRouter = new VueRouter({
   routes
 })
 
-// const myRouter = new Router({
-//   mode: 'history',
-//   base: process.env.BASE_URL,
-//   routes
-// })
-
 const history = window.sessionStorage
 const tempHist: any = history.getItem('count')
 let historyCount: any = (tempHist * 1) || 0
@@ -65,6 +59,7 @@ myRouter.beforeEach((to, from, next) => {
   document.title = to.meta.title
   store.commit('updatePageTitle', to.meta.title)
 
+  // 页面切换动画
   if (to.params.direction) {
     store.commit('updateDirection', to.params.direction)
   } else {
@@ -84,6 +79,7 @@ myRouter.beforeEach((to, from, next) => {
       store.commit('updateDirection', 'forward')
     }
   }
+
   next()
 })
 

src/router/modules/home.ts

@@ -17,7 +17,7 @@ export default [
     }
   },
   {
-    path: '/buy',
+    path: '/buy/:id',
     name: 'buy',
     component: () => import(/* webpackChunkName: "index" */ '@/views/buy/Buy.vue'),
     meta: {
@@ -25,7 +25,7 @@ export default [
     }
   },
   {
-    path: '/pay/:orderCode',
+    path: '/pay/:ordercode',
     name: 'pay',
     component: () => import(/* webpackChunkName: "pay" */ '@/views/pay/Pay.vue'),
     meta: {
@@ -33,7 +33,7 @@ export default [
     }
   },
   {
-    path: '/pay-success',
+    path: '/pay-success/:ordercode',
     name: 'pay-success',
     component: () => import(/* webpackChunkName: "pay" */ '@/views/pay/PaySuccess.vue'),
     meta: {

src/store/modules/pay.ts

@@ -0,0 +1,43 @@
+import {
+  getWxSdkSign,
+  appPay,
+  isPaySuccess,
+  orderDetail
+} from '@/api/pay'
+
+export default {
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {
+    // 获取微信Sdk ['appId','timestamp','nonceStr','signature']
+    async getWxSdkSign (state, data: any) {
+      try {
+        const res = await getWxSdkSign(data)
+        return res.data
+      } catch (error) {}
+    },
+    // 支付接口
+    async appPay (state, data: any) {
+      try {
+        const res = await appPay(data)
+        return res.data
+      } catch (error) {}
+    },
+    // 查询是否支付成功
+    async isPaySuccess (state, data: any) {
+      try {
+        const res = await isPaySuccess(data)
+        return res.data
+      } catch (error) {}
+    },
+    // 获取订单信息
+    async orderDetail (state, data: any) {
+      try {
+        const res = await orderDetail(data)
+        return res.data
+      } catch (error) {}
+    }
+  },
+  getters: {}
+}

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 { getWxSdkSign } from '@/api/pay.ts'
 
 declare module 'vue/types/vue' {
   interface Vue {
     $env: any;
-    $getWxSdkSign: any;
+    $wxSdk: any;
   }
 }
 
@@ -19,8 +20,19 @@ Vue.prototype.$env = {
 
 // 如果是微信浏览器,全局初始化一个微信SDK
 if (inWeiXinBrowser) {
-  // Vue.prototype.$getWxSdkSign = getWxSdkSign
-  // getWxSdkSign({ url: location.href.split('#')[0] }).then(res => {
-  //   console.log(res)
-  // })
+  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]
+        })
+      }
+    }
+  }).catch(err => {
+    console.log(err)
+  })
 }

src/views/buy/Buy.vue

@@ -115,7 +115,8 @@ import { inputFocusHideFooter } from '@/utils/globalFunctions'
   },
   methods: {
     ...mapState('home', {
-      buyState: (state: any) => state.buyState
+      buyState: (state: any) => state.buyState,
+      reportInfo: (state: any) => state.reportInfo
     }),
     ...mapMutations({
       saveBuyState: 'home/saveBuyState',
@@ -136,6 +137,9 @@ export default class BuyReport extends Vue {
   protected sendEmailCode!: any
   protected checkEmailCode!: any
 
+  // 当前数据报告的信息
+  protected reportInfo!: any
+
   // 保存恢复状态
   protected buyState!: any
   protected saveBuyState!: any
@@ -243,6 +247,13 @@ export default class BuyReport extends Vue {
     return !reg.test(email)
   }
 
+  created () {
+    const reportInfo = this.reportInfo()
+    this.orderInfo.reportId = this.$route.params.id
+    this.orderInfo.price = reportInfo.price
+    this.orderInfo.before_price = reportInfo.before_price
+  }
+
   mounted () {
     const recover = this.recoverState()
     if (!recover) {
@@ -258,30 +269,17 @@ export default class BuyReport extends Vue {
       forbidClick: true,
       duration: 0
     })
-    // test
-    const res = {
-      data: {
-        email: 'a@qq.com',
-        phone: '13200088125',
-        company: '金额急急急'
-      }
-    }
-    setTimeout(() => {
-      toast.clear()
-      this.originInfo = res.data
-      for (const key in res.data) {
-        this.userInfo[key] = res.data[key]
+    this.getUserMsg().then(res => {
+      if (res.error_code === 0) {
+        toast.clear()
+        if (res.data) {
+          this.originInfo = res.data
+          for (const key in res.data) {
+            this.userInfo[key] = res.data[key]
+          }
+        }
       }
-    }, 1000)
-    // this.getUserMsg().then(res => {
-    //   toast.clear()
-    //   if (res.error_code === 0) {
-    //     this.originInfo = res.data
-    //     for (const key in res.data) {
-    //       this.userInfo[key] = res.data[key]
-    //     }
-    //   }
-    // })
+    })
   }
 
   formatter (value) {
@@ -320,7 +318,7 @@ export default class BuyReport extends Vue {
     return pass
   }
 
-  toServiceTerms () {
+  toServiceTerms (e) {
     this.saveState()
     // location.href = e.target.href
   }
@@ -362,6 +360,7 @@ export default class BuyReport extends Vue {
       reportId: this.orderInfo.reportId
     }
     console.log(JSON.stringify(data))
+    // this.$router.push('/pay/00e2d1')
     this.orderSubmit(data)
   }
 

src/views/pay/Pay.vue

@@ -33,7 +33,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { Cell, CellGroup, Radio, RadioGroup } from 'vant'
-import { mapState, mapActions } from 'vuex'
+import { mapActions } from 'vuex'
 
 declare const JyObj: any
 
@@ -46,16 +46,22 @@ declare const JyObj: any
     [RadioGroup.name]: RadioGroup
   },
   methods: {
-    // ...mapState({
-    //   getEnv: 'env'
-    // })
+    ...mapActions({
+      getOrderDetail: 'pay/orderDetail',
+      getAppPayInfo: 'pay/appPay',
+      isPaySuccess: 'pay/isPaySuccess'
+    })
   }
 })
 
 export default class Pay extends Vue {
+  protected getOrderDetail!: any
+  protected getAppPayInfo!: any
+  protected isPaySuccess!: any
+
   orderInfo = {
     ordercode: '',
-    price: '2020'
+    paymoney: ''
   }
 
   // 将原型的全局变量提出来
@@ -86,30 +92,55 @@ export default class Pay extends Vue {
   payWay = this.payPlatFormWayMap[this.env.platform][0].type
 
   created () {
-    this.orderInfo.ordercode = this.$route.params.orderCode
-    console.log(this.$route)
+    this.orderInfo.ordercode = this.$route.params.ordercode
+  }
+
+  mounted () {
+    this.getInfo()
+    console.log(this.$wxSdk)
   }
 
   radioCheck (type) {
     this.payWay = type
   }
 
+  // 获取订单金额
+  getInfo () {
+    const toast = this.$toast.loading({
+      message: '加载中...',
+      forbidClick: true,
+      duration: 0
+    })
+    this.getOrderDetail({ ordercode: this.orderInfo.ordercode }).then(res => {
+      toast.clear()
+      if (res.error_code === 0) {
+        if (res.data.status === 1) {
+          for (const key in this.orderInfo) {
+            this.orderInfo.paymoney = res.data.paymoney
+          }
+        } else {
+          this.$toast(res.error_msg || '查询订单信息失败')
+        }
+      }
+    })
+  }
+
   // 确认支付
   confirmPay () {
     if (this.env.isWeiXinBrowser) {
-      this.wxPay()
+      this.wxPayCallBack()
     } else {
-      this.appPay()
+      this.appPayCallBack()
     }
   }
 
   // 微信支付逻辑
-  wxPay () {
+  wxPayCallBack () {
     console.log('wxPay')
   }
 
   // app支付逻辑
-  appPay () {
+  appPayCallBack () {
     console.log('appPay')
     console.log(this.payWay)
   }

src/views/pay/PaySuccess.vue

@@ -6,15 +6,15 @@
         <span class="pay-text">支付成功</span>
         <span class="pay-count">
           <span class="pc-l">&yen;</span>
-          <span class="pc-r">{{ orderInfo.price }}</span>
+          <span class="pc-r">{{ orderInfo.paymoney }}</span>
         </span>
         <p class="pay-text-desc">我们会尽快将数据报告发送至</p>
-        <p class="pay-text-desc">123@qq.com</p>
+        <p class="pay-text-desc">{{ orderInfo.email }}</p>
       </div>
       <van-cell-group class="order-info">
-        <van-cell center title="支付方式" value="内容" />
-        <van-cell center title="支付时间" value="内容" />
-        <van-cell center title="订单编号" value="内容" />
+        <van-cell center title="支付方式" :value="orderInfo.payway" />
+        <van-cell center title="支付时间" :value="dateFormatter(orderInfo.paytime * 1000, 'yyyy/MM/dd HH:mm:ss')" />
+        <van-cell center title="订单编号" :value="ordercode" />
       </van-cell-group>
     </div>
     <div class="j-button-group j-footer">
@@ -26,6 +26,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { Cell, CellGroup } from 'vant'
 import { mapActions } from 'vuex'
+import { dateFormatter } from '@/utils/globalFunctions.ts'
 
 @Component({
   name: 'pay',
@@ -34,27 +35,56 @@ import { mapActions } from 'vuex'
     [CellGroup.name]: CellGroup
   },
   methods: {
-    // ...mapState({
-    //   getEnv: 'env'
-    // })
+    dateFormatter,
+    ...mapActions({
+      getOrderDetail: 'pay/orderDetail'
+    })
   }
 })
 
 export default class PaySuccess extends Vue {
+  protected getOrderDetail!: any
+
+  ordercode = ''
+
   orderInfo = {
-    price: '2020'
+    paymoney: '',
+    payway: '',
+    paytime: '',
+    email: ''
   }
 
-  // 将原型的全局变量提出来
-  env = this.$env
-
   mounted () {
-    // console.log(this.env)
+    this.ordercode = this.$route.params.ordercode
+    this.getInfo()
+  }
+
+  getInfo () {
+    const toast = this.$toast.loading({
+      message: '加载中...',
+      forbidClick: true,
+      duration: 0
+    })
+    this.getOrderDetail({ ordercode: this.ordercode }).then(res => {
+      toast.clear()
+      if (res.error_code === 0) {
+        if (res.data.status === 1) {
+          for (const key in this.orderInfo) {
+            this.orderInfo[key] = res.data[key]
+          }
+        } else {
+          this.$toast(res.error_msg || '查询订单信息失败')
+        }
+      }
+    }).catch(err => {
+      toast.clear()
+      console.log(err)
+    })
   }
 
   onConfirm () {
     console.log('confirm')
-    console.log(this.env)
+    // location.href = ''
   }
 }
 </script>

vue.config.js

@@ -43,12 +43,20 @@ module.exports = {
   productionSourceMap: false,
   devServer: {
     proxy: {
-      '^/testServer': {
-        target: 'http://192.168.20.241:92/',
+      '^/testServer/datareport': {
+        target: 'http://192.168.20.241:92',
         changeOrigin: true,
         logLevel: 'debug',
         pathRewrite: {
-          '/testServer': ''
+          '^/testServer/datareport': '/datareport'
+        }
+      },
+      '^/testServer/jypay': {
+        target: 'http://192.168.20.241:86',
+        changeOrigin: true,
+        logLevel: 'debug',
+        pathRewrite: {
+          '^/testServer/jypay': '/jypay'
         }
       }
     }