feat: 添加地址管理功能,整合地址组件至用户界面
This commit is contained in:
55
src/views/user/components/address.vue
Normal file
55
src/views/user/components/address.vue
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { useTemplateRef } from 'vue';
|
||||||
|
import { client, safeClient } from '@/service/api';
|
||||||
|
import type { TableBaseColumns, TableFetchData, TableInst } from '@/components/table';
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'AddressDialog'
|
||||||
|
});
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
userId: string;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const tableInst = useTemplateRef<TableInst>('tableInst');
|
||||||
|
|
||||||
|
const fetchData: TableFetchData = ({ pagination, filter }) => {
|
||||||
|
return safeClient(() =>
|
||||||
|
client.api.admin.shipping_address.get({ query: { userId: props.userId, ...pagination, ...filter } })
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns: TableBaseColumns = [
|
||||||
|
{
|
||||||
|
key: 'recipientName',
|
||||||
|
title: '收货人姓名'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'phoneNumber',
|
||||||
|
title: '收货人电话'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'detailAddress',
|
||||||
|
title: '地址行'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'isDefault',
|
||||||
|
title: '是否默认',
|
||||||
|
render(row) {
|
||||||
|
return row.isDefault ? '是' : '否';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<TableBase
|
||||||
|
ref="tableInst"
|
||||||
|
:fetch-data="fetchData"
|
||||||
|
:columns="columns"
|
||||||
|
:scroll-x="800"
|
||||||
|
:show-header-operation="false"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="css" scoped></style>
|
||||||
@@ -5,6 +5,7 @@ import dayjs from 'dayjs';
|
|||||||
import { client, safeClient } from '@/service/api';
|
import { client, safeClient } from '@/service/api';
|
||||||
import type { TableBaseColumns, TableFetchData, TableInst } from '@/components/table';
|
import type { TableBaseColumns, TableFetchData, TableInst } from '@/components/table';
|
||||||
import Wallet from './components/wallet.vue';
|
import Wallet from './components/wallet.vue';
|
||||||
|
import Address from './components/address.vue';
|
||||||
|
|
||||||
const dialog = useDialog();
|
const dialog = useDialog();
|
||||||
|
|
||||||
@@ -49,7 +50,7 @@ const columns: TableBaseColumns = [
|
|||||||
{
|
{
|
||||||
key: 'operations',
|
key: 'operations',
|
||||||
title: '操作',
|
title: '操作',
|
||||||
width: 120,
|
width: 200,
|
||||||
fixed: 'right',
|
fixed: 'right',
|
||||||
operations: (row: any) => [
|
operations: (row: any) => [
|
||||||
{
|
{
|
||||||
@@ -58,10 +59,23 @@ const columns: TableBaseColumns = [
|
|||||||
onClick: () => {
|
onClick: () => {
|
||||||
dialog.create({
|
dialog.create({
|
||||||
title: '用户钱包',
|
title: '用户钱包',
|
||||||
|
showIcon: false,
|
||||||
style: { width: '1000px' },
|
style: { width: '1000px' },
|
||||||
content: () => h(Wallet, { userId: row.userId })
|
content: () => h(Wallet, { userId: row.userId })
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
contentText: '收货地址',
|
||||||
|
size: 'small',
|
||||||
|
onClick: () => {
|
||||||
|
dialog.create({
|
||||||
|
title: '收货地址',
|
||||||
|
showIcon: false,
|
||||||
|
style: { width: '1000px' },
|
||||||
|
content: () => h(Address, { userId: row.userId })
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user