|
|
|
@ -2,16 +2,19 @@ |
|
|
|
<view class="placard"> |
|
|
|
<view class="placard-content"> |
|
|
|
<view class="img-box" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"> |
|
|
|
<img v-show="tempFilePath" :style="{ width: canvasW + 'px', height: canvasH + 'px' }" :src="tempFilePath" alt="" /> |
|
|
|
<img v-show="tempFilePath" :style="{ width: canvasW + 'px', height: canvasH + 'px' }" |
|
|
|
:src="tempFilePath" alt="" /> |
|
|
|
</view> |
|
|
|
|
|
|
|
<div class="qrcode" style="display: none;"> |
|
|
|
<vue-qrcode :value="qrCodeValue" :width="qrCodeSize" |
|
|
|
:color="{ dark: qrCodeDarkColor, light: qrCodeLightColor }" :margin="margin" |
|
|
|
type="image/png"></vue-qrcode> |
|
|
|
</div> |
|
|
|
<canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" |
|
|
|
canvas-id="myCanvas" id="myCanvas"></canvas> |
|
|
|
|
|
|
|
|
|
|
|
<canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="myCanvas" |
|
|
|
id="myCanvas"></canvas> |
|
|
|
|
|
|
|
<view class="add-btn"> |
|
|
|
<view class="btn"> |
|
|
|
长按图片保存到手机 |
|
|
|
@ -26,7 +29,9 @@ |
|
|
|
import VueQrcode from 'vue-qrcode' |
|
|
|
export default { |
|
|
|
name: 'Placard', |
|
|
|
components : { VueQrcode }, |
|
|
|
components: { |
|
|
|
VueQrcode |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
qrCodeValue: '', |
|
|
|
@ -50,18 +55,16 @@ |
|
|
|
_center: 0 |
|
|
|
} |
|
|
|
}, |
|
|
|
created(){ |
|
|
|
console.log(this.configList); |
|
|
|
console.log(this.configList.user_url); |
|
|
|
created() { |
|
|
|
this.qrCodeValue = `${this.configList.user_url}?vid=${this.userInfo.id}` |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
async draw() { //绘制海报 |
|
|
|
|
|
|
|
|
|
|
|
uni.showLoading({ |
|
|
|
title: '拼命绘画中...' |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
let self = this |
|
|
|
//获取设备信息 |
|
|
|
self.systemInfo = await self.getSystemInfo(); |
|
|
|
@ -72,86 +75,81 @@ |
|
|
|
self.canvasW = 542 * rpx |
|
|
|
self.canvasH = 731 * rpx |
|
|
|
|
|
|
|
//海报背景 |
|
|
|
let bg = new Image(); |
|
|
|
bg.src = this.configList.qr_code_image |
|
|
|
// bg.src = this.configList.user_url + '/static/placard/placard-bg.png' |
|
|
|
//logo |
|
|
|
let logo = new Image(); |
|
|
|
logo.src = this.configList.logo_image |
|
|
|
// logo.src = import.meta.env.VITE_REDIRECT_URI + '/static/placard/logo.png' |
|
|
|
|
|
|
|
console.log(this.configList.logo_image); |
|
|
|
|
|
|
|
bg.onload = () => { |
|
|
|
logo.onload = () => { //确保背景和logo加载完成(不然海报可能会少logo) |
|
|
|
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
let ctx = document.querySelector('canvas').getContext('2d') |
|
|
|
let img = document.querySelector('.qrcode img') |
|
|
|
|
|
|
|
let center = self.canvasW / 2; //画布中心位置 |
|
|
|
self._center = center |
|
|
|
|
|
|
|
//绘制图片 |
|
|
|
ctx.drawImage(bg, 0, 0, self.canvasW, self.canvasH) |
|
|
|
ctx.drawImage(img, center - (self.qrCodeSize / 2), 295 * rpx, self.qrCodeSize, self |
|
|
|
.qrCodeSize) |
|
|
|
ctx.drawImage(logo, center - (100 * rpx / 2) , 60 * rpx , 100 * rpx, 100 * rpx) |
|
|
|
|
|
|
|
//绘制文字 |
|
|
|
ctx.font = `bold ${40 * rpx}px 楷体` |
|
|
|
ctx.textAlign = 'center' |
|
|
|
ctx.fillStyle = "#59B495"; |
|
|
|
ctx.fillText('上门服务', center, 200 * rpx, 400) |
|
|
|
|
|
|
|
ctx.fillStyle = "#0A543B"; |
|
|
|
ctx.font = `100 ${25 * rpx}px 楷体` |
|
|
|
ctx.fillText(`一扫疲劳 舒服入眠`, center, 240 * rpx, 400) |
|
|
|
|
|
|
|
ctx.font = `100 ${25 * rpx}px 宋体` |
|
|
|
ctx.fillStyle = "#0A543B"; |
|
|
|
ctx.textAlign = 'center'; |
|
|
|
drawTextVertical(ctx, '微信扫码下单', 130 * rpx, 315 * rpx, self.qrCodeSize); |
|
|
|
|
|
|
|
ctx.textAlign = 'center'; |
|
|
|
drawTextVertical(ctx, '在线选择技师', 400 * rpx, 315 * rpx, self.qrCodeSize); |
|
|
|
|
|
|
|
ctx.font = `100 ${18 * rpx}px 宋体` |
|
|
|
ctx.fillStyle = '#053323' |
|
|
|
ctx.fillText(`长按扫一扫下单可领取`, center, 525 * rpx, 400) |
|
|
|
|
|
|
|
ctx.font = `bold ${43 * rpx}px 宋体` |
|
|
|
ctx.fillStyle = '#EC8D44' |
|
|
|
ctx.fillText(`200元`, center, 580 * rpx, 400) |
|
|
|
|
|
|
|
ctx.font = `100 ${18 * rpx}px 宋体` |
|
|
|
ctx.fillText(`百万明星技师在线接单`, center, 625 * rpx, 400) |
|
|
|
|
|
|
|
//画图形 |
|
|
|
this.paintingCapsule(ctx, center - (90 * rpx / 2), 250 * rpx, 90 * rpx, 25 * rpx, |
|
|
|
13 * rpx, '#59B495', 'time') |
|
|
|
this.paintingCapsule(ctx, center + (130 * rpx / 2), 530 * rpx, 25 * rpx, 70 * rpx, |
|
|
|
13 * rpx, '#BCEED6', 'coupon') |
|
|
|
|
|
|
|
////画海报最后的标签列表 |
|
|
|
this.drawList(ctx, 135 * rpx, 650 * rpx, 60 * rpx, 20 * rpx, 10 * rpx, '#59B495') |
|
|
|
|
|
|
|
uni.canvasToTempFilePath({ |
|
|
|
x: 0, // 起点坐标 |
|
|
|
y: 0, |
|
|
|
width: self.canvasW, // canvas 宽 |
|
|
|
height: self.canvasH, // canvas 高 |
|
|
|
canvasId: 'myCanvas', // canvas id |
|
|
|
success(res) { |
|
|
|
uni.hideLoading() |
|
|
|
self.tempFilePath = res.tempFilePath //相对路径 |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
//加载背景和logo |
|
|
|
const [bg, logo] = await Promise.all([this.loadImage(this.configList.qr_code_image), this.loadImage( |
|
|
|
this |
|
|
|
.configList.logo_image)]); |
|
|
|
|
|
|
|
let ctx = document.querySelector('canvas').getContext('2d') |
|
|
|
let img = document.querySelector('.qrcode img') |
|
|
|
|
|
|
|
let center = self.canvasW / 2; //画布中心位置 |
|
|
|
self._center = center |
|
|
|
|
|
|
|
//绘制图片 |
|
|
|
ctx.drawImage(bg, 0, 0, self.canvasW, self.canvasH) |
|
|
|
ctx.drawImage(img, center - (self.qrCodeSize / 2), 295 * rpx, self |
|
|
|
.qrCodeSize, self |
|
|
|
.qrCodeSize) |
|
|
|
ctx.drawImage(logo, center - (100 * rpx / 2), 60 * rpx, 100 * rpx, 100 * |
|
|
|
rpx) |
|
|
|
|
|
|
|
//绘制文字 |
|
|
|
ctx.font = `bold ${40 * rpx}px 楷体` |
|
|
|
ctx.textAlign = 'center' |
|
|
|
ctx.fillStyle = "#59B495"; |
|
|
|
ctx.fillText('上门服务', center, 200 * rpx, 400) |
|
|
|
|
|
|
|
ctx.fillStyle = "#0A543B"; |
|
|
|
ctx.font = `100 ${25 * rpx}px 楷体` |
|
|
|
ctx.fillText(`一扫疲劳 舒服入眠`, center, 240 * rpx, 400) |
|
|
|
|
|
|
|
ctx.font = `100 ${25 * rpx}px 宋体` |
|
|
|
ctx.fillStyle = "#0A543B"; |
|
|
|
ctx.textAlign = 'center'; |
|
|
|
drawTextVertical(ctx, '微信扫码下单', 130 * rpx, 315 * rpx, self.qrCodeSize); |
|
|
|
|
|
|
|
ctx.textAlign = 'center'; |
|
|
|
drawTextVertical(ctx, '在线选择技师', 400 * rpx, 315 * rpx, self.qrCodeSize); |
|
|
|
|
|
|
|
ctx.font = `100 ${18 * rpx}px 宋体` |
|
|
|
ctx.fillStyle = '#053323' |
|
|
|
ctx.fillText(`长按扫一扫下单可领取`, center, 525 * rpx, 400) |
|
|
|
|
|
|
|
ctx.font = `bold ${43 * rpx}px 宋体` |
|
|
|
ctx.fillStyle = '#EC8D44' |
|
|
|
ctx.fillText(`200元`, center, 580 * rpx, 400) |
|
|
|
|
|
|
|
ctx.font = `100 ${18 * rpx}px 宋体` |
|
|
|
ctx.fillText(`百万明星技师在线接单`, center, 625 * rpx, 400) |
|
|
|
|
|
|
|
//画图形 |
|
|
|
this.paintingCapsule(ctx, center - (90 * rpx / 2), 250 * rpx, 90 * rpx, |
|
|
|
25 * rpx, |
|
|
|
13 * rpx, '#59B495', 'time') |
|
|
|
this.paintingCapsule(ctx, center + (130 * rpx / 2), 530 * rpx, 25 * rpx, |
|
|
|
70 * rpx, |
|
|
|
13 * rpx, '#BCEED6', 'coupon') |
|
|
|
|
|
|
|
////画海报最后的标签列表 |
|
|
|
this.drawList(ctx, 135 * rpx, 650 * rpx, 60 * rpx, 20 * rpx, 10 * rpx, |
|
|
|
'#59B495') |
|
|
|
|
|
|
|
uni.canvasToTempFilePath({ |
|
|
|
x: 0, // 起点坐标 |
|
|
|
y: 0, |
|
|
|
width: self.canvasW, // canvas 宽 |
|
|
|
height: self.canvasH, // canvas 高 |
|
|
|
canvasId: 'myCanvas', // canvas id |
|
|
|
success(res) { |
|
|
|
uni.hideLoading() |
|
|
|
self.tempFilePath = res.tempFilePath //相对路径 |
|
|
|
}, |
|
|
|
fail(error) { |
|
|
|
uni.hideLoading() |
|
|
|
console.error(error) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 获取设备信息 |
|
|
|
getSystemInfo() { |
|
|
|
@ -221,21 +219,31 @@ |
|
|
|
ctx.closePath(); |
|
|
|
// 绘制边框 |
|
|
|
ctx.stroke(); |
|
|
|
|
|
|
|
|
|
|
|
//圆点 |
|
|
|
ctx.beginPath(); |
|
|
|
ctx.fillStyle = color; |
|
|
|
ctx.arc(currentTagInfo.x + (10 * this._rpx), y + (10 * this._rpx), 2, 0,360) |
|
|
|
ctx.arc(currentTagInfo.x + (10 * this._rpx), y + (10 * this._rpx), 2, 0, 360) |
|
|
|
ctx.fill() |
|
|
|
|
|
|
|
|
|
|
|
//绘制文本 |
|
|
|
ctx.font = `100 ${13 * this._rpx}px 楷体` |
|
|
|
ctx.fillText(item, currentTagInfo.x + (33 * this._rpx), y + (15 * this._rpx), 400) |
|
|
|
|
|
|
|
let next = currentTagInfo.x + width + offset; //下一个标签的位置 |
|
|
|
currentTagInfo = { x : next } |
|
|
|
|
|
|
|
let next = currentTagInfo.x + width + offset; //下一个标签的位置 |
|
|
|
currentTagInfo = { |
|
|
|
x: next |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
loadImage(src) { |
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
const img = new Image(); |
|
|
|
img.src = src; |
|
|
|
img.onload = () => resolve(img); |
|
|
|
img.onerror = (error) => reject(error); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -246,19 +254,19 @@ |
|
|
|
min-height: 100vh; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
.placard-content{ |
|
|
|
|
|
|
|
.placard-content { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
|
|
.add-btn { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 100rpx; |
|
|
|
width: 750rpx; |
|
|
|
|
|
|
|
|
|
|
|
.btn { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@ -274,8 +282,8 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
canvas{ |
|
|
|
|
|
|
|
canvas { |
|
|
|
opacity: 1; |
|
|
|
position: fixed; |
|
|
|
top: 100%; |
|
|
|
|
longjieli
1 month ago
