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

131 lines
2.7 KiB

<!--
* @Author: ch
* @Date: 2022-05-08 00:39:50
* @LastEditors: ch
* @LastEditTime: 2022-05-08 17:25:08
* @Description: file content
-->
<template>
<el-dialog title="打开微信扫描付款" width="380px" class="box" center
:visible="visible" @open="getCodeImg" @close="close">
<div class="pay">
<span class="pay--timer" v-if="startSecondNum">{{timerTxt}}</span>
<UiMoney class="money" sufSize="14px" preSize="14px" size="20px"
float suffix prefix :money="39"/>
<div class="pay--code">
<img :src="imgUrl" v-if="imgUrl"/>
<p v-if="!startSecondNum">已超时,请重新下单</p>
</div>
<p class="pay--tips">如支付后没有自动跳转,请点击 <span class="pay--finish"></span></p>
</div>
</el-dialog>
</template>
<script>
import {ApiPostPayCdoeImg} from '@/plugins/api/wx'
import UiMoney from './UiMoney.vue'
export default {
components: { UiMoney },
props : {
visible : {
type : Boolean,
default : false
},
orderId : {
type : Number | String,
default : ''
},
money : {
type : String | Number,
default : 0
}
},
data(){
return {
imgUrl : 'https://pay.mashibing.com/api/scan/imgs/d2VpeGluOi8vd3hwYXkvYml6cGF5dXJsP3ByPVo4alVpUmF6eg==.png',
timerTxt : '',
timerStop : null,
startSecondNum : 1800
}
},
mounted(){
this.timer()
},
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.timerTxt = `剩余${minute > 0 ? `${minute}` : ''} ${second}`;
this.timerStop = setTimeout(()=>this.timer(),1000)
},
close(){
this.$emit('cancel');
}
}
}
</script>
<style lang="scss" scoped>
.pay{
text-align: center;
&--code{
width: 160px;
height: 160px;
margin: 15px auto 20px;
}
&--timer{
color: #999;
display: block;
margin-bottom: 15px;
}
&--tips, &--timer{
font-size: 14px;
}
&--finish{
color: #FF512B;
cursor: pointer;
}
}
.money{
color: #FF512B;
font-weight: bold;
}
/deep/{
.el-dialog{
border-radius: 4px;
}
.el-dialog__header{
padding: 30px 0 15px;
}
.el-dialog__title{
font-size: 20px;
font-weight: bold;
}
.el-dialog__body{
padding-top: 0;
padding-bottom: 50px;
}
.el-dialog__headerbtn{
top: 32px;
right: 30px;
}
}
</style>