|
|
@@ -6,7 +6,7 @@
|
|
|
<NavBar title="我的名片" color="#FFFFFF" :fixed="true" :bg="'transparent'"></NavBar>
|
|
|
<!-- 名片卡片 -->
|
|
|
<view class="page-top">
|
|
|
- <view class="user-card">
|
|
|
+ <view class="user-card" id="user-card">
|
|
|
<!-- 背景图 -->
|
|
|
<image class="user-card-bg" src="/static/image/home/usecard-bg.png" />
|
|
|
|
|
|
@@ -41,20 +41,20 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
<view class="control-card">
|
|
|
- <view class="item" @click="shareCard">
|
|
|
+ <view class="item">
|
|
|
<image src="/static/image/public/card-sharing.png"></image>
|
|
|
- <text>分享名片</text>
|
|
|
+ <button open-type="share" class="text resetButton">分享名片</button>
|
|
|
</view>
|
|
|
<view class="item" @click="saveCard">
|
|
|
<image src="/static/image/public/card-save.png"></image>
|
|
|
- <text>保存名片</text>
|
|
|
+ <text class="text">保存名片</text>
|
|
|
</view>
|
|
|
<view class="item" @click="showQRCode">
|
|
|
<image src="/static/image/public/card-qr.png"></image>
|
|
|
- <text>名片码</text>
|
|
|
+ <text class="text">名片码</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -101,7 +101,8 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 二维码弹窗 -->
|
|
|
- <uni-popup ref="qrPopup" type="center">
|
|
|
+ <uni-popup ref="qrPopup" type="top">
|
|
|
+ <NavBar title="" color="#FFFFFF" :fixed="true" :bg="'transparent'"></NavBar>
|
|
|
<view class="qr-popup">
|
|
|
<view class="qr-header">
|
|
|
<text class="qr-title">名片二维码</text>
|
|
|
@@ -120,64 +121,13 @@
|
|
|
<uni-icons type="download" size="24" color="#4080FF"></uni-icons>
|
|
|
<text class="action-text">保存到相册</text>
|
|
|
</view>
|
|
|
- <view class="action-btn" @click="shareQRCode">
|
|
|
+ <view class="action-btn">
|
|
|
<uni-icons type="paperplane" size="24" color="#4080FF"></uni-icons>
|
|
|
<button open-type="share" class="action-text">分享给好友</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
-
|
|
|
-
|
|
|
- <!-- 二维码弹窗 -->
|
|
|
- <uni-popup ref="cardPopup" type="center">
|
|
|
- <view class="qr-popup">
|
|
|
- <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">{{ cardInfo.nickName || '用户' }}</text>
|
|
|
- <text class="user-role">{{ cardInfo.postName || '职位' }}</text>
|
|
|
- </view>
|
|
|
- <text class="company-name">{{ cardInfo.companyName || '公司名称' }}</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 右上:头像 -->
|
|
|
- <view class="avatar-wrapper">
|
|
|
- <image class="avatar" :src="cardInfo.avatar || '/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">{{ cardInfo.phonenumber || '暂无电话' }}</text>
|
|
|
- </view>
|
|
|
- <view class="contact-row">
|
|
|
- <uni-icons type="email" :size="18" color="#666666"></uni-icons>
|
|
|
- <text class="contact-text">{{ cardInfo.email || '暂无邮箱' }}</text>
|
|
|
- </view>
|
|
|
- <view class="contact-row">
|
|
|
- <uni-icons type="location" :size="18" color="#666666"></uni-icons>
|
|
|
- <text class="contact-text">{{ cardInfo.companyAddress || '暂无地址' }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="qr-actions">
|
|
|
- <view class="action-btn" @click="close">
|
|
|
- <text>取消</text>
|
|
|
- </view>
|
|
|
- <view class="action-btn" @click="shareConfirm">
|
|
|
- <text class="action-text">确认</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -224,7 +174,6 @@
|
|
|
return {
|
|
|
userName: '小程序',
|
|
|
path: 'pages/splash/splash?userId=' + cardInfo.value.userId,
|
|
|
- title: '布尔销销乐',
|
|
|
};
|
|
|
});
|
|
|
onMounted(async () => {
|
|
|
@@ -249,50 +198,6 @@
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
- // 分享图片
|
|
|
- const shareConfirm = () => {
|
|
|
- wx.showShareImageMenu({
|
|
|
- path: shareImage.value,
|
|
|
- success() {
|
|
|
- // 分享菜单成功打开
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- // 分享名片
|
|
|
- const shareCard = async () => {
|
|
|
- uni.showLoading({
|
|
|
- title: '生成名片中...',
|
|
|
- mask: true
|
|
|
- })
|
|
|
-
|
|
|
- try {
|
|
|
- // 生成名片图片
|
|
|
- const cardPath = await generateCardPoster(cardInfo.value)
|
|
|
-
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- // 微信小程序：显示分享提示
|
|
|
- uni.hideLoading()
|
|
|
- cardPopup.value.open()
|
|
|
- // #endif
|
|
|
-
|
|
|
- // #ifndef MP-WEIXIN
|
|
|
- // H5 等其他平台：使用系统分享
|
|
|
- await shareImageToWeChat(cardPath)
|
|
|
- uni.hideLoading()
|
|
|
- uni.showToast({
|
|
|
- title: '分享成功',
|
|
|
- icon: 'success'
|
|
|
- })
|
|
|
- // #endif
|
|
|
- } catch (error) {
|
|
|
- console.error('分享失败:', error)
|
|
|
- uni.hideLoading()
|
|
|
- uni.showToast({
|
|
|
- title: '分享失败，请重试',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
// 生成名片快照并保存
|
|
|
const saveCard = async () => {
|
|
|
@@ -372,39 +277,7 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 分享二维码给好友
|
|
|
- const shareQRCode = async () => {
|
|
|
- if (!qrInfo.value.image) {
|
|
|
- uni.showToast({
|
|
|
- title: '二维码图片不存在',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- try {
|
|
|
- // 将 base64 转换为临时文件
|
|
|
- const qrFilePath = await base64ToTempFile(qrInfo.value.image)
|
|
|
- shareImage.value = 'data:image/png;base64,' + qrInfo.value.image
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
|
|
|
- // #endif
|
|
|
-
|
|
|
- // #ifndef MP-WEIXIN
|
|
|
- await shareImageToWeChat(qrFilePath)
|
|
|
- uni.showToast({
|
|
|
- title: '分享成功',
|
|
|
- icon: 'success'
|
|
|
- })
|
|
|
- // #endif
|
|
|
- } catch (error) {
|
|
|
- console.error('分享失败:', error)
|
|
|
- uni.showToast({
|
|
|
- title: '分享失败,请重试',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
const switchTab = (tab) => {
|
|
|
currentTab.value = tab
|
|
|
@@ -521,115 +394,115 @@
|
|
|
}
|
|
|
|
|
|
|
|
|
-.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;
|
|
|
- }
|
|
|
+ .user-card {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ width: 100%;
|
|
|
+ height: 400rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 80rpx 40rpx 32rpx;
|
|
|
+ position: relative;
|
|
|
|
|
|
- view,
|
|
|
- text {
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
+ .user-card-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
|
|
|
- .user-header {
|
|
|
- .name-row {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 16rpx;
|
|
|
+ view,
|
|
|
+ text {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
|
|
|
- .user-name {
|
|
|
- font-size: 44rpx;
|
|
|
- font-weight: 700;
|
|
|
- color: #202020;
|
|
|
- line-height: 1.2;
|
|
|
- }
|
|
|
+ .user-header {
|
|
|
+ .name-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
|
|
|
- .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;
|
|
|
- }
|
|
|
+ .user-name {
|
|
|
+ font-size: 44rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #202020;
|
|
|
+ line-height: 1.2;
|
|
|
}
|
|
|
|
|
|
- .company-name {
|
|
|
- font-size: 28rpx;
|
|
|
+ .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: #666666;
|
|
|
- line-height: 1.4;
|
|
|
+ color: #446eff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .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);
|
|
|
+ .company-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .avatar {
|
|
|
- border-radius: 50%;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ .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);
|
|
|
|
|
|
- .badge-icon {
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- transform: translate(50% 50%);
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
+ .avatar {
|
|
|
+ border-radius: 50%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
- .user-contact {
|
|
|
- margin-top: 32rpx;
|
|
|
+ .badge-icon {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ transform: translate(50% 50%);
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .contact-row {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 16rpx;
|
|
|
+ .user-contact {
|
|
|
+ margin-top: 32rpx;
|
|
|
|
|
|
- uni-icons {
|
|
|
- margin-right: 12rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
+ .contact-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
|
|
|
- .contact-text {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
+ uni-icons {
|
|
|
+ margin-right: 12rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
+ .contact-text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
+ }
|
|
|
+
|
|
|
/* 用户信息卡片 */
|
|
|
.page-top {
|
|
|
margin: 0 24rpx 24rpx;
|
|
|
|
|
|
-
|
|
|
+
|
|
|
.control-card {
|
|
|
background-color: #fff;
|
|
|
border-radius: 0 0 24rpx 24rpx;
|
|
|
@@ -654,8 +527,8 @@
|
|
|
height: 64rpx;
|
|
|
}
|
|
|
|
|
|
- text {
|
|
|
- font-size: 26rpx;
|
|
|
+ .text {
|
|
|
+ font-size: 26rpx !important;
|
|
|
color: #202020;
|
|
|
}
|
|
|
}
|
|
|
@@ -795,6 +668,7 @@
|
|
|
|
|
|
// 二维码弹窗样式
|
|
|
.qr-popup {
|
|
|
+ margin: 100rpx auto;
|
|
|
width: 600rpx;
|
|
|
background: #ffffff;
|
|
|
border-radius: 24rpx;
|
|
|
@@ -868,4 +742,15 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .resetButton {
|
|
|
+ background-color: transparent !important;
|
|
|
+ border: none !important;
|
|
|
+ display: inline !important;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
</style>
|
