调整支付顺序

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 {
+      openId: window.localStorage.getItem('open_id')
+    }
+  },
+  computed: {
+    pageUrl() {
+      return window.location.origin + this.$route.path
+    }
+  },
+  methods: {
+    // 获取订单
+    getOrder(callback) {
+      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)
+          callback && callback(this.order)
+        } else {
+          this.$message.error(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() {
+      this.getOrder(() => {
+        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)}`
+      })
+    }
+  },
+  beforeMount() {
+    if (!this.openId) {
+      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="qrpay-hd">
+      <div class="pic">
+        <img src="../../../../assets/images/my_pay_01.png" />
+      </div>
+      <h1>欢迎您</h1>
+      <p class="t1">
+        紫荆-印第安纳大学Kelley商学院金融硕士（MSF）项目申请费<span>700</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>
+.qrpay-hd {
+  .pic {
+    text-align: center;
+  }
+  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/form/declare.js

@@ -26,8 +26,8 @@ export default function(_this) {
       callback() {
         _this.getApplication()
         this.form.options.disabled = true
-        // _this.$router.push({ path: this.$route.path, query: { active: 'application_pay' } })
-        _this.$router.push({ path: '/my/interview' })
+        _this.$router.push({ path: this.$route.path, query: { active: 'application_pay' } })
+        // _this.$router.push({ path: '/my/interview' })
       },
       errorCallback() {
         _this.completeVisible = true

src/pages/my/application/form/index.js

@@ -11,15 +11,15 @@ export default function(_this) {
       info(_this),
       // tjx(_this),
       // wfzsm(_this),
-      declare(_this)
-      // {
-      //   id: 'application_pay',
-      //   title: '缴报名费',
-      //   show: false,
-      //   visible() {
-      //     return _this.visible
-      //   }
-      // }
+      declare(_this),
+      {
+        id: 'application_pay',
+        title: '缴报名费',
+        show: false,
+        visible() {
+          return _this.visible
+        }
+      }
     ]
   }
 }

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">
-        申请紫荆-美国印第安纳大学Kelley商学院金融学硕士项目，本项目的注册费、申请费共计<span>700</span>元，请扫描二维码缴费以完成报名。
-      </p>
-      <p class="t1" v-if="isPass">
-        因面试未通过需重新申请紫荆-美国印第安纳大学Kelley商学院金融学硕士项目，本项目的注册费、申请费共计<span>700</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">注释：再提交700元申请费后，申请人还需上传并提交如下文件。</p>
-      <p class="t2">①本科学位证书、②本科中、英文成绩单各一份、③个人证件照（2寸、免冠、白底）</p>
+      <p class="t2">注释：该申请费提交后不予退还，缴纳申请费后，申请人还需提交以下文件：</p>
+      <p class="t2">①本科及以上学历毕业证书扫描件②本科及以上学历学位证书扫描件③个人证件照④英文简历</p>
       <p class="t2">该申请费不退，请慎重缴费！</p>
     </div>
     <el-dialog
@@ -43,17 +26,18 @@
 </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
+    const isMobile = /android|iphone|ipad|ipod/i.test(UA)
     return {
-      isPass: false,
+      isWechat: isMobile && /micromessenger/i.test(UA),
       order: { id: '', payment_url: '' },
-      qrcodeError: false,
       dialogVisible: false,
       timer: null,
       paymentRecords: [] // 所有订单
@@ -102,55 +86,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(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')
+    },
     // 申请面试
     toInterview() {
       this.$router.push('/my/interview')
+    },
+    handleUpdateOrder(order) {
+      this.order = order
     }
   },
   async mounted() {
     await this.getApplication()
-    await this.getOrder()
     this.setCheckPayTimer()
   },
   destroyed() {
@@ -163,49 +133,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;

src/pages/my/welcome/index.vue

@@ -50,8 +50,11 @@ export default {
   beforeCreate() {
     document.body.style.background = '#fff'
   },
+  created() {
+    this.$router.replace('/my/account')
+  },
   beforeMount() {
-    this.getApplication()
+    // this.getApplication()
   },
   destroyed() {
     document.body.style = ''