feat: 新增商城模块，新增会员中心的会员详情的订单管理，售后管理，收藏记录，优惠券，推广用户的展示
This commit is contained in:
吃货
@@ -0,0 +1,147 @@
|
||||
<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, getDictOptions, 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(),
|
||||
allowClear: 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: { code: 'query' },
|
||||
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,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(),
|
||||
allowClear: 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: { code: 'query' },
|
||||
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,181 @@
|
||||
<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, getDictOptions, 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: '回收将会收回会员领取的待使用的优惠券，已使用的将无法回收，确定要回收所选优惠券吗？',
|
||||
fullscreen: true,
|
||||
});
|
||||
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(),
|
||||
allowClear: 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: { code: 'query' },
|
||||
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,92 @@
|
||||
<script setup lang="ts">
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MallFavoriteApi } from '#/api/mall/product/favorite';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import * as FavoriteApi from '#/api/mall/product/favorite';
|
||||
import { DICT_TYPE } from '#/utils';
|
||||
|
||||
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: { code: 'query' },
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<MallFavoriteApi.Favorite>,
|
||||
separator: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid />
|
||||
</template>
|
||||
@@ -0,0 +1,270 @@
|
||||
<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 { $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 {
|
||||
DeliveryTypeEnum,
|
||||
DICT_TYPE,
|
||||
getDictOptions,
|
||||
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: {
|
||||
allowClear: true,
|
||||
options: getDictOptions(DICT_TYPE.TRADE_ORDER_STATUS, 'number'),
|
||||
placeholder: '全部',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'payChannelCode',
|
||||
label: '支付方式',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'number'),
|
||||
placeholder: '全部',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'terminal',
|
||||
label: '订单来源',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: getDictOptions(DICT_TYPE.TERMINAL, 'number'),
|
||||
placeholder: '全部',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'type',
|
||||
label: '订单类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: getDictOptions(DICT_TYPE.TRADE_ORDER_TYPE, 'number'),
|
||||
placeholder: '全部',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'deliveryType',
|
||||
label: '配送方式',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: getDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE, 'number'),
|
||||
placeholder: '全部',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'logisticsId',
|
||||
label: '快递公司',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
allowClear: 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: { code: 'query' },
|
||||
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 in row.items" :key="item.id" 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>
|
||||
@@ -16,9 +16,14 @@ import { $t } from '#/locales';
|
||||
|
||||
import UserAccountInfo from '../components/user-account-info.vue';
|
||||
import UserAddressList from '../components/user-address-list.vue';
|
||||
import UserAfterSaleList from '../components/user-after-sale-list.vue';
|
||||
import UserBalanceList from '../components/user-balance-list.vue';
|
||||
import UserBasicInfo from '../components/user-basic-info.vue';
|
||||
import UserBrokerageList from '../components/user-brokerage-list.vue';
|
||||
import UserCouponList from '../components/user-coupon-list.vue';
|
||||
import UserExperienceRecordList from '../components/user-experience-record-list.vue';
|
||||
import UserFavoriteList from '../components/user-favorite-list.vue';
|
||||
import UserOrderList from '../components/user-order-list.vue';
|
||||
import UserPointList from '../components/user-point-list.vue';
|
||||
import UserSignList from '../components/user-sign-list.vue';
|
||||
import Form from './form.vue';
|
||||
@@ -102,31 +107,31 @@ onMounted(async () => {
|
||||
<ElTabPane label="订单管理" name="UserOrderList">
|
||||
<!-- Todo: 商城模块 -->
|
||||
<div class="h-full">
|
||||
<h1>订单管理</h1>
|
||||
<UserOrderList class="h-full" :user-id="userId" />
|
||||
</div>
|
||||
</ElTabPane>
|
||||
<ElTabPane label="售后管理" name="UserAfterSaleList">
|
||||
<!-- Todo: 商城模块 -->
|
||||
<div class="h-full">
|
||||
<h1>售后管理</h1>
|
||||
<UserAfterSaleList class="h-full" :user-id="userId" />
|
||||
</div>
|
||||
</ElTabPane>
|
||||
<ElTabPane label="收藏记录" name="UserFavoriteList">
|
||||
<!-- Todo: 商城模块 -->
|
||||
<div class="h-full">
|
||||
<h1>收藏记录</h1>
|
||||
<UserFavoriteList class="h-full" :user-id="userId" />
|
||||
</div>
|
||||
</ElTabPane>
|
||||
<ElTabPane label="优惠劵" name="UserCouponList">
|
||||
<!-- Todo: 商城模块 -->
|
||||
<div class="h-full">
|
||||
<h1>优惠劵</h1>
|
||||
<UserCouponList class="h-full" :user-id="userId" />
|
||||
</div>
|
||||
</ElTabPane>
|
||||
<ElTabPane label="推广用户" name="UserBrokerageList">
|
||||
<!-- Todo: 商城模块 -->
|
||||
<div class="h-full">
|
||||
<h1>推广用户</h1>
|
||||
<UserBrokerageList class="h-full" :user-id="userId" />
|
||||
</div>
|
||||
</ElTabPane>
|
||||
</ElTabs>
|
||||
|
||||
Reference in New Issue
Block a user