新增微信支付

.config.dev.js

 module.exports = {
   domain: 'dev.ezijing.com',
-  url: 'https://ciis.ezijing.com/api',
+  url: 'https://shms2.ezijing.com/api',
   isEnableToIphoneDebugger: false,
   apiBaseURL: '/api',
   webpack: {

src/api/my.js

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

src/index.html

@@ -60,7 +60,7 @@
       (function() {
         var hm = document.createElement("script");
         hm.src = "https://hm.baidu.com/hm.js?2a07c28ccf39d80ed98c05e7d9031a36";
-        var s = document.getElementsByTagName("script")[0]; 
+        var s = document.getElementsByTagName("script")[0];
         s.parentNode.insertBefore(hm, s);
       })();
     </script>

src/pages/my/application/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 {
+      order: { id: '', wx_prepay_id: '' },
+      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
+          this.$message.error(this.errorMessage)
+        }
+      })
+    },
+    // 获取微信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/application/components/qrcodePay.vue

+<template>
+  <div class="qrpay">
+    <div class="pic">
+      <img src="../../../../assets/images/my_pay_01.png" />
+    </div>
+    <div class="pay-hd">
+      <h1>欢迎您</h1>
+      <p class="t1">
+        申请SHMS瑞士酒店管理大学MBA项目，本项目的注册费，申请费共计<span>600</span>元，请扫描二维码缴费以完成报名。
+      </p>
+      <p class="t1" v-if="isPass">
+        因面试未通过需重新申请紫荆-SHMS瑞士酒店管理大学MBA项目，本项目的注册费、申请费共计<span>600</span>元，请扫描二维码缴费以完成报名。
+      </p>
+    </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>
+.pic {
+  text-align: center;
+}
+.pay-hd {
+  h1 {
+    padding: 10px 0;
+    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;
+  line-height: 20px;
+  text-align: center;
+  span {
+    color: #ffa448;
+  }
+}
+</style>

src/pages/my/application/pay.vue

 <template>
   <div class="pay">
-    <div class="pic">
-      <img src="../../../assets/images/my_pay_01.png" />
-    </div>
-    <div class="pay-hd">
-      <h1>欢迎您</h1>
-      <p class="t1">
-        申请SHMS瑞士酒店管理大学MBA项目，本项目的注册费，申请费共计<span>600</span>元，请扫描二维码缴费以完成报名。
-      </p>
-      <p class="t1" v-if="isPass">
-        因面试未通过需重新申请紫荆-SHMS瑞士酒店管理大学MBA项目，本项目的注册费、申请费共计<span>600</span>元，请扫描二维码缴费以完成报名。
-      </p>
-    </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">①最高学历（学位）证书、②专科/本科中文或英文成绩单、③个人证件照（免冠、白底）</p>
@@ -43,19 +26,20 @@
 </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
+      timer: null,
+      paymentRecords: [] // 所有订单
     }
   },
   computed: {
@@ -66,6 +50,16 @@ export default {
     // 支付成功
     paySuccess() {
       return this.order.payment_status === 'SUCCESS'
+    },
+    // 待支付订单
+    orderList() {
+      // 筛选待支付订单
+      const list = this.paymentRecords.filter(item => {
+        return item.bill_type === 'APPLICATION_FEE' && item.payment_status === 'WAITING_FOR_PAY'
+      })
+      // 待支付订单是否有当前订单
+      const found = list.find(item => item.id === this.order.id)
+      return found ? list : [...list, this.order]
     }
   },
   methods: {
@@ -73,6 +67,8 @@ export default {
     async getApplication() {
       await api.getApplication().then(response => {
         const { payment_records: paymentRecords = [] } = response.data.material
+        // 获取支付订单
+        this.paymentRecords = paymentRecords
         if (paymentRecords && paymentRecords.length) {
           // 获取支付成功的订单
           const orderPaySuccess = paymentRecords.find(item => {
@@ -89,51 +85,41 @@ 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() {
-      if (this.paySuccess) {
-        this.timer && clearInterval(this.timer)
-        return
-      }
+    checkPay(order) {
       const userId = window.G.UserInfo.id
-      await api.checkPay(this.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.checkPay, 3000)
+      this.timer = setInterval(() => {
+        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')
     },
     // 申请面试
     toInterview() {
       this.$router.push('/my/interview')
+    },
+    handleUpdateOrder(order) {
+      this.order = order
     }
   },
   async mounted() {
     await this.getApplication()
-    await this.getOrder()
     this.setCheckPayTimer()
   },
   destroyed() {
@@ -146,49 +132,7 @@ export default {
 .pay {
   max-width: 562px;
   margin: 0 auto;
-}
-.pic {
-  text-align: center;
-}
-.pay-hd {
-  h1 {
-    padding: 10px 0;
-    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;
-  }
+  padding: 40px 0;
 }
 .t1 {
   font-size: 14px;