添加我的客户详情页面-信息概览内容

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

@@ -0,0 +1,377 @@
+<template>
+    <div class="message_overview">
+        <!-- 左侧：产品概览与最新状态 -->
+        <div class="left_panel">
+            <div class="product_summary">
+                <div class="summary_title">跟进产品总数 6</div>
+                <div class="summary_tags">
+                    <span>线索建立 2</span>
+                    <span>方案演示 1</span>
+                    <span>试用测试 1</span>
+                    <span>赢单 1</span>
+                </div>
+            </div>
+            
+            <div class="product_list">
+                <!-- 模拟列表项：选中状态 -->
+                <div class="list_item active">
+                    <div class="item_title">大数据精准教学</div>
+                    <div class="item_info">跟进状态：试用测试</div>
+                    <div class="item_info">联系人：张三 (校长)</div>
+                    <div class="item_info">上次跟进时间：26-08-12 8:00</div>
+                    <div class="item_info">跟进次数：6次</div>
+                </div>
+                <!-- 模拟列表项：普通状态 -->
+                <div class="list_item">
+                    <div class="item_title">智能判分系统</div>
+                    <div class="item_info">跟进状态：试用测试</div>
+                    <div class="item_info">联系人：张三 (校长)</div>
+                </div>
+                 <div class="list_item">
+                    <div class="item_title">材料采集系统</div>
+                    <div class="item_info">跟进状态：试用测试</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 中间：搜索与历史流程 -->
+        <div class="center_panel">
+            <SearchBlock :searchList="searchList"></SearchBlock>
+            <FollowCard style="margin-top: 16px;" :auditList="finalRenderData">
+                <template #operation="{row}">
+                    <div class="table_row_option">
+                        <span class="button_delete">取消预约</span>
+                        <span class="option_button_editor">详情</span>
+                    </div>
+                </template>
+            </FollowCard>
+            <div class="pagination_area">
+                <span>共 352 条数据</span>
+                <div class="pagination_controls">
+                    <span>20条/页</span>
+                    <span class="btn">&lt;</span>
+                    <span class="btn active">1</span>
+                    <span class="btn">2</span>
+                    <span class="btn">3</span>
+                    <span class="btn">&gt;</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 右侧：待办与统计 -->
+        <div class="right_panel">
+            <div class="pending_appointments">
+                <div class="panel_header">预约待办 (6项)</div>
+                
+                <div class="todo_card">
+                    <div class="card_top">
+                        <span class="time">26-02-19 16:00</span>
+                        <span class="title">大数据精准教学...</span>
+                        <div class="card_actions">
+                            <span class="link">取消</span>
+                            <span class="link">详情</span>
+                        </div>
+                    </div>
+                    <div class="card_tags">
+                        <span class="tag_btn primary">预约</span>
+                        <span class="tag_btn outline">方案演示</span>
+                    </div>
+                    <div class="card_info">
+                        跟进人：张三 &nbsp; 联系人：严谨 &nbsp; 职务：校长
+                    </div>
+                    <div class="card_desc">
+                        跟进内容：跟进文案跟进文案...北京市东城区惠店西街56号...
+                    </div>
+                </div>
+
+                <div class="todo_card">
+                     <div class="card_top">
+                        <span class="time">26-02-19 16:00</span>
+                        <span class="title">大数据精准教学</span>
+                    </div>
+                    <div class="card_tags">
+                        <span class="tag_btn warning">待办</span>
+                        <span class="tag_btn outline">试用测试</span>
+                    </div>
+                     <div class="card_info">
+                        跟进人：张三 &nbsp; 联系人：严谨 &nbsp; 职务：校长
+                    </div>
+                </div>
+            </div>
+
+            <div class="history_statistics">
+                <div class="stat_header">
+                    <span>历史跟进</span>
+                    <button class="history_btn">历史跟进</button>
+                </div>
+                <div class="stat_numbers">
+                    <div class="num_item">
+                        <div class="num">10</div>
+                        <div class="label">历史产品</div>
+                    </div>
+                    <div class="num_item">
+                        <div class="num">2</div>
+                        <div class="label">历史人员</div>
+                    </div>
+                    <div class="num_item">
+                        <div class="num">8</div>
+                        <div class="label">跟进次数</div>
+                    </div>
+                    <div class="num_item">
+                        <div class="num">8</div>
+                        <div class="label">赢单次数</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref,computed } from 'vue';
+import SearchBlock from '@/baseComponents/SearchBlock.vue';
+import { searchList } from './searchBlock';
+import FollowCard from '@/components/FollowCard.vue';
+
+// 注意：实际开发中可能需要引入 API 获取数据
+
+
+const auditList = ref([
+    {
+        id:'1',
+        followUpTime: '26-02-19 19:00',
+        schoolName: '北京师达学校',
+        followUpProduct: '大数据精准教学',
+        followUpStatus: '赢单',
+        followUpUser: '张三',
+        contactPerson: '严谨',
+        jobTitle: '校长',
+        followUpContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文'
+    },
+    {
+        id:'2',
+        followUpTime: '26-02-19 19:00',
+        schoolName: '北京师达学校',
+        followUpProduct: '大数据精准教学',
+        followUpStatus: '赢单',
+        followUpUser: '张三',
+        contactPerson: '严谨',
+        jobTitle: '校长',
+        followUpContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京\n文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号'
+    },
+     {
+        id:'3',
+        followUpTime: '26-02-19 19:00',
+        schoolName: '北京师达学校',
+        followUpProduct: '大数据精准教学',
+        followUpStatus: '赢单',
+        followUpUser: '张三',
+        contactPerson: '严谨',
+        jobTitle: '校长',
+        followUpContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京\n文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号'
+    }
+])
+
+
+const finalRenderData = computed(()=>{
+    return auditList.value.map(item=>{
+        return {
+            headerTitleList:[
+                item.followUpTime,
+                item.schoolName,
+                item.followUpProduct
+            ],
+            headerTags:[
+                item.followUpStatus,
+            ],
+            middleDesc:[
+                `跟进人：${item.followUpUser}`,
+                `联系人：${item.contactPerson}`,
+                `职务：${item.jobTitle}`
+            ],
+            bottomDesc:`跟进内容：${item.followUpContent}`
+        }
+    })
+})
+
+</script>
+
+<style lang="scss" scoped>
+// 定义一些基础颜色变量
+$primary-color: #1890ff;
+$text-main: #333;
+$text-secondary: #666;
+$text-light: #999;
+$border-color: #ebeef5;
+$bg-light: #f8fafc;
+
+.message_overview {
+    display: flex;
+    gap: 20px;
+    padding: 20px;
+    background-color: #fff;
+    font-size: 14px;
+    color: $text-main;
+
+    // 左侧栏样式
+    .left_panel {
+        width: 240px; // 稍微加宽以容纳内容
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+
+        .product_summary {
+            background: $bg-light;
+            border-radius: 8px;
+            padding: 16px;
+            border: 1px solid $border-color;
+
+            .summary_title {
+                font-weight: bold;
+                font-size: 16px;
+                margin-bottom: 12px;
+            }
+
+            .summary_tags {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 8px;
+                font-size: 12px;
+                color: $text-secondary;
+            }
+        }
+
+        .product_list {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+
+            .list_item {
+                padding: 12px;
+                border: 1px solid transparent;
+                border-radius: 4px;
+                cursor: pointer;
+                transition: all 0.3s;
+
+                &:hover {
+                    background-color: #f0f7ff;
+                }
+
+                &.active {
+                    background-color: #e6f7ff;
+                    border-left: 4px solid $primary-color;
+                    border-radius: 0 4px 4px 0; // 调整圆角以适应左边框
+                    
+                    .item_title {
+                        color: $primary-color;
+                        font-weight: bold;
+                    }
+                }
+
+                .item_title {
+                    font-size: 15px;
+                    margin-bottom: 8px;
+                }
+
+                .item_info {
+                    font-size: 12px;
+                    color: $text-secondary;
+                    line-height: 1.6;
+                }
+            }
+        }
+    }
+
+    // 中间栏样式
+    .center_panel {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        
+        .pagination_area {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 20px;
+            color: $text-secondary;
+            
+            .pagination_controls {
+                display: flex;
+                gap: 5px;
+                align-items: center;
+                
+                .btn {
+                    display: inline-block;
+                    min-width: 28px;
+                    height: 28px;
+                    line-height: 28px;
+                    text-align: center;
+                    border: 1px solid #d9d9d9;
+                    border-radius: 2px;
+                    cursor: pointer;
+                    
+                    &.active {
+                        background-color: $primary-color;
+                        color: #fff;
+                        border-color: $primary-color;
+                    }
+                }
+            }
+        }
+    }
+
+    // 右侧栏样式
+    .right_panel {
+        width: 320px;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+
+        .pending_appointments {
+            .panel_header {
+                font-size: 16px;
+                font-weight: bold;
+                margin-bottom: 12px;
+            }
+
+            .todo_card {
+                background: #fff;
+                border: 1px solid $border-color;
+                border-radius: 8px;
+                padding: 12px;
+                margin-bottom: 12px;
+                box-shadow: 0 2px 6px rgba(0,0,0,0.02);
+
+                .card_top {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-bottom: 8px;
+                    
+                    .time { font-weight: bold; margin-right: 8px;}
+                    .title { flex: 1; font-weight: bold; }
+                    
+                    .card_actions .link {
+                        font-size: 12px;
+                        color: $text-light;
+                        margin-left: 8px;
+                        cursor: pointer;
+                    }
+                }
+
+                .card_tags {
+                    margin-bottom: 8px;
+                    .tag_btn {
+                        display: inline-block;
+                        padding: 2px 8px;
+                        border-radius: 4px;
+                        font-size: 12px;
+                        // margin
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,62 @@
+import { ref } from "vue"
+
+export const searchList = ref([
+  {
+    label: '时间',
+    key: 'time',
+    type: 'single', // 对应图片中顶部的一行独立选项
+    defaultValue: 'all',
+    options: [
+      { label: '全部', value: 'all' },
+      { label: '今天', value: 'today' },
+      { label: '昨天', value: 'yesterday' },
+      { label: '近3天', value: 'last_3_days' },
+      { label: '近1周', value: 'last_1_week' },
+      { label: '近1月', value: 'last_1_month' },
+      { label: '自定义', value: 'custom' }
+    ]
+  },
+  {
+    label: '产品',
+    key: 'product',
+    type: 'single', // 对应图片中第二行选项
+    defaultValue: 'all',
+    options: [
+      { label: '全部', value: 'all' },
+      { label: '大数据教学诊断', value: 'big_data_teaching' },
+      { label: '智能判分', value: 'smart_grading' },
+      { label: '材料采集', value: 'material_collection' },
+      { label: '校内通知', value: 'school_notification' },
+      { label: '校本研修', value: 'school_research' },
+      { label: '协同备课', value: 'collaborative_lesson_prep' }
+    ]
+  },
+  {
+    label: '状态',
+    key: 'status',
+    type: 'single', // 对应图片中第三行选项
+    defaultValue: 'all',
+    options: [
+      { label: '全部', value: 'all' },
+      { label: '线索建立', value: 'lead_establishment' },
+      { label: '需求调研', value: 'requirement_survey' },
+      { label: '方案演示', value: 'solution_demo' },
+      { label: '试用测试', value: 'trial_test' },
+      { label: '项目搁置', value: 'project_shelved' },
+      { label: '输单', value: 'lost_order' },
+      { label: '赢单', value: 'won_order' }
+    ]
+  },
+  {
+    label: '职务',
+    key: 'job_title',
+    type: 'single', // 对应图片中第四行选项
+    defaultValue: 'all',
+    options: [
+      { label: '全部', value: 'all' },
+      { label: '校长', value: 'principal' },
+      { label: '副校长', value: 'vice_principal' },
+      { label: '信息主任', value: 'it_director' }
+    ]
+  }
+])

src/views/myCustomer/myCustomerDetail/index.vue

@@ -35,7 +35,10 @@
                 />
             <div class="page_solid_line" />
             <div class="page_jg_20"></div>
-            <ContactDetail v-if="defaultShowTab === 'contactDetails'"></ContactDetail>
+
+            <!-- 联系人详情 -->
+            <ContactDetail v-if="defaultShowTab === 'contactDetails'"/>
+            <CustomerStatusOverview v-if="defaultShowTab === 'messageOverview'"/>
         </div>
     </div>
 
@@ -62,10 +65,10 @@ 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'
 import FormDialog from '@/baseComponents/FormDialog.vue';
-
 import {formItemList} from './formDialog'
+import ContactDetail from './contactDetail/index.vue'
+import CustomerStatusOverview from './customerStatusOverview/index.vue'
 
 
 const customerBaseMsg = ref({
@@ -81,7 +84,7 @@ const customerBaseMsg = ref({
 });
 
 // 默认列表的tab切换
-const defaultShowTab = ref('contactDetails')
+const defaultShowTab = ref('messageOverview')
 const HandleTabChange = (val)=>{
     defaultShowTab.value = val
 }