You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-pc/components/BsPay.vue

77 lines
1.7 KiB

<!--
* @Author: ch
* @Date: 2022-05-08 00:39:50
* @LastEditors: ch
* @LastEditTime: 2022-05-08 01:49:59
* @Description: file content
-->
<template>
<el-dialog :visible="visible" title="打开微信扫描付款" @open="getCodeImg" @close="close">
<div>
<span v-if="startSecondNum">{{timeTips}}</span>
<div class="code-img">
<img :src="imgUrl" v-if="imgUrl"/>
<p v-if="!startSecondNum"></p>
</div>
<p>如支付后没有自动跳转请点击 <span>完成付款</span></p>
</div>
</el-dialog>
</template>
<script>
import {ApiPostPayCdoeImg} from '@/plugins/api/wx'
export default {
props : {
visible : {
type : Boolean,
default : false
},
orderId : {
type : Number | String,
default : ''
},
money : {
type : String | Number,
default : 0
}
},
data(){
return {
imgUrl : '',
timeTips : '',
timerStop : null,
startSecondNum : 1800
}
},
methods : {
async getCodeImg(){
this.timerStop = null;
const {error, result} = await ApiPostPayCdoeImg({orderId : this.orderId});
if(error){
return false;
}
// 待支付 开始倒计时
if(this.timerStop){
clearTimeout(this.timerStop);
}
this.timer();
this.imgUrl = result.dataInfo.codeImgData;
},
/**
* 待付款的倒计时
*/
timer(){
if(this.startSecondNum === 0){
return false
}
this.startSecondNum--;
let minute = parseInt(this.startSecondNum / 60);
let second = parseInt(this.startSecondNum % 60);
this.timeTips = `剩余${minute > 0 ? `${minute}` : ''} ${second}`;
this.timerStop = setTimeout(()=>this.timer(),1000)
},
close(){
this.$emit('cancel');
}
}
}
</script>