添加我的客户详情-联系人详情静态页面

src/assets/icon/edit.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="/&#231;&#188;&#150;&#232;&#190;&#145;/16" clip-path="url(#clip0_15512_7134)">
+<path id="Vector" d="M3.33325 12H6.15992C6.24766 12.0005 6.33463 11.9837 6.41586 11.9505C6.49708 11.9173 6.57096 11.8685 6.63325 11.8067L11.2466 7.18667L13.1399 5.33333C13.2024 5.27136 13.252 5.19762 13.2858 5.11638C13.3197 5.03515 13.3371 4.94801 13.3371 4.86C13.3371 4.77199 13.3197 4.68486 13.2858 4.60362C13.252 4.52238 13.2024 4.44864 13.1399 4.38667L10.3133 1.52667C10.2513 1.46418 10.1775 1.41458 10.0963 1.38074C10.0151 1.34689 9.92793 1.32947 9.83992 1.32947C9.75191 1.32947 9.66477 1.34689 9.58353 1.38074C9.50229 1.41458 9.42856 1.46418 9.36658 1.52667L7.48658 3.41333L2.85992 8.03333C2.79813 8.09563 2.74925 8.16951 2.71607 8.25073C2.68289 8.33195 2.66608 8.41893 2.66659 8.50667V11.3333C2.66659 11.5101 2.73682 11.6797 2.86185 11.8047C2.98687 11.9298 3.15644 12 3.33325 12ZM9.83992 2.94L11.7266 4.82667L10.7799 5.77333L8.89325 3.88667L9.83992 2.94ZM3.99992 8.78L7.95325 4.82667L9.83992 6.71333L5.88658 10.6667H3.99992V8.78ZM13.9999 13.3333H1.99992C1.82311 13.3333 1.65354 13.4036 1.52851 13.5286C1.40349 13.6536 1.33325 13.8232 1.33325 14C1.33325 14.1768 1.40349 14.3464 1.52851 14.4714C1.65354 14.5964 1.82311 14.6667 1.99992 14.6667H13.9999C14.1767 14.6667 14.3463 14.5964 14.4713 14.4714C14.5963 14.3464 14.6666 14.1768 14.6666 14C14.6666 13.8232 14.5963 13.6536 14.4713 13.5286C14.3463 13.4036 14.1767 13.3333 13.9999 13.3333Z" fill="#666666"/>
+</g>
+<defs>
+<clipPath id="clip0_15512_7134">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/baseComponents/TopBackNav.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="page_item top_header">
+        <div class="top_left">
+            <slot name="back">
+                <el-button class="button_default_background" @click="router.go(-1)">
+                    <el-icon class="img"><ArrowLeftBold /></el-icon>
+                    返回
+                </el-button>
+            </slot>
+        </div>
+        <div class="top_right">
+            <slot name="topRight"></slot>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+
+</script>
+
+<style lang="scss" scoped>
+
+
+.top_header{
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap:20px;
+    .top_left{
+        display: flex;
+        align-items: center;
+        gap:40px;
+        :deep(.button_default_background){
+            padding:8px 10px;
+            >span{
+                gap:4px;
+            }
+        }
+    }
+}
+</style>

src/layout/index.vue

@@ -8,14 +8,19 @@
 <!-- vue3 setup -->
 <script setup lang="ts">
 import {computed,ref} from 'vue'
+import { useStore } from 'vuex'
+import { useRoute } from 'vue-router'
 import Header from './components/header.vue'
 import AppMain from './components/AppMain.vue'
 
-import { useStore } from 'vuex'
-
 const store = useStore()
+const route = useRoute()
+
 // 此处要根据登录用户的权限 分条件展示 不同的内容
 const menuList =  computed(()=>{
+  if(route.path.startsWith('/main/myCustomerDetail')){
+    return []
+  }
   return store.state.siderNav
 })
 

src/router/index.ts

@@ -41,6 +41,11 @@ const routes: Array<RouteRecordRaw> = [
         name: 'myCustomer',   //我的客户
         component: () => import('../views/myCustomer/index.vue')
       },
