mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
329 lines
7.6 KiB
Vue
329 lines
7.6 KiB
Vue
<template>
|
||
<div class="page_modules">
|
||
<Myheader></Myheader>
|
||
<div class="rc-top rc-md-up"></div>
|
||
<div class="cont_modules">
|
||
<el-row class="order_info">
|
||
<el-col :span="6" class="ph_hidden">
|
||
<ul class="li_inline">
|
||
<li class="sucess_img">
|
||
<img src="../../assets/image/usersucess.png" alt="" />
|
||
</li>
|
||
<li class="ready">
|
||
<p>订单提交成功</p>
|
||
<p>等待付款</p>
|
||
</li>
|
||
</ul>
|
||
</el-col>
|
||
<el-col :span="12" class="ph_hidden"> </el-col>
|
||
<el-col :span="6" class="ready_right">
|
||
<div class="inline_right">
|
||
<p>付款金额:</p>
|
||
<p class="price">￥{{ userPayData.userprice }}</p>
|
||
</div>
|
||
<div class="inline_right">
|
||
<p>收货信息:</p>
|
||
<p>{{ userPayData.userinformation }}</p>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="rc_contline"></div>
|
||
<div class="cont_modules">
|
||
<div class="pay_title color_red">请选择支付方式</div>
|
||
</div>
|
||
<div class="rc_contline"></div>
|
||
<div class="cont_modules">
|
||
<div class="pay_list">
|
||
<ul>
|
||
<li
|
||
class="pay_item"
|
||
v-for="(item, index) in userpaystype"
|
||
:key="index"
|
||
@click="selectGoods(item, index)"
|
||
:class="activeIndex == index ? 'active' : ''"
|
||
>
|
||
<img :src="item.payimage" alt="" />
|
||
<span>{{ item.paytype }}支付</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="paycord">
|
||
<div class="qrcode"><vue-qr :text="qrtext" :size="260"></vue-qr></div>
|
||
<span>{{ paytype }}扫一扫立即支付</span>
|
||
</div>
|
||
|
||
<el-dialog :visible.sync="dialogSuccess" @close="closeDialogSuccess">
|
||
<div class="tc dl_cont">
|
||
<div class="dl_img">
|
||
<img src="../../assets/image/usersucess.png" alt="" />
|
||
</div>
|
||
<h3 class="title">支付成功</h3>
|
||
<p>您的商品我们正在抓紧打包，请耐心等候！</p>
|
||
<div class="line_dashed"></div>
|
||
<div class="userer">
|
||
<div class="qrcode"><vue-qr :text="qrtext" :size="260"></vue-qr></div>
|
||
<p>微信扫一扫，识别二维码</p>
|
||
<p class="tips">加入社群0元试用商品随单发放</p>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog :visible.sync="dialogFail" @close="closeDialogFail">
|
||
<div class="tc dl_cont">
|
||
<div class="dl_img">
|
||
<img src="../../assets/pay/fail.png" alt="" />
|
||
</div>
|
||
<h3 class="title">支付失败</h3>
|
||
<p>请返回商品结算页面重新支付</p>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Myheader from "~/components/header.vue";
|
||
import tabs from "@/components/tabs.vue";
|
||
import vueQr from 'vue-qr'
|
||
|
||
import { generateOrderAlipay, updateOrderWX, monitorOrderNotify,repayOrde } from "../../ajax/getData";
|
||
export default {
|
||
data() {
|
||
return {
|
||
activeIndex: 0,
|
||
paymentTimer:undefined,
|
||
isSucess: false,
|
||
dialogSuccess: false,
|
||
paytype: "微信",
|
||
userpaystype: [
|
||
{
|
||
paytype: "微信",
|
||
payimage: require("../../assets/pay/wx.png"),
|
||
},
|
||
/*
|
||
{
|
||
paytype: "支付宝",
|
||
payimage: require("../../assets/pay/zfb.png"),
|
||
},
|
||
*/
|
||
],
|
||
dialogFail: false,
|
||
userPayData: {},
|
||
qrtext:'',
|
||
userData:'',
|
||
};
|
||
},
|
||
computed: {},
|
||
mounted() {
|
||
let stype=this.$route.query.stype;
|
||
console.log(stype)
|
||
if(stype==1){
|
||
this.userData = this.$route.query.userData;
|
||
this.repayOrde(this.userData);
|
||
this.userPayData = JSON.parse(this.$route.query.userPayData);
|
||
console.log(this.userPayData);
|
||
}else{
|
||
this.userPayData = JSON.parse(this.$route.query.userPayData);
|
||
console.log(this.userPayData);
|
||
}
|
||
this.qrtext=this.userPayData.wxPay
|
||
|
||
},
|
||
methods: {
|
||
closeDialogSuccess() {
|
||
this.qrtext = '';
|
||
this.$router.push({
|
||
path: "/myorder/usertion",
|
||
query:{
|
||
stype:1,
|
||
orderNumber:this.userPayData.orderId
|
||
}
|
||
});
|
||
},
|
||
closeDialogFail() {
|
||
this.qrtext = '';
|
||
// this.$router.push({
|
||
// path: "/personal/useraddress",
|
||
// });
|
||
},
|
||
|
||
async repayOrde(ordernumber) {
|
||
let res = await repayOrde(ordernumber);
|
||
console.log(ordernumber);
|
||
if (res) {
|
||
console.log(res)
|
||
this.qrtext=res.msg
|
||
console.log(this.qrtext);
|
||
}
|
||
},
|
||
|
||
async selectGoods(item, index) {
|
||
this.activeIndex = index;
|
||
this.paytype = item.paytype;
|
||
if (index == 1) {
|
||
//支付宝
|
||
let res = await generateOrderAlipay(this.userPayData.orderId);
|
||
if (res.success) {
|
||
this.qrtext=res.data
|
||
}
|
||
}
|
||
},
|
||
//支付监听
|
||
|
||
async payOrderWX() {
|
||
let res = await monitorOrderNotify(this.userPayData.orderId);
|
||
if (res.success) {
|
||
this.qrtext = '成功加入群的二维码';
|
||
this.dialogSuccess = true;
|
||
|
||
} else if (res.fail) {
|
||
this.dialogFail = true;
|
||
}else{
|
||
let _self = this;
|
||
this.paymentTimer = setTimeout(function(){
|
||
_self.payOrderWX()
|
||
},5000);
|
||
}
|
||
},
|
||
},
|
||
components: {
|
||
Myheader,
|
||
tabs,
|
||
vueQr,
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped >
|
||
.sucess_img {
|
||
width: 96px;
|
||
height: 96px;
|
||
margin-right: 10px;
|
||
}
|
||
.order_info {
|
||
padding: 10px 0;
|
||
}
|
||
.info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.ready {
|
||
font-size: 20px;
|
||
color: #e2001a;
|
||
}
|
||
.ready_right {
|
||
line-height: 200%;
|
||
padding-top: 8px;
|
||
}
|
||
.price {
|
||
font-size: 20px;
|
||
color: #e2001a;
|
||
}
|
||
.pay_title {
|
||
font-size: 26px;
|
||
padding: 26px 0;
|
||
border-bottom: 1px solid #d7d7d7;
|
||
}
|
||
.pay_list {
|
||
padding: 20px 0;
|
||
.pay_item {
|
||
float: left;
|
||
margin-right: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
border: 1px solid #333333;
|
||
padding: 5px 20px;
|
||
cursor: pointer;
|
||
&.active {
|
||
border: 1px solid #e2001a;
|
||
color: #e2001a;
|
||
}
|
||
img {
|
||
margin-right: 5px;
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
}
|
||
&::after {
|
||
content: "";
|
||
display: block;
|
||
clear: both;
|
||
}
|
||
}
|
||
.paycord {
|
||
padding: 10px;
|
||
text-align: center;
|
||
.qrcode {
|
||
margin: 0 auto 10px;
|
||
width: 260px;
|
||
height: 260px;
|
||
}
|
||
}
|
||
.dl_width {
|
||
width: 440px;
|
||
}
|
||
.dl_cont {
|
||
color: #333;
|
||
margin-top: -10px;
|
||
.title {
|
||
font-size: 26px;
|
||
font-weight: bold;
|
||
padding-bottom: 10px;
|
||
}
|
||
.line_dashed {
|
||
border-bottom: 2px dashed #999999;
|
||
margin: 10px 0;
|
||
}
|
||
.dl_img {
|
||
img {
|
||
width: 90px;
|
||
height: 90px;
|
||
margin: 0 auto;
|
||
}
|
||
padding: 0px 0 20px;
|
||
}
|
||
.userer {
|
||
img {
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
.tips {
|
||
color: #e2001a;
|
||
margin-top: 30px;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
.ph_hidden {
|
||
display: none;
|
||
}
|
||
.ready_right {
|
||
width: 100%;
|
||
padding: 10px;
|
||
}
|
||
.pay_title {
|
||
padding: 10px;
|
||
}
|
||
.pay_list {
|
||
padding: 0;
|
||
.pay_item {
|
||
float: none;
|
||
border: none;
|
||
border-bottom: 1px solid #d7d7d7;
|
||
height: 50px;
|
||
margin-right: 0;
|
||
align-items: center;
|
||
justify-content: left;
|
||
justify-content: left;
|
||
&.active {
|
||
border: none;
|
||
border-bottom: 1px solid #d7d7d7;
|
||
}
|
||
}
|
||
}
|
||
.paycord {
|
||
//display: none;
|
||
}
|
||
}
|
||
</style> |