shop-pc/components/BsPay.vue

<!--
 * @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>