修改客户列表表头
This commit is contained in:
WindowBird
parent
68fa0c7c72
commit
b0821f340a
|
|
@ -2,23 +2,30 @@
|
|||
<view class="customer-management">
|
||||
<!-- 顶部标题栏 -->
|
||||
<view class="header">
|
||||
<text class="header-title" @click="goToCustomerSearch">🔍</text>
|
||||
<view style="display: flex; align-items: center; gap: 8px">
|
||||
<view v-if="showPrivateSwitch" style="display: flex;align-items: center;gap: 6px">
|
||||
<view>私有</view><uv-switch v-model="filterSelf"></uv-switch>
|
||||
</view>
|
||||
<view @click="goToCustomerSearch">
|
||||
<view style="height: 5px;"></view>
|
||||
<img src="https://api.ccttiot.com/image-1763782244238.png" alt="" style="width: 20px !important; height: 20px !important;">
|
||||
|
||||
</view>
|
||||
|
||||
<view class="header-tabs">
|
||||
<view
|
||||
class="today-follow-btn"
|
||||
class="tab-item"
|
||||
:class="{ 'active': isFilterSelected(TODAY_FOLLOW_FILTER) }"
|
||||
@click="toggleFilter(TODAY_FOLLOW_FILTER)"
|
||||
>
|
||||
待跟进
|
||||
</view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ 'active': isAllSelected }"
|
||||
@click="handleSelectAll"
|
||||
>
|
||||
全部
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-btn" @click="showFilter = !showFilter">
|
||||
<text class="filter-text">筛选</text>
|
||||
<text class="filter-icon" :class="{ 'rotate': showFilter }">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user