feat(admin): 新增商品配置与系统公告两个后台页面

- src/api/admin/product.ts、src/api/admin/notice.ts 对齐后端新接口 - ProductManagementView：列表/筛选/新建编辑/上下架/删除，新建默认下架有提示 - NoticeManagementView：列表/筛选/新建编辑/发布下架/删除 - 状态列一律用接口返回的 statusText，不在前端写死中文 - id 按字符串处理（雪花 id 超过 JS 安全整数范围，数字会被四舍五入）
2026-10-16 16:33:22 +08:00
1 parent 1148458ca1
commit db313f4aa6
@@ -0,0 +1,463 @@
+<!-- Author: fruit.com.cn -->
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import {
+  createProductApi,
+  deleteProductApi,
+  pageProductsApi,
+  updateProductApi,
+  updateProductStatusApi
+} from '@/api/admin/product'
+import { useRbac } from '@/stores/rbac'
+import { dateCell, formatCount } from '@/utils/format'
+import PageHeading from '@/views/components/PageHeading.vue'
+
+const { can } = useRbac()
+
+const loading = ref(false)
+const list = ref([])
+const total = ref(0)
+const pageIndex = ref(1)
+const pageSize = ref(10)
+const typeFilter = ref(undefined)
+const statusFilter = ref(undefined)
+const platformFilter = ref(undefined)
+const keyword = ref('')
+
+const dialogVisible = ref(false)
+const saving = ref(false)
+const editingId = ref(null)
+const form = reactive({
+  code: '',
+  name: '',
+  type: 'COIN_PACK',
+  platform: 'ALL',
+  storeProductId: '',
+  coinAmount: 0,
+  bonusCoin: 0,
+  priceAmount: 0,
+  currency: 'IDR',
+  displayPrice: '',
+  regionCodes: 'ID',
+  vipDays: 0,
+  sort: 0,
+  effectiveAt: null,
+  expireAt: null
+})
+
+const typeOptions = [
+  { value: 'COIN_PACK', label: '金币包' },
+  { value: 'VIP', label: '会员（第二阶段）' }
+]
+
+const platformOptions = [
+  { value: 'ALL', label: '全平台通用' },
+  { value: 'GOOGLE', label: 'Google Play' },
+  { value: 'APPLE', label: 'App Store' }
+]
+
+const currencyOptions = ['IDR', 'USD']
+
+function platformLabel(value) {
+  return platformOptions.find((item) => item.value === value)?.label || value || '-'
+}
+
+function priceText(row) {
+  if (row.displayPrice) return row.displayPrice
+  if (row.priceAmount === null || row.priceAmount === undefined) return '-'
+  return `${row.priceAmount} ${row.currency || ''}`.trim()
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const res = await pageProductsApi({
+      pageIndex: pageIndex.value,
+      pageSize: pageSize.value,
+      type: typeFilter.value,
+      status: statusFilter.value,
+      platform: platformFilter.value,
+      keyword: keyword.value.trim() || undefined
+    })
+    list.value = res?.data?.list || []
+    total.value = res?.data?.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+function search() {
+  pageIndex.value = 1
+  load()
+}
+
+function resetFilters() {
+  typeFilter.value = undefined
+  statusFilter.value = undefined
+  platformFilter.value = undefined
+  keyword.value = ''
+  search()
+}
+
+function handleSizeChange() {
+  pageIndex.value = 1
+  load()
+}
+
+function nextSort() {
+  return list.value.reduce((max, item) => Math.max(max, item.sort || 0), 0) + 1
+}
+
+function openCreate() {
+  editingId.value = null
+  Object.assign(form, {
+    code: '',
+    name: '',
+    type: 'COIN_PACK',
+    platform: 'ALL',
+    storeProductId: '',
+    coinAmount: 0,
+    bonusCoin: 0,
+    priceAmount: 0,
+    currency: 'IDR',
+    displayPrice: '',
+    regionCodes: 'ID',
+    vipDays: 0,
+    sort: nextSort(),
+    effectiveAt: null,
+    expireAt: null
+  })
+  dialogVisible.value = true
+}
+
+function openEdit(row) {
+  editingId.value = row.id
+  Object.assign(form, {
+    code: row.code,
+    name: row.name,
+    type: row.type,
+    platform: row.platform,
+    storeProductId: row.storeProductId || '',
+    coinAmount: row.coinAmount ?? 0,
+    bonusCoin: row.bonusCoin ?? 0,
+    priceAmount: row.priceAmount ?? 0,
+    currency: row.currency || 'IDR',
+    displayPrice: row.displayPrice || '',
+    regionCodes: row.regionCodes || '',
+    vipDays: row.vipDays ?? 0,
+    sort: row.sort ?? 0,
+    effectiveAt: row.effectiveAt || null,
+    expireAt: row.expireAt || null
+  })
+  dialogVisible.value = true
+}
+
+function validateForm() {
+  if (!form.code.trim()) return '请填写商品编码'
+  if (!form.name.trim()) return '请填写商品名称'
+  if (form.storeProductId.trim() && !['GOOGLE', 'APPLE'].includes(form.platform)) {
+    return '填写了商店商品 id 时，平台要选 Google Play 或 App Store，否则客户端认不出来'
+  }
+  if (form.type === 'VIP') {
+    if (!form.vipDays || form.vipDays <= 0) return '会员商品的会员天数必须大于 0'
+  } else if (!form.coinAmount || form.coinAmount <= 0) {
+    return '金币包的金币数量必须大于 0'
+  }
+  return ''
+}
+
+async function saveProduct() {
+  const invalid = validateForm()
+  if (invalid) return ElMessage.warning(invalid)
+
+  const payload = {
+    code: form.code.trim(),
+    name: form.name.trim(),
+    type: form.type,
+    platform: form.platform,
+    storeProductId: form.storeProductId.trim(),
+    coinAmount: form.coinAmount || 0,
+    bonusCoin: form.bonusCoin || 0,
+    priceAmount: form.priceAmount || 0,
+    currency: form.currency,
+    displayPrice: form.displayPrice.trim(),
+    regionCodes: form.regionCodes.trim(),
+    vipDays: form.vipDays || 0,
+    sort: form.sort || 0,
+    effectiveAt: form.effectiveAt || null,
+    expireAt: form.expireAt || null
+  }
+  saving.value = true
+  try {
+    if (editingId.value) {
+      await updateProductApi(editingId.value, payload)
+      ElMessage.success('商品已更新')
+    } else {
+      await createProductApi(payload)
+      ElMessage.success('商品已创建（默认下架，请确认后再上架）')
+      pageIndex.value = 1
+    }
+    dialogVisible.value = false
+    await load()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function toggleStatus(row) {
+  const next = row.status === 1 ? 0 : 1
+  await updateProductStatusApi(row.id, next)
+  await load()
+}
+
+async function confirmDelete(row) {
+  try {
+    await ElMessageBox.confirm(`确定删除商品「${row.name}」吗？`, '删除确认', {
+      confirmButtonText: '确认删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+      confirmButtonClass: 'el-button--danger'
+    })
+  } catch {
+    return
+  }
+  await deleteProductApi(row.id)
+  ElMessage.success('商品已删除')
+  if (list.value.length === 1 && pageIndex.value > 1) pageIndex.value -= 1
+  await load()
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <PageHeading
+    eyebrow="订单与权益"
+    title="商品配置"
+    description="维护金币包与商店商品 id，客户端按商店商品 id 对齐发币口径。"
+  >
+    <el-button
+      v-if="can('product:update')"
+      type="primary"
+      class="primary-button"
+      @click="openCreate"
+    >
+      <el-icon><Plus /></el-icon>
+      新建商品
+    </el-button>
+  </PageHeading>
+
+  <section class="panel library-panel">
+    <div class="library-toolbar">
+      <div class="drama-filters">
+        <el-input
+          v-model="keyword"
+          clearable
+          placeholder="商品编码 / 名称"
+          @keyup.enter="search"
+          @clear="search"
+        />
+        <el-select v-model="typeFilter" clearable placeholder="全部类型" @change="search">
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-select v-model="platformFilter" clearable placeholder="全部平台" @change="search">
+          <el-option
+            v-for="item in platformOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-select v-model="statusFilter" clearable placeholder="全部状态" @change="search">
+          <el-option label="已上架" :value="1" />
+          <el-option label="已下架" :value="0" />
+        </el-select>
+        <el-button @click="search">查询</el-button>
+        <el-button @click="resetFilters">重置</el-button>
+      </div>
+      <span class="table-result-count">共 {{ total }} 个商品</span>
+    </div>
+
+    <el-table
+      v-loading="loading"
+      :data="list"
+      row-key="id"
+      empty-text="还没有配置商品"
+      class="drama-el-table"
+    >
+      <el-table-column prop="code" label="商品编码" min-width="150" />
+      <el-table-column prop="name" label="名称" min-width="160" />
+      <el-table-column prop="typeText" label="类型" width="140" />
+      <el-table-column label="平台" width="130">
+        <template #default="{ row }">{{ platformLabel(row.platform) }}</template>
+      </el-table-column>
+      <el-table-column label="商店商品 id" min-width="170">
+        <template #default="{ row }">
+          <span v-if="row.storeProductId">{{ row.storeProductId }}</span>
+          <span v-else class="table-empty-text">未配置</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="到账金币" width="110">
+        <template #default="{ row }">
+          <span v-if="row.type === 'COIN_PACK'">{{ formatCount(row.totalCoin) }}</span>
+          <span v-else class="table-empty-text">-</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="价格" width="140">
+        <template #default="{ row }">{{ priceText(row) }}</template>
+      </el-table-column>
+      <el-table-column prop="sort" label="排序" width="80" />
+      <el-table-column label="状态" width="100">
+        <template #default="{ row }">
+          <el-button
+            v-if="can('product:update')"
+            link
+            :type="row.status === 1 ? 'primary' : 'info'"
+            @click="toggleStatus(row)"
+            >{{ row.statusText }}</el-button
+          >
+          <el-tag v-else :type="row.status === 1 ? 'success' : 'info'" effect="light">{{
+            row.statusText
+          }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createdAt" label="创建时间" width="170" :formatter="dateCell" />
+      <el-table-column label="操作" width="150" fixed="right">
+        <template #default="{ row }">
+          <div class="table-actions">
+            <el-button
+              v-if="can('product:update')"
+              type="primary"
+              size="small"
+              @click="openEdit(row)"
+              >编辑</el-button
+            >
+            <el-button
+              v-if="can('product:update')"
+              type="danger"
+              size="small"
+              @click="confirmDelete(row)"
+              >删除</el-button
+            >
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination">
+      <el-pagination
+        v-model:current-page="pageIndex"
+        v-model:page-size="pageSize"
+        :page-sizes="[5, 10, 20, 50]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @current-change="load"
+        @size-change="handleSizeChange"
+      />
+    </div>
+  </section>
+
+  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑商品' : '新建商品'" width="720px">
+    <el-form label-position="top">
+      <div class="form-row">
+        <el-form-item label="商品编码" required>
+          <el-input v-model="form.code" placeholder="全局唯一，例如 coin_500_id" />
+        </el-form-item>
+        <el-form-item label="商品名称" required>
+          <el-input v-model="form.name" placeholder="展示给用户的名字" />
+        </el-form-item>
+      </div>
+      <div class="form-row">
+        <el-form-item label="类型">
+          <el-select v-model="form.type">
+            <el-option
+              v-for="item in typeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="平台">
+          <el-select v-model="form.platform">
+            <el-option
+              v-for="item in platformOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商店商品 id">
+          <el-input v-model="form.storeProductId" placeholder="Google Play / App Store 的商品 id" />
+        </el-form-item>
+      </div>
+      <div class="form-row">
+        <el-form-item v-if="form.type === 'COIN_PACK'" label="金币数量" required>
+          <el-input-number v-model="form.coinAmount" :min="0" :max="1000000" />
+        </el-form-item>
+        <el-form-item v-if="form.type === 'COIN_PACK'" label="赠送金币">
+          <el-input-number v-model="form.bonusCoin" :min="0" :max="1000000" />
+        </el-form-item>
+        <el-form-item v-if="form.type === 'VIP'" label="会员天数" required>
+          <el-input-number v-model="form.vipDays" :min="0" :max="3650" />
+        </el-form-item>
+      </div>
+      <div class="form-row">
+        <el-form-item label="价格">
+          <el-input-number v-model="form.priceAmount" :min="0" :precision="2" />
+        </el-form-item>
+        <el-form-item label="币种">
+          <el-select v-model="form.currency">
+            <el-option v-for="item in currencyOptions" :key="item" :label="item" :value="item" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="展示价">
+          <el-input v-model="form.displayPrice" placeholder="例如 Rp 9.900" />
+        </el-form-item>
+      </div>
+      <div class="form-row">
+        <el-form-item label="生效区域">
+          <el-input v-model="form.regionCodes" placeholder="多个区域用逗号分隔，例如 ID,MY" />
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input-number v-model="form.sort" :min="0" :max="9999" />
+        </el-form-item>
+      </div>
+      <div class="form-row">
+        <el-form-item label="生效时间">
+          <el-date-picker
+            v-model="form.effectiveAt"
+            type="datetime"
+            value-format="YYYY-MM-DDTHH:mm:ss"
+            placeholder="留空表示立即生效"
+          />
+        </el-form-item>
+        <el-form-item label="失效时间">
+          <el-date-picker
+            v-model="form.expireAt"
+            type="datetime"
+            value-format="YYYY-MM-DDTHH:mm:ss"
+            placeholder="留空表示长期有效"
+          />
+        </el-form-item>
+      </div>
+      <p class="console-hint">
+        新建商品默认下架，确认无误后再上架；会员商品可以建档，但订阅功能上线前不能上架。
+      </p>
+    </el-form>
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" :loading="saving" @click="saveProduct">保存</el-button>
+    </template>
+  </el-dialog>
+</template>