小程序码上增加店铺logo

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<T> {
   /**
    * 如果数组中没有要放入的对象，则将对象放入数组

src/utils/storage.ts

@@ -18,3 +18,8 @@ export default {
     vue.prototype.$local = local
   }
 }
+/**
+ * 最后编辑的店铺
+ * @type {string}
+ */
+export const LAST_SHOP = 'last_edit_shop'

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)"
                     >
                 </el-image>
                 <span
                     v-if="vdata.type === 1 && !noShop"
-                    @click="showPreview(vdata, game._id)"
+                    @click="showPreview(vdata, game._id, vdata.image)"
                 >
                  查看小程序码
                 </span>
@@ -105,12 +105,10 @@
         <el-image
             style="width: 100%;"
             :src="qrUrl"
-            :preview-src-list="[qrUrl]"
+            v-show="false"
         >
-          <div slot="placeholder" class="image-slot">
-            加载中<span class="dot">...</span>
-          </div>
         </el-image>
+        <canvas id="qr_canvas" width="430" height="430"></canvas>
       </el-col>
       <el-col :span="12">
         <el-form
@@ -132,6 +130,13 @@
           >
             生成
           </el-button>
+          <el-button
+              type="success"
+              @click="exportCanvasAsPNG"
+              :loading="refreshing"
+          >
+            下载
+          </el-button>
         </el-form-item>
         </el-form>
         <label class="history_list">历史记录</label>
@@ -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)
+  }
 }
 </script>
 <style lang="scss">

src/views/mail/list.vue

@@ -151,6 +151,7 @@ import { getAllCategory, getAllTags } from '@/api/question'
 import { UserModule } from '@/store/modules/user'
 import { EVENT_ACTIVITY_UPDATE, EVENT_SHOP_UPDATE, EventBus } from '@/utils/event-bus'
 import { deleteMail, getMails, IMailData } from '@/api/mail'
+import { LAST_SHOP } from '@/utils/storage'
 
 @Component({
   name: 'MailList',
@@ -210,6 +211,10 @@ export default class extends Vue {
       EventBus.$on(EVENT_SHOP_UPDATE, () => {
         this.getRemoteDeptList()
       })
+      if (this.$local.get(LAST_SHOP)) {
+        this.filterForm.sender = this.$local.get(LAST_SHOP).id
+        this.listQuery.sender = this.$local.get(LAST_SHOP).id
+      }
     } else {
       this.filterForm.sender = UserModule.department
       this.listQuery.sender = UserModule.department