|
|
|
@ -2,45 +2,32 @@
|
|
|
|
* @Author: ch
|
|
|
|
* @Author: ch
|
|
|
|
* @Date: 2022-05-08 00:39:50
|
|
|
|
* @Date: 2022-05-08 00:39:50
|
|
|
|
* @LastEditors: ch
|
|
|
|
* @LastEditors: ch
|
|
|
|
* @LastEditTime: 2022-07-11 11:32:27
|
|
|
|
* @LastEditTime: 2022-06-15 16:40:14
|
|
|
|
* @Description: file content
|
|
|
|
* @Description: file content
|
|
|
|
-->
|
|
|
|
-->
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<el-dialog :title="title" width="380px" class="box" center
|
|
|
|
<el-dialog title="打开微信扫描付款" width="380px" class="box" center
|
|
|
|
:visible.sync="myVisible" @open="open" @close="close" :modal="false">
|
|
|
|
:visible.sync="myVisible" @open="open" @close="close" :modal="false">
|
|
|
|
<div class="pay-type" v-if="!myPayType">
|
|
|
|
<div class="pay">
|
|
|
|
<el-radio-group v-model="myPayType">
|
|
|
|
|
|
|
|
<el-radio label="wx" class="pay-type--item" >
|
|
|
|
|
|
|
|
<img class="pay-type--wx" src="@/assets/img/order/wx.png"/>
|
|
|
|
|
|
|
|
</el-radio>
|
|
|
|
|
|
|
|
<el-radio label="ali" class="pay-type--item" >
|
|
|
|
|
|
|
|
<img class="pay-type--ali" src="@/assets/img/order/zfb.png"/>
|
|
|
|
|
|
|
|
</el-radio>
|
|
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="pay" v-else>
|
|
|
|
|
|
|
|
<span class="pay--timer">{{timerTxt}}</span>
|
|
|
|
<span class="pay--timer">{{timerTxt}}</span>
|
|
|
|
<UiMoney class="money" sufSize="14px" preSize="14px" size="20px"
|
|
|
|
<UiMoney class="money" sufSize="14px" preSize="14px" size="20px"
|
|
|
|
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>
|
|
|
|
<!-- <p v-if="!timer">已超时，请重新下单</p> -->
|
|
|
|
</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="back">其他支付方式</UiButton>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-dialog>
|
|
|
|
</el-dialog>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import {ApiPostWxPayCdoeImg, ApiPostAliPayCdoeImg} from '@/plugins/api/pay'
|
|
|
|
import {ApiPostPayCdoeImg} from '@/plugins/api/wx'
|
|
|
|
import {ApiGetOrderDetail} from '@/plugins/api/order'
|
|
|
|
import {ApiGetOrderDetail} from '@/plugins/api/order'
|
|
|
|
import UiMoney from './UiMoney.vue';
|
|
|
|
import UiMoney from './UiMoney.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 },
|
|
|
|
props : {
|
|
|
|
props : {
|
|
|
|
visible : {
|
|
|
|
visible : {
|
|
|
|
type : Boolean,
|
|
|
|
type : Boolean,
|
|
|
|
@ -49,30 +36,15 @@ export default {
|
|
|
|
orderId : {
|
|
|
|
orderId : {
|
|
|
|
type : Number | String,
|
|
|
|
type : Number | String,
|
|
|
|
default : ''
|
|
|
|
default : ''
|
|
|
|
},
|
|
|
|
|
|
|
|
payType:{
|
|
|
|
|
|
|
|
type : String | null,
|
|
|
|
|
|
|
|
require : true
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data(){
|
|
|
|
data(){
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
orderInfo: {},
|
|
|
|
orderInfo: {},
|
|
|
|
imgUrl : '',
|
|
|
|
imgUrl : '',
|
|
|
|
imgTip : '二维码获取中',
|
|
|
|
|
|
|
|
timerTxt : '',
|
|
|
|
timerTxt : '',
|
|
|
|
startSecondNum : 0,
|
|
|
|
startSecondNum : 0,
|
|
|
|
timerStop : null,
|
|
|
|
timerStop : null,
|
|
|
|
myPayType : null,
|
|
|
|
|
|
|
|
payUUID : null
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
watch:{
|
|
|
|
|
|
|
|
myPayType(val){
|
|
|
|
|
|
|
|
// 单选框change事件无效，使用watch代替
|
|
|
|
|
|
|
|
if(val){
|
|
|
|
|
|
|
|
this.getQrCode();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed:{
|
|
|
|
computed:{
|
|
|
|
@ -83,25 +55,12 @@ export default {
|
|
|
|
set(val){
|
|
|
|
set(val){
|
|
|
|
this.$emit('update:visible', val)
|
|
|
|
this.$emit('update:visible', val)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
title(){
|
|
|
|
|
|
|
|
let str = '请选择支付方式';
|
|
|
|
|
|
|
|
if(this.myPayType === 'wx'){
|
|
|
|
|
|
|
|
str = '打开微信扫描付款';
|
|
|
|
|
|
|
|
}else if(this.myPayType === 'ali'){
|
|
|
|
|
|
|
|
str = '打开支付宝扫描付款';
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
return str;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods : {
|
|
|
|
methods : {
|
|
|
|
open(){
|
|
|
|
open(){
|
|
|
|
this.getOrderInfo();
|
|
|
|
this.getOrderInfo();
|
|
|
|
this.myPayType = this.payType;
|
|
|
|
this.getCodeImg();
|
|
|
|
if(this.myPayType){
|
|
|
|
|
|
|
|
this.getQrCode();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* 获取订单最新信息
|
|
|
|
* 获取订单最新信息
|
|
|
|
@ -123,44 +82,9 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
getQrCode(){
|
|
|
|
async getCodeImg(){
|
|
|
|
|
|
|
|
const {error, result} = await ApiPostPayCdoeImg({orderId : this.orderId});
|
|
|
|
this.payUUID = CreateUUID();
|
|
|
|
|
|
|
|
if(this.myPayType == 'wx'){
|
|
|
|
|
|
|
|
this.getWxCodeImg(this.payUUID);
|
|
|
|
|
|
|
|
}else if(this.myPayType === 'ali'){
|
|
|
|
|
|
|
|
this.getAliCodeImg(this.payUUID);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
|
|
* 支付宝二维码
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
async getAliCodeImg(uid){
|
|
|
|
|
|
|
|
const {error, result} = await ApiPostAliPayCdoeImg({orderId : this.orderId});
|
|
|
|
|
|
|
|
if(this.payUUID !== uid){
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if(error){
|
|
|
|
if(error){
|
|
|
|
this.imgTip = error.message;
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
QRcode.toDataURL(result.payDataInfo.qrCodeData,{
|
|
|
|
|
|
|
|
width : 200
|
|
|
|
|
|
|
|
}, (err, url)=>{
|
|
|
|
|
|
|
|
this.imgUrl = url;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
|
|
* 微信二维码
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
async getWxCodeImg(uid){
|
|
|
|
|
|
|
|
const {error, result} = await ApiPostWxPayCdoeImg({orderId : this.orderId});
|
|
|
|
|
|
|
|
if(this.payUUID !== uid){
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if(error){
|
|
|
|
|
|
|
|
this.imgTip = error.message;
|
|
|
|
|
|
|
|
return false;
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
QRcode.toDataURL(result.payDataInfo.codeUrlData,{
|
|
|
|
QRcode.toDataURL(result.payDataInfo.codeUrlData,{
|
|
|
|
@ -199,17 +123,11 @@ export default {
|
|
|
|
close(){
|
|
|
|
close(){
|
|
|
|
clearInterval(this.timerStop);
|
|
|
|
clearInterval(this.timerStop);
|
|
|
|
this.timerStop = null;
|
|
|
|
this.timerStop = null;
|
|
|
|
this.myPayType = this.payType;
|
|
|
|
|
|
|
|
this.$emit('cancel');
|
|
|
|
this.$emit('cancel');
|
|
|
|
},
|
|
|
|
},
|
|
|
|
finish(){
|
|
|
|
finish(){
|
|
|
|
this.myVisible = false;
|
|
|
|
this.myVisible = false;
|
|
|
|
this.$emit('finish')
|
|
|
|
this.$emit('finish')
|
|
|
|
},
|
|
|
|
|
|
|
|
back(){
|
|
|
|
|
|
|
|
this.myPayType = null;
|
|
|
|
|
|
|
|
this.imgUrl = null;
|
|
|
|
|
|
|
|
this.imgTip = '二维码获取中'
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -218,25 +136,6 @@ export default {
|
|
|
|
.box{
|
|
|
|
.box{
|
|
|
|
background: rgba(0,0,0, .5);
|
|
|
|
background: rgba(0,0,0, .5);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.pay-type{
|
|
|
|
|
|
|
|
width: 270px;
|
|
|
|
|
|
|
|
padding: 0 30px;
|
|
|
|
|
|
|
|
&--item{
|
|
|
|
|
|
|
|
width: 270px;
|
|
|
|
|
|
|
|
height: 56px;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
|
|
|
padding-left: 55px;
|
|
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
&--wx{
|
|
|
|
|
|
|
|
width: 108px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
&--ali{
|
|
|
|
|
|
|
|
width: 78px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.pay{
|
|
|
|
.pay{
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
&--code{
|
|
|
|
&--code{
|
|
|
|
@ -251,10 +150,6 @@ export default {
|
|
|
|
left: -20px;
|
|
|
|
left: -20px;
|
|
|
|
top: -20px;
|
|
|
|
top: -20px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
span{
|
|
|
|
|
|
|
|
line-height: 100px;
|
|
|
|
|
|
|
|
color: #999;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&--timer{
|
|
|
|
&--timer{
|
|
|
|
color: #999;
|
|
|
|
color: #999;
|
|
|
|
@ -268,12 +163,6 @@ export default {
|
|
|
|
color: #FF512B;
|
|
|
|
color: #FF512B;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&--btn{
|
|
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
|
|
width: 143px;
|
|
|
|
|
|
|
|
height: 32px;
|
|
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.money{
|
|
|
|
.money{
|
|
|
|
color: #FF512B;
|
|
|
|
color: #FF512B;
|
|
|
|
|
