删除文件 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