|
|
@ -2,32 +2,43 @@
|
|
|
|
* @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-15 16:40:14
|
|
|
|
* @LastEditTime: 2022-06-29 15:34:08
|
|
|
|
* @Description: file content
|
|
|
|
* @Description: file content
|
|
|
|
-->
|
|
|
|
-->
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<el-dialog title="打开微信扫描付款" width="380px" class="box" center
|
|
|
|
<el-dialog :title="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">
|
|
|
|
<div class="pay-type" v-if="!myPayType">
|
|
|
|
|
|
|
|
<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="zfb" class="pay-type--item" >
|
|
|
|
|
|
|
|
<img class="pay-type--zfb" 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"/>
|
|
|
|
<!-- <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="myPayType = null">其他支付方式</UiButton>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-dialog>
|
|
|
|
</el-dialog>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import {ApiPostPayCdoeImg} from '@/plugins/api/wx'
|
|
|
|
import {ApiPostWxPayCdoeImg, ApiPostZfbPayCdoeImg} from '@/plugins/api/pay'
|
|
|
|
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';
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
components: { UiMoney },
|
|
|
|
components: { UiMoney, UiButton },
|
|
|
|
props : {
|
|
|
|
props : {
|
|
|
|
visible : {
|
|
|
|
visible : {
|
|
|
|
type : Boolean,
|
|
|
|
type : Boolean,
|
|
|
@ -36,6 +47,10 @@ export default {
|
|
|
|
orderId : {
|
|
|
|
orderId : {
|
|
|
|
type : Number | String,
|
|
|
|
type : Number | String,
|
|
|
|
default : ''
|
|
|
|
default : ''
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
payType:{
|
|
|
|
|
|
|
|
type : String | null,
|
|
|
|
|
|
|
|
require : true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data(){
|
|
|
|
data(){
|
|
|
@ -45,6 +60,7 @@ export default {
|
|
|
|
timerTxt : '',
|
|
|
|
timerTxt : '',
|
|
|
|
startSecondNum : 0,
|
|
|
|
startSecondNum : 0,
|
|
|
|
timerStop : null,
|
|
|
|
timerStop : null,
|
|
|
|
|
|
|
|
myPayType : null
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed:{
|
|
|
|
computed:{
|
|
|
@ -55,12 +71,25 @@ 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 === 'zfb'){
|
|
|
|
|
|
|
|
str = '打开支付宝扫描付款';
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
return str;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods : {
|
|
|
|
methods : {
|
|
|
|
open(){
|
|
|
|
open(){
|
|
|
|
this.getOrderInfo();
|
|
|
|
this.getOrderInfo();
|
|
|
|
this.getCodeImg();
|
|
|
|
this.myPayType = this.payType;
|
|
|
|
|
|
|
|
if(this.myPayType){
|
|
|
|
|
|
|
|
this.getQrCode();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* 获取订单最新信息
|
|
|
|
* 获取订单最新信息
|
|
|
@ -82,8 +111,32 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
async getCodeImg(){
|
|
|
|
getQrCode(){
|
|
|
|
const {error, result} = await ApiPostPayCdoeImg({orderId : this.orderId});
|
|
|
|
if(this.myPayType == 'wx'){
|
|
|
|
|
|
|
|
this.getWxCodeImg();
|
|
|
|
|
|
|
|
}else if(this.myPayType === 'zfb'){
|
|
|
|
|
|
|
|
this.getZfbCodeImg();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
|
|
* 支付宝二维码
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
async getZfbCodeImg(){
|
|
|
|
|
|
|
|
const {error, result} = await ApiPostZfbPayCdoeImg({orderId : this.orderId});
|
|
|
|
|
|
|
|
if(error){
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
QRcode.toDataURL(result.payDataInfo.qrCodeData,{
|
|
|
|
|
|
|
|
width : 200
|
|
|
|
|
|
|
|
}, (err, url)=>{
|
|
|
|
|
|
|
|
this.imgUrl = url;
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
|
|
* 微信二维码
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
async getWxCodeImg(){
|
|
|
|
|
|
|
|
const {error, result} = await ApiPostWxPayCdoeImg({orderId : this.orderId});
|
|
|
|
if(error){
|
|
|
|
if(error){
|
|
|
|
return false;
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -123,6 +176,7 @@ 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(){
|
|
|
@ -136,6 +190,25 @@ 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;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
&--zfb{
|
|
|
|
|
|
|
|
width: 78px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.pay{
|
|
|
|
.pay{
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
&--code{
|
|
|
|
&--code{
|
|
|
@ -163,6 +236,12 @@ 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;
|
|
|
|