LotteryAdmin/src/views/thirdGame/setting/index.vue

<template>
  <div class="new-app-container layout-vertical game-category-page">
    <div class="content-panel">
      <div class="table-section">
        <el-table v-loading="loading" :data="tableData"
          height="calc(100vh - 200px)" style="width: 100%; border-radius: 12px; overflow: hidden;"
          empty-text="暂无数据">
          <el-table-column prop="game_type" label="游戏大类ID" width="120" align="center" />
          <el-table-column prop="name" label="游戏大类名称" width="140" align="center" />
          <el-table-column label="PC Logo" width="120" align="center">
            <template slot-scope="{ row }">
              <el-image v-if="row.logo" :src="row.logo" style="width: 50px; height: 50px;" fit="cover"
                :preview-src-list="[row.logo]" />
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="H5/APP Logo" width="130" align="center">
            <template slot-scope="{ row }">
              <el-image v-if="row.logo_h5" :src="row.logo_h5" style="width: 50px; height: 50px;" fit="cover"
                :preview-src-list="[row.logo_h5]" />
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="游戏说明" min-width="180" align="center" show-overflow-tooltip />
          <el-table-column prop="sort" label="排序" width="180" align="center">
            <template slot-scope="{ row }">
              <el-input-number v-model="row.sort" size="small" controls-position="right" style="width: 120px"
                @change="handleSortChange(row)" />
            </template>
          </el-table-column>
          <el-table-column label="启用状态" width="110" align="center">
            <template slot-scope="{ row }">
              <el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#f56c6c"
                @change="handleEnabledChange(row)" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" size="small" class="ym-view-btn" @click="handleEdit(row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 修改弹窗 -->
    <Dialog ref="editDialog" :dialog-actions="{
      width: '700px',
      title: '修改游戏大类',
    }" :loading="saving" @confirm="handleConfirm">
      <template slot="content">
        <el-form ref="editFormRef" :model="editForm" label-width="120px">
          <el-form-item label="游戏大类名称">
            <span>{{ editForm.name }}</span>
          </el-form-item>
          <el-form-item label="PC Logo">
            <UploadOneImage v-model="editForm.logo" />
          </el-form-item>
          <el-form-item label="H5/APP Logo">
            <UploadOneImage v-model="editForm.logo_h5" />
          </el-form-item>
          <el-form-item label="游戏说明">
            <el-input v-model="editForm.description" type="textarea" :rows="4" placeholder="请输入游戏说明" style="width: 400px" />
          </el-form-item>
        </el-form>
      </template>
    </Dialog>
  </div>
</template>

<script>
import Dialog from '@/components/Dialog/index.vue'
import UploadOneImage from '@/components/UploadOneImage/index.vue'
import { getEgameItems, updateEgame, setEgameStatus } from '@/api/data'

export default {
  name: 'ThirdGameCategory',
  components: {
    Dialog,
    UploadOneImage
  },
  data() {
    return {
      loading: false,
      saving: false,
      tableData: [],
      editForm: {}
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    fetchList() {
      this.loading = true
      getEgameItems({ item_type: 'category', page: 1, limit: 200 }).then(res => {
        if (res.code === 0 || res.code === 99) {
          const data = res.data || {}
          this.tableData = (data.data || []).map(row => this.mapRow(row))
        } else {
          this.$message.error(res.msg || '获取列表失败')
        }
      }).catch(() => {
        this.$message.error('请求异常')
      }).finally(() => {
        this.loading = false
      })
    },
    // 接口字段映射
    mapRow(row) {
      return {
        id: row.id,
        game_type: row.game_type,
        name: row.name,
        description: row.description || '',
        logo: row.logo || row.logo_pc || '',
        logo_h5: row.logo_h5 || '',
        sort: row.sort != null ? row.sort : 0,
        status: Number(row.status) === 1 ? 1 : 0
      }
    },
    handleSortChange(row) {
      // 排序修改（可直接输入或上下调整），数字越大越靠前
      updateEgame({ id: row.id, sort: row.sort }).then(res => {
        if (res.code === 0) {
          this.$message.success(`游戏大类 ${row.name} 排序已修改为 ${row.sort}`)
        } else {
          this.$message.error(res.msg || '排序修改失败')
        }
      }).catch(() => {
        this.$message.error('请求异常')
      })
    },
    handleEnabledChange(row) {
      setEgameStatus({ id: row.id, status: row.status }).then(res => {
        if (res.code === 0) {
          this.$message.success(`游戏大类 ${row.name} 已${row.status === 1 ? '启用' : '停用'}`)
        } else {
          this.$message.error(res.msg || '状态修改失败')
          row.status = row.status === 1 ? 0 : 1 // 回滚
        }
      }).catch(() => {
        this.$message.error('请求异常')
        row.status = row.status === 1 ? 0 : 1
      })
    },
    handleEdit(row) {
      this.editForm = { ...row }
      this.$refs.editDialog.open()
    },
    handleConfirm() {
      this.saving = true
      const params = {
        id: this.editForm.id,
        name: this.editForm.name,
        description: this.editForm.description,
        logo_pc: this.editForm.logo,
        logo_h5: this.editForm.logo_h5
      }
      updateEgame(params).then(res => {
        if (res.code === 0) {
          this.$message.success('修改成功')
          this.$refs.editDialog.close()
          this.fetchList()
        } else {
          this.$message.error(res.msg || '修改失败')
        }
      }).catch(() => {
        this.$message.error('请求异常')
      }).finally(() => {
        this.saving = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.game-category-page {
  padding: 16px;
  background: #f5f7fa;
}
.content-panel {
  min-height: calc(100vh - 82px);
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}
.table-section {
  padding: 18px 20px 20px;
}
.ym-view-btn {
  padding: 8px 0;
  font-size: 14px;
}
</style>