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

<template>
  <div class="main-content p-game-profile">
    <el-row :gutter="32">
      <el-col :span="2">
        <div class="icon-box">
          <img :src="gameInfo.game_icon" class="img-fit">
        </div>
      </el-col>
      <!-- TODO: 左侧文字两端对齐 -->
      <el-col :span="22">
        <div class="info-item mgb-20 clearfix">
          <span class="title mgr-20 fl">游戏名称:</span>
          <span class="info fl">{{ gameInfo.game_name }}</span>
        </div>
        <div class="info-item mgb-20 clearfix">
          <span class="title mgr-20 fl">游戏类型:</span>
          <span class="info fl">{{ gameInfo.show_type }}</span>
        </div>
        <div class="info-item mgb-20 clearfix">
          <span class="title mgr-20 fl">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态:</span>
          <span class="info fl">{{ gameInfo.status_show }}</span>
        </div>
        <div class="info-item mgb-20 clearfix">
          <span class="title mgr-20 fl">平&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;台:</span>
          <span class="info fl">{{ gameInfo.platform_show }}</span>
        </div>
        <div class="info-item mgb-20 clearfix">
          <span class="title mgr-20 fl">主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;推:</span>
          <span class="info fl">{{ gameInfo.is_recommend ? '是' : '否' }}</span>
        </div>
        <div class="info-item mgb-20 clearfix">
          <span class="title mgr-20 fl">火爆状态:</span>
          <span class="info fl">{{ gameInfo.is_hot ? '是' : '否' }}</span>
        </div>
        <div class="info-item mgb-20 clearfix">
          <span class="title mgr-20 fl">点&nbsp;&nbsp;击&nbsp;&nbsp;数:</span>
          <span class="info fl">{{ gameInfo.click_count }}</span>
        </div>
        <div class="info-item mgb-20 clearfix">
          <span class="title mgr-20 fl">是否新游:</span>
          <span class="info fl">{{ gameInfo.is_new ? '是' : '否' }}</span>
        </div>
        <div class="info-item mgb-20 clearfix">
          <span class="title mgr-20 fl">添加时间:</span>
          <span class="info fl">{{createdTime}}</span>
        </div>
        <!-- TODO:整理关联游戏 -->
        <!-- <div class="info-item mgb-20 clearfix">
          <span class="title mgr-20 fl">关联游戏:</span>
          <span class="info fl">{{gameInfo.linked_games.join('，')}}</span>
        </div>-->
        <div class="info-item clearfix">
          <el-button type="success">
            <router-link :to="`/games/details/${uid}/info`">详情</router-link>
          </el-button>
          <el-button type="warning" v-if="permissionEdit">
            <router-link :to="`/games/details/${uid}/info`">编辑</router-link>
          </el-button>
          <el-button type="danger" v-if="permissionEdit" @click="delGame">删除</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

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

export default {
  name: 'GameDetailsProfile',
  data() {
    return {
      uid: 'new',
      gameInfo: {},
      permissionEdit: false
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    createdTime() {
      return moment(this.gameInfo.createdAt).format('YYYY-MM-DD HH:MM:SS')
    }
  },
  mounted() {
    this.uid = this.$route.params.uid
    this.getData()
    this.permissionEdit =
      this.userInfo.permissions.includes(`${this.uid}-edit`) ||
      this.userInfo.permissions.includes(`${this.uid}-publish`)
  },

  methods: {
    getData() {
      request({
        url: '/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.gameInfo = data.gameList[0]
      })
    },
    delGame() {
      this.$confirm(`是否删除游戏：${this.gameInfo.game_name}？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          request({
            url: '/games/del',
            method: 'post',
            data: {
              gameList: [{ _id: this.uid }]
            }
          }).then(res => {
            const { data } = res
            if (data.errcode !== 0) {
              this.$notify.error({
                title: '错误',
                message: data.errmsg
              })
              return
            }
            this.$message.success('已成功删除该游戏')
            this.$router.push('/games/list')
          })
        })
        .catch(() => {
          this.$notify.info('已取消删除')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.p-game-profile {
  .icon-box {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
  }
}
</style>