hfb_sys/frontend/src/views/admin/AdminListingReviewView.vue

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'

import { fetchAdminFileBlob } from '@/api/files'
import { approveListing, fetchPendingReviewListings, rejectListing, type Listing } from '@/api/listings'

const loading = ref(false)
const submitting = ref(false)
const listings = ref<Listing[]>([])
const activeListing = ref<Listing | null>(null)
const evidenceListing = ref<Listing | null>(null)
const rejectReason = ref('')

onMounted(loadListings)

async function loadListings() {
  loading.value = true
  try {
    listings.value = await fetchPendingReviewListings()
  } finally {
    loading.value = false
  }
}

async function handleApprove(row: Listing) {
  submitting.value = true
  try {
    await approveListing(row.id)
    ElMessage.success('审核通过，商品已上架')
    await loadListings()
  } catch (error) {
    ElMessage.error(readError(error, '审核失败'))
  } finally {
    submitting.value = false
  }
}

function openReject(row: Listing) {
  activeListing.value = row
  rejectReason.value = row.review_reason || ''
}

async function handleReject() {
  if (!activeListing.value) return
  submitting.value = true
  try {
    await rejectListing(activeListing.value.id, rejectReason.value)
    ElMessage.success('已拒绝发布并通知号主')
    activeListing.value = null
    rejectReason.value = ''
    await loadListings()
  } catch (error) {
    ElMessage.error(readError(error, '拒绝失败'))
  } finally {
    submitting.value = false
  }
}

function openEvidence(row: Listing) {
  evidenceListing.value = row
}

function extractObjectKey(url: string) {
  try {
    const parsed = new URL(url, window.location.origin)
    return parsed.searchParams.get('key') || url
  } catch {
    return url
  }
}

async function openScreenshot(url: string) {
  try {
    const blob = await fetchAdminFileBlob(extractObjectKey(url))
    window.open(URL.createObjectURL(blob), '_blank')
  } catch {
    window.open(url, '_blank')
  }
}

function readError(error: unknown, fallback: string) {
  if (typeof error === 'object' && error && 'response' in error) {
    const response = (error as { response?: { data?: { message?: string } } }).response
    return response?.data?.message || fallback
  }
  return fallback
}
</script>

<template>
  <section class="page">
    <div class="page-header-row">
      <div class="page-header">
        <p class="eyebrow">Review</p>
        <h1>商品审核</h1>
        <p>审核号主提交的账号资产、价格、押金和租期规则。</p>
      </div>
      <el-button @click="loadListings">刷新</el-button>
    </div>

    <el-table v-loading="loading" class="table-panel" :data="listings">
      <el-table-column prop="title" label="标题" min-width="180" />
      <el-table-column prop="owner_id" label="号主" width="90" />
      <el-table-column prop="server_region" label="区服" width="120" />
      <el-table-column prop="login_platform" label="平台" width="120" />
      <el-table-column prop="haf_coin_amount" label="哈夫币" width="110" />
      <el-table-column prop="rank_level" label="段位" width="110" />
      <el-table-column prop="price_hourly" label="时租" width="90" />
      <el-table-column prop="deposit_amount" label="押金" width="90" />
      <el-table-column label="截图" width="90">
        <template #default="{ row }">
          <el-button size="small" :disabled="!row.screenshot_urls?.length" @click="openEvidence(row)">
            {{ row.screenshot_urls?.length || 0 }} 个
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="updated_at" label="提交时间" min-width="180" />
      <el-table-column label="操作" width="170">
        <template #default="{ row }">
          <el-button size="small" type="primary" :loading="submitting" @click="handleApprove(row)">通过</el-button>
          <el-button size="small" type="danger" @click="openReject(row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :model-value="!!activeListing" title="拒绝发布" width="560px" @update:model-value="activeListing = null">
      <div v-if="activeListing" class="dialog-body">
        <p><strong>{{ activeListing.title }}</strong></p>
        <el-input v-model="rejectReason" type="textarea" :rows="4" placeholder="填写拒绝原因，号主会在通知中看到审核结果" />
      </div>
      <template #footer>
        <el-button @click="activeListing = null">取消</el-button>
        <el-button type="danger" :loading="submitting" @click="handleReject">确认拒绝</el-button>
      </template>
    </el-dialog>

    <el-dialog :model-value="!!evidenceListing" title="账号资产截图" width="680px" @update:model-value="evidenceListing = null">
      <div v-if="evidenceListing" class="dialog-body">
        <p><strong>{{ evidenceListing.title }}</strong></p>
        <div v-if="evidenceListing.screenshot_urls?.length" class="evidence-list">
          <div v-for="url in evidenceListing.screenshot_urls" :key="url" class="evidence-row">
            <span>{{ url }}</span>
            <el-button size="small" @click="openScreenshot(url)">打开</el-button>
          </div>
        </div>
        <p v-else>暂无截图</p>
      </div>
      <template #footer>
        <el-button @click="evidenceListing = null">关闭</el-button>
      </template>
    </el-dialog>
  </section>
</template>