支付接口联调

.env.development

@@ -1,3 +1,3 @@
 NODE_ENV=development
-VUE_APP_BASE_API = '/testServer'
-BASE_URL = '/page/'
+VUE_APP_BASE_API = '/datareport/api'
+BASE_URL = '/datareport/page/'

.env.production

@@ -1,3 +1,3 @@
 NODE_ENV=production
-VUE_APP_BASE_API = ''
-BASE_URL = '/page/'
+VUE_APP_BASE_API = '/datareport/api'
+BASE_URL = '/datareport/page/'

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" />
+          <router-view class="router j-container" :class="$env.isWeiXinBrowser ? 'wx' : ''" />
         </keep-alive>
       </transition>
     </template>

src/api/config.ts

@@ -24,21 +24,25 @@ $ajax.interceptors.request.use(config => {
 
 // 添加一个返回拦截器
 $ajax.interceptors.response.use((response) => {
-  // 判断是否需要重新登录
-  if (response.data.error_msg === '需要登录' || response.data.error_code === 1001) {
-    Toast({
-      message: '需要登录',
-      forbidClick: true,
-      duration: 1500
-    })
-  }
-  if (response.data.error_code !== 0 && response.config.headers.noToast !== 1) {
-    Toast({
-      message: response.data.error_msg || '请求失败，请重试',
-      forbidClick: true,
-      duration: 1500
-    })
+  // 是否需要toast弹窗
+  if (response.config.headers.noToast !== 1) {
+    // 判断是否需要重新登录
+    if (response.data.error_msg === '需要登录' || response.data.error_code === 1001) {
+      Toast({
+        message: '需要登录',
+        forbidClick: true,
+        duration: 1500
+      })
+    }
+    if (response.data.error_code !== 0) {
+      Toast({
+        message: response.data.error_msg || '请求失败，请重试',
+        forbidClick: true,
+        duration: 1500
+      })
+    }
   }
+
   return response
 }, function (error) {
   console.log('--响应超时--', error)

src/api/home.ts

@@ -4,7 +4,7 @@ import qs from 'qs'
 // 数据报告列表接口
 export function getReportList (data: any) {
   return request({
-    url: '/datareport/getList',
+    url: '/getList',
     method: 'post',
     data
   })
@@ -13,7 +13,7 @@ export function getReportList (data: any) {
 // 数据报告详情页
 export function getReportDetail (data: any) {
   return request({
-    url: '/datareport/getDetail',
+    url: '/getDetail',
     method: 'post',
     data
   })
@@ -23,7 +23,7 @@ export function getReportDetail (data: any) {
 export function orderSubmit (data: any) {
   data = qs.stringify(data)
   return request({
-    url: '/datareport/orderSubmit',
+    url: '/orderSubmit',
     method: 'post',
     data
   })
@@ -32,7 +32,7 @@ export function orderSubmit (data: any) {
 // 查询用户是否已经填写过邮箱或者手机号
 export function userMsg () {
   return request({
-    url: '/datareport/userMsg',
+    url: '/userMsg',
     method: 'get'
   })
 }
@@ -41,7 +41,7 @@ export function userMsg () {
 export function sEmailCode (data: any) {
   data = qs.stringify(data)
   return request({
-    url: '/datareport/sendEmailCode',
+    url: '/sendEmailCode',
     method: 'post',
     data
   })
@@ -51,7 +51,7 @@ export function sEmailCode (data: any) {
 export function cEmailCode (data: any) {
   data = qs.stringify(data)
   return request({
-    url: '/datareport/checkEmailCode',
+    url: '/checkEmailCode',
     method: 'post',
     data
   })

src/api/pay.ts

@@ -5,8 +5,12 @@ import qs from 'qs'
 export function getWxSdkSign (data: any) {
   data = qs.stringify(data)
   return request({
+    baseURL: '',
     url: '/jypay/wx/getwxSdkSign',
     method: 'post',
+    headers: {
+      noToast: 1
+    },
     data
   })
 }
@@ -15,7 +19,7 @@ export function getWxSdkSign (data: any) {
 export function paySign (data: any) {
   data = qs.stringify(data)
   return request({
-    url: '/datareport/pay',
+    url: '/pay',
     method: 'post',
     data
   })
@@ -25,7 +29,7 @@ export function paySign (data: any) {
 export function isPaySuccess (data: any) {
   data = qs.stringify(data)
   return request({
-    url: '/datareport/paySuccess',
+    url: '/paySuccess',
     method: 'post',
     data
   })
@@ -35,7 +39,7 @@ export function isPaySuccess (data: any) {
 export function orderDetail (data: any) {
   data = qs.stringify(data)
   return request({
-    url: '/datareport/orderDetail',
+    url: '/orderDetail',
     method: 'post',
     data
   })

src/components/layout.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="j-container" :class="{'transparent-header': headerInfo.transparentHeader}">
     <div class="j-header jy-app-header" v-if="!weixinBrowser" :class="{hideBorder: headerInfo.hideBorder}">
-      <van-icon class="header-left" :class="{ hide: headerInfo.actionLeftHide }" name="arrow-left" @click="goBack" />
-      <span class="header-title">{{ headerInfo.title }}</span>
+      <van-icon class="header-left" :style="headerInfo.actionLeftStyle" :class="{ hide: headerInfo.actionLeftHide }" name="arrow-left" @click="goBack" />
+      <span class="header-title" :style="headerInfo.titleStyle">{{ headerInfo.title }}</span>
       <span class="header-right" :style="headerInfo.actionRightStyle" @click="actionRight">{{ headerInfo.actionRightText }}</span>
     </div>
     <div class="j-main">
@@ -69,6 +69,8 @@ export default class Layout extends Vue {
       transparentHeader: this.conf.transparentHeader,
       actionLeftHide: this.conf.actionLeftHide,
       actionRightText: this.conf.actionRightText,
+      titleStyle: this.conf.titleStyle,
+      actionLeftStyle: this.conf.actionLeftStyle,
       actionRightStyle: this.conf.actionRightStyle,
       hideBorder: this.$route.meta.hideBorder || false
     }
@@ -98,7 +100,6 @@ export default class Layout extends Vue {
       position: absolute;
       width: 100%;
       background-color: transparent;
-      font-size: 0;
       &:after {
         height: 0;
       }

src/router/modules/home.ts

@@ -25,7 +25,25 @@ export default [
     }
   },
   {
-    path: '/pay/:ordercode',
+    path: '/introduce',
+    name: 'introduce',
+    component: () => import(/* webpackChunkName: "index" */ '@/views/main/IntroducePage.vue'),
+    meta: {
+      title: '',
+      layoutConf: true
+    }
+  },
+  {
+    path: '/detail/:id',
+    name: 'detail',
+    component: () => import(/* webpackChunkName: "index" */ '@/views/main/ReportDetail.vue'),
+    meta: {
+      title: '数据报告'
+    }
+  },
+  {
+    path: '/pay',
+    alias: '/weixin/pay/datareport',
     name: 'pay',
     component: () => import(/* webpackChunkName: "pay" */ '@/views/pay/Pay.vue'),
     meta: {
@@ -41,20 +59,12 @@ export default [
     }
   },
   {
-    path: '/introduce',
-    name: 'introduce',
-    component: () => import(/* webpackChunkName: "index" */ '@/views/main/IntroducePage.vue'),
-    meta: {
-      title: '数据报告',
-      layoutConf: true
-    }
-  },
-  {
-    path: '/detail/:id',
-    name: 'detail',
-    component: () => import(/* webpackChunkName: "index" */ '@/views/main/ReportDetail.vue'),
+    path: '/order/detail/:ordercode',
+    name: 'order-detail',
+    component: () => import(/* webpackChunkName: "order" */ '@/views/order/detail.vue'),
     meta: {
-      title: '数据报告'
+      layoutConf: true,
+      title: '订单详情'
     }
   }
 ]

src/store/index.ts

@@ -24,6 +24,8 @@ export default new Vuex.Store({
       // 是否隐藏左侧返回按钮
       actionLeftHide: '',
       actionRightText: '',
+      titleStyle: {},
+      actionLeftStyle: {},
       actionRightStyle: {},
       actionRightCallback: ''
     },
@@ -34,6 +36,8 @@ export default new Vuex.Store({
       // 是否隐藏左侧返回按钮
       actionLeftHide: '',
       actionRightText: '',
+      titleStyle: {},
+      actionLeftStyle: {},
       actionRightStyle: {},
       actionRightCallback: () => {
         // console.log('actionRight')

src/utils/wx-js-sdk-register.ts

@@ -1,4 +1,5 @@
 declare const wx: any
+declare const WeixinJSBridge: any
 
 // 官方文档
 // https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
@@ -39,7 +40,7 @@ class WeiXinSDK {
       // 图片预览
       // 'imagePreview',
       // 获取网络状态接口
-      'getNetworkType',
+      // 'getNetworkType',
       // 获取地理位置接口
       // 'getLocation',
       // 使用微信内置地图<查看>位置接口
@@ -257,7 +258,7 @@ class WeiXinSDK {
   chooseWXPay (options: any) {
     // 执行支付
     wx.chooseWXPay({
-      appId: this.config.configData.appId,
+      // appId: this.config.configData.appId,
       ...options.config,
       // timestamp: config.timestamp,
       // nonceStr: config.nonceStr,
@@ -283,6 +284,29 @@ class WeiXinSDK {
     })
   }
 
+  // https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
+  chooseWXPayForWeiXinJSBridge (options: any) {
+    // 调用WeixinJSBridge支付
+    WeixinJSBridge.invoke('getBrandWCPayRequest', {
+      appId: options.config.appId,
+      timeStamp: options.config.timestamp,
+      nonceStr: options.config.nonceStr,
+      package: options.config.package,
+      signType: options.config.signType,
+      paySign: options.config.paySign
+    }, (res) => {
+      if (res.err_msg === 'get_brand_wcpay_request:ok') {
+        // 使用以上方式判断前端返回,微信团队郑重提示：
+        // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
+        options && options.success && options.success()
+      } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
+        options && options.cancel && options.cancel()
+      } else {
+        options && options.fail && options.fail()
+      }
+    })
+  }
+
   closeWindow () {
     wx.closeWindow()
   }

src/views/buy/Buy.vue

@@ -386,7 +386,7 @@ export default class BuyReport extends Vue {
       if (res.error_code === 0 && res.data.ordercode) {
         this.$toast.clear()
         this.saveState()
-        this.$router.push(`/pay/${res.data.ordercode}`)
+        location.href = `/weixin/pay/datareport?ordercode=${res.data.ordercode}`
       }
     })
   }

src/views/main/IntroducePage.vue

@@ -24,12 +24,11 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { mapState, mapMutations } from 'vuex'
+import { mapMutations } from 'vuex'
 
 @Component({
   name: 'introduce',
   methods: {
-    ...mapState(['layoutConf']),
     ...mapMutations({
       updateHeader: 'updateLayoutConfig',
       clearReportList: 'home/clearReportList'

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.price }}</span>
+          <span class="pc-r">{{ orderInfo.payMoney }}</span>
         </span>
       </div>
       <van-radio-group v-model="payWay">
@@ -61,7 +61,7 @@ export default class Pay extends Vue {
 
   orderInfo = {
     ordercode: '',
-    paymoney: ''
+    payMoney: ''
   }
 
   // 将原型的全局变量提出来
@@ -92,7 +92,8 @@ export default class Pay extends Vue {
   payWay = this.payPlatFormWayMap[this.env.platform][0].type
 
   created () {
-    this.orderInfo.ordercode = this.$route.params.ordercode
+    const query: any = this.$route.query
+    this.orderInfo.ordercode = query.ordercode
   }
 
   mounted () {
@@ -113,8 +114,8 @@ export default class Pay extends Vue {
     this.getOrderDetail({ ordercode: this.orderInfo.ordercode }).then(res => {
       toast.clear()
       if (res.error_code === 0) {
-        if (res.data.status === 1) {
-          this.orderInfo.paymoney = res.data.paymoney
+        if (res.data && Object.keys(res.data).length !== 0) {
+          this.orderInfo.payMoney = res.data.payMoney
         } else {
           this.$toast(res.error_msg || '查询订单信息失败')
         }
@@ -124,37 +125,38 @@ export default class Pay extends Vue {
 
   // 确认支付
   confirmPay () {
-    this.wxPayCallBack('')
-    // 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 || '获取支付信息失败')
-    //     }
-    //   }
-    // })
+    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.data && Object.keys(res.data).length !== 0) {
+          // 获取参数成功，判断是微信h5还是非微信h5
+          if (this.env.isWeiXinBrowser) {
+            this.wxPayCallBack(res.data.payStr)
+          } else {
+            this.appPayCallBack(res.data.payStr)
+          }
+        } else {
+          this.$toast(res.error_msg || '获取支付信息失败')
+        }
+      }
+    })
   }
 
+  // https://web-jydev-ws.jianyu360.cn/weixin/pay/datareport/131659488644
   // 微信h5支付逻辑
-  wxPayCallBack (paySign) {
-    console.log('wxPay')
-    console.log(paySign)
+  wxPayCallBack (paySign: string) {
+    const sign = paySign ? JSON.parse(paySign) : {}
+    console.log(this.$wxSdk)
+    console.log('sign---------------', sign)
     if (!this.$wxSdk) {
       return this.$toast({
         message: '微信Sdk初始化失败',
@@ -162,34 +164,25 @@ export default class Pay extends Vue {
         duration: 1000
       })
     }
-    const sign = {
-      timestamp: '',
-      nonceStr: '',
-      package: '',
-      signType: '',
-      paySign: '',
-      appId: ''
-    }
     // 进行支付
     console.log(this.$wxSdk)
-    this.$wxSdk.chooseWXPay({
+    this.$wxSdk.chooseWXPayForWeiXinJSBridge({
       config: {
         timestamp: sign.timestamp,
         nonceStr: sign.nonceStr,
-        package: sign.package,
         signType: sign.signType,
-        paySign: sign.paySign,
+        package: sign.prepayId,
+        paySign: sign.sign,
         appId: sign.appId
       },
       success: () => {
-        console.log(123)
+        this.$router.replace(`/pay-success/${this.orderInfo.ordercode}`)
       }
     })
   }
 
   // app支付逻辑
-  appPayCallBack (paySign) {
-    console.log('appPay')
+  appPayCallBack (paySign: string) {
     if (this.payWay === 'wx_app') {
       // 调微信支付
       try {

src/views/pay/PaySuccess.vue

@@ -6,14 +6,14 @@
         <span class="pay-text">支付成功</span>
         <span class="pay-count">
           <span class="pc-l">&yen;</span>
-          <span class="pc-r">{{ orderInfo.paymoney }}</span>
+          <span class="pc-r">{{ orderInfo.payMoney }}</span>
         </span>
         <p class="pay-text-desc">我们会尽快将数据报告发送至</p>
         <p class="pay-text-desc">{{ orderInfo.email }}</p>
       </div>
       <van-cell-group class="order-info">
-        <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="payWayMap[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>
@@ -48,12 +48,18 @@ export default class PaySuccess extends Vue {
   ordercode = ''
 
   orderInfo = {
-    paymoney: '',
-    payway: '',
-    paytime: '',
+    payMoney: '',
+    payWay: '',
+    payTime: '',
     email: ''
   }
 
+  payWayMap = {
+    wx_js: '微信支付',
+    wx_app: '微信支付',
+    ali_app: '支付宝支付'
+  }
+
   mounted () {
     this.ordercode = this.$route.params.ordercode
     this.getInfo()
@@ -66,9 +72,9 @@ export default class PaySuccess extends Vue {
       duration: 0
     })
     this.getOrderDetail({ ordercode: this.ordercode }).then(res => {
-      toast.clear()
       if (res.error_code === 0) {
-        if (res.data.status === 1) {
+        toast.clear()
+        if (res.data && Object.keys(res.data).length !== 0) {
           for (const key in this.orderInfo) {
             this.orderInfo[key] = res.data[key]
           }
@@ -83,8 +89,7 @@ export default class PaySuccess extends Vue {
   }
 
   onConfirm () {
-    console.log('confirm')
-    // location.href = ''
+    this.$router.push(`/order/detail/${this.ordercode}`)
   }
 }
 </script>

vue.config.js

@@ -42,21 +42,26 @@ module.exports = {
   parallel: false,
   productionSourceMap: false,
   devServer: {
+    port: '8080',
+    open: false,
+    disableHostCheck: true,
     proxy: {
-      '^/testServer/datareport': {
-        target: 'http://192.168.20.241:92',
+      '^/datareport/api': {
+        // target: 'http://192.168.20.241:92',
+        target: 'http://192.168.20.135:92',
         changeOrigin: true,
         logLevel: 'debug',
         pathRewrite: {
-          '^/testServer/datareport': '/datareport'
+          '^/datareport/api': '/datareport/api'
         }
       },
-      '^/testServer/jypay': {
-        target: 'http://192.168.20.241:86',
+      '^/jypay': {
+        // target: 'http://192.168.20.241:86',
+        target: 'http://192.168.20.135:86',
         changeOrigin: true,
         logLevel: 'debug',
         pathRewrite: {
-          '^/testServer/jypay': '/jypay'
+          '^/jypay': '/jypay'
         }
       }
     }