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="id" 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.pc_image" :src="row.pc_image" style="width: 50px; height: 50px;" fit="cover"
                :preview-src-list="[row.pc_image]" />
              <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.h5_image" :src="row.h5_image" style="width: 50px; height: 50px;" fit="cover"
                :preview-src-list="[row.h5_image]" />
              <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" :min="1" 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.enabled" 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.pc_image" />
          </el-form-item>
          <el-form-item label="H5/APP Logo">
            <UploadOneImage v-model="editForm.h5_image" />
          </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'

// 假数据
const MOCK_DATA = [
  { id: 1, name: '视讯', pc_image: '', h5_image: '', sort: 1, description: '真人视讯游戏', enabled: true },
  { id: 2, name: '电子', pc_image: '', h5_image: '', sort: 2, description: '电子老虎机游戏', enabled: true },
  { id: 3, name: '捕鱼', pc_image: '', h5_image: '', sort: 3, description: '捕鱼游戏', enabled: true },
  { id: 4, name: '体育', pc_image: '', h5_image: '', sort: 4, description: '体育赛事游戏', enabled: false },
  { id: 5, name: '棋牌', pc_image: '', h5_image: '', sort: 5, description: '棋牌游戏', enabled: true }
]

export default {
  name: 'ThirdGameCategory',
  components: {
    Dialog,
    UploadOneImage
  },
  data() {
    return {
      loading: false,
      saving: false,
      tableData: [...MOCK_DATA],
      editForm: {}
    }
  },
  methods: {
    handleSortChange(row) {
      // 排序修改（可直接输入或上下调整），最低 1
      if (row.sort < 1) row.sort = 1
      this.$message.success(`游戏大类 ${row.name} 排序已修改为 ${row.sort}`)
    },
    handleEnabledChange(row) {
      this.$message.success(`游戏大类 ${row.name} 已${row.enabled ? '开启' : '关闭'}`)
    },
    handleEdit(row) {
      this.editForm = { ...row }
      this.$refs.editDialog.open()
    },
    handleConfirm() {
      // 保存修改到列表
      const idx = this.tableData.findIndex(item => item.id === this.editForm.id)
      if (idx > -1) {
        this.tableData[idx] = { ...this.editForm }
      }
      this.$message.success('修改成功')
      this.$refs.editDialog.close()
    }
  }
}
</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>