fix: 修复商户中心下拉跳转无匹配路由
启用 external 路由并注册 MerchantCenter 页面,补齐商户中心文案与页面实现,确保头像下拉点击可正常进入商户中心。
This commit is contained in:
112
apps/web-antd/src/views/merchant/center/index.vue
Normal file
112
apps/web-antd/src/views/merchant/center/index.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<script setup lang="ts">
|
||||
import type { MerchantDto } from '#/api/merchant';
|
||||
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
|
||||
import { Profile } from '@vben/common-ui';
|
||||
import { useUserStore } from '@vben/stores';
|
||||
|
||||
import { getMerchantInfoApi } from '#/api/merchant';
|
||||
|
||||
// 1. 状态定义
|
||||
const userStore = useUserStore();
|
||||
const merchantInfo = ref<MerchantDto | null>(null);
|
||||
const loading = ref(false);
|
||||
const tabsValue = ref('basic');
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
label: '基本信息',
|
||||
value: 'basic',
|
||||
},
|
||||
{
|
||||
label: '资质信息',
|
||||
value: 'license',
|
||||
},
|
||||
];
|
||||
|
||||
// 2. 获取数据
|
||||
async function fetchMerchantInfo() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const data = await getMerchantInfoApi();
|
||||
merchantInfo.value = data;
|
||||
} catch (error) {
|
||||
console.error('获取商户信息失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchMerchantInfo();
|
||||
});
|
||||
|
||||
// 3. 格式化显示
|
||||
const displayInfo = computed(() => [
|
||||
{ label: '商户名称', value: merchantInfo.value?.merchantName },
|
||||
{ label: '联系人', value: merchantInfo.value?.contactName },
|
||||
{ label: '联系电话', value: merchantInfo.value?.contactPhone },
|
||||
{ label: '商户地址', value: merchantInfo.value?.address },
|
||||
{ label: '创建时间', value: merchantInfo.value?.createTime },
|
||||
]);
|
||||
|
||||
const licenseInfo = computed(() => [
|
||||
{ label: '营业执照代码', value: merchantInfo.value?.businessLicenseCode },
|
||||
{ label: '商户简介', value: merchantInfo.value?.description },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-5">
|
||||
<Profile
|
||||
v-model:model-value="tabsValue"
|
||||
:title="$t('page.merchant.center')"
|
||||
:user-info="{
|
||||
realName: merchantInfo?.merchantName || '加载中...',
|
||||
avatar: merchantInfo?.logo || userStore.userInfo?.avatar || '',
|
||||
userId: userStore.userInfo?.userId || '',
|
||||
username: merchantInfo?.contactName || '',
|
||||
}"
|
||||
:tabs="tabs"
|
||||
>
|
||||
<template #content>
|
||||
<div v-loading="loading" class="rounded-lg bg-card p-6">
|
||||
<!-- 基本信息 -->
|
||||
<div v-if="tabsValue === 'basic'">
|
||||
<h3 class="mb-4 text-lg font-medium">基本信息</h3>
|
||||
<a-descriptions :column="1" bordered>
|
||||
<a-descriptions-item
|
||||
v-for="item in displayInfo"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
>
|
||||
{{ item.value || '-' }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
|
||||
<!-- 资质信息 -->
|
||||
<div v-if="tabsValue === 'license'">
|
||||
<h3 class="mb-4 text-lg font-medium">资质信息</h3>
|
||||
<a-descriptions :column="1" bordered>
|
||||
<a-descriptions-item
|
||||
v-for="item in licenseInfo"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
>
|
||||
{{ item.value || '-' }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Profile>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bg-card {
|
||||
background-color: var(--el-bg-color-overlay);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user