143 lines
3.0 KiB
Vue
143 lines
3.0 KiB
Vue
<template>
|
|
<view class="page-wrapper">
|
|
<view class="content">
|
|
<view class="title">门店收款码</view>
|
|
<view ref="qrcode" class="qrcode">
|
|
<up-qrcode :size="vdata.size" @result="result" val="uview-plus"></up-qrcode>
|
|
</view>
|
|
<view class="bom">
|
|
<view @click="download">下载收款码</view>
|
|
<view>下载收款码样式</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, onMounted } from 'vue';
|
|
import { onShow } from '@dcloudio/uni-app';
|
|
import ak from '@/commons/utils/ak.js';
|
|
import { getShopList } from '@/http/yskApi/shop.js'
|
|
|
|
const vdata = reactive({
|
|
size: 0,
|
|
qrcodeUrl: null,
|
|
});
|
|
|
|
onShow(() => {
|
|
// getshopList()
|
|
|
|
})
|
|
onMounted(() => {
|
|
// getshopList()
|
|
let query = uni.createSelectorQuery().in(this);
|
|
query.select('.qrcode').boundingClientRect(data => {
|
|
if (data) {
|
|
vdata.size = data.width
|
|
}
|
|
}).exec();
|
|
})
|
|
|
|
|
|
let result = (e) => {
|
|
// console.log(e)
|
|
vdata.qrcodeUrl = e;
|
|
}
|
|
|
|
let download = () => {
|
|
// 这里是获取到的图片base64编码
|
|
getUrlBase64(vdata.qrcodeUrl).then(base64 => {
|
|
let elink = document.createElement('a')
|
|
elink.href = base64
|
|
const timedate = Date.parse(new Date())
|
|
elink.download = `创意模板${timedate}.png`
|
|
elink.click()
|
|
})
|
|
}
|
|
|
|
let getUrlBase64 = (url) => {
|
|
return new Promise(resolve => {
|
|
let canvas = document.createElement('canvas')
|
|
let ctx = canvas.getContext('2d')
|
|
let img = new Image()
|
|
img.crossOrigin = 'Anonymous' //允许跨域
|
|
img.src = url
|
|
img.onload = function() {
|
|
canvas.height = 300
|
|
canvas.width = 300
|
|
ctx.drawImage(img, 0, 0, 300, 300)
|
|
let dataURL = canvas.toDataURL('image/png')
|
|
canvas = null
|
|
resolve(dataURL)
|
|
}
|
|
})
|
|
}
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.page-wrapper {
|
|
min-height: calc(100vh - 90rpx);
|
|
padding: 48rpx 52rpx;
|
|
box-sizing: border-box;
|
|
|
|
.content{
|
|
width: 100%;
|
|
background-color: #fff;
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 64rpx 0;
|
|
box-sizing: border-box;
|
|
.title{
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: #333333;
|
|
}
|
|
.qrcode{
|
|
width: 416rpx;
|
|
height: 416rpx;
|
|
margin-top: 50rpx;
|
|
border: 2rpx solid #333;
|
|
padding: 15rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
::v-deep .u-qrcode,::v-deep .u-qrcode__content,::v-deep .u-qrcode__canvas{
|
|
width: 100%!important;
|
|
height: 100%!important;
|
|
|
|
}
|
|
.bom{
|
|
display: flex;
|
|
margin-top: 110rpx;
|
|
view{
|
|
width: 218rpx;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #318AFE;
|
|
border-radius: 8rpx;
|
|
}
|
|
view:nth-child(1){
|
|
color: #318AFE;
|
|
border: 2rpx solid #318AFE;
|
|
margin-right: 80rpx;
|
|
}
|
|
view:nth-child(2){
|
|
color: #7074A0;
|
|
border: 2rpx solid #7074A0;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|