fix:补提

src/api/market-manage/activity-manage/index.js

@@ -0,0 +1,21 @@
+import { getRequest, postRequest } from '/src/lib/axios';
+/* 获取活动详情 */
+export function getActivityDetail(id){
+    return getRequest(`/supports/activity/query/${id}`)
+}
+/* 获取人员所属组织 */
+export function getPersonalOriganization(id){
+    return getRequest(`/supports/framework/personnel/${id}`)
+}
+/* 添加成员 */
+export function addMember(params){
+    return postRequest('/supports/activity/member/create',params)
+}
+/* 上传附件 */
+export function uploadFile(params){
+    return postRequest('/supports/activity/attachment/create',params)
+}
+/* 删除附件 */
+export function deleteFile(id){
+    return getRequest(`/supports/activity/attachment/delete/${id}`)
+}

src/api/market-manage/index.js

@@ -1,4 +1,17 @@
-import { getRequest, postRequest } from '/src/lib/axios';
+import { getRequest, postRequest, request } from '/src/lib/axios';
+
+export const fetchCustomerDetail = (id) => {
+  return request({
+    url: `/supports/customer/${id}`,
+    method: 'get',
+  });
+};
+export const fetchCustomerHeaderInfo = (id) => {
+  return request({
+    url: `/supports/customer/header/${id}`,
+    method: 'get',
+  });
+};
 
 export const clientManageApi = {
   //--------------------- 客户 -----------------------

src/assets/images/page-detail-layout/customer/icon-bianjijilu-all.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.09995 3.19996C8.30754 3.19903 8.50737 3.27883 8.65721 3.42251C8.80705 3.56619 8.89518 3.76249 8.90297 3.96993C8.91076 4.17738 8.8376 4.37974 8.69895 4.53425C8.56031 4.68876 8.36703 4.78332 8.15995 4.79796L8.09995 4.79996H5.29995L7.5 4.5L14 6L16.5427 5L17.1 4.79996C16.8924 4.80089 16.6925 4.72108 16.5427 4.57741C16.3928 4.43373 16.3047 4.23743 16.2969 4.02998C16.2891 3.82253 16.3623 3.62018 16.5009 3.46567C16.6396 3.31116 16.8329 3.2166 17.04 3.20196L17.1 3.19996H19.7C20.1104 3.19996 20.5052 3.35773 20.8027 3.64065C21.1001 3.92356 21.2774 4.30998 21.298 4.71996L21.3 4.79996V20.8C21.3 21.2105 21.1422 21.6052 20.8593 21.9027C20.5763 22.2001 20.1899 22.3774 19.78 22.398L19.7 22.4H5.29995C4.88945 22.4 4.49466 22.2422 4.19723 21.9593C3.89979 21.6764 3.72248 21.2899 3.70195 20.88L3.69995 20.8V4.79996C3.69995 4.38946 3.85772 3.99467 4.14064 3.69723C4.42356 3.3998 4.80997 3.22248 5.21995 3.20196L5.29995 3.19996H8.09995Z" fill="#4773F7"/>
+<path d="M15.3 1.59998H9.70005C8.37805 1.59998 7.30005 2.67798 7.30005 3.99998C7.30005 5.32198 8.37805 6.39998 9.70005 6.39998H15.3C16.622 6.39998 17.7 5.32198 17.7 3.99998C17.7 2.67798 16.622 1.59998 15.3 1.59998ZM9.70005 3.19998H15.3C15.738 3.19998 16.1 3.56198 16.1 3.99998C16.1 4.43798 15.738 4.79998 15.3 4.79998H9.70005C9.26205 4.79998 8.90005 4.43798 8.90005 3.99998C8.90005 3.56198 9.26205 3.19998 9.70005 3.19998Z" fill="#4773F7"/>
+<path d="M12.1436 8.40002C14.5976 8.40002 16.5868 10.3892 16.5868 12.8432C16.5868 13.7812 16.2959 14.6512 15.7999 15.3684L17.4656 17.034L16.3344 18.1656L14.6688 16.4996C13.927 17.0133 13.0458 17.2879 12.1436 17.2864C9.68955 17.2864 7.69995 15.2972 7.69995 12.8432C7.69995 10.3892 9.68955 8.40002 12.1436 8.40002ZM12.1436 10C11.7702 10 11.4004 10.0735 11.0554 10.2164C10.7104 10.3593 10.397 10.5687 10.1329 10.8327C9.86885 11.0967 9.65939 11.4102 9.51647 11.7551C9.37355 12.1001 9.29998 12.4698 9.29995 12.8432C9.29992 13.2166 9.37345 13.5864 9.51632 13.9314C9.65919 14.2763 9.86861 14.5898 10.1326 14.8539C10.3966 15.1179 10.7101 15.3274 11.055 15.4703C11.4 15.6132 11.7697 15.6868 12.1432 15.6868C12.5166 15.6869 12.8863 15.6133 13.2313 15.4705C13.5763 15.3276 13.8897 15.1182 14.1538 14.8542C14.4178 14.5901 14.6273 14.2767 14.7702 13.9317C14.9132 13.5868 14.9867 13.217 14.9868 12.8436C14.9868 12.4702 14.9133 12.1005 14.7704 11.7555C14.6275 11.4105 14.4181 11.097 14.1541 10.833C13.8901 10.5689 13.5766 10.3595 13.2317 10.2165C12.8867 10.0736 12.517 10.0001 12.1436 10Z" fill="white"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-bianjijilu.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.09995 3.19996C8.30754 3.19903 8.50737 3.27883 8.65721 3.42251C8.80705 3.56619 8.89518 3.76249 8.90297 3.96993C8.91076 4.17738 8.8376 4.37974 8.69895 4.53425C8.56031 4.68876 8.36703 4.78332 8.15995 4.79796L8.09995 4.79996H5.29995V20.8H19.7V4.79996H17.1C16.8924 4.80089 16.6925 4.72108 16.5427 4.57741C16.3928 4.43373 16.3047 4.23743 16.2969 4.02998C16.2891 3.82253 16.3623 3.62018 16.5009 3.46567C16.6396 3.31116 16.8329 3.2166 17.04 3.20196L17.1 3.19996H19.7C20.1104 3.19996 20.5052 3.35773 20.8027 3.64065C21.1001 3.92356 21.2774 4.30998 21.298 4.71996L21.3 4.79996V20.8C21.3 21.2105 21.1422 21.6052 20.8593 21.9027C20.5763 22.2001 20.1899 22.3774 19.78 22.398L19.7 22.4H5.29995C4.88945 22.4 4.49466 22.2422 4.19723 21.9593C3.89979 21.6764 3.72248 21.2899 3.70195 20.88L3.69995 20.8V4.79996C3.69995 4.38946 3.85772 3.99467 4.14064 3.69723C4.42356 3.3998 4.80997 3.22248 5.21995 3.20196L5.29995 3.19996H8.09995Z" fill="#4773F7"/>
+<path d="M15.3 1.59998H9.70005C8.37805 1.59998 7.30005 2.67798 7.30005 3.99998C7.30005 5.32198 8.37805 6.39998 9.70005 6.39998H15.3C16.622 6.39998 17.7 5.32198 17.7 3.99998C17.7 2.67798 16.622 1.59998 15.3 1.59998ZM9.70005 3.19998H15.3C15.738 3.19998 16.1 3.56198 16.1 3.99998C16.1 4.43798 15.738 4.79998 15.3 4.79998H9.70005C9.26205 4.79998 8.90005 4.43798 8.90005 3.99998C8.90005 3.56198 9.26205 3.19998 9.70005 3.19998Z" fill="#4773F7"/>
+<path d="M12.1436 8.40002C14.5976 8.40002 16.5868 10.3892 16.5868 12.8432C16.5868 13.7812 16.2959 14.6512 15.7999 15.3684L17.4656 17.034L16.3344 18.1656L14.6688 16.4996C13.927 17.0133 13.0458 17.2879 12.1436 17.2864C9.68955 17.2864 7.69995 15.2972 7.69995 12.8432C7.69995 10.3892 9.68955 8.40002 12.1436 8.40002ZM12.1436 10C11.7702 10 11.4004 10.0735 11.0554 10.2164C10.7104 10.3593 10.397 10.5687 10.1329 10.8327C9.86885 11.0967 9.65939 11.4102 9.51647 11.7551C9.37355 12.1001 9.29998 12.4698 9.29995 12.8432C9.29992 13.2166 9.37345 13.5864 9.51632 13.9314C9.65919 14.2763 9.86861 14.5898 10.1326 14.8539C10.3966 15.1179 10.7101 15.3274 11.055 15.4703C11.4 15.6132 11.7697 15.6868 12.1432 15.6868C12.5166 15.6869 12.8863 15.6133 13.2313 15.4705C13.5763 15.3276 13.8897 15.1182 14.1538 14.8542C14.4178 14.5901 14.6273 14.2767 14.7702 13.9317C14.9132 13.5868 14.9867 13.217 14.9868 12.8436C14.9868 12.4702 14.9133 12.1005 14.7704 11.7555C14.6275 11.4105 14.4181 11.097 14.1541 10.833C13.8901 10.5689 13.5766 10.3595 13.2317 10.2165C12.8867 10.0736 12.517 10.0001 12.1436 10Z" fill="#4773F7"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-biaoqianguanli.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.22707 1H0.781601C0.57499 0.999586 0.376656 1.08124 0.230122 1.22704C0.0835876 1.37285 0.000825882 1.57089 0 1.77771V7.21227C0 7.58394 0.184089 7.76197 0.457104 8.02667L0.590491 8.15707L4.65685 12.2127L11.1998 5.66389L7.14518 1.61764C7.07264 1.5419 7.01101 1.47318 6.95485 1.41228C6.69744 1.12806 6.58121 1 6.22785 1H6.22707ZM4.07182 6.96709C3.82316 6.96789 3.57682 6.9193 3.34705 6.82414C3.11729 6.72897 2.90866 6.58913 2.73326 6.4127C2.37878 6.05674 2.17972 5.57463 2.17972 5.07202C2.17972 4.5694 2.37878 4.08729 2.73326 3.73134C3.44778 3.01532 4.69585 3.01532 5.41037 3.73134C5.76462 4.08726 5.96353 4.56921 5.96353 5.07163C5.96353 5.57405 5.76462 6.05599 5.41037 6.41192C5.23503 6.58849 5.02644 6.72848 4.79667 6.82378C4.5669 6.91907 4.32053 6.96778 4.07182 6.96709ZM12.5064 6.96865L11.7747 6.23779L5.23174 12.7874L5.95406 13.5081C6.28323 13.836 6.7146 14 7.14518 14C7.57654 14 8.00791 13.836 8.33708 13.5081L12.5064 9.34627C12.6628 9.19042 12.787 9.00517 12.8717 8.80116C12.9564 8.59714 13 8.37839 13 8.15746C13 7.93653 12.9564 7.71777 12.8717 7.51376C12.787 7.30975 12.6628 7.1245 12.5064 6.96865Z" fill="#999999"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-cengyongming.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4685 1H2.533C2.39196 1 2.25685 1.06052 2.15589 1.16721C2.05642 1.27391 2 1.41883 2 1.57172V13.436C2.00148 13.6478 2.11135 13.8421 2.28654 13.9393C2.46619 14.0364 2.67998 14.0157 2.84033 13.8867L7.49628 10.278L12.1522 13.8883C12.2428 13.9584 12.3527 13.9966 12.4655 13.9966C12.7595 13.9966 12.9985 13.7402 13 13.4249V1.57012C13.0015 1.2548 12.7639 1 12.4685 1ZM9.81239 7.49113H5.19058C5.06883 7.49113 4.95154 7.43857 4.86543 7.34621C4.77932 7.25384 4.73033 7.12803 4.73033 6.99744C4.73181 6.72672 4.9367 6.50695 5.18909 6.50695H9.8109C10.0544 6.52287 10.2429 6.73786 10.2429 6.99904C10.2444 7.26021 10.0544 7.4752 9.81239 7.49113ZM9.81239 4.33156H5.19058C4.93818 4.33156 4.73181 4.11179 4.73181 3.84106C4.73181 3.71047 4.78081 3.58467 4.86692 3.4923C4.95303 3.39993 5.07032 3.34738 5.19206 3.34738H9.81387C10.0574 3.3633 10.2459 3.5783 10.2459 3.83947C10.2459 4.10064 10.0544 4.31723 9.81239 4.33156Z" fill="#999999"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-genjinqingkuang-all.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.05552 5.01456C5.05526 4.95422 5.06696 4.89443 5.08993 4.83864C5.1129 4.78285 5.1467 4.73216 5.18936 4.6895C5.23202 4.64683 5.28271 4.61304 5.3385 4.59007C5.3943 4.56709 5.45408 4.5554 5.51442 4.55565H19.3325C19.5874 4.55565 19.7404 4.75961 19.7404 5.01456V7.86994C19.7404 8.12489 19.5364 8.32885 19.3325 8.32885H5.51442C5.45408 8.3291 5.3943 8.3174 5.3385 8.29443C5.28271 8.27146 5.23202 8.23767 5.18936 8.195C5.1467 8.15234 5.1129 8.10165 5.08993 8.04586C5.06696 7.99006 5.05526 7.93028 5.05552 7.86994V5.01456ZM3.88278 21.484C3.88278 21.8919 3.57685 22.1979 3.16893 22.1979C2.76101 22.1979 2.45508 21.8919 2.45508 21.484V2.5161C2.45508 2.10818 2.76101 1.80225 3.16893 1.80225C3.57685 1.80225 3.88278 2.10818 3.88278 2.5161V21.484Z" fill="#4773F7"/>
+<path d="M5.5 11C5.5 10.4477 5.94772 10 6.5 10H21.5C22.0523 10 22.5 10.4477 22.5 11V13C22.5 13.5523 22.0523 14 21.5 14H6.5C5.94772 14 5.5 13.5523 5.5 13V11Z" fill="#4773F7"/>
+<path d="M5.5 17C5.5 16.4477 5.94772 16 6.5 16H15.5C16.0523 16 16.5 16.4477 16.5 17V19C16.5 19.5523 16.0523 20 15.5 20H6.5C5.94772 20 5.5 19.5523 5.5 19V17Z" fill="#4773F7"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-genjinqingkuang.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.05552 5.01456C5.05526 4.95422 5.06696 4.89443 5.08993 4.83864C5.1129 4.78285 5.1467 4.73216 5.18936 4.6895C5.23202 4.64683 5.28271 4.61304 5.3385 4.59007C5.3943 4.56709 5.45408 4.5554 5.51442 4.55565H19.3325C19.5874 4.55565 19.7404 4.75961 19.7404 5.01456V7.86994C19.7404 8.12489 19.5364 8.32885 19.3325 8.32885H5.51442C5.45408 8.3291 5.3943 8.3174 5.3385 8.29443C5.28271 8.27146 5.23202 8.23767 5.18936 8.195C5.1467 8.15234 5.1129 8.10165 5.08993 8.04586C5.06696 7.99006 5.05526 7.93028 5.05552 7.86994V5.01456ZM3.88278 21.484C3.88278 21.8919 3.57685 22.1979 3.16893 22.1979C2.76101 22.1979 2.45508 21.8919 2.45508 21.484V2.5161C2.45508 2.10818 2.76101 1.80225 3.16893 1.80225C3.57685 1.80225 3.88278 2.10818 3.88278 2.5161V21.484Z" fill="#4773F7"/>
+<path d="M5.5 11C5.5 10.4477 5.94772 10 6.5 10H21.5C22.0523 10 22.5 10.4477 22.5 11V13C22.5 13.5523 22.0523 14 21.5 14H6.5C5.94772 14 5.5 13.5523 5.5 13V11Z" stroke="#4773F7"/>
+<path d="M5.5 17C5.5 16.4477 5.94772 16 6.5 16H15.5C16.0523 16 16.5 16.4477 16.5 17V19C16.5 19.5523 16.0523 20 15.5 20H6.5C5.94772 20 5.5 19.5523 5.5 19V17Z" stroke="#4773F7"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-hetongguanli-all.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.2273 3C18.0953 3 18.9277 3.31607 19.5414 3.87868C20.1552 4.44129 20.5 5.20435 20.5 6V18C20.5 18.7956 20.1552 19.5587 19.5414 20.1213C18.9277 20.6839 18.0953 21 17.2273 21H6.77273C5.90475 21 5.07231 20.6839 4.45856 20.1213C3.8448 19.5587 3.5 18.7956 3.5 18V6C3.5 5.20435 3.8448 4.44129 4.45856 3.87868C5.07231 3.31607 5.90475 3 6.77273 3H17.2273Z" fill="#4773F7"/>
+<path d="M16.5 11C15.1739 11 13.9021 11.5268 12.9645 12.4645C12.0268 13.4021 11.5 14.6739 11.5 16C11.5 17.3261 12.0268 18.5979 12.9645 19.5355C13.9021 20.4732 15.1739 21 16.5 21C17.8261 21 19.0979 20.4732 20.0355 19.5355C20.9732 18.5979 21.5 17.3261 21.5 16C21.5 14.6739 20.9732 13.4021 20.0355 12.4645C19.0979 11.5268 17.8261 11 16.5 11ZM16.5 19.7475C15.5059 19.7475 14.5526 19.3526 13.8497 18.6497C13.1468 17.9468 12.7519 16.9934 12.7519 15.9994C12.7519 15.0053 13.1468 14.052 13.8497 13.3491C14.5526 12.6461 15.5059 12.2513 16.5 12.2513C17.4941 12.2513 18.4474 12.6461 19.1503 13.3491C19.8532 14.052 20.2481 15.0053 20.2481 15.9994C20.2481 16.9934 19.8532 17.9468 19.1503 18.6497C18.4474 19.3526 17.4941 19.7475 16.5 19.7475Z" fill="white"/>
+<path d="M17.2499 14.9788L16.4444 13.5L15.639 14.9788L14 15.2976L15.1416 16.5294L14.9338 18.2059L16.4444 17.4894L17.9551 18.2059L17.7473 16.5294L18.8889 15.2976L17.2499 14.9788ZM16.0556 8.58824C16.0556 8.43223 15.9912 8.28261 15.8766 8.17229C15.762 8.06197 15.6065 8 15.4444 8H8.11111C7.94903 8 7.7936 8.06197 7.67899 8.17229C7.56438 8.28261 7.5 8.43223 7.5 8.58824C7.5 8.74425 7.56438 8.89386 7.67899 9.00418C7.7936 9.1145 7.94903 9.17647 8.11111 9.17647H15.4444C15.6065 9.17647 15.762 9.1145 15.8766 9.00418C15.9912 8.89386 16.0556 8.74425 16.0556 8.58824ZM11.7778 11.5294C11.7778 11.3734 11.7134 11.2238 11.5988 11.1135C11.4842 11.0032 11.3287 10.9412 11.1667 10.9412H8.11111C7.94903 10.9412 7.7936 11.0032 7.67899 11.1135C7.56438 11.2238 7.5 11.3734 7.5 11.5294C7.5 11.6854 7.56438 11.835 7.67899 11.9454C7.7936 12.0557 7.94903 12.1176 8.11111 12.1176H11.1667C11.3287 12.1176 11.4842 12.0557 11.5988 11.9454C11.7134 11.835 11.7778 11.6854 11.7778 11.5294ZM8.11111 13.8824C7.94903 13.8824 7.7936 13.9443 7.67899 14.0546C7.56438 14.165 7.5 14.3146 7.5 14.4706C7.5 14.6266 7.56438 14.7762 7.67899 14.8865C7.7936 14.9968 7.94903 15.0588 8.11111 15.0588H9.33333C9.49541 15.0588 9.65085 14.9968 9.76545 14.8865C9.88006 14.7762 9.94444 14.6266 9.94444 14.4706C9.94444 14.3146 9.88006 14.165 9.76545 14.0546C9.65085 13.9443 9.49541 13.8824 9.33333 13.8824H8.11111Z" fill="white"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-hetongguanli.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3749 19.7143H6.11538C5.76856 19.7143 5.43595 19.5788 5.19071 19.3377C4.94547 19.0966 4.80769 18.7696 4.80769 18.4286V5.57143C4.80769 5.23044 4.94547 4.90341 5.19071 4.66229C5.43595 4.42117 5.76856 4.28571 6.11538 4.28571H17.8846C18.2314 4.28571 18.5641 4.42117 18.8093 4.66229C19.0545 4.90341 19.1923 5.23044 19.1923 5.57143V9.97114C19.6631 10.1743 20.0933 10.4417 20.5 10.7439V5.57143C20.5 4.88944 20.2245 4.23539 19.734 3.75315C19.2435 3.27092 18.5783 3 17.8846 3H6.11538C5.42174 3 4.75651 3.27092 4.26603 3.75315C3.77555 4.23539 3.5 4.88944 3.5 5.57143V18.4286C3.5 19.1106 3.77555 19.7646 4.26603 20.2468C4.75651 20.7291 5.42174 21 6.11538 21H12.6892C12.1916 20.6345 11.7492 20.2016 11.3749 19.7143Z" fill="#4773F7"/>
+<path d="M16.5 11C15.1739 11 13.9021 11.5268 12.9645 12.4645C12.0268 13.4021 11.5 14.6739 11.5 16C11.5 17.3261 12.0268 18.5979 12.9645 19.5355C13.9021 20.4732 15.1739 21 16.5 21C17.8261 21 19.0979 20.4732 20.0355 19.5355C20.9732 18.5979 21.5 17.3261 21.5 16C21.5 14.6739 20.9732 13.4021 20.0355 12.4645C19.0979 11.5268 17.8261 11 16.5 11ZM16.5 19.7475C15.5059 19.7475 14.5526 19.3526 13.8497 18.6497C13.1468 17.9468 12.7519 16.9934 12.7519 15.9994C12.7519 15.0053 13.1468 14.052 13.8497 13.3491C14.5526 12.6461 15.5059 12.2513 16.5 12.2513C17.4941 12.2513 18.4474 12.6461 19.1503 13.3491C19.8532 14.052 20.2481 15.0053 20.2481 15.9994C20.2481 16.9934 19.8532 17.9468 19.1503 18.6497C18.4474 19.3526 17.4941 19.7475 16.5 19.7475Z" fill="#4773F7"/>
+<path d="M17.2499 14.9788L16.4444 13.5L15.639 14.9788L14 15.2976L15.1416 16.5294L14.9338 18.2059L16.4444 17.4894L17.9551 18.2059L17.7473 16.5294L18.8889 15.2976L17.2499 14.9788ZM16.0556 8.58824C16.0556 8.43223 15.9912 8.28261 15.8766 8.17229C15.762 8.06197 15.6065 8 15.4444 8H8.11111C7.94903 8 7.7936 8.06197 7.67899 8.17229C7.56438 8.28261 7.5 8.43223 7.5 8.58824C7.5 8.74425 7.56438 8.89386 7.67899 9.00418C7.7936 9.1145 7.94903 9.17647 8.11111 9.17647H15.4444C15.6065 9.17647 15.762 9.1145 15.8766 9.00418C15.9912 8.89386 16.0556 8.74425 16.0556 8.58824ZM11.7778 11.5294C11.7778 11.3734 11.7134 11.2238 11.5988 11.1135C11.4842 11.0032 11.3287 10.9412 11.1667 10.9412H8.11111C7.94903 10.9412 7.7936 11.0032 7.67899 11.1135C7.56438 11.2238 7.5 11.3734 7.5 11.5294C7.5 11.6854 7.56438 11.835 7.67899 11.9454C7.7936 12.0557 7.94903 12.1176 8.11111 12.1176H11.1667C11.3287 12.1176 11.4842 12.0557 11.5988 11.9454C11.7134 11.835 11.7778 11.6854 11.7778 11.5294ZM8.11111 13.8824C7.94903 13.8824 7.7936 13.9443 7.67899 14.0546C7.56438 14.165 7.5 14.3146 7.5 14.4706C7.5 14.6266 7.56438 14.7762 7.67899 14.8865C7.7936 14.9968 7.94903 15.0588 8.11111 15.0588H9.33333C9.49541 15.0588 9.65085 14.9968 9.76545 14.8865C9.88006 14.7762 9.94444 14.6266 9.94444 14.4706C9.94444 14.3146 9.88006 14.165 9.76545 14.0546C9.65085 13.9443 9.49541 13.8824 9.33333 13.8824H8.11111Z" fill="#4773F7"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-hezuoxiangmu-all.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 19.5L19.1125 18.6187C19.2287 18.5016 19.3669 18.4087 19.5193 18.3454C19.6716 18.2821 19.835 18.2497 20 18.25C20.3315 18.25 20.6495 18.1183 20.8839 17.8839C21.1183 17.6495 21.25 17.3315 21.25 17V4.5C21.25 4.16848 21.1183 3.85054 20.8839 3.61612C20.6495 3.3817 20.3315 3.25 20 3.25H7.5C7.16848 3.25 6.85054 3.3817 6.61612 3.61612C6.3817 3.85054 6.25 4.16848 6.25 4.5V4.60625C6.25 4.95 6.1125 5.26125 5.8875 5.4875L5 4.60625V4.5C5 3.83696 5.26339 3.20107 5.73223 2.73223C6.20107 2.26339 6.83696 2 7.5 2H20C20.663 2 21.2989 2.26339 21.7678 2.73223C22.2366 3.20107 22.5 3.83696 22.5 4.5V17C22.5 17.663 22.2366 18.2989 21.7678 18.7678C21.2989 19.2366 20.663 19.5 20 19.5ZM17.5 4.5C18.163 4.5 18.7989 4.76339 19.2678 5.23223C19.7366 5.70107 20 6.33696 20 7V19.5C20 20.163 19.7366 20.7989 19.2678 21.2678C18.7989 21.7366 18.163 22 17.5 22H5C4.33696 22 3.70107 21.7366 3.23223 21.2678C2.76339 20.7989 2.5 20.163 2.5 19.5V7C2.5 6.33696 2.76339 5.70107 3.23223 5.23223C3.70107 4.76339 4.33696 4.5 5 4.5H17.5Z" fill="#4773F7"/>
+<path d="M5.62503 7H13.125C13.2908 7 13.4498 7.06585 13.567 7.18306C13.6842 7.30027 13.75 7.45924 13.75 7.625C13.75 7.79076 13.6842 7.94973 13.567 8.06694C13.4498 8.18415 13.2908 8.25 13.125 8.25H5.62503C5.45927 8.25 5.3003 8.18415 5.18309 8.06694C5.06588 7.94973 5.00003 7.79076 5.00003 7.625C5.00003 7.45924 5.06588 7.30027 5.18309 7.18306C5.3003 7.06585 5.45927 7 5.62503 7ZM16.875 8.25C16.7093 8.25 16.5503 8.18415 16.4331 8.06694C16.3159 7.94973 16.25 7.79076 16.25 7.625C16.25 7.45924 16.3159 7.30027 16.4331 7.18306C16.5503 7.06585 16.7093 7 16.875 7C17.0408 7 17.1998 7.06585 17.317 7.18306C17.4342 7.30027 17.5 7.45924 17.5 7.625C17.5 7.79076 17.4342 7.94973 17.317 8.06694C17.1998 8.18415 17.0408 8.25 16.875 8.25ZM2.5 9.5H20V10.75H2.5V9.5Z" fill="white"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-hezuoxiangmu.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 2C20.663 2 21.2987 2.26358 21.7676 2.73242C22.2364 3.20126 22.5 3.83696 22.5 4.5V17C22.5 17.663 22.2364 18.2987 21.7676 18.7676C21.2987 19.2364 20.663 19.5 20 19.5C20 20.163 19.7364 20.7987 19.2676 21.2676C18.7987 21.7364 18.163 22 17.5 22H5C4.33696 22 3.70126 21.7364 3.23242 21.2676C2.76358 20.7987 2.5 20.163 2.5 19.5V7C2.5 6.33696 2.76358 5.70126 3.23242 5.23242C3.70126 4.76358 4.33696 4.5 5 4.5C5 3.83696 5.26358 3.20126 5.73242 2.73242C6.20126 2.26358 6.83696 2 7.5 2H20ZM3.75 10.75V19.5C3.75 19.8315 3.88179 20.1494 4.11621 20.3838C4.35063 20.6182 4.66848 20.75 5 20.75H17.5C17.8315 20.75 18.1494 20.6182 18.3838 20.3838C18.6182 20.1494 18.75 19.8315 18.75 19.5V10.75H3.75ZM7.5 3.25C7.16848 3.25 6.85063 3.38179 6.61621 3.61621C6.38179 3.85063 6.25 4.16848 6.25 4.5H17.5C18.163 4.5 18.7987 4.76358 19.2676 5.23242C19.7364 5.70126 20 6.33696 20 7V18.25C20.3315 18.25 20.6494 18.1182 20.8838 17.8838C21.1182 17.6494 21.25 17.3315 21.25 17V4.5C21.25 4.16848 21.1182 3.85063 20.8838 3.61621C20.6494 3.38179 20.3315 3.25 20 3.25H7.5ZM5 5.75C4.66848 5.75 4.35063 5.88179 4.11621 6.11621C3.88179 6.35063 3.75 6.66848 3.75 7V9.5H18.75V7C18.75 6.66848 18.6182 6.35063 18.3838 6.11621C18.1494 5.88179 17.8315 5.75 17.5 5.75H5ZM13.125 7C13.2908 7 13.4502 7.06541 13.5674 7.18262C13.6846 7.29983 13.75 7.45924 13.75 7.625C13.75 7.79076 13.6846 7.95017 13.5674 8.06738C13.4502 8.18459 13.2908 8.25 13.125 8.25H5.625C5.45924 8.25 5.29983 8.18459 5.18262 8.06738C5.06541 7.95017 5 7.79076 5 7.625C5 7.45924 5.06541 7.29983 5.18262 7.18262C5.29983 7.06541 5.45924 7 5.625 7H13.125ZM16.875 7C17.0408 7 17.2002 7.06541 17.3174 7.18262C17.4346 7.29983 17.5 7.45924 17.5 7.625C17.5 7.79076 17.4346 7.95017 17.3174 8.06738C17.2002 8.18459 17.0408 8.25 16.875 8.25C16.7092 8.25 16.5498 8.18459 16.4326 8.06738C16.3154 7.95017 16.25 7.79076 16.25 7.625C16.25 7.45924 16.3154 7.29983 16.4326 7.18262C16.5498 7.06541 16.7092 7 16.875 7Z" fill="#4773F7"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-jibenxinxi-all.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.493 1.50464C6.725 1.50464 2.04688 6.18276 2.04688 11.9507C2.04688 17.7187 6.72266 22.3968 12.493 22.3968C18.2633 22.3968 22.9391 17.7187 22.9391 11.9507C22.9391 6.18276 18.2633 1.50464 12.493 1.50464ZM12.8469 8.69292H16.3508C16.7188 8.69292 17.0188 8.99292 17.0188 9.36089C17.0188 9.72886 16.7188 10.0289 16.3508 10.0289H12.8469C12.4789 10.0289 12.1789 9.72886 12.1789 9.36089C12.1789 8.99292 12.4789 8.69292 12.8469 8.69292ZM6.67578 8.71636C7.11875 8.28276 7.65313 8.06714 8.27656 8.06714C8.90703 8.06714 9.44141 8.28276 9.88203 8.71636C10.3227 9.14995 10.543 9.67261 10.543 10.2867C10.543 10.9007 10.3227 11.4234 9.88203 11.857C9.44141 12.2906 8.90703 12.5062 8.28125 12.5062C7.65547 12.5062 7.11875 12.2906 6.67578 11.857C6.23281 11.4234 6.01016 10.9007 6.01016 10.2867C6.01016 9.67261 6.23281 9.14995 6.67578 8.71636ZM4.64844 15.4781C4.64844 14.8476 4.78906 13.9125 5.07031 13.4414C5.35156 12.9703 5.73828 12.5929 6.22813 12.3164C6.50234 12.5953 6.81172 12.8085 7.16094 12.9609C7.50781 13.1132 7.87578 13.1882 8.2625 13.1882C8.64922 13.1882 9.01719 13.1109 9.36875 12.9562C9.71797 12.8015 10.0297 12.5882 10.3039 12.314C10.8008 12.5859 11.1898 12.9609 11.4758 13.4343C11.7617 13.9101 11.9047 14.8453 11.9047 15.4757C9.56797 15.9679 7.14219 15.9375 4.64844 15.4781ZM12.8469 11.3671H19.5523C19.9203 11.3671 20.2203 11.6671 20.2203 12.0351C20.2203 12.4031 19.9203 12.7031 19.5523 12.7031H12.8469C12.4789 12.7031 12.1789 12.4031 12.1789 12.0351C12.1789 11.6671 12.4789 11.3671 12.8469 11.3671ZM19.6695 15.2085H12.9875C12.6195 15.2085 12.3195 14.9085 12.3195 14.5406C12.3195 14.1726 12.6195 13.8726 12.9875 13.8726H19.6695C20.0375 13.8726 20.3375 14.1726 20.3375 14.5406C20.3375 14.9085 20.0375 15.2085 19.6695 15.2085Z" fill="#4773F7"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-jibenxinxi.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4932 2.00464C17.9872 2.00474 22.4395 6.45909 22.4395 11.9509C22.4393 17.4427 17.9871 21.8971 12.4932 21.8972C6.99913 21.8972 2.54698 17.4427 2.54688 11.9509C2.54688 6.4591 7.00134 2.00464 12.4932 2.00464Z" stroke="#4773F7"/>
+<path d="M10.3555 12.9363C10.6369 13.1401 10.8657 13.3916 11.0469 13.6912V13.6921C11.1445 13.8546 11.2389 14.1386 11.3066 14.491C11.3436 14.6833 11.3677 14.8816 11.3838 15.0681C9.38222 15.4334 7.30697 15.413 5.16797 15.0613C5.18387 14.8771 5.20929 14.6822 5.24512 14.4929C5.31187 14.1403 5.40465 13.8578 5.5 13.698C5.67666 13.4021 5.90152 13.1501 6.17773 12.9441C6.41672 13.1368 6.67722 13.2942 6.95996 13.4177V13.4187C7.37266 13.5999 7.80954 13.6882 8.2627 13.6882C8.71841 13.6882 9.1551 13.5965 9.57031 13.4138H9.57129C9.85399 13.2886 10.1151 13.1285 10.3555 12.9363ZM8.27637 8.56714C8.77894 8.56714 9.18649 8.73374 9.53125 9.073C9.87723 9.4135 10.043 9.80814 10.043 10.2869C10.0429 10.7655 9.87725 11.1603 9.53125 11.5007C9.18613 11.8403 8.77853 12.0066 8.28125 12.0066C7.78359 12.0066 7.37305 11.8401 7.02539 11.4998C6.67685 11.1586 6.50981 10.764 6.50977 10.2869C6.50977 9.80976 6.67694 9.41515 7.02539 9.07397C7.37359 8.73315 7.78197 8.56718 8.27637 8.56714Z" stroke="#4773F7"/>
+<path d="M12.8469 8.69299H16.3508C16.7188 8.69299 17.0188 8.99299 17.0188 9.36096C17.0188 9.72893 16.7188 10.0289 16.3508 10.0289H12.8469C12.479 10.0289 12.179 9.72893 12.179 9.36096C12.179 8.99299 12.479 8.69299 12.8469 8.69299ZM12.8469 11.3672H19.5524C19.9204 11.3672 20.2204 11.6672 20.2204 12.0352C20.2204 12.4031 19.9204 12.7031 19.5524 12.7031H12.8469C12.479 12.7031 12.179 12.4031 12.179 12.0352C12.179 11.6672 12.479 11.3672 12.8469 11.3672ZM19.6696 15.2086H12.9875C12.6196 15.2086 12.3196 14.9086 12.3196 14.5407C12.3196 14.1727 12.6196 13.8727 12.9875 13.8727H19.6696C20.0375 13.8727 20.3376 14.1727 20.3376 14.5407C20.3376 14.9086 20.0375 15.2086 19.6696 15.2086Z" fill="#4773F7"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-kehujuecelian-all.svg

@@ -0,0 +1,7 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4911 4.20536C10.3801 4.20536 10.2902 4.2953 10.2902 4.40625V8.42411C10.2902 8.53506 10.3801 8.625 10.4911 8.625H14.5089C14.6199 8.625 14.7098 8.53506 14.7098 8.42411V4.40625C14.7098 4.2953 14.6199 4.20536 14.5089 4.20536H10.4911ZM14.5089 3C15.2856 3 15.9152 3.6296 15.9152 4.40625V8.42411C15.9152 9.20076 15.2856 9.83036 14.5089 9.83036H13.1027V11.8192H18.5268C19.0815 11.8192 19.5312 12.2689 19.5312 12.8237V15.7768H20.4955C21.0503 15.7768 21.5 16.2265 21.5 16.7812V19.9955C21.5 20.5503 21.0503 21 20.4955 21H17.2812C16.7265 21 16.2768 20.5503 16.2768 19.9955V16.7812C16.2768 16.2265 16.7265 15.7768 17.2812 15.7768H18.3259V13.0246H13.1027V15.7768H14.1071C14.6619 15.7768 15.1116 16.2265 15.1116 16.7812V19.9955C15.1116 20.5503 14.6619 21 14.1071 21H10.8929C10.3381 21 9.88839 20.5503 9.88839 19.9955V16.7812C9.88839 16.2265 10.3381 15.7768 10.8929 15.7768H11.8973V13.0246H6.67411V15.7768H7.71875C8.2735 15.7768 8.72321 16.2265 8.72321 16.7812V19.9955C8.72321 20.5503 8.2735 21 7.71875 21H4.50446C3.94972 21 3.5 20.5503 3.5 19.9955V16.7812C3.5 16.2265 3.94972 15.7768 4.50446 15.7768H5.46875V12.8237C5.46875 12.2689 5.91847 11.8192 6.47321 11.8192H11.8973V9.83036H10.4911C9.71442 9.83036 9.08482 9.20076 9.08482 8.42411V4.40625C9.08482 3.6296 9.71442 3 10.4911 3H14.5089ZM7.51786 16.9821H4.70536V19.7946H7.51786V16.9821ZM13.9062 16.9821H11.0938V19.7946H13.9062V16.9821ZM20.2946 16.9821H17.4821V19.7946H20.2946V16.9821Z" fill="#4773F7"/>
+<rect x="9.5" y="4" width="6" height="5" fill="#4773F7"/>
+<path d="M10.5 16.5H14.5V20H10.5V16.5Z" fill="#4773F7"/>
+<path d="M17 16.5H21V20H17V16.5Z" fill="#4773F7"/>
+<path d="M4 16.5H8V20H4V16.5Z" fill="#4773F7"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-kehujuecelian.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4911 4.20536C10.3801 4.20536 10.2902 4.2953 10.2902 4.40625V8.42411C10.2902 8.53506 10.3801 8.625 10.4911 8.625H14.5089C14.6199 8.625 14.7098 8.53506 14.7098 8.42411V4.40625C14.7098 4.2953 14.6199 4.20536 14.5089 4.20536H10.4911ZM14.5089 3C15.2856 3 15.9152 3.6296 15.9152 4.40625V8.42411C15.9152 9.20076 15.2856 9.83036 14.5089 9.83036H13.1027V11.8192H18.5268C19.0815 11.8192 19.5312 12.2689 19.5312 12.8237V15.7768H20.4955C21.0503 15.7768 21.5 16.2265 21.5 16.7812V19.9955C21.5 20.5503 21.0503 21 20.4955 21H17.2812C16.7265 21 16.2768 20.5503 16.2768 19.9955V16.7812C16.2768 16.2265 16.7265 15.7768 17.2812 15.7768H18.3259V13.0246H13.1027V15.7768H14.1071C14.6619 15.7768 15.1116 16.2265 15.1116 16.7812V19.9955C15.1116 20.5503 14.6619 21 14.1071 21H10.8929C10.3381 21 9.88839 20.5503 9.88839 19.9955V16.7812C9.88839 16.2265 10.3381 15.7768 10.8929 15.7768H11.8973V13.0246H6.67411V15.7768H7.71875C8.2735 15.7768 8.72321 16.2265 8.72321 16.7812V19.9955C8.72321 20.5503 8.2735 21 7.71875 21H4.50446C3.94972 21 3.5 20.5503 3.5 19.9955V16.7812C3.5 16.2265 3.94972 15.7768 4.50446 15.7768H5.46875V12.8237C5.46875 12.2689 5.91847 11.8192 6.47321 11.8192H11.8973V9.83036H10.4911C9.71442 9.83036 9.08482 9.20076 9.08482 8.42411V4.40625C9.08482 3.6296 9.71442 3 10.4911 3H14.5089ZM7.51786 16.9821H4.70536V19.7946H7.51786V16.9821ZM13.9062 16.9821H11.0938V19.7946H13.9062V16.9821ZM20.2946 16.9821H17.4821V19.7946H20.2946V16.9821Z" fill="#4773F7"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-kehupingjia-all.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9127 19.7294H6.86888C4.60789 19.7244 2.77618 17.8927 2.77124 15.6317V2.6917C2.77124 2.30954 3.08103 1.99976 3.46317 1.99976H15.7832C18.0302 2.02434 19.8401 3.85032 19.8449 6.09742V10.896C19.845 10.988 19.8268 11.0791 19.7913 11.1639C19.7558 11.2488 19.7038 11.3257 19.6382 11.3903L11.3889 19.5317C11.2616 19.6565 11.091 19.7273 10.9127 19.7294ZM13.276 22.0029C13.2024 22.0027 13.1297 21.9865 13.0631 21.9552C12.9964 21.9239 12.9375 21.8784 12.8903 21.8218C12.8432 21.7652 12.8091 21.699 12.7903 21.6278C12.7716 21.5567 12.7687 21.4822 12.7818 21.4098L13.1592 19.1992C13.178 19.0966 13.2283 19.0024 13.303 18.9296L19.3417 12.891C19.8913 12.3626 20.76 12.3626 21.3096 12.891L21.8219 13.4031C22.3646 13.9469 22.3646 14.8274 21.8219 15.3711L15.7742 21.4098C15.7051 21.4781 15.6177 21.5249 15.5226 21.5446L13.3749 21.9939L13.276 22.0029ZM14.1297 19.5317L13.8961 20.8706L15.1721 20.601L21.1029 14.6702C21.2491 14.5202 21.2491 14.2811 21.1029 14.131L20.5907 13.6188C20.4389 13.4773 20.2034 13.4773 20.0516 13.6188L14.1297 19.5317Z" fill="#4773F7"/>
+<path d="M5.51784 6.42102H13.1118C13.1658 6.42102 13.2176 6.44247 13.2558 6.48066C13.294 6.51885 13.3155 6.57064 13.3155 6.62465V7.6176C13.3155 7.64434 13.3102 7.67082 13.3 7.69553C13.2897 7.72023 13.2747 7.74268 13.2558 7.76159C13.2369 7.7805 13.2145 7.79549 13.1897 7.80573C13.165 7.81596 13.1386 7.82123 13.1118 7.82123H5.51784C5.49109 7.82123 5.46462 7.81596 5.43991 7.80573C5.41521 7.79549 5.39276 7.7805 5.37385 7.76159C5.35494 7.74268 5.33994 7.72023 5.32971 7.69553C5.31948 7.67082 5.31421 7.64434 5.31421 7.6176V6.62467C5.31421 6.57066 5.33566 6.51887 5.37385 6.48068C5.41204 6.4425 5.46383 6.42102 5.51784 6.42102ZM5.51784 9.4215H13.1118C13.1658 9.4215 13.2176 9.44295 13.2558 9.48114C13.294 9.51933 13.3155 9.57112 13.3155 9.62512V10.6181C13.3155 10.6721 13.294 10.7239 13.2558 10.7621C13.2176 10.8003 13.1658 10.8217 13.1118 10.8217H5.51784C5.46383 10.8217 5.41204 10.8003 5.37385 10.7621C5.33566 10.7239 5.31421 10.6721 5.31421 10.6181V9.62512C5.31421 9.57112 5.33566 9.51933 5.37385 9.48114C5.41204 9.44295 5.46383 9.4215 5.51784 9.4215ZM20.6625 16.3058C20.5358 16.3054 20.4138 16.2573 20.321 16.171L18.5238 14.4636C18.4709 14.4196 18.4276 14.3651 18.3966 14.3036C18.3656 14.2421 18.3475 14.1749 18.3435 14.1062C18.3395 14.0374 18.3497 13.9686 18.3734 13.9039C18.397 13.8393 18.4337 13.7802 18.4812 13.7303C18.5286 13.6803 18.5858 13.6407 18.6492 13.6138C18.7126 13.5869 18.7808 13.5732 18.8497 13.5738C18.9185 13.5743 18.9865 13.5889 19.0495 13.6168C19.1125 13.6446 19.1691 13.6851 19.2158 13.7357L21.013 15.4431C21.0976 15.5093 21.1588 15.6008 21.1876 15.7043C21.2165 15.8078 21.2115 15.9178 21.1733 16.0182C21.1351 16.1186 21.0659 16.2042 20.9756 16.2624C20.8853 16.3206 20.7787 16.3484 20.6715 16.3417L20.6625 16.3058Z" fill="white"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-kehupingjia.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9127 19.7294H6.86888C4.60789 19.7244 2.77618 17.8927 2.77124 15.6317V2.6917C2.77124 2.30954 3.08103 1.99976 3.46317 1.99976H15.7832C18.0301 2.02434 19.8401 3.85032 19.8449 6.09742V10.896C19.845 10.988 19.8268 11.0791 19.7913 11.1639C19.7558 11.2488 19.7038 11.3257 19.6382 11.3903L11.3889 19.5317C11.2616 19.6565 11.091 19.7273 10.9127 19.7294ZM4.14614 3.37466V15.6317C4.14614 17.1206 5.3531 18.3275 6.84196 18.3275H10.6251L18.506 10.5815V6.08845C18.506 5.73442 18.4363 5.38386 18.3008 5.05679C18.1653 4.72971 17.9667 4.43252 17.7164 4.18219C17.4661 3.93186 17.1689 3.73328 16.8418 3.59781C16.5147 3.46233 16.1642 3.3926 15.8101 3.3926L4.14614 3.37466ZM13.276 22.0029C13.2024 22.0027 13.1297 21.9865 13.0631 21.9552C12.9964 21.9239 12.9375 21.8784 12.8903 21.8218C12.8432 21.7652 12.8091 21.699 12.7903 21.6278C12.7716 21.5567 12.7687 21.4822 12.7818 21.4098L13.1592 19.1992C13.178 19.0966 13.2283 19.0024 13.303 18.9296L19.3417 12.891C19.8913 12.3626 20.76 12.3626 21.3096 12.891L21.8219 13.4031C22.3645 13.9469 22.3645 14.8274 21.8219 15.3711L15.7742 21.4098C15.7051 21.4781 15.6177 21.5249 15.5226 21.5446L13.3749 21.9939L13.276 22.0029H13.276ZM14.1297 19.5317L13.8961 20.8706L15.1721 20.601L21.1029 14.6702C21.2491 14.5202 21.2491 14.2811 21.1029 14.131L20.5907 13.6188C20.4389 13.4773 20.2034 13.4773 20.0516 13.6188L14.1297 19.5317Z" fill="#4773F7"/>
+<path d="M5.51784 6.42102H13.1118C13.1658 6.42102 13.2176 6.44247 13.2558 6.48066C13.294 6.51885 13.3155 6.57064 13.3155 6.62465V7.6176C13.3155 7.64434 13.3102 7.67082 13.3 7.69553C13.2897 7.72023 13.2747 7.74268 13.2558 7.76159C13.2369 7.7805 13.2145 7.79549 13.1897 7.80573C13.165 7.81596 13.1386 7.82123 13.1118 7.82123H5.51784C5.49109 7.82123 5.46462 7.81596 5.43991 7.80573C5.41521 7.79549 5.39276 7.7805 5.37385 7.76159C5.35494 7.74268 5.33994 7.72023 5.32971 7.69553C5.31948 7.67082 5.31421 7.64434 5.31421 7.6176V6.62467C5.31421 6.57066 5.33566 6.51887 5.37385 6.48068C5.41204 6.4425 5.46383 6.42102 5.51784 6.42102ZM5.51784 9.4215H13.1118C13.1658 9.4215 13.2176 9.44295 13.2558 9.48114C13.294 9.51933 13.3155 9.57112 13.3155 9.62512V10.6181C13.3155 10.6721 13.294 10.7239 13.2558 10.7621C13.2176 10.8003 13.1658 10.8217 13.1118 10.8217H5.51784C5.46383 10.8217 5.41204 10.8003 5.37385 10.7621C5.33566 10.7239 5.31421 10.6721 5.31421 10.6181V9.62512C5.31421 9.57112 5.33566 9.51933 5.37385 9.48114C5.41204 9.44295 5.46383 9.4215 5.51784 9.4215ZM20.6625 16.3058C20.5358 16.3054 20.4138 16.2573 20.321 16.171L18.5238 14.4636C18.4709 14.4196 18.4276 14.3651 18.3966 14.3036C18.3656 14.2421 18.3475 14.1749 18.3435 14.1062C18.3395 14.0374 18.3497 13.9686 18.3734 13.9039C18.397 13.8393 18.4337 13.7802 18.4812 13.7303C18.5286 13.6803 18.5858 13.6407 18.6492 13.6138C18.7126 13.5869 18.7808 13.5732 18.8497 13.5738C18.9185 13.5743 18.9865 13.5889 19.0495 13.6168C19.1125 13.6446 19.1691 13.6851 19.2158 13.7357L21.013 15.4431C21.0976 15.5093 21.1588 15.6008 21.1876 15.7043C21.2165 15.8078 21.2115 15.9178 21.1733 16.0182C21.1351 16.1186 21.0659 16.2042 20.9756 16.2624C20.8853 16.3206 20.7787 16.3484 20.6715 16.3417L20.6625 16.3058Z" fill="#4773F7"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-tianyancha.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4422 6.33942C12.4422 6.06735 12.805 3.80058 9.45 3.98192C4.82569 4.34468 1.74279 9.4223 1.1081 11.1451C-0.977378 7.88083 0.0200121 3.61921 3.28424 1.53373C5.64175 0.08295 8.72464 0.173622 10.9915 1.7151C10.538 1.7151 7.54587 0.989724 4.55369 3.16588C9.35935 1.17107 12.0795 2.53117 12.6236 3.34725C13.621 4.79802 12.8957 6.06743 12.4422 6.33945L12.4422 6.33942ZM13.9837 7.51815C13.9837 8.69691 13.7116 9.87565 13.0769 10.9637C10.3567 11.8705 8.36193 10.057 7.99925 9.15027C10.2661 10.4197 13.1676 9.05959 13.893 6.70211C13.9837 6.97409 13.9837 7.24611 13.9837 7.51813V7.51815ZM7.90856 14.4093C7.6365 14.4093 7.27387 14.5 7.00184 14.5C4.91636 14.5 2.92155 13.5932 1.56148 11.9611C1.83353 10.9637 3.37493 7.06479 7.72722 4.88861C6.45781 6.52073 5.09769 10.4197 7.90856 14.4093ZM7.09253 7.42747C7.18321 9.96633 9.45002 12.4145 12.4423 11.8704C11.5355 12.9585 10.2661 13.7746 8.81531 14.1373C8.08993 13.5025 6.27647 10.7824 7.09253 7.42747Z" fill="#999999"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-touzijingzheng-all.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.6127 6.13783L13.3581 2.1976C12.8803 1.94108 12.1002 1.93082 11.6224 2.18734L4.35807 6.13783C3.88028 6.39435 3.5 7.02027 3.5 7.53332L3.50975 16.4707C3.50975 16.9837 3.92904 17.5891 4.40683 17.8456L11.6614 21.7859C12.1392 22.0424 12.8998 22.0834 13.3776 21.8269L20.6322 17.9072C21.11 17.6507 21.5 17.0145 21.5 16.5014V7.54358C21.4902 7.04079 21.1002 6.40461 20.6127 6.13783Z" fill="#4773F7"/>
+<path d="M15.3278 12.8279C15.7763 12.8279 16.0006 12.6022 16.0006 12.161C16.0006 11.7095 15.7763 11.4838 15.3278 11.4838H13.8944L15.3083 8.39519C15.435 8.17971 15.4935 7.99501 15.4935 7.8411C15.4935 7.68718 15.4058 7.55379 15.2303 7.44092C15.0645 7.32805 14.889 7.26648 14.7232 7.26648C14.5477 7.26648 14.3819 7.41013 14.2162 7.68718L12.4805 11.3196L10.7644 7.69744C10.6084 7.42039 10.4329 7.287 10.2379 7.287C10.0428 7.287 9.87707 7.34857 9.73081 7.46144C9.58455 7.56405 9.51629 7.69744 9.51629 7.87188C9.51629 8.04632 9.56504 8.22075 9.66255 8.39519L11.0764 11.4735H9.62355C9.40903 11.4735 9.25302 11.5248 9.14576 11.6171C9.0385 11.7095 8.98975 11.8839 8.98975 12.1405C8.98975 12.5919 9.21401 12.8177 9.66255 12.8177H11.7882V13.8951H9.62355C9.40903 13.8951 9.25302 13.9464 9.14576 14.0387C9.0385 14.1311 8.98975 14.3055 8.98975 14.5621C8.98975 15.0135 9.21401 15.2393 9.66255 15.2393H11.7882V16.9631C11.7882 17.271 11.837 17.4864 11.9345 17.6096C12.032 17.7327 12.2173 17.7943 12.4903 17.7943C12.7731 17.7943 12.9486 17.7327 13.0461 17.6096C13.1338 17.4864 13.1826 17.271 13.1826 16.9631V15.2393H15.3375C15.7861 15.2393 16.0103 15.0135 16.0103 14.5723C16.0103 14.1208 15.7861 13.8951 15.3375 13.8951H13.1826V12.8177L15.3278 12.8279Z" fill="white"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-yingxiaotuandui-all.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2604 2H5.73943C3.95331 2 2.50537 3.4478 2.50537 5.23379V15.1642C2.50537 16.9502 3.95331 18.398 5.73943 18.398H19.2604C21.0466 18.398 22.4945 16.9502 22.4945 15.1642V5.23379C22.4945 3.4478 21.0466 2 19.2604 2ZM15.3726 20.0572H9.62725C9.18817 20.0572 8.83223 20.4131 8.83223 20.8522C8.83223 21.2913 9.18817 21.6472 9.62725 21.6472H15.3726C15.8117 21.6472 16.1676 21.2913 16.1676 20.8522C16.1676 20.4131 15.8117 20.0572 15.3726 20.0572Z" fill="#4773F7"/>
+<path d="M18.1253 7.70579C17.7975 7.39521 17.2799 7.40915 16.9693 7.73704L13.885 10.9927L11.519 8.4631C11.4441 8.383 11.3538 8.31879 11.2535 8.27429C11.1533 8.22979 11.0451 8.20592 10.9354 8.20409C10.8258 8.20226 10.7168 8.22251 10.6152 8.26363C10.5135 8.30476 10.4211 8.36592 10.3435 8.44348L6.8589 11.9281C6.53955 12.2475 6.53955 12.7652 6.8589 13.0846C7.01856 13.2442 7.22785 13.3241 7.43713 13.3241C7.6464 13.3241 7.8557 13.2442 8.01536 13.0846L10.9021 10.1978L13.284 12.7443C13.3602 12.8258 13.4523 12.8908 13.5545 12.9353C13.6568 12.9799 13.7671 13.0031 13.8786 13.0034H13.8812C13.9923 13.0034 14.1023 12.9808 14.2043 12.9369C14.3064 12.893 14.3985 12.8287 14.4749 12.7481L18.1566 8.86182C18.4672 8.53397 18.4532 8.01639 18.1253 7.70579Z" fill="white"/>
+</svg>

src/assets/images/page-detail-layout/customer/icon-yingxiaotuandui.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.373 20.0576C15.812 20.0578 16.168 20.4136 16.168 20.8525C16.1678 21.2913 15.8118 21.6473 15.373 21.6475H9.62695C9.18815 21.6473 8.83221 21.2913 8.83203 20.8525C8.83203 20.4136 9.18804 20.0578 9.62695 20.0576H15.373ZM19.2607 2C21.0466 2.00013 22.4939 3.44767 22.4941 5.2334V15.1641C22.4941 16.9499 21.0468 18.3983 19.2607 18.3984H5.73926C3.95325 18.3983 2.50586 16.9499 2.50586 15.1641V5.2334C2.50607 3.44767 3.95338 2.00013 5.73926 2H19.2607ZM5.73926 3.63574C4.85804 3.63587 4.14084 4.35234 4.14062 5.2334V15.1641C4.14062 16.0453 4.85789 16.7626 5.73926 16.7627H19.2607C20.1421 16.7626 20.8593 16.0455 20.8594 15.1416V5.21094C20.8593 4.35247 20.142 3.63587 19.2607 3.63574H5.73926ZM16.9697 7.7373C17.2803 7.40954 17.7972 7.39559 18.125 7.70605C18.4529 8.01666 18.4669 8.53446 18.1562 8.8623L14.4746 12.748C14.3982 12.8287 14.3061 12.8926 14.2041 12.9365C14.1021 12.9804 13.9919 13.0039 13.8809 13.0039H13.8789C13.7674 13.0036 13.6569 12.9801 13.5547 12.9355C13.4524 12.891 13.3604 12.8256 13.2842 12.7441L10.9023 10.1982L8.01562 13.085C7.85605 13.2445 7.64664 13.3241 7.4375 13.3242C7.22839 13.3242 7.01899 13.2444 6.85938 13.085C6.54003 12.7656 6.54003 12.2471 6.85938 11.9277L10.3438 8.44336C10.4213 8.36588 10.5136 8.30477 10.6152 8.26367C10.7169 8.22255 10.8259 8.20227 10.9355 8.2041C11.0452 8.20594 11.1537 8.22993 11.2539 8.27441C11.3539 8.31884 11.4438 8.38304 11.5186 8.46289L13.8848 10.9932L16.9697 7.7373Z" fill="#4773F7"/>
+</svg>

src/views/market-manage/external-manage/customer-manage/customer-list/index.vue

@@ -29,13 +29,14 @@
   import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
   import { onMounted, ref, watch, nextTick } from 'vue';
   import { useRouter } from 'vue-router';
+  import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
 
   const router = useRouter();
   const selectedStatus = ref(''); // 定义状态变量
   const pagerConfig = ref('0');
 
   //自定义tab页切换信息
-   // 自定义tab页切换信息，定义为响应式变量
+  // 自定义tab页切换信息，定义为响应式变量
   const tabsOptions = ref([
     {
       title: `全部`,
@@ -83,7 +84,7 @@
         columns: [
           {
             type: 'seq',
-            width: 80,
+
             align: 'center',
           },
 
@@ -91,19 +92,16 @@
             title: '客户名称',
             field: 'customerName',
             align: 'center',
-            width: '20%',
           },
           {
             title: '客户地址',
             field: 'provinceCityDistrict',
             align: 'center',
-            width: '10%',
           },
           {
             title: '客户类型',
             // field: 'customerType',
             align: 'center',
-            width: '10%',
             slots: {
               default({ row, column }) {
                 return <span>{row?.customerType?.[0]?.valueName || ''}</span>;
@@ -114,7 +112,6 @@
             title: '客户来源',
             // field: 'customerSource',
             align: 'center',
-            width: '10%',
             slots: {
               default({ row, column }) {
                 return <span>{row?.customerSource?.[0]?.valueName || ''}</span>;
@@ -125,18 +122,15 @@
             title: '是否合作项目',
             field: 'cooperationMark',
             align: 'center',
-            width: '10%',
           },
           {
             title: '合作金额(元)',
             field: 'cooperationAmount',
             align: 'center',
-            width: '10%',
           },
           {
             title: '操作人',
             align: 'center',
-            width: 150,
             slots: {
               default({ row, column }) {
                 return <span>{row?.createUserId?.actualName || ''}</span>;
@@ -147,29 +141,28 @@
             title: '创建时间',
             field: 'createTime',
             align: 'center',
-            width: 150,
           },
           {
-            field: 'opt',
-            title: '操作',
-            width: '10%',
-            fixed: 'right',
             align: 'center',
-            slots: {
-              default({ row, column }) {
-                return (
-                  <>
-                    <a-button
-                      type='text'
-                      size='small'
-                      onClick={() => {
-                        goDetailPage(row);
-                      }}
-                    >
-                      客户详情
-                    </a-button>
-                  </>
-                );
+            cellRender: {
+              name: 'CellOption',
+              extraProps: {
+                buttons: [
+                  {
+                    title: '查看详情',
+                    code: 'view',
+                    display: ({ row }) => {
+                      return DISPLAY_STATE.VISIBLE;
+                    },
+                    disabled({ row }) {
+                      return false;
+                    },
+                    onClick({ row }) {
+                      goDetailPage(row);
+                    },
+                    extraProps: {},
+                  },
+                ],
               },
             },
           },
@@ -222,19 +215,18 @@
   onMounted(async () => {
     console.log('表格已加载');
     await fetchTableData(); // 确保数据加载完成
-    getTotal(); 
+    getTotal();
   });
 
   const getTotal = () => {
     pagerConfig.value = getValue('pagerConfig.total');
     if (tabsOptions.value.length > 0) {
       tabsOptions.value[0].title = `全部(${pagerConfig.value})`;
-       tabsOptions.value[1].title = `审核中(${pagerConfig.value})`;
-        tabsOptions.value[2].title = `无效客户(${pagerConfig.value})`;
+      tabsOptions.value[1].title = `审核中(${pagerConfig.value})`;
+      tabsOptions.value[2].title = `无效客户(${pagerConfig.value})`;
     }
   };
 
-  
   //自定义搜索传值
   function searchFormDate(status) {
     selectedStatus.value = status; // 更新状态值

src/views/market-manage/external-manage/customer-manage/single-customer/components/file-info.vue

@@ -13,19 +13,28 @@
       </template>
     </bs-table>
   </div>
-    <fileDetail ref="fileDetailRef" @refreshTable="refreshTable();"></fileDetail>
+  <fileDetail ref="fileDetailRef" @refreshTable="refreshTable()"></fileDetail>
+  <FilePreviewModal ref="filePreviewModalRef" />
 </template>
 
 <script setup lang="jsx">
   import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
   import { onMounted, ref, watch } from 'vue';
   import { useRouter } from 'vue-router';
+  import { message, Modal } from 'ant-design-vue';
+
+  import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
+  import { deleteFile, uploadFile } from '/@/api/market-manage/activity-manage';
+
   import fileDetail from '/@/views/market-manage/external-manage/customer-manage/single-customer/modules/fileDetail.vue';
+  import FilePreviewModal from '/@/components/support/file-preview-modal/index.vue';
 
   const fileDetailRef = ref();
+  const filePreviewModalRef = ref(null);
 
   const {
     refreshTable,
+    fetchTableData,
     tableOptions,
     setTablePropsValue: setValue,
     getTablePropsValue: getValue,
@@ -38,78 +47,116 @@
           {
             type: 'seq',
             width: 80,
-            align: 'center',
           },
           {
-            title: '文件名称',
-            // field: 'fileType',
+            field: 'activityName',
+            title: '附件名称',
             align: 'center',
-            width: 400,
             slots: {
-              default({ row, column }) {
-                return <span>{row?.attachment?.[0]?.fileName || ''}</span>;
+              default: ({ row }) => {
+                return row.attachment[0].fileName;
               },
             },
           },
           {
-            title: '文件类别',
-            // field: 'fileType',
+            field: 'activityCode',
+            title: '附件大小',
             align: 'center',
-            width: 200,
             slots: {
-              default({ row, column }) {
-                return <span>{row?.fileType?.[0]?.valueName || ''}</span>;
+              default: ({ row }) => {
+                if (row.attachment[0].fileSize / 1024 < 1024) {
+                  return (row.attachment[0].fileSize / 1024).toFixed(2) + 'KB';
+                } else if (row.attachment[0].fileSize / 1024 / 1024 < 1024) {
+                  return (row.attachment[0].fileSize / 1024 / 1024).toFixed(2) + 'MB';
+                } else if (row.attachment[0].fileSize / 1024 / 1024 / 1024 < 1024) {
+                  return (row.attachment[0].fileSize / 1024 / 1024 / 1024).toFixed(2) + 'GB';
+                }
               },
             },
           },
           {
-            title: '备注',
-            field: 'remark',
+            field: 'activityType',
+            title: '操作人',
             align: 'center',
-            width: 250,
+            slots: {
+              default: ({ row }) => {
+                return row.attachment[0].creatorName;
+              },
+            },
           },
           {
+            field: 'address',
             title: '操作时间',
-            field: 'createTime',
-            width: 110,
             align: 'center',
-            ellipsis: true,
+            slots: {
+              default: ({ row }) => {
+                return row.attachment[0].createTime;
+              },
+            },
           },
           {
-            field: 'opt',
-            title: '操作',
-            width: '200px',
-            fixed: 'right',
+            // fixed: 'right',
             align: 'center',
-            slots: {
-              default({ row, column }) {
-                return (
-                  <><a-button
-                    type='text'
-                    size='small'
-                    onClick={() => {
-                      goDetailPage(row);
-                    } }
-                  >
-                    预览
-                  </a-button><a-button
-                    type='text'
-                    size='small'
-                    onClick={() => {
-                      goDownLoad(row);
-                    } }
-                  >
-                      下载
-                    </a-button><a-button
-                      type='text'
-                      size='small'
-                      onClick={() => {
-                        goDelete(row);
-                      } }
-                    >
-                      删除
-                    </a-button></>
-                );
+            cellRender: {
+              name: 'CellOption',
+              extraProps: {
+                buttons: [
+                  {
+                    title: '预览',
+                    code: 'view',
+                    display: ({ row }) => {
+                      return DISPLAY_STATE.VISIBLE;
+                    },
+                    disabled({ row }) {
+                      return false;
+                    },
+                    onClick({ row }) {
+                      filePreviewModalRef.value.showPreview(row.attachment[0]);
+                    },
+                    extraProps: {},
+                  },
+                  {
+                    title: '下载',
+                    code: 'edit',
+                    display: ({ row }) => {
+                      return DISPLAY_STATE.VISIBLE;
+                    },
+                    disabled({ row }) {
+                      return false;
+                    },
+                    onClick({ row }) {
+                      fileApi.downLoadFile(row.attachment[0].fileKey);
+                    },
+                    extraProps: {},
+                  },
+                  {
+                    title: '删除',
+                    code: 'delete',
+                    display: ({ row }) => {
+                      return DISPLAY_STATE.VISIBLE;
+                    },
+                    disabled({ row }) {
+                      return false;
+                    },
+                    onClick({ row }) {
+                      Modal.confirm({
+                        title: '提示',
+                        content: `确定要删除${row.attachment[0].fileName}吗?`,
+                        onOk: () => {
+                          deleteFile(row.id).then((res) => {
+                            if (res.ok) {
+                              message.success('删除成功');
+                              fetchTableData();
+                            }
+                          });
+                        },
+                      });
+                    },
+                    extraProps: {
+                      danger: true,
+                    },
+                  },
+                ],
               },
             },
           },
@@ -147,7 +194,7 @@
   });
 
   const router = useRouter();
-   const query = router.currentRoute.value.query;
+  const query = router.currentRoute.value.query;
   function goDetailPage() {
     fileDetailRef.value.showModal(query.id);
   }

src/views/market-manage/external-manage/customer-manage/single-customer/index.vue

@@ -1,159 +1,232 @@
 <template>
-  <a-flex style="padding: 0 20px" vertical :gap="10">
-    <a-card :bordered="false">
-      <a-flex justify="space-between" align="center">
-        <a-flex align="center" gap="small">
-          <a-flex vertical gap="small">
-            <div class="header-info">
-              <div class="header-info-top">
-                <span>{{ singleCusValue?.customerName }}</span>
-                <a-tag color="#D4AF37" style="font-size: 15px">111</a-tag>
-              </div>
-              <div class="header-info-bottom">
-                <div>
-                  客户类型:
-                  <span>{{ singleCusValue?.customerType?.[0]?.valueName }}</span>
-                </div>
-                <div>
-                  客户编码:
-                  <span>{{ singleCusValue?.customerCode }}</span>
-                </div>
-                <div>
-                  所在省市:
-                  <span>{{ `${singleCusValue?.provinceName}${singleCusValue?.cityName}` }}</span>
-                </div>
-              </div>
-            </div>
-          </a-flex>
-        </a-flex>
-      </a-flex>
-    </a-card>
-    <a-card :bordered="false">
-      <a-flex vertical gap="small">
-        <div class="context">
-          <div v-for="item in descList" :key="item.id" class="context-item">
-            <span>{{ item.label }}</span>
-            <span>{{ item.value }}</span>
+  <div class="page-detail">
+    <page-detail-layout :tabs="tabs" v-model:tab-active-key="tabActiveKey" :index-config="indexConfig" :title="headerIndexData?.customerName">
+      <template #titleRight>
+        <img v-if="customerDetailData?.customerGrade?.[0].valueCode === 'S'" src="/@/assets/images/page-detail-layout/customer/SS_user.png" alt="" />
+        <img v-if="customerDetailData?.customerGrade?.[0].valueCode === 'A'" src="/@/assets/images/page-detail-layout/customer/AA_user.png" alt="" />
+        <img v-if="customerDetailData?.customerGrade?.[0].valueCode === 'B'" src="/@/assets/images/page-detail-layout/customer/BB_user.png" alt="" />
+        <img v-if="customerDetailData?.customerGrade?.[0].valueCode === 'C'" src="/@/assets/images/page-detail-layout/customer/CC_user.png" alt="" />
+        <bs-dic-tag :dicts="customerDetailData?.customerSource" />
+      </template>
+
+      <template #toolBtn>
+        <a-button danger ghost type="primary" size="small">
+          <UserAddOutlined />
+          <span>加入黑名单</span>
+        </a-button>
+        <a-button danger ghost type="primary" size="small" @click="handleTransferPublicSea">
+          <UserDeleteOutlined />
+          <span>释放公海</span>
+        </a-button>
+        <a-button ghost type="primary" size="small" @click="customerTransferModalRef.showModal()">
+          <RightSquareOutlined />
+          <span> 客户转移 </span></a-button
+        >
+        <a-button type="primary" size="small">
+          <EditOutlined />
+          <span>信息编辑</span>
+        </a-button>
+      </template>
+
+      <template #titleBottom>
+        <a-tag color="#f0f4fe" v-for="(tagItem, tagIndex) in tagList" :key="tagIndex" @click="tagItem?.click(tagItem)" style="cursor: pointer">
+          <div class="tag-stl">
+            <img :src="tagItem.icon" alt="" />
+            <span class="title-render">{{ tagItem.title }}</span>
           </div>
-        </div>
-      </a-flex>
-    </a-card>
-    <a-card :tab-list="tabList" :active-tab-key="tabKey" @tabChange="onTabChange">
-      <component :is="tabList[tabKey]['component']" :id="query.id" :descData="singleCusValue"></component>
-    </a-card>
-  </a-flex>
+        </a-tag>
+      </template>
+
+      <template #BasicInfo>
+        <BasicInfo :id="route.query.id" :descData="headerIndexData" />
+      </template>
+      <template #ProjectInfo>
+        <ProjectInfo :id="route.query.id" />
+      </template>
+      <template #InfoMaterial>
+        <InfoMaterial :id="route.query.id" />
+      </template>
+    </page-detail-layout>
+  </div>
 </template>
 
 <script setup>
-  import { ref, defineAsyncComponent, onMounted, watchEffect } from 'vue';
-  import { clientManageApi } from '/@/api/market-manage/index.js';
-  import { useRouter } from 'vue-router';
-
-  
-  onMounted(() => {
-    getSingleCustomerList();
-  });
-
-  const router = useRouter();
-  const query = router.currentRoute.value.query;
+  import { onMounted, reactive, ref, watch } from 'vue';
+  import { useRoute } from 'vue-router';
+  import PageDetailLayout from '/@/components/business/page-detail-layout/index.vue';
+  import BasicInfo from '/@/views/market-manage/external-manage/customer-manage/single-customer/components/customer-info.vue';
+  import ProjectInfo from '/@/views/market-manage/external-manage/customer-manage/single-customer/components/project-list.vue';
+  import InfoMaterial from '/@/views/market-manage/external-manage/customer-manage/single-customer/components/file-info.vue';
+  import { clientManageApi, fetchCustomerHeaderInfo, fetchCustomerDetail } from '/@/api/market-manage/index.js';
+
+  const route = useRoute();
+  const headerIndexData = ref(null);
+  const stepsData = [
+    {
+      title: '标段备案',
+      time: '2024-09-18',
+      status: 'completed',
+      number: 1,
+      lineTopNum: 100,
+    },
+    {
+      title: '商机管理',
+      time: '2024-09-20',
+      status: 'completed',
+      number: 2,
+      lineTopNum: 100,
+    },
+    {
+      title: '项目立项',
+      time: '2024-10-11',
+      status: 'completed',
+      number: 3,
+      lineTopNum: 100,
+    },
+    {
+      title: '投标评审',
+      status: 'current',
+      number: 4,
+      lineTopNum: 0,
+    },
+    {
+      title: '投标管理',
+      status: 'todo',
+      number: 5,
+      lineTopNum: 0,
+    },
+    {
+      title: '中标捷报',
+      status: 'todo',
+      number: 6,
+      lineTopNum: 0,
+    },
+    {
+      title: '合同签订',
+      status: 'todo',
+      number: 7,
+      lineTopNum: 0,
+    },
+  ];
 
-  const singleCusValue = ref();
+  const handleTransferPublicSea = () => {
+    transferPublicSeaModalRef.value.showModal();
+  };
 
-  const descList = ref([
-    { id: '1', label: '合同数量', value: '0' },
-    { id: '2', label: '累计合同额', value: '0' },
-    { id: '3', label: '联系人', value: '0' },
-    { id: '4', label: '联系电话', value: '0' },
-  ]);
+  const getImgUrl = (name) => {
+    return new URL('/src/assets/images/page-detail-layout/customer/' + name + '.svg', import.meta.url).href;
+  };
 
-  const tabKey = ref('0');
-  const tabList = [
+  const tagList = [
     {
-      key: '0',
-      tab: '基本信息',
-      component: defineAsyncComponent(() => import('./components/customer-info.vue')),
+      title: '天眼查',
+      icon: getImgUrl('icon-tianyancha'),
     },
     {
-      key: '1',
-      tab: '项目信息',
-      component: defineAsyncComponent(() => import('./components/project-list.vue')),
+      title: '线索登记',
+      icon: getImgUrl('icon-xiansuodengji'),
     },
     {
-      key: '2',
-      tab: '文件资料',
-      component: defineAsyncComponent(() => import('./components/file-info.vue')),
+      title: '标签管理',
+      icon: getImgUrl('icon-biaoqianguanli'),
+      click(it) {
+        tagManageModalRef.value.showModal();
+      },
+    },
+    {
+      title: '曾用名',
+      icon: getImgUrl('icon-cengyongming'),
+      click(it) {
+        usedNameModalRef.value.showModal();
+      },
     },
   ];
 
+  const tabs = ref([
+    {
+      title: '基本信息',
+      key: 'BasicInfo',
+      slotName: 'BasicInfo',
+      selectedIcon: getImgUrl('icon-jibenxinxi-all'),
+      unSelectedIcon: getImgUrl('icon-jibenxinxi'),
+    },
+    {
+      title: '项目信息',
+      key: 'ProjectInfo',
+      slotName: 'ProjectInfo',
+      selectedIcon: getImgUrl('icon-jibenxinxi-all'),
+      unSelectedIcon: getImgUrl('icon-jibenxinxi'),
+    },
+    {
+      title: '信息资料',
+      key: 'InfoMaterial',
+      slotName: 'InfoMaterial',
+      selectedIcon: getImgUrl('icon-xinxiziliao-all'),
+      unSelectedIcon: getImgUrl('icon-xinxiziliao'),
+    },
+  ]);
 
-  // 查询列表
-  function getSingleCustomerList() {
-    clientManageApi.customerDetails(query.id).then(
-      (res) => {
-        singleCusValue.value = res.data;
-        // 动态更新 descList
-        descList.value = [
-          { id: '1', label: '合同数量', value: singleCusValue.value.customerManager },
-          { id: '2', label: '累计合同额', value: singleCusValue.value.customerManager },
-          { id: '3', label: '联系人', value: singleCusValue.value.customerManager },
-          { id: '4', label: '联系电话', value: singleCusValue.value.customerManagerMobile },
-        ];
-      },
-      (err) => {
-        console.error(err);
-      }
-    );
-  }
+  const customerDetailData = ref(null);
+
+  const indexConfig = ref({
+    sourceData: [],
+    labelKey: 'label',
+    valueKey: 'value',
+  });
 
-  const onTabChange = (value) => {
-    tabKey.value = value;
+  const setSourceData = (resData) => {
+    indexConfig.value = {
+      sourceData: [
+        {
+          label: '合同数量',
+          value: resData.legalPerson || 0,
+        },
+        {
+          label: '累计合同金额(元)',
+          value: resData.legalPerson || 0,
+        },
+        {
+          label: '累计收款(元)',
+          value: resData.legalPerson || 0,
+        },
+        {
+          label: '累计开票(元)',
+          value: resData.legalPerson || 0,
+        },
+        {
+          label: '累计未回款(元)',
+          value: resData.legalPerson || 0,
+        },
+      ],
+      labelKey: 'label',
+      valueKey: 'value',
+    };
   };
-</script>
 
-<style lang="less" scoped>
-  .header-info {
-    .header-info-top {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-      margin-bottom: 10px;
+  onMounted(() => {
+    clientManageApi.customerDetails(route.query.id).then((res) => {
+      headerIndexData.value = res.data;
+      setSourceData(headerIndexData.value);
+    });
+
+    fetchCustomerDetail(route.query.id).then((res) => {
+      customerDetailData.value = res.data;
+    });
+  });
+</script>
 
-      span {
-        font-size: 20px;
-        font-weight: 600;
-      }
-    }
+<style lang="scss" scoped>
+  .page-detail {
+    width: 100%;
 
-    .header-info-bottom {
+    .tag-stl {
       display: flex;
+      gap: 5px;
       align-items: center;
-      gap: 80px;
-
-      span {
-        font-size: 15px;
-        font-weight: 600;
-        color: rgb(0, 0, 0);
+      .title-render {
+        color: #999999;
+        font-size: 14px;
       }
     }
   }
-
-  .context {
-    display: flex;
-    align-items: center;
-    gap: 100px;
-    margin-left: 20px;
-
-    .context-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 10px;
-    }
-
-    span:nth-child(1) {
-      font-size: 15px;
-      font-weight: 600;
-      color: rgb(1, 1, 1);
-    }
-  }
 </style>

src/views/market-manage/external-manage/project-manage/project-list/index.vue

@@ -3,7 +3,7 @@
     <a-tabs v-model:activeKey="activeKey" class="tabs">
       <a-tab-pane v-for="(item, index) in tabsOptions" :key="index">
         <template #tab>
-          <span @click="item.onClick(item.params)" style="font-size: 16px;">
+          <span @click="item.onClick(item.params)" style="font-size: 16px">
             <component :is="item.icon"></component>
             {{ item.title }}
           </span>
@@ -50,7 +50,7 @@
       icon: 'FileSyncOutlined',
       params: {},
       onClick: (value) => {
-        searchFormDate('shz');
+        searchFormDate('shz');dd
       },
     },
     {
@@ -108,13 +108,13 @@
             title: '项目名称',
             field: 'clueName',
             align: 'center',
-            width: 200,
+
           },
           {
             title: '项目进度',
             // field: 'projectType',
             align: 'center',
-            width: 110,
+
             slots: {
               default({ row, column }) {
                 return <span>{row?.projectType?.[0]?.valueName || ''}</span>;
@@ -125,25 +125,25 @@
             title: '项目地址',
             field: 'provinceCityDistrict',
             align: 'center',
-            width: 200,
+
           },
           {
             title: '甲方',
             field: 'landlordUnitId',
             align: 'center',
-            width: 110,
+
           },
           {
             title: '概算金额(万)',
             field: 'address',
             align: 'center',
-            width: 150,
+
           },
           {
             title: '项目类型',
             // field: 'tendersType',
             align: 'center',
-            width: 110,
+
             slots: {
               default({ row, column }) {
                 return <span>{row?.projectType?.[0]?.valueName || ''}</span>;
@@ -154,7 +154,7 @@
             title: '工程属性',
             // field: 'tendersType',
             align: 'center',
-            width: 110,
+
             slots: {
               default({ row, column }) {
                 return <span>{row?.engineeringAttribute?.[0]?.valueName || ''}</span>;
@@ -165,38 +165,62 @@
             title: '对接营销经理',
             field: 'bidOpenDate',
             align: 'center',
-            width: 150,
+
           },
           {
             title: '创建时间',
             field: 'planStartDate',
             align: 'center',
-            width: 150,
+
           },
           {
-            field: 'opt',
-            title: '操作',
-            width: '10%',
-            fixed: 'right',
             align: 'center',
-            slots: {
-              default({ row, column }) {
-                return (
-                  <>
-                    <a-button
-                      type='text'
-                      size='small'
-                      onClick={() => {
-                        goDetailPage(row);
-                      }}
-                    >
-                      项目详情
-                    </a-button>
-                  </>
-                );
+            cellRender: {
+              name: 'CellOption',
+              extraProps: {
+                buttons: [
+                  {
+                    title: '查看详情',
+                    code: 'view',
+                    display: ({ row }) => {
+                      return DISPLAY_STATE.VISIBLE;
+                    },
+                    disabled({ row }) {
+                      return false;
+                    },
+                    onClick({ row }) {
+                      goDetailPage(row);
+                    },
+                    extraProps: {},
+                  },
+                ],
               },
             },
           },
+          // {
+          //   field: 'opt',
+          //   title: '操作',
+          //   width: '10%',
+          //   fixed: 'right',
+          //   align: 'center',
+          //   slots: {
+          //     default({ row, column }) {
+          //       return (
+          //         <>
+          //           <a-button
+          //             type='text'
+          //             size='small'
+          //             onClick={() => {
+          //               goDetailPage(row);
+          //             }}
+          //           >
+          //             项目详情
+          //           </a-button>
+          //         </>
+          //       );
+          //     },
+          //   },
+          // },
         ],
         data: [
           {
@@ -238,7 +262,7 @@
       toolbarConfig: {},
       tableSearchBeforeBiz() {
         const searchParams = getValue('searchConfig.data');
-        setValue('searchConfig.data', { ...searchParams,status: selectedStatus.value});
+        setValue('searchConfig.data', { ...searchParams, status: selectedStatus.value });
       },
     },
   });
@@ -249,7 +273,7 @@
 
   const router = useRouter();
 
-    //自定义搜索传值
+  //自定义搜索传值
   function searchFormDate(status) {
     selectedStatus.value = status; // 更新状态值
     fetchTableData(); // 触发表格数据的重新加载
@@ -276,7 +300,7 @@
 </script>
 
 <style scoped lang="scss">
-   .table-demo {
+  .table-demo {
     background-color: #fff;
     height: 100%;
 

src/views/market-manage/external-manage/project-manage/single-project/components/file-info.vue

@@ -11,137 +11,167 @@
           </a-button>
         </a-space>
       </template>
-
-      <FilePreviewModal ref="filePreviewModalRef" />
     </bs-table>
   </div>
+  <fileDetail ref="fileDetailRef" @refreshTable="refreshTable()"></fileDetail>
+  <FilePreviewModal ref="filePreviewModalRef" />
 </template>
 
 <script setup lang="jsx">
   import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
   import { onMounted, ref, watch } from 'vue';
   import { useRouter } from 'vue-router';
+  import { message, Modal } from 'ant-design-vue';
+
+  import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
+  import { deleteFile, uploadFile } from '/@/api/market-manage/activity-manage';
+
+  import fileDetail from '/@/views/market-manage/external-manage/customer-manage/single-customer/modules/fileDetail.vue';
   import FilePreviewModal from '/@/components/support/file-preview-modal/index.vue';
 
-  const props = defineProps({
-    selectedRulesId: String,
-  });
+  const fileDetailRef = ref();
+  const filePreviewModalRef = ref(null);
 
   const {
-    tableOptions,
+    refreshTable,
     fetchTableData,
+    tableOptions,
     setTablePropsValue: setValue,
     getTablePropsValue: getValue,
   } = useBsTable({
     tableOptions: {
-      url: '/support/file/queryPage',
+      url: '/supports/biz/file/queryPage',
       gridOptions: {
         loading: false,
         columns: [
           {
             type: 'seq',
             width: 80,
-            align: 'center',
           },
           {
+            field: 'activityName',
             title: '附件名称',
-            field: 'fileName',
             align: 'center',
-            width: 185,
-            ellipsis: true,
+            slots: {
+              default: ({ row }) => {
+                return row.attachment[0].fileName;
+              },
+            },
           },
           {
+            field: 'activityCode',
             title: '附件大小',
-            field: 'fileSize',
             align: 'center',
-            width: 85,
-            ellipsis: true,
+            slots: {
+              default: ({ row }) => {
+                if (row.attachment[0].fileSize / 1024 < 1024) {
+                  return (row.attachment[0].fileSize / 1024).toFixed(2) + 'KB';
+                } else if (row.attachment[0].fileSize / 1024 / 1024 < 1024) {
+                  return (row.attachment[0].fileSize / 1024 / 1024).toFixed(2) + 'MB';
+                } else if (row.attachment[0].fileSize / 1024 / 1024 / 1024 < 1024) {
+                  return (row.attachment[0].fileSize / 1024 / 1024 / 1024).toFixed(2) + 'GB';
+                }
+              },
+            },
           },
           {
+            field: 'activityType',
             title: '操作人',
-            field: 'creatorName',
             align: 'center',
-            width: 120,
-            ellipsis: true,
+            slots: {
+              default: ({ row }) => {
+                return row.attachment[0].creatorName;
+              },
+            },
           },
           {
+            field: 'address',
             title: '操作时间',
-            field: 'createTime',
-            align: 'center',
-            width: 110,
-            ellipsis: true,
-          },
-          {
-            field: 'opt',
-            title: '操作',
-            width: '200px',
-            fixed: 'right',
             align: 'center',
             slots: {
-              default({ row, column }) {
-                return (
-                  <>
-                    <a-button
-                      type='text'
-                      size='small'
-                      onClick={() => {
-                        goPreview(row);
-                      }}
-                    >
-                      预览
-                    </a-button>
-                    <a-button
-                      type='text'
-                      size='small'
-                      onClick={() => {
-                        goDownLoad(row);
-                      }}
-                    >
-                      下载
-                    </a-button>
-                    <a-button
-                      type='text'
-                      size='small'
-                      onClick={() => {
-                        goDeleteFileInfo(row);
-                      }}
-                    >
-                      删除
-                    </a-button>
-                  </>
-                );
+              default: ({ row }) => {
+                return row.attachment[0].createTime;
               },
             },
           },
-        ],
-        data: [
           {
-            id: 1,
-            name: '测试数据',
-            dictField: [
-              {
-                dictKeyId: '',
-                dictValueId: '',
-                remark: '',
-                sort: 3,
-                status: 1,
-                valueCode: '03',
-                valueName: '微信公众号',
+            // fixed: 'right',
+            align: 'center',
+            cellRender: {
+              name: 'CellOption',
+              extraProps: {
+                buttons: [
+                  {
+                    title: '预览',
+                    code: 'view',
+                    display: ({ row }) => {
+                      return DISPLAY_STATE.VISIBLE;
+                    },
+                    disabled({ row }) {
+                      return false;
+                    },
+                    onClick({ row }) {
+                      filePreviewModalRef.value.showPreview(row.attachment[0]);
+                    },
+                    extraProps: {},
+                  },
+                  {
+                    title: '下载',
+                    code: 'edit',
+                    display: ({ row }) => {
+                      return DISPLAY_STATE.VISIBLE;
+                    },
+                    disabled({ row }) {
+                      return false;
+                    },
+                    onClick({ row }) {
+                      fileApi.downLoadFile(row.attachment[0].fileKey);
+                    },
+                    extraProps: {},
+                  },
+                  {
+                    title: '删除',
+                    code: 'delete',
+                    display: ({ row }) => {
+                      return DISPLAY_STATE.VISIBLE;
+                    },
+                    disabled({ row }) {
+                      return false;
+                    },
+                    onClick({ row }) {
+                      Modal.confirm({
+                        title: '提示',
+                        content: `确定要删除${row.attachment[0].fileName}吗?`,
+                        onOk: () => {
+                          deleteFile(row.id).then((res) => {
+                            if (res.ok) {
+                              message.success('删除成功');
+                              fetchTableData();
+                            }
+                          });
+                        },
+                      });
+                    },
+                    extraProps: {
+                      danger: true,
+                    },
+                  },
+                ],
               },
-            ],
+            },
           },
-        ], // 模拟数据源
+        ],
       },
       searchConfig: {
         enabled: false,
         fieldSpan: 4,
         fields: [
           {
-            field: 'name',
+            field: 'fileType',
             label: '',
             component: 'a-input',
             componentProps: {
-              placeholder: '请输入服务商名称',
+              placeholder: '请输入文件名称',
             },
           },
         ],
@@ -154,49 +184,19 @@
       toolbarConfig: {},
       tableSearchBeforeBiz() {
         const searchParams = getValue('searchConfig.data');
-        setValue('searchConfig.data', { ...searchParams, key: props.selectedRulesId });
+        setValue('searchConfig.data', { ...searchParams });
       },
     },
   });
 
-  // 监听 selectedRulesId 的变化
-  watch(
-    () => props.selectedRulesId,
-    (newVal, oldVal) => {
-      if (newVal !== oldVal) {
-        fetchTableData(newVal);
-      }
-    },
-    { immediate: true }
-  );
-
   onMounted(() => {
     console.log('表格已加载');
   });
 
   const router = useRouter();
-
-  const filePreviewModalRef = ref();
-  //文件预览
-  function goPreview(record) {
-    filePreviewModalRef.value.showPreview(record);
-  }
-  //文件下载
-  function goDownLoad(record) {
-    console.log('record', record);
-    router.push({
-      path: '/market-manage/external-manage/customer-manage/customer-create',
-      query: {
-        id: record.id,
-      },
-    });
-  }
-  //删除上传的文件
-  function goDeleteFileInfo(record) {
-    console.log('recode', record);
-    clientManageApi.DeleteBankCard({ id: record.id });
-    refreshTable();
-    message.success('删除成功');
+  const query = router.currentRoute.value.query;
+  function goDetailPage() {
+    fileDetailRef.value.showModal(query.id);
   }
 </script>
 

src/views/market-manage/external-manage/project-manage/single-project/components/project-info.vue

@@ -120,6 +120,7 @@
   });
   // ---------------------- 表格样式配置 ----------------------------
   const labelCol = { style: { width: '120px' } };
+  
   // ---------------------- 字段自定义 ----------------------------
   const formModel = reactive({});
   const stepFormRef = ref(null);

src/views/market-manage/external-manage/project-manage/single-project/index.vue

@@ -1,153 +1,165 @@
 <template>
-  <a-flex style="padding: 0 20px" vertical :gap="10">
-    <a-card :bordered="false">
-      <a-flex justify="space-between" align="center">
-        <a-flex align="center" gap="small">
-          <a-flex vertical gap="small">
-            <div class="header-info">
-              <div class="header-info-top">
-                <span>{{ singleProjValue?.projectCode }}</span>
-                <a-tag color="#D4AF37" style="font-size: 15px">{{ singleProjValue?.projectCode }}</a-tag>
-              </div>
-              <div class="header-info-bottom">
-                <div>
-                  客户类型:
-                  <span>{{ singleProjValue?.projectCode}}</span>
-                </div>
-                <div>
-                  客户编码:
-                  <span>{{ singleProjValue?.projectCode }}</span>
-                </div>
-                <div>
-                  所在省市:
-                  <span>{{ `${singleProjValue?.projectCode}-${singleProjValue?.projectCode}` }}</span>
-                </div>
-              </div>
-            </div>
-          </a-flex>
-        </a-flex>
-      </a-flex>
-    </a-card>
-    <a-card :bordered="false">
-      <a-flex vertical gap="small">
-        <div class="context">
-          <div v-for="item in descList" :key="item.id" class="context-item">
-            <span>{{ item.label }}</span>
-            <span>{{ item.value }}</span>
+  <div class="page-detail">
+    <page-detail-layout :tabs="tabs" v-model:tab-active-key="tabActiveKey" :index-config="indexConfig" :title="headerIndexData?.projectCode">
+      <template #titleRight>
+        <img v-if="customerDetailData?.customerGrade?.[0].valueCode === 'S'" src="/@/assets/images/page-detail-layout/customer/SS_user.png" alt="" />
+        <img v-if="customerDetailData?.customerGrade?.[0].valueCode === 'A'" src="/@/assets/images/page-detail-layout/customer/AA_user.png" alt="" />
+        <img v-if="customerDetailData?.customerGrade?.[0].valueCode === 'B'" src="/@/assets/images/page-detail-layout/customer/BB_user.png" alt="" />
+        <img v-if="customerDetailData?.customerGrade?.[0].valueCode === 'C'" src="/@/assets/images/page-detail-layout/customer/CC_user.png" alt="" />
+        <bs-dic-tag :dicts="customerDetailData?.customerSource" />
+      </template>
+
+      <template #titleBottom>
+        <a-tag color="#f0f4fe" v-for="(tagItem, tagIndex) in tagList" :key="tagIndex" @click="tagItem?.click(tagItem)" style="cursor: pointer">
+          <div class="tag-stl">
+            <img :src="tagItem.icon" alt="" />
+            <span class="title-render">{{ tagItem.title }}:{{ tagItem.value }}</span>
           </div>
-        </div>
-      </a-flex>
-    </a-card>
-    <a-card :tab-list="tabList" :active-tab-key="tabKey" @tabChange="onTabChange">
-      <component :is="tabList[tabKey]['component']" :id="query.id" :descData="singleProjValue"></component>
-    </a-card>
-  </a-flex>
+        </a-tag>
+      </template>
+
+      <template #BasicInfo>
+        <BasicInfo :id="route.query.id" :descData="headerIndexData" />
+      </template>
+
+      <template #InfoMaterial>
+        <InfoMaterial :id="route.query.id" />
+      </template>
+    </page-detail-layout>
+  </div>
 </template>
 
 <script setup>
-  import { ref, defineAsyncComponent, onMounted } from 'vue';
-  import { clientManageApi } from '/@/api/market-manage/index.js';
-  import { useRouter } from 'vue-router';
-
-  const router = useRouter();
-  const query = router.currentRoute.value.query;
-  const singleProjValue = ref();
-
-  const descList = ref([
-    { id: '1', label: '预计合同金额', value: '' },
-    { id: '2', label: '招标方式', value: '' },
-    { id: '3', label: '对接营销经理', value: '' },
-    { id: '4', label: '营销经理联系电话', value: '' },
+  import { onMounted, reactive, ref, watch } from 'vue';
+  import { useRoute } from 'vue-router';
+  import PageDetailLayout from '/@/components/business/page-detail-layout/index.vue';
+  import BasicInfo from '/@/views/market-manage/external-manage/project-manage/single-project/components/project-info.vue';
+  import InfoMaterial from '/@/views/market-manage/external-manage/project-manage/single-project/components/file-info.vue';
+  import { clientManageApi, fetchCustomerHeaderInfo, fetchCustomerDetail } from '/@/api/market-manage/index.js';
+
+  const route = useRoute();
+  const headerIndexData = ref(null);
+
+  const getImgUrl = (name) => {
+    return new URL('/src/assets/images/page-detail-layout/customer/' + name + '.svg', import.meta.url).href;
+  };
+
+  const tagList = ref([
+    {
+      title: '客户类型',
+      icon: getImgUrl('icon-tianyancha'),
+    },
+    {
+      title: '客户编码',
+      icon: getImgUrl('icon-xiansuodengji'),
+    },
+    {
+      title: '所在省市',
+      icon: getImgUrl('icon-biaoqianguanli'),
+    },
   ]);
 
-  const tabKey = ref('0');
-  const tabList = [
+  const tabs = ref([
     {
-      key: '0',
-      tab: '基本信息',
-      component: defineAsyncComponent(() => import('./components/project-info.vue')),
+      title: '基本信息',
+      key: 'BasicInfo',
+      slotName: 'BasicInfo',
+      selectedIcon: getImgUrl('icon-jibenxinxi-all'),
+      unSelectedIcon: getImgUrl('icon-jibenxinxi'),
     },
     {
-      key: '1',
-      tab: '文件资料',
-      component: defineAsyncComponent(() => import('./components/file-info.vue')),
+      title: '信息资料',
+      key: 'InfoMaterial',
+      slotName: 'InfoMaterial',
+      selectedIcon: getImgUrl('icon-xinxiziliao-all'),
+      unSelectedIcon: getImgUrl('icon-xinxiziliao'),
     },
-  ];
+  ]);
 
-  onMounted(() => {
-    getSingleProjList();
-  });
+  const customerDetailData = ref(null);
 
-  // 查询列表
-  function getSingleProjList() {
-    clientManageApi.ProjectDetails(query.id).then(
-      (res) => {
-        console.log("2323232",res);
-        
-        singleProjValue.value = res.data;
-        // 动态更新 descList
-        descList.value = [
-          { id: '1', label: '预计合同金额', value: singleProjValue.value.projectCode },
-          { id: '2', label: '招标方式', value: singleProjValue.value.projectCode },
-          { id: '3', label: '对接营销经理', value: singleProjValue.value.projectCode },
-          { id: '4', label: '营销经理联系电话', value: singleProjValue.value.projectCode },
-        ];
-      },
-      (err) => {
-        console.error(err);
-      }
-    );
-  }
+  const indexConfig = ref({
+    sourceData: [],
+    labelKey: 'label',
+    valueKey: 'value',
+  });
 
-  const onTabChange = (value) => {
-    tabKey.value = value;
+  const setSourceData = (resData) => {
+    indexConfig.value = {
+      sourceData: [
+        {
+          label: '合同数量',
+          value: resData.projectCode || 0,
+        },
+        {
+          label: '累计合同金额(元)',
+          value: resData.projectCode || 0,
+        },
+        {
+          label: '累计收款(元)',
+          value: resData.projectCode || 0,
+        },
+        {
+          label: '累计开票(元)',
+          value: resData.projectCode || 0,
+        },
+        {
+          label: '累计未回款(元)',
+          value: resData.projectCode || 0,
+        },
+      ],
+      labelKey: 'label',
+      valueKey: 'value',
+    };
   };
-</script>
-
-<style lang="less" scoped>
-  .header-info {
-    .header-info-top {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-      margin-bottom: 10px;
 
-      span {
-        font-size: 20px;
-        font-weight: 600;
-      }
-    }
+  onMounted(() => {
+    clientManageApi.ProjectDetails(route.query.id).then((res) => {
+      headerIndexData.value = res.data;
+      console.log('headerIndexData.value', headerIndexData.value);
+      setSourceData(headerIndexData.value);
+    });
 
-    .header-info-bottom {
-      display: flex;
-      align-items: center;
-      gap: 80px;
+    fetchCustomerDetail(route.query.id).then((res) => {
+      customerDetailData.value = res.data;
+    });
+  });
 
-      span {
-        font-size: 15px;
-        font-weight: 600;
-        color: rgb(0, 0, 0);
-      }
+  watch(headerIndexData, (newVal) => {
+    if (newVal) {
+      tagList.value = [
+        {
+          title: '客户类型',
+          icon: getImgUrl('icon-tianyancha'),
+          value: newVal.projectCode,
+        },
+        {
+          title: '客户编码',
+          icon: getImgUrl('icon-xiansuodengji'),
+          value: newVal.projectCode,
+        },
+        {
+          title: '所在省市',
+          icon: getImgUrl('icon-biaoqianguanli'),
+          value: newVal.projectCode,
+        },
+      ];
     }
-  }
+  });
+</script>
 
-  .context {
-    display: flex;
-    align-items: center;
-    gap: 100px;
-    margin-left: 20px;
+<style lang="scss" scoped>
+  .page-detail {
+    width: 100%;
 
-    .context-item {
+    .tag-stl {
       display: flex;
-      flex-direction: column;
+      gap: 5px;
       align-items: center;
-      gap: 10px;
-    }
-
-    span:nth-child(1) {
-      font-size: 15px;
-      font-weight: 600;
-      color: rgb(1, 1, 1);
+      .title-render {
+        color: #999999;
+        font-size: 14px;
+      }
     }
   }
 </style>