diff --git a/components/customer/CustomerManagement.vue b/components/customer/CustomerManagement.vue index 4ab3cb4..48bd519 100644 --- a/components/customer/CustomerManagement.vue +++ b/components/customer/CustomerManagement.vue @@ -2,23 +2,30 @@ - 🔍 - - - 私有 - + + + + + + + 待跟进 + + 全部 + - 筛选 - @@ -185,6 +192,15 @@ import { getStatusListByFilter } from '@/utils/customerMappings'; +const SearchIcon = () => h('svg', { + width: 16, + height: 16, + viewBox: '0 0 16 16', + fill: 'currentColor' +}, [ + h('path', { d: 'M15.1 14.45L11.5 10.9C12.45 9.85 13 8.45 13 6.9C13 3.5 10.25 0.8 6.9 0.8C3.5 0.8 0.8 3.55 0.8 6.9C0.8 10.3 3.55 13 6.9 13C8.45 13 9.85 12.45 10.9 11.5L14.5 15.05C14.65 15.2 14.95 15.2 15.1 15.05C15.3 14.85 15.3 14.6 15.1 14.45ZM1.6 6.9C1.6 4 3.95 1.6 6.9 1.6C9.85 1.6 12.2 3.95 12.2 6.9C12.2 8.3 11.65 9.6 10.75 10.55C10.7 10.55 10.7 10.6 10.65 10.6C10.6 10.65 10.6 10.65 10.6 10.7C9.65 11.6 8.35 12.15 6.95 12.15C4 12.2 1.6 9.8 1.6 6.9Z' }) +]); + // 筛选状态 const userStore = useUserStore(); const { userInfo, privateView } = storeToRefs(userStore); @@ -329,15 +345,17 @@ const toggleFilter = (filterKey) => { if (!filterKey) return; const exists = selectedFilters.value.includes(filterKey); - if (exists) { - selectedFilters.value = selectedFilters.value.filter(item => item !== filterKey); + // 如果点击的是已选中的待跟进,则切换到全部(清空筛选) + if (exists && filterKey === TODAY_FOLLOW_FILTER) { + selectedFilters.value = []; return; } - const isTodayFilter = filterKey === TODAY_FOLLOW_FILTER; - if (isTodayFilter) { + // 如果点击待跟进,则只选中待跟进(清空其他筛选) + if (filterKey === TODAY_FOLLOW_FILTER) { selectedFilters.value = [TODAY_FOLLOW_FILTER]; } else { + // 其他筛选逻辑保持不变 selectedFilters.value = [ ...selectedFilters.value.filter(item => item !== TODAY_FOLLOW_FILTER), filterKey @@ -549,8 +567,8 @@ defineExpose({ .header { display: flex; align-items: center; - justify-content: space-between; - padding: 12px 16px; + gap: 16px; + padding: 5px 24px; background-color: #fff; border-bottom: 1px solid #e4e7ed; position: fixed; @@ -561,68 +579,78 @@ defineExpose({ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } -.header-title { - font-size: 18px; - font-weight: 600; - color: #303133; - letter-spacing: 0.5px; +//.search-icon { +// font-size: 18px; +// color: #606266; +// cursor: pointer; +// flex-shrink: 0; +// +// &:active { +// opacity: 0.7; +// } +//} + +.header-tabs { + display: flex; + align-items: center; + justify-content: center; + gap: 24px; + flex: 1; +} + +.tab-item { + font-size: 14px; + color: #909399; + padding: 8px 0; + cursor: pointer; + position: relative; + transition: all 0.3s ease; + + &.active { + color: #303133; + font-weight: 500; + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background-color: #409eff; + } + } + + &:active { + opacity: 0.7; + } } .filter-btn { display: flex; align-items: center; - gap: 6px; - padding: 6px 12px; - border-radius: 6px; - background-color: #f5f7fa; - transition: all 0.3s ease; + padding: 6px 0; cursor: pointer; + flex-shrink: 0; &:active { - background-color: #e4e7ed; - transform: scale(0.95); + opacity: 0.7; } } .filter-text { font-size: 14px; - color: #606266; + color: #303133; font-weight: 500; } -.today-follow-btn { - padding: 6px 12px; - font-size: 14px; - color: #606266; - background-color: #f5f7fa; - border-radius: 16px; - border: 1px solid transparent; - transition: all 0.3s ease; - - &.active { - background-color: #ecf5ff; - color: #409eff; - border-color: #409eff; - } -} - -.filter-icon { - font-size: 12px; - color: #909399; - transition: transform 0.3s ease; - - &.rotate { - transform: rotate(180deg); - } -} - /* 筛选面板 */ .filter-panel { background-color: #fff; padding: 16px; border-bottom: 1px solid #e4e7ed; position: fixed; - top: 52px; + top: 41px; right: 0; left: 0; z-index: 99;