|
@@ -1,9 +1,11 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="content" v-if="isShow" @click.stop="isShow=false">
|
|
|
|
|
- <canvas @click.stop="" :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="my-canvas"></canvas>
|
|
|
|
|
|
|
+<view class="createCode" v-if="isShow" @click.stop="isShow=false">
|
|
|
|
|
+ <view class="content">
|
|
|
|
|
+ <canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="my-canvas"></canvas>
|
|
|
<view class="save-btn" @click.stop="saveImage" v-if="!isLoading">保存图片</view>
|
|
<view class="save-btn" @click.stop="saveImage" v-if="!isLoading">保存图片</view>
|
|
|
- <image id="Image" :src="qrcode" v-show="false"></image>
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <canvas :style="{ width: canvasW * 2 + 'px', height: canvasH * 2 + 'px' }" canvas-id="big-canvas" class="big-canvas"></canvas>
|
|
|
|
|
+</view>
|
|
|
</template>
|
|
</template>
|
|
|
<script>
|
|
<script>
|
|
|
import { post } from "@/request/api.js";
|
|
import { post } from "@/request/api.js";
|
|
@@ -18,7 +20,7 @@ export default {
|
|
|
isLoading: true,
|
|
isLoading: true,
|
|
|
title: "草莓千层蛋糕",
|
|
title: "草莓千层蛋糕",
|
|
|
qrcode: 'https://oss.zhangyubk.com/cmqrcode.jpg',
|
|
qrcode: 'https://oss.zhangyubk.com/cmqrcode.jpg',
|
|
|
- headerImg: "http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/268c896c47298c7c79a8270c36076741e8f15b0fjpg"
|
|
|
|
|
|
|
+ headerImg: "https://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/268c896c47298c7c79a8270c36076741e8f15b0fjpg"
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
@@ -27,10 +29,7 @@ export default {
|
|
|
this.isShow = true
|
|
this.isShow = true
|
|
|
this.title = da.name
|
|
this.title = da.name
|
|
|
this.isLoading = true
|
|
this.isLoading = true
|
|
|
- uni.showLoading({
|
|
|
|
|
- title: '加载中...',
|
|
|
|
|
- mask: true
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ uni.showLoading({ title: '加载中...', mask: true })
|
|
|
this.getQrcode(da.id)
|
|
this.getQrcode(da.id)
|
|
|
},
|
|
},
|
|
|
// 获取商家码
|
|
// 获取商家码
|
|
@@ -45,34 +44,44 @@ export default {
|
|
|
//初始化画布
|
|
//初始化画布
|
|
|
async __init() {
|
|
async __init() {
|
|
|
this.ctx = uni.createCanvasContext('my-canvas', this)
|
|
this.ctx = uni.createCanvasContext('my-canvas', this)
|
|
|
|
|
+ this.bigCtx = uni.createCanvasContext('big-canvas', this)
|
|
|
this.canvasW = uni.upx2px(600);
|
|
this.canvasW = uni.upx2px(600);
|
|
|
this.canvasH = uni.upx2px(820);
|
|
this.canvasH = uni.upx2px(820);
|
|
|
//设置画布背景透明
|
|
//设置画布背景透明
|
|
|
this.ctx.setFillStyle('rgba(255, 255, 255, 0)')
|
|
this.ctx.setFillStyle('rgba(255, 255, 255, 0)')
|
|
|
|
|
+ this.bigCtx.setFillStyle('rgba(255, 255, 255, 0)')
|
|
|
//设置画布大小
|
|
//设置画布大小
|
|
|
this.ctx.fillRect(0, 0, this.canvasW, this.canvasH)
|
|
this.ctx.fillRect(0, 0, this.canvasW, this.canvasH)
|
|
|
|
|
+ this.bigCtx.fillRect(0, 0, this.canvasW * 2, this.canvasH * 2)
|
|
|
//绘制圆角背景
|
|
//绘制圆角背景
|
|
|
this.drawRoundRect(this.ctx, 0, 0, this.canvasW, this.canvasH, uni.upx2px(18), '#FFFFFF')
|
|
this.drawRoundRect(this.ctx, 0, 0, this.canvasW, this.canvasH, uni.upx2px(18), '#FFFFFF')
|
|
|
|
|
+ this.drawRoundRect(this.bigCtx, 0, 0, this.canvasW * 2, this.canvasH * 2, uni.upx2px(36), '#FFFFFF')
|
|
|
//获取标题图片
|
|
//获取标题图片
|
|
|
let headerImg = await this.getImageInfo(this.headerImg)
|
|
let headerImg = await this.getImageInfo(this.headerImg)
|
|
|
- let hW = uni.upx2px(600);
|
|
|
|
|
- let hH = uni.upx2px(820);
|
|
|
|
|
//绘制标题图
|
|
//绘制标题图
|
|
|
- this.drawRoundImg(this.ctx, headerImg.path, ((this.canvasW - hW) / 2), ((this.canvasW - hW) / 2), hW, hH, 8)
|
|
|
|
|
|
|
+ this.drawRoundImg(this.ctx, headerImg.path, 0, 0, this.canvasW, this.canvasH, 8)
|
|
|
|
|
+ this.drawRoundImg(this.bigCtx, headerImg.path, 0, 0, this.canvasW * 2, this.canvasH * 2, 16)
|
|
|
//绘制标题
|
|
//绘制标题
|
|
|
this.ctx.setFontSize(14); //设置标题字体大小
|
|
this.ctx.setFontSize(14); //设置标题字体大小
|
|
|
this.ctx.setFillStyle('#333'); //设置标题文本颜色
|
|
this.ctx.setFillStyle('#333'); //设置标题文本颜色
|
|
|
this.ctx.textAlign = 'center';
|
|
this.ctx.textAlign = 'center';
|
|
|
this.ctx.fillText(this.title, (this.canvasW / 2), (this.canvasH - uni.upx2px(275)))
|
|
this.ctx.fillText(this.title, (this.canvasW / 2), (this.canvasH - uni.upx2px(275)))
|
|
|
|
|
+ this.bigCtx.setFontSize(28); //设置标题字体大小
|
|
|
|
|
+ this.bigCtx.setFillStyle('#333'); //设置标题文本颜色
|
|
|
|
|
+ this.bigCtx.textAlign = 'center';
|
|
|
|
|
+ this.bigCtx.fillText(this.title, this.canvasW, (this.canvasH * 2 - uni.upx2px(275 * 2)))
|
|
|
//小程序码
|
|
//小程序码
|
|
|
|
|
+ let qrH = uni.upx2px(316);
|
|
|
let qrcodeImg = await this.getImageInfo(this.qrcode)
|
|
let qrcodeImg = await this.getImageInfo(this.qrcode)
|
|
|
- this.ctx.drawImage(qrcodeImg.path, (this.canvasW / 2) - uni.upx2px(158), uni.upx2px(190), uni.upx2px(316), uni.upx2px(316))
|
|
|
|
|
|
|
+ this.ctx.drawImage(qrcodeImg.path, ((this.canvasW - qrH) / 2), uni.upx2px(190), qrH, qrH)
|
|
|
|
|
+ this.bigCtx.drawImage(qrcodeImg.path, this.canvasW - qrH, uni.upx2px(190 * 2), qrH * 2, qrH * 2)
|
|
|
//延迟渲染
|
|
//延迟渲染
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
this.ctx.draw(true, () => {
|
|
this.ctx.draw(true, () => {
|
|
|
this.isLoading = false
|
|
this.isLoading = false
|
|
|
uni.hideLoading()
|
|
uni.hideLoading()
|
|
|
})
|
|
})
|
|
|
|
|
+ this.bigCtx.draw(true, () => {})
|
|
|
}, 500)
|
|
}, 500)
|
|
|
},
|
|
},
|
|
|
//带圆角图片
|
|
//带圆角图片
|
|
@@ -147,7 +156,7 @@ export default {
|
|
|
runSave(){
|
|
runSave(){
|
|
|
var that = this
|
|
var that = this
|
|
|
uni.canvasToTempFilePath({
|
|
uni.canvasToTempFilePath({
|
|
|
- canvasId: 'my-canvas',
|
|
|
|
|
|
|
+ canvasId: 'big-canvas',
|
|
|
quality: 1,
|
|
quality: 1,
|
|
|
complete: (res) => {
|
|
complete: (res) => {
|
|
|
console.log('保存到相册', res);
|
|
console.log('保存到相册', res);
|
|
@@ -171,17 +180,23 @@ export default {
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
-.content {
|
|
|
|
|
|
|
+.createCode{
|
|
|
position: fixed;
|
|
position: fixed;
|
|
|
top: 0;
|
|
top: 0;
|
|
|
left: 0;
|
|
left: 0;
|
|
|
- right: 0;
|
|
|
|
|
- bottom: 0;
|
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+}
|
|
|
|
|
+.content {
|
|
|
background: rgba(0, 0, 0, .4);
|
|
background: rgba(0, 0, 0, .4);
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
+ z-index: 100;
|
|
|
|
|
+ padding: 100rpx 0;
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
|
|
|
.save-btn {
|
|
.save-btn {
|
|
|
margin-top: 35rpx;
|
|
margin-top: 35rpx;
|
|
@@ -191,4 +206,8 @@ export default {
|
|
|
border-radius: 50rpx;
|
|
border-radius: 50rpx;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+.big-canvas{
|
|
|
|
|
+ opacity: 0;
|
|
|
|
|
+ z-index: 0;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|