From 0a161d185eb6bdff3b4706d0d4e0c6e33c62fb44 Mon Sep 17 00:00:00 2001
From: MSuMshk <2039814060@qq.com>
Date: Fri, 6 Feb 2026 16:51:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=95=86=E6=88=B7?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E4=BB=85=E5=B1=95=E7=A4=BA=E5=9F=BA=E7=A1=80?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/merchant/center/index.vue       | 366 +++++++++++++++++-
 1 file changed, 360 insertions(+), 6 deletions(-)

diff --git a/apps/web-antd/src/views/merchant/center/index.vue b/apps/web-antd/src/views/merchant/center/index.vue
index a88033c..2059a5b 100644
--- a/apps/web-antd/src/views/merchant/center/index.vue
+++ b/apps/web-antd/src/views/merchant/center/index.vue
@@ -1,13 +1,29 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import type {
+  CurrentMerchantCenterDto,
+  MerchantAuditLogDto,
+  MerchantChangeLogDto,
+  MerchantContractDto,
+  MerchantDocumentDto,
+  MerchantStaffDto,
+  MerchantStoreDto,
+} from '#/api/merchant';
+
+import { computed, onMounted, ref } from 'vue';
 
 import { Profile } from '@vben/common-ui';
 import { useUserStore } from '@vben/stores';
 
+import { Alert, Empty, List, message, Spin, Tag } from 'ant-design-vue';
+
+import { getMerchantInfoApi } from '#/api/merchant';
+
 import MerchantSetting from './merchant-setting.vue';
 
 const userStore = useUserStore();
 const tabsValue = ref('basic');
