添加我的客户静态页面

src/views/myCustomer/index.vue

@@ -1,15 +1,127 @@
 <template>
-    <div>
-        我的客户
+    <div class="main_container">
+        <div class="page_item end_item">
+            <div class="page_search">
+                <div class="search_content">
+                    <div class="content_left">
+                        <SearchBlock :searchList="headerSearchList"  @searchChange="HandleBlockSearchChange" />
+                    </div>
+                </div>
+            </div>
+            <FormSearchGroup :searchList="[
+                {
+                    key:'queryStr',
+                    type:'input',
+                    placeholder:'请输入关键字搜索',
+                    hidden:false,
+                    defaultValue:'',
+                    disabled:false
+                }
+            ]" @searchChange="HandleBlurSearchChange"/>
+
+
+            <Table :currentPage="currentPage" :pageSize="pageSize" :totalNum="totalNum" 
+                :tableColumns="tableColumns" :tableData="tableData">
+                <template #num="{currentIndex}">
+                    {{ (currentPage - 1) * pageSize + currentIndex }}
+                </template>
+                
+                <template #followUpContent="{row}">
+                    <span class="two_line_ellipsis">{{ row.followUpContent }}</span>
+                </template>
+
+                <template #operation="{row}">
+                    <div class="table_row_option">
+                        <span class="option_button_editor">编辑</span>
+                        <span class="option_button_editor">详情</span>
+                    </div>
+                </template>
+            </Table>
+
+        </div>
     </div>
 </template>
 
 
 <script setup lang="ts">
+import { computed, ref } from 'vue';
+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'
+
+/**
+ * 1. 默认列表 表格数据有关内容
+ */
+const tableData = ref([
+    {
+        id: 1,
+        customerType: '首单客户',
+        schoolName: '流星花园学校',
+        educationStage: '中学',
+        provinceName: '北京市',
+        cityName: '西城区',
+        groupName: '小组',
+        followUpUser: '张三',
+        claimTime: '2026-03-11',
+        lastFollowUpTime: '2026-03-11'
+    },
+    {
+        id: 2,
+        customerType: '首单客户',
+        schoolName: '北京师达',
+        educationStage: '中学',
+        provinceName: '北京市',
+        cityName: '西城区',
+        groupName: '小组',
+        followUpUser: '张三',
+        claimTime: '2026-03-11',
+        lastFollowUpTime: '2026-03-11'
+    },
+    {
+        id: 3,
+        customerType: '首单客户',
+        schoolName: '北京五十七中学',
+        educationStage: '中学',
+        provinceName: '北京市',
+        cityName: '西城区',
+        groupName: '小组',
+        followUpUser: '张三',
+        claimTime: '2025-11-01',
+        lastFollowUpTime: '2025-11-01'
+    }
+]);
+const currentPage = ref(1)
+const pageSize = ref(20)
+const totalNum = ref(0)
+
+
+/**
+ * 2.默认列表 筛选项有关数据
+ */
+const listSearchParams = ref({})
+const HandleBlockSearchChange = (params,key)=>{
+    listSearchParams.value = {
+        ...listSearchParams.value,
+        ...params
+    }
+}
+const HandleBlurSearchChange = (params,key)=>{
+    // console.log('blurl--',params)
+    listSearchParams.value = {
+        ...listSearchParams.value,
+        ...params
+    }
+}
+
 
 </script>
 
 
 <style lang="scss" scoped>
+.end_item{
+    gap:16px;
+}
 
 </style>

src/views/myCustomer/searchBlock.ts

@@ -0,0 +1,96 @@
+import { ref } from "vue";
+
+// 默认列表头部筛选配置
+export const headerSearchList = ref([
+    {
+        label: '类型',
+        key: 'type',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '首单客户', value: 'first_order' },
+            { label: '存量客户', value: 'existing_customer' },
+        ],
+        defaultValue: 'all'
+    },
+    {
+        label: '学段',
+        key: 'education_stage',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '幼儿园', value: 'kindergarten' },
+            { label: '小学', value: 'primary_school' },
+            { label: '初中', value: 'junior_high' },
+            { label: '高中', value: 'senior_high' },
+            { label: '完全中学', value: 'complete_middle' },
+            { label: '九年一贯', value: 'nine_year' },
+            { label: '十二年一贯', value: 'twelve_year' },
+            { label: '职高', value: 'vocational_high' },
+            { label: '大学', value: 'university' },
+        ],
+        defaultValue: 'all'
+    },
+    {
+        label: '省份',
+        key: 'province',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '北京', value: 'beijing' },
+            { label: '上海', value: 'shanghai' },
+            { label: '天津', value: 'tianjin' },
+            { label: '广东', value: 'guangdong' },
+            { label: '广西', value: 'guangxi' },
+        ],
+        defaultValue: 'all'
+    },
+    {
+        label: '地区',
+        key: 'region',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '东城区', value: 'dongcheng' },
+            { label: '西城区', value: 'xicheng' },
+            { label: '海淀区', value: 'haidian' },
+            { label: '朝阳区', value: 'chaoyang' },
+            { label: '丰台区', value: 'fengtai' },
+            { label: '石景山区', value: 'shijingshan' },
+        ],
+        defaultValue: 'all'
+    },
+    {
+        label: '分组',
+        key: 'group',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '分组1', value: 'group1' },
+            { label: '分组2', value: 'group2' },
+            { label: '分组3', value: 'group3' },
+            { label: '分组4', value: 'group4' },
+            { label: '分组5', value: 'group5' },
+            { label: '分组6', value: 'group6' },
+        ],
+        defaultValue: 'all'
+    },
+    {
+        label: '人员',
+        key: 'personnel',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '马丁', value: 'martin' },
+            { label: '王诗雅', value: 'wangshiya' },
+            { label: '王梓木', value: 'wangzimu' },
+            { label: '殷思源', value: 'yinsiyuan' },
+            { label: '付文杰', value: 'fuwenjie' },
+            { label: '李润曦', value: 'lirunxi' },
+        ],
+        defaultValue: 'all'
+    },
+]);
+
+
+

src/views/myCustomer/table.ts

@@ -0,0 +1,106 @@
+import { ref } from "vue";
+
+
+export const tableColumns = ref([
+    {
+        name: 'num',
+        label: '序号',
+        width: '60',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: true,
+    },
+    {
+        name: 'customerType',
+        label: '客户类型',
+        width: '100',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'schoolName',
+        label: '学校名称',
+        width: '150',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'educationStage',
+        label: '学段',
+        width: '80',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'provinceName',
+        label: '省份',
+        width: '100',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'cityName',
+        label: '城市',
+        width: '100',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'groupName',
+        label: '分组',
+        width: '100',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'followUpUser',
+        label: '归属人',
+        width: '100',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+
+    {
+        name: 'claimTime',
+        label: '认领时间',
+        width: '160',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+
+    {
+        name: 'lastFollowUpTime',
+        label: '上次跟进时间',
+        width: '160',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'operation',
+        label: '操作',
+        width: '80',
+        fixed: 'right',
+        align: 'center',
+        minWidth: '',
+        custom: true,
+    }
+]);