<template>
|
<view>
|
<header-bar title="名片详情" :isBack="true" @click="back"></header-bar>
|
<scroll-view scroll-y="true" class="scroll-view">
|
<view class="card-container" v-if="businessInfo">
|
<!-- 名片头部 -->
|
<view class="card-header" :style="{backgroundColor: backgroundColor}">
|
<image v-if="businessInfo.background_image" class="card-bg" :src="businessInfo.background_image" mode="aspectFill"></image>
|
<view class="header-content">
|
<image class="avatar" :src="businessInfo.avatar || '/static/default.png'" mode="aspectFill"></image>
|
<view class="user-info">
|
<view class="name">{{businessInfo.real_name}}</view>
|
<view class="company">{{businessInfo.company_name}}</view>
|
<view class="position">{{businessInfo.position}}</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 公司Logo -->
|
<view class="logo-section" v-if="businessInfo.logo_image">
|
<image class="logo" :src="businessInfo.logo_image.file_path" mode="aspectFit"></image>
|
</view>
|
|
<!-- 联系信息 -->
|
<view class="contact-section">
|
<view class="section-title">联系方式</view>
|
|
<view class="contact-item" @click="makePhoneCall(businessInfo.phone)">
|
<view class="item-left">
|
<view class="icon-circle">
|
<text class="icon iconfont icon-phone"></text>
|
</view>
|
<text class="item-label">电话</text>
|
</view>
|
<view class="item-right">
|
<text class="item-value">{{businessInfo.phone}}</text>
|
<text class="icon iconfont icon-jiantou"></text>
|
</view>
|
</view>
|
|
<view class="contact-item" v-if="businessInfo.mobile" @click="makePhoneCall(businessInfo.mobile)">
|
<view class="item-left">
|
<view class="icon-circle">
|
<text class="icon iconfont icon-mobile"></text>
|
</view>
|
<text class="item-label">手机</text>
|
</view>
|
<view class="item-right">
|
<text class="item-value">{{businessInfo.mobile}}</text>
|
<text class="icon iconfont icon-jiantou"></text>
|
</view>
|
</view>
|
|
<view class="contact-item" v-if="businessInfo.email" @click="copyEmail(businessInfo.email)">
|
<view class="item-left">
|
<view class="icon-circle">
|
<text class="icon iconfont icon-email"></text>
|
</view>
|
<text class="item-label">邮箱</text>
|
</view>
|
<view class="item-right">
|
<text class="item-value">{{businessInfo.email}}</text>
|
<text class="icon iconfont icon-jiantou"></text>
|
</view>
|
</view>
|
|
<view class="contact-item" v-if="businessInfo.address" @click="openLocation(businessInfo.address)">
|
<view class="item-left">
|
<view class="icon-circle">
|
<text class="icon iconfont icon-location"></text>
|
</view>
|
<text class="item-label">地址</text>
|
</view>
|
<view class="item-right">
|
<text class="item-value">{{businessInfo.address}}</text>
|
<text class="icon iconfont icon-jiantou"></text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 详细信息 -->
|
<view class="detail-section">
|
<view class="section-title">详细信息</view>
|
|
<view class="detail-item" v-if="businessInfo.intro">
|
<view class="detail-label">个人简介</view>
|
<view class="detail-content">{{businessInfo.intro}}</view>
|
</view>
|
|
<view class="detail-item" v-if="businessInfo.business_scope">
|
<view class="detail-label">业务范围</view>
|
<view class="detail-content">{{businessInfo.business_scope}}</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 底部操作按钮 -->
|
<view class="action-section">
|
<view class="action-left">
|
<view class="action-btn" @click="saveCard" :class="{active: isSaved}">
|
<text class="icon iconfont" :class="isSaved ? 'icon-success' : 'icon-star'"></text>
|
<text>{{isSaved ? '已保存' : '收藏'}}</text>
|
</view>
|
</view>
|
<view class="action-right">
|
<view class="share-btn" @click="shareCard">分享名片</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
businessInfo: null,
|
business_card_id: '',
|
isSaved: false,
|
backgroundColor: '#37bde6',
|
loading: true
|
};
|
},
|
onLoad(options) {
|
if (options.business_card_id) {
|
this.business_card_id = options.business_card_id;
|
this.getBusinessDetail();
|
this.checkSavedStatus();
|
// 记录访问日志
|
this.recordVisit();
|
}
|
},
|
methods: {
|
back() {
|
uni.navigateBack();
|
},
|
// 获取名片详情
|
getBusinessDetail() {
|
let _this = this;
|
_this.loading = true;
|
_this._post('plus.business/business/detail', { business_card_id: _this.business_card_id }, function(res) {
|
_this.businessInfo = res.data;
|
// 设置背景色
|
if (_this.businessInfo.template && _this.businessInfo.template.style?.background?.color) {
|
_this.backgroundColor = _this.businessInfo.template.style.background.color;
|
}
|
_this.loading = false;
|
});
|
},
|
// 检查是否已保存
|
checkSavedStatus() {
|
let _this = this;
|
_this._post('plus.business/saving/check', { business_card_id: _this.business_card_id }, function(res) {
|
_this.isSaved = res.data.is_saved;
|
});
|
},
|
// 记录访问
|
recordVisit() {
|
let _this = this;
|
const params = {
|
business_card_id: _this.business_card_id
|
};
|
// 如果有推荐人ID，也记录下来
|
if (this.$route.query.referee_id) {
|
params.referee_id = this.$route.query.referee_id;
|
}
|
_this._post('plus.business/business/recordVisit', params, function() {
|
// 无需处理返回结果
|
});
|
},
|
// 拨打电话
|
makePhoneCall(phone) {
|
uni.makePhoneCall({
|
phoneNumber: phone
|
});
|
},
|
// 复制邮箱
|
copyEmail(email) {
|
uni.setClipboardData({
|
data: email,
|
success: () => {
|
this.showSuccess('邮箱已复制');
|
}
|
});
|
},
|
// 打开地图
|
openLocation(address) {
|
// 这里简化处理，实际项目中可能需要调用地图API进行地理编码
|
uni.openLocation({
|
latitude: 0,
|
longitude: 0,
|
name: address,
|
address: address,
|
scale: 18
|
});
|
},
|
// 保存名片
|
saveCard() {
|
let _this = this;
|
_this._post('plus.business/saving/save', { business_card_id: _this.business_card_id }, function(res) {
|
_this.isSaved = !_this.isSaved;
|
_this.showSuccess(_this.isSaved ? '保存成功' : '取消保存');
|
});
|
},
|
// 分享名片
|
shareCard() {
|
uni.showShareMenu({
|
withShareTicket: true,
|
menus: ['shareAppMessage', 'shareTimeline']
|
});
|
}
|
},
|
onShareAppMessage() {
|
if (this.businessInfo) {
|
return {
|
title: `${this.businessInfo.real_name}的电子名片`,
|
path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}&referee_id=${this.getUserId()}`
|
};
|
}
|
return {
|
title: '电子名片',
|
path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}`
|
};
|
},
|
onShareTimeline() {
|
if (this.businessInfo) {
|
return {
|
title: `${this.businessInfo.real_name}的电子名片`,
|
path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}&referee_id=${this.getUserId()}`
|
};
|
}
|
return {
|
title: '电子名片',
|
path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}`
|
};
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.scroll-view {
|
height: calc(100vh - 80rpx);
|
}
|
|
.card-header {
|
position: relative;
|
color: #fff;
|
padding: 40rpx;
|
|
.card-bg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 1;
|
opacity: 0.9;
|
}
|
|
.header-content {
|
position: relative;
|
z-index: 2;
|
display: flex;
|
align-items: center;
|
|
.avatar {
|
width: 180rpx;
|
height: 180rpx;
|
border-radius: 50%;
|
border: 6rpx solid rgba(255, 255, 255, 0.8);
|
background: #fff;
|
}
|
|
.user-info {
|
margin-left: 30rpx;
|
|
.name {
|
font-size: 48rpx;
|
font-weight: bold;
|
margin-bottom: 12rpx;
|
}
|
|
.company {
|
font-size: 34rpx;
|
margin-bottom: 8rpx;
|
opacity: 0.9;
|
}
|
|
.position {
|
font-size: 30rpx;
|
opacity: 0.8;
|
}
|
}
|
}
|
}
|
|
.logo-section {
|
background: #fff;
|
padding: 30rpx 0;
|
display: flex;
|
justify-content: center;
|
|
.logo {
|
width: 150rpx;
|
height: 150rpx;
|
border-radius: 10rpx;
|
}
|
}
|
|
.contact-section,
|
.detail-section {
|
background: #fff;
|
margin-top: 20rpx;
|
padding: 30rpx;
|
|
.section-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 20rpx;
|
padding-bottom: 20rpx;
|
border-bottom: 1rpx solid #f0f0f0;
|
}
|
|
.contact-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 25rpx 0;
|
border-bottom: 1rpx solid #f0f0f0;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.item-left {
|
display: flex;
|
align-items: center;
|
|
.icon-circle {
|
width: 60rpx;
|
height: 60rpx;
|
border-radius: 50%;
|
background: #f5f5f5;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 20rpx;
|
|
.icon {
|
font-size: 36rpx;
|
color: #37bde6;
|
}
|
}
|
|
.item-label {
|
font-size: 30rpx;
|
color: #666;
|
}
|
}
|
|
.item-right {
|
display: flex;
|
align-items: center;
|
|
.item-value {
|
font-size: 30rpx;
|
color: #333;
|
margin-right: 10rpx;
|
}
|
|
.icon {
|
font-size: 24rpx;
|
color: #999;
|
}
|
}
|
}
|
|
.detail-item {
|
margin-bottom: 30rpx;
|
|
.detail-label {
|
font-size: 30rpx;
|
font-weight: bold;
|
color: #666;
|
margin-bottom: 15rpx;
|
}
|
|
.detail-content {
|
font-size: 28rpx;
|
color: #333;
|
line-height: 1.6;
|
}
|
}
|
}
|
|
.action-section {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
background: #fff;
|
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.1);
|
display: flex;
|
padding: 20rpx;
|
z-index: 999;
|
|
.action-left {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
|
.action-btn {
|
display: flex;
|
align-items: center;
|
padding: 15rpx 30rpx;
|
border-radius: 30rpx;
|
border: 2rpx solid #37bde6;
|
color: #37bde6;
|
|
&.active {
|
background: #37bde6;
|
color: #fff;
|
}
|
|
.icon {
|
font-size: 28rpx;
|
margin-right: 10rpx;
|
}
|
}
|
}
|
|
.action-right {
|
flex: 2;
|
|
.share-btn {
|
width: 100%;
|
background: linear-gradient(90deg, #44bbff, #2b81ff);
|
color: #fff;
|
text-align: center;
|
padding: 24rpx 0;
|
border-radius: 30rpx;
|
font-size: 32rpx;
|
font-weight: bold;
|
}
|
}
|
}
|
</style>
|
