feat(points): 增加双边积分与虚拟积分商城
This commit is contained in:
yml2213
@@ -0,0 +1,277 @@
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
|
||||
import {
|
||||
completePointsRedemption,
|
||||
createPointsProduct,
|
||||
fetchAdminPointsProducts,
|
||||
fetchAdminPointsRedemptions,
|
||||
updatePointsProduct,
|
||||
type PointsMallProduct,
|
||||
type PointsMallProductPayload,
|
||||
type PointsMallRedemption,
|
||||
} from '@/features/points/api/pointsMall'
|
||||
import { useAdminSessionStore } from '@/stores/adminSession'
|
||||
import { readError } from '@/shared/utils/error'
|
||||
|
||||
const adminSession = useAdminSessionStore()
|
||||
const activeTab = ref<'products' | 'redemptions'>('products')
|
||||
const loading = ref(false)
|
||||
const submitting = ref(false)
|
||||
const products = ref<PointsMallProduct[]>([])
|
||||
const redemptions = ref<PointsMallRedemption[]>([])
|
||||
const editorVisible = ref(false)
|
||||
const editingID = ref(0)
|
||||
const canManage = computed(() => adminSession.hasPermission('points_mall:manage'))
|
||||
const form = reactive<PointsMallProductPayload>(defaultProduct())
|
||||
|
||||
onMounted(load)
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
const [nextProducts, nextRedemptions] = await Promise.all([
|
||||
fetchAdminPointsProducts(),
|
||||
fetchAdminPointsRedemptions(),
|
||||
])
|
||||
products.value = nextProducts
|
||||
redemptions.value = nextRedemptions
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '积分商城数据加载失败'))
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editingID.value = 0
|
||||
Object.assign(form, defaultProduct())
|
||||
editorVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(item: PointsMallProduct) {
|
||||
editingID.value = item.id
|
||||
Object.assign(form, {
|
||||
title: item.title,
|
||||
subtitle: item.subtitle,
|
||||
description: item.description,
|
||||
cover_url: item.cover_url,
|
||||
redemption_instructions: item.redemption_instructions,
|
||||
points_price: item.points_price,
|
||||
stock: item.stock,
|
||||
per_user_limit: item.per_user_limit,
|
||||
status: item.status === 'online' ? 'online' : 'offline',
|
||||
sort_order: item.sort_order,
|
||||
})
|
||||
editorVisible.value = true
|
||||
}
|
||||
|
||||
async function saveProduct() {
|
||||
if (!form.title.trim() || !form.description.trim() || !form.redemption_instructions.trim()) {
|
||||
ElMessage.warning('请填写商品名称、说明和兑换说明')
|
||||
return
|
||||
}
|
||||
submitting.value = true
|
||||
try {
|
||||
const payload = { ...form }
|
||||
if (editingID.value) {
|
||||
await updatePointsProduct(editingID.value, payload)
|
||||
} else {
|
||||
await createPointsProduct(payload)
|
||||
}
|
||||
ElMessage.success('积分商品已保存')
|
||||
editorVisible.value = false
|
||||
await load()
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '积分商品保存失败'))
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function completeRedemption(item: PointsMallRedemption) {
|
||||
const remark = window.prompt('填写发放说明或处理备注（可留空）', item.admin_remark || '')
|
||||
if (remark === null) return
|
||||
try {
|
||||
await completePointsRedemption(item.id, remark)
|
||||
ElMessage.success('兑换已标记完成')
|
||||
await load()
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '处理兑换失败'))
|
||||
}
|
||||
}
|
||||
|
||||
function defaultProduct(): PointsMallProductPayload {
|
||||
return {
|
||||
title: '',
|
||||
subtitle: '',
|
||||
description: '',
|
||||
cover_url: '',
|
||||
redemption_instructions: '',
|
||||
points_price: 100,
|
||||
stock: 10,
|
||||
per_user_limit: 1,
|
||||
status: 'offline',
|
||||
sort_order: 0,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="admin-page">
|
||||
<header class="page-header">
|
||||
<div>
|
||||
<h1>积分商城</h1>
|
||||
<p>管理虚拟商品、库存和用户兑换发放。</p>
|
||||
</div>
|
||||
<el-button v-if="canManage" type="primary" @click="openCreate">新增积分商品</el-button>
|
||||
</header>
|
||||
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="商品管理" name="products">
|
||||
<el-table v-loading="loading" :data="products" border>
|
||||
<el-table-column prop="id" label="ID" width="70" />
|
||||
<el-table-column prop="title" label="商品" min-width="180" />
|
||||
<el-table-column prop="points_price" label="积分价格" width="110" />
|
||||
<el-table-column prop="stock" label="库存" width="90" />
|
||||
<el-table-column prop="redeemed_count" label="已兑换" width="90" />
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === 'online' ? 'success' : 'info'">
|
||||
{{ row.status === 'online' ? '上架' : '下架' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="canManage" link type="primary" @click="openEdit(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="兑换记录" name="redemptions">
|
||||
<el-table v-loading="loading" :data="redemptions" border>
|
||||
<el-table-column prop="redemption_no" label="兑换单号" min-width="190" />
|
||||
<el-table-column label="用户" min-width="150">
|
||||
<template #default="{ row }">
|
||||
{{ row.user_nickname || '-' }}<br />
|
||||
<small>{{ row.user_phone || row.user_id }}</small>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="product_title" label="商品" min-width="160" />
|
||||
<el-table-column prop="total_points" label="积分" width="100" />
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === 'completed' ? 'success' : 'warning'">
|
||||
{{ row.status === 'completed' ? '已发放' : '待处理' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="兑换时间" min-width="170" />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-if="canManage && row.status === 'pending'"
|
||||
link
|
||||
type="primary"
|
||||
@click="completeRedemption(row)"
|
||||
>
|
||||
发放
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-dialog
|
||||
v-model="editorVisible"
|
||||
:title="editingID ? '编辑积分商品' : '新增积分商品'"
|
||||
width="680px"
|
||||
>
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="商品名称">
|
||||
<el-input v-model="form.title" maxlength="128" />
|
||||
</el-form-item>
|
||||
<el-form-item label="副标题">
|
||||
<el-input v-model="form.subtitle" maxlength="255" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品说明">
|
||||
<el-input v-model="form.description" type="textarea" :rows="3" />
|
||||
</el-form-item>
|
||||
<el-form-item label="封面图片 URL">
|
||||
<el-input v-model="form.cover_url" />
|
||||
</el-form-item>
|
||||
<el-form-item label="兑换后发放说明">
|
||||
<el-input v-model="form.redemption_instructions" type="textarea" :rows="3" />
|
||||
</el-form-item>
|
||||
<div class="form-grid">
|
||||
<el-form-item label="积分价格">
|
||||
<el-input-number v-model="form.points_price" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存">
|
||||
<el-input-number v-model="form.stock" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="每人限兑">
|
||||
<el-input-number v-model="form.per_user_limit" :min="1" :max="100" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="form.sort_order" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="状态">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio-button value="online">上架</el-radio-button>
|
||||
<el-radio-button value="offline">下架</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="editorVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="saveProduct">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-page {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
margin: 6px 0 0;
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.form-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user