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

191 lines
3.8 KiB

<!--
* @Author: ch
* @Date: 2022-05-08 00:39:50
* @LastEditors: ch
* @LastEditTime: 2022-06-15 16:40:14
* @Description: file content
-->
<template>
<el-dialog title="打开微信扫描付款" width="380px" class="box" center
:visible.sync="myVisible" @open="open" @close="close" :modal="false">
<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>
.box{
background: rgba(0,0,0, .5);
}
.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>