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="#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" :class="{activeCard:pageIn}">
			<swiper
				class="card-swiper"
				:current="currentIndex"
				@change="onSwiperChange"
				circular
				:indicator-dots="false"
				:autoplay="false"
			>
				<swiper-item v-for="(card, idx) in cardList" :key="card.userId || idx">
					<view class="swiper-item-wrapper">
						<UserCard :info="card" @call="makeCall" />
						<ShareButton />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="card-content" :class="{activeCard:pageIn}">
			<!-- 企业简介 -->
			<CompanyIntroduce></CompanyIntroduce>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	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 UserCard from '@/components/user-card/index.vue'
	import {
		useUserStore
	} from '@/store/modules/user.js'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onShareAppMessage
	} from '@dcloudio/uni-app';
	// 使用 Pinia 管理用户状态
	const userStore = useUserStore()
	const {
		cardInfo,
		cardList,
		currentIndex,
		cardImage
	} = storeToRefs(userStore)

	onShareAppMessage(() => {
		return {
			path: `pages/splash/splash?userId=${cardInfo.value.userId}&currentIndex=${currentIndex.value}`,
			imageUrl: cardImage.value,
			title:`${cardInfo.value.nickName} 向你分享了名片`
		};
	});

	let appName = ref('')

	// 入场动画
	const pageIn = ref(false)

	onMounted(() => {
		pageIn.value = true
	})

	const onSwiperChange = (e) => {
		userStore.setCurrentIndex(e.detail.current)
	}

	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;
	}
	.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;
		position: relative;
		z-index: 2;
		transform: scale(0.85);
	}

	// 名片轮播
	.card-swiper {
		height: 550rpx;
	}

	// 轮播索引指示器
	.swiper-indicator {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		margin-top: 16rpx;
		padding-bottom: 8rpx;

		.indicator-dot {
			width: 14rpx;
			height: 14rpx;
			border-radius: 50%;
			background: rgba(0, 0, 0, 0.15);
			transition: all 0.3s ease;

			&.active {
				width: 32rpx;
				border-radius: 8rpx;
				background: rgba(64, 128, 255, 0.8);
			}
		}
	}

	// 名片内容区域
	.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;
		transform: translateY(150rpx);
	}

	.activeCard {
		transform: none !important;
		transition: all 0.3s cubic-bezier(.68, -0.55, .265, 1.55);
	}
</style>