cfc/cfc-web/src/views/Rewards.vue

<template>
  <div class="page-container">
    <el-card>
      <div slot="header">
        <span>奖励管理</span>
        <el-button
          type="primary"
          size="small"
          style="float: right"
          @click="handleRefresh"
          :loading="loading"
        >
          刷新
        </el-button>
      </div>

      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <!-- 奖励列表 -->
        <el-tab-pane label="奖励列表" name="list">
          <!-- 搜索筛选 -->
          <el-form :inline="true" :model="searchForm" style="margin-bottom: 20px">
            <el-form-item label="家庭">
              <el-input
                v-model="searchForm.familyName"
                placeholder="点击选择家庭"
                readonly
                @click.native="showFamilySelector"
              >
                <el-button
                  slot="append"
                  icon="el-icon-close"
                  v-if="searchForm.familyId"
                  @click.stop="clearFamily"
                  style="padding: 8px"
                ></el-button>
                <i slot="suffix" class="el-input__icon el-icon-arrow-down" @click.stop="showFamilySelector"></i>
              </el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="searchForm.status" placeholder="全部状态" clearable @change="handleSearch">
                <el-option label="可用" value="available"></el-option>
                <el-option label="待审批" value="pending"></el-option>
                <el-option label="已兑换" value="exchanged"></el-option>
                <el-option label="已拒绝" value="rejected"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>

          <!-- 家庭选择对话框 -->
          <el-dialog title="选择家庭" :visible.sync="familyDialogVisible" width="600px">
            <el-table :max-height="tableHeight" style="cursor: pointer" :data="familyList" border v-loading="familyLoading" @row-click="selectFamily">
              <el-table-column prop="id" label="ID" width="80"></el-table-column>
              <el-table-column prop="name" label="家庭名称" min-width="150"></el-table-column>
              <el-table-column prop="inviteCode" label="邀请码" width="120"></el-table-column>
              <el-table-column prop="createdAt" label="创建时间" width="180">
                <template slot-scope="scope">
                  {{ formatDate(scope.row.createdAt) }}
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              style="margin-top: 15px; text-align: right"
              @current-change="loadFamilies"
              :current-page="familyPagination.current"
              :page-size="familyPagination.size"
              :total="familyPagination.total"
              layout="total, prev, pager, next"
            ></el-pagination>
          </el-dialog>

          <el-table :data="tableData" border v-loading="loading" style="width: 100%" :max-height="tableHeight">
             <el-table-column prop="id" label="ID" width="80">
               <template slot="header">
                 <span class="sort-header" @click.stop="onSortClick('id', $event)">ID<span v-if="sortIndex('id') !== null" class="sort-index" :class="sortClass('id') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('id') }}</span>{{ sortIcon('id') }}</span>
               </template>
             </el-table-column>
             <el-table-column prop="title" label="奖励名称" min-width="200">
               <template slot="header">
                 <span class="sort-header" @click.stop="onSortClick('title', $event)">奖励名称<span v-if="sortIndex('title') !== null" class="sort-index" :class="sortClass('title') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('title') }}</span>{{ sortIcon('title') }}</span>
               </template>
             </el-table-column>
             <el-table-column prop="pointsRequired" label="所需积分" width="120">
               <template slot-scope="scope">
                 <el-tag type="warning">{{ scope.row.pointsRequired }}</el-tag>
               </template>
               <template slot="header">
                 <span class="sort-header" @click.stop="onSortClick('pointsRequired', $event)">所需积分<span v-if="sortIndex('pointsRequired') !== null" class="sort-index" :class="sortClass('pointsRequired') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('pointsRequired') }}</span>{{ sortIcon('pointsRequired') }}</span>
               </template>
             </el-table-column>
             <el-table-column prop="category" label="分类" width="100">
               <template slot="header">
                 <span class="sort-header" @click.stop="onSortClick('category', $event)">分类<span v-if="sortIndex('category') !== null" class="sort-index" :class="sortClass('category') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('category') }}</span>{{ sortIcon('category') }}</span>
               </template>
             </el-table-column>
             <el-table-column prop="familyId" label="家庭ID" width="80">
               <template slot="header">
                 <span class="sort-header" @click.stop="onSortClick('familyId', $event)">家庭ID<span v-if="sortIndex('familyId') !== null" class="sort-index" :class="sortClass('familyId') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('familyId') }}</span>{{ sortIcon('familyId') }}</span>
               </template>
             </el-table-column>
             <el-table-column prop="status" label="状态" width="100">
               <template slot-scope="scope">
                 <el-tag :type="getStatusType(scope.row.status)" size="small">
                   {{ getStatusText(scope.row.status) }}
                 </el-tag>
               </template>
               <template slot="header">
                 <span class="sort-header" @click.stop="onSortClick('status', $event)">状态<span v-if="sortIndex('status') !== null" class="sort-index" :class="sortClass('status') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('status') }}</span>{{ sortIcon('status') }}</span>
               </template>
             </el-table-column>
             <el-table-column prop="createdAt" label="创建时间" width="180">
               <template slot-scope="scope">
                 {{ formatDate(scope.row.createdAt) }}
               </template>
               <template slot="header">
                 <span class="sort-header" @click.stop="onSortClick('createdAt', $event)">创建时间<span v-if="sortIndex('createdAt') !== null" class="sort-index" :class="sortClass('createdAt') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('createdAt') }}</span>{{ sortIcon('createdAt') }}</span>
               </template>
             </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
              <template slot-scope="{ row }">
                <el-button
                  v-if="row.status === 'pending'"
                  size="mini"
                  type="primary"
                  @click="handleApprove(row, true)"
                >
                  通过
                </el-button>
                <el-dropdown v-if="row.status === 'pending'" trigger="hover" @command="(cmd) => handleActionCmd(row, cmd)">
                  <el-button size="mini">
                    更多<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="reject" icon="el-icon-close">拒绝</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            style="margin-top: 20px; text-align: right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.current"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.size"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </el-tab-pane>

        <!-- 奖励模板 -->
        <el-tab-pane label="奖励模板" name="templates">
          <el-button type="primary" size="small" style="margin-bottom: 15px" @click="showCreateTemplate">
            新建模板
          </el-button>
          <el-table :data="templates" border v-loading="loadingTemplates" style="width: 100%" :max-height="tableHeight">
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="title" label="模板名称" min-width="200"></el-table-column>
            <el-table-column prop="pointsRequired" label="所需积分" width="120">
              <template slot-scope="scope">
                <el-tag type="warning">{{ scope.row.pointsRequired }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="category" label="分类" width="100"></el-table-column>
            <el-table-column prop="createdAt" label="创建时间" width="180">
              <template slot-scope="scope">
                {{ formatDate(scope.row.createdAt) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
              <template slot-scope="{ row }">
                <el-button size="mini" @click="handleDeleteTemplate(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 创建奖励模板对话框 -->
    <el-dialog title="新建奖励模板" :visible.sync="dialogVisible" width="500px">
      <el-form :model="templateForm" label-width="100px">
        <el-form-item label="奖励名称">
          <el-input v-model="templateForm.title" placeholder="请输入奖励名称"></el-input>
        </el-form-item>
        <el-form-item label="所需积分">
          <el-input-number v-model="templateForm.pointsRequired" :min="1" :max="10000"></el-input-number>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="templateForm.category" placeholder="请选择分类">
            <el-option label="玩具" value="玩具"></el-option>
            <el-option label="图书" value="图书"></el-option>
            <el-option label="美食" value="美食"></el-option>
            <el-option label="娱乐" value="娱乐"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreateTemplate" :loading="creating">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SortMixin from '@/mixins/SortMixin'
import { getRewardsList, getRewardTemplates, createRewardTemplate, deleteRewardTemplate, approveReward, getFamilyList } from '@/api/admin'

export default {
  name: 'Rewards',
  mixins: [SortMixin],
  computed: {
    tableHeight() {
      return window.innerHeight - 340
    }
  },
  data() {
    return {
      activeTab: 'list',
      loading: false,
      loadingTemplates: false,
      tableData: [],
      templates: [],
      sortableColumns: { id: 'ID', title: '奖励名称', pointsRequired: '所需积分', category: '分类', familyId: '家庭ID', status: '状态', createdAt: '创建时间' },
      searchForm: {
        status: '',
        familyId: '',
        familyName: ''
      },
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      // 家庭选择对话框
      familyDialogVisible: false,
      familyLoading: false,
      familyList: [],
      familyPagination: {
        current: 1,
        size: 10,
        total: 0
      },
      // 创建模板对话框
      dialogVisible: false,
      creating: false,
      templateForm: {
        title: '',
        pointsRequired: 100,
        category: ''
      }
    }
  },
  mounted() {
    this.loadRewards()
  },
  methods: {
    loadList() {
      this.loadRewards()
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'approve': this.handleApprove(row, true); break;
        case 'reject': this.handleApprove(row, false); break;
        case 'deleteTemplate': this.handleDeleteTemplate(row); break;
      }
    },
    async loadRewards() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.current,
          size: this.pagination.size,
          status: this.searchForm.status,
          familyId: this.searchForm.familyId || undefined
        }
        if (this.sortState.length > 0) params.sort = this.sortState
        const res = await getRewardsList(params)
        this.tableData = res.data.records || res.data || []
        this.pagination.total = res.data.total || this.tableData.length
      } catch (error) {
        this.$message.error(error.message || '加载奖励列表失败')
      } finally {
        this.loading = false
      }
    },
    async loadFamilies(page = 1) {
      this.familyLoading = true
      try {
        const res = await getFamilyList({
          page: page,
          size: this.familyPagination.size
        })
        this.familyList = res.data.records || res.data || []
        this.familyPagination.total = res.data.total || this.familyList.length
        this.familyPagination.current = page
      } catch (error) {
        this.$message.error(error.message || '加载家庭列表失败')
      } finally {
        this.familyLoading = false
      }
    },
    selectFamily(row) {
      this.searchForm.familyId = row.id
      this.searchForm.familyName = row.name
      this.familyDialogVisible = false
      this.handleSearch()
    },
    showFamilySelector() {
      this.familyDialogVisible = true
      this.loadFamilies()
    },
    clearFamily() {
      this.searchForm.familyId = ''
      this.searchForm.familyName = ''
      this.handleSearch()
    },
    async loadTemplates() {
      this.loadingTemplates = true
      try {
        const res = await getRewardTemplates()
        this.templates = res.data || []
      } catch (error) {
        this.$message.error(error.message || '加载模板失败')
      } finally {
        this.loadingTemplates = false
      }
    },
    handleTabClick(tab) {
      if (tab.name === 'templates' && this.templates.length === 0) {
        this.loadTemplates()
      }
    },
    handleSearch() {
      this.pagination.current = 1
      this.loadRewards()
    },
    handleReset() {
      this.searchForm = {
        status: ''
      }
      this.handleSearch()
    },
    handleRefresh() {
      if (this.activeTab === 'list') {
        this.loadRewards()
      } else {
        this.loadTemplates()
      }
    },
    handleSizeChange(val) {
      this.pagination.size = val
      this.pagination.current = 1
      this.loadRewards()
    },
    handleCurrentChange(val) {
      this.pagination.current = val
      this.loadRewards()
    },
    async handleApprove(row, approved) {
      this.$confirm(
        approved ? `确定通过 "${row.title}" 的兑换申请吗？` : `确定拒绝 "${row.title}" 的兑换申请吗？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async () => {
        try {
          await approveReward(row.id, { approved })
          this.$message.success(approved ? '已通过' : '已拒绝')
          this.loadRewards()
        } catch (error) {
          this.$message.error(error.message || '操作失败')
        }
      }).catch(() => {})
    },
    getStatusType(status) {
      const types = {
        available: 'success',
        pending: 'warning',
        exchanged: 'info',
        rejected: 'danger'
      }
      return types[status] || 'info'
    },
    getStatusText(status) {
      const texts = {
        available: '可用',
        pending: '待审批',
        exchanged: '已兑换',
        rejected: '已拒绝'
      }
      return texts[status] || status
    },
    showCreateTemplate() {
      this.templateForm = {
        title: '',
        pointsRequired: 100,
        category: ''
      }
      this.dialogVisible = true
    },
    async handleCreateTemplate() {
      if (!this.templateForm.title) {
        this.$message.warning('请输入奖励名称')
        return
      }
      if (!this.templateForm.category) {
        this.$message.warning('请选择分类')
        return
      }
      this.creating = true
      try {
        await createRewardTemplate(this.templateForm)
        this.$message.success('创建成功')
        this.dialogVisible = false
        this.loadTemplates()
      } catch (error) {
        this.$message.error(error.message || '创建失败')
      } finally {
        this.creating = false
      }
    },
    handleDeleteTemplate(row) {
      this.$confirm('确定要删除该模板吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await deleteRewardTemplate(row.id)
          this.$message.success('删除成功')
          this.loadTemplates()
        } catch (error) {
          this.$message.error(error.message || '删除失败')
        }
      }).catch(() => {})
    },
    formatDate(dateStr) {
      if (!dateStr) return '-'
      const date = new Date(dateStr)
      return date.toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>
.sort-header {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
}
.sort-header:hover {
  color: #409eff;
}
</style>