uniapp简单可分享的电子名片

微信小程序右上角三个点，分享好友和朋友圈，点击内容可以复制手机号，邮箱等，长按手机号可以直接到拨打电话界面

<template>
	<view class="dianziminpianclass">
		<view class="card" >
			<u-line></u-line>
			<p  style="font-size: 20px;font-weight: bold;" @click="getDetail('xxx公司', '公司名')">xxx公司</p>
			<h1 @click="getDetail("XXX",'姓名')">XXX</h1>
			<p style="margin-left: 40%;">职位</p>
			<view class="contact-info" style="margin-left: 10%;">
				<view style="display: flex; ">
					<u-icon name="email-fill" color="white"></u-icon><p @click="getDetail("xxx@xxx.com",'邮箱')">xxx@xxx.com</p>
				</view>
				<view style="display: flex; ">
					<u-icon name="phone-fill" color="white"></u-icon><p @click="getDetail("1xxxxxxxxx",'手机')" @longpress="bodaPhone("1xxxxxxxxx")">1xxxxxxxxx</p>
				</view>
				<view style="display: flex; ">
					<u-icon name="phone" color="white"></u-icon><p @click="getDetail('xxxxxxx','座机')" @longpress="bodaPhone("xxxxxxx")">xxxxx</p>
				</view>
				<view style="display: flex; ">
					<u-icon name="map-fill" color="white"></u-icon><p @click="getDetail('地址111', '地址')">地址111</p>
				</view>
				<view style="display: flex; ">
					<u-icon name="server-fill" color="white"></u-icon><p @click="getDetail('4006-xx-xx', '客服电话')" @longpress="bodaPhone('4006-xx-xx')">4006-xx-xx</p>
				</view>
				<view style="display: flex; ">
					<u-icon name="coupon-fill" color="white"></u-icon><p @click="getDetail('xxxx', '税号')" @longpress="bodaPhone('xxx')">xxx</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
			}
		},
		mounted(){
			
		},
		
		onLoad(options) {
			
			// 设置默认的转发参数
			this.share = {
				title: `XX的名片`, // 默认为小程序名称
				path: `/pages/xxx/xx`, // 默认为当前页面路径
				imageUrl: 'https://xxxx/名片分享缩略图.png', // 默认为当前页面的截图
				desc: '公司名',
				content: `公司-XXX`
			}
		},
		//分享好友
		onShareAppMessage() {
			return this.share
		},
		//朋友圈
		onShareTimeline() {
			return this.share
		},
		methods: {
			// 点击复制
			getDetail(info, name) {
				uni.setClipboardData({
						data: info,
						success: function() {
							// console.log('success');
							uni.showToast({
								title: '复制'+name,
								icon: 'success',
								duration: 2000
							});
						},
						fail:(error)=> {
							// console.log('失败',error);
							uni.showToast({
								title: '复制'+name+'失败',
								icon: 'none'
							});
						}
				
					})
			},
			
			// 长按拨打电话
			bodaPhone(phone){
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例 this.servicePhone是你要拨打的电话号码
				});
			}

		}
	}
</script>

<style scoped>
	*{
		user-select: all;
		-moz-user-select: all;
		-webkit-user-select: all;
		-ms-user-select: all;
		-ms-user-select: all;
	}
.dianziminpianclass {
	
	background: url('https://xxxxx/电子名片背景.jpg') no-repeat center center fixed; /* 替换为你的图片URL */
	background-size: cover; /* 图片适应屏幕 */
	margin: 0;
	padding: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

.dianziminpianclass .card {
	background: rgba(0, 0, 0, 0.1); 
	border-radius: 10px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
	width: 90%;
	max-width: 360px;
	padding: 30px 20px;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: transform 0.3s, box-shadow 0.3s;
	backdrop-filter: blur(10px); 
}

.dianziminpianclass .cardx {
	background: linear-gradient(135deg, #b5bfca, #769ec5);
	border-radius: 30px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
	width: 90%;
	max-width: 360px;
	padding: 30px 20px;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: transform 0.3s, box-shadow 0.3s;
}

.dianziminpianclass .card:hover {
	transform: translateY(-5px);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.dianziminpianclass .card::before {
	content: '';
	position: absolute;
	width: 200px;
	height: 200px;
	background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
	top: -60px;
	left: -40px;
	transform: rotate(30deg);
	z-index: -1;
	border-radius: 50% 50% 50% 50%;
}

.dianziminpianclass .card h1 {
	font-size: 24px;
	margin: 10px 0;
	color: rgb(245, 245, 245);
	font-weight: 700;
	padding: 0 20px;
	position: relative;
}
.dianziminpianclass .card p {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.8);
	margin: 10px 0;
	padding: 0 20px;
}

</style>