增加生成小程序码的自定义参数

src/utils/index.ts

@@ -116,3 +116,11 @@ export const toggleClass = (ele: HTMLElement, className: string) => {
   }
   ele.className = classString
 }
+
+export const delay = (sec: number) => {
+  return new Promise((resolve, reject) => {
+    setTimeout(function() {
+      resolve && resolve('')
+    }, sec * 1000)
+  })
+}

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)"
+                    @click="showPreview(vdata, game._id)"
                     >
                 </el-image>
                 <span
                     v-if="vdata.type === 1 && !noShop"
-                    @click="showPreview(vdata)"
+                    @click="showPreview(vdata, game._id)"
                 >
                  查看小程序码
                 </span>
@@ -94,8 +94,52 @@
         </el-col>
       </el-row>
     </div>
+    <el-dialog
+        :visible.sync="dialogVisible"
+        style="z-index: 1999"
+        :modal-append-to-body="false"
+        title="自定义小程序码"
+    >
+      <el-row style="display: flex; flex-wrap: wrap;">
+      <el-col :span="12">
+        <el-image
+            style="width: 100%;"
+            :src="qrUrl"
+            :preview-src-list="[qrUrl]"
+        >
+          <div slot="placeholder" class="image-slot">
+            加载中<span class="dot">...</span>
+          </div>
+        </el-image>
+      </el-col>
+      <el-col :span="12">
+        <el-form
+            ref="modalForm"
+            label-position="left"
+        >
+        <el-form-item label="参数"  >
+          <el-input
+              v-model="qrParam"
+              placeholder="参数"
+              :maxlength="19"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+              type="primary"
+              @click="refreshImg"
+              :loading="refreshing"
+          >
+            生成
+          </el-button>
+        </el-form-item>
+        </el-form>
+      </el-col>
+      </el-row>
+    </el-dialog>
     <el-image-viewer
         v-if="showViewer"
+        style="z-index: 2500"
         :on-close="closeViewer"
         :url-list="[qrUrl]" />
   </div>
@@ -115,6 +159,7 @@ import {
 } from '@/api/shop'
 import { UserModule } from '@/store/modules/user'
 import { EVENT_GAME_UPDATE, EVENT_SHOP_UPDATE, EventBus } from '@/utils/event-bus'
+import { delay } from '@/utils'
 
 @Component({
   name: 'GameSetting',
@@ -138,6 +183,12 @@ export default class extends Vue {
   private versionid = ''
   private qrUrl = ''
   private showViewer = false
+  private dialogVisible = false
+  private qrParam = ''
+  private refreshing = false
+  private preGameId = ''
+  private preVersionId = ''
+
   private listQuery = {
     page: 1,
     limit: 20,
@@ -207,8 +258,8 @@ export default class extends Vue {
     }
   }
 
-  private async getGameQr(shop: string, gameId: string, version: string) {
+  private async getGameQr(shop: string, gameId: string, version: string, moreParams?: string[]) {
-    const params = { shop, gameId, version }
+    const params = { shop, gameId, version, params: moreParams }
     const { data } = await getShopGameQr(params)
     return data.url
   }
@@ -300,10 +351,13 @@ export default class extends Vue {
     }
   }
 
-  private showPreview(data: IGameVersion) {
+  private showPreview(data: IGameVersion, gameId: string) {
+    this.preGameId = gameId
+    this.preVersionId = data._id
     if (data.type === 1 && data.qr) {
       this.qrUrl = data.qr!
-      this.showViewer = true
+      // this.showViewer = true
+      this.dialogVisible = true
     } else if (data.url) {
       window.open(data.url, '_blank')
     }
@@ -313,10 +367,49 @@ export default class extends Vue {
     this.qrUrl = ''
     this.showViewer = false
   }
+
+  private async refreshImg() {
+    console.log(`refresh qr with gameid: ${this.preGameId}, versionid: ${this.preVersionId}, param: ${this.qrParam}`)
+    const params = []
+    if (this.qrParam) {
+      if (this.qrParam.length > 19) {
+        this.$message({
+          message: '参数的长度不能超过19个字符',
+          type: 'error'
+        })
+        return false
+      }
+      if (!/^[a-zA-Z0-9]+$/.test(this.qrParam)) {
+        this.$message({
+          message: '参数只能是数字或大小写字母',
+          type: 'error'
+        })
+        return false
+      }
+      params.push(this.qrParam)
+    }
+    this.refreshing = true
+    try {
+      const img = await this.getGameQr(this.shop, this.preGameId, this.preVersionId, params)
+      await delay(1)
+      this.qrUrl = img
+    } catch (err) {
+      this.$message({
+        message: '生成二维码出错',
+        type: 'error'
+      })
+    }
+    this.refreshing = false
+  }
 }
 </script>
-
+<style lang="scss">
+.el-image-viewer__wrapper {
+  z-index: 3000!important;
+}
+</style>
 <style lang="scss" scoped>
+
 .bottom {
   margin-top: 13px;
   line-height: 12px;