shop-pc/components/BsPay.vue

<!--
 * @Author: ch
 * @Date: 2022-05-08 00:39:50
 * @LastEditors: ch
 * @LastEditTime: 2022-05-10 11:31:50
 * @Description: file content
-->
<template>
	<el-dialog title="打开微信扫描付款" width="380px" class="box" center
		 :visible.sync="myVisible" @open="getCodeImg" @close="close">
		<div class="pay">
			<span class="pay--timer">{{timer}}</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" @click="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 : ''
		},
		timer : {
			type : String,
			default : '',
		},
		money : {
			type : String | Number,
			default : 0
		}
	},
	data(){
		return {
			imgUrl : '',
			timerTxt : '',
		}
	},
	computed:{
		myVisible : {
			get(){
				return this.visible;
			},
			set(val){
				this.$emit('update:visible', val)
			}
		}
	},
	methods : {
		async getCodeImg(){
			const {error, result} = await ApiPostPayCdoeImg({orderId : this.orderId});
			if(error){
				return false;
			}
			this.imgUrl = result.dataInfo.codeImgData;
		},
		close(){
			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;
	}
	&--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>