feat：【ele】【member 会员】会员详情独立 detail 目录
This commit is contained in:
YunaiV
@@ -0,0 +1,87 @@
|
||||
<script setup lang="ts">
|
||||
import type { MemberUserApi } from '#/api/member/user';
|
||||
import type { PayWalletApi } from '#/api/pay/wallet/balance';
|
||||
|
||||
import { fenToYuan } from '@vben/utils';
|
||||
|
||||
import { ElCard } from 'element-plus';
|
||||
|
||||
import { useDescription } from '#/components/description';
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
mode?: 'kefu' | 'member';
|
||||
user: MemberUserApi.User;
|
||||
wallet: PayWalletApi.Wallet;
|
||||
}>(),
|
||||
{
|
||||
mode: 'member',
|
||||
},
|
||||
);
|
||||
|
||||
const [Description] = useDescription({
|
||||
componentProps: {
|
||||
border: false,
|
||||
column: 2,
|
||||
direction: 'horizontal',
|
||||
labelWidth: 100,
|
||||
title: '',
|
||||
extra: '',
|
||||
},
|
||||
schema: [
|
||||
{
|
||||
field: 'levelName',
|
||||
label: '等级',
|
||||
content: (data) => data.levelName || '无',
|
||||
},
|
||||
{
|
||||
field: 'experience',
|
||||
label: '成长值',
|
||||
content: (data) => data.experience || 0,
|
||||
},
|
||||
{
|
||||
field: 'point',
|
||||
label: '当前积分',
|
||||
content: (data) => data.point || 0,
|
||||
},
|
||||
{
|
||||
field: 'totalPoint',
|
||||
label: '总积分',
|
||||
content: (data) => data.totalPoint || 0,
|
||||
},
|
||||
{
|
||||
field: 'balance',
|
||||
label: '当前余额',
|
||||
content: (data) => fenToYuan(data.balance || 0),
|
||||
},
|
||||
{
|
||||
field: 'totalExpense',
|
||||
label: '支出金额',
|
||||
content: (data) => fenToYuan(data.totalExpense || 0),
|
||||
},
|
||||
{
|
||||
field: 'totalRecharge',
|
||||
label: '充值金额',
|
||||
content: (data) => fenToYuan(data.totalRecharge || 0),
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElCard>
|
||||
<template #title>
|
||||
<slot name="title"></slot>
|
||||
</template>
|
||||
<template #extra>
|
||||
<slot name="extra"></slot>
|
||||
</template>
|
||||
<Description
|
||||
:column="mode === 'member' ? 2 : 1"
|
||||
:data="{
|
||||
...user,
|
||||
...wallet,
|
||||
}"
|
||||
/>
|
||||
</ElCard>
|
||||
</template>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MemberAddressApi } from '#/api/member/address';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { ElTag } from 'element-plus';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getAddressList } from '#/api/member/address';
|
||||
|
||||
const props = defineProps<{
|
||||
userId: number;
|
||||
}>();
|
||||
|
||||
const [Grid] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: [
|
||||
{
|
||||
field: 'id',
|
||||
title: '地址编号',
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '收件人名称',
|
||||
},
|
||||
{
|
||||
field: 'mobile',
|
||||
title: '手机号',
|
||||
},
|
||||
{
|
||||
field: 'areaId',
|
||||
title: '地区编码',
|
||||
},
|
||||
{
|
||||
field: 'detailAddress',
|
||||
title: '收件详细地址',
|
||||
},
|
||||
{
|
||||
field: 'defaultStatus',
|
||||
title: '是否默认',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return h(
|
||||
ElTag,
|
||||
{
|
||||
class: 'mr-1',
|
||||
color: row.defaultStatus ? 'blue' : 'red',
|
||||
},
|
||||
() => (row.defaultStatus ? '是' : '否'),
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '创建时间',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
],
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async () => {
|
||||
return await getAddressList({
|
||||
userId: props.userId,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<MemberAddressApi.Address>,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid />
|
||||
</template>
|
||||
@@ -0,0 +1,150 @@
|
||||
<script setup lang="ts">
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale/index';
|
||||
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
import { ElTabPane, ElTabs } from 'element-plus';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getAfterSalePage } from '#/api/mall/trade/afterSale';
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { getDictOptions } from '@vben/hooks';
|
||||
|
||||
import { getRangePickerDefaultProps } from '#/utils';
|
||||
import { useGridColumns } from '#/views/mall/trade/order/data';
|
||||
|
||||
const props = defineProps<{
|
||||
userId: number;
|
||||
}>();
|
||||
|
||||
// 添加当前选中的售后状态
|
||||
const activeStatus = ref<number | string>('all');
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: [
|
||||
{
|
||||
fieldName: 'spuName',
|
||||
label: '商品名称',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
fieldName: 'no',
|
||||
label: '退款编号',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
fieldName: 'orderNo',
|
||||
label: '订单编号',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: '售后状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS, 'number'),
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'type',
|
||||
label: '售后方式',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_WAY, 'number'),
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'type',
|
||||
label: '售后类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_TYPE, 'number'),
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
clearable: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
// 监听表单值变化
|
||||
handleValuesChange: (values, changedFields) => {
|
||||
// 如果状态字段发生变化
|
||||
if (changedFields.includes('status')) {
|
||||
// 同步更新标签页选中状态
|
||||
activeStatus.value = values.status ? String(values.status) : 'all';
|
||||
}
|
||||
},
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
pageSize: 10,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getAfterSalePage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
userId: props.userId,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
slots: {
|
||||
buttons: 'customTop',
|
||||
},
|
||||
},
|
||||
} as VxeTableGridOptions<MallAfterSaleApi.AfterSale>,
|
||||
separator: false,
|
||||
});
|
||||
|
||||
// 监听标签页变化，更新表单状态值并触发查询
|
||||
watch(activeStatus, (val) => {
|
||||
// 使用formApi获取表单对象
|
||||
if (gridApi.formApi) {
|
||||
// 设置状态值
|
||||
gridApi.formApi.setFieldValue(
|
||||
'status',
|
||||
val === 'all' ? undefined : Number(val),
|
||||
);
|
||||
|
||||
// 触发查询
|
||||
gridApi.query({ status: val === 'all' ? undefined : Number(val) });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid>
|
||||
<template #customTop>
|
||||
<ElTabs v-model="activeStatus">
|
||||
<ElTabPane label="全部" name="all" />
|
||||
<ElTabPane
|
||||
v-for="item in getDictOptions(
|
||||
DICT_TYPE.TRADE_AFTER_SALE_STATUS,
|
||||
'number',
|
||||
)"
|
||||
:key="String(item.value)"
|
||||
:label="item.label"
|
||||
:name="String(item.value)"
|
||||
/>
|
||||
</ElTabs>
|
||||
</template>
|
||||
</Grid>
|
||||
</template>
|
||||
@@ -0,0 +1,68 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { WalletTransactionApi } from '#/api/pay/wallet/transaction';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getTransactionPage } from '#/api/pay/wallet/transaction';
|
||||
|
||||
const props = defineProps<{
|
||||
walletId: number | undefined;
|
||||
}>();
|
||||
|
||||
const [Grid] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: [
|
||||
{
|
||||
field: 'id',
|
||||
title: '编号',
|
||||
},
|
||||
{
|
||||
field: 'title',
|
||||
title: '关联业务标题',
|
||||
},
|
||||
{
|
||||
field: 'price',
|
||||
title: '交易金额',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
field: 'balance',
|
||||
title: '钱包余额',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '交易时间',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
],
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
pageSize: 10,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getTransactionPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
walletId: props.walletId,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<WalletTransactionApi.Transaction>,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid />
|
||||
</template>
|
||||
@@ -0,0 +1,100 @@
|
||||
<script setup lang="ts">
|
||||
import type { MemberUserApi } from '#/api/member/user';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { formatDate } from '@vben/utils';
|
||||
|
||||
import { ElAvatar, ElCard, ElCol, ElRow } from 'element-plus';
|
||||
|
||||
import { useDescription } from '#/components/description';
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
|
||||
withDefaults(
|
||||
defineProps<{ mode?: 'kefu' | 'member'; user: MemberUserApi.User }>(),
|
||||
{
|
||||
mode: 'member',
|
||||
},
|
||||
);
|
||||
|
||||
const [Description] = useDescription({
|
||||
componentProps: {
|
||||
border: false,
|
||||
column: 2,
|
||||
direction: 'horizontal',
|
||||
labelWidth: 100,
|
||||
title: '',
|
||||
extra: '',
|
||||
},
|
||||
schema: [
|
||||
{
|
||||
field: 'name',
|
||||
label: '用户名',
|
||||
},
|
||||
{
|
||||
field: 'nickname',
|
||||
label: '昵称',
|
||||
},
|
||||
{
|
||||
field: 'mobile',
|
||||
label: '手机号',
|
||||
},
|
||||
{
|
||||
field: 'sex',
|
||||
label: '性别',
|
||||
content: (data) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.SYSTEM_USER_SEX,
|
||||
value: data.sex,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'areaName',
|
||||
label: '所在地',
|
||||
},
|
||||
{
|
||||
field: 'registerIp',
|
||||
label: '注册 IP',
|
||||
},
|
||||
{
|
||||
field: 'birthday',
|
||||
label: '生日',
|
||||
content: (data) => formatDate(data.birthday)?.toString() || '空',
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
label: '注册时间',
|
||||
content: (data) => formatDate(data.createTime)?.toString() || '空',
|
||||
},
|
||||
{
|
||||
field: 'loginDate',
|
||||
label: '最后登录时间',
|
||||
content: (data) => formatDate(data.loginDate)?.toString() || '空',
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElCard>
|
||||
<template #title>
|
||||
<slot name="title"></slot>
|
||||
</template>
|
||||
<template #extra>
|
||||
<slot name="extra"></slot>
|
||||
</template>
|
||||
<ElRow v-if="mode === 'member'" :gutter="24">
|
||||
<ElCol :span="4">
|
||||
<ElAvatar :size="140" shape="square" :src="user.avatar" />
|
||||
</ElCol>
|
||||
<ElCol :span="20">
|
||||
<Description :column="2" :data="user" />
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
<template v-else-if="mode === 'kefu'">
|
||||
<ElAvatar :size="140" shape="square" :src="user.avatar" />
|
||||
<Description :column="1" :data="user" />
|
||||
</template>
|
||||
</ElCard>
|
||||
</template>
|
||||
@@ -0,0 +1,139 @@
|
||||
<script setup lang="ts">
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
|
||||
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import * as BrokerageUserApi from '#/api/mall/trade/brokerage/user';
|
||||
import { getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
const props = defineProps<{
|
||||
userId: number;
|
||||
}>();
|
||||
|
||||
// 添加当前选中的状态
|
||||
const activeStatus = ref<number | string>('all');
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: [
|
||||
{
|
||||
fieldName: 'level',
|
||||
label: '用户类型',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '全部',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '一级',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '二级',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
isButton: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'bindUserTime',
|
||||
label: '绑定时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
clearable: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
gridOptions: {
|
||||
columns: [
|
||||
{
|
||||
field: 'id',
|
||||
title: '用户编号',
|
||||
},
|
||||
{
|
||||
field: 'avatar',
|
||||
title: '头像',
|
||||
cellRender: {
|
||||
name: 'CellImage',
|
||||
props: {
|
||||
height: 40,
|
||||
width: 40,
|
||||
shape: 'circle',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'nickname',
|
||||
title: '昵称',
|
||||
},
|
||||
{
|
||||
field: 'level',
|
||||
title: '等级',
|
||||
formatter: (row: any) => {
|
||||
return row.level === 1 ? '一级' : '二级';
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'bindUserTime',
|
||||
title: '绑定时间',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
],
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
pageSize: 10,
|
||||
},
|
||||
expandConfig: {
|
||||
trigger: 'row',
|
||||
expandAll: true,
|
||||
padding: true,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await BrokerageUserApi.getBrokerageUserPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
userId: props.userId,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<MallBrokerageUserApi.BrokerageUser>,
|
||||
separator: false,
|
||||
});
|
||||
|
||||
// 监听标签页变化，更新表单状态值并触发查询
|
||||
watch(activeStatus, (val) => {
|
||||
// 使用formApi获取表单对象
|
||||
if (gridApi.formApi) {
|
||||
// 设置状态值
|
||||
gridApi.formApi.setFieldValue(
|
||||
'status',
|
||||
val === 'all' ? undefined : Number(val),
|
||||
);
|
||||
|
||||
// 触发查询
|
||||
gridApi.query({ status: val === 'all' ? undefined : Number(val) });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid />
|
||||
</template>
|
||||
@@ -0,0 +1,183 @@
|
||||
<script setup lang="ts">
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MallCouponApi } from '#/api/mall/promotion/coupon/coupon';
|
||||
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
import { ElLoading, ElMessage, ElTabPane, ElTabs } from 'element-plus';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import {
|
||||
deleteCoupon,
|
||||
getCouponPage,
|
||||
} from '#/api/mall/promotion/coupon/coupon';
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { getDictOptions } from '@vben/hooks';
|
||||
|
||||
import { getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
const props = defineProps<{
|
||||
userId: number;
|
||||
}>();
|
||||
|
||||
// 添加当前选中的状态
|
||||
const activeStatus = ref<number | string>('all');
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row: MallCouponApi.Coupon) => {
|
||||
const hideLoading = ElLoading.service({
|
||||
text: '回收将会收回会员领取的待使用的优惠券，已使用的将无法回收，确定要回收所选优惠券吗？',
|
||||
});
|
||||
try {
|
||||
await deleteCoupon(row.id as number);
|
||||
ElMessage.success('回收成功');
|
||||
// 重新加载列表
|
||||
gridApi.query();
|
||||
} finally {
|
||||
hideLoading.close();
|
||||
}
|
||||
};
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: [
|
||||
{
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
clearable: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
gridOptions: {
|
||||
columns: [
|
||||
{
|
||||
field: 'name',
|
||||
title: '优惠劵',
|
||||
},
|
||||
{
|
||||
field: 'discountType',
|
||||
title: 'discountType',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.PROMOTION_DISCOUNT_TYPE },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'takeType',
|
||||
title: '领取方式',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '状态',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.PROMOTION_COUPON_STATUS },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '领取时间',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'useTime',
|
||||
title: '使用时间',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
],
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
pageSize: 10,
|
||||
},
|
||||
expandConfig: {
|
||||
trigger: 'row',
|
||||
expandAll: true,
|
||||
padding: true,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getCouponPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
userId: props.userId,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
slots: {
|
||||
buttons: 'customTop',
|
||||
},
|
||||
},
|
||||
} as VxeTableGridOptions<MallCouponApi.Coupon>,
|
||||
separator: false,
|
||||
});
|
||||
|
||||
// 监听标签页变化，更新表单状态值并触发查询
|
||||
watch(activeStatus, (val) => {
|
||||
// 使用formApi获取表单对象
|
||||
if (gridApi.formApi) {
|
||||
// 设置状态值
|
||||
gridApi.formApi.setFieldValue(
|
||||
'status',
|
||||
val === 'all' ? undefined : Number(val),
|
||||
);
|
||||
|
||||
// 触发查询
|
||||
gridApi.query({ status: val === 'all' ? undefined : Number(val) });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid>
|
||||
<template #customTop>
|
||||
<ElTabs v-model="activeStatus">
|
||||
<ElTabPane label="全部" name="all" />
|
||||
<ElTabPane
|
||||
v-for="item in getDictOptions(
|
||||
DICT_TYPE.PROMOTION_COUPON_STATUS,
|
||||
'number',
|
||||
)"
|
||||
:key="String(item.value)"
|
||||
:label="item.label"
|
||||
:name="String(item.value)"
|
||||
/>
|
||||
</ElTabs>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '回收',
|
||||
link: true,
|
||||
icon: ACTION_ICON.EDIT,
|
||||
auth: ['promotion:coupon:delete'],
|
||||
onClick: handleDelete.bind(null, row),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</template>
|
||||
@@ -0,0 +1,134 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MemberExperienceRecordApi } from '#/api/member/experience-record';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { ElTag } from 'element-plus';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getExperienceRecordPage } from '#/api/member/experience-record';
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { getDictOptions } from '@vben/hooks';
|
||||
|
||||
import { getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
const props = defineProps<{
|
||||
userId: number;
|
||||
}>();
|
||||
|
||||
const [Grid] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: [
|
||||
{
|
||||
fieldName: 'bizType',
|
||||
label: '业务类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: getDictOptions(
|
||||
DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE,
|
||||
'number',
|
||||
),
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'title',
|
||||
label: '标题',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
fieldName: 'createDate',
|
||||
label: '获得时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
clearable: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
gridOptions: {
|
||||
columns: [
|
||||
{
|
||||
field: 'id',
|
||||
title: '编号',
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '获得时间',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'experience',
|
||||
title: '经验',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return h(
|
||||
ElTag,
|
||||
{
|
||||
class: 'mr-1',
|
||||
color: row.experience > 0 ? 'blue' : 'red',
|
||||
},
|
||||
() =>
|
||||
row.experience > 0 ? `+${row.experience}` : row.experience,
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'totalExperience',
|
||||
title: '总经验',
|
||||
},
|
||||
{
|
||||
field: 'title',
|
||||
title: '标题',
|
||||
},
|
||||
{
|
||||
field: 'description',
|
||||
title: '描述',
|
||||
},
|
||||
{
|
||||
field: 'bizId',
|
||||
title: '业务编号',
|
||||
},
|
||||
{
|
||||
field: 'bizType',
|
||||
title: '业务类型',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE },
|
||||
},
|
||||
},
|
||||
],
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
pageSize: 10,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getExperienceRecordPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
userId: props.userId,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<MemberExperienceRecordApi.ExperienceRecord>,
|
||||
separator: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid />
|
||||
</template>
|
||||
@@ -0,0 +1,93 @@
|
||||
<script setup lang="ts">
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MallFavoriteApi } from '#/api/mall/product/favorite';
|
||||
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import * as FavoriteApi from '#/api/mall/product/favorite';
|
||||
|
||||
const props = defineProps<{
|
||||
userId: number;
|
||||
}>();
|
||||
|
||||
const [Grid] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: [
|
||||
{
|
||||
field: 'id',
|
||||
title: '商品编号',
|
||||
},
|
||||
{
|
||||
field: 'picUrl',
|
||||
title: '商品图',
|
||||
cellRender: {
|
||||
name: 'CellImage',
|
||||
props: {
|
||||
height: 40,
|
||||
width: 40,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '商品名称',
|
||||
},
|
||||
{
|
||||
field: 'price',
|
||||
title: '商品售价',
|
||||
},
|
||||
{
|
||||
field: 'salesCount',
|
||||
title: '销量',
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '收藏时间',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '状态',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.PRODUCT_SPU_STATUS },
|
||||
},
|
||||
},
|
||||
],
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
pageSize: 10,
|
||||
},
|
||||
expandConfig: {
|
||||
trigger: 'row',
|
||||
expandAll: true,
|
||||
padding: true,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await FavoriteApi.getFavoritePage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
userId: props.userId,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<MallFavoriteApi.Favorite>,
|
||||
separator: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid />
|
||||
</template>
|
||||
@@ -0,0 +1,266 @@
|
||||
<script setup lang="ts">
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
|
||||
import type { MallOrderApi } from '#/api/mall/trade/order/index';
|
||||
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { DeliveryTypeEnum } from '@vben/constants';
|
||||
import { $t } from '@vben/locales';
|
||||
import { fenToYuan } from '@vben/utils';
|
||||
|
||||
import { ElImage, ElTag } from 'element-plus';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
|
||||
import { getSimpleDeliveryPickUpStoreList } from '#/api/mall/trade/delivery/pickUpStore';
|
||||
import * as OrderApi from '#/api/mall/trade/order/index';
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { getDictOptions } from '@vben/hooks';
|
||||
|
||||
import { getRangePickerDefaultProps } from '#/utils';
|
||||
import { useGridColumns } from '#/views/mall/trade/order/data';
|
||||
|
||||
const props = defineProps<{
|
||||
userId: number;
|
||||
}>();
|
||||
|
||||
const pickUpStoreList = ref<MallDeliveryPickUpStoreApi.PickUpStore[]>([]);
|
||||
|
||||
getSimpleDeliveryPickUpStoreList().then((res) => {
|
||||
pickUpStoreList.value = res;
|
||||
});
|
||||
const { push } = useRouter();
|
||||
/** 详情 */
|
||||
function handleDetail(row: MallOrderApi.Order) {
|
||||
push({ name: 'TradeOrderDetail', params: { id: row.id } });
|
||||
}
|
||||
|
||||
const [Grid] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: [
|
||||
{
|
||||
fieldName: 'bizType',
|
||||
label: '订单状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: getDictOptions(DICT_TYPE.TRADE_ORDER_STATUS, 'number'),
|
||||
placeholder: '全部',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'payChannelCode',
|
||||
label: '支付方式',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'number'),
|
||||
placeholder: '全部',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
clearable: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'terminal',
|
||||
label: '订单来源',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: getDictOptions(DICT_TYPE.TERMINAL, 'number'),
|
||||
placeholder: '全部',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'type',
|
||||
label: '订单类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: getDictOptions(DICT_TYPE.TRADE_ORDER_TYPE, 'number'),
|
||||
placeholder: '全部',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'deliveryType',
|
||||
label: '配送方式',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: getDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE, 'number'),
|
||||
placeholder: '全部',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'logisticsId',
|
||||
label: '快递公司',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
api: getSimpleDeliveryExpressList,
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
placeholder: '全部',
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['deliveryType'],
|
||||
show: (values) =>
|
||||
values.deliveryType === DeliveryTypeEnum.EXPRESS.type,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'pickUpStoreId',
|
||||
label: '自提门店',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
api: getSimpleDeliveryPickUpStoreList,
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['deliveryType'],
|
||||
show: (values) =>
|
||||
values.deliveryType === DeliveryTypeEnum.PICK_UP.type,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'pickUpVerifyCode',
|
||||
label: '核销码',
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
triggerFields: ['deliveryType'],
|
||||
show: (values) =>
|
||||
values.deliveryType === DeliveryTypeEnum.PICK_UP.type,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
pageSize: 10,
|
||||
},
|
||||
expandConfig: {
|
||||
trigger: 'row',
|
||||
expandAll: true,
|
||||
padding: true,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await OrderApi.getOrderPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
userId: props.userId,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<MallOrderApi.Order>,
|
||||
separator: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid table-title="订单列表">
|
||||
<template #expand_content="{ row }">
|
||||
<div class="order-items">
|
||||
<div v-for="(item, index) in row.items" :key="index" class="order-item">
|
||||
<div class="order-item-image">
|
||||
<ElImage :src="item.picUrl" :width="40" :height="40" />
|
||||
</div>
|
||||
<div class="order-item-content">
|
||||
<div class="order-item-name">
|
||||
{{ item.spuName }}
|
||||
<ElTag
|
||||
v-for="property in item.properties"
|
||||
:key="property.id"
|
||||
class="ml-1"
|
||||
>
|
||||
{{ property.propertyName }}: {{ property.valueName }}
|
||||
</ElTag>
|
||||
</div>
|
||||
<div class="order-item-info">
|
||||
<span>
|
||||
原价：{{ fenToYuan(item.price) }} 元 / 数量：{{ item.count }} 个
|
||||
</span>
|
||||
<DictTag
|
||||
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
|
||||
:value="item.afterSaleStatus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.detail'),
|
||||
link: true,
|
||||
icon: ACTION_ICON.VIEW,
|
||||
auth: ['trade:order:query'],
|
||||
onClick: handleDetail.bind(null, row),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.order-items {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.order-item-image {
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.order-item-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.order-item-name {
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.order-item-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MemberPointRecordApi } from '#/api/member/point/record';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getRecordPage } from '#/api/member/point/record';
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { getDictOptions } from '@vben/hooks';
|
||||
|
||||
import { getRangePickerDefaultProps } from '#/utils';
|
||||
import { useGridColumns } from '#/views/member/point/record/data';
|
||||
|
||||
const props = defineProps<{
|
||||
userId: number;
|
||||
}>();
|
||||
|
||||
const [Grid] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: [
|
||||
{
|
||||
fieldName: 'bizType',
|
||||
label: '业务类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: getDictOptions(DICT_TYPE.MEMBER_POINT_BIZ_TYPE, 'number'),
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'title',
|
||||
label: '积分标题',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
fieldName: 'createDate',
|
||||
label: '获得时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
clearable: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
pageSize: 10,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getRecordPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
userId: props.userId,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<MemberPointRecordApi.Record>,
|
||||
separator: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid />
|
||||
</template>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MemberSignInRecordApi } from '#/api/member/signin/record';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getSignInRecordPage } from '#/api/member/signin/record';
|
||||
import { getRangePickerDefaultProps } from '#/utils';
|
||||
import { useGridColumns } from '#/views/member/signin/record/data';
|
||||
|
||||
const props = defineProps<{
|
||||
userId: number;
|
||||
}>();
|
||||
|
||||
const [Grid] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: [
|
||||
{
|
||||
fieldName: 'day',
|
||||
label: '签到天数',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
fieldName: 'createTime',
|
||||
label: '签到时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
clearable: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
pageSize: 10,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getSignInRecordPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
userId: props.userId,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
|
||||
separator: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid />
|
||||
</template>
|
||||
Reference in New Issue
Block a user