新增微信支付

src/api/my.js

@@ -122,3 +122,10 @@ export function changeFileStatus(userId, recordId, status) {
     { status }
   )
 }
+
+/**
+ * 修改用户信息
+ */
+export function getOpenId(data) {
+  return httpRequest.post('/usercenter/v1/wechat/get-openid', data)
+}

src/pages/my/welcome/components/h5Pay.vue

+<template>
+  <div class="h5pay">
+    <el-button type="primary" @click="handlePay">去支付</el-button>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/my'
+export default {
+  data() {
+    return {
+      openId: window.localStorage.getItem('open_id'),
+      errorMessage: ''
+    }
+  },
+  computed: {
+    pageUrl() {
+      return window.location.origin + this.$route.path
+    }
+  },
+  methods: {
+    // 获取订单
+    getOrder() {
+      api.getOrder({ wx_open_id: this.openId, payment_method: 'WX_PAY' }).then(response => {
+        const { data, error, message } = response
+        if (error.toString() === '0') {
+          this.order = data
+          this.$emit('update', this.order)
+        } else {
+          this.errorMessage = message
+        }
+      })
+    },
+    // 获取微信code
+    getCode() {
+      const redirectURI = `https://pages.ezijing.com/given/auth.html?redirect_uri=${encodeURIComponent(this.pageUrl)}`
+      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx451c01d40d090d7a&redirect_uri=${redirectURI}&response_type=code&scope=snsapi_base#wechat_redirect`
+    },
+    // 获取微信openid
+    getOpenId(code) {
+      api.getOpenId({ code, identity: 'ezijing' }).then(response => {
+        if (response.code === 0) {
+          this.openId = response.openid
+          window.localStorage.setItem('open_id', this.openId)
+          this.getOrder()
+        } else {
+          this.getCode()
+        }
+      })
+    },
+    // 去支付
+    handlePay() {
+      if (this.order.wx_prepay_id) {
+        window.location.href = `https://web-pay.ezijing.com/wxpay/h5?prepay_id=${this.order.wx_prepay_id}&open_id=${
+          this.openId
+        }&redirect_uri=${encodeURIComponent(this.pageUrl)}`
+      } else {
+        this.$message.error(this.errorMessage)
+      }
+    }
+  },
+  beforeMount() {
+    if (this.openId) {
+      this.getOrder()
+      return
+    }
+    const { code } = this.$route.query
+    code ? this.getOpenId(code) : this.getCode()
+  }
+}
+</script>
+
+<style scoped>
+.h5pay {
+  padding: 40px;
+  text-align: center;
+}
+</style>

src/pages/my/welcome/components/qrcodePay.vue

+<template>
+  <div class="qrpay">
+    <div class="qrpay-hd">
+      <div class="pic">
+        <img src="../../../../assets/images/my_pay_02.png" height="160" />
+      </div>
+      <h1>请使用微信扫描下方二维码</h1>
+    </div>
+    <div class="qrcode-error" v-if="qrcodeError">
+      生成二维码失败请刷新<i class="el-icon-refresh-left" @click="getOrder" title="刷新"></i>
+    </div>
+    <div class="qrcode" v-else>
+      <qrcode-vue :value="qrcodeValue" size="100"></qrcode-vue>
+      <span @click="getOrder">刷新</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import QrcodeVue from 'qrcode.vue'
+import * as api from '@/api/my'
+
+export default {
+  components: { QrcodeVue },
+  data() {
+    return {
+      order: { id: '', payment_url: '' },
+      qrcodeError: false
+    }
+  },
+  computed: {
+    // 二维码地址
+    qrcodeValue() {
+      return this.order.payment_url
+    }
+  },
+  methods: {
+    // 获取订单
+    getOrder() {
+      api.getOrder({ payment_method: 'WX_PAY_QR' }).then(response => {
+        const { data, error, message } = response
+        this.qrcodeError = error.toString() === '1'
+        if (error.toString() === '0') {
+          this.order = data
+          this.$emit('update', this.order)
+        } else {
+          this.$message.error(message)
+        }
+      })
+    }
+  },
+  beforeMount() {
+    this.getOrder()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.qrpay-hd {
+  .pic {
+    text-align: center;
+  }
+  h1 {
+    margin-top: 40px;
+    font-size: 24px;
+    font-weight: 500;
+    color: #222;
+    line-height: 1;
+    text-align: center;
+  }
+}
+.qrcode {
+  padding: 20px 0;
+  text-align: center;
+  span {
+    margin-top: 10px;
+    font-size: 12px;
+    color: #999;
+    cursor: pointer;
+  }
+}
+.qrcode-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100px;
+  height: 100px;
+  padding: 10px;
+  margin: 20px auto;
+  color: var(--main-color);
+  border-style: dashed;
+  border-width: 1px;
+  border-color: var(--main-color);
+  box-sizing: border-box;
+  text-align: center;
+  i {
+    margin-top: 10px;
+    cursor: pointer;
+  }
+}
+</style>

src/pages/my/welcome/indexPay.vue

 <template>
   <div class="pay">
-    <div class="pay-hd">
-      <div class="pic">
-        <img src="../../../assets/images/my_pay_02.png" height="160" />
-      </div>
-      <h1>请使用微信扫描下方二维码</h1>
-    </div>
-    <div class="qrcode-error" v-if="qrcodeError">
-      生成二维码失败请刷新<i class="el-icon-refresh-left" @click="refreshQrcode" title="刷新"></i>
-    </div>
-    <div class="qrcode" v-else>
-      <qrcode-vue :value="qrcodeValue" size="100"></qrcode-vue>
-      <span @click="refreshQrcode">刷新</span>
-    </div>
+    <h5-pay @update="handleUpdateOrder" v-if="isWechat"></h5-pay>
+    <qrcode-pay @update="handleUpdateOrder" v-else></qrcode-pay>
     <div class="pay-ft">
       <p class="t2">注释：在提交600元申请费后，申请人需上传并提交如下文件。</p>
       <p class="t2">①填写报名表、②完成推荐信2封、③本科学历学位证书、④中英文成绩单、⑤个人证件照</p>
@@ -37,17 +26,17 @@
 </template>
 
 <script>
-import QrcodeVue from 'qrcode.vue'
 import * as api from '@/api/my'
-
+import qrcodePay from './components/qrcodePay'
+import h5Pay from './components/h5Pay'
 export default {
   name: 'AppPay',
-  components: { QrcodeVue },
+  components: { qrcodePay, h5Pay },
   data() {
+    const UA = window.navigator.userAgent
     return {
-      isPass: false,
+      isWechat: /micromessenger/i.test(UA),
       order: { id: '', payment_url: '' },
-      qrcodeError: false,
       dialogVisible: false,
       timer: null,
       paymentRecords: [] // 所有订单
@@ -96,55 +85,37 @@ export default {
         }
       })
     },
-    // 获取订单
-    async getOrder() {
-      if (this.paySuccess) {
-        return
-      }
-      await api.getOrder({ payment_method: 'WX_PAY_QR' }).then(response => {
-        const { data, error, message } = response
-        this.qrcodeError = error.toString() === '1'
-        if (error.toString() === '0') {
-          this.order = data
-        } else {
-          this.$message.error(message)
-        }
-      })
-    },
-    // 刷新二维码
-    refreshQrcode() {
-      this.getOrder()
-    },
     // 检查支付状态
-    async checkPay(order) {
-      if (this.paySuccess) {
-        this.timer && clearInterval(this.timer)
-        return
-      }
+    checkPay(order) {
       const userId = window.G.UserInfo.id
-      await api.checkPay(order.id, { user_id: userId }).then(response => {
+      api.checkPay(order.id, { user_id: userId }).then(response => {
         if (response.data.payment_status === 'SUCCESS') {
           this.timer && clearInterval(this.timer)
           this.dialogVisible = true
         }
       })
     },
+    // 检测支付状态定时器
     setCheckPayTimer() {
       this.timer && clearInterval(this.timer)
       this.timer = setInterval(() => {
-        this.orderList.forEach(order => {
-          this.checkPay(order)
-        })
+        if (this.paySuccess) {
+          this.timer && clearInterval(this.timer)
+          return
+        }
+        this.orderList.forEach(order => this.checkPay(order))
       }, 3000)
     },
     // 填写个人资料
     toApplication() {
       this.$router.push('/my/application?active=application_info')
+    },
+    handleUpdateOrder(order) {
+      this.order = order
     }
   },
   async mounted() {
     await this.getApplication()
-    await this.getOrder()
     this.setCheckPayTimer()
   },
   destroyed() {
@@ -159,49 +130,6 @@ export default {
   margin: 0 auto;
   padding: 40px 0;
 }
-.pay-hd {
-  .pic {
-    text-align: center;
-  }
-  h1 {
-    margin-top: 40px;
-    font-size: 24px;
-    font-weight: 500;
-    color: #222;
-    line-height: 1;
-    text-align: center;
-  }
-}
-.qrcode {
-  padding: 20px 0;
-  text-align: center;
-  span {
-    margin-top: 10px;
-    font-size: 12px;
-    color: #999;
-    cursor: pointer;
-  }
-}
-.qrcode-error {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  width: 100px;
-  height: 100px;
-  padding: 10px;
-  margin: 20px auto;
-  color: var(--main-color);
-  border-style: dashed;
-  border-width: 1px;
-  border-color: var(--main-color);
-  box-sizing: border-box;
-  text-align: center;
-  i {
-    margin-top: 10px;
-    cursor: pointer;
-  }
-}
 .t1 {
   font-size: 14px;
   color: #303030;