增加小游戏码的预览

src/api/game.ts

@@ -5,8 +5,10 @@ export interface IGameVersion {
   name: string
   url?: string
   appid?: string
+  appsecret?: string
   image?: string
   selected?: boolean
+  qr?: string
 }
 export interface IGameData {
   _id?: string

src/api/shop.ts

@@ -55,6 +55,13 @@ export const getShopGameInfo = (data: any) =>
     data
   })
 
+export const getShopGameQr = (data: any) =>
+  request({
+    url: '/shop/gameqr',
+    method: 'post',
+    data
+  })
+
 export const updateShopQtypes = (data: any) =>
   request({
     url: '/shop/save_qtype',

src/views/game/game_edit.vue

@@ -80,6 +80,19 @@
                   style="width: 100%"
               />
             </el-form-item>
+            <el-form-item
+                label="AppSecret"
+                :prop="'versions.'+index+'.appsecret'"
+                v-if="vdata.type === 1"
+                :rules="{
+                  required: true, message: 'AppSecret不能为空', trigger: 'blur'
+                }"
+            >
+              <el-input
+                  v-model="vdata.appsecret"
+                  style="width: 100%"
+              />
+            </el-form-item>
             <el-form-item>
               <el-button
                   type="warning"

src/views/game/game_setting.vue

@@ -40,6 +40,7 @@
             v-model="game.selected"
             :active-text="game.name"
             @change="gameSelectedChange(game._id)"
+            :disabled = "noShop"
             inactive-text="">
         </el-switch>
       </el-row>
@@ -51,11 +52,29 @@
             <div style="padding: 14px;">
               <span>{{vdata.name}}</span>
               <div class="bottom">
-                <span>{{ vdata.type | parseGameType}}</span>
+                <el-image
+                    v-if="!noShop"
+                    style="width: 40px; height: 40px"
+                    :src="vdata.type === 1 ? 'img/icons/wqr.png' : 'img/icons/preview.png'"
+                    @click="showPreview(vdata)"
+                    >
+                </el-image>
+                <span
+                    v-if="vdata.type === 1 && !noShop"
+                    @click="showPreview(vdata)"
+                >
+                 查看小程序码
+                </span>
+                <span
+                    v-if="vdata.type === 0  && !noShop"
+                >
+                  <a :href="vdata.url" target="_blank">预览游戏 </a>
+                </span>
                 <el-switch
                     v-model="vdata.selected"
                     active-text=""
                     @change="versionSelectedChange(game._id, vdata._id)"
+                    :disabled = "noShop"
                     inactive-text="">
                 </el-switch>
               </div>
@@ -64,24 +83,36 @@
         </el-col>
       </el-row>
     </div>
+    <el-image-viewer
+        v-if="showViewer"
+        :on-close="closeViewer"
+        :url-list="[qrUrl]" />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator'
-import { getGames, IGameData } from '@/api/game'
+import { getGames, IGameData, IGameVersion } from '@/api/game'
 import Sticky from '@/components/Sticky/index.vue'
-import { getShopGameInfo, getShops, saveShopGameInfo } from '@/api/shop'
+import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+
+import {
+  getShopGameInfo,
+  getShopGameQr,
+  getShops,
+  saveShopGameInfo
+} from '@/api/shop'
 import { UserModule } from '@/store/modules/user'
 
 @Component({
   name: 'GameSetting',
   components: {
-    Sticky
+    Sticky,
+    ElImageViewer
   },
   filters: {
     parseGameType: (type: number) => {
-      return type === 0 ? '微信小游戏' : '网页版'
+      return type === 1 ? '微信小游戏' : '网页版'
     }
   }
 })
@@ -93,6 +124,8 @@ export default class extends Vue {
   private allDepts = []
   private gameid = ''
   private versionid = ''
+  private qrUrl = ''
+  private showViewer = false
   private listQuery = {
     page: 1,
     limit: 20,
@@ -104,6 +137,10 @@ export default class extends Vue {
     return UserModule.level
   }
 
+  get noShop() {
+    return !this.shop
+  }
+
   async created() {
     await this.getList()
     if (UserModule.level === 1) {
@@ -134,9 +171,25 @@ export default class extends Vue {
     this.gameid = data.gameid
     this.versionid = data.versionid
     this.updateGameSelected()
+    for (let i = 0; i < this.list.length; i++) {
+      const game = this.list[i]
+      for (const v of game.versions) {
+        if (v.type === 1) {
+          const url = await this.getGameQr(this.shop, this.gameid, this.versionid)
+          v.qr = [url]
+        }
+      }
+      Vue.set(this.list, i, game)
+    }
   }
 
-  private updateGameSelected() {
+  private async getGameQr(shop: string, gameId: string, version: string) {
+    const params = { shop, gameId, version }
+    const { data } = await getShopGameQr(params)
+    return data.url
+  }
+
+  private async updateGameSelected() {
     if (this.list.length === 0) {
       return
     }
@@ -222,6 +275,20 @@ export default class extends Vue {
       console.log('save shop gamesetting error')
     }
   }
+
+  private showPreview(data: IGameVersion) {
+    if (data.type === 1) {
+      this.qrUrl = data.qr
+      this.showViewer = true
+    } else if (data.url) {
+      window.open(data.url, '_blank')
+    }
+  }
+
+  private closeViewer() {
+    this.qrUrl = ''
+    this.showViewer = false
+  }
 }
 </script>