Skip to content

P
project-online-old
提交 46476413 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

调整支付顺序

上级 71af179e
显示空白字符变更
内嵌 并排
正在显示 包含 229 行增加 和 110 行删除
src/pages/my/application/components/h5Pay.vue 0 → 100644
浏览文件 @ 46476413
<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 0 → 100644
浏览文件 @ 46476413
<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
浏览文件 @ 46476413
......@@ -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
浏览文件 @ 46476413
......@@ -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
浏览文件 @ 46476413
<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
浏览文件 @ 46476413
......@@ -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 = ''
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论