boschchina-wechat-crm/pages/mine/card.vue

<template>
	<view class="card-container">

		<!-- 顶部背景 -->
		<image class="top-bg" src="/static/image/home/top-bg.png" />
		<NavBar title="我的名片" color="#FFFFFF" :fixed="true" :bg="'transparent'"></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">
					<image class="avatar" :src="cardInfo.avatar || '/static/image/public/avatar-default.png'" />
					<image class="badge-icon" src="/static/image/public/badge-icon.png" />
				</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>


			<view class="control-card">
				<view class="item" @click="shareUserCard">
					<image src="/static/image/public/card-sharing.png"></image>
					<button open-type="share" class="text resetButton">分享名片</button>
				</view>
				<view class="item" @click="saveCard">
					<image src="/static/image/public/card-save.png"></image>
					<text class="text">保存名片</text>
				</view>
				<view class="item" @click="showQRCode">
					<image src="/static/image/public/card-qr.png"></image>
					<text class="text">名片码</text>
				</view>
			</view>
		</view>
		<view class="card-content">
			<!-- Tab 切换 -->
			<view class="tab-section">
				<view class="tab-wrapper">
					<view class="tab-item" :class="{ active: currentTab === 'products' }"
						@click="switchTab('products')">
						<text class="tab-text">产品列表</text>
						<view class="tab-indicator" v-if="currentTab === 'products'"></view>
					</view>
					<view class="tab-item" :class="{ active: currentTab === 'company' }" @click="switchTab('company')">
						<text class="tab-text">企业简介</text>
						<view class="tab-indicator" v-if="currentTab === 'company'"></view>
					</view>
				</view>
			</view>
			<!-- 产品列表 -->
			<view class="product-list" v-if="currentTab === 'products'">
				<view class="product-item" v-for="(item, index) in productList" :key="index">
					<image class="product-image" :src="item.image" mode="aspectFill" />
					<view class="product-info">
						<text class="product-title">{{ item.title }}</text>
						<text class="product-desc">{{ item.description }}</text>
					</view>
				</view>
			</view>
			<!-- 企业简介 -->
			<view class="company-section" v-if="currentTab === 'company'">
				<view class="company-content">
					<rich-text class="company-text" :nodes="companyInfo.introduce"></rich-text>
				</view>
			</view>
		</view>

		<!-- 隐藏的 Canvas 用于生成名片快照 -->
		<canvas id="posterCanvas" type="2d"
			style="position: fixed; left: -9999px; top: -9999px; width: 750px; height: 800px;"></canvas>

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

		<!-- 二维码弹窗 -->
		<uni-popup ref="qrPopup" type="top">
			<NavBar title="" color="#FFFFFF" :fixed="true" :bg="'transparent'"></NavBar>
			<view class="qr-popup">
				<view class="qr-header">
					<text class="qr-title">名片二维码</text>
					<text class="qr-subtitle">扫一扫查看我的名片信息</text>
				</view>
				<view class="qr-content">
					<image v-if="qrInfo && qrInfo.image"
						:src="qrInfo.image.startsWith('data:') ? qrInfo.image : 'data:image/png;base64,' + qrInfo.image"
						class="qr-image" mode="aspectFit" />
					<view v-else class="qr-loading">
						<text>加载中...</text>
					</view>
				</view>
				<view class="qr-actions">
					<view class="action-btn" @click="saveQRCode">
						<uni-icons type="download" size="24" color="#4080FF"></uni-icons>
						<text class="action-text">保存到相册</text>
					</view>
					<view class="action-btn" @click="handleShare">
						<uni-icons type="paperplane" size="24" color="#4080FF"></uni-icons>
						<!-- <button open-type="share" class="action-text">分享给好友</button> -->
						<text class="action-text">分享给好友</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onShareAppMessage
	} from '@dcloudio/uni-app';
	import NavBar from '@/components/nav-bar/index.vue'
	import {
		useUserStore
	} from '@/store/modules/user.js'
	import {
		storeToRefs
	} from 'pinia'
	import {
		generateCardPoster,
		savePosterToAlbum,
	} from '@/utils/poster.js'

	// 使用 Pinia 管理用户状态
	const userStore = useUserStore()
	const {
		cardInfo,
		companyInfo,
		qrInfo,
	} = storeToRefs(userStore)

	const currentTab = ref('products')
	// 名片快照图片路径
	const cardSnapshot = ref('')
	// 二维码海报图片路径
	const qrCodePoster = ref('')
	// 二维码弹窗引用
	const qrPopup = ref(null)
	const cardPopup = ref(null)

	const productList = ref([])
	onShareAppMessage(() => {
		return {
			userName: '小程序',
			path: 'pages/splash/splash?userId=' + cardInfo.value.userId,
		};
	});
	onMounted(async () => {
		// 如果没有数据,重新获取
		if (!cardInfo.value.nickName) {
			await userStore.queryCardInfo()
		}
		if (!companyInfo.value.name) {
			await userStore.queryCompanyInfo()
		}
	})

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

	// 生成名片快照并保存
	const saveCard = async () => {
		uni.showLoading({
			title: '生成快照中...',
			mask: true
		})

		try {

			// 生成名片快照
			const snapshotPath = await generateCardPoster(cardInfo.value)
			console.log(snapshotPath, "snapshotPathsnapshotPathsnapshotPath");
			// 用属性接收快照路径
			cardSnapshot.value = snapshotPath

			console.log('名片快照路径:', cardSnapshot.value)

			// 保存到相册
			await savePosterToAlbum(snapshotPath)

			uni.hideLoading()
			uni.showToast({
				title: '已保存到相册',
				icon: 'success'
			})
		} catch (error) {
			console.error('保存失败:', error)
			uni.hideLoading()
			uni.showToast({
				title: '保存失败，请重试',
				icon: 'none'
			})
		}
	}

	// 显示二维码
	const showQRCode = async () => {
		// 打开弹窗
		qrPopup.value.open()
	}

	const close = async () => {
		cardPopup.value.close()
	}

	const shareUserCard = async () => {
		const snapshotPath = await generateCardPoster(cardInfo.value)
		wx.showShareImageMenu({
			path: snapshotPath,
			success: () => {
				console.log('分享菜单已调起');
			},
			fail: (err) => {
				console.error('调起分享菜单失败', err);
			}
		});

	}


	const base64ToImage = async (base64Data) => {
		return new Promise((resolve, reject) => {
			try {
				const filePath = `${wx.env.USER_DATA_PATH}/temp_image.png`;
				let pureBase64Data = base64Data
				if (pureBase64Data.startsWith('data:image')) {
					pureBase64Data = pureBase64Data.replace(/^data:image\/\w+;base64,/, '');
				}
				const fs = wx.getFileSystemManager();
				fs.writeFile({
					filePath: filePath,
					data: pureBase64Data,
					encoding: 'base64',
					success: (res) => {
						console.log("resresweresresresres", res);
						resolve(filePath)
					},
					fail: (err) => {
						console.error('写入临时文件失败', err);
					}
				});
			} catch (error) {
				console.error('base64 转换异常:', error)
				reject(error)
			}
		})
	}
	const handleShare = async () => {
		const qrFilePath = await base64ToTempFile(qrInfo.value.image)
		wx.showShareImageMenu({
			path: qrFilePath,
			success: () => {
				console.log('分享菜单已调起');
			},
			fail: (err) => {
				console.error('调起分享菜单失败', err);
			}
		});
	}
	// 保存二维码到相册
	const saveQRCode = async () => {
		if (!qrInfo.value.image) {
			uni.showToast({
				title: '二维码图片不存在',
				icon: 'none'
			})
			return
		}

		try {
			// 将 base64 转换为临时文件
			const qrFilePath = await base64ToTempFile(qrInfo.value.image)
			// 保存到相册
			await savePosterToAlbum(qrFilePath)
			uni.showToast({
				title: '已保存到相册',
				icon: 'success'
			})
		} catch (error) {
			console.error('保存失败:', error)
			uni.showToast({
				title: '保存失败,请重试',
				icon: 'none'
			})
		}
	}



	const switchTab = (tab) => {
		currentTab.value = tab
	}
	// 将 base64 转换为临时文件路径
	const base64ToTempFile = async (base64Data) => {
		return new Promise((resolve, reject) => {
			try {
				// 移除 data:image/png;base64, 前缀(如果有)
				const pureBase64 = base64Data.replace(/^data:image\/\w+;base64,/, '')

				const fileName = `${Date.now()}_qrcode.png`
				const filePath = `${wx.env.USER_DATA_PATH}/${fileName}`
				const fs = uni.getFileSystemManager()
				fs.writeFile({
					filePath: filePath,
					data: pureBase64,
					encoding: 'base64',
					success: () => {
						console.log('base64 转文件成功:', filePath)
						resolve(filePath)
					},
					fail: (err) => {
						console.error('base64 转文件失败:', err)
						reject(err)
					}
				})
			} catch (error) {
				console.error('base64 转换异常:', error)
				reject(error)
			}
		})
	}
