提交 761005c8 authored 作者: 王鹏飞's avatar 王鹏飞

chore: 新增留位费

上级 50a6c0d7
import { STAGE_LIST } from '../../index' import { STAGE_LIST } from '../../index'
export default function(_this) { export default function(_this) {
return { return {
required: true,
id: 'interview_byzs', id: 'interview_byzs',
title: '毕业证书或在读证明', title: '毕业证书或在读证明',
get: { get: {
action: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/${process.env.projectId}`, action: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/${process.env.projectId}`,
callback(data) { callback(data) {
const { 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 this.form.options.disabled = STAGE_LIST.findIndex(item => item === submissionStage) >= 2
return attachments.reduce( const attachment = attachments.reduce(
(result, item) => { (result, item) => {
if (item.file_type_id === 'DIPLOMA_CN') { if (item.file_type_id === 'DIPLOMA_CN') {
result.DIPLOMA_CN.push(item) result.DIPLOMA_CN.push(item)
...@@ -25,17 +24,42 @@ export default function(_this) { ...@@ -25,17 +24,42 @@ export default function(_this) {
}, },
{ DIPLOMA_CN: [], DEGREE_CERT_CN: [], PROOF_READING: [] } { DIPLOMA_CN: [], DEGREE_CERT_CN: [], PROOF_READING: [] }
) )
return Object.assign({ learn_status: basicInfo.learn_status }, attachment)
}
},
update: {
action: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/${process.env.projectId}/put`,
beforeRequest(data) {
const basicInfo = ['learn_status'].reduce((result, key) => {
result[key] = data[key]
return result
}, {})
return { basic_info: basicInfo }
},
callback() {
_this.changeSubmissionStage(() => {
this.form.options.disabled = true
// _this.$router.push('/my/interview')
})
} }
}, },
form: { form: {
next: { to: { query: { active: 'interview_ywjl' } } }, prev: { to: { query: { active: 'interview_grcs' } }, isSubmit: true },
hasButton: false, // next: { to: { query: { active: 'interview_form' } }, isSubmit: true },
submitText: '申请面试',
options: { 'label-position': 'top' }, options: { 'label-position': 'top' },
hint: `
提示:<br />
1、请同时上传毕业证书及学位证书<br />
2、如尚未毕业,请上传在读证明`,
items: [ items: [
{
type: 'v-select',
values: [{ value: '已毕业' }, { value: '未毕业' }],
label: '您当前的学习状态',
model: 'learn_status',
rules: [{ required: true, message: '请选择', trigger: 'change' }],
append: `
提示:<br />
1、请同时上传毕业证书及学位证书(中英文)<br />
2、如尚未毕业,请上传在读证明(中英文)`
},
{ {
required: true, required: true,
label: '毕业证书', label: '毕业证书',
...@@ -46,8 +70,11 @@ export default function(_this) { ...@@ -46,8 +70,11 @@ export default function(_this) {
deleteAction: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/delete`, deleteAction: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/delete`,
data: { file_type: 'DIPLOMA_CN' } data: { file_type: 'DIPLOMA_CN' }
}, },
append: rules: { required: true, message: '请上传毕业证书' },
'申请者需要将本科或以上毕业证书原件扫描或者拍照后提交。<br> 可上传多个文件,请确保证书号码清晰可辨。<br> 上传文件仅限“jpg,jpeg,png”格式,文件小于10MB。' append: '申请者需要将本科或以上毕业证书原件扫描或者拍照后提交。<br> 可上传多个文件,请确保证书号码清晰可辨。<br> 上传文件仅限“jpg,jpeg,png”格式,文件小于10MB。',
isShow(ruleForm) {
return ruleForm.learn_status === '已毕业'
}
}, },
{ {
required: true, required: true,
...@@ -59,8 +86,11 @@ export default function(_this) { ...@@ -59,8 +86,11 @@ export default function(_this) {
deleteAction: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/delete`, deleteAction: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/delete`,
data: { file_type: 'DEGREE_CERT_CN' } data: { file_type: 'DEGREE_CERT_CN' }
}, },
append: rules: { required: true, message: '请上传学位证书' },
'已毕业学员请提交学位证书<br />申请者需要将本科或以上的学位证书原件扫描或拍照后提交<br />可上传多个文件,请确保公章清晰可辨。' append: '已毕业学员请提交学位证书<br />申请者需要将本科或以上的学位证书原件扫描或拍照后提交<br />可上传多个文件,请确保公章清晰可辨。',
isShow(ruleForm) {
return ruleForm.learn_status === '已毕业'
}
}, },
{ {
required: true, required: true,
...@@ -72,8 +102,11 @@ export default function(_this) { ...@@ -72,8 +102,11 @@ export default function(_this) {
deleteAction: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/delete`, deleteAction: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/delete`,
data: { file_type: 'PROOF_READING' } data: { file_type: 'PROOF_READING' }
}, },
append: rules: { required: true, message: '请上传在读证明' },
'未毕业学员提交加盖公章的在读证明<br/>申请者需要将本科或以上在读证明原件扫描或拍照后提交。<br> 可上传多个文件,请确保公章清晰可辨。' append: '未毕业学员提交加盖公章的在读证明<br/>申请者需要将本科或以上在读证明原件扫描或拍照后提交。<br> 可上传多个文件,请确保公章清晰可辨。',
isShow(ruleForm) {
return ruleForm.learn_status === '未毕业'
}
} }
] ]
} }
......
import { STAGE_LIST } from '../../index'
export default function(_this) {
return {
id: 'interview_form',
title: '申请表格',
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
this.form.options.disabled = STAGE_LIST.findIndex(item => item === submissionStage) > 2
const attachment = attachments.reduce(
(result, item) => {
if (item.file_type_id === 'APPLICATION_FORM') {
result.APPLICATION_FORM.push(item)
}
return result
},
{ APPLICATION_FORM: [] }
)
return Object.assign({}, basicInfo, attachment)
}
},
update: {
action: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/submit/${process.env.projectId}`,
beforeRequest(data) {
return { submission_stage: 'INTERVIEW_APPLICATION' }
},
callback() {
this.form.options.disabled = true
_this.dialogVisible = true
_this.getApplication()
},
errorCallback() {
_this.completeVisible = true
}
},
form: {
prev: { to: { query: { active: 'interview_byzs' } } },
submitText: '申请面试',
model: { submission_stage: 'INTERVIEW_APPLICATION' },
options: { 'label-position': 'top' },
items: [
{
required: true,
type: 'v-upload',
model: 'APPLICATION_FORM',
attrs: {
action: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/put`,
deleteAction: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/delete`,
data: { file_type: 'APPLICATION_FORM' },
limit: 1
},
rules: [{ required: true, message: '请上传', trigger: 'change' }],
prepend: `<p>请下载填写申请表格(First Year Application Form)模板后上传 <a href="https://webapp-pub.ezijing.com/project/sit-plus/First%20Year%20Application.docx" target="_blank" download="申请表格" style="color:#aa1941;">[下载模板]</a></p>`
}
]
}
}
}
import { STAGE_LIST } from '../../index'
export default function(_this) {
return {
id: 'interview_grcs',
title: '个人陈述',
get: {
action: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/${process.env.projectId}`,
callback(data) {
const { attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
this.form.options.disabled = STAGE_LIST.findIndex(item => item === submissionStage) >= 2
const PERSONAL_STATEMENT = attachments.filter(item => {
return item.file_type_id === 'PERSONAL_STATEMENT'
})
return { PERSONAL_STATEMENT }
}
},
form: {
prev: { to: { query: { active: 'interview_tjx' } } },
next: { to: { query: { active: 'interview_byzs' } } },
hasButton: false,
options: { 'label-position': 'top' },
items: [
{
type: 'v-upload',
required: true,
model: 'PERSONAL_STATEMENT',
attrs: {
action: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/put`,
deleteAction: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/delete`,
data: { file_type: 'PERSONAL_STATEMENT' },
limit: 1
},
append: '请上传您的个人陈述(英文)'
}
]
}
}
}
import byzs from './byzs'
import cjd from './cjd' import cjd from './cjd'
import yynl from './yynl' import yynl from './yynl'
// import xwzs from './xwzs' // import xwzs from './xwzs'
import ywjl from './ywjl' import ywjl from './ywjl'
// import zp from './zp' // import zp from './zp'
import ywcjd from './ywcjd'
import tjx from './tjx' import tjx from './tjx'
import grcs from './grcs'
import byzs from './byzs'
export default function(_this) { export default function(_this) {
return { return {
id: 'interview', id: 'interview',
title: '申请面试', title: '申请面试',
children: [ywjl(_this), cjd(_this), yynl(_this)] children: [ywjl(_this), cjd(_this), yynl(_this), ywcjd(_this), tjx(_this), grcs(_this), byzs(_this)]
} }
} }
import { STAGE_LIST } from '../../index' import { STAGE_LIST } from '../../index'
export default function(_this) { export default function(_this) {
return { return {
required: true,
id: 'interview_tjx', id: 'interview_tjx',
title: '推荐信', title: '推荐信',
get: { get: {
...@@ -9,19 +8,19 @@ export default function(_this) { ...@@ -9,19 +8,19 @@ export default function(_this) {
callback(data) { callback(data) {
const { attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material const { attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
this.form.options.disabled = STAGE_LIST.findIndex(item => item === submissionStage) > 2 this.form.options.disabled = STAGE_LIST.findIndex(item => item === submissionStage) >= 2
return attachments.reduce( return attachments.reduce(
(result, item) => { (result, item) => {
const types = ['RECOMMENDATION_LETTER', 'RECOMMENDATION_LETTER_2'] item.disabled = item.upload_operator_user_id !== _this.user?.id
types.forEach(type => { if (item.file_type_id === 'RECOMMENDATION_LETTER') {
item.disabled = item.upload_operator_user_id !== _this.user?.id result.RECOMMENDATION_LETTER.push(item)
if (item.file_type_id === type) { }
result.RECOMMENDATION_LETTER.push(item) if (item.file_type_id === 'RECOMMENDATION_LETTER_2') {
} result.RECOMMENDATION_LETTER_2.push(item)
}) }
return result return result
}, },
{ RECOMMENDATION_LETTER: [] } { RECOMMENDATION_LETTER: [], RECOMMENDATION_LETTER_2: [] }
) )
} }
}, },
...@@ -40,12 +39,13 @@ export default function(_this) { ...@@ -40,12 +39,13 @@ export default function(_this) {
// } // }
// }, // },
form: { form: {
prev: { to: { query: { active: 'interview_ywjl' } } }, prev: { to: { query: { active: 'interview_ywcjd' } } },
next: { to: { query: { active: 'interview_cjd' } } }, next: { to: { query: { active: 'interview_grcs' } } },
hasButton: false, hasButton: false,
// submitText: '申请面试', // submitText: '申请面试',
// model: { submission_stage: 'INTERVIEW_APPLICATION' }, // model: { submission_stage: 'INTERVIEW_APPLICATION' },
options: {}, options: {},
hint: '请上传两封推荐人署名的推荐信原件照片或扫描件(英文)',
items: [ items: [
{ {
type: 'v-upload', type: 'v-upload',
...@@ -54,10 +54,20 @@ export default function(_this) { ...@@ -54,10 +54,20 @@ export default function(_this) {
action: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/put`, action: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/put`,
deleteAction: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/delete`, deleteAction: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/delete`,
data: { file_type: 'RECOMMENDATION_LETTER' }, data: { file_type: 'RECOMMENDATION_LETTER' },
accept: 'image/*' accept: 'image/*',
}, limit: 1
append: '请上传推荐人署名的推荐信原件照片或扫描件 ', }
class: 'upload-letter' },
{
type: 'v-upload',
model: 'RECOMMENDATION_LETTER_2',
attrs: {
action: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/put`,
deleteAction: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/delete`,
data: { file_type: 'RECOMMENDATION_LETTER_2' },
accept: 'image/*',
limit: 1
}
} }
] ]
} }
......
import { STAGE_LIST } from '../../index'
export default function(_this) {
return {
id: 'interview_ywcjd',
title: '英文成绩单',
get: {
action: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/${process.env.projectId}`,
callback(data) {
const { attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
this.form.options.disabled = STAGE_LIST.findIndex(item => item === submissionStage) >= 2
return attachments.reduce(
(result, item) => {
if (item.file_type_id === 'REPORT_CARD_CN') {
result.REPORT_CARD_CN.push(item)
}
if (item.file_type_id === 'REPORT_CARD_EN') {
result.REPORT_CARD_EN.push(item)
}
return result
},
{ REPORT_CARD_CN: [], REPORT_CARD_EN: [] }
)
}
},
form: {
next: { to: { query: { active: 'interview_tjx' } } },
hasButton: false,
options: { 'label-position': 'top' },
hint: `
<p>已毕业学生需提交完整成绩单,未毕业学生提交现有成绩单,成绩单需要加盖学校公章</p>
<p>请将英文成绩单原件扫描或者拍照后提交。</p>
<p>获取途径:联系大学时就读学校相关部门(档案馆/教务处)获取成绩单。</p>
`,
items: [
{
required: true,
type: 'v-upload',
label: '英文成绩单',
model: 'REPORT_CARD_EN',
attrs: {
action: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/put`,
deleteAction: `${process.env.baseURL}/api/enrollment/v1.0/application-materials/attachments/${process.env.projectId}/delete`,
data: { file_type: 'REPORT_CARD_EN' }
}
}
]
}
}
}
...@@ -16,13 +16,7 @@ ...@@ -16,13 +16,7 @@
</template> </template>
</vue-form> </vue-form>
<app-complete :type="1" v-model="completeVisible"></app-complete> <app-complete :type="1" v-model="completeVisible"></app-complete>
<el-dialog <el-dialog title="您的申请资料已提交成功" :visible.sync="dialogVisible" :center="true" :close-on-click-modal="false" width="348px">
title="您的申请资料已提交成功"
:visible.sync="dialogVisible"
:center="true"
:close-on-click-modal="false"
width="348px"
>
<div class="dialog-tips"> <div class="dialog-tips">
<div class="icon"><img src="https://webapp-pub.ezijing.com/project/application/images/icon_success.png" /></div> <div class="icon"><img src="https://webapp-pub.ezijing.com/project/application/images/icon_success.png" /></div>
</div> </div>
...@@ -72,7 +66,7 @@ export default { ...@@ -72,7 +66,7 @@ export default {
return false return false
}, },
showSubmittedDialog() { showSubmittedDialog() {
return this.isSubmitted && this.currentActive === 'interview_yynl' return this.isSubmitted && (this.currentActive === 'interview_yynl' || this.currentActive === 'interview_byzs')
}, },
user() { user() {
return this.$store.state.user return this.$store.state.user
......
...@@ -41,7 +41,7 @@ export default { ...@@ -41,7 +41,7 @@ export default {
} }
::v-deep .v-layout-aside { ::v-deep .v-layout-aside {
position: relative; position: relative;
min-height: 410px; min-height: 440px;
align-self: flex-start; align-self: flex-start;
.aside-logout { .aside-logout {
span { span {
......
<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>
<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>2000</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>
...@@ -11,6 +11,6 @@ export default function(_this) { ...@@ -11,6 +11,6 @@ export default function(_this) {
return { return {
id: 'admission', id: 'admission',
title: '综合评审', title: '综合评审',
children: [cjd(_this), tjx(_this), grcs(_this), byzs(_this)] children: [{ required: true, id: 'application_pay', title: '缴留位费' }, cjd(_this), tjx(_this), grcs(_this), byzs(_this)]
} }
} }
...@@ -16,18 +16,16 @@ ...@@ -16,18 +16,16 @@
<div class="aside-payment"><a href="https://accounts.ezijing.com/payment" target="_blank">查看缴费记录</a></div> <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> <div class="aside-logout" @click="$store.dispatch('logout')"><span>退出登录</span></div>
</template> </template>
<!-- 报名缴费 -->
<template #content v-if="currentActive === 'application_pay'">
<app-pay />
</template>
<!-- 入学协议 --> <!-- 入学协议 -->
<!-- <template #content v-if="currentActive === 'admission_xy'"> <!-- <template #content v-if="currentActive === 'admission_xy'">
<app-xy /> <app-xy />
</template> --> </template> -->
</vue-form> </vue-form>
<el-dialog <el-dialog title="综合评审资料提交成功" :visible.sync="dialogVisible" :center="true" :close-on-click-modal="false" width="348px">
title="综合评审资料提交成功"
:visible.sync="dialogVisible"
:center="true"
:close-on-click-modal="false"
width="348px"
>
<div class="dialog-tips"> <div class="dialog-tips">
<!-- <p>请确认是否已缴费,如未缴费点击下方缴费按钮 <br />(已缴费,请忽略)</p> --> <!-- <p>请确认是否已缴费,如未缴费点击下方缴费按钮 <br />(已缴费,请忽略)</p> -->
<div class="icon"><img src="https://webapp-pub.ezijing.com/project/application/images/icon_success.png" /></div> <div class="icon"><img src="https://webapp-pub.ezijing.com/project/application/images/icon_success.png" /></div>
...@@ -46,14 +44,15 @@ import AppLayout from '../layout.vue' ...@@ -46,14 +44,15 @@ import AppLayout from '../layout.vue'
import getMenu from './form' import getMenu from './form'
import * as api from '@/api/my' import * as api from '@/api/my'
import AppComplete from '../application/complete.vue' import AppComplete from '../application/complete.vue'
import AppPay from './pay.vue'
export default { export default {
components: { AppLayout, AppComplete }, components: { AppLayout, AppComplete, AppPay },
data() { data() {
const menus = getMenu(this) const menus = getMenu(this)
return { return {
menus: [menus], menus: [menus],
currentActive: 'admission_cjd', currentActive: 'application_pay',
dialogVisible: false, dialogVisible: false,
detail: null, detail: null,
completeVisible: false completeVisible: false
...@@ -64,7 +63,7 @@ export default { ...@@ -64,7 +63,7 @@ export default {
immediate: true, immediate: true,
handler(route) { handler(route) {
const { query = {} } = route const { query = {} } = route
this.currentActive = query.active || 'admission_cjd' this.currentActive = query.active || 'application_pay'
} }
}, },
showSubmittedDialog(value) { showSubmittedDialog(value) {
......
<template>
<div class="pay">
<h5-pay @update="handleUpdateOrder" v-if="isWechat"></h5-pay>
<qrcode-pay @update="handleUpdateOrder" v-else></qrcode-pay>
<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>
</div>
</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)
},
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 {
text-align: center;
}
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论