<template>
|
<view>
|
<view class="top-card">
|
<view class="u-flex">
|
<view v-if="cardInfo.type === 0" class="">
|
<view class="u-font-26">我的余额</view>
|
<view>
|
<text style="font-size: 64rpx;font-weight: bold">{{cardInfo.amount}}</text>
|
<text class="u-font-26 u-m-l-6">元</text>
|
</view>
|
</view>
|
<view v-if="cardInfo.type === 1" class="">
|
<view class="u-font-26">剩余次数</view>
|
<view>
|
<text style="font-size: 64rpx;font-weight: bold">{{cardInfo.times}}</text>
|
<text class="u-font-26 u-m-l-6">次</text>
|
</view>
|
</view>
|
<view class="u-flex-1"></view>
|
<navigator :url="`/pages/pay/recharge?cardInfo=${encodeURIComponent(JSON.stringify(cardInfo))}`">
|
<u-button size="mini" type="warning">去充值</u-button>
|
</navigator>
|
</view>
|
</view>
|
|
<view class="shop-name">{{cardInfo.name}}</view>
|
<view v-if="codeContentStr" class="ewmBox">
|
<tki-qrcode @result="result" class="ewm" cid="qrcode1" ref="qrcode" :val="codeContentStr" :size="430" unit="upx" onval :loadMake="false" usingComponents />
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
|
export default {
|
components: {tkiQrcode},
|
data() {
|
return {
|
codeContentStr: '{"type":1,"name":"","amount":0,"score":0,"times":12}',
|
cardInfo: {
|
type: '',
|
name: '',
|
amount: 0,
|
score: 0,
|
times: 0
|
},
|
};
|
},
|
onLoad(opt) {
|
this.cardInfo = JSON.parse(decodeURIComponent(opt.cardInfo))
|
this.codeContentStr = opt.cardInfo
|
},
|
onReady() {
|
this.$nextTick(() => {
|
this.$refs.qrcode._makeCode()
|
})
|
},
|
methods: {
|
result(e){
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.top-card {
|
padding: 24rpx;
|
background-color: #e93b3d;
|
color: #fff;
|
}
|
|
.shop-name{
|
margin-top: 60rpx;
|
text-align: center;
|
}
|
.ewmBox {
|
position: relative;
|
margin: 60rpx auto 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.ewm {
|
width: 430rpx;
|
height: 430rpx;
|
}
|
</style>
|
