boschchina-wechat-crm/pages/index/components/card-preview.vue

<template>
	<view v-if="visible" class="card-preview-modal" @click="closeModal">
		<view class="modal-mask"></view>
		<view class="modal-content" @click.stop>
			<!-- 顶部用户信息卡片 -->
			<view class="user-card-header">
				<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 class="contact-row" @click="makeCall">
							<text class="contact-icon">📞</text>
							<text class="contact-text">138-0000-0000 (点击拨打电话)</text>
						</view>
						<view class="contact-row">
							<text class="contact-icon">✉️</text>
							<text class="contact-text">zhao.jp@subote.com</text>
						</view>
						<view class="contact-row">
							<text class="contact-icon">📍</text>
							<text class="contact-text">上海市静安区江宁路 168 号</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 二维码区域 -->
			<view class="qr-code-section">
				<view class="qr-code-wrapper">
					<image class="qr-code" src="/static/qr-code-default.png" mode="aspectFill" />
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="action-buttons">
				<view class="btn share-btn" @click="shareCard">
					<text class="btn-icon">🔗</text>
					<text class="btn-text">分享名片</text>
				</view>
				<view class="btn save-btn" @click="saveCard">
					<text class="btn-icon">⬇️</text>
					<text class="btn-text">保存名片</text>
				</view>
			</view>

			<!-- 标签页切换 -->
			<view class="tab-bar">
				<view 
				  class="tab-item" 
				  :class="{ active: activeTab === 'products' }"
				  @click="switchTab('products')"
				>
					<text class="tab-icon">📦</text>
					<text class="tab-text">产品列表</text>
				</view>
				<view 
				  class="tab-item" 
				  :class="{ active: activeTab === 'company' }"
				  @click="switchTab('company')"
				>
					<text class="tab-text">企业简介</text>
					<text class="tab-icon">🏢</text>
				</view>
			</view>

			<!-- 内容区域 -->
			<scroll-view class="content-area" scroll-y>
				<!-- 产品列表 -->
				<view v-if="activeTab === 'products'" class="product-list">
					<view class="product-item" v-for="(item, index) in products" :key="index">
						<view class="product-image">
							<image :src="item.image" mode="aspectFill" />
						</view>
						<view class="product-info">
							<text class="product-name">{{ item.name }}</text>
							<text class="product-desc">{{ item.category }} | {{ item.brand }}</text>
						</view>
					</view>
				</view>

				<!-- 企业简介 -->
				<view v-if="activeTab === 'company'" class="company-intro">
					<text class="intro-text">
						杭州臻迹膜技术有限公司 成立于 2015 年，是一家致力于为废水资源循环利用提供更高效、更经济、更简单的特种膜产品及其工艺技术的国家高新技术企业，集研发、设计、生产、销售、服务为一体。
					</text>
					<text class="intro-text">
						通过国际合作及自主研发结合的模式，现有主营产品 DTRO、STRO、TUF 管式软化膜、CTUF 半软化膜等多种特种膜组件及其撬装设备，推出了垃圾渗滤液 3.0 工艺、工业循环排污水 4.0 工艺等技术包，广泛应用于垃圾渗滤液、矿井废水、电镀废水、工业循环冷却水、半导体废水等行业。
					</text>
				</view>
			</scroll-view>

			<!-- 退出按钮 -->
			<view class="exit-btn" @click="closeModal">
				<text>退出预览</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'

// Props
defineProps({
	visible: {
		type: Boolean,
		default: false
	}
})

// Emits
const emit = defineEmits(['close', 'share', 'save'])

// 当前激活的标签页
const activeTab = ref('products')

// 产品列表
const products = reactive([
	{
		name: '惠普黑白激光打印机 选配小白盒巴',
		category: '打印机',
		brand: '惠普',
		image: '/static/product-printer.png'
	},
	{
		name: '惠普黑白激光打印机 选配小白盒巴',
		category: '打印机',
		brand: '惠普',
		image: '/static/product-printer.png'
	},
	{
		name: '惠普黑白激光打印机 选配小白盒巴',
		category: '打印机',
		brand: '惠普',
		image: '/static/product-printer.png'
	}
])

