185 lines
3.5 KiB
Vue
185 lines
3.5 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">{{formInfo.shopInfo.amount || '0'}}</text>
|
||
</view>
|
||
<view class="line-code">
|
||
<canvas id="barcodeCanvas" style="width: 300px; height: 100px;"></canvas>
|
||
</view>
|
||
<view class="ewm-wrap">
|
||
<!-- <tki-qrcode show :size="qrcodeSize"></tki-qrcode> -->
|
||
<up-qrcode size="200" :val="formInfo.url" background="#fff" foreground="#000"></up-qrcode>
|
||
</view>
|
||
<view class="name">
|
||
<text>使用门店：{{formInfo.shopInfo.shopName || '--'}}</text>
|
||
</view>
|
||
<view class="line"></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
onMounted,
|
||
reactive,
|
||
watch,
|
||
nextTick
|
||
} from 'vue';
|
||
|
||
import JsBarcode from "jsbarcode";
|
||
|
||
import {
|
||
APIshopUsercode
|
||
} from '@/common/api/member.js'
|
||
|
||
|
||
const formInfo = reactive({
|
||
shopInfo: '',
|
||
url: '',
|
||
shopId: ''
|
||
})
|
||
|
||
onMounted(async () => {
|
||
// 获取当前页面栈
|
||
const pages = getCurrentPages();
|
||
// 获取当前页面实例
|
||
const currentPage = pages[pages.length - 1];
|
||
// 获取页面参数
|
||
const pageParams = currentPage.options;
|
||
formInfo.shopInfo = JSON.parse(decodeURIComponent(pageParams.shopInfo))
|
||
formInfo.shopId = pageParams.shopId
|
||
let res = await APIshopUsercode({
|
||
shopId: pageParams.shopId
|
||
})
|
||
console.log(formInfo.shopInfo)
|
||
if (res) {
|
||
formInfo.url = res;
|
||
try {
|
||
nextTick(() => {
|
||
const query = uni.createSelectorQuery();
|
||
query.select('#barcodeCanvas')
|
||
.fields({
|
||
node: true,
|
||
size: true
|
||
})
|
||
.exec((res) => {
|
||
if (res[0]) {
|
||
const canvas = res[0].node;
|
||
const ctx = canvas.getContext('2d');
|
||
const dpr = uni.getSystemInfoSync().pixelRatio;
|
||
canvas.width = res[0].width * dpr;
|
||
canvas.height = res[0].height * dpr;
|
||
ctx.scale(dpr, dpr);
|
||
|
||
JsBarcode(canvas, formInfo.url, {
|
||
width: 2,
|
||
height: 100,
|
||
displayValue: true,
|
||
fontOptions: 'bold',
|
||
font: 'monospace',
|
||
textAlign: 'center',
|
||
textPosition: 'bottom',
|
||
textMargin: 2,
|
||
fontSize: 20,
|
||
background: '#ffffff',
|
||
lineColor: '#000000'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
} catch (error) {
|
||
//TODO handle the exception
|
||
}
|
||
}
|
||
})
|
||
</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;
|
||
|
||
&::before,
|
||
&::after {
|
||
content: '';
|
||
background-color: #eb6c37;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 42%;
|
||
z-index: 2;
|
||
}
|
||
|
||
&::before {}
|
||
|
||
&::after {}
|
||
|
||
.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> |