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 type { TableBaseColumns, TableFetchData, TableInst } from '@/components/table';
|
||||
import Wallet from './components/wallet.vue';
|
||||
import Address from './components/address.vue';
|
||||
|
||||
const dialog = useDialog();
|
||||
|
||||
@@ -49,7 +50,7 @@ const columns: TableBaseColumns = [
|
||||
{
|
||||
key: 'operations',
|
||||
title: '操作',
|
||||
width: 120,
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
operations: (row: any) => [
|
||||
{
|
||||
@@ -58,10 +59,23 @@ const columns: TableBaseColumns = [
|
||||
onClick: () => {
|
||||
dialog.create({
|
||||
title: '用户钱包',
|
||||
showIcon: false,
|
||||
style: { width: '1000px' },
|
||||
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