增加店铺游戏主题的编辑

src/api/shop.ts

@@ -75,3 +75,23 @@ export const updateShopPublish = (data: any) =>
     method: 'post',
     data
   })
+/**
+ * 获取游戏主题配置
+ * @param data
+ */
+export const getGameTheme = (data: any) =>
+  request({
+    url: '/api/shop/gametheme',
+    method: 'post',
+    data
+  })
+/**
+ * 保存游戏主题配置
+ * @param data
+ */
+export const saveGameTheme = (data: any) =>
+  request({
+    url: '/api/shop/gametheme/save',
+    method: 'post',
+    data
+  })

src/router/modules/shop.ts

@@ -106,13 +106,14 @@ const shopRoutes: RouteConfig = {
       }
     },
     {
-      path: 'theme_edit',
-      component: () => import('@/views/error-page/401.vue'),
+      path: 'theme_edit/:shop/:game/:version',
+      component: () => import('@/views/game/game_theme.vue'),
       name: 'ThereEditor',
       meta: {
         title: 'edit_theme',
         permissions: ['shop:game_setting'],
-        icon: 'theme2'
+        icon: 'theme2',
+        hidden: true
       }
     }
   ]

src/views/game/game_setting.vue

@@ -50,7 +50,18 @@
           <el-card :body-style="{padding: '0px'}">
             <img :src="vdata.image" class="image" :alt="vdata.name">
             <div style="padding: 14px;">
-              <span>{{vdata.name}}</span>
+              <div class="sub-bottom">
+                <span>{{vdata.name}}</span>
+                <span>
+                  <router-link
+                      :to="`/shop/theme_edit/${shop}/${game._id}/${vdata._id}`"
+                      class="link-type"
+                      v-if="!noShop"
+                      >
+                      自定义
+                  </router-link>
+                </span>
+              </div>
               <div class="bottom">
                 <el-image
                     v-if="!noShop"
@@ -303,6 +314,10 @@ export default class extends Vue {
   font-size: 13px;
   color: #999;
 }
+.sub-bottom {
+  display: flex;
+  justify-content: space-between;
+}
 
 .button {
   padding: 0;

src/views/game/game_theme.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="app-container">
+    <el-form
+        ref="postForm"
+        :model="postForm"
+        :rules="rules"
+        label-width="222px"
+        class="form-container"
+    >
+      <el-form-item
+          prop="game_main_pic"
+          label="主页正中间图片"
+      >
+        <upload-image v-model="postForm.game_main_pic"/>
+      </el-form-item>
+
+      <el-form-item
+          prop="bg_item_icon"
+          label="背景图案"
+      >
+        <upload-image v-model="postForm.bg_item_icon"/>
+      </el-form-item>
+
+      <el-form-item
+          label="主页上单人赛按钮文字:"
+          prop="game_single_btn"
+      >
+        <el-input
+            v-model="postForm.game_single_btn"
+            placeholder="主页上单人赛按钮文字"
+            name="game_single_btn"
+            required
+        />
+      </el-form-item>
+      <el-form-item
+          label="主页上多人赛按钮名字:"
+          prop="game_multi_btn"
+      >
+        <el-input
+            v-model="postForm.game_multi_btn"
+            placeholder="主页上多人赛按钮名字"
+            name="game_multi_btn"
+            required
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+            type="primary"
+            @click="saveVal"
+            v-permission="['shop:game_setting']"
+        >
+          保存
+        </el-button>
+        <el-button @click="onCancel">
+          取消
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import Sticky from '@/components/Sticky/index.vue'
+import ElImageViewer from 'element-ui/packages/image/src/image-viewer.vue'
+import UploadImage from '@/components/UploadImage/index.vue'
+
+import { getGameTheme, saveGameTheme } from '@/api/shop'
+import { UserModule } from '@/store/modules/user'
+
+@Component({
+  name: 'GameTheme',
+  components: {
+    Sticky,
+    ElImageViewer,
+    UploadImage
+  },
+  filters: {
+    parseGameType: (type: number) => {
+      return type === 1 ? '微信小游戏' : '网页版'
+    }
+  }
+})
+export default class extends Vue {
+  private validateRequire = (rule: any, value: string, callback: Function) => {
+    if (value === '') {
+      if (rule.field === 'imageURL') {
+        this.$message({
+          message: 'Upload cover image is required',
+          type: 'error'
+        })
+      } else {
+        this.$message({
+          message: rule.field + ' 是必填的',
+          type: 'error'
+        })
+      }
+      callback(new Error(rule.field + ' 是必填的'))
+    } else {
+      callback()
+    }
+  }
+
+  private shop = ''
+  private postForm: any = {}
+
+  get userLevel() {
+    return UserModule.level
+  }
+
+  get noShop() {
+    return !this.shop
+  }
+
+  private rules = {
+    name: [{ validator: this.validateRequire }]
+  }
+
+  $refs!: {
+    postForm: HTMLFormElement
+  }
+
+  async created() {
+    this.postForm.shop = this.$route.params?.shop
+    this.postForm.game = this.$route.params?.game
+    this.postForm.version = this.$route.params?.version
+    console.log(this.shop)
+    await this.getRemoteData()
+  }
+
+  async getRemoteData() {
+    const { data } = await getGameTheme(this.postForm)
+    this.postForm = Object.assign(this.postForm, data)
+    this.$forceUpdate()
+    console.log(this.postForm)
+  }
+
+  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() {
+    try {
+      await this.$refs.postForm.validate()
+      const { data } = await saveGameTheme(this.postForm)
+      this.$notify({
+        title: 'Success',
+        message: '操作成功',
+        type: 'success',
+        duration: 2000
+      })
+    } catch (err) {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bottom {
+  margin-top: 13px;
+  line-height: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bottom span {
+  font-size: 13px;
+  color: #999;
+}
+
+.button {
+  padding: 0;
+  min-height: auto;
+  float: right;
+}
+
+.image {
+  width: 100%;
+  display: block;
+}
+
+.one-block {
+  border: 1px solid #ebebeb;
+  border-radius: 3px;
+  transition: .2s;
+  padding: 24px;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+}
+
+</style>