删除文件 buyer/src/pages/payment/thirdPay.vue
mabo
Gitee
parent
0597531c72
commit
924de43227
|
|
@ -1,154 +0,0 @@
|
||||||
<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);
|
|
||||||
this.interval = null;
|
|
||||||
}
|
|
||||||
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.interval = null;
|
|
||||||
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>
|
|
||||||
Loading…
Reference in New Issue