feat：【mall 商城】售后退款（10% antd detail description 相关的几个描述）
This commit is contained in:
YunaiV
263
apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts
Normal file
263
apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts
Normal file
@@ -0,0 +1,263 @@
|
|||||||
|
import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
|
||||||
|
import type { DescriptionItemSchema } from '#/components/description';
|
||||||
|
|
||||||
|
import { h } from 'vue';
|
||||||
|
|
||||||
|
import { DICT_TYPE } from '@vben/constants';
|
||||||
|
import { fenToYuan, formatDate } from '@vben/utils';
|
||||||
|
|
||||||
|
import { Image } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { DictTag } from '#/components/dict-tag';
|
||||||
|
|
||||||
|
/** 订单信息 schema */
|
||||||
|
export function useOrderInfoSchema(): DescriptionItemSchema[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
field: 'orderNo',
|
||||||
|
label: '订单号',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'order.deliveryType',
|
||||||
|
label: '配送方式',
|
||||||
|
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||||
|
h(DictTag, {
|
||||||
|
type: DICT_TYPE.TRADE_DELIVERY_TYPE,
|
||||||
|
value: data?.order?.deliveryType,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'order.type',
|
||||||
|
label: '订单类型',
|
||||||
|
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||||
|
h(DictTag, {
|
||||||
|
type: DICT_TYPE.TRADE_ORDER_TYPE,
|
||||||
|
value: data?.order?.type,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'order.receiverName',
|
||||||
|
label: '收货人',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'order.userRemark',
|
||||||
|
label: '买家留言',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'order.terminal',
|
||||||
|
label: '订单来源',
|
||||||
|
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||||
|
h(DictTag, {
|
||||||
|
type: DICT_TYPE.TERMINAL,
|
||||||
|
value: data?.order?.terminal,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'order.receiverMobile',
|
||||||
|
label: '联系电话',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'order.remark',
|
||||||
|
label: '商家备注',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'order.payOrderId',
|
||||||
|
label: '支付单号',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'order.payChannelCode',
|
||||||
|
label: '付款方式',
|
||||||
|
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||||
|
h(DictTag, {
|
||||||
|
type: DICT_TYPE.PAY_CHANNEL_CODE,
|
||||||
|
value: data?.order?.payChannelCode,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'user.nickname',
|
||||||
|
label: '买家',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 售后信息 schema */
|
||||||
|
export function useAfterSaleInfoSchema(): DescriptionItemSchema[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
field: 'no',
|
||||||
|
label: '退款编号',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'auditTime',
|
||||||
|
label: '申请时间',
|
||||||
|
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||||
|
formatDate(data?.auditTime) as string,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'type',
|
||||||
|
label: '售后类型',
|
||||||
|
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||||
|
h(DictTag, {
|
||||||
|
type: DICT_TYPE.TRADE_AFTER_SALE_TYPE,
|
||||||
|
value: data?.type,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'way',
|
||||||
|
label: '售后方式',
|
||||||
|
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||||
|
h(DictTag, {
|
||||||
|
type: DICT_TYPE.TRADE_AFTER_SALE_WAY,
|
||||||
|
value: data?.way,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'refundPrice',
|
||||||
|
label: '退款金额',
|
||||||
|
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||||
|
fenToYuan(data?.refundPrice ?? 0),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'applyReason',
|
||||||
|
label: '退款原因',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'applyDescription',
|
||||||
|
label: '补充描述',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'applyPicUrls',
|
||||||
|
label: '凭证图片',
|
||||||
|
content: (data) => {
|
||||||
|
const images = data?.applyPicUrls || [];
|
||||||
|
return h(
|
||||||
|
'div',
|
||||||
|
{ class: 'flex gap-10px' },
|
||||||
|
images.map((url: string, index: number) =>
|
||||||
|
h(Image, {
|
||||||
|
key: index,
|
||||||
|
src: url,
|
||||||
|
width: 60,
|
||||||
|
height: 60,
|
||||||
|
class: 'object-cover',
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 退款状态 schema */
|
||||||
|
export function useRefundStatusSchema(): DescriptionItemSchema[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
field: 'status',
|
||||||
|
label: '退款状态',
|
||||||
|
content: (data) =>
|
||||||
|
h(DictTag, {
|
||||||
|
type: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
|
||||||
|
value: data?.status,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'reminder',
|
||||||
|
label: '提醒',
|
||||||
|
content: () =>
|
||||||
|
h('div', { class: 'text-red-500 mb-10px' }, [
|
||||||
|
h('div', '如果未发货，请点击同意退款给买家。'),
|
||||||
|
h('div', '如果实际已发货，请主动与买家联系。'),
|
||||||
|
h('div', '如果订单整体退款后，优惠券和余额会退还给买家.'),
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 商品信息 schema */
|
||||||
|
export function useProductInfoSchema() {
|
||||||
|
return {
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
field: 'spuName',
|
||||||
|
title: '商品',
|
||||||
|
width: 'auto',
|
||||||
|
formatter: ({ row }) => {
|
||||||
|
const properties = (row.properties || [])
|
||||||
|
.map(
|
||||||
|
(property: any) =>
|
||||||
|
`${property.propertyName}: ${property.valueName}`,
|
||||||
|
)
|
||||||
|
.join(', ');
|
||||||
|
return `${row.spuName}${properties ? ` (${properties})` : ''}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'price',
|
||||||
|
title: '商品原价',
|
||||||
|
width: 150,
|
||||||
|
formatter: ({ cellValue }) => `${fenToYuan(cellValue)} 元`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'count',
|
||||||
|
title: '数量',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'payPrice',
|
||||||
|
title: '合计',
|
||||||
|
width: 150,
|
||||||
|
formatter: ({ cellValue }) => `${fenToYuan(cellValue)} 元`,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
data: [],
|
||||||
|
pagination: false,
|
||||||
|
border: true,
|
||||||
|
size: 'small',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 操作日志 schema */
|
||||||
|
export function useOperateLogSchema() {
|
||||||
|
return {
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
field: 'createTime',
|
||||||
|
title: '操作时间',
|
||||||
|
width: 180,
|
||||||
|
formatter: ({ cellValue }) => formatDate(cellValue),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'content',
|
||||||
|
title: '操作内容',
|
||||||
|
width: 'auto',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'userType',
|
||||||
|
title: '操作人',
|
||||||
|
width: 80,
|
||||||
|
formatter: ({ cellValue }) => {
|
||||||
|
const userTypeLabels: Record<number, string> = {
|
||||||
|
1: '管',
|
||||||
|
2: '商',
|
||||||
|
3: '买',
|
||||||
|
};
|
||||||
|
return userTypeLabels[cellValue || 0] || '系';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
data: [],
|
||||||
|
pagination: false,
|
||||||
|
border: true,
|
||||||
|
size: 'small',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获得用户类型颜色 */
|
||||||
|
export function getUserTypeColor(type: number): string {
|
||||||
|
const colorMap: Record<number, string> = {
|
||||||
|
1: '#1890ff', // 蓝色
|
||||||
|
2: '#52c41a', // 绿色
|
||||||
|
3: '#fa8c16', // 橙色
|
||||||
|
};
|
||||||
|
return colorMap[type] || '#1890ff';
|
||||||
|
}
|
||||||
334
apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
Normal file
334
apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
Normal file
@@ -0,0 +1,334 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
|
||||||
|
import type { MallOrderApi } from '#/api/mall/trade/order';
|
||||||
|
|
||||||
|
import { h, onMounted, ref } from 'vue';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
import { Page, useVbenModal } from '@vben/common-ui';
|
||||||
|
import { DICT_TYPE } from '@vben/constants';
|
||||||
|
import { getDictLabel, useTabs } from '@vben/hooks';
|
||||||
|
import { $t } from '@vben/locales';
|
||||||
|
|
||||||
|
import { Card, message, Modal, Timeline } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||||
|
import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
|
||||||
|
import { useDescription } from '#/components/description';
|
||||||
|
import { TableAction } from '#/components/table-action';
|
||||||
|
|
||||||
|
import {
|
||||||
|
getUserTypeColor,
|
||||||
|
useAfterSaleInfoSchema,
|
||||||
|
useOperateLogSchema,
|
||||||
|
useOrderInfoSchema,
|
||||||
|
useProductInfoSchema,
|
||||||
|
useRefundStatusSchema,
|
||||||
|
} from './data';
|
||||||
|
|
||||||
|
defineOptions({ name: 'TradeAfterSaleDetail' });
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const tabs = useTabs();
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const afterSaleId = ref(0);
|
||||||
|
const afterSale = ref<MallAfterSaleApi.AfterSale>({
|
||||||
|
order: {} as MallOrderApi.Order,
|
||||||
|
orderItem: {} as MallOrderApi.OrderItem,
|
||||||
|
logs: [] as any[],
|
||||||
|
});
|
||||||
|
|
||||||
|
const [OrderDescriptions] = useDescription({
|
||||||
|
componentProps: {
|
||||||
|
title: '订单信息',
|
||||||
|
bordered: false,
|
||||||
|
column: 3,
|
||||||
|
},
|
||||||
|
schema: useOrderInfoSchema(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const [AfterSaleDescriptions] = useDescription({
|
||||||
|
componentProps: {
|
||||||
|
title: '售后信息',
|
||||||
|
bordered: false,
|
||||||
|
column: 3,
|
||||||
|
},
|
||||||
|
schema: useAfterSaleInfoSchema(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const [RefundStatusDescriptions] = useDescription({
|
||||||
|
componentProps: {
|
||||||
|
title: '退款状态',
|
||||||
|
bordered: false,
|
||||||
|
column: 1,
|
||||||
|
},
|
||||||
|
schema: useRefundStatusSchema(),
|
||||||
|
});
|
||||||
|
|
||||||
|
// TODO @AI：只把 columns 拿出去
|
||||||
|
const [ProductGrid] = useVbenVxeGrid({
|
||||||
|
gridOptions: {
|
||||||
|
...useProductInfoSchema(),
|
||||||
|
class: 'mt-4',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// TODO @AI：只把 columns 拿出去
|
||||||
|
const [OperateLogGrid] = useVbenVxeGrid({
|
||||||
|
gridOptions: {
|
||||||
|
...useOperateLogSchema(),
|
||||||
|
class: 'mt-4',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const [DisagreeModal, disagreeModalApi] = useVbenModal({
|
||||||
|
connectedComponent: () => import('./modules/disagree-form.vue'),
|
||||||
|
destroyOnClose: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
/** 获得详情 */
|
||||||
|
async function getDetail() {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const res = await AfterSaleApi.getAfterSale(afterSaleId.value);
|
||||||
|
if (res === null) {
|
||||||
|
message.error('售后订单不存在');
|
||||||
|
handleBack();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
afterSale.value = res;
|
||||||
|
|
||||||
|
// 更新商品信息
|
||||||
|
if (res.orderItem) {
|
||||||
|
ProductGrid.api?.reload([res.orderItem]);
|
||||||
|
}
|
||||||
|
// 更新操作日志
|
||||||
|
if (res.logs) {
|
||||||
|
OperateLogGrid.api?.reload(res.logs);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 同意售后 */
|
||||||
|
// TODO @AI：需要 loading
|
||||||
|
async function agree() {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '确认操作',
|
||||||
|
content: '是否同意售后？',
|
||||||
|
onOk: async () => {
|
||||||
|
await AfterSaleApi.agree(afterSale.value.id!);
|
||||||
|
message.success($t('page.common.success'));
|
||||||
|
await getDetail();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 拒绝售后 */
|
||||||
|
function disagree() {
|
||||||
|
disagreeModalApi.setData({ afterSale: afterSale.value }).open();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 确认收货 */
|
||||||
|
// TODO @AI：需要 loading
|
||||||
|
async function receive() {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '确认操作',
|
||||||
|
content: '是否确认收货？',
|
||||||
|
onOk: async () => {
|
||||||
|
await AfterSaleApi.receive(afterSale.value.id!);
|
||||||
|
message.success($t('page.common.success'));
|
||||||
|
await getDetail();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 拒绝收货 */
|
||||||
|
// TODO @AI：需要 loading
|
||||||
|
async function refuse() {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '确认操作',
|
||||||
|
content: '是否拒绝收货？',
|
||||||
|
onOk: async () => {
|
||||||
|
await AfterSaleApi.refuse(afterSale.value.id!);
|
||||||
|
message.success($t('page.common.success'));
|
||||||
|
await getDetail();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 确认退款 */
|
||||||
|
// TODO @AI：需要 loading
|
||||||
|
async function refund() {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '确认操作',
|
||||||
|
content: '是否确认退款？',
|
||||||
|
onOk: async () => {
|
||||||
|
await AfterSaleApi.refund(afterSale.value.id!);
|
||||||
|
message.success($t('page.common.success'));
|
||||||
|
await getDetail();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 返回列表页 */
|
||||||
|
function handleBack() {
|
||||||
|
tabs.closeCurrentTab();
|
||||||
|
router.push('/mall/trade/afterSale');
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取操作按钮 */
|
||||||
|
function getActionButtons() {
|
||||||
|
const buttons: any[] = [
|
||||||
|
{
|
||||||
|
label: '返回',
|
||||||
|
type: 'default',
|
||||||
|
icon: 'lucide:arrow-left',
|
||||||
|
onClick: handleBack,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 根据状态添加不同的操作按钮
|
||||||
|
switch (afterSale.value.status) {
|
||||||
|
case 10: {
|
||||||
|
buttons.push(
|
||||||
|
{
|
||||||
|
label: '同意售后',
|
||||||
|
type: 'primary',
|
||||||
|
onClick: agree,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '拒绝售后',
|
||||||
|
type: 'primary',
|
||||||
|
onClick: disagree,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 30: {
|
||||||
|
buttons.push(
|
||||||
|
{
|
||||||
|
label: '确认收货',
|
||||||
|
type: 'primary',
|
||||||
|
onClick: receive,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '拒绝收货',
|
||||||
|
type: 'primary',
|
||||||
|
onClick: refuse,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 40: {
|
||||||
|
buttons.push({
|
||||||
|
label: '确认退款',
|
||||||
|
type: 'primary',
|
||||||
|
onClick: refund,
|
||||||
|
});
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
// No default
|
||||||
|
}
|
||||||
|
|
||||||
|
return buttons;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 渲染操作日志时间线 */
|
||||||
|
function renderTimeline() {
|
||||||
|
return afterSale.value.logs?.map((log: any) => ({
|
||||||
|
key: log.id,
|
||||||
|
children: [
|
||||||
|
h(
|
||||||
|
'div',
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
backgroundColor: '#f5f5f5',
|
||||||
|
padding: '10px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
position: 'relative',
|
||||||
|
marginLeft: '10px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[
|
||||||
|
h('div', log.content),
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
position: 'absolute',
|
||||||
|
left: '-16px',
|
||||||
|
top: '10px',
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
borderTop: '8px solid transparent',
|
||||||
|
borderBottom: '8px solid transparent',
|
||||||
|
borderRight: '8px solid #f5f5f5',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
dot: h(
|
||||||
|
'span',
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
display: 'inline-flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
width: '20px',
|
||||||
|
height: '20px',
|
||||||
|
fontSize: '10px',
|
||||||
|
color: '#fff',
|
||||||
|
borderRadius: '50%',
|
||||||
|
backgroundColor: getUserTypeColor(log.userType ?? 0),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
getDictLabel(DICT_TYPE.USER_TYPE, log.userType)?.[0] || '系',
|
||||||
|
),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
afterSaleId.value = Number(route.params.id);
|
||||||
|
getDetail();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Page auto-content-height :title="afterSale.no" :loading="loading">
|
||||||
|
<DisagreeModal @success="getDetail" />
|
||||||
|
|
||||||
|
<!-- TODO @AI：直接写，不用 getActionButtons；按钮是否展示，使用 ifShow -->
|
||||||
|
<template #extra>
|
||||||
|
<TableAction :actions="getActionButtons()" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 订单信息 -->
|
||||||
|
<Card class="mb-4">
|
||||||
|
<OrderDescriptions :data="afterSale" />
|
||||||
|
</Card>
|
||||||
|
<!-- 售后信息 -->
|
||||||
|
<Card class="mb-4">
|
||||||
|
<AfterSaleDescriptions :data="afterSale" />
|
||||||
|
</Card>
|
||||||
|
<!-- 退款状态 -->
|
||||||
|
<Card class="mb-4">
|
||||||
|
<RefundStatusDescriptions :data="afterSale" />
|
||||||
|
</Card>
|
||||||
|
<!-- 商品信息 -->
|
||||||
|
<Card class="mb-4" title="商品信息">
|
||||||
|
<ProductGrid />
|
||||||
|
</Card>
|
||||||
|
<!-- 操作日志 -->
|
||||||
|
<Card class="mb-4" title="售后日志">
|
||||||
|
<div style="margin-left: 160px">
|
||||||
|
<Timeline :items="renderTimeline()" />
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Page>
|
||||||
|
</template>
|
||||||
Reference in New Issue
Block a user