cfc/cfc-web/src/views/admin/AssessmentProducts.vue

<template>
  <div class="assessment-products admin-page">
    <el-card>
      <div slot="header" class="admin-page-header">
        <span class="admin-page-title">测评商品管理</span>
        <div class="admin-page-actions">
          <el-input
            v-model="filters.keyword"
            placeholder="搜索商品名称"
            prefix-icon="el-icon-search"
            clearable
            class="header-search"
            @clear="loadList"
            @keyup.enter.native="loadList"
          />
          <el-select v-model="filters.status" placeholder="商品状态" @change="loadList" clearable>
            <el-option label="全部状态" value="" />
            <el-option label="待审核" value="pending" />
            <el-option label="待上架" value="approved" />
            <el-option label="已上架" value="on_shelf" />
            <el-option label="已下架" value="off_shelf" />
            <el-option label="已拒绝" value="rejected" />
          </el-select>
          <el-button type="primary" size="mini" @click="loadList">查询</el-button>
          <el-button type="success" size="mini" icon="el-icon-plus" @click="$router.push('/product-edit')">新增测评商品</el-button>
        </div>
      </div>

      <div class="table-scroll-wrap">


      <el-table :data="list" v-loading="loading" border stripe :max-height="tableHeight">
        <el-table-column prop="id" label="ID" width="70" />
        <el-table-column label="商品图片" width="80">
          <template slot-scope="{ row }">
            <img v-if="row.coverImage" :src="row.coverImage" class="product-thumb"
                 @click="previewImage(row.coverImage)" />
            <span v-else style="color:#999">-</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" min-width="160" show-overflow-tooltip />
        <el-table-column label="测评类型" width="90">
          <template slot-scope="{ row }">
            <el-tag :type="row.assessmentType === 'bundle' ? 'warning' : 'primary'" size="mini">
              {{ row.assessmentType === 'bundle' ? '组合' : '单包' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="次数" width="70" prop="totalSessions" />
        <el-table-column label="有效期(天)" width="90" prop="validityDays" />
        <el-table-column label="售价(元)" width="90">
          <template slot-scope="{ row }">
            {{ formatPriceWithSymbol(row.price || 0) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="90">
          <template slot-scope="{ row }">
            <el-tag :type="statusType(row.status)" size="mini">{{ statusLabel(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" @click="edit(row.id)">编辑</el-button>
            <el-button v-if="row.status === 'pending'" type="text" size="mini" @click="handleReview(row, 'approve')">审核通过</el-button>
            <el-button v-if="row.status === 'on_shelf' || row.status === 'off_shelf'" type="text" size="mini" @click="handleShelve(row)">
              {{ row.status === 'on_shelf' ? '下架' : '上架' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      </el-table>

      </div><div class="pagination-wrap">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="page"
          :page-sizes="[10, 20, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </el-card>

    <el-dialog title="商品详情" :visible.sync="detailVisible" width="600px">
      <el-descriptions v-if="detail" :column="2" border>
        <el-descriptions-item label="商品ID">{{ detail.id }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{ detail.name }}</el-descriptions-item>
        <el-descriptions-item label="商品类型">{{ detail.productType }}</el-descriptions-item>
        <el-descriptions-item label="测评类型">{{ detail.assessmentType === 'bundle' ? '组合' : '单包' }}</el-descriptions-item>
        <el-descriptions-item label="测评次数">{{ detail.totalSessions }}</el-descriptions-item>
        <el-descriptions-item label="有效期(天)">{{ detail.validityDays }}</el-descriptions-item>
        <el-descriptions-item label="规划师范围">{{ detail.guideScope }}</el-descriptions-item>
        <el-descriptions-item label="价格(元)">{{ formatPriceWithSymbol(detail.price || 0) }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="statusType(detail.status)" size="mini">{{ statusLabel(detail.status) }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import { getProductList, reviewProduct, shelveProduct } from '@/api/admin'

export default {
  name: 'AssessmentProducts',
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      page: 1,
      size: 20,
      total: 0,
      filters: {
        keyword: '',
        status: ''
      sortProp: '' ,
      sortOrder: '' ,
      },
      detail: null,
      detailVisible: false
    }
  },
  mounted() {
    this.loadList()
  },
  methods: {
    async loadList() {
      this.loading = true
      try {
        const res = await getProductList({
          page: this.page,
          size: this.size,
          productType: 'assessment',
          keyword: this.filters.keyword || undefined,
          status: this.filters.status || undefined
    handleSortChange({ prop, order }) {
      this.sortProp = prop
      this.sortOrder = order
      this.page = 1
      this.fetchList && this.fetchList()
    },
        })
        if (res.code === 200 && res.data) {
          this.list = res.data.records || []
          this.total = res.data.total || 0
        }
      } catch (e) {
        this.$message.error('加载失败')
      } finally {
        this.loading = false
      }
    },
    edit(id) {
      this.$router.push('/product-edit?id=' + id)
    },
    async handleReview(row, action) {
      try {
        await this.$confirm('确认' + (action === 'approve' ? '通过' : '拒绝') + '该商品审核？', '提示')
        await reviewProduct(row.id, { action })
        this.$message.success('操作成功')
        this.loadList()
      } catch (e) {
        if (e !== 'cancel') this.$message.error('操作失败')
      }
    },
    async handleShelve(row) {
      const action = row.status === 'on_shelf' ? '下架' : '上架'
      try {
        await this.$confirm('确认' + action + '该商品？', '提示')
        await shelveProduct(row.id, { shelve: row.status !== 'on_shelf' })
        this.$message.success(action + '成功')
        this.loadList()
      } catch (e) {
        if (e !== 'cancel') this.$message.error(action + '失败')
      }
    },
    previewImage(url) {
      this.detail = { coverImage: url }
      this.detailVisible = true
    },
    statusType(status) {
      const map = { pending: 'warning', approved: 'info', on_shelf: 'success', off_shelf: 'info', rejected: 'danger' }
      return map[status] || ''
    },
    statusLabel(status) {
      const map = { pending: '待审核', approved: '待上架', on_shelf: '已上架', off_shelf: '已下架', rejected: '已拒绝' }
      return map[status] || status
    },
    formatPriceWithSymbol(price) {
      if (price === 0) return '免费'
      return '¥' + (price / 100).toFixed(2)
    },
    handleSizeChange(val) { this.size = val; this.page = 1; this.loadList() },
    handlePageChange(val) { this.page = val; this.loadList() }
  }
}
</script>

<style scoped>
.assessment-products { padding: 20px; }
.admin-page-header { display: flex; justify-content: space-between; align-items: center; }
.admin-page-actions { display: flex; gap: 8px; align-items: center; }
.header-search { width: 200px; }
.product-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; cursor: pointer; }
.pagination-wrap { margin-top: 16px; text-align: right; }
</style>