shiran/ApiServer-Web-admin_dashboard_pc
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

xx

Browse Source
This commit is contained in:
wlkjyy
2025-12-08 15:18:37 +08:00
parent 5ea4f2cfe3
commit a09631551b
15 changed files with 1172 additions and 1502 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/marketing/DiscountGoods.vue
+20 -6
View File
@@ -5,8 +5,8 @@
<!-- 搜索和操作栏 -->
<div class="filter-section">
<div class="filter-content">
<el-form :inline="true" :model="queryParams" class="search-form">
<el-form-item label="代金卷">
<el-form :inline="true" :model="queryParams" class="search-form" v-if="!codeId">
<el-form-item label="代金卷" v-if="!codeId">
<el-select
v-model="queryParams.code_id"
placeholder="请选择代金券"
@@ -71,7 +71,7 @@
>
<el-table-column type="selection" width="55" />
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="discountId" label="代金券ID" width="120" />
<el-table-column prop="discountId" label="代金券ID" width="120" v-if="!codeId" />
<el-table-column label="关联对象ID" width="120">
<template #default="{ row }">
{{ row.goodId || row.goodGroupId || '-' }}
@@ -149,7 +149,7 @@
placeholder="请选择代金券"
filterable
clearable
:disabled="dialogType === 'edit'"
:disabled="dialogType === 'edit' || !!codeId"
style="width: 100%"
>
<el-option
@@ -234,7 +234,7 @@
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Search, Plus, Refresh } from '@element-plus/icons-vue'
import {
@@ -249,13 +249,27 @@ import {
getProductGroupList
} from '@/api/admin/product'
const props = defineProps({
codeId: {
type: [String, Number],
default: ''
}
})
// 查询参数
const queryParams = reactive({
code_id: '',
code_id: props.codeId || '',
page: 1,
count: 10
})
watch(() => props.codeId, (newVal) => {
if (newVal) {
queryParams.code_id = newVal
fetchGoodsList()
}
})
// 表单数据
const form = reactive({
id: undefined,
src/views/marketing/DiscountUsers.vue
+33 -143
View File
@@ -5,8 +5,8 @@
<!-- 搜索和操作栏 -->
<div class="filter-section">
<div class="filter-content">
<el-form :inline="true" :model="queryParams" class="search-form">
<el-form-item label="代金卷">
<el-form :inline="true" :model="queryParams" class="search-form" v-if="!codeId">
<el-form-item label="代金卷" v-if="!codeId">
<el-select
v-model="queryParams.code_id"
placeholder="请选择代金券"
@@ -68,8 +68,8 @@
>
<el-table-column type="selection" width="55" />
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="discountId" label="代金券ID" width="120" />
<el-table-column label="关联对象ID" width="130">
<el-table-column prop="discountId" label="代金券ID" width="120" v-if="!codeId" />
<el-table-column label="关联对象ID" min-width="150">
<template #default="{ row }">
{{ row.userId || row.userGroupId || '-' }}
</template>
@@ -224,82 +224,16 @@
</el-dialog>
<!-- 用户选择弹窗 -->
<el-dialog
v-model="userSelectorVisible"
title="选择用户"
width="800px"
class="user-selector-dialog"
append-to-body
>
<!-- 搜索栏 -->
<div class="selector-search">
<el-input
v-model="userSearchParams.key"
placeholder="搜索用户名或ID"
clearable
@keyup.enter="searchUsers"
style="width: 300px; margin-right: 12px"
>
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary" @click="searchUsers">
<el-icon><Search /></el-icon>
搜索
</el-button>
<el-button @click="resetUserSearch">重置</el-button>
</div>
<!-- 用户表格 -->
<el-table
v-loading="userSelectorLoading"
:data="userSelectorList"
highlight-current-row
@current-change="handleUserSelectChange"
style="width: 100%; margin-top: 16px"
:height="400"
>
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="UserId" label="用户ID" width="100" />
<el-table-column prop="UserName" label="用户名" min-width="150" />
<el-table-column prop="Email" label="邮箱" min-width="180" />
<el-table-column label="状态" width="100">
<template #default="{ row }">
<el-tag :type="row.Status === 1 ? 'success' : 'danger'" size="small">
{{ row.Status === 1 ? '正常' : '禁用' }}
</el-tag>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
v-model:current-page="userSearchParams.page"
v-model:page-size="userSearchParams.count"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
:total="userSelectorTotal"
@size-change="handleUserSelectorSizeChange"
@current-change="handleUserSelectorPageChange"
background
class="selector-pagination"
/>
<template #footer>
<div class="dialog-footer">
<el-button @click="userSelectorVisible = false">取消</el-button>
<el-button type="primary" @click="confirmUserSelection" :disabled="!selectedUserTemp">
确定选择
</el-button>
</div>
</template>
</el-dialog>
<UserSelector
v-model:visible="userSelectorVisible"
@select="confirmUserSelection"
/>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Search, Plus, Refresh, User } from '@element-plus/icons-vue'
import {
@@ -313,14 +247,29 @@ import {
getUserList,
getUserGroupList
} from '@/api/admin/user'
import UserSelector from '@/components/UserSelector/index.vue'
const props = defineProps({
codeId: {
type: [String, Number],
default: ''
}
})
// 查询参数
const queryParams = reactive({
code_id: '',
code_id: props.codeId || '',
page: 1,
count: 10
})
watch(() => props.codeId, (newVal) => {
if (newVal) {
queryParams.code_id = newVal
fetchUsersList()
}
})
// 表单数据
const form = reactive({
id: undefined,
@@ -364,15 +313,6 @@ const userGroupOptions = ref([]) // 用户组列表选项
// 用户选择弹窗相关
const userSelectorVisible = ref(false)
const userSelectorLoading = ref(false)
const userSelectorList = ref([])
const userSelectorTotal = ref(0)
const selectedUserTemp = ref(null) // 临时存储选中的用户
const userSearchParams = reactive({
key: '',
page: 1,
count: 10
})
// 格式化日期
const formatDate = (dateStr) => {
@@ -469,70 +409,19 @@ const fetchUserGroupList = async () => {
// 打开用户选择器
const openUserSelector = () => {
userSelectorVisible.value = true
selectedUserTemp.value = null
userSearchParams.key = ''
userSearchParams.page = 1
fetchUserSelectorList()
}
// 获取用户选择器列表
const fetchUserSelectorList = async () => {
userSelectorLoading.value = true
try {
const res = await getUserList(userSearchParams)
console.log('用户选择器列表:', res.data)
if (res.data.code === 200) {
userSelectorList.value = res.data.data?.data || []
userSelectorTotal.value = res.data.data?.all_count || 0
}
} catch (error) {
console.error('获取用户列表失败:', error)
ElMessage.error('获取用户列表失败')
} finally {
userSelectorLoading.value = false
}
}
// 搜索用户
const searchUsers = () => {
userSearchParams.page = 1
fetchUserSelectorList()
}
// 重置用户搜索
const resetUserSearch = () => {
userSearchParams.key = ''
userSearchParams.page = 1
fetchUserSelectorList()
}
// 用户选择变化
const handleUserSelectChange = (row) => {
selectedUserTemp.value = row
}
// 用户选择器分页
const handleUserSelectorSizeChange = (size) => {
userSearchParams.count = size
fetchUserSelectorList()
}
const handleUserSelectorPageChange = (page) => {
userSearchParams.page = page
fetchUserSelectorList()
}
// 确认用户选择
const confirmUserSelection = () => {
if (!selectedUserTemp.value) {
const confirmUserSelection = (user) => {
if (!user) {
ElMessage.warning('请选择一个用户')
return
}
form.selected_user = selectedUserTemp.value.UserId
form.user_id = selectedUserTemp.value.UserId
form.selected_user = user.UserId
form.user_id = user.UserId
// 将选中的用户添加到 userOptions 中（如果不存在）
if (!userOptions.value.find(u => u.UserId === selectedUserTemp.value.UserId)) {
userOptions.value.push(selectedUserTemp.value)
if (!userOptions.value.find(u => u.UserId === user.UserId)) {
userOptions.value.push(user)
}
userSelectorVisible.value = false
ElMessage.success('用户选择成功')
@@ -691,6 +580,7 @@ const handleEdit = (row) => {
})
//点击编辑需要初始化加载用户列表
fetchUserList()
fetchUserGroupList()
}
// 删除用户关联
src/views/marketing/UserVoucher.vue
+85 -33
View File
@@ -2,8 +2,8 @@
<div class="user-voucher-container">
<!-- 搜索和操作栏 -->
<el-card class="filter-container" shadow="never">
<el-form :inline="true" :model="queryParams" class="search-form">
<el-form-item label="代金券">
<el-form :inline="true" :model="queryParams" class="search-form" v-if="!codeId">
<el-form-item label="代金券" v-if="!codeId">
<el-select
v-model="queryParams.code_id"
placeholder="请选择代金券"
@@ -54,37 +54,37 @@
{{ row.Id || row.id }}
</template>
</el-table-column>
<el-table-column label="用户ID" width="100">
<el-table-column label="用户ID" min-width="120">
<template #default="{ row }">
{{ row.UserId || row.userId }}
</template>
</el-table-column>
<el-table-column label="代金券ID" width="100">
<el-table-column label="代金券ID" width="100" v-if="!codeId">
<template #default="{ row }">
{{ row.discountId }}
</template>
</el-table-column>
<el-table-column label="代金券名称" min-width="150">
<el-table-column label="代金券名称" min-width="150" v-if="!codeId">
<template #default="{ row }">
{{ row.discount?.name || '-' }}
</template>
</el-table-column>
<el-table-column label="面额" width="120">
<el-table-column label="面额" min-width="120">
<template #default="{ row }">
<span class="amount">¥{{ row.discount?.amount ? (row.discount.amount / 100).toFixed(2) : '0.00' }}</span>
</template>
</el-table-column>
<el-table-column label="已使用/最大次数" width="150">
<el-table-column label="已使用/最大次数" min-width="150">
<template #default="{ row }">
<el-tag type="info">{{ row.useTimes || 0 }} / {{ row.maxUseTimes || row.discount?.maxTimes || 0 }}</el-tag>
</template>
</el-table-column>
<el-table-column label="过期时间" width="180">
<el-table-column label="过期时间" min-width="180">
<template #default="{ row }">
{{ formatDate(row.expireAt) }}
</template>
</el-table-column>
<el-table-column label="创建时间" width="180">
<el-table-column label="创建时间" min-width="180">
<template #default="{ row }">
{{ formatDate(row.CreatedAt) }}
</template>
@@ -134,7 +134,7 @@
<el-select
v-model="addForm.voucher_id"
placeholder="请选择代金券"
:disabled="addForm.discount_type === 'code'"
:disabled="addForm.discount_type === 'code' || !!codeId"
filterable
clearable
style="width: 100%"
@@ -178,25 +178,22 @@
</el-form-item>
<el-form-item label="用户" prop="user_id">
<el-select
v-model="addForm.user_id"
placeholder="请选择用户"
:disabled="addForm.target_type === 'group'"
filterable
clearable
remote
:remote-method="searchUsers"
:loading="userSearchLoading"
style="width: 100%"
@change="handleUserChange"
>
<el-option
v-for="item in userOptions"
:key="item.UserId"
:label="`${item.UserName} (ID: ${item.UserId})`"
:value="item.UserId"
/>
</el-select>
<div class="user-selector-wrapper">
<div class="selected-user-display" v-if="addForm.user_id">
<el-tag type="primary" closable @close="clearSelectedUser">
{{ getSelectedUserName() }}
</el-tag>
</div>
<el-button
type="primary"
plain
@click="openUserSelector"
style="width: 100%"
>
<el-icon><User /></el-icon>
{{ addForm.user_id ? '重新选择用户' : '选择用户' }}
</el-button>
</div>
</el-form-item>
<el-form-item label="用户组" prop="group_id">
@@ -268,13 +265,19 @@
<el-button type="primary" @click="submitEdit">确定</el-button>
</template>
</el-dialog>
<!-- 用户选择弹窗 -->
<UserSelector
v-model:visible="userSelectorVisible"
@select="confirmUserSelection"
/>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Search, Plus, Refresh } from '@element-plus/icons-vue'
import { Delete, Search, Plus, Refresh, User } from '@element-plus/icons-vue'
import {
getUserVoucherList,
addUserVoucher,
@@ -285,14 +288,29 @@ import {
allocateVoucher
} from '@/api/admin/discount'
import { getUserList, getUserGroupList } from '@/api/admin/user'
import UserSelector from '@/components/UserSelector/index.vue'
const props = defineProps({
codeId: {
type: [String, Number],
default: ''
}
})
// 查询参数
const queryParams = reactive({
code_id: undefined,
code_id: props.codeId || undefined,
page: 1,
count: 10
})
watch(() => props.codeId, (newVal) => {
if (newVal) {
queryParams.code_id = newVal
fetchUserVoucherList()
}
})
// 添加表单
const addForm = reactive({
discount_type: 'coupon', // 优惠类型：coupon-代金券, code-优惠码
@@ -321,6 +339,7 @@ const groupOptions = ref([]) // 用户组选项
const userSearchLoading = ref(false) // 用户搜索加载状态
const submitLoading = ref(false) // 提交加载状态
const dataList = ref([]) // 优惠列表
const userSelectorVisible = ref(false)
// 编辑表单
const editForm = reactive({
@@ -623,6 +642,36 @@ const handleGroupChange = (val) => {
}
}
// 打开用户选择器
const openUserSelector = () => {
userSelectorVisible.value = true
}
// 确认用户选择
const confirmUserSelection = (user) => {
if (!user) {
ElMessage.warning('请选择一个用户')
return
}
addForm.user_id = user.UserId
// 将选中的用户添加到 userOptions 中（如果不存在）
if (!userOptions.value.find(u => u.UserId === user.UserId)) {
userOptions.value.push(user)
}
userSelectorVisible.value = false
}
// 清除选中的用户
const clearSelectedUser = () => {
addForm.user_id = undefined
}
// 获取选中用户的显示名称
const getSelectedUserName = () => {
const user = userOptions.value.find(u => u.UserId === addForm.user_id)
return user ? `${user.UserName} (ID: ${user.UserId})` : `用户ID: ${addForm.user_id}`
}
// 添加用户代金券
const handleAdd = async () => {
addDialogVisible.value = true
@@ -630,7 +679,7 @@ const handleAdd = async () => {
// 重置表单
Object.assign(addForm, {
discount_type: 'coupon',
voucher_id: undefined,
voucher_id: props.codeId || undefined,
code_id: undefined,
target_type: 'user',
user_id: undefined,
@@ -837,6 +886,9 @@ onMounted(() => {
// 加载代金券列表供选择
fetchVoucherListOptions()
fetchDiscountList()
if (queryParams.code_id) {
fetchUserVoucherList()
}
})
</script>
src/views/marketing/Voucher.vue
+11 -1
View File
@@ -63,9 +63,10 @@
<el-icon v-else color="#f56c6c" :size="20"><CircleCloseFilled /></el-icon>
</template>
</el-table-column>
<el-table-column label="操作" width="200" fixed="right">
<el-table-column label="操作" width="280" fixed="right">
<template #default="{ row }">
<el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
<el-button type="primary" link @click="handleManage(row)">管理</el-button>
<el-button type="success" link @click="handleView(row)">查看</el-button>
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
</template>
@@ -166,8 +167,10 @@
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Delete, Refresh, SuccessFilled, CircleCloseFilled } from '@element-plus/icons-vue'
import {
@@ -180,6 +183,8 @@ import {
import { timeToTimestamp } from '@/utils/tool'
import DiscountDetailDialog from '@/components/marketing/DiscountDetailDialog.vue'
const router = useRouter()
// 查询参数
const queryParams = reactive({
discount_type: 'coupon', // 固定为coupon表示代金券
@@ -312,6 +317,11 @@ const handleEdit = (row) => {
})
}
// 管理代金券
const handleManage = (row) => {
router.push(`/marketing/voucher/${row.id}/manage`)
}
// 查看代金券详情
const handleView = async (row) => {
try {
src/views/marketing/VoucherHistory.vue
+42 -144
View File
@@ -46,8 +46,8 @@
<el-table-column prop="user_id" label="用户ID" width="100" />
<el-table-column prop="username" label="用户名" width="150" />
<el-table-column prop="email" label="邮箱" min-width="200" />
<el-table-column prop="discount_id" label="代金券ID" width="120" />
<el-table-column prop="discount_name" label="代金券名称" min-width="180" />
<el-table-column prop="discount_id" label="代金券ID" width="120" v-if="!codeId" />
<el-table-column prop="discount_name" label="代金券名称" min-width="180" v-if="!codeId" />
<el-table-column label="优惠金额" width="120">
<template #default="{ row }">
<span class="amount">¥{{ row.discount_amount ? (row.discount_amount / 100).toFixed(2) : '0.00' }}</span>
@@ -133,74 +133,10 @@
</template>
</el-dialog>
<!-- 用户选择弹窗 -->
<el-dialog
v-model="userSelectorVisible"
title="选择用户"
width="800px"
class="user-selector-dialog"
>
<!-- 搜索栏 -->
<div class="selector-search">
<el-input
v-model="userSearchParams.key"
placeholder="搜索用户名或ID"
clearable
@keyup.enter="searchUsers"
style="width: 300px; margin-right: 12px"
>
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary" @click="searchUsers">
<el-icon><Search /></el-icon>
搜索
</el-button>
<el-button @click="resetUserSearch">重置</el-button>
</div>
<!-- 用户表格 -->
<el-table
v-loading="userSelectorLoading"
:data="userSelectorList"
highlight-current-row
@current-change="handleUserSelectChange"
style="width: 100%; margin-top: 16px"
:height="400"
>
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="UserId" label="用户ID" width="100" />
<el-table-column prop="UserName" label="用户名" min-width="150" />
<el-table-column prop="Email" label="邮箱" min-width="180" />
<el-table-column label="状态" width="100">
<template #default="{ row }">
<el-tag :type="row.Status === 1 ? 'success' : 'danger'" size="small">
{{ row.Status === 1 ? '正常' : '禁用' }}
</el-tag>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
v-model:current-page="userSearchParams.page"
v-model:page-size="userSearchParams.count"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
:total="userSelectorTotal"
@size-change="handleUserSelectorSizeChange"
@current-change="handleUserSelectorPageChange"
background
class="selector-pagination"
/>
<template #footer>
<el-button @click="userSelectorVisible = false">取消</el-button>
<el-button type="primary" @click="confirmUserSelection" :disabled="!selectedUserTemp">
确定选择
</el-button>
</template>
</el-dialog>
<UserSelector
v-model:visible="userSelectorVisible"
@select="confirmUserSelection"
/>
<!-- 统计卡片 -->
<el-row :gutter="20" style="margin-top: 20px">
@@ -237,20 +173,36 @@
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Refresh, Download } from '@element-plus/icons-vue'
import { getUserVoucherHistory, getDiscountCodeList } from '@/api/admin/discount'
import { getUserList } from '@/api/admin/user'
import UserSelector from '@/components/UserSelector/index.vue'
const props = defineProps({
codeId: {
type: [String, Number],
default: ''
}
})
// 查询参数
const queryParams = reactive({
user_id: undefined,
code_id: props.codeId || undefined,
id: '',
page: 1,
count: 10
})
watch(() => props.codeId, (newVal) => {
if (newVal) {
queryParams.code_id = newVal
fetchHistoryList()
}
})
// 状态数据
const loading = ref(false)
const historyList = ref([])
@@ -261,15 +213,6 @@ const currentDetail = ref({})
const discountOptions = ref([])
const selectorType = ref('query')
const userSelectorVisible = ref(false)
const userSelectorList = ref([])
const userSelectorTotal = ref(0)
const userSearchParams = reactive({
key: '',
page: 1,
count: 10
})
const selectedUserTemp = ref(null)
const userSelectorLoading = ref(false)
const UserOptions = ref([])
// 格式化日期
@@ -371,86 +314,41 @@ const resetUserSearch = () => {
// fetchUserSelectorList()
}
// 打开查询用户选择器
const openQueryUserSelector = () => {
selectorType.value = 'query'
userSelectorVisible.value = true
}
// 打开编辑用户选择器
const openEditUserSelector = () => {
selectorType.value = 'edit'
userSelectorVisible.value = true
}
// 确认用户选择
const confirmUserSelection = () => {
if (!selectedUserTemp.value) {
const confirmUserSelection = (user) => {
if (!user) {
ElMessage.warning('请选择一个用户')
return
}
if (selectorType.value === 'query') {
// 查询表单选择
queryParams.user_id = selectedUserTemp.value.UserId
queryParams.user_id = user.UserId
} else {
// 编辑表单选择
editForm.user_id = selectedUserTemp.value.UserId
editForm.user_id = user.UserId
}
// 将选中的用户添加到 UserOptions 中（如果不存在）
if (!UserOptions.value.find(u => u.UserId === selectedUserTemp.value.UserId)) {
UserOptions.value.push(selectedUserTemp.value)
if (!UserOptions.value.find(u => u.UserId === user.UserId)) {
UserOptions.value.push(user)
}
userSelectorVisible.value = false
ElMessage.success('用户选择成功')
}
// 打开查询用户选择器
const openQueryUserSelector = () => {
selectorType.value = 'query'
userSelectorVisible.value = true
selectedUserTemp.value = null
userSearchParams.key = ''
userSearchParams.page = 1
fetchUserSelectorList()
}
// 打开编辑用户选择器
const openEditUserSelector = () => {
selectorType.value = 'edit'
userSelectorVisible.value = true
selectedUserTemp.value = null
userSearchParams.key = ''
userSearchParams.page = 1
fetchUserSelectorList()
}
// 用户选择变化
const handleUserSelectChange = (row) => {
selectedUserTemp.value = row
}
// 搜索用户
const searchUsers = () => {
userSearchParams.page = 1
fetchUserSelectorList()
}
// 用户选择器分页
const handleUserSelectorSizeChange = (size) => {
userSearchParams.count = size
fetchUserSelectorList()
}
const handleUserSelectorPageChange = (page) => {
userSearchParams.page = page
fetchUserSelectorList()
}
// 获取用户选择器列表
const fetchUserSelectorList = async () => {
userSelectorLoading.value = true
try {
const res = await getUserList(userSearchParams)
console.log('用户选择器列表:', res.data)
if (res.data.code === 200) {
userSelectorList.value = res.data.data?.data || []
userSelectorTotal.value = res.data.data?.all_count || 0
}
} catch (error) {
console.error('获取用户列表失败:', error)
ElMessage.error('获取用户列表失败')
} finally {
userSelectorLoading.value = false
}
}
// 查询
const handleQuery = () => {
@@ -461,7 +359,7 @@ const handleQuery = () => {
// 重置查询
const resetQuery = () => {
queryParams.user_id = undefined
queryParams.discount_id = undefined
queryParams.code_id = undefined
queryParams.id = ''
queryParams.page = 1
fetchHistoryList()
src/views/marketing/VoucherHolders.vue
+48 -167
View File
@@ -40,51 +40,51 @@
style="width: 100%"
>
<el-table-column prop="Id" label="ID" width="80" />
<el-table-column prop="UserId" label="用户ID" width="100" />
<el-table-column label="代金券ID" width="120">
<el-table-column prop="UserId" label="用户ID" min-width="100" />
<el-table-column label="代金券ID" min-width="110" v-if="!codeId">
<template #default="{ row }">
{{ row.discountId || '-' }}
</template>
</el-table-column>
<el-table-column label="代金券名称" min-width="180">
<el-table-column label="代金券名称" min-width="180" v-if="!codeId" show-overflow-tooltip>
<template #default="{ row }">
{{ row.discount?.name || '-' }}
</template>
</el-table-column>
<el-table-column label="代金券编码" width="150">
<el-table-column label="代金券编码" min-width="150" v-if="!codeId">
<template #default="{ row }">
{{ row.discount?.code || '-' }}
</template>
</el-table-column>
<el-table-column label="面额" width="120">
<el-table-column label="面额" min-width="110">
<template #default="{ row }">
<span class="amount">¥{{ row.discount?.amount ? (row.discount.amount / 100).toFixed(2) : '0.00' }}</span>
</template>
</el-table-column>
<el-table-column prop="useTimes" label="已使用次数" width="120" />
<el-table-column prop="maxUseTimes" label="最大使用次数" width="120" />
<el-table-column label="状态" width="100">
<el-table-column prop="useTimes" label="已使用" min-width="100" />
<el-table-column prop="maxUseTimes" label="最大使用" min-width="100" />
<el-table-column label="状态" min-width="100">
<template #default="{ row }">
<el-tag :type="getStatusType(row)">
<el-tag :type="getStatusType(row)" size="small">
{{ getStatusText(row) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="过期时间" width="180">
<el-table-column label="过期时间" min-width="160">
<template #default="{ row }">
{{ formatDate(row.expireAt) }}
</template>
</el-table-column>
<el-table-column label="创建时间" width="180">
<el-table-column label="创建时间" min-width="160">
<template #default="{ row }">
{{ formatDate(row.CreatedAt) }}
</template>
</el-table-column>
<el-table-column label="操作" width="200" fixed="right">
<el-table-column label="操作" width="210" fixed="right">
<template #default="{ row }">
<el-button type="primary" link @click="handleView(row)">查看详情</el-button>
<el-button type="warning" link @click="handleEdit(row)">编辑</el-button>
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
<el-button type="primary" link size="small" @click="handleView(row)">查看</el-button>
<el-button type="warning" link size="small" @click="handleEdit(row)">编辑</el-button>
<el-button type="danger" link size="small" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -203,81 +203,17 @@
</el-dialog>
<!-- 用户选择弹窗 -->
<el-dialog
v-model="userSelectorVisible"
title="选择用户"
width="800px"
class="user-selector-dialog"
>
<!-- 搜索栏 -->
<div class="selector-search">
<el-input
v-model="userSearchParams.key"
placeholder="搜索用户名或ID"
clearable
@keyup.enter="searchUsers"
style="width: 300px; margin-right: 12px"
>
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary" @click="searchUsers">
<el-icon><Search /></el-icon>
搜索
</el-button>
<el-button @click="resetUserSearch">重置</el-button>
</div>
<!-- 用户表格 -->
<el-table
v-loading="userSelectorLoading"
:data="userSelectorList"
highlight-current-row
@current-change="handleUserSelectChange"
style="width: 100%; margin-top: 16px"
:height="400"
>
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="UserId" label="用户ID" width="100" />
<el-table-column prop="UserName" label="用户名" min-width="150" />
<el-table-column prop="Email" label="邮箱" min-width="180" />
<el-table-column label="状态" width="100">
<template #default="{ row }">
<el-tag :type="row.Status === 1 ? 'success' : 'danger'" size="small">
{{ row.Status === 1 ? '正常' : '禁用' }}
</el-tag>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
v-model:current-page="userSearchParams.page"
v-model:page-size="userSearchParams.count"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
:total="userSelectorTotal"
@size-change="handleUserSelectorSizeChange"
@current-change="handleUserSelectorPageChange"
background
class="selector-pagination"
/>
<template #footer>
<el-button @click="userSelectorVisible = false">取消</el-button>
<el-button type="primary" @click="confirmUserSelection" :disabled="!selectedUserTemp">
确定选择
</el-button>
</template>
</el-dialog>
<UserSelector
v-model:visible="userSelectorVisible"
@select="confirmUserSelection"
/>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Download, Plus, User } from '@element-plus/icons-vue'
import { Search, Refresh, Plus, User } from '@element-plus/icons-vue'
import {
getUserVoucherList,
allocateVoucher,
@@ -285,14 +221,34 @@ import {
deleteUserVoucher,
getDiscountCodeList
} from '@/api/admin/discount'
import { getUserList } from '@/api/admin/user'
import UserSelector from '@/components/UserSelector/index.vue'
const props = defineProps({
codeId: {
type: [String, Number],
default: ''
}
})
// 查询参数
const queryParams = reactive({
user_id: undefined,
code_id: props.codeId || undefined,
page: 1,
count: 10
})
watch(() => props.codeId, (newVal) => {
if (newVal) {
queryParams.code_id = newVal
// 如果有 code_id，尝试刷新列表（取决于 API 是否支持仅按 code_id 查询）
// 如果 API 必须要求 user_id，则这里可能不需要立即刷新，或者提示用户选择用户
if (queryParams.user_id) {
fetchHoldersList()
}
}
})
// 状态数据
const loading = ref(false)
const holdersList = ref([])
@@ -307,16 +263,7 @@ const discountOptions = ref([])
// 用户选择弹窗相关
const userSelectorVisible = ref(false)
const userSelectorLoading = ref(false)
const userSelectorList = ref([])
const userSelectorTotal = ref(0)
const selectedUserTemp = ref(null) // 临时存储选中的用户
const selectorType = ref('query') // 'query' 或 'edit' 用于区分是查询还是编辑
const userSearchParams = reactive({
key: '',
page: 1,
count: 10
})
// 编辑表单
const editForm = reactive({
@@ -448,101 +395,36 @@ const handleExport = () => {
ElMessage.info('导出功能开发中...')
}
// 获取用户列表
const fetchUserList = async () => {
const res = await getUserList({
page: 1,
count: 10000,
key: ''
})
UserOptions.value = res.data.data?.data || []
}
// 打开查询用户选择器
const openQueryUserSelector = () => {
selectorType.value = 'query'
userSelectorVisible.value = true
selectedUserTemp.value = null
userSearchParams.key = ''
userSearchParams.page = 1
fetchUserSelectorList()
}
// 打开编辑用户选择器
const openEditUserSelector = () => {
selectorType.value = 'edit'
userSelectorVisible.value = true
selectedUserTemp.value = null
userSearchParams.key = ''
userSearchParams.page = 1
fetchUserSelectorList()
}
// 获取用户选择器列表
const fetchUserSelectorList = async () => {
userSelectorLoading.value = true
try {
const res = await getUserList(userSearchParams)
console.log('用户选择器列表:', res.data)
if (res.data.code === 200) {
userSelectorList.value = res.data.data?.data || []
userSelectorTotal.value = res.data.data?.all_count || 0
}
} catch (error) {
console.error('获取用户列表失败:', error)
ElMessage.error('获取用户列表失败')
} finally {
userSelectorLoading.value = false
}
}
// 搜索用户
const searchUsers = () => {
userSearchParams.page = 1
fetchUserSelectorList()
}
// 重置用户搜索
const resetUserSearch = () => {
userSearchParams.key = ''
userSearchParams.page = 1
fetchUserSelectorList()
}
// 用户选择变化
const handleUserSelectChange = (row) => {
selectedUserTemp.value = row
}
// 用户选择器分页
const handleUserSelectorSizeChange = (size) => {
userSearchParams.count = size
fetchUserSelectorList()
}
const handleUserSelectorPageChange = (page) => {
userSearchParams.page = page
fetchUserSelectorList()
}
// 确认用户选择
const confirmUserSelection = () => {
if (!selectedUserTemp.value) {
const confirmUserSelection = (user) => {
if (!user) {
ElMessage.warning('请选择一个用户')
return
}
if (selectorType.value === 'query') {
// 查询表单选择
queryParams.user_id = selectedUserTemp.value.UserId
queryParams.user_id = user.UserId
} else {
// 编辑表单选择
editForm.user_id = selectedUserTemp.value.UserId
editForm.user_id = user.UserId
}
// 将选中的用户添加到 UserOptions 中（如果不存在）
if (!UserOptions.value.find(u => u.UserId === selectedUserTemp.value.UserId)) {
UserOptions.value.push(selectedUserTemp.value)
if (!UserOptions.value.find(u => u.UserId === user.UserId)) {
UserOptions.value.push(user)
}
userSelectorVisible.value = false
@@ -692,7 +574,6 @@ const submitEditForm = () => {
// 初始化
onMounted(() => {
fetchUserList()
fetchDiscountList()
if (queryParams.user_id) {
fetchHoldersList()
src/views/marketing/VoucherManagement.vue
+69
View File
@@ -0,0 +1,69 @@
<template>
<div class="voucher-management-container">
<div class="header">
<el-page-header @back="goBack">
<template #content>
<span class="text-large font-600 mr-3">代金券管理 (ID: {{ voucherId }})</span>
</template>
</el-page-header>
</div>
<el-card class="mt-4" shadow="never">
<el-tabs v-model="activeTab" type="card">
<el-tab-pane label="用户分发管理" name="user-distribution">
<UserVoucher :code-id="voucherId" />
</el-tab-pane>
<el-tab-pane label="商品关联管理" name="discount-goods">
<DiscountGoods :code-id="voucherId" />
</el-tab-pane>
<el-tab-pane label="用户关联管理" name="discount-users">
<DiscountUsers :code-id="voucherId" />
</el-tab-pane>
<el-tab-pane label="用户信息管理" name="user-info">
<VoucherHolders :code-id="voucherId" />
</el-tab-pane>
<el-tab-pane label="用户使用记录" name="user-history">
<VoucherHistory :code-id="voucherId" />
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import UserVoucher from './UserVoucher.vue'
import DiscountGoods from './DiscountGoods.vue'
import DiscountUsers from './DiscountUsers.vue'
import VoucherHolders from './VoucherHolders.vue'
import VoucherHistory from './VoucherHistory.vue'
const route = useRoute()
const router = useRouter()
const activeTab = ref('user-distribution')
const voucherId = computed(() => route.params.id)
const goBack = () => {
router.push('/marketing/voucher')
}
</script>
<style scoped>
.voucher-management-container {
padding: 20px;
}
.header {
margin-bottom: 20px;
}
.mt-4 {
margin-top: 16px;
}
</style>