|
|
@ -2,7 +2,7 @@
|
|
|
|
* @Author: ch
|
|
|
|
* @Author: ch
|
|
|
|
* @Date: 2022-05-08 00:39:50
|
|
|
|
* @Date: 2022-05-08 00:39:50
|
|
|
|
* @LastEditors: ch
|
|
|
|
* @LastEditors: ch
|
|
|
|
* @LastEditTime: 2022-06-29 16:51:50
|
|
|
|
* @LastEditTime: 2022-07-11 11:32:27
|
|
|
|
* @Description: file content
|
|
|
|
* @Description: file content
|
|
|
|
-->
|
|
|
|
-->
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
@ -24,9 +24,10 @@
|
|
|
|
float suffix prefix :money="orderInfo.payAmount"/>
|
|
|
|
float suffix prefix :money="orderInfo.payAmount"/>
|
|
|
|
<div class="pay--code">
|
|
|
|
<div class="pay--code">
|
|
|
|
<img :src="imgUrl" v-if="imgUrl"/>
|
|
|
|
<img :src="imgUrl" v-if="imgUrl"/>
|
|
|
|
|
|
|
|
<span v-else>{{imgTip}}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p class="pay--tips">如支付后没有自动跳转,请点击 <span class="pay--finish" @click="finish">完成付款</span></p>
|
|
|
|
<p class="pay--tips">如支付后没有自动跳转,请点击 <span class="pay--finish" @click="finish">完成付款</span></p>
|
|
|
|
<UiButton class="pay--btn" type='yellow_gradual' @click="myPayType = null">其他支付方式</UiButton>
|
|
|
|
<UiButton class="pay--btn" type='yellow_gradual' @click="back">其他支付方式</UiButton>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-dialog>
|
|
|
|
</el-dialog>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
@ -36,6 +37,7 @@ import {ApiGetOrderDetail} from '@/plugins/api/order'
|
|
|
|
import UiMoney from './UiMoney.vue';
|
|
|
|
import UiMoney from './UiMoney.vue';
|
|
|
|
import UiButton from './UiButton.vue';
|
|
|
|
import UiButton from './UiButton.vue';
|
|
|
|
import QRcode from 'qrcode';
|
|
|
|
import QRcode from 'qrcode';
|
|
|
|
|
|
|
|
import {CreateUUID} from '@/plugins/utils';
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
components: { UiMoney, UiButton },
|
|
|
|
components: { UiMoney, UiButton },
|
|
|
@ -57,17 +59,19 @@ export default {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
orderInfo: {},
|
|
|
|
orderInfo: {},
|
|
|
|
imgUrl : '',
|
|
|
|
imgUrl : '',
|
|
|
|
|
|
|
|
imgTip : '二维码获取中',
|
|
|
|
timerTxt : '',
|
|
|
|
timerTxt : '',
|
|
|
|
startSecondNum : 0,
|
|
|
|
startSecondNum : 0,
|
|
|
|
timerStop : null,
|
|
|
|
timerStop : null,
|
|
|
|
myPayType : null
|
|
|
|
myPayType : null,
|
|
|
|
|
|
|
|
payUUID : null
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
watch:{
|
|
|
|
watch:{
|
|
|
|
myPayType(val){
|
|
|
|
myPayType(val){
|
|
|
|
// 单选框change事件无效,使用watch代替
|
|
|
|
// 单选框change事件无效,使用watch代替
|
|
|
|
if(val){
|
|
|
|
if(val){
|
|
|
|
this.getQrCode()
|
|
|
|
this.getQrCode();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
@ -120,33 +124,43 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
getQrCode(){
|
|
|
|
getQrCode(){
|
|
|
|
console.log(this.myPayType);
|
|
|
|
|
|
|
|
|
|
|
|
this.payUUID = CreateUUID();
|
|
|
|
if(this.myPayType == 'wx'){
|
|
|
|
if(this.myPayType == 'wx'){
|
|
|
|
this.getWxCodeImg();
|
|
|
|
this.getWxCodeImg(this.payUUID);
|
|
|
|
}else if(this.myPayType === 'ali'){
|
|
|
|
}else if(this.myPayType === 'ali'){
|
|
|
|
this.getAliCodeImg();
|
|
|
|
this.getAliCodeImg(this.payUUID);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* 支付宝二维码
|
|
|
|
* 支付宝二维码
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
async getAliCodeImg(){
|
|
|
|
async getAliCodeImg(uid){
|
|
|
|
const {error, result} = await ApiPostAliPayCdoeImg({orderId : this.orderId});
|
|
|
|
const {error, result} = await ApiPostAliPayCdoeImg({orderId : this.orderId});
|
|
|
|
|
|
|
|
if(this.payUUID !== uid){
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
}
|
|
|
|
if(error){
|
|
|
|
if(error){
|
|
|
|
|
|
|
|
this.imgTip = error.message;
|
|
|
|
return false;
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
QRcode.toDataURL(result.payDataInfo.qrCodeData,{
|
|
|
|
QRcode.toDataURL(result.payDataInfo.qrCodeData,{
|
|
|
|
width : 200
|
|
|
|
width : 200
|
|
|
|
}, (err, url)=>{
|
|
|
|
}, (err, url)=>{
|
|
|
|
this.imgUrl = url;
|
|
|
|
this.imgUrl = url;
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* 微信二维码
|
|
|
|
* 微信二维码
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
async getWxCodeImg(){
|
|
|
|
async getWxCodeImg(uid){
|
|
|
|
const {error, result} = await ApiPostWxPayCdoeImg({orderId : this.orderId});
|
|
|
|
const {error, result} = await ApiPostWxPayCdoeImg({orderId : this.orderId});
|
|
|
|
|
|
|
|
if(this.payUUID !== uid){
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
}
|
|
|
|
if(error){
|
|
|
|
if(error){
|
|
|
|
|
|
|
|
this.imgTip = error.message;
|
|
|
|
return false;
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
QRcode.toDataURL(result.payDataInfo.codeUrlData,{
|
|
|
|
QRcode.toDataURL(result.payDataInfo.codeUrlData,{
|
|
|
@ -191,6 +205,11 @@ export default {
|
|
|
|
finish(){
|
|
|
|
finish(){
|
|
|
|
this.myVisible = false;
|
|
|
|
this.myVisible = false;
|
|
|
|
this.$emit('finish')
|
|
|
|
this.$emit('finish')
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
back(){
|
|
|
|
|
|
|
|
this.myPayType = null;
|
|
|
|
|
|
|
|
this.imgUrl = null;
|
|
|
|
|
|
|
|
this.imgTip = '二维码获取中'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -232,6 +251,10 @@ export default {
|
|
|
|
left: -20px;
|
|
|
|
left: -20px;
|
|
|
|
top: -20px;
|
|
|
|
top: -20px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
span{
|
|
|
|
|
|
|
|
line-height: 100px;
|
|
|
|
|
|
|
|
color: #999;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&--timer{
|
|
|
|
&--timer{
|
|
|
|
color: #999;
|
|
|
|
color: #999;
|
|
|
|