uniapp简单可分享的电子名片

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

1. <template>
2.         <view class="dianziminpianclass">
3.                 <view class="card" >
4.                         <u-line></u-line>
5.                         <p  style="font-size: 20px;font-weight: bold;" @click="getDetail('xxx公司', '公司名')">xxx公司</p>
6.                         <h1 @click="getDetail("XXX",'姓名')">XXX</h1>
7.                         <p style="margin-left: 40%;">职位</p>
8.                         <view class="contact-info" style="margin-left: 10%;">
9.                                 <view style="display: flex; ">
10.                                         <u-icon name="email-fill" color="white"></u-icon><p @click="getDetail("xxx@xxx.com",'邮箱')">xxx@xxx.com</p>
11.                                 </view>
12.                                 <view style="display: flex; ">
13.                                         <u-icon name="phone-fill" color="white"></u-icon><p @click="getDetail("1xxxxxxxxx",'手机')" @longpress="bodaPhone("1xxxxxxxxx")">1xxxxxxxxx</p>
14.                                 </view>
15.                                 <view style="display: flex; ">
16.                                         <u-icon name="phone" color="white"></u-icon><p @click="getDetail('xxxxxxx','座机')" @longpress="bodaPhone("xxxxxxx")">xxxxx</p>
17.                                 </view>
18.                                 <view style="display: flex; ">
19.                                         <u-icon name="map-fill" color="white"></u-icon><p @click="getDetail('地址111', '地址')">地址111</p>
20.                                 </view>
21.                                 <view style="display: flex; ">
22.                                         <u-icon name="server-fill" color="white"></u-icon><p @click="getDetail('4006-xx-xx', '客服电话')" @longpress="bodaPhone('4006-xx-xx')">4006-xx-xx</p>
23.                                 </view>
24.                                 <view style="display: flex; ">
25.                                         <u-icon name="coupon-fill" color="white"></u-icon><p @click="getDetail('xxxx', '税号')" @longpress="bodaPhone('xxx')">xxx</p>
26.                                 </view>
27.                         </view>
28.                 </view>
29.         </view>
30. </template>
32. <script>
34.         export default {
35.                 data() {
36.                         return {
37.                         }
38.                 },
39.                 mounted(){
40.                        
41.                 },
42.                
43.                 onLoad(options) {
44.                        
45.                         // 设置默认的转发参数
46.                         this.share = {
47.                                 title: `XX的名片`, // 默认为小程序名称
48.                                 path: `/pages/xxx/xx`, // 默认为当前页面路径
49.                                 imageUrl: 'https://xxxx/名片分享缩略图.png', // 默认为当前页面的截图
50.                                 desc: '公司名',
51.                                 content: `公司-XXX`
52.                         }
53.                 },
54.                 //分享好友
55.                 onShareAppMessage() {
56.                         return this.share
57.                 },
58.                 //朋友圈
59.                 onShareTimeline() {
60.                         return this.share
61.                 },
62.                 methods: {
63.                         // 点击复制
64.                         getDetail(info, name) {
65.                                 uni.setClipboardData({
66.                                                 data: info,
67.                                                 success: function() {
68.                                                         // console.log('success');
69.                                                         uni.showToast({
70.                                                                 title: '复制'+name,
71.                                                                 icon: 'success',
72.                                                                 duration: 2000
73.                                                         });
74.                                                 },
75.                                                 fail:(error)=> {
76.                                                         // console.log('失败',error);
77.                                                         uni.showToast({
78.                                                                 title: '复制'+name+'失败',
79.                                                                 icon: 'none'
80.                                                         });
81.                                                 }
82.                                
83.                                         })
84.                         },
85.                        
86.                         // 长按拨打电话
87.                         bodaPhone(phone){
88.                                 uni.makePhoneCall({
89.                                         phoneNumber: phone //仅为示例 this.servicePhone是你要拨打的电话号码
90.                                 });
91.                         }
93.                 }
94.         }
95. </script>
97. <style scoped>
98.         *{
99.                 user-select: all;
100.                 -moz-user-select: all;
101.                 -webkit-user-select: all;
102.                 -ms-user-select: all;
103.                 -ms-user-select: all;
104.         }
105. .dianziminpianclass {
106.        
107.         background: url('https://xxxxx/电子名片背景.jpg') no-repeat center center fixed; /* 替换为你的图片URL */
108.         background-size: cover; /* 图片适应屏幕 */
109.         margin: 0;
110.         padding: 0;
111.         height: 100vh;
112.         display: flex;
113.         justify-content: center;
114.         align-items: center;
115.        
116. }
118. .dianziminpianclass .card {
119.         background: rgba(0, 0, 0, 0.1);
120.         border-radius: 10px;
121.         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
122.         width: 90%;
123.         max-width: 360px;
124.         padding: 30px 20px;
125.         text-align: center;
126.         position: relative;
127.         overflow: hidden;
128.         transition: transform 0.3s, box-shadow 0.3s;
129.         backdrop-filter: blur(10px);
130. }
132. .dianziminpianclass .cardx {
133.         background: linear-gradient(135deg, #b5bfca, #769ec5);
134.         border-radius: 30px;
135.         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
136.         width: 90%;
137.         max-width: 360px;
138.         padding: 30px 20px;
139.         text-align: center;
140.         position: relative;
141.         overflow: hidden;
142.         transition: transform 0.3s, box-shadow 0.3s;
143. }
145. .dianziminpianclass .card:hover {
146.         transform: translateY(-5px);
147.         box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
148. }
150. .dianziminpianclass .card::before {
151.         content: '';
152.         position: absolute;
153.         width: 200px;
154.         height: 200px;
155.         background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
156.         top: -60px;
157.         left: -40px;
158.         transform: rotate(30deg);
159.         z-index: -1;
160.         border-radius: 50% 50% 50% 50%;
161. }
163. .dianziminpianclass .card h1 {
164.         font-size: 24px;
165.         margin: 10px 0;
166.         color: rgb(245, 245, 245);
167.         font-weight: 700;
168.         padding: 0 20px;
169.         position: relative;
170. }
171. .dianziminpianclass .card p {
172.         font-size: 16px;
173.         color: rgba(255, 255, 255, 0.8);
174.         margin: 10px 0;
175.         padding: 0 20px;
176. }
178. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。