945 lines
27 KiB
Vue
945 lines
27 KiB
Vue
<template>
|
|
<div class="user-voucher-container">
|
|
<!-- 搜索和操作栏 -->
|
|
<el-card class="filter-container" shadow="never">
|
|
<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="请选择代金券"
|
|
filterable
|
|
clearable
|
|
style="width: 280px"
|
|
@change="handleVoucherSelect"
|
|
>
|
|
<el-option
|
|
v-for="item in voucherListOptions"
|
|
:key="item.id"
|
|
:label="`${item.name} (¥${(item.amount / 100).toFixed(2)})`"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleQuery" :disabled="!queryParams.code_id">
|
|
<el-icon><Search /></el-icon>查询
|
|
</el-button>
|
|
<el-button @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="action-bar">
|
|
<el-button type="primary" @click="handleAdd">
|
|
<el-icon><Plus /></el-icon>为用户添加代金券
|
|
</el-button>
|
|
<el-button type="success" @click="fetchUserVoucherList">
|
|
<el-icon><Refresh /></el-icon>刷新
|
|
</el-button>
|
|
<el-button type="danger" :disabled="!selectedRows.length" @click="handleBatchDelete">
|
|
<el-icon><Delete /></el-icon>批量删除
|
|
</el-button>
|
|
</div>
|
|
</el-card>
|
|
|
|
<!-- 用户代金券列表 -->
|
|
<el-card class="table-container" shadow="never">
|
|
<el-table
|
|
v-loading="loading"
|
|
:data="userVoucherList"
|
|
@selection-change="handleSelectionChange"
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column type="selection" width="55" />
|
|
<el-table-column label="ID" width="80">
|
|
<template #default="{ row }">
|
|
{{ row.Id || row.id }}
|
|
</template>
|
|
</el-table-column>
|
|
<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" v-if="!codeId">
|
|
<template #default="{ row }">
|
|
{{ row.discountId }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="代金券名称" min-width="150" v-if="!codeId">
|
|
<template #default="{ row }">
|
|
{{ row.discount?.name || '-' }}
|
|
</template>
|
|
</el-table-column>
|
|
<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="已使用/最大次数" 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="过期时间" min-width="180">
|
|
<template #default="{ row }">
|
|
{{ formatDate(row.expireAt) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="创建时间" min-width="180">
|
|
<template #default="{ row }">
|
|
{{ formatDate(row.CreatedAt) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="200" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
|
|
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
<el-pagination
|
|
v-model:current-page="queryParams.page"
|
|
v-model:page-size="queryParams.count"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
background
|
|
class="pagination"
|
|
/>
|
|
</el-card>
|
|
|
|
<!-- 添加用户代金券对话框 -->
|
|
<el-dialog
|
|
v-model="addDialogVisible"
|
|
title="为用户分发优惠券/优惠码"
|
|
width="600px"
|
|
>
|
|
<el-form
|
|
ref="addFormRef"
|
|
:model="addForm"
|
|
:rules="addRules"
|
|
label-width="140px"
|
|
>
|
|
<el-form-item label="优惠类型" prop="discount_type">
|
|
<el-radio-group v-model="addForm.discount_type" @change="handleDiscountTypeChange">
|
|
<el-radio value="coupon">代金券</el-radio>
|
|
<!-- <el-radio value="code">优惠码</el-radio> -->
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="代金券" prop="voucher_id">
|
|
<el-select
|
|
v-model="addForm.voucher_id"
|
|
placeholder="请选择代金券"
|
|
:disabled="addForm.discount_type === 'code' || !!codeId"
|
|
filterable
|
|
clearable
|
|
style="width: 100%"
|
|
@change="handleVoucherChange"
|
|
>
|
|
<el-option
|
|
v-for="item in voucherOptions"
|
|
:key="item.id"
|
|
:label="`${item.name} (¥${(item.amount / 100).toFixed(2)})`"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<!-- <el-form-item label="优惠码" prop="code_id">
|
|
<el-select
|
|
v-model="addForm.code_id"
|
|
placeholder="请选择优惠码"
|
|
:disabled="addForm.discount_type === 'coupon'"
|
|
filterable
|
|
clearable
|
|
style="width: 100%"
|
|
@change="handleCodeChange"
|
|
>
|
|
<el-option
|
|
v-for="item in codeOptions"
|
|
:key="item.id"
|
|
:label="`${item.name} (${item.code})`"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item> -->
|
|
|
|
<el-divider />
|
|
|
|
<el-form-item label="分发对象" prop="target_type">
|
|
<el-radio-group v-model="addForm.target_type" @change="handleTargetTypeChange">
|
|
<el-radio value="user">指定用户</el-radio>
|
|
<el-radio value="group">用户组</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="用户" prop="user_id">
|
|
<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">
|
|
<el-select
|
|
v-model="addForm.group_id"
|
|
placeholder="请选择用户组"
|
|
:disabled="addForm.target_type === 'user'"
|
|
filterable
|
|
clearable
|
|
style="width: 100%"
|
|
@change="handleGroupChange"
|
|
>
|
|
<el-option
|
|
v-for="item in groupOptions"
|
|
:key="item.Id"
|
|
:label="item.Name"
|
|
:value="item.Id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="addDialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="submitAdd" :loading="submitLoading">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<!-- 编辑用户代金券对话框 -->
|
|
<el-dialog
|
|
v-model="editDialogVisible"
|
|
title="编辑用户代金券"
|
|
width="600px"
|
|
>
|
|
<el-form
|
|
ref="editFormRef"
|
|
:model="editForm"
|
|
:rules="editRules"
|
|
label-width="140px"
|
|
>
|
|
<el-form-item label="用户ID" prop="user_id">
|
|
<el-input-number v-model="editForm.user_id" :min="1" disabled style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="代金券ID" prop="discount_id">
|
|
<el-input-number v-model="editForm.discount_id" :min="1" placeholder="请输入代金券ID" style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="已使用次数" prop="use_times">
|
|
<el-input-number v-model="editForm.use_times" :min="0" placeholder="请输入已使用次数" style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="最大使用次数" prop="max_use_times">
|
|
<el-input-number v-model="editForm.max_use_times" :min="0" placeholder="0表示无限制" style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="过期时间" prop="expire_at">
|
|
<el-date-picker
|
|
v-model="editForm.expire_at"
|
|
type="datetime"
|
|
placeholder="选择过期时间"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
:teleported="true"
|
|
placement="top-start"
|
|
:editable="true"
|
|
:clearable="true"
|
|
style="width: 100%"
|
|
@keyup.enter="handleDatePickerEnter"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="editDialogVisible = false">取消</el-button>
|
|
<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, watch } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { Delete, Search, Plus, Refresh, User } from '@element-plus/icons-vue'
|
|
import {
|
|
getUserVoucherList,
|
|
addUserVoucher,
|
|
updateUserVoucher,
|
|
deleteUserVoucher,
|
|
getDiscountCodeList,
|
|
getVoucherHolderList,
|
|
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: 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-优惠码
|
|
voucher_id: undefined, // 代金券ID
|
|
code_id: undefined, // 优惠码ID
|
|
target_type: 'user', // 分发对象：user-指定用户, group-用户组
|
|
user_id: undefined, // 用户ID
|
|
group_id: undefined // 用户组ID
|
|
})
|
|
|
|
const addRules = {
|
|
discount_type: [
|
|
{ required: true, message: '请选择优惠类型', trigger: 'change' }
|
|
],
|
|
target_type: [
|
|
{ required: true, message: '请选择分发对象', trigger: 'change' }
|
|
]
|
|
}
|
|
|
|
// 下拉选项数据
|
|
const voucherListOptions = ref([]) // 用于搜索的代金券列表
|
|
const voucherOptions = ref([]) // 代金券选项
|
|
const codeOptions = ref([]) // 优惠码选项
|
|
const userOptions = ref([]) // 用户选项
|
|
const groupOptions = ref([]) // 用户组选项
|
|
const userSearchLoading = ref(false) // 用户搜索加载状态
|
|
const submitLoading = ref(false) // 提交加载状态
|
|
const dataList = ref([]) // 优惠列表
|
|
const userSelectorVisible = ref(false)
|
|
|
|
// 编辑表单
|
|
const editForm = reactive({
|
|
id: undefined,
|
|
user_id: undefined,
|
|
discount_id: undefined,
|
|
use_times: 0,
|
|
max_use_times: 0,
|
|
expire_at: ''
|
|
})
|
|
|
|
const editRules = {
|
|
discount_id: [
|
|
{ required: true, message: '请输入代金券ID', trigger: 'blur' }
|
|
],
|
|
use_times: [
|
|
{ required: true, message: '请输入已使用次数', trigger: 'blur' }
|
|
],
|
|
max_use_times: [
|
|
{ required: true, message: '请输入最大使用次数', trigger: 'blur' }
|
|
],
|
|
expire_at: [
|
|
{ required: true, message: '请选择过期时间', trigger: 'change' }
|
|
]
|
|
}
|
|
|
|
// 状态数据
|
|
const loading = ref(false)
|
|
const userVoucherList = ref([])
|
|
const total = ref(0)
|
|
const selectedRows = ref([])
|
|
const addDialogVisible = ref(false)
|
|
const editDialogVisible = ref(false)
|
|
const addFormRef = ref(null)
|
|
const editFormRef = ref(null)
|
|
|
|
// 格式化日期
|
|
const formatDate = (dateStr) => {
|
|
if (!dateStr) return '-'
|
|
try {
|
|
const date = new Date(dateStr)
|
|
// 检查日期是否有效且不是默认的1970年
|
|
if (isNaN(date.getTime()) || date.getFullYear() <= 1970) {
|
|
return '-'
|
|
}
|
|
const year = date.getFullYear()
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
const hours = String(date.getHours()).padStart(2, '0')
|
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|
return `${year}-${month}-${day} ${hours}:${minutes}`
|
|
} catch (error) {
|
|
console.error('日期格式化失败:', error)
|
|
return '-'
|
|
}
|
|
}
|
|
|
|
// 处理日期选择器回车事件
|
|
const handleDatePickerEnter = (event) => {
|
|
const datePicker = event.target.closest('.el-date-editor')
|
|
if (datePicker) {
|
|
event.target.blur()
|
|
}
|
|
}
|
|
|
|
// 获取代金券持有者列表
|
|
const fetchUserVoucherList = async () => {
|
|
if (!queryParams.code_id) {
|
|
ElMessage.warning('请先选择代金券')
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
try {
|
|
const params = {
|
|
code_id: queryParams.code_id,
|
|
page: queryParams.page,
|
|
count: queryParams.count
|
|
}
|
|
const res = await getVoucherHolderList(params)
|
|
console.log('代金券持有者列表数据:', res.data)
|
|
if (res.data.code === 200) {
|
|
userVoucherList.value = res.data.data?.data || []
|
|
total.value = res.data.data?.all_count || 0
|
|
}
|
|
} catch (error) {
|
|
console.error('获取代金券持有者列表失败:', error)
|
|
ElMessage.error('获取代金券持有者列表失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 查询
|
|
const handleQuery = () => {
|
|
queryParams.page = 1
|
|
fetchUserVoucherList()
|
|
}
|
|
|
|
// 重置查询
|
|
const resetQuery = () => {
|
|
queryParams.code_id = undefined
|
|
queryParams.page = 1
|
|
userVoucherList.value = []
|
|
total.value = 0
|
|
}
|
|
|
|
// 处理代金券选择
|
|
const handleVoucherSelect = (value) => {
|
|
if (value) {
|
|
queryParams.page = 1
|
|
fetchUserVoucherList()
|
|
} else {
|
|
userVoucherList.value = []
|
|
total.value = 0
|
|
}
|
|
}
|
|
|
|
// 选择项变化
|
|
const handleSelectionChange = (selection) => {
|
|
selectedRows.value = selection
|
|
}
|
|
|
|
// 分页
|
|
const handleSizeChange = (size) => {
|
|
queryParams.count = size
|
|
fetchUserVoucherList()
|
|
}
|
|
|
|
const handleCurrentChange = (page) => {
|
|
queryParams.page = page
|
|
fetchUserVoucherList()
|
|
}
|
|
// 获取代金券列表（用于搜索下拉框）
|
|
const fetchVoucherListOptions = async () => {
|
|
try {
|
|
const res = await getDiscountCodeList({
|
|
page: 1,
|
|
count: 1000,
|
|
discount_type: 'coupon'
|
|
})
|
|
console.log('获取代金券列表:', res.data)
|
|
if (res.data.code === 200) {
|
|
voucherListOptions.value = res.data.data?.data || []
|
|
}
|
|
} catch (error) {
|
|
console.error('获取代金券列表失败:', error)
|
|
ElMessage.error('获取代金券列表失败')
|
|
}
|
|
}
|
|
|
|
//获取优惠列表
|
|
const fetchDiscountList = async () => {
|
|
try {
|
|
const res = await getDiscountCodeList({
|
|
page: 1,
|
|
count: 100,
|
|
discount_type: 'coupon'
|
|
})
|
|
console.log('获取代金券列表:', res.data)
|
|
|
|
if (res.data.code === 200) {
|
|
voucherOptions.value = res.data.data?.data || []
|
|
dataList.value.push(...res.data.data?.data || [])
|
|
}
|
|
const res2 = await getDiscountCodeList({
|
|
page: 1,
|
|
count: 100,
|
|
discount_type: 'code'
|
|
})
|
|
console.log('获取优惠码列表:', res2.data)
|
|
if (res2.data.code === 200) {
|
|
codeOptions.value = res2.data.data?.data || []
|
|
dataList.value.push(...res2.data.data?.data || [])
|
|
}
|
|
console.log('获取优惠列表最终:', dataList.value)
|
|
} catch (error) {
|
|
console.error('获取代金券列表失败:', error)
|
|
}
|
|
}
|
|
|
|
// 获取代金券列表
|
|
const fetchVoucherOptions = async () => {
|
|
try {
|
|
const res = await getDiscountCodeList({
|
|
discount_type: 'coupon',
|
|
page: 1,
|
|
count: 100
|
|
})
|
|
if (res.data.code === 200) {
|
|
voucherOptions.value = res.data.data?.data || []
|
|
}
|
|
} catch (error) {
|
|
console.error('获取代金券列表失败:', error)
|
|
}
|
|
}
|
|
|
|
// 获取优惠码列表
|
|
const fetchCodeOptions = async () => {
|
|
try {
|
|
const res = await getDiscountCodeList({
|
|
discount_type: 'code',
|
|
page: 1,
|
|
count: 100
|
|
})
|
|
if (res.data.code === 200) {
|
|
codeOptions.value = res.data.data?.data || []
|
|
}
|
|
} catch (error) {
|
|
console.error('获取优惠码列表失败:', error)
|
|
}
|
|
}
|
|
|
|
|
|
|
|
//获取用户列表
|
|
const fetchUserList = async () => {
|
|
try {
|
|
const res = await getUserList({
|
|
page: 1,
|
|
count: 100,
|
|
key: ''
|
|
})
|
|
console.log('获取用户列表:', res.data)
|
|
if (res.data.code === 200) {
|
|
userOptions.value = res.data.data?.data || []
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error('获取用户列表失败:', error)
|
|
}
|
|
finally {
|
|
userSearchLoading.value = false
|
|
}
|
|
|
|
}
|
|
|
|
// 获取用户组列表
|
|
const fetchGroupOptions = async () => {
|
|
try {
|
|
const res = await getUserGroupList({
|
|
page: 1,
|
|
count: 100
|
|
})
|
|
if (res.data.code === 200) {
|
|
groupOptions.value = res.data.data?.data || []
|
|
}
|
|
} catch (error) {
|
|
console.error('获取用户组列表失败:', error)
|
|
}
|
|
}
|
|
|
|
// 处理优惠类型变化（代金券/优惠码互斥）
|
|
const handleDiscountTypeChange = (val) => {
|
|
if (val === 'coupon') {
|
|
addForm.code_id = undefined
|
|
} else if (val === 'code') {
|
|
addForm.voucher_id = undefined
|
|
}
|
|
}
|
|
|
|
// 处理代金券选择变化
|
|
const handleVoucherChange = (val) => {
|
|
if (val) {
|
|
addForm.code_id = undefined
|
|
addForm.discount_type = 'coupon'
|
|
}
|
|
}
|
|
|
|
// 处理优惠码选择变化
|
|
const handleCodeChange = (val) => {
|
|
if (val) {
|
|
addForm.voucher_id = undefined
|
|
addForm.discount_type = 'code'
|
|
}
|
|
}
|
|
|
|
// 处理分发对象类型变化（用户/用户组互斥）
|
|
const handleTargetTypeChange = (val) => {
|
|
if (val === 'user') {
|
|
addForm.group_id = undefined
|
|
} else if (val === 'group') {
|
|
addForm.user_id = undefined
|
|
}
|
|
}
|
|
|
|
// 处理用户选择变化
|
|
const handleUserChange = (val) => {
|
|
if (val) {
|
|
addForm.group_id = undefined
|
|
addForm.target_type = 'user'
|
|
}
|
|
}
|
|
|
|
// 处理用户组选择变化
|
|
const handleGroupChange = (val) => {
|
|
if (val) {
|
|
addForm.user_id = undefined
|
|
addForm.target_type = 'group'
|
|
}
|
|
}
|
|
|
|
// 打开用户选择器
|
|
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
|
|
|
|
// 重置表单
|
|
Object.assign(addForm, {
|
|
discount_type: 'coupon',
|
|
voucher_id: props.codeId || undefined,
|
|
code_id: undefined,
|
|
target_type: 'user',
|
|
user_id: undefined,
|
|
group_id: undefined
|
|
})
|
|
addFormRef.value?.resetFields()
|
|
|
|
// 加载下拉选项数据
|
|
await Promise.all([
|
|
fetchVoucherOptions(),
|
|
// fetchCodeOptions(),
|
|
fetchGroupOptions(),
|
|
fetchUserList()
|
|
])
|
|
}
|
|
|
|
// 编辑用户代金券
|
|
const handleEdit = (row) => {
|
|
editDialogVisible.value = true
|
|
|
|
// 处理过期时间 - 支持ISO字符串和时间戳
|
|
let expireAt = ''
|
|
if (row.expireAt) {
|
|
try {
|
|
// 如果是ISO字符串格式
|
|
if (typeof row.expireAt === 'string') {
|
|
const date = new Date(row.expireAt)
|
|
if (!isNaN(date.getTime()) && date.getFullYear() > 1970) {
|
|
expireAt = date.toISOString().slice(0, 19).replace('T', ' ')
|
|
}
|
|
}
|
|
// 如果是时间戳
|
|
else if (typeof row.expireAt === 'number' && row.expireAt > 0) {
|
|
expireAt = new Date(row.expireAt * 1000).toISOString().slice(0, 19).replace('T', ' ')
|
|
}
|
|
} catch (error) {
|
|
console.error('时间转换失败:', error)
|
|
}
|
|
}
|
|
|
|
Object.assign(editForm, {
|
|
id: row.Id || row.id,
|
|
user_id: row.UserId || row.userId,
|
|
discount_id: row.discountId,
|
|
use_times: row.useTimes || 0,
|
|
max_use_times: row.maxUseTimes || 0,
|
|
expire_at: expireAt
|
|
})
|
|
}
|
|
|
|
// 删除用户代金券
|
|
const handleDelete = (row) => {
|
|
ElMessageBox.confirm(`确认删除该用户代金券吗？`, '警告', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async () => {
|
|
try {
|
|
const res = await deleteUserVoucher({
|
|
user_id: String(row.UserId || row.userId),
|
|
id: String(row.Id || row.id)
|
|
})
|
|
console.log('删除响应:', res.data)
|
|
if (res.data.code === 200) {
|
|
ElMessage.success('删除成功')
|
|
fetchUserVoucherList()
|
|
}
|
|
} catch (error) {
|
|
console.error('删除失败:', error)
|
|
ElMessage.error(error.response?.data?.message || '删除失败')
|
|
}
|
|
}).catch(() => {})
|
|
}
|
|
|
|
// 批量删除
|
|
const handleBatchDelete = () => {
|
|
if (selectedRows.value.length === 0) {
|
|
ElMessage.warning('请至少选择一条记录')
|
|
return
|
|
}
|
|
ElMessageBox.confirm(`确认删除选中的 ${selectedRows.value.length} 条记录吗？`, '警告', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async () => {
|
|
loading.value = true
|
|
try {
|
|
const deletePromises = selectedRows.value.map(row =>
|
|
deleteUserVoucher({
|
|
user_id: String(row.UserId || row.userId),
|
|
id: String(row.Id || row.id)
|
|
})
|
|
)
|
|
|
|
const results = await Promise.allSettled(deletePromises)
|
|
|
|
const successCount = results.filter(r => r.status === 'fulfilled' && r.value?.data?.code === 200).length
|
|
const failCount = results.length - successCount
|
|
|
|
if (failCount === 0) {
|
|
ElMessage.success(`批量删除成功，共删除 ${successCount} 条记录`)
|
|
} else if (successCount === 0) {
|
|
ElMessage.error(`批量删除失败，所有 ${failCount} 条记录删除失败`)
|
|
} else {
|
|
ElMessage.warning(`批量删除完成，成功 ${successCount} 条，失败 ${failCount} 条`)
|
|
}
|
|
|
|
fetchUserVoucherList()
|
|
} catch (error) {
|
|
console.error('批量删除失败:', error)
|
|
ElMessage.error('批量删除操作异常')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}).catch(() => {})
|
|
}
|
|
|
|
// 提交添加表单
|
|
const submitAdd = () => {
|
|
addFormRef.value?.validate(async (valid) => {
|
|
if (valid) {
|
|
// 验证是否选择了优惠券/优惠码
|
|
const discountId = addForm.discount_type === 'coupon' ? addForm.voucher_id : addForm.code_id
|
|
if (!discountId) {
|
|
ElMessage.warning('请选择代金券或优惠码')
|
|
return
|
|
}
|
|
|
|
// 验证是否选择了用户或用户组
|
|
const targetId = addForm.target_type === 'user' ? addForm.user_id : addForm.group_id
|
|
if (!targetId) {
|
|
ElMessage.warning('请选择用户或用户组')
|
|
return
|
|
}
|
|
|
|
submitLoading.value = true
|
|
try {
|
|
const submitData = {
|
|
code_id: String(discountId)
|
|
}
|
|
|
|
// 根据分发对象添加不同参数
|
|
if (addForm.target_type === 'user') {
|
|
submitData.user_id = String(addForm.user_id)
|
|
} else {
|
|
submitData.user_group_id = String(addForm.group_id)
|
|
}
|
|
|
|
console.log('分发优惠券/优惠码数据:', submitData)
|
|
const res = await allocateVoucher(submitData)
|
|
console.log('分发响应:', res.data)
|
|
|
|
if (res.data.code === 200) {
|
|
ElMessage.success('分发成功')
|
|
addDialogVisible.value = false
|
|
// 如果是为当前查询的用户分发，则刷新列表
|
|
//if (addForm.target_type === 'user' && queryParams.user_id) {
|
|
fetchUserVoucherList()
|
|
//}
|
|
}
|
|
} catch (error) {
|
|
console.error('分发失败:', error)
|
|
ElMessage.error(error.response?.data?.message || '分发失败')
|
|
} finally {
|
|
submitLoading.value = false
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 提交编辑表单
|
|
const submitEdit = () => {
|
|
editFormRef.value?.validate(async (valid) => {
|
|
if (valid) {
|
|
try {
|
|
const submitData = {
|
|
user_id: Number(editForm.user_id),
|
|
id: Number(editForm.id),
|
|
discount_id: Number(editForm.discount_id),
|
|
use_times: Number(editForm.use_times),
|
|
max_use_times: Number(editForm.max_use_times),
|
|
expire_at: Math.floor(new Date(editForm.expire_at).getTime() / 1000)
|
|
}
|
|
|
|
console.log('更新用户代金券数据:', submitData)
|
|
const res = await updateUserVoucher(submitData)
|
|
console.log('更新响应:', res.data)
|
|
|
|
if (res.data.code === 200) {
|
|
ElMessage.success('更新成功')
|
|
editDialogVisible.value = false
|
|
fetchUserVoucherList()
|
|
}
|
|
} catch (error) {
|
|
console.error('更新失败:', error)
|
|
ElMessage.error(error.response?.data?.message || '更新失败')
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 初始化
|
|
onMounted(() => {
|
|
// 加载代金券列表供选择
|
|
fetchVoucherListOptions()
|
|
fetchDiscountList()
|
|
if (queryParams.code_id) {
|
|
fetchUserVoucherList()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.user-voucher-container {
|
|
padding: 0;
|
|
}
|
|
|
|
.filter-container {
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.search-form {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.action-bar {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.table-container {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.user-info {
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.username {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.user-id {
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
|
|
.amount {
|
|
color: #f56c6c;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.pagination {
|
|
margin-top: 24px;
|
|
justify-content: flex-end;
|
|
}
|
|
</style>
|
|
|