shop-pc/components/BsPay.vue

<!--
 * @Author: ch
 * @Date: 2022-05-08 00:39:50
 * @LastEditors: ch
 * @LastEditTime: 2022-06-15 16:01:10
 * @Description: file content
-->
<template>
	<el-dialog title="打开微信扫描付款" width="380px" class="box" center
		 :visible.sync="myVisible" @open="open" @close="close">
		<div class="pay">
			<span class="pay--timer">{{timerTxt}}</span>
			<UiMoney class="money" sufSize="14px" preSize="14px" size="20px" 
				float suffix prefix :money="orderInfo.payAmount"/>
			<div class="pay--code">
				<img :src="imgUrl" v-if="imgUrl"/>
				<!-- <p v-if="!timer">已超时，请重新下单</p> -->
			</div>
			<p class="pay--tips">如支付后没有自动跳转，请点击 <span class="pay--finish" @click="finish">完成付款</span></p>
		</div>
	</el-dialog>
</template>
<script>
import {ApiPostPayCdoeImg} from '@/plugins/api/wx'
import {ApiGetOrderDetail} from '@/plugins/api/order'
import UiMoney from './UiMoney.vue';
import QRcode from 'qrcode';

export default {
	components: { UiMoney },
	props : {
		visible : {
			type : Boolean,
			default : false
		},
		orderId : {
			type : Number | String,
			default : ''
		}
	},
	data(){
		return {
			orderInfo: {},
			imgUrl : '',
			timerTxt : '',
			startSecondNum : 0,
			timerStop : null,
		}
	},
	computed:{
		myVisible : {
			get(){
				return this.visible;
			},
			set(val){
				this.$emit('update:visible', val)
			}
		}
	},
	methods : {
		open(){
			this.getOrderInfo();
			this.getCodeImg();
		},
		/**
		 * 获取订单最新信息
		 */
		async getOrderInfo(){
			const {error, result} = await ApiGetOrderDetail(this.orderId);
			if(error){
				this.$message.warning(error.message);
				return false;
			}
			this.orderInfo = result;
			if(this.orderInfo.orderStatus === 1){
				// 待支付 开始倒计时
				if(this.timerStop){
					clearInterval(this.timerStop);
				}
				this.calcTimerStartSecondNum();
				this.timer();

			}
		},
		async getCodeImg(){
			const {error, result} = await ApiPostPayCdoeImg({orderId : this.orderId});
			if(error){
				return false;
			}
			QRcode.toDataURL(result.payDataInfo.codeUrlData,{
				width : 200
			}, (err, url)=>{
				this.imgUrl = url;
			})
			
		},

		/**
		 * 计算倒计时开始秒数
		 */
		calcTimerStartSecondNum(){
			let expireTime = (new Date(this.orderInfo.expireTime.replace(/-/g,'/'))).getTime(),
				curTime = (new Date(this.orderInfo.serverTime.replace(/-/g,'/'))).getTime(),
				second = Math.floor((expireTime - curTime) / 1000);
			this.startSecondNum = second > 0 ? second : 0;
			this.timerStop = setInterval(()=> {
				this.timer()
			},1000)
		},
		/**
		 * 待付款的倒计时
		 */
		timer(){
			if(this.startSecondNum == 0){
				this.close();
				return;
			}
			this.startSecondNum--;
			let minute = parseInt(this.startSecondNum / 60);
			let second = parseInt(this.startSecondNum % 60);
			this.timerTxt = `剩余${minute > 0 ? `${minute}分` : ''} ${second}秒`;
		},
		close(){
			clearInterval(this.timerStop);
			this.timerStop = null;
			this.$emit('cancel');
		},
		finish(){
			this.myVisible = false;
			this.$emit('finish')
		}
	}
}
</script>
<style lang="scss" scoped>
.pay{
	text-align: center;
	&--code{
		width: 160px;
		height: 160px;
		margin: 15px auto 20px;
		position: relative;
		overflow: hidden;
		img{
			width: 200px;
			position: absolute;
			left: -20px;
			top: -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>