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">
				<!-- 背景图 -->
				<image class="user-card-bg" src="/static/image/home/usecard-bg.png" />
		
				<!-- 左上：姓名 + 职位 -->
				<view class="user-header">
					<view class="name-row">
						<text class="user-name">赵建平</text>
						<text class="user-role">销售经理</text>
					</view>
					<text class="company-name">杭州碟滤膜技术有限公司</text>
				</view>
		
				<!-- 右上：头像 -->
				<view class="avatar-wrapper">
					<image class="avatar" src="/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">138-0000-0000</text>
					</view>
					<view class="contact-row">
						<uni-icons type="email" :size="18" color="#666666"></uni-icons>
						<text class="contact-text">zhao.jp@subote.com</text>
					</view>
					<view class="contact-row">
						<uni-icons type="location" :size="18" color="#666666"></uni-icons>
						<text class="contact-text">上海市静安区江宁路 168 号</text>
					</view>
				</view>
			</view>
			<view class="control-card">
				<view class="item">
					<image src="/static/image/public/card-sharing.png"></image>
					<text>分享名片</text>
				</view>
				<view class="item">
					<image src="/static/image/public/card-save.png"></image>
					<text>保存名片</text>
				</view>
				<view class="item">
					<image src="/static/image/public/card-qr.png"></image>
					<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">
					<text class="company-text">
						杭州碟滤膜技术有限公司是一家专注于膜技术研发、生产和销售的高新技术企业。公司主要产品包括各种规格的滤膜、过滤器及相关设备，广泛应用于医药、化工、食品、环保等领域。
					</text>
					<text class="company-text">
						公司拥有一支专业的研发团队和先进的生产设备，始终坚持"质量第一、客户至上"的经营理念，为客户提供优质的产品和服务。
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import NavBar from '@/components/nav-bar/index.vue'
	const currentTab = ref('products')

	const productList = ref([{
			id: 1,
			title: '惠普黑白激光打印机 选配小白盒巴',
			description: '打印机 | 惠普',
			image: '/static/image/product/product-1.png'
		},
	])

	const goBack = () => {
		uni.navigateBack()
	}

	const shareCard = () => {
		uni.showToast({
			title: '分享名片',
			icon: 'none'
		})
	}

	const saveCard = () => {
		uni.showToast({
			title: '保存名片',
			icon: 'none'
		})
	}

	const showQRCode = () => {
		uni.showToast({
			title: '名片码',
			icon: 'none'
		})
	}

	const switchTab = (tab) => {
		currentTab.value = tab
	}
</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;
				}
			}
		}
	}



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

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

		}
		.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;
					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;
				text-align: justify;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
</style>