boschchina-wechat-crm/pages/index/index.vue

<template>
	<view class="index-container">
		<!-- 顶部用户信息卡片 -->
		<view class="page-top">
			<view class="user-card">
				<view class="user-info">
					<view class="avatar-wrapper">
						<image class="avatar" src="/static/avatar-default.png" mode="aspectFill" />
					</view>
					<view class="user-details">
						<view class="name-row">
							<text class="user-name">赵建平</text>
							<text class="user-role">销售经理</text>
						</view>
						<text class="company-name">杭州臻迹网络技术有限公司</text>
					</view>
				</view>
				<view class="user-address">
					<view class="row" @click="makeCall">
						<text class="contact-icon">📞</text>
						<text class="contact-text">400-0000-0000 (点击拨打电话)</text>
					</view>
					<view class="row">
						<text class="contact-icon">✉️</text>
						<text class="contact-text">zhao.jp@subote.com</text>
					</view>
					<view class="row">
						<text class="contact-icon">📍</text>
						<text class="contact-text">上海市静安区江宁路 168 号</text>
					</view>
				</view>

				<view class="share-btn" @click="shareCard">
					<text class="share-icon">📇</text>
					<text class="share-text">分享名片</text>
				</view>
			</view>
		</view>

		<!-- 最近访客模块 -->
		<view class="recent-visitors">
			<view class="section-header">
				<text class="section-title">最近访客</text>
				<view class="visitor-count">
					<image class="visitor-icon" src="/static/visitor-icon.png" mode="aspectFit" />
					<text class="visitor-number">258 人</text>
				</view>
				<text class="view-more" @click="viewAllVisitors">查看更多</text>
			</view>
			<view class="visitor-list">
				<view class="visitor-item">
					<view class="visitor-avatar">
						<image src="/static/avatar-1.png" mode="aspectFill" />
					</view>
					<view class="visitor-info">
						<view class="visitor-name-row">
							<text class="visitor-name">惠誉黑白激光打印机</text>
							<text class="visitor-tag">待跟进</text>
						</view>
						<text class="visitor-source">来源：微信小程序 手机：13622255856</text>
						<text class="visitor-action">打印机 | 惠普</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能菜单网格 -->
		<view class="function-grid">
			<view class="grid-item" @click="navigateTo('clue')">
				<view class="grid-icon clue-icon">
					<text class="icon-text">📋</text>
				</view>
				<text class="grid-label">线索管理</text>
			</view>
			<view class="grid-item" @click="navigateTo('customer')">
				<view class="grid-icon customer-icon">
					<text class="icon-text">🏢</text>
				</view>
				<text class="grid-label">客户管理</text>
			</view>
			<view class="grid-item" @click="navigateTo('contact')">
				<view class="grid-icon contact-icon">
					<text class="icon-text">👥</text>
				</view>
				<text class="grid-label">联系人管理</text>
			</view>
			<view class="grid-item" @click="navigateTo('public-pool')">
				<view class="grid-icon pool-icon">
					<text class="icon-text">🌊</text>
				</view>
				<text class="grid-label">客户公海</text>
			</view>
			<view class="grid-item" @click="navigateTo('opportunity')">
				<view class="grid-icon opportunity-icon">
					<text class="icon-text">💼</text>
				</view>
				<text class="grid-label">商机管理</text>
			</view>
			<view class="grid-item" @click="navigateTo('payment')">
				<view class="grid-icon payment-icon">
					<text class="icon-text">💰</text>
				</view>
				<text class="grid-label">回款管理</text>
			</view>
			<view class="grid-item" @click="navigateTo('product')">
				<view class="grid-icon product-icon">
					<text class="icon-text">📦</text>
				</view>
				<text class="grid-label">产品管理</text>
			</view>
			<view class="grid-item" @click="navigateTo('all')">
				<view class="grid-icon all-icon">
					<text class="icon-text">📊</text>
				</view>
				<text class="grid-label">全部</text>
			</view>
		</view>

		<!-- 业务日历模块 -->
		<view class="business-calendar">
			<view class="section-header">
				<text class="section-title">业务日历</text>
				<text class="view-more" @click="viewAllCalendar">查看更多</text>
			</view>

			<!-- 日历头部 -->
			<view class="calendar-header">
				<text class="calendar-month">2026 年 4 月</text>
			</view>

			<!-- 星期 -->
			<view class="calendar-weekdays">
				<text class="weekday">日</text>
				<text class="weekday">一</text>
				<text class="weekday">二</text>
				<text class="weekday">三</text>
				<text class="weekday">四</text>
				<text class="weekday">五</text>
				<text class="weekday">六</text>
			</view>

			<!-- 日期网格 -->
			<view class="calendar-dates">
				<view class="date-cell">
					<text class="date-num">15</text>
				</view>
				<view class="date-cell">
					<text class="date-num">16</text>
				</view>
				<view class="date-cell">
					<text class="date-num">17</text>
				</view>
				<view class="date-cell today">
					<text class="date-num current">18</text>
				</view>
				<view class="date-cell has-event">
					<text class="date-num">19</text>
					<view class="event-dot"></view>
				</view>
				<view class="date-cell">
					<text class="date-num">20</text>
				</view>
				<view class="date-cell">
					<text class="date-num">21</text>
				</view>
			</view>

			<!-- 今日日程 -->
			<view class="today-schedule">
				<view class="schedule-item">
					<view class="schedule-time">
						<text class="time-period">下午</text>
						<text class="time-value">3:00</text>
					</view>
					<view class="schedule-content">
						<text class="schedule-title">与李总沟通合同细节</text>
					</view>
				</view>
				<view class="schedule-item tomorrow">
					<view class="schedule-time">
						<text class="time-period">明天</text>
						<text class="time-value">10:00</text>
					</view>
					<view class="schedule-content">
						<text class="schedule-title">拜访新客户 - 科技公司</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部留白，避免被 TabBar 遮挡 -->
		<view class="bottom-spacer"></view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getUserInfo,
		isLogin
	} from '@/utils/userCache.js'

	const userInfo = ref(null)

	onMounted(() => {
		loadUserInfo()
	})

	const loadUserInfo = () => {
		const info = getUserInfo()
		if (info) {
			userInfo.value = info
		}
	}

	const makeCall = () => {
		uni.makePhoneCall({
			phoneNumber: '4000000000'
		})
	}

	const shareCard = () => {
		uni.showShareMenu({
			withShareTicket: true
		})
	}

	const viewAllVisitors = () => {
		uni.navigateTo({
			url: '/pages/visitors/list'
		})
	}

	const navigateTo = (page) => {
		uni.showToast({
			title: `功能开发中：${page}`,
			icon: 'none'
		})
	}

	const viewAllCalendar = () => {
		uni.navigateTo({
			url: '/pages/calendar/list'
		})
	}