+      {
+        path: 'myCustomerDetail',
+        name: 'myCustomerDetail',   //我的客户
+        component: () => import('../views/myCustomer/myCustomerDetail/index.vue')
+      },
       {
         path: 'customerFollowUp',
         name: 'customerFollowUp',   //客户跟进

src/views/customerFollowUp/index.vue

@@ -512,11 +512,12 @@ const HandleLogPaginaionChange = (params)=>{
                 color: #333333;
 
                 .status_tag {
-                    padding:4px 8px;
+                    height: 25px;
+                    padding:0 8px;
                     font-weight: 400;
                     font-size: 12px;
                     background: rgba(46,100,250,0.1);
-                    border-radius: 4px 4px 4px 4px;
+                    border-radius: 4px;
                     color: #2E64FA;
                 }
             }

src/views/myCustomer/index.vue

@@ -33,7 +33,7 @@
                 <template #operation="{row}">
                     <div class="table_row_option">
                         <span class="option_button_editor">编辑</span>
-                        <span class="option_button_editor">详情</span>
+                        <span class="option_button_editor" @click="GoToDetail(row)">详情</span>
                     </div>
                 </template>
             </Table>
@@ -45,12 +45,15 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import SearchBlock from '@/baseComponents/SearchBlock.vue';
 import {headerSearchList} from './searchBlock'
 import Table from '@/baseComponents/Table.vue';
 import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
 import {tableColumns} from './table'
 
+
+const router = useRouter()
 /**
  * 1. 默认列表 表格数据有关内容
  */
@@ -63,7 +66,7 @@ const tableData = ref([
         provinceName: '北京市',
         cityName: '西城区',
         groupName: '小组',
-        followUpUser: '张三',
+        owner: '张三',
         claimTime: '2026-03-11',
         lastFollowUpTime: '2026-03-11'
     },
@@ -75,7 +78,7 @@ const tableData = ref([
         provinceName: '北京市',
         cityName: '西城区',
         groupName: '小组',
-        followUpUser: '张三',
+        owner: '张三',
         claimTime: '2026-03-11',
         lastFollowUpTime: '2026-03-11'
     },
@@ -87,7 +90,7 @@ const tableData = ref([
         provinceName: '北京市',
         cityName: '西城区',
         groupName: '小组',
-        followUpUser: '张三',
+        owner: '张三',
         claimTime: '2025-11-01',
         lastFollowUpTime: '2025-11-01'
     }
@@ -115,6 +118,13 @@ const HandleBlurSearchChange = (params,key)=>{
     }
 }
 
+/**
+ * 3. 表格操作
+ */
+const GoToDetail = (row)=>{
+    router.push(`myCustomerDetail?id=${row.id}`)
+}
+
 
 </script>
 

src/views/myCustomer/myCustomerDetail/contactDetail/formSearchGroup.ts

@@ -0,0 +1,11 @@
+import { ref } from 'vue';
+
+
+export const formSearchList = ref([
+    {
+        key:'queryStr',
+        type:'input',
+        placeholder:'请输入关键字搜索',
+        defaultValue:'',
+    },
+])

src/views/myCustomer/myCustomerDetail/contactDetail/index.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="end_item">
+        <SearchBlock :searchList="blockSearchList" class="search_block">
+            <template #position>
+                <FormSearchGroup  :searchList="formSearchList" />
+            </template>
+        </SearchBlock>
+        <Table :currentPage="currentPage" 
+            :pageSize="pageSize" :totalNum="totalNum" 
+            :tableColumns="tableColumns" 
+            :tableData="tableData">
+            <template #num="{currentIndex}">
+                {{ (currentPage - 1) * pageSize + currentIndex }}
+            </template>
+            <template #operation="{row}">
+                <div class="table_row_option">
+                    <span class="option_button_editor">写跟进</span>
+                    <span class="option_button_editor">编辑</span>
+                    <span class="el_button_delete">删除</span>
+                </div>
+            </template>
+        </Table>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import SearchBlock from '@/baseComponents/SearchBlock.vue';
+import {blockSearchList} from'./searchBlock'
+import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
+import {formSearchList} from './formSearchGroup'
+import Table from '@/baseComponents/Table.vue';
+import {tableColumns} from './table'
+
+
+
+const currentPage = ref(1)
+const pageSize = ref(20)
+const totalNum = ref(0)
+
+
+const tableData = ref([
+  {
+    id: '1',
+    name: '严谨',
+    jobTitle: '校长',
+    mobilePhone: '172****9908',
+    officePhone: '17287889908',
+    remark: '备注文案',
+    lastFollowUpTime: '26-08-19 19:00',
+    creator: '李四',
+    createTime: '26-08-19 17:00'
+  },
+  {
+    id: '2',
+    name: '王诗雅',
+    jobTitle: '校长',
+    mobilePhone: '172****9908',
+    officePhone: '-', // 图片中显示为横杠
+    remark: '备注文案',
+    lastFollowUpTime: '26-08-19 19:00',
+    creator: '李四',
+    createTime: '26-08-19 17:00'
+  },
+  {
+    id: '3',
+    name: '赵子涵',
+    jobTitle: '教学校长',
+    mobilePhone: '172****9908',
+    officePhone: '172****9908', // 图片中该号码也进行了脱敏处理
+    remark: '备注文案',
+    lastFollowUpTime: '26-08-19 19:00',
+    creator: '李四',
+    createTime: '26-08-19 17:00'
+  }
+]);
+</script>
+
+
+<style lang="scss" scoped>
+ .end_item{
+        :deep(.search_block){
+            margin-bottom: 16px;
+            .content_left{
+                align-items: center;
+            }
+        }
+    }
+
+</style>

src/views/myCustomer/myCustomerDetail/contactDetail/searchBlock.ts

@@ -0,0 +1,17 @@
+import { ref } from 'vue';
+
+export const blockSearchList = ref([
+    {
+        label: '职务',
+        key: 'position',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '校长', value: 'schoolMaster' },
+            { label: '教学校长', value: 'principalOfTheSchool' },
+            { label: '教务主任', value: 'deanOfStudies' },
+            { label: '信息主任', value: 'informationDirector' },
+        ],
+        defaultValue: 'all'
+    }
+])

src/views/myCustomer/myCustomerDetail/contactDetail/table.ts

@@ -0,0 +1,85 @@
+import { ref } from 'vue';
+
+export const tableColumns = ref([
+  {
+    name: 'num',
+    label: '序号',
+    width: '60',
+    align: 'center',
+    custom: true,
+    hidden: false
+  },
+  {
+    name: 'name',
+    label: '姓名',
+    width: '100',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'jobTitle',
+    label: '职务',
+    width: '120',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'mobilePhone',
+    label: '手机号',
+    width: '140',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'officePhone',
+    label: '办公电话',
+    width: '140',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'remark',
+    label: '备注',
+    width: '150', 
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'lastFollowUpTime',
+    label: '上次跟进时间',
+    width: '180',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'creator',
+    label: '创建人',
+    width: '100',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'createTime',
+    label: '创建时间',
+    width: '180',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'operation',
+    label: '操作',
+    width: '150',
+    fixed: 'right', 
+    align: 'center',
+    custom: true, 
+    hidden: false
+  }
+]);

src/views/myCustomer/myCustomerDetail/index.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="main_container">
+        <TopBackNav>
+            <template #topRight>
+                <div class="header_content">
+                    <span>{{ customerBaseMsg.schoolName }}</span>
+                    <el-tag type="success" effect="light" size="small" class="status_tag">
+                        {{ customerBaseMsg.customerType }}
+                    </el-tag>
+                </div>
+                <div class="desc">
+                    <span>学段：{{ customerBaseMsg.educationStage }}</span>
+                    <span>省份：{{ customerBaseMsg.province }}</span>
+                    <span>地区：{{ customerBaseMsg.district }}</span>
+                    <span>地址：{{ customerBaseMsg.address }}</span>
+                    <span>归属人：{{ customerBaseMsg.owner }}</span>
+                    <span>认领时间：{{ customerBaseMsg.claimTime }}</span>
+                    <span>上次跟进时间：{{ customerBaseMsg.lastFollowUpTime }}</span>
+                </div>
+                <div class="action">
+                    <el-button class="button_background"><img :src="peopleEditIcon" alt=""> 写跟进</el-button>
+                    <el-button class="button_border"><img :src="addIcon" alt=""> 新增联系人</el-button>
+                    <el-button class="button_refresh"><img :src="editIcon" alt=""> 编辑</el-button>
+                    <el-button class="button_refresh"><img :src="poepleMoveIcon" alt=""> 转至公海</el-button>
+                    <el-button class="button_refresh"><img :src="exchangeIcon" alt=""> 转让</el-button>
+                    <el-button class="button_refresh"><img :src="logIcon" alt=""> 操作记录</el-button>
+                </div>
+            </template>
+        </TopBackNav>
+
+        <div class="page_item bottom_detail end_item">
+            <TabSearch :defaultTabKey="defaultShowTab" 
+                tabType="line" :tabList="tabList" 
+                @tabChange="HandleTabChange"
+                />
+            <div class="page_solid_line" />
+            <div class="page_jg_20"></div>
+            <ContactDetail v-if="defaultShowTab === 'contactDetails'"></ContactDetail>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import TopBackNav from '@/baseComponents/TopBackNav.vue';
+import addIcon from '@/assets/icon/add.svg';
+import peopleEditIcon from '@/assets/icon/people_edit.png'
+import poepleMoveIcon from '@/assets/icon/people_move.png'
+import editIcon from '@/assets/icon/edit.svg'
+import exchangeIcon from '@/assets/icon/exchange.png'
+import logIcon from '@/assets/icon/log.png'
+import TabSearch from '@/baseComponents/TabSearch.vue';
+import {tabList} from './tabSearch'
+import ContactDetail from './contactDetail/index.vue'
+
+const customerBaseMsg = ref({
+  schoolName: '北京市第一零九中学',
+  customerType: '首单客户',
+  educationStage: '九年一贯',
+  province: '北京',
+  district: '东城区',
+  address: '北京市东城区葱店西街56号',
+  owner: '张三',
+  claimTime: '2024-09-20',
+  lastFollowUpTime: '2025-03-12'
+});
+
+const defaultShowTab = ref('contactDetails')
+const HandleTabChange = (val)=>{
+    defaultShowTab.value = val
+}
+
+</script>
+
+
+
+<style lang="scss" scoped>
+.main_container{
+    gap:16px;
+
+    :deep(.top_right){
+        flex: 1 1;
+        .header_content{
+            display: flex;
+            align-items: center;
+            gap:10px;
+            font-weight: 600;
+            font-size: 20px;
+            color: #333333;
+            line-height: 28px;
+            .status_tag{
+                height: 25px;
+                border-radius: 4px ;
+                padding:0 8px;
+                font-weight: 400;
+                font-size: 12px;
+                color: #2E64FA;
+                background: rgba(46,100,250,0.1);
+            }
+        }
+        .desc{
+            display: flex;
+            gap:5px 16px;
+            flex-wrap: wrap;
+            font-size: 12px;
+            color: #999999;
+            margin-top: 8px;
+            margin-bottom: 16px;
+        }
+
+        .action{
+            display: flex;
+            gap:16px;
+            .el-button{
+                margin:0;
+                img{
+                    width: 16px;
+                    height: 16px;
+                    margin-right: 4px;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/myCustomer/myCustomerDetail/tabSearch.ts

@@ -0,0 +1,13 @@
+import { ref } from 'vue';
+
+
+export const  tabList = ref([
+    {
+        label:'信息概览',
+        key:'messageOverview',
+    },
+    {
+        label:'联系人详情',
+        key:'contactDetails',
+    },
+])

src/views/myCustomer/table.ts

@@ -66,7 +66,7 @@ export const tableColumns = ref([
         custom: false,
     },
     {
-        name: 'followUpUser',
+        name: 'owner',
         label: '归属人',
         width: '100',
         fixed: '',