99 lines
2.3 KiB
Vue
99 lines
2.3 KiB
Vue
<template>
|
||
<div class="paymentl-header">
|
||
<div :class="!codeTpe.switch ? '' : 'code-title'" class="paymentl-header-title"> {{codeTpe.imgType?'支付成功':'支付失败'}} </div>
|
||
<img v-if="!codeTpe.switch" class="paymentl-header-img" :src="codeTpe.imgType? cg :sb " alt="">
|
||
<div v-else class="paymentl-vue-qr">
|
||
<vue-qr v-if="codeTpe.codeValue" :text="codeTpe.codeValue"></vue-qr>
|
||
<div class="paymentl-vue-qr-tip">
|
||
<van-count-down style="color:#999999" format="mm:ss" :time="countTimer" />
|
||
提示：该二维码每隔3分钟自动刷新一次
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import vueQr from 'vue-qr'
|
||
|
||
export default {
|
||
props: {
|
||
countTimer:{
|
||
type:Number,
|
||
default:0
|
||
},
|
||
codeTpe: {
|
||
type: Object,
|
||
default: () => {
|
||
return {
|
||
switch: false,
|
||
codeValue: '',
|
||
imgType:true
|
||
}
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
vueQr,
|
||
},
|
||
data() {
|
||
return {
|
||
cg:require('../../../assets/zfcg.png'),
|
||
sb:require('../../../assets/zfsb.png'),
|
||
type: 0
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
<style>
|
||
.paymentl-vue-qr img {
|
||
width: 324px;
|
||
height: 324px;
|
||
border-radius: 0px 0px 0px 0px;
|
||
opacity: 1;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
.paymentl-vue-qr-tip {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.paymentl-vue-qr {
|
||
width: 690px;
|
||
height: 544px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 3px 10px 1px rgba(221, 221, 221, 0.5020);
|
||
border-radius: 10px 10px 10px 10px;
|
||
opacity: 1;
|
||
margin: 0 auto;
|
||
background-image: url('@/assets/codebg.png');
|
||
background-size: 100% 428px;
|
||
background-repeat: no-repeat;
|
||
position: relative;
|
||
margin-top: -25px;
|
||
}
|
||
|
||
.paymentl-header {}
|
||
|
||
.paymentl-header-img {
|
||
width: 515px;
|
||
height: 245px;
|
||
}
|
||
|
||
.code-title {
|
||
background-color: #ff6700;
|
||
color: #FFFFFF !important;
|
||
}
|
||
|
||
.paymentl-header-title {
|
||
font-size: 42px;
|
||
font-family: PingFang SC-粗体, PingFang SC;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
margin: 0px auto;
|
||
padding: 50px 0;
|
||
|
||
}
|
||
</style> |