160 lines
2.9 KiB
Vue
160 lines
2.9 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="header">
|
||
<text class="t"></text>
|
||
</view>
|
||
<view class="code-wrap">
|
||
<view class="num-wrap">
|
||
<text class="t">账户余额：</text>
|
||
<text class="num">{{shopInfo.amount || '0'}}</text>
|
||
</view>
|
||
<view class="line-code">
|
||
<tki-barcode ref="tkiBarcode" show :opations="tkiOptions"></tki-barcode>
|
||
</view>
|
||
<view class="ewm-wrap">
|
||
<tki-qrcode ref="tkiQrcode" show :size="qrcodeSize"></tki-qrcode>
|
||
<!-- <uqrcode ref="uqrcode" canvas-id="qrcode" :value="createcardNo"></uqrcode> -->
|
||
</view>
|
||
<view class="name">
|
||
<text>使用门店：{{shopInfo.shopName || '--'}}</text>
|
||
</view>
|
||
<view class="line"></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import tkiBarcode from '@/components/tki-barcode/tki-barcode.vue';
|
||
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
|
||
export default {
|
||
components: {
|
||
tkiBarcode,
|
||
tkiQrcode,
|
||
},
|
||
data() {
|
||
return {
|
||
tkiOptions: {
|
||
height: 210,
|
||
fontSize: 28,
|
||
textMargin: 14
|
||
},
|
||
qrcodeSize: 400,
|
||
createcardNo: '',
|
||
shopInfo: null
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
this.shopInfo = JSON.parse(e.shopInfo)
|
||
},
|
||
mounted() {
|
||
this.logincreateCardNo();
|
||
},
|
||
methods: {
|
||
async logincreateCardNo() {
|
||
let res = await this.api.logincreateCardNo({
|
||
"shopId": this.shopInfo.shopId
|
||
})
|
||
console.log(res)
|
||
if (res.code == 0) {
|
||
this.createcardNo = res.data;
|
||
this.$refs.tkiBarcode.setval(this.createcardNo) //操作属性
|
||
this.$refs.tkiQrcode.setval(this.createcardNo) //操作属性
|
||
}
|
||
}
|
||
}
|
||
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #eb6c37;
|
||
}
|
||
</style>
|
||
<style scoped lang="scss">
|
||
.container {
|
||
padding: 40upx;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
padding-bottom: 40upx;
|
||
|
||
.t {
|
||
color: #fff;
|
||
font-size: 32upx;
|
||
padding-bottom: 20upx;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: '';
|
||
width: 100%;
|
||
border-bottom: 1upx solid #fff;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.code-wrap {
|
||
background-color: #fff;
|
||
border-radius: 20upx;
|
||
padding: 40upx;
|
||
position: relative;
|
||
$radiusSize: 40upx;
|
||
|
||
&::before,
|
||
&::after {
|
||
content: '';
|
||
width: $radiusSize;
|
||
height: $radiusSize;
|
||
background-color: #eb6c37;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 42%;
|
||
z-index: 2;
|
||
}
|
||
|
||
&::before {
|
||
left: $radiusSize / 2 * -1;
|
||
}
|
||
|
||
&::after {
|
||
right: $radiusSize / 2 * -1;
|
||
}
|
||
|
||
.num-wrap {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
|
||
.num {
|
||
font-size: 42upx;
|
||
position: relative;
|
||
top: 8upx;
|
||
}
|
||
}
|
||
|
||
.line-code {
|
||
padding: 40upx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.ewm-wrap {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 40upx 0;
|
||
}
|
||
|
||
.line {
|
||
width: 100%;
|
||
border-bottom: 1px dashed #ececec;
|
||
position: absolute;
|
||
top: calc(42% + 20upx);
|
||
left: 0;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
</style> |