chore: 修改报名流程

modules/my/account/home.vue

@@ -67,8 +67,8 @@ export default {
       material: {},
       progress: {},
       submissionStage: {
-        0: ['FILLING', 'PREPAYMENT'],
-        1: ['INTERVIEW_APPLICATION', 'AUDITION', 'INTERVIEW'],
+        0: ['FILLING'],
+        1: ['INTERVIEW_APPLICATION', 'AUDITION', 'INTERVIEW', 'PREPAYMENT'],
         2: ['REGISTRATION', 'PAYMENT'],
         3: ['CLOSED'],
         4: ['FINISHED']

modules/my/interview/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 + '?active=application_pay'
+    }
+  },
+  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>

modules/my/interview/components/qrcodePay.vue

+<template>
+  <div class="qrpay">
+    <div class="qrpay-hd">
+      <div class="pic">
+        <img src="https://webapp-pub.ezijing.com/project/application/images/my_pay_01.png" />
+      </div>
+      <h1>欢迎您</h1>
+      <p class="t1">
+        申请雪城大学硕士保研项目，本项目的报名费为<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"><i class="el-icon-refresh" style="font-size:20px" title="刷新"></i></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>

modules/my/interview/form/index.js

@@ -13,6 +13,16 @@ export default function(_this) {
   return {
     id: 'interview',
     title: '申请面试',
-    children: [ywjl(_this), cjd(_this), yynl(_this), ywcjd(_this), tjx(_this), grcs(_this), byzs(_this), form(_this)]
+    children: [
+      ywjl(_this),
+      cjd(_this),
+      yynl(_this),
+      {
+        required: true,
+        id: 'application_pay',
+        title: '缴报名费'
+      }
+      //  ywcjd(_this), tjx(_this), grcs(_this), byzs(_this), form(_this)
+    ]
   }
 }

modules/my/interview/form/yynl.js

@@ -7,11 +7,7 @@ export default function(_this) {
     get: {
       action: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/${process.env.projectId}`,
       callback(data) {
-        const {
-          basic_info: basicInfo = {},
-          attachments = [],
-          submission_stage: submissionStage = 'FILLING'
-        } = data.data.material
+        const { basic_info: basicInfo = {}, attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
 
         this.form.options.disabled = STAGE_LIST.findIndex(item => item === submissionStage) > 2
         const attachment = attachments.reduce(
@@ -34,17 +30,17 @@ export default function(_this) {
           return result
         }, {})
         return { basic_info: basicInfo }
-      },
-      callback() {
-        _this.changeSubmissionStage(() => {
-          this.form.options.disabled = true
-        })
       }
+      // callback() {
+      //   _this.changeSubmissionStage(() => {
+      //     this.form.options.disabled = true
+      //   })
+      // }
     },
     form: {
       prev: { to: { query: { active: 'interview_cjd' } }, isSubmit: true },
-      // next: { to: { query: { active: 'interview_form' } }, isSubmit: true },
-      submitText: '申请面试',
+      next: { to: { query: { active: 'application_pay' } }, isSubmit: true },
+      submitText: '保存',
       // hasButton: false,
       model: { submission_stage: 'INTERVIEW_APPLICATION' },
       options: { 'label-position': 'top' },

modules/my/interview/index.vue

@@ -14,6 +14,10 @@
         <div class="aside-payment"><a href="https://accounts.ezijing.com/payment" target="_blank">查看缴费记录</a></div>
         <div class="aside-logout" @click="$store.dispatch('logout')"><span>退出登录</span></div>
       </template>
+      <!-- 报名缴费 -->
+      <template #content v-if="currentActive === 'application_pay'">
+        <app-pay @submit="changeSubmissionStage" />
+      </template>
     </vue-form>
     <app-complete :type="1" v-model="completeVisible"></app-complete>
     <el-dialog title="您的申请资料已提交成功" :visible.sync="dialogVisible" :center="true" :close-on-click-modal="false" width="348px">
@@ -31,11 +35,12 @@
 import AppLayout from '../layout.vue'
 import getMenu from './form'
 import AppComplete from '../application/complete.vue'
+import AppPay from './pay.vue'
 import * as api from '@/api/my'
 import { STAGE_LIST } from '../index'
 
 export default {
-  components: { AppLayout, AppComplete },
+  components: { AppLayout, AppComplete, AppPay },
   data() {
     const menus = getMenu(this)
     return {

modules/my/interview/pay.vue

+<template>
+  <div class="pay">
+    <h5-pay @update="handleUpdateOrder" v-if="isWechat"></h5-pay>
+    <qrcode-pay @update="handleUpdateOrder" v-else></qrcode-pay>
+    <div class="pay-ft">
+      <p class="t2">注释：<br />此处为微信二维码<br />成功提交700元申请费后，申请人还需上传并提交最高学历（学位）证书 （注：申请费不退还)</p>
+    </div>
+    <el-dialog title="报名费缴费成功" :visible.sync="dialogVisible" :center="true" :close-on-click-modal="false" width="348px">
+      <div class="dialog-pay">
+        <div class="icon"><img src="https://webapp-pub.ezijing.com/project/application/images/icon_success.png" /></div>
+        <p>报名费已成功缴纳，请点击申请面试并等待招生办进一步通知</p>
+      </div>
+      <template #footer>
+        <el-button type="primary" @click="$emit('submit')">申请面试</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/my'
+import qrcodePay from './components/qrcodePay'
+import h5Pay from './components/h5Pay'
+export default {
+  name: 'AppPay',
+  components: { qrcodePay, h5Pay },
+  data() {
+    const UA = window.navigator.userAgent
+    const isMobile = /android|iphone|ipad|ipod/i.test(UA)
+    return {
+      isWechat: isMobile && /micromessenger/i.test(UA),
+      order: { id: '', payment_url: '' },
+      dialogVisible: false,
+      timer: null,
+      paymentRecords: [] // 所有订单
+    }
+  },
+  computed: {
+    user() {
+      return this.$store.state.user
+    },
+    // 二维码地址
+    qrcodeValue() {
+      return this.order.payment_url
+    },
+    // 支付成功
+    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: {
+    // 获取报名信息
+    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 => {
+            return item.bill_type === 'APPLICATION_FEE' && item.payment_status === 'SUCCESS'
+          })
+          if (orderPaySuccess) {
+            this.order = orderPaySuccess
+            this.dialogVisible = true
+            return
+          }
+          // 获取最后一个订单
+          const [lastPayment] = paymentRecords.reverse()
+          this.order = lastPayment
+        }
+      })
+    },
+    // 检查支付状态
+    checkPay(order) {
+      if (!order || !order.id) {
+        return
+      }
+      const userId = this.user.id
+      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(() => {
+        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()
+    this.setCheckPayTimer()
+  },
+  destroyed() {
+    this.timer && clearInterval(this.timer)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pay {
+  max-width: 562px;
+  margin: 0 auto;
+  padding: 40px 0;
+}
+.t1 {
+  font-size: 14px;
+  color: #303030;
+  line-height: 20px;
+  text-align: center;
+  span {
+    color: #ffa448;
+  }
+}
+.t2 {
+  font-size: 12px;
+  color: #999;
+  line-height: 20px;
+}
+.dialog-pay {
+  text-align: center;
+  p {
+    color: #262626;
+    line-height: 20px;
+  }
+  .icon {
+    margin-top: 20px;
+    text-align: center;
+  }
+}
+</style>