feat(licenseManagement): 实现营业执照、食品经营许可证和合同图片的动态获取与展示

- 调整页面布局，移除冗余标题模块
- 新增从本地存储获取ID并调用对应接口获取数据
- 更新图片展示区域样式，优化宽高及响应式显示
- 修改提示文本内容及样式，提升可读性
- 移除无用的空占位模板代码
- 统一图片字段为 imgUrl 并适配预览功能
- 调整内容区域间距与对齐方式，增强视觉效果
- 替换API接口地址，使用新的查询接口路径

src/api/modules/licenseManagement.ts

@@ -4,17 +4,17 @@ import http from "@/api";
 
 // 获取营业执照
 export const getBusinessLicense = params => {
-  return http.get(PORT_NONE + `/license/getBusinessLicense`, params);
+  return http.get(PORT_NONE + `/license/querybusinessLicenseList`, params);
 };
 
 // 获取食品经营许可证
 export const getFoodBusinessLicense = params => {
-  return http.get(PORT_NONE + `/license/getFoodBusinessLicense`, params);
+  return http.get(PORT_NONE + `/license/queryFoodLicenceList`, params);
 };
 
 // 获取合同图片列表
 export const getContractImages = params => {
-  return http.get(PORT_NONE + `/license/getContractImages`, params);
+  return http.get(PORT_NONE + `/license/queryContractList`, params);
 };
 
 // 获取变更记录

src/views/licenseManagement/businessLicense.vue

@@ -1,9 +1,5 @@
 <template>
   <div class="card content-box">
-    <div class="page-header">
-      <h1 class="store-title">重庆老火锅</h1>
-    </div>
-    <div class="divider" />
     <div class="tip-text">如需更换请联系客服</div>
     <div class="license-container">
       <div class="license-display">
@@ -28,22 +24,24 @@
 import { ref, onMounted } from "vue";
 import { ElMessage } from "element-plus";
 import { Picture } from "@element-plus/icons-vue";
+import { getBusinessLicense } from "@/api/modules/licenseManagement";
+import { localGet } from "@/utils";
 
 const licenseImage = ref<string>("");
 
