增加生成小程序码的一些选项

dist/css/chunk-5bb6b064.354c99b1.css

@@ -1 +0,0 @@
-.el-image-viewer__wrapper{z-index:3000!important}[data-v-0c3bb980]:export{menuBg:#304156;menuText:#bfcbd9;menuActiveText:#409eff}.bottom[data-v-0c3bb980]{margin-top:13px;line-height:12px;display:flex;justify-content:space-between;align-items:center}.bottom span[data-v-0c3bb980]{font-size:13px;color:#999}.sub-bottom[data-v-0c3bb980]{display:flex;justify-content:space-between}.button[data-v-0c3bb980]{padding:0;min-height:auto;float:right}.image[data-v-0c3bb980]{width:100%;display:block}.one-block[data-v-0c3bb980]{border:1px solid #ebebeb;border-radius:3px;transition:.2s;padding:24px;margin-bottom:24px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.infinite-list .infinite-list-item[data-v-0c3bb980]{display:flex;align-items:center;justify-content:space-between;height:30px;background:#e8f3fe;margin:10px;color:#7dbcfc}.infinite-list[data-v-0c3bb980]{height:300px;-webkit-padding-start:0;padding-inline-start:0}.history_content[data-v-0c3bb980]{width:80%;line-height:30px;padding:0 10px}

dist/css/chunk-5ed1d208.def0b598.css

@@ -0,0 +1 @@
+.el-image-viewer__wrapper{z-index:3000!important}[data-v-452ed448]:export{menuBg:#304156;menuText:#bfcbd9;menuActiveText:#409eff}.bottom[data-v-452ed448]{margin-top:13px;line-height:12px;display:flex;justify-content:space-between;align-items:center}.bottom span[data-v-452ed448]{font-size:13px;color:#999}.sub-bottom[data-v-452ed448]{display:flex;justify-content:space-between}.button[data-v-452ed448]{padding:0;min-height:auto;float:right}.image[data-v-452ed448]{width:100%;display:block}.one-block[data-v-452ed448]{border:1px solid #ebebeb;border-radius:3px;transition:.2s;padding:24px;margin-bottom:24px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.infinite-list .infinite-list-item[data-v-452ed448]{display:flex;align-items:center;justify-content:space-between;height:30px;background:#e8f3fe;margin:10px;color:#7dbcfc}.infinite-list[data-v-452ed448]{height:300px;-webkit-padding-start:0;padding-inline-start:0}.history_content[data-v-452ed448]{width:80%;line-height:30px;padding:0 10px}

dist/precache-manifest.067f31c573d6b1d96f11508dc84d5aed.js

@@ -8,7 +8,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "url": "/css/404.96fe1c26.css"
   },
   {
-    "revision": "3f939c02e8c73d5e0392",
+    "revision": "41242018e9bf6d4a32df",
     "url": "/css/app.82284a16.css"
   },
   {
@@ -88,8 +88,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "url": "/css/chunk-5823cdba.be777eac.css"
   },
   {
-    "revision": "1b07e9c32d28e86c995b",
-    "url": "/css/chunk-5bb6b064.354c99b1.css"
+    "revision": "08b16c2811b9a13fcf59",
+    "url": "/css/chunk-5ed1d208.def0b598.css"
   },
   {
     "revision": "676ed1246366b884b4a7",
@@ -168,7 +168,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "url": "/img/404.a57b6f31.png"
   },
   {
-    "revision": "2736c1b75d8381e8b2940fa0defef93a",
+    "revision": "a7b653b99aba44578cc5afb0432c25ee",
     "url": "/index.html"
   },
   {
@@ -180,8 +180,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "url": "/js/404.ec607ed7.js"
   },
   {
-    "revision": "3f939c02e8c73d5e0392",
-    "url": "/js/app.3acdc270.js"
+    "revision": "41242018e9bf6d4a32df",
+    "url": "/js/app.cad24c1c.js"
   },
   {
     "revision": "4308fe0503e593d27da4",
@@ -280,8 +280,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "url": "/js/chunk-5823cdba.1a7dbab6.js"
   },
   {
-    "revision": "1b07e9c32d28e86c995b",
-    "url": "/js/chunk-5bb6b064.9cf003da.js"
+    "revision": "08b16c2811b9a13fcf59",
+    "url": "/js/chunk-5ed1d208.e3e30a03.js"
   },
   {
     "revision": "676ed1246366b884b4a7",

dist/service-worker.js

@@ -14,7 +14,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
 
 importScripts(
-  "/precache-manifest.e5bedace380b0f9abf69a3a026584411.js"
+  "/precache-manifest.067f31c573d6b1d96f11508dc84d5aed.js"
 );
 
 workbox.core.setCacheNameDetails({prefix: "pyxis-fe"});

src/views/game/game_setting.vue

@@ -113,7 +113,7 @@
       <el-col :span="10">
         <el-form
             ref="modalForm"
-            label-position="left"
+            label-position="top"
         >
         <el-form-item label="参数"  >
           <el-input
@@ -122,6 +122,22 @@
               :maxlength="19"
           />
         </el-form-item>
+          <el-form-item label="logo大小">
+            <el-slider
+                v-model="logoScale"
+                :min="0.5"
+                :max="1"
+                :step="0.01"
+                @change="logoScaleChange"
+            ></el-slider>
+          </el-form-item>
+          <el-form-item label="logo背景色">
+            <el-color-picker
+                v-model="logoBg"
+                @change="logoBgChange"
+            >
+            </el-color-picker>
+          </el-form-item>
         <el-form-item>
           <el-button
               type="primary"
@@ -185,6 +201,9 @@ declare module 'vue/types/vue' {
   }
 }
 
+const QR_WIDTH = 430
+const LOGO_WIDTH = 190
+
 @Component({
   name: 'GameSetting',
   components: {
@@ -214,6 +233,8 @@ export default class extends Vue {
   private preGameId = ''
   private preVersionId = ''
   private historys: string[] = []
+  private logoScale = 1
+  private logoBg = '#ffffff'
 
   private listQuery = {
     page: 1,
@@ -471,6 +492,15 @@ export default class extends Vue {
     }
   }
 
+  private logoScaleChange(val: number) {
+    console.log('logo scale change', val)
+    this.doDraw()
+  }
+
+  private logoBgChange(val: string) {
+    this.doDraw()
+  }
+
   private doDraw() {
     //  获取canvas
     const canvas = document.getElementById('qr_canvas') as HTMLCanvasElement
@@ -479,7 +509,7 @@ export default class extends Vue {
     } else {
       //  可以理解为一个画笔，可画路径、矩形、文字、图像
       const context = canvas.getContext('2d')
-      context!.clearRect(0, 0, 430, 430)
+      context!.clearRect(0, 0, QR_WIDTH, QR_WIDTH)
       const img = new Image()
       img.src = this.qrUrl + '?t=' + new Date().getDate()
       img.setAttribute('crossOrigin', 'Anonymous')
@@ -487,7 +517,7 @@ export default class extends Vue {
       img.onload = () => {
         if (img.complete) {
           //  绘制图片
-          context!.drawImage(img, 0, 0, img.width, img.height)
+          context!.drawImage(img, 0, 0, QR_WIDTH, QR_WIDTH)
           if (this.shopLogo) {
             this.drawLogo(context)
           }
@@ -500,19 +530,21 @@ export default class extends Vue {
     const img = new Image()
     img.src = this.shopLogo
     img.setAttribute('crossOrigin', 'Anonymous')
-    img.onload = function() {
+    img.onload = () => {
       if (img.complete) {
         // 创建临时的canvas, 缩放图片
         const canvasTemp = document.createElement('canvas')
         const contextTemp = canvasTemp.getContext('2d')
         canvasTemp.width = 430
         canvasTemp.height = 430
-        contextTemp!.fillStyle = '#fff'
-        contextTemp!.fillRect(0, 0, 430, 430)
-        contextTemp!.drawImage(img, 0, 0, img.width, img.height, 120, 120, 190, 190)
+        contextTemp!.fillStyle = this.logoBg
+        contextTemp!.fillRect(0, 0, QR_WIDTH, QR_WIDTH)
+        const logoW = LOGO_WIDTH * this.logoScale
+        const dx = (QR_WIDTH - logoW) / 2
+        contextTemp!.drawImage(img, 0, 0, img.width, img.height, dx, dx, logoW, logoW)
         const pattern = context.createPattern(canvasTemp, 'no-repeat')
-
-        context.roundRect(120, 120, 190, 190, 95)
+        const s = (QR_WIDTH - LOGO_WIDTH) / 2
+        context.roundRect(s, s, LOGO_WIDTH, LOGO_WIDTH, LOGO_WIDTH / 2)
         context.fillStyle = pattern
         context.fill()
       }