</script>

<style lang="scss" scoped>
	.index-container {
		min-height: 100vh;
		background-color: #f5f6f8;
		padding-bottom: 120rpx;
	}

	/* 用户信息卡片 */
	.page-top {
		width: 750rpx;
		background: linear-gradient(180deg, #abc7ff 44%, #f4f5f9 100%);
		margin-bottom: 20rpx;
		padding: 20px;

		.user-card {
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 51%, rgba(255, 255, 255, 0.80) 100%), rgba(255, 255, 255, 0.20);
			border: 4rpx solid #fcf6ec;
			border-radius: 28rpx;
			padding: 20px;
			position: relative;
			.user-info {
				display: flex;
				align-items: flex-start;

				.avatar-wrapper {
					flex-shrink: 0;
					margin-right: 24rpx;

					.avatar {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						border: 4rpx solid rgba(255, 255, 255, 0.3);
					}
				}

				.user-details {
					flex: 1;

					.name-row {
						display: flex;
						align-items: center;
						margin-bottom: 12rpx;

						.user-name {
							font-size: 40rpx;
							font-weight: 600;
							text-align: LEFT;
							color: #202020;
							line-height: 50rpx;
							letter-spacing: 0.02rpx;
						}

						.user-role {
							margin-left: 10px;
							width: 108rpx;
							height: 40rpx;
							line-height: 40rpx;
							text-align: center;
							background: rgba(255, 255, 255, 0.90);
							border-radius: 8rpx;
							font-size: 22rpx;
							font-weight: 500;
							color: #456eff;
						}
					}

					.company-name {
						font-size: 26rpx;
						color: rgba(255, 255, 255, 0.9);
						display: block;
						margin-bottom: 16rpx;
					}

					.contact-row,
					.email-row,
					.address-row {
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;

						.contact-icon {
							font-size: 24rpx;
							margin-right: 8rpx;
						}

						.contact-text {
							font-size: 22rpx;
							color: rgba(255, 255, 255, 0.85);
						}
					}
				}
			}
			.user-address{
				display: grid;
				gap: 10rpx;
				.row{
					display: grid;
					grid-template-columns: 24px 1fr;
					gap: 6rpx;
					align-items: center;
					font-size: 24rpx;
					.contact-text{
						font-weight: 500;
						color: #666666;
					}
				}
			}
			.share-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(255, 255, 255, 0.2);
				align-self: flex-start;
				width: 204rpx;
				height: 66rpx;
				background: linear-gradient(90deg, #446dff, rgba(68, 109, 255, 0.30) 100%);
				border-radius: 8rpx 28rpx 8rpx 28rpx;
				box-sizing: border-box;
				position: absolute;
				top: -2rpx;
				right: -2rpx;
				.share-icon {
					font-size: 28rpx;
					margin-right: 8rpx;
				}

				.share-text {
					font-size: 26rpx;
					color: #ffffff;
				}
			}
		}

	}

	/* 最近访客模块 */
	.recent-visitors {
		background: #ffffff;
		margin: 20rpx;
		padding: 32rpx;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

		.section-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
			}

			.visitor-count {
				display: flex;
				align-items: center;

				.visitor-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}

				.visitor-number {
					font-size: 24rpx;
					color: #999999;
				}
			}

			.view-more {
				font-size: 24rpx;
				color: #667eea;
			}
		}

		.visitor-list {
			.visitor-item {
				display: flex;
				align-items: flex-start;

				.visitor-avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					flex-shrink: 0;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.visitor-info {
					flex: 1;

					.visitor-name-row {
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;

						.visitor-name {
							font-size: 28rpx;
							color: #333333;
							font-weight: 500;
						}

						.visitor-tag {
							font-size: 20rpx;
							color: #ff6b6b;
							background: rgba(255, 107, 107, 0.1);
							padding: 4rpx 12rpx;
							border-radius: 16rpx;
							margin-left: 12rpx;
						}
					}

					.visitor-source {
						font-size: 22rpx;
						color: #999999;
						display: block;
						margin-bottom: 8rpx;
					}

					.visitor-action {
						font-size: 22rpx;
						color: #666666;
					}
				}
			}
		}
	}

	/* 功能菜单网格 */
	.function-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 24rpx;
		background: #ffffff;
		margin: 20rpx;
		padding: 32rpx 24rpx;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

		.grid-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.grid-icon {
				width: 96rpx;
				height: 96rpx;
				border-radius: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 12rpx;

				.icon-text {
					font-size: 48rpx;
				}
			}

			.clue-icon {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			}

			.customer-icon {
				background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
			}

			.contact-icon {
				background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
			}

			.pool-icon {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			}

			.opportunity-icon {
				background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
			}

			.payment-icon {
				background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
			}

			.product-icon {
				background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
			}

			.all-icon {
				background: linear-gradient(135deg, #cd9cf2 0%, #f6f3ff 100%);
			}

			.grid-label {
				font-size: 24rpx;
				color: #333333;
			}
		}
	}

	/* 业务日历模块 */
	.business-calendar {
		background: #ffffff;
		margin: 20rpx;
		padding: 32rpx;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

		.section-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
			}

			.view-more {
				font-size: 24rpx;
				color: #667eea;
			}
		}

		.calendar-header {
			text-align: center;
			margin-bottom: 20rpx;

			.calendar-month {
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
			}
		}

		.calendar-weekdays {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			text-align: center;
			margin-bottom: 16rpx;

			.weekday {
				font-size: 24rpx;
				color: #999999;
				padding: 12rpx 0;
			}
		}

		.calendar-dates {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			gap: 8rpx;
			margin-bottom: 32rpx;

			.date-cell {
				aspect-ratio: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				position: relative;

				.date-num {
					font-size: 26rpx;
					color: #333333;
				}

				&.today {
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

					.date-num {
						color: #ffffff;
						font-weight: 600;
					}
				}

				&.has-event {
					.event-dot {
						width: 12rpx;
						height: 12rpx;
						background: #ff6b6b;
						border-radius: 50%;
						position: absolute;
						bottom: 8rpx;
					}
				}
			}
		}

		.today-schedule {
			.schedule-item {
				display: flex;
				align-items: flex-start;
				padding: 24rpx;
				background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
				border-radius: 16rpx;
				margin-bottom: 16rpx;
				border-left: 6rpx solid #667eea;

				&.tomorrow {
					border-left-color: #30cfd0;
				}

				.schedule-time {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 20rpx;
					min-width: 100rpx;

					.time-period {
						font-size: 22rpx;
						color: #999999;
						margin-bottom: 4rpx;
					}

					.time-value {
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
					}
				}

				.schedule-content {
					flex: 1;

					.schedule-title {
						font-size: 28rpx;
						color: #333333;
						line-height: 1.5;
					}
				}
			}
		}
	}

	.bottom-spacer {
		height: 40rpx;
	}
</style>