完善店铺选择游戏的功能

src/api/game.ts

@@ -1,16 +1,19 @@
 import request from '@/utils/request'
 export interface IGameVersion {
+  _id?: string
   type: number,
   name: string,
   url?: string,
   appid?: string,
-  image?: string
+  image?: string,
+  selected?: boolean
 }
 export interface IGameData {
   _id?: string,
   name: string,
   createdAt?: Date,
-  versions: IGameVersion[]
+  versions: IGameVersion[],
+  selected?: boolean
 }
 
 export const defaultGameVersionData: IGameVersion = {

src/api/shop.ts

@@ -35,3 +35,19 @@ export const deleteShop = (id: string) =>
     method: 'post'
   })
 
+export const saveShopGameInfo = (data: any) =>
+  request({
+    url: `/shop/gameinfo/save`,
+    method: 'post',
+    data
+  })
+
+
+export const getShopGameInfo = (data: any) =>
+  request({
+    url: `/shop/gameinfo`,
+    method: 'post',
+    data
+  })
+
+

src/views/game/game_edit.vue

@@ -311,5 +311,6 @@ export default class extends Vue {
   margin-bottom: 24px;
   margin-left: 60px;
   margin-right: 60px;
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
 }
 </style>

src/views/game/game_setting.vue

@@ -1,15 +1,61 @@
 <template>
   <div class="app-container">
-    <div class="one-block">
-      <el-divider content-position="left">竞猜游戏</el-divider>
+    <sticky
+        :z-index="10"
+        class-name="sub-navbar"
+    >
+      <el-button-group >
+        <el-button
+            icon="el-icon-close"
+            @click="onCancel"
+        >取消</el-button>
+        <el-button
+            type="success"
+            icon="el-icon-check"
+            @click="saveVal"
+        >保存</el-button>
+      </el-button-group>
+    </sticky>
+    <el-row>
+      <el-select
+          v-model="shop"
+          placeholder="选择店铺"
+          name="shop"
+          required
+          class="w100"
+      >
+        <el-option
+            v-for="item in allDepts"
+            :key="item._id"
+            :label="item.name"
+            :value="item._id"
+        />
+      </el-select>
+    </el-row>
+    <div class="one-block" v-for="(game) in list" :key="game._id">
+      <el-row>
+        <el-switch
+            v-model="game.selected"
+            :active-text="game.name"
+            @change="gameSelectedChange(game._id)"
+            inactive-text="">
+        </el-switch>
+      </el-row>
+      <el-divider content-position="left"></el-divider>
       <el-row style="display: flex; flex-wrap: wrap;">
-        <el-col :span="6" v-for="(o, index) in 4" :key="o" :offset="index %3 === 0 ? 0 : 2" style="margin-bottom: 20px;">
+        <el-col :span="4" v-for="(vdata, index) in game.versions" :key="vdata._id" :offset="index %4 === 0 ? 0 : 2" style="margin-bottom: 20px;">
           <el-card :body-style="{ padding: '0px' }">
-            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
+            <img :src="vdata.image" class="image" :alt="vdata.name">
             <div style="padding: 14px;">
-              <span>好吃的汉堡</span>
+              <span>{{vdata.name}}</span>
               <div class="bottom">
-                <el-button type="text" class="button">操作按钮</el-button>
+                <span>{{ vdata.type | parseGameType}}</span>
+                <el-switch
+                    v-model="vdata.selected"
+                    active-text=""
+                    @change="versionSelectedChange(game._id, vdata._id)"
+                    inactive-text="">
+                </el-switch>
               </div>
             </div>
           </el-card>
@@ -20,16 +66,146 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue, Watch } from 'vue-property-decorator'
+import { getGames, IGameData } from '@/api/game'
+import Sticky from '@/components/Sticky/index.vue'
+import { getShopGameInfo, getShops, saveShopGameInfo } from '@/api/shop'
 
 @Component({
   name: 'GameSetting',
   components: {
-
+    Sticky
+  },
+  filters: {
+    parseGameType: (type: number) => {
+      return type== 0 ? '微信小游戏': '网页版'
+    }
   }
 })
 export default class extends Vue {
+  private total = 0
+  private list: IGameData[] = []
+  private listLoading = true
+  private loading = false
+  private shop = ''
+  private allDepts = []
+  private gameid: string = ''
+  private versionid: string = ''
+  private listQuery = {
+    page: 1,
+    limit: 20,
+    key: '',
+    hasVersion: 1
+  }
+  private value1 = true
 
+  async created() {
+    await this.getList()
+    await this.getRemoteDeptList()
+  }
+  @Watch('shop')
+  private onShopChange() {
+    if (this.shop) {
+      this.getShopGameSetting(this.shop)
+    }
+  }
+
+  private async getList() {
+    this.listLoading = true
+    const { data } = await getGames(this.listQuery)
+    this.listLoading = false
+    this.list = data.records
+    this.total = data.total
+  }
+  private async getShopGameSetting(shopid: string) {
+    const { data } = await getShopGameInfo({shopid})
+    console.log(data)
+    this.gameid = data.gameid
+    this.versionid = data.versionid
+    this.updateGameSelected()
+  }
+
+  private updateGameSelected() {
+    if (this.list.length == 0) {
+      return
+    }
+    if (!this.gameid) {
+      this.gameid = this.list[0]._id
+    }
+    for (let game of this.list) {
+      if (game._id == this.gameid) {
+        if (!game.versions.find(o => o._id == this.versionid)) {
+          this.versionid = game.versions[0]._id
+        }
+        break
+      }
+    }
+    for (let i = 0; i < this.list.length; i ++) {
+      let game = this.list[i]
+      game.selected = game._id == this.gameid
+      for (let v of game.versions) {
+        v.selected = v._id == this.versionid
+      }
+      Vue.set(this.list, i, game)
+    }
+
+  }
+  private async getRemoteDeptList(name: string) {
+    const { data } = await getShops({ key: name })
+    if (!data.records) return
+    this.allDepts = data.records
+  }
+  private gameSelectedChange(gameid) {
+    console.log(gameid)
+    this.gameid = gameid
+    this.updateGameSelected()
+
+  }
+  private versionSelectedChange(gameid, versionid) {
+    console.log(gameid, versionid)
+    this.gameid = gameid
+    this.versionid = versionid
+    this.updateGameSelected()
+  }
+  private async onCancel() {
+    try {
+      await this.$confirm('确认不保存当前信息?', 'Warning', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+      this.$store.dispatch("delView", this.$route)
+      this.$router.go(-1)
+    } catch (err) {
+
+    }
+
+  }
+  private async saveVal() {
+    if (!this.shop || !this.gameid || !this.versionid) {
+      this.$message({
+        message: '请先选择一个游戏',
+        type: 'warning'
+      })
+      return
+    }
+    try {
+      const data = {
+        shopid: this.shop,
+        gameid: this.gameid,
+        versionid: this.versionid
+      }
+      await saveShopGameInfo(data)
+      this.$notify({
+        title: 'Success',
+        message: '更新店铺游戏配置成功',
+        type: 'success',
+        duration: 2000
+      })
+    } catch (err) {
+      console.log('save shop gamesetting error')
+    }
+  }
 
 }
 </script>
@@ -39,9 +215,13 @@ export default class extends Vue {
   margin-top: 13px;
   line-height: 12px;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
 }
+.bottom span{
+  font-size: 13px;
+  color: #999;
+}
 
 .button {
   padding: 0;
@@ -58,5 +238,8 @@ export default class extends Vue {
   border-radius: 3px;
   transition: .2s;
   padding: 24px;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
 }
+
 </style>