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

<template>
	<view class="index-container">
		<!-- 顶部用户信息卡片 -->
		<view class="top-bg">

		</view>
		<NavBar title="" color="#020202" :fixed="true" :bg="'transparent'">
			<template #left>
				<view class="left-title">实践活动</view>
			</template>
		</NavBar>
		<view class="page-warp">
			<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">
						<view class="avatar-group">
							<image class="group-avatar" src="/static/avatar-1.png" mode="aspectFill" />
							<image class="group-avatar" src="/static/avatar-2.png" mode="aspectFill" />
							<image class="group-avatar" src="/static/avatar-3.png" mode="aspectFill" />
						</view>
						<text class="visitor-number">255 人</text>
					</view>
				</view>
				<view class="visitor-list">
					<view class="visitor-item">
						<view class="visitor-left">
							<view class="visitor-top">
								<view class="visitor-avatar">
									<image src="/static/avatar-default.png" mode="aspectFill" />
								</view>
								<view class="visitor-name-row">
									<text class="visitor-name">匿名用户</text>
									<text class="visitor-tag pending">待跟进</text>
								</view>
								<view class="view-more-btn" @click="viewAllVisitors">查看更多</view>
							</view>
							<view class="visitor-meta">
								<text class="meta-item">
									<text class="meta-label">来源：</text>
									<text class="meta-value">微信小程序</text>
								</text>
								<text class="meta-item">
									<text class="meta-label">手机：</text>
									<text class="meta-value">13822255555</text>
								</text>
							</view>
						</view>
						<view class="visitor-product">
							<image class="product-image" src="/static/product-printer.png" mode="aspectFit" />
							<view class="product-info">
								<text class="product-name">惠普黑白激光打印机 选配小白盒巴</text>
								<view>
									<text class="product-tag">打印机</text>
									<text class="product-brand">惠普</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 底部拖动条 -->
				<view class="drag-handle"></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>

		</view>
		
		<!-- 底部留白，避免被 TabBar 遮挡 -->
		<view class="bottom-spacer"></view>
		
		<!-- 名片预览弹窗 -->
		<CardPreview 
		  :visible="showPreview"
		  @close="closePreview"
		  @share="handleShareCard"
		  @save="handleSaveCard"
		/>
	</view>
</template>

<script setup>
	import NavBar from '@/components/nav-bar/index.vue'
	import CardPreview from './components/card-preview.vue'
	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 showPreview = ref(false)

	const shareCard = () => {
		showPreview.value = true
	}

	// 关闭预览弹窗
	const closePreview = () => {
		showPreview.value = false
	}

	// 分享名片
	const handleShareCard = () => {
		uni.showShareMenu({
			withShareTicket: true
		})
	}

	// 保存名片
	const handleSaveCard = () => {
		uni.showToast({
			title: '已保存到手机相册',
			icon: 'success'
		})
	}

	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;
	}

	.left-title {
		font-size: 44rpx;
		font-weight: bold;
		color: #ffffff;
		text-shadow: 2px 2px 0 black;
	}

	.top-bg {
		width: 750rpx;
		height: 634rpx;
		background: linear-gradient(180deg, #abc7ff 44%, #f4f5f9 100%);
		position: fixed;
		top: 0;
		left: 0;
	}

	.page-warp {
		position: relative;
		z-index: 2;
		padding: 20px;
	}

	/* 用户信息卡片 */
	.page-top {
		margin-bottom: 20rpx;

		.page-title {
			height: var(--status-bar-height);
		}

		.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;
						font-weight: 500;
						color: #202020;
					}

					.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 {
		padding: 20rpx;
		background: #f2f6ff;
		border: 2rpx solid rgba(255, 255, 255, 0.80);
		border-radius: 28rpx;

		.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;
				margin-left: 20rpx;

				.avatar-group {
					display: flex;
					margin-right: 12rpx;

					.group-avatar {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						border: 4rpx solid #ffffff;
						margin-left: -16rpx;

						&:first-child {
							margin-left: 0;
						}
					}
				}

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

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

		.visitor-list {
			background: #ffffff;
			border: 2rpx solid #ffffff;
			border-radius: 28rpx;

			.visitor-item {
				padding: 20rpx;

				.visitor-left {
					display: grid;

					.visitor-top {
						display: grid;
						grid-template-columns: auto 1fr auto;
						gap: 6rpx;
					}

					.visitor-name-row {
						display: flex;
						align-items: center;

						.visitor-name {
							font-size: 24rpx;
							font-weight: 500;
							color: #8390b1;
							margin: 0 10rpx;
						}

						.visitor-tag {
							width: 92rpx;
							height: 40rpx;
							text-align: center;
							line-height: 40rpx;
							border: 1.2rpx solid #ff9230;
							border-radius: 12rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #ff9230;
						}
					}

					.view-more-btn {
						font-size: 24rpx;
						color: #999999;
					}

					.visitor-avatar {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background: #ffffff;
						padding: 4rpx;
						box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

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



				.visitor-meta {
					display: flex;
					align-items: flex-start;
					margin-bottom: 16rpx;
					gap: 32rpx;

					.meta-item {
						display: flex;
						align-items: flex-start;

						.meta-label {
							font-size: 22rpx;
							color: #999999;
						}

						.meta-value {
							font-size: 22rpx;
							color: #666666;
						}
					}
				}

				.visitor-product {
					display: flex;
					align-items: flex-start;
					background: #ffffff;
					border-radius: 16rpx;
					padding: 16rpx;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

					.product-image {
						width: 72rpx;
						height: 72rpx;
						border-radius: 12rpx;
						background-color: #30cfd0;
						margin-right: 16rpx;
					}

					.product-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;

						.product-name {
							font-size: 24rpx;
							font-weight: 500;
							color: #08105c;
						}

						.product-tag,
						.product-brand {
							font-size: 20rpx;
							color: #999999;
							margin-right: 12rpx;
						}
					}
				}

			}
		}

		.drag-handle {
			width: 80rpx;
			height: 8rpx;
			background: rgba(0, 0, 0, 0.2);
			border-radius: 4rpx;
			margin: 24rpx auto 0;
		}
	}

	/* 功能菜单网格 */
	.function-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 24rpx;
		margin-top: 20rpx;
		padding: 32rpx 24rpx;
		height: 322rpx;
		background: linear-gradient(180deg, #eff6ff, #ffffff 42%);
		border: 2rpx solid #ffffff;
		border-radius: 28rpx;
		box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(178, 194, 208, 0.10);

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

			.grid-icon {
				width: 54rpx;
				height: 54rpx;
				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>