153 lines
3.6 KiB
Vue
153 lines
3.6 KiB
Vue
<template>
|
||
<div class="wrapper">
|
||
<BaseHeader></BaseHeader>
|
||
<div class="wrapper-head">
|
||
<div class="head-left">
|
||
<div class="left-tips">订单提交成功，请尽快付款！</div>
|
||
<div class="left-tips-time">请您尽快完成支付，否则订单会被自动取消</div>
|
||
</div>
|
||
<div class="head-right">
|
||
<div>应付金额 <span class="price">{{$route.query.price | unitPrice}}</span>元</div>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="pay-way">{{params.paymentMethod === 'ALIPAY' ? '支付宝支付' : '微信支付'}}</div>
|
||
<div class="qrcode">
|
||
<div style="width:200px;height:200px;border:1px solid #eee;">
|
||
<vue-qr :text="qrcode" :margin="0" colorDark="#000" colorLight="#fff" :size="200"></vue-qr>
|
||
</div>
|
||
<div class="intro">
|
||
<Icon type="md-qr-scanner" /> 请使用{{params.paymentMethod === 'ALIPAY' ? '支付宝' : '微信'}}扫码付款
|
||
</div>
|
||
</div>
|
||
<div class="btn-div">
|
||
<p class="mb_10">支付成功后自动跳转，如未跳转请点击按钮手动跳转。。。</p>
|
||
<div>
|
||
<Button @click="handlePay">重新支付</Button>
|
||
<Button type="success" @click="$router.push('/payDone')">支付成功</Button>
|
||
</div>
|
||
</div>
|
||
<a @click="$router.back()">选择其他支付方式></a>
|
||
</div>
|
||
<BaseFooter></BaseFooter>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import vueQr from 'vue-qr';
|
||
import { payCallback, pay } from '@/api/pay.js';
|
||
export default {
|
||
components: { vueQr },
|
||
data () {
|
||
return {
|
||
qrcode: '', // 二维码
|
||
params: this.$route.query, // 参数
|
||
interval: null, // 定时器
|
||
num: 0 // 商品数
|
||
};
|
||
},
|
||
methods: {
|
||
handlePay () {
|
||
const params = this.$route.query;
|
||
|
||
pay(params).then(res => {
|
||
if (res.success) {
|
||
this.qrcode = res.result;
|
||
this.num = 0;
|
||
this.interval = setInterval(this.callback, 5000);
|
||
} else {
|
||
this.$Message.error(res.message)
|
||
}
|
||
});
|
||
},
|
||
callback () { // 支付回调接口
|
||
this.num++;
|
||
if (this.num >= 7) {
|
||
clearInterval(this.interval);
|
||
}
|
||
let params = JSON.parse(JSON.stringify(this.$route.query));
|
||
delete params.paymentMethod;
|
||
delete params.paymentClient;
|
||
payCallback(params).then(res => {
|
||
if (res.result) {
|
||
clearInterval(this.interval);
|
||
this.$router.push({path: '/payDone', query: {orderType: this.$route.query.orderType}});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
mounted () {
|
||
this.handlePay();
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.head-left {
|
||
font-weight: bold;
|
||
}
|
||
.left-tips {
|
||
font-size: 21px;
|
||
}
|
||
|
||
.left-tips-time {
|
||
font-size: 16px;
|
||
}
|
||
.wrapper-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
line-height: 1.75;
|
||
}
|
||
.wrapper-head,
|
||
.content {
|
||
padding: 20px 40px;
|
||
width: 1000px;
|
||
margin: 20px auto;
|
||
}
|
||
.wrapper {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.content {
|
||
background-color: #fff;
|
||
box-shadow: 0 6px 10px #ddd;
|
||
position: relative;
|
||
display: flex;
|
||
.pay-way {
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.qrcode {
|
||
margin: 30px 0 0 70px;
|
||
}
|
||
|
||
.intro {
|
||
background-color: #ff7674;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
margin-top: 10px;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
}
|
||
|
||
.btn-div {
|
||
margin:120px 0 0 30px;
|
||
}
|
||
|
||
a {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 20px;
|
||
}
|
||
}
|
||
.price {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: $theme_color;
|
||
}
|
||
.head-right {
|
||
font-weight: bold;
|
||
}
|
||
</style>
|