+const loading = ref(false);
+const merchantCenter = ref<CurrentMerchantCenterDto | null>(null);
 
 const tabs = [
   { label: '基本信息', value: 'basic' },
@@ -16,6 +32,146 @@ const tabs = [
   { label: '员工信息', value: 'staffs' },
   { label: '日志记录', value: 'logs' },
 ];
+
+const merchantStores = computed<MerchantStoreDto[]>(() => {
+  return merchantCenter.value?.merchant.stores ?? [];
+});
+
+const merchantDocuments = computed<MerchantDocumentDto[]>(() => {
+  return merchantCenter.value?.documents ?? [];
+});
+
+const merchantContracts = computed<MerchantContractDto[]>(() => {
+  return merchantCenter.value?.contracts ?? [];
+});
+
+const merchantStaffs = computed<MerchantStaffDto[]>(() => {
+  return merchantCenter.value?.staffs ?? [];
+});
+
+const merchantAuditLogs = computed<MerchantAuditLogDto[]>(() => {
+  return merchantCenter.value?.auditLogs ?? [];
+});
+
+const merchantChangeLogs = computed<MerchantChangeLogDto[]>(() => {
+  return merchantCenter.value?.changeLogs ?? [];
+});
+
+function formatDateTime(value?: null | string) {
+  if (!value) {
+    return '--';
+  }
+
+  return new Date(value).toLocaleString('zh-CN', { hour12: false });
+}
+
+function resolveStoreStatus(status: number) {
+  if (status === 1) {
+    return '营业中';
+  }
+
+  if (status === 2) {
+    return '停业中';
+  }
+
+  return `状态${status}`;
+}
+
+function resolveContractStatus(status: number) {
+  if (status === 1) {
+    return '生效中';
+  }
+
+  if (status === 2) {
+    return '已终止';
+  }
+
+  if (status === 3) {
+    return '已过期';
+  }
+
+  return `状态${status}`;
+}
+
+function resolveDocumentType(documentType: number) {
+  if (documentType === 1) {
+    return '营业执照';
+  }
+
+  if (documentType === 2) {
+    return '食品经营许可证';
+  }
+
+  if (documentType === 3) {
+    return '法人身份证';
+  }
+
+  if (documentType === 4) {
+    return '门头照';
+  }
+
+  return `类型${documentType}`;
+}
+
+function resolveDocumentStatus(status: number) {
+  if (status === 1) {
+    return '待审核';
+  }
+
+  if (status === 2) {
+    return '已通过';
+  }
+
+  if (status === 3) {
+    return '已驳回';
+  }
+
+  return `状态${status}`;
+}
+
+function resolveStaffRole(roleType: number) {
+  if (roleType === 1) {
+    return '店长';
+  }
+
+  if (roleType === 2) {
+    return '店员';
+  }
+
+  if (roleType === 3) {
+    return '财务';
+  }
+
+  return `角色${roleType}`;
+}
+
+function resolveStaffStatus(status: number) {
+  if (status === 1) {
+    return '在职';
+  }
+
+  if (status === 2) {
+    return '离职';
+  }
+
+  return `状态${status}`;
+}
+
+async function loadMerchantCenter() {
+  loading.value = true;
+
+  try {
+    merchantCenter.value = await getMerchantInfoApi();
+  } catch {
+    message.error('商户中心信息加载失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  loadMerchantCenter();
+});
 </script>
 
 <template>
@@ -31,12 +187,210 @@ const tabs = [
       :tabs="tabs"
     >
       <template #content>
-        <div class="rounded-lg bg-card">
-          <!-- 基本信息：使用表单形式，支持展示和修改 -->
-          <MerchantSetting v-if="tabsValue === 'basic'" />
+        <div class="rounded-lg bg-card p-4">
+          <Spin :spinning="loading">
+            <MerchantSetting v-if="tabsValue === 'basic'" />
 
-          <!-- 其他 Tab 暂时保留或后续根据需要优化 -->
-          <div v-else class="p-6 text-center text-gray-400">正在开发中...</div>
+            <template v-else-if="tabsValue === 'qualification'">
+              <div class="mb-3 text-base font-medium">资质证照</div>
+              <Empty
+                v-if="merchantDocuments.length === 0"
+                description="暂无资质证照"
+              />
+              <List
+                v-else
+                :data-source="merchantDocuments"
+                item-layout="vertical"
+              >
+                <template #renderItem="{ item }">
+                  <List.Item>
+                    <div class="mb-2 flex flex-wrap items-center gap-2">
+                      <Tag color="blue">
+                        {{ resolveDocumentType(item.documentType) }}
+                      </Tag>
+                      <Tag>{{ resolveDocumentStatus(item.status) }}</Tag>
+                      <span class="text-gray-500">
+                        编号：{{ item.documentNumber || '--' }}
+                      </span>
+                    </div>
+                    <div class="text-gray-600">
+                      签发时间：{{ formatDateTime(item.issuedAt) }}
+                    </div>
+                    <div class="text-gray-600">
+                      到期时间：{{ formatDateTime(item.expiresAt) }}
+                    </div>
+                    <div class="text-gray-600">
+                      文件地址：
+                      <a
+                        :href="item.fileUrl"
+                        class="text-blue-500"
+                        target="_blank"
+                      >
+                        {{ item.fileUrl }}
+                      </a>
+                    </div>
+                    <div class="text-gray-600">
+                      备注：{{ item.remarks || '--' }}
+                    </div>
+                  </List.Item>
+                </template>
+              </List>
+
+              <div class="mb-3 mt-6 text-base font-medium">合同信息</div>
+              <Empty
+                v-if="merchantContracts.length === 0"
+                description="暂无合同"
+              />
+              <List
+                v-else
+                :data-source="merchantContracts"
+                item-layout="vertical"
+              >
+                <template #renderItem="{ item }">
+                  <List.Item>
+                    <div class="mb-2 flex flex-wrap items-center gap-2">
+                      <Tag color="purple">
+                        合同号：{{ item.contractNumber }}
+                      </Tag>
+                      <Tag>{{ resolveContractStatus(item.status) }}</Tag>
+                    </div>
+                    <div class="text-gray-600">
+                      生效日期：{{ formatDateTime(item.startDate) }}
+                    </div>
+                    <div class="text-gray-600">
+                      截止日期：{{ formatDateTime(item.endDate) }}
+                    </div>
+                    <div class="text-gray-600">
+                      签署时间：{{ formatDateTime(item.signedAt) }}
+                    </div>
+                    <div class="text-gray-600">
+                      终止时间：{{ formatDateTime(item.terminatedAt) }}
+                    </div>
+                    <div class="text-gray-600">
+                      终止原因：{{ item.terminationReason || '--' }}
+                    </div>
+                  </List.Item>
+                </template>
+              </List>
+            </template>
+
+            <template v-else-if="tabsValue === 'stores'">
+              <Empty
+                v-if="merchantStores.length === 0"
+                description="暂无门店信息"
+              />
+              <List v-else :data-source="merchantStores" item-layout="vertical">
+                <template #renderItem="{ item }">
+                  <List.Item>
+                    <div class="mb-2 flex items-center gap-2">
+                      <Tag color="green">{{ item.name }}</Tag>
+                      <Tag>{{ resolveStoreStatus(item.status) }}</Tag>
+                    </div>
+                    <div class="text-gray-600">
+                      门店地址：{{ item.address }}
+                    </div>
+                    <div class="text-gray-600">
+                      联系电话：{{ item.contactPhone || '--' }}
+                    </div>
+                    <div class="text-gray-600">
+                      营业执照号：{{ item.licenseNumber || '--' }}
+                    </div>
+                  </List.Item>
+                </template>
+              </List>
+            </template>
+
+            <template v-else-if="tabsValue === 'staffs'">
+              <Empty
+                v-if="merchantStaffs.length === 0"
+                description="暂无员工信息"
+              />
+              <List v-else :data-source="merchantStaffs" item-layout="vertical">
+                <template #renderItem="{ item }">
+                  <List.Item>
+                    <div class="mb-2 flex items-center gap-2">
+                      <Tag color="cyan">{{ item.name }}</Tag>
+                      <Tag>{{ resolveStaffRole(item.roleType) }}</Tag>
+                      <Tag>{{ resolveStaffStatus(item.status) }}</Tag>
+                    </div>
+                    <div class="text-gray-600">联系电话：{{ item.phone }}</div>
+                    <div class="text-gray-600">
+                      联系邮箱：{{ item.email || '--' }}
+                    </div>
+                    <div class="text-gray-600">
+                      所属门店ID：{{ item.storeId || '--' }}
+                    </div>
+                  </List.Item>
+                </template>
+              </List>
+            </template>
+
+            <template v-else-if="tabsValue === 'logs'">
+              <Alert class="mb-4" message="审核日志" type="info" />
+              <Empty
+                v-if="merchantAuditLogs.length === 0"
+                description="暂无审核日志"
+              />
+              <List
+                v-else
+                :data-source="merchantAuditLogs"
+                item-layout="vertical"
+              >
+                <template #renderItem="{ item }">
+                  <List.Item>
+                    <div class="mb-2 flex items-center gap-2">
+                      <Tag color="orange">{{ item.title }}</Tag>
+                      <Tag>动作{{ item.action }}</Tag>
+                    </div>
+                    <div class="text-gray-600">
+                      操作人：{{ item.operatorName || '--' }}
+                    </div>
+                    <div class="text-gray-600">
+                      操作描述：{{ item.description || '--' }}
+                    </div>
+                    <div class="text-gray-600">
+                      操作IP：{{ item.ipAddress || '--' }}
+                    </div>
+                    <div class="text-gray-600">
+                      操作时间：{{ formatDateTime(item.createdAt) }}
+                    </div>
+                  </List.Item>
+                </template>
+              </List>
+
+              <Alert class="mb-4 mt-6" message="变更日志" type="info" />
+              <Empty
+                v-if="merchantChangeLogs.length === 0"
+                description="暂无变更日志"
+              />
+              <List
+                v-else
+                :data-source="merchantChangeLogs"
+                item-layout="vertical"
+              >
+                <template #renderItem="{ item }">
+                  <List.Item>
+                    <div class="mb-2 flex items-center gap-2">
+                      <Tag color="gold">{{ item.fieldName }}</Tag>
+                      <Tag>{{ item.changedByName || '--' }}</Tag>
+                    </div>
+                    <div class="text-gray-600">
+                      旧值：{{ item.oldValue || '--' }}
+                    </div>
+                    <div class="text-gray-600">
+                      新值：{{ item.newValue || '--' }}
+                    </div>
+                    <div class="text-gray-600">
+                      变更原因：{{ item.changeReason || '--' }}
+                    </div>
+                    <div class="text-gray-600">
+                      变更时间：{{ formatDateTime(item.changedAt) }}
+                    </div>
+                  </List.Item>
+                </template>
+              </List>
+            </template>
+          </Spin>
         </div>
       </template>
     </Profile>