pikachu-fe/src/views/games/details/info.vue

<template>
  <div class="main-content">
    <el-form ref="gameForm" :model="gameForm" :rules="rules" label-width="100px" style="width: 60%">
      <el-form-item label="游戏名称" prop="game_name">
        <el-input v-model="gameForm.game_name"/>
      </el-form-item>
      <el-form-item label="英文名称" prop="game_name_en">
        <el-input v-model="gameForm.game_name_en"/>
      </el-form-item>
      <el-form-item label="游戏图标" prop="game_icon" class="uploader-box">
        <el-upload
          class="uploader"
          action="/api/common/upload"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :on-error="uploadErr"
          name="image-file"
          :data="{
            sub_path: '/ghost/app/',
            file_type: 'icon_img'
          }"
        >
          <img v-if="gameForm.game_icon" :src="gameForm.game_icon" class="uploader-img">
          <i v-else class="el-icon-plus uploader-icon"/>
        </el-upload>
      </el-form-item>
      <el-form-item label="游戏 ID" prop="game_id">
        <el-input v-model="gameForm.game_id"/>
      </el-form-item>
      <el-form-item label="App ID" prop="app_id">
        <el-input v-model="gameForm.app_id"/>
      </el-form-item>
      <el-form-item label="平台" prop="platform">
        <el-select v-model="gameForm.platform" placeholder="请选择平台" style="width: 100%">
          <el-option
            v-for="(item, index) in platform"
            :key="index"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="game_type">
        <el-select v-model="gameForm.game_type" placeholder="请选择活动区域" style="width: 100%">
          <el-option
            v-for="(item, index) in gameType"
            :key="index"
            :label="item.name"
            :value="parseInt(item.value)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="点击数" prop="click_count">
        <el-input v-model="gameForm.click_count"/>
      </el-form-item>
      <el-form-item label="主推" prop="is_recommend">
        <el-switch v-model="gameForm.is_recommend"/>
      </el-form-item>
      <el-form-item label="新游" prop="is_new">
        <el-switch v-model="gameForm.is_new"/>
      </el-form-item>
      <el-form-item label="火爆" prop="is_hot">
        <el-switch v-model="gameForm.is_hot"/>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select v-model="gameForm.status" placeholder="请选择活动区域" style="width: 100%">
          <el-option
            v-for="(item, index) in statusList"
            :key="index"
            :label="item.name"
            :value="parseInt(item.key)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="comment">
        <el-input v-model="gameForm.comment" type="textarea"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('gameForm')" v-if="permissionEdit">保存</el-button>
        <el-button @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from '@/utils/request'
import { mapGetters } from 'vuex'

export default {
  name: 'GameDetailsInfo',
  data() {
    return {
      permissionEdit: false,
      uid: '',
      gameType: [],
      platform: [],
      statusList: [],
      gameForm: {
        game_name: '',
        game_name_en: '',
        game_icon: '',
        game_id: '',
        app_id: '',
        platform: '',
        game_type: '',
        click_count: 0,
        is_recommend: false,
        is_new: false,
        is_hot: false,
        status: 1,
        comment: ''
      },
      rules: {
        game_name: [
          { required: true, message: '请输入游戏名称', trigger: 'blur' }
        ],
        game_name_en: [
          { required: true, message: '请输入游戏英文名称', trigger: 'blur' }
        ],
        game_id: [
          { required: true, message: '请输入游戏 ID', trigger: 'blur' }
        ],
        game_type: [
          { required: true, message: '请选择游戏类型', trigger: 'blur' }
        ],
        click_count: [
          { required: true, message: '请输入点击数', trigger: 'blur' }
        ],
        status: [{ required: true, message: '请选择游戏状态', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.uid = this.$route.params.uid
    this.permissionEdit =
      this.userInfo.permissions.includes(`${this.uid}-edit`) ||
      this.userInfo.permissions.includes(`${this.uid}-publish`)
    this.getPlatform()
    this.getGameType()
    this.getStatusList()
    if (this.uid !== 'new') {
      this.getData()
    }
  },
  methods: {
    getData() {
      request({
        url: '/api/games/list',
        method: 'get',
        params: {
          _id: this.uid
        }
      }).then(res => {
        const { data } = res
        if (data.errcode !== 0) {
          this.$notify.error({
            title: '错误',
            message: data.errmsg
          })
          return
        }
        this.gameForm = data.gameList[0]
        this.$route.meta.title = this.gameForm.game_name
      })
    },
    getPlatform() {
      request({
        url: '/api/games/platform',
        method: 'get'
      }).then(res => {
        const { data } = res
        if (data.errcode !== 0) {
          this.$notify.error({
            title: '错误',
            message: data.errmsg
          })
          return
        }
        this.platform = data.platform
      })
    },
    getGameType() {
      request({
        url: '/api/games/type',
        method: 'get'
      }).then(res => {
        const { data } = res
        if (data.errcode !== 0) {
          this.$notify.error({
            title: '错误',
            message: data.errmsg
          })
          return
        }
        this.gameType = data.gameType
      })
    },
    getStatusList() {
      request({
        url: '/api/games/status',
        method: 'get'
      }).then(res => {
        const { data } = res
        if (data.errcode !== 0) {
          this.$notify.error({
            title: '错误',
            message: data.errmsg
          })
          return
        }
        this.statusList = data.statusList
      })
    },
    uploadSuccess(res, file) {
      this.gameForm.game_icon = res.url
      this.$message.success('图片上传成功！')
    },
    uploadErr() {
      this.$message.error('图片上传失败！')
    },
    saveEdit() {
      if (this.uid === 'new') {
        request({
          url: '/api/games/add',
          method: 'post',
          data: this.gameForm
        }).then(res => {
          const { data } = res
          if (data.errcode !== 0) {
            this.$message.error(data.errmsg)
            return
          }
          this.$refs['gameForm'].clearValidate()
          this.$message.success('已成功添加游戏！')
          this.$route.params.uid = data.userInfo._id
          this.$router.push(`/games/details/${data.userInfo._id}/info`)
        })
      } else {
        request({
          url: '/api/games/edit',
          method: 'post',
          data: this.gameForm
        }).then(res => {
          const { data } = res
          if (data.errcode !== 0) {
            this.$message.error(data.errmsg)
            return
          }
          this.$refs['gameForm'].clearValidate()
          this.$message.success('游戏信息保存成功！')
          this.$router.push(`/games/details/${this.gameForm._id}/info`)
        })
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.saveEdit()
          console.log(this.gameForm)
        } else {
          this.$message.error('请按要求填写游戏信息！')
          return false
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>