</script>

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

	.top-bg {
		width: 750rpx;
		height: 634rpx;
		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;
				}
			}
		}
	}


	.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: 32rpx;
			right: 40rpx;
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(21, 93, 252, 0.20);

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

			.badge-icon {
				width: 64rpx;
				height: 64rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				transform: translate(50% 50%);
				z-index: 1;
			}
		}

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

	}

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


		.control-card {
			background-color: #fff;
			border-radius: 0 0 24rpx 24rpx;
			position: relative;
			z-index: 1;
			bottom: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding-top: 48rpx;
			padding-bottom: 24rpx;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 4rpx;

				image {
					width: 64rpx;
					height: 64rpx;
				}

				.text {
					font-size: 26rpx !important;
					color: #202020;
				}
			}
		}


	}

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

	// Tab 切换区域
	.tab-section {
		border-radius: 24rpx 24rpx 0 0;
		padding: 0 40rpx;

		.tab-wrapper {
			display: flex;
			border-bottom: 1rpx solid #f0f0f0;

			.tab-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 32rpx 0;
				position: relative;

				.tab-text {
					font-size: 28rpx;
					color: #999999;
					font-weight: 500;
				}

				&.active .tab-text {
					color: #333333;
					font-weight: 600;
				}

				.tab-indicator {
					position: absolute;
					bottom: 0;
					width: 60rpx;
					height: 4rpx;
					background: linear-gradient(90deg, #4A90E2 0%, #6FB3F2 100%);
					border-radius: 2rpx;
				}
			}
		}
	}

	// 产品列表
	.product-list {
		padding: 24rpx 40rpx;

		.product-item {
			display: flex;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.product-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
				background: #f5f5f5;
				flex-shrink: 0;
				margin-right: 24rpx;
			}

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

				.product-title {
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 12rpx;
					line-height: 1.5;
				}

				.product-desc {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}

	// 企业简介
	.company-section {
		background: #ffffff;
		padding: 40rpx;

		.company-content {
			.company-text {
				display: block;
				font-size: 28rpx;
				color: #666666;
				line-height: 1.8;
				margin-bottom: 24rpx;

				::v-deep img {
					max-width: 100% !important;
				}

				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}

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

	// 二维码弹窗样式
	.qr-popup {
		margin: 100rpx auto;
		width: 600rpx;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 40rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);

		.qr-header {
			text-align: center;
			margin-bottom: 40rpx;

			.qr-title {
				display: block;
				font-size: 36rpx;
				font-weight: 600;
				color: #202020;
				margin-bottom: 12rpx;
			}

			.qr-subtitle {
				display: block;
				font-size: 26rpx;
				color: #999999;
			}
		}

		.qr-content {
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 400rpx;
			margin-bottom: 40rpx;

			.qr-image {
				width: 400rpx;
				height: 400rpx;
				border-radius: 16rpx;
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
			}

			.qr-loading {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.qr-actions {
			display: flex;
			justify-content: space-around;

			.action-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 12rpx;
				padding: 20rpx 40rpx;
				border-radius: 16rpx;
				background: rgba(64, 128, 255, 0.08);

				.action-text {
					&::after {
						border: none;
					}

					line-height: 1;
					background-color: transparent;
					font-size: 26rpx;
					color: #4080FF;
					font-weight: 500;
				}
			}
		}
	}

	.resetButton {
		background-color: transparent !important;
		border: none !important;
		display: inline !important;

		&::after {
			border: none !important;
		}

	}
</style>