mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
421 lines
9.9 KiB
Vue
421 lines
9.9 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" v-if="userPayData.userprice">￥{{ 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' : ''"
|
||
v-if="(!disableAlipay || (disableAlipay && item.type!='alipay'))"
|
||
>
|
||
|
||
<div style="display:flex;">
|
||
<img :src="item.payimage" alt="" />
|
||
<span>{{ item.paytype }}支付</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="payconfirm rc-padding-y--md" v-if="disableQrcode">
|
||
<span class="ts-standard-btn ts-standard-btn--two center" @click="goPayH5">
|
||
确认支付
|
||
</span>
|
||
</div>
|
||
|
||
<div class="paycord" v-if="!disableQrcode">
|
||
<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">
|
||
|
||
<img src="/images/qrcode-wxgroup.jpg">
|
||
</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 style="display:none" ref="h5SubmitForm">
|
||
</div>
|
||
</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";
|
||
import util from "@/ajax/util";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
util,
|
||
activeIndex: 0,
|
||
paymentTimer:undefined,
|
||
isSucess: false,
|
||
h5PayUrl:"",
|
||
dialogSuccess: false,
|
||
paytype: "微信",
|
||
userpaystype: [
|
||
{
|
||
paytype: "微信",
|
||
payimage: require("../../assets/pay/wx.png"),
|
||
type:'wechat'
|
||
},
|
||
|
||
{
|
||
paytype: "支付宝",
|
||
payimage: require("../../assets/pay/zfb.png"),
|
||
type:'alipay'
|
||
},
|
||
|
||
],
|
||
dialogFail: false,
|
||
userPayData: {},
|
||
qrtext:'',
|
||
userData:'',
|
||
disableAlipay:true,
|
||
disableQrcode:false,
|
||
};
|
||
},
|
||
|
||
created(){
|
||
|
||
},
|
||
mounted() {
|
||
let isWx = this.util.isWX();
|
||
if(!isWx) {
|
||
this.disableAlipay = false;
|
||
}
|
||
let stype=this.$route.query.stype;
|
||
this.userPayData = JSON.parse(this.$route.query.userPayData);
|
||
this.defaultHandlePayment();
|
||
},
|
||
methods: {
|
||
detectQrcodeDisplay(){
|
||
let payType = this.util.pickPaytype();
|
||
switch(payType) {
|
||
case 1:
|
||
this.disableQrcode=false;
|
||
break;
|
||
case 2:
|
||
this.disableQrcode=true;
|
||
break;
|
||
case 3:
|
||
//TODO raise WX jsapi pay
|
||
break;
|
||
}
|
||
},
|
||
defaultHandlePayment() {
|
||
let isMobile = this.util.isMobile();
|
||
let isWx = this.util.isWX();
|
||
let payType = this.util.pickPaytype();
|
||
if(!this.userPayData.wxPay || this.userPayData.wxPay.length<4)
|
||
throw new Error("订单信息错误，请删除商品后再次购买");
|
||
this.detectQrcodeDisplay();
|
||
//Dictionary : 1: scan qrcode, 2:redirect 3: raise local app
|
||
switch(payType) {
|
||
case 1:
|
||
this.qrtext=this.userPayData.wxPay;
|
||
this.updateOrderNotification();
|
||
break;
|
||
case 2:
|
||
this.$refs["h5SubmitForm"].innerHTML = '<form action="'+this.userPayData.wxPay+'" method="post"><form>';
|
||
break;
|
||
case 3:
|
||
//TODO raise WX jsapi pay
|
||
break;
|
||
}
|
||
_hmt.push([
|
||
"_trackCustomEvent",
|
||
"payment",
|
||
{
|
||
"payType" : payType,
|
||
"product_amount" : this.userPayData.userprice,
|
||
}
|
||
])
|
||
},
|
||
goPayH5() {
|
||
if(this.userPayData.wxPay) {
|
||
//this.$refs["h5SubmitForm"].action="http://47.96.75.242:10086/royalcanin/royalcanin/redirectUrlWXH5";
|
||
//this.$refs["h5SubmitForm"].action=this.userPayData.wxPay;
|
||
this.$refs["h5SubmitForm"].children[0].submit()
|
||
//window.location.href=this.userPayData.wxPay;
|
||
//this.disableQrcode=true;
|
||
} else {
|
||
throw new Error("订单信息错误，请删除商品后再次购买");
|
||
}
|
||
},
|
||
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 selectGoods(item, index) {
|
||
this.activeIndex = index;
|
||
this.paytype = item.paytype;
|
||
if (index == 1) {
|
||
//支付宝
|
||
let isMobile = this.util.isMobile();
|
||
isMobile = (isMobile?2:1);
|
||
let res = await generateOrderAlipay(this.userPayData.orderId, isMobile);
|
||
if (res.success) {
|
||
this.disableQrcode = true;
|
||
let virtualForm = res.data;
|
||
virtualForm = virtualForm.substr(0,virtualForm.indexOf("</form>")+7);
|
||
this.$refs["h5SubmitForm"].innerHTML = virtualForm;
|
||
}
|
||
} else {
|
||
this.userPayData = JSON.parse(this.$route.query.userPayData);
|
||
this.qrtext=this.userPayData.wxPay;
|
||
this.$refs["h5SubmitForm"].innerHTML = '<form method="get" action="'+this.userPayData.wxPay+'"></form>';
|
||
this.detectQrcodeDisplay();
|
||
}
|
||
},
|
||
//支付监听
|
||
|
||
async updateOrderNotification() {
|
||
let res = await monitorOrderNotify(this.userPayData.orderId);
|
||
if (res.success) {
|
||
this.qrtext = '成功加入群的二维码';
|
||
this.dialogSuccess = true;
|
||
_hmt.push([
|
||
"_trackCustomEvent",
|
||
"payment_finished",
|
||
{
|
||
"payType" : 'native',
|
||
"product_amount" : this.userPayData.userprice,
|
||
}
|
||
])
|
||
} else if (res.fail) {
|
||
this.dialogFail = true;
|
||
|
||
} else {
|
||
let _self = this;
|
||
this.paymentTimer = setTimeout(function(){
|
||
_self.updateOrderNotification()
|
||
},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) {
|
||
.payconfirm{
|
||
position:fixed;
|
||
bottom:0;
|
||
left:0;
|
||
width:100%;
|
||
}
|
||
|
||
.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: 4px solid #e2001a;
|
||
}
|
||
}
|
||
}
|
||
.paycord {
|
||
//display: none;
|
||
}
|
||
}
|
||
</style> |