+const id = localGet("createdId");
+
 onMounted(async () => {
   await initData();
 });
 
 const initData = async () => {
-  try {
-    // TODO: 调用API获取营业执照图片
-    // const response = await getBusinessLicense();
-    // if (response.code === 200) {
-    //   licenseImage.value = response.data.imageUrl;
-    // }
-  } catch (error) {
-    ElMessage.error("获取营业执照失败");
+  const params = {
+    id: id
+  };
+  const res: any = await getBusinessLicense(params);
+  if (res.code === 200) {
+    licenseImage.value = res.data[0].imgUrl;
   }
 };
 </script>
@@ -54,7 +52,7 @@ const initData = async () => {
 }
 .store-title {
   margin: 0;
-  font-size: 24px;
+  font-size: 28px;
   font-weight: 600;
   color: var(--el-text-color-primary);
 }
@@ -65,13 +63,12 @@ const initData = async () => {
   background-color: var(--el-border-color-lighter);
 }
 .tip-text {
-  margin-bottom: 30px;
-  font-size: 14px;
+  margin-top: 20px;
+  margin-bottom: 50px;
+  font-size: 18px;
   color: var(--el-text-color-regular);
 }
 .license-container {
-  // width: 100%;
-  // min-height: 500px;
   padding: 20px;
   background-color: var(--el-bg-color-page);
   border-radius: 8px;
@@ -80,13 +77,12 @@ const initData = async () => {
   display: flex;
   align-items: center;
   justify-content: center;
-
-  // width: 100%;
-  // min-height: 500px;
+  width: 700px;
+  height: 500px;
 }
 .license-image {
-  // max-width: 100%;
-  // max-height: 600px;
+  width: 100%;
+  height: 100%;
   border-radius: 8px;
   box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
 }
@@ -94,8 +90,8 @@ const initData = async () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 300px;
-  height: 200px;
+  width: 100%;
+  height: 100%;
   background-color: var(--el-fill-color-lighter);
   border-radius: 8px;
   .empty-icon {

src/views/licenseManagement/contractManagement.vue

@@ -1,11 +1,8 @@
 <template>
   <div class="card content-box">
-    <div class="page-header">
-      <h1 class="store-title">重庆老火锅</h1>
-    </div>
     <div class="content-section">
       <div class="tip-text">
-        如需续约合同或更改合同图片请在此处上传,重新上传之后需要重新进行审核,审核通过后,新的合同图片将会覆盖之前的合同
+        如需续约合同或更改合同图片请在此处上传，重新上传之后需要重新进行审核，审核通过后，新的合同图片将会覆盖之前的合同
       </div>
       <div class="action-buttons">
         <el-button type="primary" @click="handleReplace"> 更换 </el-button>
@@ -17,10 +14,10 @@
         <el-col v-for="(item, index) in contractList" :key="index" :xs="12" :sm="8" :md="6" :lg="4" :xl="4">
           <div class="contract-item">
             <el-image
-              :src="item.url"
-              fit="cover"
+              :src="item.imgUrl"
+              fit=""
               class="contract-image"
-              :preview-src-list="contractList.map(img => img.url)"
+              :preview-src-list="contractList.map(img => img.imgUrl)"
               :initial-index="index"
             >
               <template #error>
@@ -31,15 +28,15 @@
             </el-image>
           </div>
         </el-col>
-        <template v-for="n in Math.max(0, 8 - contractList.length)" :key="`empty-${n}`">
-          <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4">
-            <div class="contract-item empty-item">
-              <el-icon class="empty-icon">
-                <Picture />
-              </el-icon>
-            </div>
-          </el-col>
-        </template>
+        <!--        <template v-for="n in Math.max(0, 8 - contractList.length)" :key="`empty-${n}`">-->
+        <!--          <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4">-->
+        <!--            <div class="contract-item empty-item">-->
+        <!--              <el-icon class="empty-icon">-->
+        <!--                <Picture />-->
+        <!--              </el-icon>-->
+        <!--            </div>-->
+        <!--          </el-col>-->
+        <!--        </template>-->
       </el-row>
     </div>
 
@@ -114,6 +111,8 @@ import { ElMessage, ElMessageBox } from "element-plus";
 import { Plus, Picture } from "@element-plus/icons-vue";
 import { uploadImg } from "@/api/modules/upload";
 import type { UploadProps, UploadFile, UploadRequestOptions } from "element-plus";
+import { localGet } from "@/utils";
+import { getContractImages } from "@/api/modules/licenseManagement";
 
 interface ContractItem {
   id: string;
@@ -127,7 +126,7 @@ interface ChangeRecordItem {
   rejectionReason?: string;
 }
 
-const contractList = ref<ContractItem[]>([]);
+const contractList = ref<any>([]);
 const replaceDialogVisible = ref(false);
 const cancelConfirmVisible = ref(false);
 const changeRecordDialogVisible = ref(false);
@@ -137,19 +136,19 @@ const currentRecordDate = ref("2025.08.01 10:29");
 const changeRecordList = ref<ChangeRecordItem[]>([]);
 const rejectionReason = ref("");
 
+const id = localGet("createdId");
+
 onMounted(async () => {
   await initData();
 });
 
 const initData = async () => {
-  try {
-    // TODO: 调用API获取合同图片列表
-    // const response = await getContractImages();
-    // if (response.code === 200) {
-    //   contractList.value = response.data;
-    // }
-  } catch (error) {
-    ElMessage.error("获取合同图片失败");
+  const params = {
+    id: id
+  };
+  const res = await getContractImages(params);
+  if (res.code === 200) {
+    contractList.value = res.data;
   }
 };
 
@@ -298,15 +297,14 @@ const getStatusText = (status: string) => {
 }
 .content-section {
   display: flex;
-  gap: 20px;
-  align-items: flex-start;
+  gap: 50px;
+  align-items: center;
   justify-content: space-between;
-  margin-bottom: 30px;
+  margin-top: 20px;
+  margin-bottom: 50px;
 }
 .tip-text {
-  flex: 1;
-  font-size: 14px;
-  line-height: 1.6;
+  font-size: 18px;
   color: var(--el-text-color-regular);
 }
 .action-buttons {
@@ -316,6 +314,7 @@ const getStatusText = (status: string) => {
 }
 .contract-container {
   width: 100%;
+  min-height: 570px;
   padding: 20px;
   background-color: var(--el-bg-color-page);
   border-radius: 8px;

src/views/licenseManagement/foodBusinessLicense.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="card content-box">
-    <div class="page-header">
-      <h1 class="store-title">重庆老火锅</h1>
-    </div>
     <div class="content-section">
       <div class="tip-text">
         如需变更请在此处上传,重新上传之后需要重新进行审核,审核通过后,新的食品经营许可证将会覆盖之前的食品经营许可证
@@ -103,12 +100,15 @@ import { ElMessage } from "element-plus";
 import { Picture, UploadFilled } from "@element-plus/icons-vue";
 import { uploadImg } from "@/api/modules/upload";
 import type { UploadProps, UploadRequestOptions } from "element-plus";
+import { getFoodBusinessLicense } from "@/api/modules/licenseManagement";
+import { localGet } from "@/utils";
 
 interface ChangeRecordItem {
   id: string;
   status: "pending" | "success" | "failed";
   rejectionReason?: string;
 }
+const id = localGet("createdId");
 
 const licenseImage = ref<string>("");
 const replaceDialogVisible = ref(false);
@@ -127,14 +127,12 @@ onMounted(async () => {
 });
 
 const initData = async () => {
-  try {
-    // TODO: 调用API获取食品经营许可证图片
-    // const response = await getFoodBusinessLicense();
-    // if (response.code === 200) {
-    //   licenseImage.value = response.data.imageUrl;
-    // }
-  } catch (error) {
-    ElMessage.error("获取食品经营许可证失败");
+  const params = {
+    id: id
+  };
+  const res = await getFoodBusinessLicense(params);
+  if (res.code === 200) {
+    licenseImage.value = res.data[0].imgUrl;
   }
 };
 
@@ -254,15 +252,14 @@ const getStatusText = (status: string) => {
 }
 .content-section {
   display: flex;
-  gap: 20px;
-  align-items: flex-start;
+  gap: 50px;
+  align-items: center;
   justify-content: space-between;
-  margin-bottom: 30px;
+  margin-top: 20px;
+  margin-bottom: 50px;
 }
 .tip-text {
-  flex: 1;
-  font-size: 14px;
-  line-height: 1.6;
+  font-size: 18px;
   color: var(--el-text-color-regular);
 }
 .action-buttons {
@@ -271,8 +268,6 @@ const getStatusText = (status: string) => {
   gap: 10px;
 }
 .license-container {
-  // width: 100%;
-  // min-height: 500px;
   padding: 20px;
   background-color: var(--el-bg-color-page);
   border-radius: 8px;
@@ -281,13 +276,12 @@ const getStatusText = (status: string) => {
   display: flex;
   align-items: center;
   justify-content: center;
-
-  // width: 100%;
-  // min-height: 500px;
+  width: 700px;
+  height: 500px;
 }
 .license-image {
-  // max-width: 100%;
-  // max-height: 600px;
+  width: 100%;
+  height: 100%;
   border-radius: 8px;
   box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
 }
@@ -295,8 +289,8 @@ const getStatusText = (status: string) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 300px;
-  height: 200px;
+  width: 100%;
+  height: 100%;
   background-color: var(--el-fill-color-lighter);
   border-radius: 8px;
   .empty-icon {