boschchina-wechat-crm/components/user-card/index.vue

<template>
	<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">{{ info.nickName || '用户' }}</text>
				<text class="user-role">{{ info.jobTitle || '职位' }}</text>
			</view>
			<text class="company-name">{{ info.companyName || '公司名称' }}</text>
		</view>

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

		<!-- 左下:联系方式 -->
		<view class="user-contact">
			<view class="contact-row" @click="onCall">
				<uni-icons type="phone" :size="18" :color="isCall ? '#155DFC' : '#666666'"></uni-icons>
				<text style="flex: none;" class="contact-text" :class="{'call-highlight': isCall}">{{ info.phonenumber || '暂无电话' }}</text>
			</view>
			<view class="contact-row">
				<uni-icons type="email" :size="18" color="#666666"></uni-icons>
				<text class="contact-text">{{ info.email || '暂无邮箱' }}</text>
			</view>
			<view class="contact-row">
				<uni-icons type="location" :size="18" color="#666666"></uni-icons>
				<text class="contact-text">{{ info.companyAddress || '暂无地址' }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import UserAvatar from '@/components/user-avatar/index.vue'

	const props = defineProps({
		info: {
			type: Object,
			default: () => ({})
		},
		isCall:{
			type: Boolean,
			default: false
		}
	})

	const emit = defineEmits(['call'])

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

<style lang="scss" scoped>
	.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;
				position: relative;

				uni-icons {
					margin-right: 12rpx;
					flex-shrink: 0;
				}

				.contact-text {
					font-size: 26rpx;
					color: #666666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					flex: 1;
				}

				.call-btn {
					flex-shrink: 0;
					margin-left: 6rpx;
					font-size: 20rpx;
					color: #4080FF;
					border-radius: 20rpx;
					line-height: 1.6;
				}

				.call-highlight {
					color: #155DFC;
				}
			}
		}

	}
</style>