Commit 35034c4a by licheng

chore: 删除member模块

parent 2020687a
import request from '@/config/axios'
export interface AddressVO {
id: number
name: string
mobile: string
areaId: number
detailAddress: string
defaultStatus: boolean
}
// 查询用户收件地址列表
export const getAddressList = async (params) => {
return await request.get({ url: `/member/address/list`, params })
}
import request from '@/config/axios'
export interface ConfigVO {
id: number
pointTradeDeductEnable: number
pointTradeDeductUnitPrice: number
pointTradeDeductMaxPrice: number
pointTradeGivePoint: number
}
// 查询积分设置详情
export const getConfig = async () => {
return await request.get({ url: `/member/config/get` })
}
// 新增修改积分设置
export const saveConfig = async (data: ConfigVO) => {
return await request.put({ url: `/member/config/save`, data })
}
import request from '@/config/axios'
export interface ExperienceRecordVO {
id: number
userId: number
bizId: string
bizType: number
title: string
description: string
experience: number
totalExperience: number
}
// 查询会员经验记录列表
export const getExperienceRecordPage = async (params) => {
return await request.get({ url: `/member/experience-record/page`, params })
}
// 查询会员经验记录详情
export const getExperienceRecord = async (id: number) => {
return await request.get({ url: `/member/experience-record/get?id=` + id })
}
import request from '@/config/axios'
export interface GroupVO {
id: number
name: string
remark: string
status: number
}
// 查询用户分组列表
export const getGroupPage = async (params: any) => {
return await request.get({ url: `/member/group/page`, params })
}
// 查询用户分组详情
export const getGroup = async (id: number) => {
return await request.get({ url: `/member/group/get?id=` + id })
}
// 新增用户分组
export const createGroup = async (data: GroupVO) => {
return await request.post({ url: `/member/group/create`, data })
}
// 查询用户分组 - 精简信息列表
export const getSimpleGroupList = async () => {
return await request.get({ url: `/member/group/list-all-simple` })
}
// 修改用户分组
export const updateGroup = async (data: GroupVO) => {
return await request.put({ url: `/member/group/update`, data })
}
// 删除用户分组
export const deleteGroup = async (id: number) => {
return await request.delete({ url: `/member/group/delete?id=` + id })
}
import request from '@/config/axios'
export interface LevelVO {
id: number
name: string
experience: number
value: number
discountPercent: number
icon: string
bgUrl: string
status: number
}
// 查询会员等级列表
export const getLevelList = async (params) => {
return await request.get({ url: `/member/level/list`, params })
}
// 查询会员等级详情
export const getLevel = async (id: number) => {
return await request.get({ url: `/member/level/get?id=` + id })
}
// 查询会员等级 - 精简信息列表
export const getSimpleLevelList = async () => {
return await request.get({ url: `/member/level/list-all-simple` })
}
// 新增会员等级
export const createLevel = async (data: LevelVO) => {
return await request.post({ url: `/member/level/create`, data })
}
// 修改会员等级
export const updateLevel = async (data: LevelVO) => {
return await request.put({ url: `/member/level/update`, data })
}
// 删除会员等级
export const deleteLevel = async (id: number) => {
return await request.delete({ url: `/member/level/delete?id=` + id })
}
import request from '@/config/axios'
export interface RecordVO {
id: number
bizId: string
bizType: string
title: string
description: string
point: number
totalPoint: number
userId: number
createDate: Date
}
// 查询用户积分记录列表
export const getRecordPage = async (params) => {
return await request.get({ url: `/member/point/record/page`, params })
}
import request from '@/config/axios'
export interface SignInConfigVO {
id?: number
day?: number
point?: number
experience?: number
status?: number
}
// 查询积分签到规则列表
export const getSignInConfigList = async () => {
return await request.get({ url: `/member/sign-in/config/list` })
}
// 查询积分签到规则详情
export const getSignInConfig = async (id: number) => {
return await request.get({ url: `/member/sign-in/config/get?id=` + id })
}
// 新增积分签到规则
export const createSignInConfig = async (data: SignInConfigVO) => {
return await request.post({ url: `/member/sign-in/config/create`, data })
}
// 修改积分签到规则
export const updateSignInConfig = async (data: SignInConfigVO) => {
return await request.put({ url: `/member/sign-in/config/update`, data })
}
// 删除积分签到规则
export const deleteSignInConfig = async (id: number) => {
return await request.delete({ url: `/member/sign-in/config/delete?id=` + id })
}
import request from '@/config/axios'
export interface SignInRecordVO {
id: number
userId: number
day: number
point: number
}
// 查询用户签到积分列表
export const getSignInRecordPage = async (params) => {
return await request.get({ url: `/member/sign-in/record/page`, params })
}
import request from '@/config/axios'
export interface TagVO {
id: number
name: string
}
// 查询会员标签列表
export const getMemberTagPage = async (params: any) => {
return await request.get({ url: `/member/tag/page`, params })
}
// 查询会员标签详情
export const getMemberTag = async (id: number) => {
return await request.get({ url: `/member/tag/get?id=` + id })
}
// 查询会员标签 - 精简信息列表
export const getSimpleTagList = async () => {
return await request.get({ url: `/member/tag/list-all-simple` })
}
// 新增会员标签
export const createMemberTag = async (data: TagVO) => {
return await request.post({ url: `/member/tag/create`, data })
}
// 修改会员标签
export const updateMemberTag = async (data: TagVO) => {
return await request.put({ url: `/member/tag/update`, data })
}
// 删除会员标签
export const deleteMemberTag = async (id: number) => {
return await request.delete({ url: `/member/tag/delete?id=` + id })
}
import request from '@/config/axios'
export interface UserVO {
id: number
avatar: string | undefined
birthday: number | undefined
createTime: number | undefined
loginDate: number | undefined
loginIp: string
mark: string
mobile: string
name: string | undefined
nickname: string | undefined
registerIp: string
sex: number
status: number
areaId: number | undefined
areaName: string | undefined
levelName: string | null
point: number | undefined | null
totalPoint: number | undefined | null
experience: number | null | undefined
}
// 查询会员用户列表
export const getUserPage = async (params) => {
return await request.get({ url: `/member/user/page`, params })
}
// 查询会员用户详情
export const getUser = async (id: number) => {
return await request.get({ url: `/member/user/get?id=` + id })
}
// 修改会员用户
export const updateUser = async (data: UserVO) => {
return await request.put({ url: `/member/user/update`, data })
}
// 修改会员用户等级
export const updateUserLevel = async (data: any) => {
return await request.put({ url: `/member/user/update-level`, data })
}
// 修改会员用户积分
export const updateUserPoint = async (data: any) => {
return await request.put({ url: `/member/user/update-point`, data })
}
...@@ -355,24 +355,6 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -355,24 +355,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
] ]
}, },
{ {
path: '/member',
component: Layout,
name: 'MemberCenter',
meta: { hidden: true },
children: [
{
path: 'user/detail/:id',
name: 'MemberUserDetail',
meta: {
title: '会员详情',
noCache: true,
hidden: true
},
component: () => import('@/views/member/user/detail/index.vue')
}
]
},
{
path: '/:pathMatch(.*)*', path: '/:pathMatch(.*)*',
component: () => import('@/views/Error/404.vue'), component: () => import('@/views/Error/404.vue'),
name: '', name: '',
......
<template>
<doc-alert title="会员手册(功能开启)" url="https://doc.iocoder.cn/member/build/" />
<ContentWrap>
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="120px"
v-loading="formLoading"
>
<el-form-item label="hideId" v-show="false">
<el-input v-model="formData.id" />
</el-form-item>
<el-tabs>
<el-tab-pane label="积分">
<el-form-item label="积分抵扣" prop="pointTradeDeductEnable">
<el-switch v-model="formData.pointTradeDeductEnable" style="user-select: none" />
<el-text class="w-full" size="small" type="info">下单积分是否抵用订单金额</el-text>
</el-form-item>
<el-form-item label="积分抵扣" prop="pointTradeDeductUnitPrice">
<el-input-number
v-model="computedPointTradeDeductUnitPrice"
placeholder="请输入积分抵扣金额"
:precision="2"
/>
<el-text class="w-full" size="small" type="info">
积分抵用比例(1 积分抵多少金额),单位:元
</el-text>
</el-form-item>
<el-form-item label="积分抵扣最大值" prop="pointTradeDeductMaxPrice">
<el-input-number
v-model="formData.pointTradeDeductMaxPrice"
placeholder="请输入积分抵扣最大值"
/>
<el-text class="w-full" size="small" type="info">
单次下单积分使用上限,0 不限制
</el-text>
</el-form-item>
<el-form-item label="1 元赠送多少分" prop="pointTradeGivePoint">
<el-input-number
v-model="formData.pointTradeGivePoint"
placeholder="请输入 1 元赠送多少积分"
/>
<el-text class="w-full" size="small" type="info">
下单支付金额按比例赠送积分(实际支付 1 元赠送多少积分)
</el-text>
</el-form-item>
</el-tab-pane>
</el-tabs>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
</el-form-item>
</el-form>
</ContentWrap>
</template>
<script lang="ts" setup>
import * as ConfigApi from '@/api/member/config'
defineOptions({ name: 'MemberConfig' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formData = ref({
id: undefined,
pointTradeDeductEnable: true,
pointTradeDeductUnitPrice: 0,
pointTradeDeductMaxPrice: 0,
pointTradeGivePoint: 0
})
// 创建一个计算属性,用于将 pointTradeDeductUnitPrice 显示为带两位小数的形式
const computedPointTradeDeductUnitPrice = computed({
get: () => (formData.value.pointTradeDeductUnitPrice / 100).toFixed(2),
set: (newValue: number) => {
formData.value.pointTradeDeductUnitPrice = Math.round(newValue * 100)
}
})
const formRules = reactive({})
const formRef = ref() // 表单 Ref
/** 修改积分配置 */
const onSubmit = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as ConfigApi.ConfigVO
await ConfigApi.saveConfig(data)
message.success(t('common.updateSuccess'))
dialogVisible.value = false
} finally {
formLoading.value = false
}
}
/** 获得积分配置 */
const getConfig = async () => {
try {
const data = await ConfigApi.getConfig()
if (data === null) {
return
}
formData.value = data
} finally {
}
}
onMounted(() => {
getConfig()
})
</script>
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="600">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:value="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as GroupApi from '@/api/member/group'
import { CommonStatusEnum } from '@/utils/constants'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const formData = ref({
id: undefined,
name: undefined,
remark: undefined,
status: CommonStatusEnum.ENABLE
})
const formRules = reactive({
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await GroupApi.getGroup(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as GroupApi.GroupVO
if (formType.value === 'create') {
await GroupApi.createGroup(data)
message.success(t('common.createSuccess'))
} else {
await GroupApi.updateGroup(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: undefined,
remark: undefined,
status: CommonStatusEnum.ENABLE
}
formRef.value?.resetFields()
}
</script>
<template>
<el-select v-model="groupId" placeholder="请选择用户分组" clearable class="!w-240px">
<el-option
v-for="group in groupOptions"
:key="group.id"
:label="group.name"
:value="group.id"
/>
</el-select>
</template>
<script lang="ts" setup>
import * as GroupApi from '@/api/member/group'
/** 会员分组选择框 **/
defineOptions({ name: 'MemberGroupSelect' })
const props = defineProps({
/** 下拉框选中值 **/
modelValue: {
type: Number,
default: undefined
}
})
const emit = defineEmits(['update:modelValue'])
const groupId = computed({
get() {
return props.modelValue
},
set(value: any) {
emit('update:modelValue', value)
}
})
const groupOptions = ref<GroupApi.GroupVO[]>([])
const getList = async () => {
groupOptions.value = await GroupApi.getSimpleGroupList()
}
/** 初始化 */
onMounted(() => {
getList()
})
</script>
<template>
<doc-alert title="会员用户、标签、分组" url="https://doc.iocoder.cn/member/user/" />
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="分组名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入分组名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button type="primary" @click="openForm('create')" v-hasPermi="['member:group:create']">
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="编号" align="center" prop="id" min-width="60" />
<el-table-column label="名称" align="center" prop="name" min-width="80" />
<el-table-column label="备注" align="center" prop="remark" min-width="100" />
<el-table-column label="状态" align="center" prop="status" min-width="70">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
min-width="170"
/>
<el-table-column label="操作" align="center" width="150px">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['member:group:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['member:group:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗:添加/修改 -->
<GroupForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as GroupApi from '@/api/member/group'
import GroupForm from './GroupForm.vue'
/** 用户分组管理 **/
defineOptions({ name: 'MemberGroup' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: null,
status: null,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await GroupApi.getGroupPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await GroupApi.deleteGroup(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="800">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="110px"
v-loading="formLoading"
>
<el-row>
<el-col :span="12">
<el-form-item label="等级名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入等级名称" class="!w-240px" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="等级" prop="level">
<el-input-number
v-model="formData.level"
:min="0"
:precision="0"
placeholder="请输入等级"
class="!w-240px"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="升级经验" prop="experience">
<el-input-number
v-model="formData.experience"
:min="0"
:precision="0"
placeholder="请输入升级经验"
class="!w-240px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="享受折扣(%)" prop="discountPercent">
<el-input-number
v-model="formData.discountPercent"
:min="0"
:max="100"
:precision="0"
placeholder="请输入享受折扣"
class="!w-240px"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="等级图标">
<UploadImg v-model="formData.icon" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="背景图">
<UploadImg v-model="formData.backgroundUrl" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:value="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as LevelApi from '@/api/member/level'
import { CommonStatusEnum } from '@/utils/constants'
/** 会员等级表单 **/
defineOptions({ name: 'MemberLevelForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const formData = ref({
id: undefined,
name: undefined,
experience: undefined,
level: undefined,
discountPercent: undefined,
icon: undefined,
backgroundUrl: undefined,
status: CommonStatusEnum.ENABLE
})
const formRules = reactive({
name: [{ required: true, message: '等级名称不能为空', trigger: 'blur' }],
experience: [{ required: true, message: '升级经验不能为空', trigger: 'blur' }],
level: [{ required: true, message: '等级不能为空', trigger: 'blur' }],
discountPercent: [{ required: true, message: '享受折扣不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await LevelApi.getLevel(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as LevelApi.LevelVO
if (formType.value === 'create') {
await LevelApi.createLevel(data)
message.success(t('common.createSuccess'))
} else {
await LevelApi.updateLevel(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: undefined,
experience: undefined,
level: undefined,
discountPercent: undefined,
icon: undefined,
backgroundUrl: undefined,
status: CommonStatusEnum.ENABLE
}
formRef.value?.resetFields()
}
</script>
<template>
<el-select v-model="levelId" placeholder="请选择用户等级" clearable class="!w-240px">
<el-option v-for="level in levelOptions" :key="level.id" :label="level.name" :value="level.id">
<span class="flex items-center gap-x-8px">
<el-avatar :src="level.icon" size="small" />
{{ level.name }}
</span>
</el-option>
</el-select>
</template>
<script lang="ts" setup>
import * as LevelApi from '@/api/member/level'
/** 会员等级选择框 **/
defineOptions({ name: 'MemberLevelSelect' })
const props = defineProps({
/** 下拉框选中值 **/
modelValue: {
type: Number,
default: undefined
}
})
const emit = defineEmits(['update:modelValue'])
const levelId = computed({
get() {
return props.modelValue
},
set(value: any) {
emit('update:modelValue', value)
}
})
const levelOptions = ref<LevelApi.LevelVO[]>([])
const getList = async () => {
levelOptions.value = await LevelApi.getSimpleLevelList()
}
/** 初始化 */
onMounted(() => {
getList()
})
</script>
<template>
<doc-alert title="会员等级、积分、签到" url="https://doc.iocoder.cn/member/level/" />
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="等级名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入等级名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button type="primary" @click="openForm('create')" v-hasPermi="['member:level:create']">
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="编号" align="center" prop="id" min-width="60" />
<el-table-column label="等级图标" align="center" prop="icon" min-width="80">
<template #default="scope">
<el-image
:src="scope.row.icon"
class="h-30px w-30px"
:preview-src-list="[scope.row.icon]"
/>
</template>
</el-table-column>
<el-table-column label="等级背景图" align="center" prop="backgroundUrl" min-width="100">
<template #default="scope">
<el-image
:src="scope.row.backgroundUrl"
class="h-30px w-30px"
:preview-src-list="[scope.row.backgroundUrl]"
/>
</template>
</el-table-column>
<el-table-column label="等级名称" align="center" prop="name" min-width="100" />
<el-table-column label="等级" align="center" prop="level" min-width="60" />
<el-table-column label="升级经验" align="center" prop="experience" min-width="80" />
<el-table-column label="享受折扣(%)" align="center" prop="discountPercent" min-width="110" />
<el-table-column label="状态" align="center" prop="status" min-width="70">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
min-width="170"
/>
<el-table-column label="操作" align="center" min-width="110px" fixed="right">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['member:level:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['member:level:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</ContentWrap>
<!-- 表单弹窗:添加/修改 -->
<LevelForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as LevelApi from '@/api/member/level'
import LevelForm from './LevelForm.vue'
/** 会员等级管理 **/
defineOptions({ name: 'MemberLevel' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据
const queryParams = reactive({
name: null,
status: null
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
list.value = await LevelApi.getLevelList(queryParams)
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await LevelApi.deleteLevel(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<template>
<doc-alert title="会员等级、积分、签到" url="https://doc.iocoder.cn/member/level/" />
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="用户" prop="nickname">
<el-input
v-model="queryParams.nickname"
placeholder="请输入用户昵称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="业务类型" prop="bizType">
<el-select
v-model="queryParams.bizType"
placeholder="请选择业务类型"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.MEMBER_POINT_BIZ_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="积分标题" prop="title">
<el-input
v-model="queryParams.title"
placeholder="请输入积分标题"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="获得时间" prop="createDate">
<el-date-picker
v-model="queryParams.createDate"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" />
重置
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="id" width="180" />
<el-table-column
label="获得时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180"
/>
<el-table-column label="用户" align="center" prop="nickname" width="200" />
<el-table-column label="获得积分" align="center" prop="point" width="100">
<template #default="scope">
<el-tag v-if="scope.row.point > 0" class="ml-2" type="success" effect="dark">
+{{ scope.row.point }}
</el-tag>
<el-tag v-else class="ml-2" type="danger" effect="dark"> {{ scope.row.point }} </el-tag>
</template>
</el-table-column>
<el-table-column label="总积分" align="center" prop="totalPoint" width="100" />
<el-table-column label="标题" align="center" prop="title" />
<el-table-column label="描述" align="center" prop="description" />
<el-table-column label="业务编码" align="center" prop="bizId" />
<el-table-column label="业务类型" align="center" prop="bizType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.MEMBER_POINT_BIZ_TYPE" :value="scope.row.bizType" />
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗:添加/修改 -->
<RecordForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as RecordApi from '@/api/member/point/record'
defineOptions({ name: 'PointRecord' })
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
nickname: null,
bizType: null,
title: null,
createDate: []
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await RecordApi.getRecordPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="签到天数" prop="day">
<el-input-number v-model="formData.day" :min="1" :max="7" :precision="0" />
<el-text class="mx-1" style="margin-left: 10px" type="danger">
只允许设置 1-7,默认签到 7 天为一个周期
</el-text>
</el-form-item>
<el-form-item label="奖励积分" prop="point">
<el-input-number v-model="formData.point" :min="0" :precision="0" />
</el-form-item>
<el-form-item label="奖励经验" prop="experience">
<el-input-number v-model="formData.experience" :min="0" :precision="0" />
</el-form-item>
<el-form-item label="开启状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:value="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import * as SignInConfigApi from '@/api/member/signin/config'
import { CommonStatusEnum } from '@/utils/constants'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const formData = ref<SignInConfigApi.SignInConfigVO>({} as SignInConfigApi.SignInConfigVO)
// 奖励校验规则
const awardValidator = (rule: any, _value: any, callback: any) => {
if (!formData.value.point && !formData.value.experience) {
callback(new Error('奖励积分与奖励经验至少配置一个'))
return
}
// 清除另一个字段的错误提示
const otherAwardField = rule?.field === 'point' ? 'experience' : 'point'
formRef.value.validateField(otherAwardField, () => null)
callback()
}
const formRules = reactive({
day: [{ required: true, message: '签到天数不能空', trigger: 'blur' }],
point: [
{ required: true, message: '奖励积分不能空', trigger: 'blur' },
{ validator: awardValidator, trigger: 'blur' }
],
experience: [
{ required: true, message: '奖励经验不能空', trigger: 'blur' },
{ validator: awardValidator, trigger: 'blur' }
]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await SignInConfigApi.getSignInConfig(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
if (formType.value === 'create') {
await SignInConfigApi.createSignInConfig(formData.value)
message.success(t('common.createSuccess'))
} else {
await SignInConfigApi.updateSignInConfig(formData.value)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
day: undefined,
point: 0,
experience: 0,
status: CommonStatusEnum.ENABLE
}
formRef.value?.resetFields()
}
</script>
<template>
<doc-alert title="会员等级、积分、签到" url="https://doc.iocoder.cn/member/level/" />
<!-- 搜索工作栏 -->
<ContentWrap>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['point:sign-in-config:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column
label="签到天数"
align="center"
prop="day"
:formatter="(_, __, cellValue) => ['第', cellValue, '天'].join(' ')"
/>
<el-table-column label="奖励积分" align="center" prop="point" />
<el-table-column label="奖励经验" align="center" prop="experience" />
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['point:sign-in-config:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['point:sign-in-config:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</ContentWrap>
<!-- 表单弹窗:添加/修改 -->
<SignInConfigForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import * as SignInConfigApi from '@/api/member/signin/config'
import SignInConfigForm from './SignInConfigForm.vue'
import { DICT_TYPE } from '@/utils/dict'
defineOptions({ name: 'SignInConfig' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await SignInConfigApi.getSignInConfigList()
console.log(data)
list.value = data
} finally {
loading.value = false
}
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await SignInConfigApi.deleteSignInConfig(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<template>
<doc-alert title="会员等级、积分、签到" url="https://doc.iocoder.cn/member/level/" />
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="签到用户" prop="nickname">
<el-input
v-model="queryParams.nickname"
placeholder="请输入签到用户"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="签到天数" prop="day">
<el-input
v-model="queryParams.day"
placeholder="请输入签到天数"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="签到时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="签到用户" align="center" prop="nickname" />
<el-table-column
label="签到天数"
align="center"
prop="day"
:formatter="(_, __, cellValue) => ['第', cellValue, '天'].join(' ')"
/>
<el-table-column label="获得积分" align="center" prop="point" width="100">
<template #default="scope">
<el-tag v-if="scope.row.point > 0" class="ml-2" type="success" effect="dark">
+{{ scope.row.point }}
</el-tag>
<el-tag v-else class="ml-2" type="danger" effect="dark"> {{ scope.row.point }} </el-tag>
</template>
</el-table-column>
<el-table-column
label="签到时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
/>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</template>
<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import * as SignInRecordApi from '@/api/member/signin/record'
defineOptions({ name: 'SignInRecord' })
const message = useMessage() // 消息弹窗
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
nickname: null,
day: null,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await SignInRecordApi.getSignInRecordPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="标签名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入标签名称" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import * as TagApi from '@/api/member/tag'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const formData = ref({
id: undefined,
name: undefined
})
const formRules = reactive({
name: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await TagApi.getMemberTag(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as TagApi.TagVO
if (formType.value === 'create') {
await TagApi.createMemberTag(data)
message.success(t('common.createSuccess'))
} else {
await TagApi.updateMemberTag(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: undefined
}
formRef.value?.resetFields()
}
</script>
<template>
<el-select v-model="tagIds" placeholder="请选择用户标签" clearable multiple class="!w-240px">
<el-option v-for="tag in tags" :key="tag.id" :label="tag.name" :value="tag.id" />
</el-select>
<el-button
v-if="showAdd"
type="primary"
class="ml-2"
link
@click="openForm('create')"
v-hasPermi="['member:tag:create']"
>
新增标签
</el-button>
<!-- 表单弹窗:添加 -->
<TagForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import * as TagApi from '@/api/member/tag'
import TagForm from '@/views/member/tag/TagForm.vue'
defineOptions({ name: 'MemberTagSelect' })
const props = defineProps({
/** 下拉框选中值 **/
modelValue: {
type: Array,
default: undefined
},
/** 是否显示“新增标签”按钮 **/
showAdd: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['update:modelValue'])
defineExpose({
showAdd: props.showAdd
})
const tagIds = computed({
get() {
return props.modelValue
},
set(value: any) {
emit('update:modelValue', value)
}
})
const tags = ref<TagApi.TagVO[]>([])
const getList = async () => {
tags.value = await TagApi.getSimpleTagList()
}
/** 添加用户标签表单弹框 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 初始化 */
onMounted(() => {
getList()
})
</script>
<template>
<doc-alert title="会员用户、标签、分组" url="https://doc.iocoder.cn/member/user/" />
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="标签名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入标签名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button type="primary" @click="openForm('create')" v-hasPermi="['member:tag:create']">
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="编号" align="center" prop="id" width="150px" />
<el-table-column label="标签名称" align="center" prop="name" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center" width="150px">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['member:tag:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['member:tag:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗:添加/修改 -->
<TagForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts" name="MemberTag">
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as TagApi from '@/api/member/tag'
import TagForm from './TagForm.vue'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: null,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await TagApi.getMemberTagPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await TagApi.deleteMemberTag(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="formData.mobile" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:value="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="用户昵称" prop="nickname">
<el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
</el-form-item>
<el-form-item label="头像" prop="avatar">
<UploadImg v-model="formData.avatar" :limit="1" :is-show-tip="false" />
</el-form-item>
<el-form-item label="真实名字" prop="name">
<el-input v-model="formData.name" placeholder="请输入真实名字" />
</el-form-item>
<el-form-item label="用户性别" prop="sex">
<el-radio-group v-model="formData.sex">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
:key="dict.value"
:value="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="出生日期" prop="birthday">
<el-date-picker
v-model="formData.birthday"
type="date"
value-format="x"
placeholder="选择出生日期"
/>
</el-form-item>
<el-form-item label="所在地" prop="areaId">
<el-tree-select
v-model="formData.areaId"
:data="areaList"
:props="defaultProps"
:render-after-expand="true"
/>
</el-form-item>
<el-form-item label="用户标签" prop="tagIds">
<MemberTagSelect v-model="formData.tagIds" show-add />
</el-form-item>
<el-form-item label="用户分组" prop="groupId">
<MemberGroupSelect v-model="formData.groupId" />
</el-form-item>
<el-form-item label="会员备注" prop="mark">
<el-input type="textarea" v-model="formData.mark" placeholder="请输入会员备注" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as UserApi from '@/api/member/user'
import * as AreaApi from '@/api/system/area'
import { defaultProps } from '@/utils/tree'
import MemberTagSelect from '@/views/member/tag/components/MemberTagSelect.vue'
import MemberGroupSelect from '@/views/member/group/components/MemberGroupSelect.vue'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const formData = ref({
id: undefined,
mobile: undefined,
password: undefined,
status: undefined,
nickname: undefined,
avatar: undefined,
name: undefined,
sex: undefined,
areaId: undefined,
birthday: undefined,
mark: undefined,
tagIds: [],
groupId: undefined
})
const formRules = reactive({
mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const areaList = ref([]) // 地区列表
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await UserApi.getUser(id)
} finally {
formLoading.value = false
}
}
// 获得地区列表
areaList.value = await AreaApi.getAreaTree()
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as UserApi.UserVO
if (formType.value === 'create') {
// 说明:目前暂时没有新增操作。如果自己业务需要,可以进行扩展
// await UserApi.createUser(data)
message.success(t('common.createSuccess'))
} else {
await UserApi.updateUser(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
mobile: undefined,
password: undefined,
status: undefined,
nickname: undefined,
avatar: undefined,
name: undefined,
sex: undefined,
areaId: undefined,
birthday: undefined,
mark: undefined,
tagIds: [],
groupId: undefined
}
formRef.value?.resetFields()
}
</script>
<template>
<Dialog v-model="dialogVisible" title="修改用户余额" width="600">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="130px"
>
<el-form-item label="用户编号" prop="id">
<el-input v-model="formData.id" class="!w-240px" disabled />
</el-form-item>
<el-form-item label="用户昵称" prop="nickname">
<el-input v-model="formData.nickname" class="!w-240px" disabled />
</el-form-item>
<el-form-item label="变动前余额(元)" prop="balance">
<el-input :model-value="formData.balance" class="!w-240px" disabled />
</el-form-item>
<el-form-item label="变动类型" prop="changeType">
<el-radio-group v-model="formData.changeType">
<el-radio :label="1">增加</el-radio>
<el-radio :label="-1">减少</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="变动余额(元)" prop="changeBalance">
<el-input-number
v-model="formData.changeBalance"
:min="0"
:precision="2"
:step="0.1"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="变动后余额(元)">
<el-input :model-value="balanceResult" class="!w-240px" disabled />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import * as UserApi from '@/api/member/user'
import * as WalletApi from '@/api/pay/wallet/balance'
import { convertToInteger, formatToFraction } from '@/utils'
/** 修改用户余额表单 */
defineOptions({ name: 'UpdateBalanceForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formData = ref({
id: undefined,
nickname: undefined,
balance: '0',
changeBalance: 0,
changeType: 1
})
const formRules = reactive({
changeBalance: [{ required: true, message: '变动余额不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (id?: number) => {
dialogVisible.value = true
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
const user = await UserApi.getUser(id)
const wallet = await WalletApi.getWallet({ userId: user.id || 0 })
formData.value.id = user.id
formData.value.nickname = user.nickname
formData.value.balance = formatToFraction(wallet.balance)
formData.value.changeType = 1 // 默认增加余额
formData.value.changeBalance = 0 // 变动余额默认0
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
if (formData.value.changeBalance <= 0) {
message.error('变动余额不能为零')
return
}
if (convertToInteger(balanceResult.value) < 0) {
message.error('变动后的余额不能小于 0')
return
}
// 提交请求
formLoading.value = true
try {
await WalletApi.updateWalletBalance({
userId: formData.value.id,
balance: convertToInteger(formData.value.changeBalance) * formData.value.changeType
})
message.success(t('common.updateSuccess'))
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
nickname: undefined,
balance: '0',
changeBalance: 0,
changeType: 1
}
formRef.value?.resetFields()
}
/** 变动后的余额 */
const balanceResult = computed(() =>
formatToFraction(
convertToInteger(formData.value.balance) +
convertToInteger(formData.value.changeBalance) * formData.value.changeType
)
)
</script>
<template>
<Dialog title="修改用户等级" v-model="dialogVisible" width="600">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="用户编号" prop="id">
<el-input v-model="formData.id" placeholder="请输入用户昵称" class="!w-240px" disabled />
</el-form-item>
<el-form-item label="用户昵称" prop="nickname">
<el-input
v-model="formData.nickname"
placeholder="请输入用户昵称"
class="!w-240px"
disabled
/>
</el-form-item>
<el-form-item label="用户等级" prop="levelId">
<MemberLevelSelect v-model="formData.levelId" />
</el-form-item>
<el-form-item label="修改原因" prop="reason">
<el-input type="textarea" v-model="formData.reason" placeholder="请输入修改原因" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import * as UserApi from '@/api/member/user'
import MemberLevelSelect from '@/views/member/level/components/MemberLevelSelect.vue'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formData = ref({
id: undefined,
nickname: undefined,
levelId: undefined,
reason: undefined
})
const formRules = reactive({
reason: [{ required: true, message: '修改原因不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (id?: number) => {
dialogVisible.value = true
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await UserApi.getUser(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
await UserApi.updateUserLevel(formData.value)
message.success(t('common.updateSuccess'))
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
nickname: undefined,
levelId: undefined,
reason: undefined
}
formRef.value?.resetFields()
}
</script>
<template>
<Dialog v-model="dialogVisible" title="修改用户积分" width="600">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="100px"
>
<el-form-item label="用户编号" prop="id">
<el-input v-model="formData.id" class="!w-240px" disabled />
</el-form-item>
<el-form-item label="用户昵称" prop="nickname">
<el-input v-model="formData.nickname" class="!w-240px" disabled />
</el-form-item>
<el-form-item label="变动前积分" prop="point">
<el-input-number v-model="formData.point" class="!w-240px" disabled />
</el-form-item>
<el-form-item label="变动类型" prop="changeType">
<el-radio-group v-model="formData.changeType">
<el-radio :value="1">增加</el-radio>
<el-radio :value="-1">减少</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="变动积分" prop="changePoint">
<el-input-number v-model="formData.changePoint" :min="0" :precision="0" class="!w-240px" />
</el-form-item>
<el-form-item label="变动后积分">
<el-input-number v-model="pointResult" class="!w-240px" disabled />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import * as UserApi from '@/api/member/user'
/** 修改用户积分表单 */
defineOptions({ name: 'UpdatePointForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formData = ref({
id: undefined,
nickname: undefined,
point: 0,
changePoint: 0,
changeType: 1
})
const formRules = reactive({
changePoint: [{ required: true, message: '变动积分不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (id?: number) => {
dialogVisible.value = true
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await UserApi.getUser(id)
formData.value.changeType = 1 // 默认增加积分
formData.value.changePoint = 0 // 变动积分默认0
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
if (formData.value.changePoint < 1) {
message.error('变动积分不能小于 1')
return
}
if (pointResult.value < 0) {
message.error('变动后的积分不能小于 0')
return
}
// 提交请求
formLoading.value = true
try {
await UserApi.updateUserPoint({
id: formData.value.id,
point: formData.value.changePoint * formData.value.changeType
})
message.success(t('common.updateSuccess'))
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
nickname: undefined,
point: 0,
changePoint: 0,
changeType: 1
}
formRef.value?.resetFields()
}
/** 变动后的积分 */
const pointResult = computed(
() => formData.value.point + formData.value.changePoint * formData.value.changeType
)
</script>
<template>
<el-descriptions :class="{ 'kefu-descriptions': column === 1 }" :column="column">
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="svg-icon:member_level" label=" 等级 " />
</template>
{{ user.levelName || '无' }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="ep:suitcase" label=" 成长值 " />
</template>
{{ user.experience || 0 }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="ep:coin" label=" 当前积分 " />
</template>
{{ user.point || 0 }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="ep:coin" label=" 总积分 " />
</template>
{{ user.totalPoint || 0 }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="svg-icon:member_balance" label=" 当前余额 " />
</template>
{{ fenToYuan(wallet.balance || 0) }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="svg-icon:member_expenditure_balance" label=" 支出金额 " />
</template>
{{ fenToYuan(wallet.totalExpense || 0) }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="svg-icon:member_recharge_balance" label=" 充值金额 " />
</template>
{{ fenToYuan(wallet.totalRecharge || 0) }}
</el-descriptions-item>
</el-descriptions>
</template>
<script lang="ts" setup>
import { DescriptionsItemLabel } from '@/components/Descriptions'
import * as UserApi from '@/api/member/user'
import * as WalletApi from '@/api/pay/wallet/balance'
import { fenToYuan } from '@/utils'
withDefaults(defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO; column?: number }>(), {
column: 2
}) // 用户信息
</script>
<style lang="scss" scoped>
.cell-item {
display: inline;
}
.cell-item::after {
content: ':';
}
.kefu-descriptions {
::v-deep(.el-descriptions__cell) {
display: flex;
align-items: center;
justify-content: space-between;
.el-descriptions__label {
width: 120px;
display: block;
text-align: left;
}
.el-descriptions__content {
flex: 1;
text-align: end;
}
}
}
</style>
<template>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="地址编号" align="center" prop="id" width="150px" />
<el-table-column label="收件人名称" align="center" prop="name" width="150px" />
<el-table-column label="手机号" align="center" prop="mobile" width="150px" />
<el-table-column label="地区编码" align="center" prop="areaId" width="150px" />
<el-table-column label="收件详细地址" align="center" prop="detailAddress" />
<el-table-column label="是否默认" align="center" prop="defaultStatus" width="150px">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="Number(scope.row.defaultStatus)" />
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
</el-table>
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as AddressApi from '@/api/member/address'
const { userId }: { userId: number } = defineProps({
userId: {
type: Number,
required: true
}
})
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
list.value = await AddressApi.getAddressList({ userId })
} finally {
loading.value = false
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<style scoped lang="scss"></style>
<template>
<!-- 搜索 -->
<ContentWrap>
<el-form ref="queryFormRef" :inline="true" :model="queryParams" label-width="68px">
<el-form-item label="商品名称" prop="spuName">
<el-input
v-model="queryParams.spuName"
class="!w-280px"
clearable
placeholder="请输入商品 SPU 名称"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="退款编号" prop="no">
<el-input
v-model="queryParams.no"
class="!w-280px"
clearable
placeholder="请输入退款编号"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="订单编号" prop="orderNo">
<el-input
v-model="queryParams.orderNo"
class="!w-280px"
clearable
placeholder="请输入订单编号"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="售后状态" prop="status">
<el-select
v-model="queryParams.status"
class="!w-280px"
clearable
placeholder="请选择售后状态"
>
<el-option label="全部" value="0" />
<el-option
v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="售后方式" prop="way">
<el-select
v-model="queryParams.way"
class="!w-280px"
clearable
placeholder="请选择售后方式"
>
<el-option
v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_WAY)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="售后类型" prop="type">
<el-select
v-model="queryParams.type"
class="!w-280px"
clearable
placeholder="请选择售后类型"
>
<el-option
v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-280px"
end-placeholder="自定义时间"
start-placeholder="自定义时间"
type="daterange"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<ContentWrap>
<el-tabs v-model="queryParams.status" @tab-click="tabClick">
<el-tab-pane
v-for="item in statusTabs"
:key="item.label"
:label="item.label"
:name="item.value"
/>
</el-tabs>
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column align="center" label="退款编号" min-width="200" prop="no" />
<el-table-column align="center" label="订单编号" min-width="200" prop="orderNo">
<template #default="{ row }">
<el-button link type="primary" @click="openOrderDetail(row.orderId)">
{{ row.orderNo }}
</el-button>
</template>
</el-table-column>
<el-table-column label="商品信息" min-width="600" prop="spuName">
<template #default="{ row }">
<div class="flex items-center">
<el-image
:src="row.picUrl"
class="mr-10px h-30px w-30px"
@click="imagePreview(row.picUrl)"
/>
<span class="mr-10px">{{ row.spuName }}</span>
<el-tag v-for="property in row.properties" :key="property.propertyId" class="mr-10px">
{{ property.propertyName }}: {{ property.valueName }}
</el-tag>
</div>
</template>
</el-table-column>
<el-table-column align="center" label="订单金额" min-width="120" prop="refundPrice">
<template #default="scope">
<span>{{ fenToYuan(scope.row.refundPrice) }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="申请时间" prop="createTime" width="180">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="售后状态" width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column align="center" label="售后方式">
<template #default="scope">
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="scope.row.way" />
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="120">
<template #default="{ row }">
<el-button link type="primary" @click="openAfterSaleDetail(row.id)">处理退款</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</ContentWrap>
</template>
<script lang="ts" setup>
import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import { createImageViewer } from '@/components/ImageViewer'
import { TabsPaneContext } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { fenToYuan } from '@/utils'
defineOptions({ name: 'UserAfterSaleList' })
const { push } = useRouter() // 路由跳转
const props = defineProps<{
userId: number
}>()
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref<AfterSaleApi.TradeAfterSaleVO[]>([]) // 列表的数据
const statusTabs = ref([
{
label: '全部',
value: '0'
}
])
const queryFormRef = ref() // 搜索的表单
// 查询参数
const queryParams = ref({
pageNo: 1,
pageSize: 10,
no: null,
status: '0',
orderNo: null,
spuName: null,
createTime: [],
way: null,
type: null,
userId: null
})
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = cloneDeep(queryParams.value)
// 处理掉全部的状态,不传就是全部
if (data.status === '0') {
delete data.status
}
// 执行查询
if (props.userId) {
data.userId = props.userId as any
}
const res = await AfterSaleApi.getAfterSalePage(data)
list.value = res.list as AfterSaleApi.TradeAfterSaleVO[]
total.value = res.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = async () => {
queryParams.value.pageNo = 1
await getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields()
handleQuery()
}
/** tab 切换 */
const tabClick = async (tab: TabsPaneContext) => {
queryParams.value.status = tab.paneName as any
await getList()
}
/** 处理退款 */
const openAfterSaleDetail = (id: number) => {
push({ name: 'TradeAfterSaleDetail', params: { id } })
}
/** 查看订单详情 */
const openOrderDetail = (id: number) => {
push({ name: 'TradeOrderDetail', params: { id } })
}
/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
createImageViewer({
urlList: [imgUrl]
})
}
onMounted(async () => {
await getList()
// 设置 statuses 过滤
for (const dict of getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)) {
statusTabs.value.push({
label: dict.label,
value: dict.value
})
}
})
</script>
<template>
<ContentWrap>
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
<el-table-column align="center" label="编号" prop="id" />
<el-table-column align="center" label="关联业务标题" prop="title" />
<el-table-column align="center" label="交易金额" prop="price">
<template #default="{ row }"> {{ fenToYuan(row.price) }}</template>
</el-table-column>
<el-table-column align="center" label="钱包余额" prop="balance">
<template #default="{ row }"> {{ fenToYuan(row.balance) }}</template>
</el-table-column>
<el-table-column
:formatter="dateFormatter"
align="center"
label="交易时间"
prop="createTime"
width="180px"
/>
</el-table>
<!-- 分页 -->
<Pagination
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</ContentWrap>
</template>
<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import * as WalletTransactionApi from '@/api/pay/wallet/transaction'
import { fenToYuan } from '@/utils'
defineOptions({ name: 'UserBalanceList' })
const props = defineProps({
walletId: {
type: Number,
required: false
}
})
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
walletId: null
})
const list = ref([]) // 列表的数据
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
queryParams.walletId = props.walletId as any
const data = await WalletTransactionApi.getWalletTransactionPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<template>
<el-card shadow="never">
<template #header>
<slot name="header"></slot>
</template>
<el-row v-if="mode === 'member'">
<el-col :span="4">
<ElAvatar :size="140" :src="user.avatar || undefined" shape="square" />
</el-col>
<el-col :span="20">
<el-descriptions :column="2">
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="ep:user" label="用户名" />
</template>
{{ user.name || '空' }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="ep:user" label="昵称" />
</template>
{{ user.nickname }}
</el-descriptions-item>
<el-descriptions-item label="手机号">
<template #label>
<descriptions-item-label icon="ep:phone" label="手机号" />
</template>
{{ user.mobile }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="fa:mars-double" label="性别" />
</template>
<dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="user.sex" />
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="ep:location" label="所在地" />
</template>
{{ user.areaName }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="ep:position" label="注册 IP" />
</template>
{{ user.registerIp }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="fa:birthday-cake" label="生日" />
</template>
{{ user.birthday ? formatDate(user.birthday as any) : '空' }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="ep:calendar" label="注册时间" />
</template>
{{ user.createTime ? formatDate(user.createTime as any) : '空' }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="ep:calendar" label="最后登录时间" />
</template>
{{ user.loginDate ? formatDate(user.loginDate as any) : '空' }}
</el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
<template v-if="mode === 'kefu'">
<ElAvatar :size="140" :src="user.avatar || undefined" shape="square" />
<el-descriptions :column="1" class="kefu-descriptions">
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="ep:user" label="用户名" />
</template>
{{ user.name || '空' }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="ep:user" label="昵称" />
</template>
{{ user.nickname }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="ep:phone" label="手机号" />
</template>
{{ user.mobile }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="fa:mars-double" label="性别" />
</template>
<dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="user.sex" />
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="ep:location" label="所在地" />
</template>
{{ user.areaName }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="ep:position" label="注册 IP" />
</template>
{{ user.registerIp }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="fa:birthday-cake" label="生日" />
</template>
{{ user.birthday ? formatDate(user.birthday as any) : '空' }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="ep:calendar" label="注册时间" />
</template>
{{ user.createTime ? formatDate(user.createTime as any) : '空' }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<descriptions-item-label icon="ep:calendar" label="最后登录时间" />
</template>
{{ user.loginDate ? formatDate(user.loginDate as any) : '空' }}
</el-descriptions-item>
</el-descriptions>
</template>
</el-card>
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as UserApi from '@/api/member/user'
import { DescriptionsItemLabel } from '@/components/Descriptions/index'
withDefaults(defineProps<{ user: UserApi.UserVO; mode?: string }>(), {
mode: 'member'
})
</script>
<style lang="scss" scoped>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
::v-deep(.kefu-descriptions) {
.el-descriptions__cell {
display: flex;
align-items: center;
justify-content: space-between;
.el-descriptions__label {
width: 120px;
display: block;
text-align: left;
}
.el-descriptions__content {
flex: 1;
text-align: end;
}
}
}
</style>
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="85px"
>
<el-form-item label="用户类型" prop="level">
<el-radio-group v-model="queryParams.level" @change="handleQuery">
<el-radio-button checked>全部</el-radio-button>
<el-radio-button value="1">一级推广人</el-radio-button>
<el-radio-button value="2">二级推广人</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="绑定时间" prop="bindUserTime">
<el-date-picker
v-model="queryParams.bindUserTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="用户编号" align="center" prop="id" min-width="80px" />
<el-table-column label="头像" align="center" prop="avatar" width="70px">
<template #default="scope">
<el-avatar :src="scope.row.avatar" />
</template>
</el-table-column>
<el-table-column label="昵称" align="center" prop="nickname" min-width="80px" />
<el-table-column label="等级" align="center" prop="level" min-width="80px">
<template #default="scope">
<el-tag v-if="scope.row.bindUserId === bindUserId">一级</el-tag>
<el-tag v-else>二级</el-tag>
</template>
</el-table-column>
<el-table-column
label="绑定时间"
align="center"
prop="bindUserTime"
:formatter="dateFormatter"
width="170px"
/>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import * as BrokerageUserApi from '@/api/mall/trade/brokerage/user'
/** 推广人列表 */
defineOptions({ name: 'UserBrokerageList' })
const { bindUserId }: { bindUserId: number } = defineProps({
bindUserId: {
type: Number,
required: true
}
}) //用户编号
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
bindUserId: null,
level: '',
bindUserTime: []
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
queryParams.bindUserId = bindUserId
const data = await BrokerageUserApi.getBrokerageUserPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields()
handleQuery()
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<template>
<!-- 搜索工作栏 -->
<ContentWrap>
<el-form
ref="queryFormRef"
:inline="true"
:model="queryParams"
class="-mb-15px"
label-width="68px"
>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" />搜索 </el-button>
<el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" />重置 </el-button>
</el-form-item>
</el-form>
</ContentWrap>
<ContentWrap>
<!-- Tab 选项:真正的内容在 Lab -->
<el-tabs v-model="activeTab" type="card" @tab-change="onTabChange">
<el-tab-pane
v-for="tab in statusTabs"
:key="tab.value"
:label="tab.label"
:name="tab.value"
/>
</el-tabs>
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="优惠劵" align="center" prop="name" />
<el-table-column label="优惠券类型" align="center" prop="discountType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="scope.row.discountType" />
</template>
</el-table-column>
<el-table-column label="领取方式" align="center" prop="takeType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE" :value="scope.row.takeType" />
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PROMOTION_COUPON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column
label="领取时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180"
/>
<el-table-column
label="使用时间"
align="center"
prop="useTime"
:formatter="dateFormatter"
width="180"
/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button
v-hasPermi="['promotion:coupon:delete']"
type="danger"
link
@click="handleDelete(scope.row.id)"
>
回收
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</ContentWrap>
</template>
<script setup lang="ts" name="UserCouponList">
import { deleteCoupon, getCouponPage } from '@/api/mall/promotion/coupon/coupon'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
defineOptions({ name: 'UserCouponList' })
const { userId }: { userId: number } = defineProps({
userId: {
type: Number,
required: true
}
}) //用户编号
const message = useMessage() // 消息弹窗
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 字典表格数据
// 查询参数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
createTime: [],
status: undefined,
userIds: undefined
})
const queryFormRef = ref() // 搜索的表单
const activeTab = ref('all') // Tab 筛选
const statusTabs = reactive([
{
label: '全部',
value: 'all'
}
])
/** 查询列表 */
const getList = async () => {
loading.value = true
// 执行查询
try {
queryParams.userIds = userId
const data = await getCouponPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields()
handleQuery()
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 二次确认
await message.confirm(
'回收将会收回会员领取的待使用的优惠券,已使用的将无法回收,确定要回收所选优惠券吗?'
)
// 发起删除
await deleteCoupon(id)
message.notifySuccess('回收成功')
// 重新加载列表
await getList()
} catch {}
}
/** tab 切换 */
const onTabChange = (tabName) => {
queryParams.status = tabName === 'all' ? undefined : tabName
getList()
}
/** 初始化 **/
onMounted(() => {
getList()
// 设置 statuses 过滤
for (const dict of getIntDictOptions(DICT_TYPE.PROMOTION_COUPON_STATUS)) {
statusTabs.push({
label: dict.label,
value: dict.value as string
})
}
})
</script>
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="业务类型" prop="bizType">
<el-select
v-model="queryParams.bizType"
placeholder="请选择业务类型"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="标题" prop="title">
<el-input
v-model="queryParams.title"
placeholder="请输入标题"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="编号" align="center" prop="id" width="150px" />
<el-table-column
label="获得时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
/>
<el-table-column label="经验" align="center" prop="experience" width="150px">
<template #default="scope">
<el-tag v-if="scope.row.experience > 0" class="ml-2" type="success" effect="dark">
+{{ scope.row.experience }}
</el-tag>
<el-tag v-else class="ml-2" type="danger" effect="dark">
{{ scope.row.experience }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="总经验" align="center" prop="totalExperience" width="150px">
<template #default="scope">
<el-tag class="ml-2" effect="dark">
{{ scope.row.totalExperience }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="标题" align="center" prop="title" width="150px" />
<el-table-column label="描述" align="center" prop="description" />
<el-table-column label="业务编号" align="center" prop="bizId" width="150px" />
<el-table-column label="业务类型" align="center" prop="bizType" width="150px">
<!-- TODO 芋艿:此处应创建对应的字典 -->
<template #default="scope">
<dict-tag :type="DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE" :value="scope.row.bizType" />
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import * as ExperienceRecordApi from '@/api/member/experience-record/index'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
defineOptions({ name: 'UserExperienceRecordList' })
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
userId: null,
bizId: null,
bizType: null,
title: null,
description: null,
experience: null,
totalExperience: null,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ExperienceRecordApi.getExperienceRecordPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
const { userId } = defineProps({
userId: {
type: Number,
required: true
}
})
/** 初始化 **/
onMounted(() => {
queryParams.userId = userId
getList()
})
</script>
<template>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column key="id" align="center" label="商品编号" width="180" prop="id" />
<el-table-column label="商品图" min-width="80">
<template #default="{ row }">
<el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="商品名称" min-width="300" prop="name" />
<el-table-column align="center" label="商品售价" min-width="90" prop="price">
<template #default="{ row }"> {{ floatToFixed2(row.price) }}</template>
</el-table-column>
<el-table-column align="center" label="销量" min-width="90" prop="salesCount" />
<el-table-column
:formatter="dateFormatter"
align="center"
label="收藏时间"
prop="createTime"
width="180"
/>
<el-table-column align="center" label="状态" min-width="80">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PRODUCT_SPU_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as FavoriteApi from '@/api/mall/product/favorite'
import { floatToFixed2 } from '@/utils'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: null,
createTime: [],
userId: NaN
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await FavoriteApi.getFavoritePage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
const { userId } = defineProps({
userId: {
type: Number,
required: true
}
})
/** 初始化 **/
onMounted(() => {
queryParams.userId = userId
getList()
})
</script>
<template>
<!-- 搜索 -->
<ContentWrap>
<el-form
ref="queryFormRef"
:inline="true"
:model="queryParams"
class="-mb-15px"
label-width="68px"
>
<el-form-item label="订单状态" prop="status">
<el-select v-model="queryParams.status" class="!w-280px" clearable placeholder="全部">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_ORDER_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="支付方式" prop="payChannelCode">
<el-select
v-model="queryParams.payChannelCode"
class="!w-280px"
clearable
placeholder="全部"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.PAY_CHANNEL_CODE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-280px"
end-placeholder="自定义时间"
start-placeholder="自定义时间"
type="daterange"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item label="订单来源" prop="terminal">
<el-select v-model="queryParams.terminal" class="!w-280px" clearable placeholder="全部">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.TERMINAL)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="订单类型" prop="type">
<el-select v-model="queryParams.type" class="!w-280px" clearable placeholder="全部">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_ORDER_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="配送方式" prop="deliveryType">
<el-select v-model="queryParams.deliveryType" class="!w-280px" clearable placeholder="全部">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="queryParams.deliveryType === DeliveryTypeEnum.EXPRESS.type"
label="快递公司"
prop="logisticsId"
>
<el-select v-model="queryParams.logisticsId" class="!w-280px" clearable placeholder="全部">
<el-option
v-for="item in deliveryExpressList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="queryParams.deliveryType === DeliveryTypeEnum.PICK_UP.type"
label="自提门店"
prop="pickUpStoreId"
>
<el-select
v-model="queryParams.pickUpStoreId"
class="!w-280px"
clearable
multiple
placeholder="全部"
>
<el-option
v-for="item in pickUpStoreList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="queryParams.deliveryType === DeliveryTypeEnum.PICK_UP.type"
label="核销码"
prop="pickUpVerifyCode"
>
<el-input
v-model="queryParams.pickUpVerifyCode"
class="!w-280px"
clearable
placeholder="请输入自提核销码"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="聚合搜索">
<el-input
v-show="true"
v-model="queryParams[queryType.queryParam]"
class="!w-280px"
clearable
placeholder="请输入"
>
<template #prepend>
<el-select
v-model="queryType.queryParam"
class="!w-110px"
clearable
placeholder="全部"
@change="inputChangeSelect"
>
<el-option
v-for="dict in dynamicSearchList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<!-- 添加 row-key="id" 解决列数据中的 table#header 数据不刷新的问题 -->
<el-table v-loading="loading" :data="list" row-key="id">
<OrderTableColumn :list="list" :pick-up-store-list="pickUpStoreList">
<template #default="{ row }">
<el-button link type="primary" @click="openDetail(row.id)">
<Icon icon="ep:notification" />
详情
</el-button>
</template>
</OrderTableColumn>
</el-table>
<!-- 分页 -->
<Pagination
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</ContentWrap>
</template>
<script lang="ts" setup>
import * as OrderApi from '@/api/mall/trade/order/index'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
import { FormInstance } from 'element-plus'
import { OrderTableColumn } from '@/views/mall/trade/order/components'
import { DeliveryTypeEnum } from '@/utils/constants'
const { push } = useRouter() // 路由跳转
const { userId } = defineProps<{
userId: number
}>()
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const pickUpStoreList = ref<PickUpStoreApi.DeliveryPickUpStoreVO[]>([]) // 自提门店精简列表
const deliveryExpressList = ref<DeliveryExpressApi.DeliveryExpressVO[]>([]) // 物流公司
const queryFormRef = ref<FormInstance>() // 搜索的表单
// 表单搜索
const queryParams = ref({
pageNo: 1, // 页数
pageSize: 10, // 每页显示数量
userId: userId,
status: undefined, // 订单状态
payChannelCode: undefined, // 支付方式
createTime: undefined, // 创建时间
terminal: undefined, // 订单来源
type: undefined, // 订单类型
deliveryType: undefined, // 配送方式
logisticsId: undefined, // 快递公司
pickUpStoreId: undefined, // 自提门店
pickUpVerifyCode: undefined // 自提核销码
})
const queryType = reactive({ queryParam: '' }) // 订单搜索类型 queryParam
// 订单聚合搜索 select 类型配置(动态搜索)
const dynamicSearchList = ref([
{ value: 'no', label: '订单号' },
{ value: 'userNickname', label: '用户昵称' },
{ value: 'userMobile', label: '用户电话' }
])
/**
* 聚合搜索切换查询对象时触发
* @param val
*/
const inputChangeSelect = (val: string) => {
dynamicSearchList.value
.filter((item) => item.value !== val)
?.forEach((item1) => {
// 清除集合搜索无用属性
if (queryParams.value.hasOwnProperty(item1.value)) {
delete queryParams.value[item1.value]
}
})
}
/** 搜索按钮操作 */
const handleQuery = async () => {
queryParams.value.pageNo = 1
await getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields()
queryParams.value.userId = userId
handleQuery()
}
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await OrderApi.getOrderPage(queryParams.value)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 查看订单详情 */
const openDetail = (id: number) => {
push({ name: 'TradeOrderDetail', params: { id } })
}
/** 初始化 **/
onMounted(async () => {
await getList()
pickUpStoreList.value = await PickUpStoreApi.getSimpleDeliveryPickUpStoreList()
deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
})
</script>
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="业务类型" prop="bizType">
<el-select
v-model="queryParams.bizType"
placeholder="请选择业务类型"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.MEMBER_POINT_BIZ_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="积分标题" prop="title">
<el-input
v-model="queryParams.title"
placeholder="请输入积分标题"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="获得时间" prop="createDate">
<el-date-picker
v-model="queryParams.createDate"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" />
重置
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="id" width="180" />
<el-table-column
label="获得时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180"
/>
<el-table-column label="获得积分" align="center" prop="point" width="100">
<template #default="scope">
<el-tag v-if="scope.row.point > 0" class="ml-2" type="success" effect="dark">
+{{ scope.row.point }}
</el-tag>
<el-tag v-else class="ml-2" type="danger" effect="dark"> {{ scope.row.point }} </el-tag>
</template>
</el-table-column>
<el-table-column label="总积分" align="center" prop="totalPoint" width="100" />
<el-table-column label="标题" align="center" prop="title" />
<el-table-column label="描述" align="center" prop="description" />
<el-table-column label="业务编码" align="center" prop="bizId" />
<el-table-column label="业务类型" align="center" prop="bizType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.MEMBER_POINT_BIZ_TYPE" :value="scope.row.bizType" />
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as RecordApi from '@/api//member/point/record'
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
bizType: undefined,
title: null,
createDate: [],
userId: NaN
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await RecordApi.getRecordPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
const { userId } = defineProps({
userId: {
type: Number,
required: true
}
})
/** 初始化 **/
onMounted(() => {
queryParams.userId = userId
getList()
})
</script>
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="签到用户" prop="nickname">
<el-input
v-model="queryParams.nickname"
placeholder="请输入签到用户"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="签到天数" prop="day">
<el-input
v-model="queryParams.day"
placeholder="请输入签到天数"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="签到时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="id" />
<el-table-column
label="签到天数"
align="center"
prop="day"
:formatter="(_, __, cellValue) => ['第', cellValue, '天'].join(' ')"
/>
<el-table-column label="获得积分" align="center" prop="point" width="100">
<template #default="scope">
<el-tag v-if="scope.row.point > 0" class="ml-2" type="success" effect="dark">
+{{ scope.row.point }}
</el-tag>
<el-tag v-else class="ml-2" type="danger" effect="dark"> {{ scope.row.point }} </el-tag>
</template>
</el-table-column>
<el-table-column
label="签到时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
/>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</template>
<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import * as SignInRecordApi from '@/api/member/signin/record'
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
userId: NaN,
nickname: null,
day: null,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await SignInRecordApi.getSignInRecordPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
const { userId } = defineProps({
userId: {
type: Number,
required: true
}
})
/** 初始化 **/
onMounted(() => {
queryParams.userId = userId
getList()
})
</script>
<template>
<div v-loading="loading">
<el-row :gutter="10">
<!-- 左上角:基本信息 -->
<el-col :span="14" class="detail-info-item">
<UserBasicInfo :user="user">
<template #header>
<div class="card-header">
<CardTitle title="基本信息" />
<el-button size="small" text type="primary" @click="openForm('update')">
编辑
</el-button>
</div>
</template>
</UserBasicInfo>
</el-col>
<!-- 右上角:账户信息 -->
<el-col :span="10" class="detail-info-item">
<el-card class="h-full" shadow="never">
<template #header>
<CardTitle title="账户信息" />
</template>
<UserAccountInfo :user="user" :wallet="wallet" />
</el-card>
</el-col>
<!-- 下边:账户明细 -->
<!-- TODO 芋艿:【订单管理】【售后管理】【收藏记录】-->
<el-card header="账户明细" shadow="never" style="width: 100%; margin-top: 20px">
<template #header>
<CardTitle title="账户明细" />
</template>
<el-tabs>
<el-tab-pane label="积分">
<UserPointList :user-id="id" />
</el-tab-pane>
<el-tab-pane label="签到" lazy>
<UserSignList :user-id="id" />
</el-tab-pane>
<el-tab-pane label="成长值" lazy>
<UserExperienceRecordList :user-id="id" />
</el-tab-pane>
<el-tab-pane label="余额" lazy>
<UserBalanceList :wallet-id="wallet.id" />
</el-tab-pane>
<el-tab-pane label="收货地址" lazy>
<UserAddressList :user-id="id" />
</el-tab-pane>
<el-tab-pane label="订单管理" lazy>
<UserOrderList :user-id="id" />
</el-tab-pane>
<el-tab-pane label="售后管理" lazy>
<UserAfterSaleList :user-id="id" />
</el-tab-pane>
<el-tab-pane label="收藏记录" lazy>
<UserFavoriteList :user-id="id" />
</el-tab-pane>
<el-tab-pane label="优惠劵" lazy>
<UserCouponList :user-id="id" />
</el-tab-pane>
<el-tab-pane label="推广用户" lazy>
<UserBrokerageList :bind-user-id="id" />
</el-tab-pane>
</el-tabs>
</el-card>
</el-row>
</div>
<!-- 表单弹窗:添加/修改 -->
<UserForm ref="formRef" @success="getUserData(id)" />
</template>
<script lang="ts" setup>
import * as WalletApi from '@/api/pay/wallet/balance'
import * as UserApi from '@/api/member/user'
import { useTagsViewStore } from '@/store/modules/tagsView'
import UserForm from '@/views/member/user/UserForm.vue'
import UserAccountInfo from './UserAccountInfo.vue'
import UserAddressList from './UserAddressList.vue'
import UserBasicInfo from './UserBasicInfo.vue'
import UserBrokerageList from './UserBrokerageList.vue'
import UserCouponList from './UserCouponList.vue'
import UserExperienceRecordList from './UserExperienceRecordList.vue'
import UserOrderList from './UserOrderList.vue'
import UserPointList from './UserPointList.vue'
import UserSignList from './UserSignList.vue'
import UserFavoriteList from './UserFavoriteList.vue'
import UserAfterSaleList from './UserAftersaleList.vue'
import UserBalanceList from './UserBalanceList.vue'
import { CardTitle } from '@/components/Card/index'
import { ElMessage } from 'element-plus'
defineOptions({ name: 'MemberDetail' })
const loading = ref(true) // 加载中
const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string) => {
formRef.value.open(type, id)
}
/** 获得用户 */
const getUserData = async (id: number) => {
loading.value = true
try {
user.value = await UserApi.getUser(id)
} finally {
loading.value = false
}
}
/** 初始化 */
const { currentRoute } = useRouter() // 路由
const { delView } = useTagsViewStore() // 视图操作
const route = useRoute()
const id = route.params.id
/* 用户钱包相关信息 */
const WALLET_INIT_DATA = {
balance: 0,
totalExpense: 0,
totalRecharge: 0
} as WalletApi.WalletVO // 钱包初始化数据
const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息
/** 查询用户钱包信息 */
const getUserWallet = async () => {
if (!id) {
wallet.value = WALLET_INIT_DATA
return
}
const params = { userId: id }
wallet.value = (await WalletApi.getWallet(params)) || WALLET_INIT_DATA
}
onMounted(() => {
if (!id) {
ElMessage.warning('参数错误,会员编号不能为空!')
delView(unref(currentRoute))
return
}
getUserData(id)
getUserWallet()
})
</script>
<style lang="css" scoped>
.detail-info-item:first-child {
padding-left: 0 !important;
}
/* first-child 不生效有没有大佬给看下q.q */
.detail-info-item:nth-child(2) {
padding-right: 0 !important;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
<template>
<doc-alert title="会员用户、标签、分组" url="https://doc.iocoder.cn/member/user/" />
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
ref="queryFormRef"
:inline="true"
:model="queryParams"
class="-mb-15px"
label-width="68px"
>
<el-form-item label="用户昵称" prop="nickname">
<el-input
v-model="queryParams.nickname"
class="!w-240px"
clearable
placeholder="请输入用户昵称"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input
v-model="queryParams.mobile"
class="!w-240px"
clearable
placeholder="请输入手机号"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="注册时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
end-placeholder="结束日期"
start-placeholder="开始日期"
type="daterange"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item label="登录时间" prop="loginDate">
<el-date-picker
v-model="queryParams.loginDate"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
end-placeholder="结束日期"
start-placeholder="开始日期"
type="daterange"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item label="用户标签" prop="tagIds">
<MemberTagSelect v-model="queryParams.tagIds" />
</el-form-item>
<el-form-item label="用户等级" prop="levelId">
<MemberLevelSelect v-model="queryParams.levelId" />
</el-form-item>
<el-form-item label="用户分组" prop="groupId">
<MemberGroupSelect v-model="queryParams.groupId" />
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
<el-button v-hasPermi="['promotion:coupon:send']" @click="openCoupon">发送优惠券</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table
v-loading="loading"
:data="list"
:show-overflow-tooltip="true"
:stripe="true"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column align="center" label="用户编号" prop="id" width="120px" />
<el-table-column align="center" label="头像" prop="avatar" width="80px">
<template #default="scope">
<img :src="scope.row.avatar" style="width: 40px" />
</template>
</el-table-column>
<el-table-column align="center" label="手机号" prop="mobile" width="120px" />
<el-table-column align="center" label="昵称" prop="nickname" width="80px" />
<el-table-column align="center" label="等级" prop="levelName" width="100px" />
<el-table-column align="center" label="分组" prop="groupName" width="100px" />
<el-table-column
:show-overflow-tooltip="false"
align="center"
label="用户标签"
prop="tagNames"
>
<template #default="scope">
<el-tag v-for="(tagName, index) in scope.row.tagNames" :key="index" class="mr-5px">
{{ tagName }}
</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="积分" prop="point" width="100px" />
<el-table-column align="center" label="状态" prop="status" width="100px">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column
:formatter="dateFormatter"
align="center"
label="登录时间"
prop="loginDate"
width="180px"
/>
<el-table-column
:formatter="dateFormatter"
align="center"
label="注册时间"
prop="createTime"
width="180px"
/>
<el-table-column
:show-overflow-tooltip="false"
align="center"
fixed="right"
label="操作"
width="100px"
>
<template #default="scope">
<div class="flex items-center justify-center">
<el-button link type="primary" @click="openDetail(scope.row.id)">详情</el-button>
<el-dropdown
v-hasPermi="[
'member:user:update',
'member:user:update-level',
'member:user:update-point',
'pay:wallet:update-balance'
]"
@command="(command) => handleCommand(command, scope.row)"
>
<el-button link type="primary">
<Icon icon="ep:d-arrow-right" />
更多
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-if="checkPermi(['member:user:update'])"
command="handleUpdate"
>
编辑
</el-dropdown-item>
<el-dropdown-item
v-if="checkPermi(['member:user:update-level'])"
command="handleUpdateLevel"
>
修改等级
</el-dropdown-item>
<el-dropdown-item
v-if="checkPermi(['member:user:update-point'])"
command="handleUpdatePoint"
>
修改积分
</el-dropdown-item>
<el-dropdown-item
v-if="checkPermi(['pay:wallet:update-balance'])"
command="handleUpdateBlance"
>
修改余额
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗:添加/修改 -->
<UserForm ref="formRef" @success="getList" />
<!-- 修改用户等级弹窗 -->
<UserLevelUpdateForm ref="updateLevelFormRef" @success="getList" />
<!-- 修改用户积分弹窗 -->
<UserPointUpdateForm ref="updatePointFormRef" @success="getList" />
<!-- 修改用户余额弹窗 -->
<UserBalanceUpdateForm ref="UpdateBalanceFormRef" @success="getList" />
<!-- 发送优惠券弹窗 -->
<CouponSendForm ref="couponSendFormRef" />
</template>
<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import * as UserApi from '@/api/member/user'
import { DICT_TYPE } from '@/utils/dict'
import UserForm from './UserForm.vue'
import MemberTagSelect from '@/views/member/tag/components/MemberTagSelect.vue'
import MemberLevelSelect from '@/views/member/level/components/MemberLevelSelect.vue'
import MemberGroupSelect from '@/views/member/group/components/MemberGroupSelect.vue'
import UserLevelUpdateForm from './components/UserLevelUpdateForm.vue'
import UserPointUpdateForm from './components/UserPointUpdateForm.vue'
import UserBalanceUpdateForm from './components/UserBalanceUpdateForm.vue'
import { CouponSendForm } from '@/views/mall/promotion/coupon/components'
import { checkPermi } from '@/utils/permission'
defineOptions({ name: 'MemberUser' })
const message = useMessage() // 消息弹窗
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
nickname: null,
mobile: null,
loginDate: [],
createTime: [],
tagIds: [],
levelId: null,
groupId: null
})
const queryFormRef = ref() // 搜索的表单
const updateLevelFormRef = ref() // 修改会员等级表单
const updatePointFormRef = ref() // 修改会员积分表单
const UpdateBalanceFormRef = ref() // 修改用户余额表单
const selectedIds = ref<number[]>([]) // 表格的选中 ID 数组
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await UserApi.getUserPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 打开会员详情 */
const { push } = useRouter()
const openDetail = (id: number) => {
push({ name: 'MemberUserDetail', params: { id } })
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 表格选中事件 */
const handleSelectionChange = (rows: UserApi.UserVO[]) => {
selectedIds.value = rows.map((row) => row.id)
}
/** 发送优惠券 */
const couponSendFormRef = ref()
const openCoupon = () => {
if (selectedIds.value.length === 0) {
message.warning('请选择要发送优惠券的用户')
return
}
couponSendFormRef.value.open(selectedIds.value)
}
/** 操作分发 */
const handleCommand = (command: string, row: UserApi.UserVO) => {
switch (command) {
case 'handleUpdate':
openForm('update', row.id)
break
case 'handleUpdateLevel':
updateLevelFormRef.value.open(row.id)
break
case 'handleUpdatePoint':
updatePointFormRef.value.open(row.id)
break
case 'handleUpdateBlance':
UpdateBalanceFormRef.value.open(row.id)
break
default:
break
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment