客户列表
This commit is contained in:
WindowBird
parent
2b6278245d
commit
6bc8515f48
2
App.vue
2
App.vue
|
|
@ -8,7 +8,7 @@
|
|||
// 如果还没有 token，则设置一个测试 token
|
||||
const token = uni.getStorageSync('token')
|
||||
if (!token) {
|
||||
const testToken = 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImUzMDY4YzNjLThiOTMtNGExNy1hNmFlLWY1NDg5ZTJjYmYyOSJ9.k1cspIDAA_Z357hbRC0PY3PPwRLjTlvezrq37rgVVSYL_T11nDjF3IOWw7QZoEK1uZKYKNn_rAhuqKGOoopvWw'
|
||||
const testToken = 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImQ0ODJhYzdlLTBiYzgtNGFhNC1hMDI2LWVkMWU4YWQ3YmJkYiJ9._m4s6mcpjAHtk4u9r6LMMfIQHSCXDPCTfiWVOTyopZfbsxVFiLkY4ovec3M3u2E9KKm_jIH2fLhAduW4rfAZHQ'
|
||||
uni.setStorageSync('token', testToken)
|
||||
console.log('已设置测试 token:', testToken)
|
||||
}
|
||||
|
|
|
|||
100
common/api.js
100
common/api.js
|
|
@ -117,3 +117,103 @@ export const submitTask = ({ id, submitAttaches, submitRemark }) => {
|
|||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取客户列表
|
||||
* @param {Object} params 请求参数（可选）
|
||||
* @param {string[]} params.statusList 客户状态列表：["1"] 正在跟进, ["2"] 待跟进
|
||||
* @param {string} params.excludeld 排除id
|
||||
* @param {string[]} params.ids id列表
|
||||
* @param {string} params.intent 意向
|
||||
* @param {string} params.createDate 创建日期 (yyyy-MM-dd)
|
||||
* @param {string} params.joinUserld 参与人id
|
||||
* @param {string} params.lastFollowDate 上次跟进日期 (yyyy-MM-dd)
|
||||
* @param {string} params.nextFollowDate 下次跟进日期 (yyyy-MM-dd)
|
||||
* @param {string} params.nextFollowDateStart 下次跟进日期开始 (yyyy-MM-dd)
|
||||
* @param {string} params.nextFollowDateEnd 下次跟进日期结束 (yyyy-MM-dd)
|
||||
* @param {string[]} params.createDateRange 创建日期范围 (yyyy-MM-dd)
|
||||
* @param {string[]} params.saleList 销售列表
|
||||
* @returns {Promise} 返回客户列表 { total: number, rows: array }
|
||||
*/
|
||||
export const getCustomerList = (params = {}) => {
|
||||
const queryParams = [];
|
||||
|
||||
// 处理数组参数
|
||||
if (params.statusList && Array.isArray(params.statusList) && params.statusList.length > 0) {
|
||||
params.statusList.forEach(status => {
|
||||
queryParams.push(`statusList=${encodeURIComponent(status)}`);
|
||||
});
|
||||
}
|
||||
|
||||
if (params.ids && Array.isArray(params.ids) && params.ids.length > 0) {
|
||||
params.ids.forEach(id => {
|
||||
queryParams.push(`ids=${encodeURIComponent(id)}`);
|
||||
});
|
||||
}
|
||||
|
||||
if (params.createDateRange && Array.isArray(params.createDateRange) && params.createDateRange.length > 0) {
|
||||
params.createDateRange.forEach(date => {
|
||||
queryParams.push(`createDateRange=${encodeURIComponent(date)}`);
|
||||
});
|
||||
}
|
||||
|
||||
if (params.saleList && Array.isArray(params.saleList) && params.saleList.length > 0) {
|
||||
params.saleList.forEach(sale => {
|
||||
queryParams.push(`saleList=${encodeURIComponent(sale)}`);
|
||||
});
|
||||
}
|
||||
|
||||
// 处理字符串参数
|
||||
if (params.excludeld) {
|
||||
queryParams.push(`excludeld=${encodeURIComponent(params.excludeld)}`);
|
||||
}
|
||||
|
||||
if (params.intent) {
|
||||
queryParams.push(`intent=${encodeURIComponent(params.intent)}`);
|
||||
}
|
||||
|
||||
if (params.createDate) {
|
||||
queryParams.push(`createDate=${encodeURIComponent(params.createDate)}`);
|
||||
}
|
||||
|
||||
if (params.joinUserld) {
|
||||
queryParams.push(`joinUserld=${encodeURIComponent(params.joinUserld)}`);
|
||||
}
|
||||
|
||||
if (params.lastFollowDate) {
|
||||
queryParams.push(`lastFollowDate=${encodeURIComponent(params.lastFollowDate)}`);
|
||||
}
|
||||
|
||||
if (params.nextFollowDate) {
|
||||
queryParams.push(`nextFollowDate=${encodeURIComponent(params.nextFollowDate)}`);
|
||||
}
|
||||
|
||||
if (params.nextFollowDateStart) {
|
||||
queryParams.push(`nextFollowDateStart=${encodeURIComponent(params.nextFollowDateStart)}`);
|
||||
}
|
||||
|
||||
if (params.nextFollowDateEnd) {
|
||||
queryParams.push(`nextFollowDateEnd=${encodeURIComponent(params.nextFollowDateEnd)}`);
|
||||
}
|
||||
|
||||
const queryString = queryParams.length > 0 ? `?${queryParams.join('&')}` : '';
|
||||
|
||||
return uni.$uv.http.get(`bst/customer/list${queryString}`, {
|
||||
custom: {
|
||||
auth: true // 启用 token 认证
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取客户详情
|
||||
* @param {string} id 客户ID
|
||||
* @returns {Promise} 返回客户详情
|
||||
*/
|
||||
export const getCustomerDetail = (id) => {
|
||||
return uni.$uv.http.get(`customer/${id}`, {
|
||||
custom: {
|
||||
auth: true // 启用 token 认证
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
579
components/CustomerManagement.vue
Normal file
579
components/CustomerManagement.vue
Normal file
|
|
@ -0,0 +1,579 @@
|
|||
<template>
|
||||
<view class="customer-management">
|
||||
<!-- 顶部标题栏 -->
|
||||
<view class="header">
|
||||
<text class="header-title">客户管理</text>
|
||||
<view class="filter-btn" @click="showFilter = !showFilter">
|
||||
<text class="filter-text">筛选</text>
|
||||
<text class="filter-icon" :class="{ 'rotate': showFilter }">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 筛选区域（可选） -->
|
||||
<view class="filter-panel" v-if="showFilter">
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">状态：</text>
|
||||
<view class="filter-options">
|
||||
<text
|
||||
class="filter-option"
|
||||
:class="{ 'active': filterStatus === '' }"
|
||||
@click="filterStatus = ''"
|
||||
>全部</text>
|
||||
<text
|
||||
class="filter-option"
|
||||
:class="{ 'active': filterStatus === 'following' }"
|
||||
@click="filterStatus = 'following'"
|
||||
>正在跟进</text>
|
||||
<text
|
||||
class="filter-option"
|
||||
:class="{ 'active': filterStatus === 'pending' }"
|
||||
@click="filterStatus = 'pending'"
|
||||
>待跟进</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 客户列表 -->
|
||||
<scroll-view class="customer-list" scroll-y>
|
||||
<view
|
||||
class="customer-card"
|
||||
v-for="customer in filteredCustomers"
|
||||
:key="customer.id"
|
||||
@click="handleCustomerClick(customer)"
|
||||
>
|
||||
<!-- 客户信息区域 -->
|
||||
<view class="customer-header">
|
||||
<view class="customer-info">
|
||||
<text class="customer-name">{{ customer.name }}</text>
|
||||
<text class="last-followup">最后跟进: {{ formatDateTime(customer.lastFollowTime) }}</text>
|
||||
</view>
|
||||
<view class="status-indicator">
|
||||
<view
|
||||
class="status-dot"
|
||||
:class="getStatusClass(customer.status)"
|
||||
></view>
|
||||
<text class="status-text">{{ getStatusText(customer.status) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 客户星级 -->
|
||||
<view class="customer-rating">
|
||||
<text class="rating-label">客户星级:</text>
|
||||
<view class="stars">
|
||||
<text
|
||||
class="star"
|
||||
v-for="i in 5"
|
||||
:key="i"
|
||||
:class="{ 'filled': i <= getRatingFromIntentLevel(customer.intentLevel) }"
|
||||
>★</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分配用户 -->
|
||||
<view class="assigned-user">
|
||||
<image
|
||||
class="user-avatar"
|
||||
:src="customer.assignedUserAvatar || '/static/default-avatar.png'"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<text class="user-name">{{ customer.followName || '未分配' }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<view class="action-item" @click.stop="handleFollowup(customer)">
|
||||
<text class="action-icon" :class="{ 'checked': customer.status === '1' }">✓</text>
|
||||
<text class="action-text">跟进</text>
|
||||
</view>
|
||||
<view class="action-item" @click.stop="handleTasks(customer)">
|
||||
<text class="action-icon">☰</text>
|
||||
<text class="action-text">任务</text>
|
||||
</view>
|
||||
<view class="action-item" @click.stop="handleCall(customer)">
|
||||
<text class="action-icon">☎</text>
|
||||
<text class="action-text">电话</text>
|
||||
</view>
|
||||
<view class="action-item" @click.stop="handleMore(customer)">
|
||||
<text class="action-text">更多</text>
|
||||
<text class="action-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-if="filteredCustomers.length === 0 && !loading">
|
||||
<text class="empty-text">暂无客户数据</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-state" v-if="loading">
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 悬浮添加按钮 -->
|
||||
<FabPlus @click="handleAddCustomer" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import FabPlus from '@/components/FabPlus.vue';
|
||||
import { getCustomerList } from '@/common/api';
|
||||
|
||||
// 筛选状态
|
||||
const showFilter = ref(false);
|
||||
const filterStatus = ref('');
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 客户列表数据
|
||||
const customers = ref([]);
|
||||
|
||||
// 过滤后的客户列表
|
||||
const filteredCustomers = computed(() => {
|
||||
if (!filterStatus.value) {
|
||||
return customers.value;
|
||||
}
|
||||
// 将筛选状态映射到API状态值
|
||||
const statusMap = {
|
||||
'following': '1', // 正在跟进
|
||||
'pending': '2' // 待跟进
|
||||
};
|
||||
const targetStatus = statusMap[filterStatus.value];
|
||||
if (!targetStatus) {
|
||||
return customers.value;
|
||||
}
|
||||
return customers.value.filter(customer => customer.status === targetStatus);
|
||||
});
|
||||
|
||||
// 获取状态样式类
|
||||
const getStatusClass = (status) => {
|
||||
return {
|
||||
'status-following': status === '1', // 正在跟进
|
||||
'status-pending': status === '2' // 待跟进
|
||||
};
|
||||
};
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = {
|
||||
'1': '正在跟进',
|
||||
'2': '待跟进',
|
||||
'3': '其他',
|
||||
'4': '无效客户'
|
||||
};
|
||||
return statusMap[status] || '未知';
|
||||
};
|
||||
|
||||
// 根据意向等级获取星级（1=高=5星，2=中=3星）
|
||||
const getRatingFromIntentLevel = (intentLevel) => {
|
||||
const levelMap = {
|
||||
'1': 5, // 高意向 = 5星
|
||||
'2': 3 // 中意向 = 3星
|
||||
};
|
||||
return levelMap[intentLevel] || 0;
|
||||
};
|
||||
|
||||
// 格式化日期时间
|
||||
const formatDateTime = (dateTime) => {
|
||||
if (!dateTime) return '暂无';
|
||||
// 将 "2025-10-29 09:00:00" 格式化为 "2025-10-29 09:00"
|
||||
try {
|
||||
const date = new Date(dateTime);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||||
} catch (e) {
|
||||
return dateTime;
|
||||
}
|
||||
};
|
||||
|
||||
// 加载客户列表
|
||||
const loadCustomerList = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
// 构建请求参数
|
||||
const params = {};
|
||||
|
||||
// 根据筛选状态设置statusList参数
|
||||
if (filterStatus.value) {
|
||||
const statusMap = {
|
||||
'following': ['1'], // 正在跟进
|
||||
'pending': ['2'] // 待跟进
|
||||
};
|
||||
if (statusMap[filterStatus.value]) {
|
||||
params.statusList = statusMap[filterStatus.value];
|
||||
}
|
||||
}
|
||||
|
||||
// 调用 API 获取客户列表
|
||||
const res = await getCustomerList(params);
|
||||
|
||||
// API返回格式: { total: number, rows: array }
|
||||
if (res && res.rows && Array.isArray(res.rows)) {
|
||||
customers.value = res.rows;
|
||||
} else if (res && Array.isArray(res)) {
|
||||
// 兼容直接返回数组的情况
|
||||
customers.value = res;
|
||||
} else {
|
||||
customers.value = [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载客户列表失败:', error);
|
||||
uni.$uv.toast('加载客户列表失败');
|
||||
customers.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 处理客户点击
|
||||
const handleCustomerClick = (customer) => {
|
||||
console.log('点击客户:', customer);
|
||||
// 可以跳转到客户详情页
|
||||
// uni.navigateTo({
|
||||
// url: `/pages/customer-detail/index?id=${customer.id}`
|
||||
// });
|
||||
};
|
||||
|
||||
// 处理跟进
|
||||
const handleFollowup = (customer) => {
|
||||
console.log('跟进客户:', customer);
|
||||
// TODO: 调用 API 更新跟进状态
|
||||
// 这里可以跳转到跟进记录页面或打开跟进对话框
|
||||
uni.navigateTo({
|
||||
url: `/pages/customer-follow/index?customerId=${customer.id}&customerName=${customer.name}`
|
||||
});
|
||||
};
|
||||
|
||||
// 处理任务
|
||||
const handleTasks = (customer) => {
|
||||
console.log('查看客户任务:', customer);
|
||||
// 可以跳转到客户任务列表页
|
||||
uni.navigateTo({
|
||||
url: `/pages/customer-tasks/index?customerId=${customer.id}&customerName=${customer.name}`
|
||||
});
|
||||
};
|
||||
|
||||
// 处理电话
|
||||
const handleCall = (customer) => {
|
||||
console.log('拨打客户电话:', customer);
|
||||
// 使用 mobile 字段
|
||||
if (customer.mobile) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: customer.mobile,
|
||||
fail: (err) => {
|
||||
console.error('拨打电话失败:', err);
|
||||
uni.$uv.toast('拨打电话失败');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.$uv.toast('客户未设置电话号码');
|
||||
}
|
||||
};
|
||||
|
||||
// 处理更多
|
||||
const handleMore = (customer) => {
|
||||
console.log('更多操作:', customer);
|
||||
// 可以显示操作菜单
|
||||
uni.showActionSheet({
|
||||
itemList: ['编辑客户', '删除客户', '查看详情'],
|
||||
success: (res) => {
|
||||
console.log('选择了第' + (res.tapIndex + 1) + '个选项');
|
||||
// 根据选择执行相应操作
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 处理添加客户
|
||||
const handleAddCustomer = () => {
|
||||
console.log('添加新客户');
|
||||
// 跳转到添加客户页面
|
||||
uni.navigateTo({
|
||||
url: '/pages/add-customer/index'
|
||||
});
|
||||
};
|
||||
|
||||
// 监听筛选状态变化，重新加载数据
|
||||
watch(filterStatus, () => {
|
||||
loadCustomerList();
|
||||
});
|
||||
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
loadCustomerList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.customer-management {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 顶部标题栏 */
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.filter-icon {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
transition: transform 0.3s;
|
||||
|
||||
&.rotate {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 筛选面板 */
|
||||
.filter-panel {
|
||||
background-color: #fff;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filter-options {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-option {
|
||||
padding: 4px 12px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
|
||||
&.active {
|
||||
color: #1976d2;
|
||||
background-color: #e3f2fd;
|
||||
}
|
||||
}
|
||||
|
||||
/* 客户列表 */
|
||||
.customer-list {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
padding-bottom: 80px; /* 为底部导航栏留出空间 */
|
||||
}
|
||||
|
||||
.customer-card {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.customer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.customer-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.customer-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.last-followup {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
|
||||
&.status-following {
|
||||
background-color: #1976d2;
|
||||
}
|
||||
|
||||
&.status-pending {
|
||||
background-color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 客户星级 */
|
||||
.customer-rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.rating-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.stars {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.star {
|
||||
font-size: 16px;
|
||||
color: #ddd;
|
||||
|
||||
&.filled {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
/* 分配用户 */
|
||||
.assigned-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
|
||||
&.checked {
|
||||
color: #1976d2;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.action-arrow {
|
||||
font-size: 18px;
|
||||
color: #999;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,31 +1,37 @@
|
|||
<template>
|
||||
<!-- 顶部Tabs栏 -->
|
||||
<view class="fixed-tabs">
|
||||
<!-- 顶部Tabs栏（只在非客户管理页面显示） -->
|
||||
<view class="fixed-tabs" v-if="value !== 3">
|
||||
<uv-tabs :list="topTabs" :current="topTabValue" @click="clickTab"></uv-tabs>
|
||||
</view>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<view class="content-wrapper">
|
||||
<!-- 日程编辑 -->
|
||||
<ScheduleEditor
|
||||
v-if="topTabValue === 0"
|
||||
ref="scheduleEditorRef"
|
||||
:events="allEvents"
|
||||
@date-change="handleDateChange"
|
||||
/>
|
||||
<!-- 客户管理（底部导航栏选中时显示） -->
|
||||
<CustomerManagement v-if="value === 3" />
|
||||
|
||||
<!-- 内容看板 -->
|
||||
<ContentDashboard v-if="topTabValue === 1" />
|
||||
<!-- 其他内容（底部导航栏未选中客户管理时显示） -->
|
||||
<template v-else>
|
||||
<!-- 日程编辑 -->
|
||||
<ScheduleEditor
|
||||
v-if="topTabValue === 0"
|
||||
ref="scheduleEditorRef"
|
||||
:events="allEvents"
|
||||
@date-change="handleDateChange"
|
||||
/>
|
||||
|
||||
<!-- 待办事项 -->
|
||||
<TodoList v-if="topTabValue === 2" />
|
||||
<!-- 内容看板 -->
|
||||
<ContentDashboard v-if="topTabValue === 1" />
|
||||
|
||||
<!-- 消息内容 -->
|
||||
<MessageContent v-if="topTabValue === 3" />
|
||||
<!-- 待办事项 -->
|
||||
<TodoList v-if="topTabValue === 2" />
|
||||
|
||||
<!-- 消息内容 -->
|
||||
<MessageContent v-if="topTabValue === 3" />
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<!-- 悬浮新建按钮（只在日程编辑页显示） -->
|
||||
<FabPlus v-if="topTabValue === 0" @click="handleAddClick" />
|
||||
<FabPlus v-if="topTabValue === 0 && value !== 3" @click="handleAddClick" />
|
||||
|
||||
<!-- 新建日程弹窗（保留以备后用） -->
|
||||
<AddEventModal :show="showAdd" @ok="addEvent" @cancel="showAdd = false" />
|
||||
|
|
@ -53,6 +59,7 @@ import ScheduleEditor from '@/components/ScheduleEditor.vue';
|
|||
import ContentDashboard from '@/components/ContentDashboard.vue';
|
||||
import TodoList from '@/components/TodoList.vue';
|
||||
import MessageContent from '@/components/MessageContent.vue';
|
||||
import CustomerManagement from '@/components/CustomerManagement.vue';
|
||||
|
||||
// 顶部tabs选项
|
||||
const topTabs = [
|
||||
|
|
@ -179,9 +186,14 @@ onShow(() => {
|
|||
|
||||
.content-wrapper {
|
||||
padding-top: 8rpx;
|
||||
|
||||
overflow: hidden;
|
||||
margin-top: var(--status-bar-height, 0);
|
||||
|
||||
/* 客户管理页面不需要顶部 padding */
|
||||
:deep(.customer-management) {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.bottom-tabbar) { z-index: 1000 !important; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user