// 切换标签页
const switchTab = (tab) => {
	activeTab.value = tab
}

// 关闭弹窗
const closeModal = () => {
	emit('close')
}

// 拨打电话
const makeCall = () => {
	uni.makePhoneCall({
		phoneNumber: '13800000000'
	})
}

// 分享名片
const shareCard = () => {
	emit('share')
}

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

<style lang="scss" scoped>
.card-preview-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	
	.modal-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
	}
	
	.modal-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: #ffffff;
		border-radius: 32rpx 32rpx 0 0;
		max-height: 85vh;
		overflow-y: auto;
		animation: slideUp 0.3s ease-out;
	}
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

// 用户信息卡片头部
.user-card-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40rpx;
	border-radius: 32rpx 32rpx 0 0;
	
	.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: 36rpx;
					font-weight: 600;
					color: #ffffff;
				}
				
				.user-role {
					font-size: 22rpx;
					color: rgba(255, 255, 255, 0.9);
					background: rgba(255, 255, 255, 0.2);
					padding: 4rpx 12rpx;
					border-radius: 20rpx;
					margin-left: 12rpx;
				}
			}
			
			.company-name {
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.9);
				display: block;
				margin-bottom: 16rpx;
			}
			
			.contact-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);
				}
			}
		}
	}
}

// 二维码区域
.qr-code-section {
	padding: 40rpx;
	display: flex;
	justify-content: center;
	
	.qr-code-wrapper {
		width: 300rpx;
		height: 300rpx;
		background: #f5f6f8;
		border-radius: 16rpx;
		padding: 20rpx;
		
		.qr-code {
			width: 100%;
			height: 100%;
		}
	}
}

// 操作按钮
.action-buttons {
	display: flex;
	padding: 0 40rpx 32rpx;
	gap: 24rpx;
	
	.btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24rpx;
		border-radius: 32rpx;
		font-size: 28rpx;
		
		.btn-icon {
			margin-right: 8rpx;
			font-size: 32rpx;
		}
	}
	
	.share-btn {
		background: linear-gradient(135deg, #f0f4ff 0%, #e6ecff 100%);
		color: #667eea;
	}
	
	.save-btn {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #ffffff;
	}
}

// 标签页切换
.tab-bar {
	display: flex;
	border-bottom: 2rpx solid #f0f0f0;
	
	.tab-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 28rpx 0;
		font-size: 28rpx;
		color: #999999;
		position: relative;
		
		.tab-icon {
			margin: 0 8rpx;
			font-size: 32rpx;
		}
		
		&.active {
			color: #667eea;
			font-weight: 600;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 60rpx;
				height: 6rpx;
				background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
				border-radius: 3rpx;
			}
		}
	}
}

// 内容区域
.content-area {
	padding: 32rpx;
	min-height: 400rpx;
	overflow-y: auto;
}

// 产品列表
.product-list {
	.product-item {
		display: flex;
		padding: 24rpx;
		background: #f8f9fa;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		
		.product-image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 12rpx;
			background: #ffffff;
			margin-right: 24rpx;
			flex-shrink: 0;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}
		
		.product-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			.product-name {
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
				margin-bottom: 12rpx;
				line-height: 1.5;
			}
			
			.product-desc {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
}

// 企业简介
.company-intro {
	.intro-text {
		display: block;
		font-size: 28rpx;
		color: #666666;
		line-height: 1.8;
		margin-bottom: 24rpx;
		text-align: justify;
	}
}

// 退出按钮
.exit-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32rpx;
	margin: 0 40rpx 40rpx;
	background: #f8f9fa;
	border-radius: 32rpx;
	font-size: 28rpx;
	color: #666666;
}
</style>