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

<template>
	<scroll-view class="card-container" scroll-y @scroll="onScroll" :scroll-top="0">

		<!-- 顶部背景 -->
		<image class="top-bg" src="/static/image/home/top-bg.png" />
		
		<NavBar :title="'首页'" :show_back="false" :color="'#fff'" :fixed="true" :bgImg="'/static/image/home/top-bg.png'" :bg="'transparent'">
			<template #left>
				<!-- <view class="left-title">{{appName}}</view> -->
			</template>
		</NavBar>
		<!-- 名片卡片 -->
		<view class="page-top">
			<view class="user-card" id="user-card">
				<!-- 背景图 -->
				<image class="user-card-bg" src="/static/image/home/usecard-bg.png" />

				<!-- 左上:姓名 + 职位 -->
				<view class="user-header">
					<view class="name-row">
						<text class="user-name">{{ cardInfo.nickName || '用户' }}</text>
						<text class="user-role">{{ cardInfo.postName || '职位' }}</text>
					</view>
					<text class="company-name">{{ cardInfo.companyName || '公司名称' }}</text>
				</view>

				<!-- 右上:头像 -->
				<view class="avatar-wrapper">
					<UserAvatar :src="cardInfo.avatar" :name="cardInfo.nickName" :size="142"
						:badge-src="'/static/image/public/badge-icon.png'" :badge-size="56" />
				</view>

				<!-- 左下:联系方式 -->
				<view class="user-contact">
					<view class="contact-row" @click="makeCall">
						<uni-icons type="phone" :size="18" color="#666666"></uni-icons>
						<text class="contact-text">{{ cardInfo.phonenumber || '暂无电话' }}</text>
					</view>
					<view class="contact-row">
						<uni-icons type="email" :size="18" color="#666666"></uni-icons>
						<text class="contact-text">{{ cardInfo.email || '暂无邮箱' }}</text>
					</view>
					<view class="contact-row">
						<uni-icons type="location" :size="18" color="#666666"></uni-icons>
						<text class="contact-text">{{ cardInfo.companyAddress || '暂无地址' }}</text>
					</view>
				</view>
			</view>
			<ShareButton />
		</view>
		<view class="card-content">
			<!-- 企业简介 -->
			<CompanyIntroduce></CompanyIntroduce>
		</view>
		<!-- 隐藏的 Canvas 用于生成名片快照 -->
		<canvas id="posterCanvas" type="2d"
			style="position: fixed; left: -9999px; top: -9999px; width: 750px; height: 780px;"></canvas>

		<!-- 隐藏的 Canvas 用于生成二维码海报 -->
		<view class="hidden-canvas-box">
			<canvas id="qrPosterCanvas" type="2d" style="width: 600px; height: 700px;"></canvas>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onShareAppMessage
	} from '@dcloudio/uni-app';
	import NavBar from '@/components/nav-bar/index.vue'
	import UserAvatar from '@/components/user-avatar/index.vue'
	import EmptyState from '@/components/empty-state/index.vue'
	import ShareButton from '@/components/shareButton/index.vue'
	import CompanyIntroduce from '@/components/companyIntroduce/index.vue'
	import {
		useUserStore
	} from '@/store/modules/user.js'
	import {
		storeToRefs
	} from 'pinia'

	// 使用 Pinia 管理用户状态
	const userStore = useUserStore()
	const {
		cardInfo,
		companyInfo,
		cardImage
	} = storeToRefs(userStore)
	let appName = ref('')
	onShareAppMessage(() => {
		return {
			path: 'pages/splash/splash?userId=' + cardInfo.value.userId,
			imageUrl: cardImage.value,
			title: `${cardInfo.value.nickName} 向你分享了名片`
		};
	});
	// 导航栏滚动渐变
	const navBg = ref('transparent')
	const navColor = ref('#ffffff')
	const onScroll = (e) => {
		const scrollTop = e.detail.scrollTop
		if (scrollTop > 30) {
			navBg.value = '#ffffff'
			navColor.value = '#333333'
		} else {
			navBg.value = 'transparent'
			navColor.value = '#ffffff'
		}
	}

	const makeCall = () => {
		if (cardInfo.value.phonenumber) {
			uni.makePhoneCall({
				phoneNumber: cardInfo.value.phonenumber
			})
		} else {
			uni.showToast({
				title: '暂无电话号码',
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.card-container {
		background: #f5f6f8;
		height: 100vh;
	}

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

	.top-bg {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}

	// 顶部背景区域
	.header-bg {
		background: linear-gradient(135deg, #4A90E2 0%, #6FB3F2 50%, #87CEEB 100%);
		padding: 0 40rpx;
		padding-top: calc(var(--status-bar-height) + 20rpx);
		padding-bottom: 60rpx;
		position: relative;
		overflow: hidden;

		// 背景光效
		&::before {
			content: '';
			position: absolute;
			top: -100rpx;
			right: -100rpx;
			width: 500rpx;
			height: 500rpx;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
			border-radius: 50%;
		}

		// 导航栏
		.nav-bar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;
			position: relative;
			z-index: 10;

			.nav-back {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.nav-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #ffffff;
				text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
			}

			.nav-right {
				display: flex;
				align-items: center;

				.more-btn,
				.refresh-btn {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					background: rgba(255, 255, 255, 0.15);
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 16rpx;
				}
			}
		}
	}

	.page-top {
		margin: 0 24rpx 24rpx;

		.user-card {
			position: relative;
			z-index: 2;
			width: 100%;
			height: 400rpx;
			box-sizing: border-box;
			padding: 80rpx 40rpx 32rpx;
			position: relative;

			.user-card-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 0;
			}

			view,
			text {
				position: relative;
				z-index: 1;
			}

			.user-header {
				.name-row {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;

					.user-name {
						font-size: 44rpx;
						font-weight: 700;
						color: #202020;
						line-height: 1.2;
					}

					.user-role {
						margin-left: 16rpx;
						padding: 6rpx 16rpx;
						background: rgba(68, 110, 255, 0.10);
						border-radius: 8rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #446eff;
					}
				}

				.company-name {
					font-size: 28rpx;
					font-weight: 500;
					color: #666666;
					line-height: 1.4;
				}
			}

			.avatar-wrapper {
				position: absolute;
				top: 74rpx;
				right: 36rpx;
				z-index: 2;
			}

			.user-contact {
				margin-top: 32rpx;

				.contact-row {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
				

					/* 溢出部分用省略号代替 */
					uni-icons {
						margin-right: 12rpx;
						flex-shrink: 0;
					}

					.contact-text {
						font-size: 26rpx;
						color: #666666;
						overflow: hidden;
						/* 隐藏溢出的内容 */
						white-space: nowrap;
						/* 强制文本在一行内显示 */
						text-overflow: ellipsis;
					}
				}
			}

		}

	}

	// 名片内容区域
	.card-content {
		margin: 0 24rpx;
		padding: 20rpx 40rpx;
		border-radius: 24rpx;
		background: #ffffff;
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
		position: relative;
		bottom: 24rpx;
		z-index: 2;
	}

	// 隐藏的 canvas 容器
	.hidden-canvas-box {
		position: fixed;
		left: -9999px;
		top: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}
</style>