From 3318afed0d1e7b9ccbf719e99fe402997c5d76c8 Mon Sep 17 00:00:00 2001 From: zhl Date: Thu, 10 Jun 2021 11:24:04 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=E7=A0=81=E4=B8=8A?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=BA=97=E9=93=BAlogo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/Extend.ts | 24 ++++++++ src/utils/storage.ts | 5 ++ src/views/game/game_setting.vue | 106 +++++++++++++++++++++++++++++--- src/views/mail/list.vue | 5 ++ 4 files changed, 133 insertions(+), 7 deletions(-) diff --git a/src/utils/Extend.ts b/src/utils/Extend.ts index d2bd9e7..fc5e9b2 100644 --- a/src/utils/Extend.ts +++ b/src/utils/Extend.ts @@ -15,6 +15,30 @@ Object.defineProperties(Date.prototype, { writable: true } }) +interface CanvasRenderingContext2D { + roundRect(x: number, y: number, w: number, h: number, r: number):CanvasRenderingContext2D +} +Object.defineProperties(CanvasRenderingContext2D.prototype, { + roundRect: { + value: function(x: number, y: number, w: number, h: number, r: number) { + const minSize = Math.min(w, h) + if (r > minSize / 2) r = minSize / 2 + // 开始绘制 + this.beginPath() + this.moveTo(x + r, y) + this.arcTo(x + w, y, x + w, y + h, r) + this.arcTo(x + w, y + h, x, y + h, r) + this.arcTo(x, y + h, x, y, r) + this.arcTo(x, y, x + w, y, r) + this.strokeStyle = '#FFF' + this.stroke() + this.closePath() + return this + }, + writable: true + } +}) + interface Array { /** * 如果数组中没有要放入的对象，则将对象放入数组 diff --git a/src/utils/storage.ts b/src/utils/storage.ts index 7916324..27f86d4 100644 --- a/src/utils/storage.ts +++ b/src/utils/storage.ts @@ -18,3 +18,8 @@ export default { vue.prototype.$local = local } } +/** + * 最后编辑的店铺 + * @type {string} + */ +export const LAST_SHOP = 'last_edit_shop' diff --git a/src/views/game/game_setting.vue b/src/views/game/game_setting.vue index 64f983c..5aa7578 100644 --- a/src/views/game/game_setting.vue +++ b/src/views/game/game_setting.vue @@ -67,12 +67,12 @@ v-if="!noShop" style="width: 40px; height: 40px" :src="vdata.type === 1 ? 'img/icons/wqr.png' : 'img/icons/preview.png'" - @click="showPreview(vdata, game._id)" + @click="showPreview(vdata, game._id, vdata.image)" > 查看小程序码 @@ -105,12 +105,10 @@ -
- 加载中... -
+ 生成 + + 下载 + @@ -163,6 +168,7 @@ import Sticky from '@/components/Sticky/index.vue' import ElImageViewer from 'element-ui/packages/image/src/image-viewer.vue' import { + getShop, getShopGameInfo, getShopGameQr, getShops, @@ -171,6 +177,7 @@ import { import { UserModule } from '@/store/modules/user' import { EVENT_GAME_UPDATE, EVENT_SHOP_UPDATE, EventBus } from '@/utils/event-bus' import { delay } from '@/utils' +import { LAST_SHOP } from '@/utils/storage' declare module 'vue/types/vue' { interface Vue { @@ -199,6 +206,7 @@ export default class extends Vue { private gameid = '' private versionid = '' private qrUrl = '' + private shopLogo = '' private showViewer = false private dialogVisible = false private qrParam = '' @@ -229,9 +237,15 @@ export default class extends Vue { EventBus.$on(EVENT_SHOP_UPDATE, () => { this.getRemoteDeptList() }) + if (this.$local.get(LAST_SHOP)) { + this.shop = this.$local.get(LAST_SHOP).id + } } else { this.shop = UserModule.department } + if (this.shop) { + // this.getShopInfo(this.shop) + } EventBus.$on(EVENT_GAME_UPDATE, () => { this.getList() }) @@ -248,6 +262,8 @@ export default class extends Vue { private onShopChange() { if (this.shop) { this.getShopGameSetting(this.shop) + this.$local.set(LAST_SHOP, { id: this.shop }) + // this.getShopInfo(this.shop) } } @@ -369,9 +385,10 @@ export default class extends Vue { } } - private showPreview(data: IGameVersion, gameId: string) { + private showPreview(data: IGameVersion, gameId: string, logo: string) { this.preGameId = gameId this.preVersionId = data._id! + this.shopLogo = logo if (data.type === 1 && data.qr) { this.qrUrl = data.qr! // this.showViewer = true @@ -382,6 +399,9 @@ export default class extends Vue { if (historyData) { this.historys = historyData } + setTimeout(() => { + this.doDraw() + }, 500) } else if (data.url) { window.open(data.url, '_blank') } @@ -420,6 +440,7 @@ export default class extends Vue { const img = await this.getGameQr(this.shop, this.preGameId, this.preVersionId, params) await delay(1) this.qrUrl = img + this.doDraw() } catch (err) { this.$message({ message: '生成二维码出错', @@ -441,6 +462,77 @@ export default class extends Vue { this.$local.set(key, this.historys) } } + + private async getShopInfo(shop: string) { + try { + const { data } = await getShop(shop, {}) + this.shopLogo = data.logo + } catch (err) { + console.log('err get shop info', err) + } + } + + private doDraw() { + // 获取canvas + const canvas = document.getElementById('qr_canvas') + if (!canvas) { + return false + } else { + // 可以理解为一个画笔，可画路径、矩形、文字、图像 + const context = canvas.getContext('2d') + context.clearRect(0, 0, 430, 430) + const img = new Image() + img.src = this.qrUrl + img.setAttribute('crossOrigin', 'Anonymous') + // 加载图片 + img.onload = () => { + if (img.complete) { + // 绘制图片 + context.drawImage(img, 0, 0, img.width, img.height) + this.drawLogo(context) + } + } + } + } + + private drawLogo(context: any) { + const img = new Image() + img.src = this.shopLogo + img.setAttribute('crossOrigin', 'Anonymous') + img.onload = function() { + if (img.complete) { + // 创建临时的canvas, 缩放图片 + const canvasTemp = document.createElement('canvas') + const contextTemp = canvasTemp.getContext('2d') + canvasTemp.width = 430 + canvasTemp.height = 430 + contextTemp.drawImage(img, 0, 0, img.width, img.height, 120, 120, 190, 190) + const pattern = context.createPattern(canvasTemp, 'no-repeat') + + context.roundRect(120, 120, 190, 190, 95) + context.fillStyle = pattern + context.fill() + } + } + } + + private exportCanvasAsPNG() { + const fileName = `${this.shop}.png` + const canvasElement = document.getElementById('qr_canvas') + + const MIME_TYPE = 'image/png' + + const imgURL = canvasElement.toDataURL(MIME_TYPE) + + const dlLink = document.createElement('a') + dlLink.download = fileName + dlLink.href = imgURL + dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':') + + document.body.appendChild(dlLink) + dlLink.click() + document.body.removeChild(dlLink) + } }