<template>
|
<view>
|
<!-- 名片展示区域 -->
|
<view class="content">
|
<view class="business-card">
|
<image style="width: 100%;" @tap="viewPicture(businessImage)" mode="widthFix" :src="businessImage">
|
</image>
|
</view>
|
|
<!-- 名片操作按钮 -->
|
<view class="action-buttons">
|
<view class="btn" @click="editCard()">编辑名片</view>
|
<view class="btn" @click="switchCard()">切换名片</view>
|
<view class="btn" @click="shareCard()">分享名片</view>
|
</view>
|
|
<!-- 数据统计区域 -->
|
<view class="statistics">
|
<view class="stat-item">
|
<view class="number">{{statistics.view_count || 0}}</view>
|
<view class="label">浏览次数</view>
|
</view>
|
<view class="stat-item">
|
<view class="number">{{statistics.save_count || 0}}</view>
|
<view class="label">保存次数</view>
|
</view>
|
<view class="stat-item">
|
<view class="number">{{statistics.share_count || 0}}</view>
|
<view class="label">分享次数</view>
|
</view>
|
</view>
|
|
<!-- 最近访客 -->
|
<view class="visitors">
|
<view class="section-title">
|
<text>最近访客</text>
|
<text class="more" @click="viewAllVisitors()">查看全部</text>
|
</view>
|
<view class="visitor-list">
|
<view class="visitor-item" v-for="(visitor, index) in visitors" :key="index">
|
<image class="visitor-avatar" :src="visitor.avatar || '/static/default.png'" mode="aspectFill">
|
</image>
|
<view class="visitor-info">
|
<view class="visitor-name">{{visitor.user_name || '未知访客'}}</view>
|
<view class="visitor-time">{{formatTime(visitor.visit_time)}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 切换名片弹窗 -->
|
<Popup :show="popupShow" type="bottom" :width="screenWidth" :mask-click="false">
|
<view class="popup-content">
|
<view class="popup-header">
|
<text class="title">选择名片</text>
|
<text class="close" @click="closePopup">×</text>
|
</view>
|
<scroll-view scroll-y="true" class="card-scroll">
|
<view class="card-item" v-for="(card, index) in businessList" :key="index"
|
:class="{active: index === current}" @click="selectCard(index)">
|
<view class="card-preview">
|
<image style="width: 650rpx;" :src="card.mp" mode="widthFix"></image>
|
</view>
|
<text v-if="index === current" class="icon iconfont icon-check"></text>
|
</view>
|
<view class="add-card" @click="addNewCard()">
|
<text class="icon iconfont icon-add"></text>
|
<text>添加新名片</text>
|
</view>
|
</scroll-view>
|
</view>
|
</Popup>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import Popup from '@/components/uni-popup.vue';
|
export default {
|
components: {
|
Popup,
|
},
|
data() {
|
return {
|
businessList: [],
|
current: 0,
|
statistics: {},
|
visitors: [],
|
loading: false,
|
page: 1,
|
search: '',
|
businessImage: '',
|
height: 0,
|
screenWidth: 0, // 屏幕宽度
|
popupShow: false
|
};
|
},
|
onLoad() {
|
this.init();
|
},
|
onShow() {
|
this.getbusinessList();
|
this.getVisitorList();
|
},
|
methods: {
|
/**
|
* 查看图片
|
* @param {Object} e
|
*/
|
viewPicture(e) {
|
uni.previewImage({
|
urls: [e]
|
})
|
},
|
back() {
|
uni.navigateBack();
|
},
|
init() {
|
this.getbusinessList();
|
//this.getStatistics();
|
this.getVisitorList();
|
const systemInfo = uni.getSystemInfoSync()
|
this.screenWidth = systemInfo.screenWidth * 2 - 70;
|
},
|
getbusinessList() {
|
let _this = this;
|
_this._post('plus.business.business/getList', {
|
user_id: uni.removeStorageSync('user_id')
|
}, function(res) {
|
_this.businessList = res.data.data;
|
if (_this.businessList.length > 0) {
|
_this.getbusiness(_this.businessList[_this.current].user_id)
|
_this.getCardStatistics(_this.businessList[_this.current].business_card_id);
|
}
|
});
|
},
|
getCardStatistics(business_card_id) {
|
let _this = this;
|
_this._post('plus.business.business/getStatistics', {
|
business_card_id: business_card_id
|
}, function(res) {
|
_this.statistics = res.data;
|
});
|
},
|
|
getStatistics(business_card_id) {
|
// 默认名片
|
let _this = this;
|
_this._post('plus.business.business/editDefault', {
|
business_card_id: business_card_id
|
}, function(res) {
|
_this.getbusinessList();
|
_this.getVisitorList();
|
});
|
},
|
getbusiness(user_id) {
|
this._get('plus.business.business/getDetail', {
|
user_id: user_id
|
}, res => {
|
this.businessImage = res.data.mp
|
this.height = res.data.height
|
this.business_card_id = res.data.business_card_id
|
})
|
},
|
getVisitorList() {
|
let _this = this;
|
_this._post('plus.business.saving/getList', {
|
page: 1,
|
list_rows: 10
|
}, function(res) {
|
_this.visitors = res.data.list;
|
});
|
},
|
makePhoneCall(phone) {
|
uni.makePhoneCall({
|
phoneNumber: phone
|
});
|
},
|
sendEmail(email) {
|
uni.setClipboardData({
|
data: email,
|
success: () => {
|
this.showSuccess('邮箱已复制');
|
}
|
});
|
},
|
editCard() {
|
if (this.businessList.length > 0) {
|
this.gotoPage(
|
`/pages/plus/business/add?business_card_id=${this.businessList[this.current].business_card_id}`
|
);
|
}
|
},
|
switchCard() {
|
this.popupShow = true;
|
//this.$refs.popup.open();
|
},
|
closePopup() {
|
this.popupShow = false;
|
//this.$refs.popup.close();
|
},
|
selectCard(index) {
|
this.current = index;
|
this.getStatistics(this.businessList[this.current].business_card_id);
|
this.closePopup();
|
},
|
addNewCard() {
|
//this.closePopup();
|
this.gotoPage('/pages/plus/business/add');
|
},
|
shareCard() {
|
// 分享名片逻辑
|
if (this.businessList.length > 0) {
|
uni.showShareMenu({
|
withShareTicket: true,
|
menus: ['shareAppMessage', 'shareTimeline'],
|
title: `${this.businessList[this.current].name}的电子名片`,
|
path: `/pages/plus/business/detail?business_card_id=${this.businessList[this.current].business_card_id}&referee_id=${this.getUserId()}`,
|
complete: function(res) {
|
console.log(res);
|
}
|
});
|
}
|
},
|
viewAllVisitors() {
|
// 查看全部访客
|
this.gotoPage('/pages/plus/business/visitors');
|
},
|
formatTime(time) {
|
if (!time) return '';
|
const date = new Date(time);
|
const now = new Date();
|
const diff = now - date;
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
if (days === 0) {
|
return '今天 ' + date.getHours() + ':' + (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
|
} else if (days === 1) {
|
return '昨天 ' + date.getHours() + ':' + (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
|
} else if (days < 7) {
|
return days + '天前';
|
} else {
|
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
|
}
|
}
|
},
|
onShareAppMessage() {
|
if (this.businessList.length > 0) {
|
return {
|
title: `${this.businessList[this.current].name}的电子名片`,
|
path: `/pages/plus/business/detail?business_card_id=${this.businessList[this.current].business_card_id}&referee_id=${this.getUserId()}`
|
};
|
}
|
return {
|
title: '电子名片',
|
path: '/pages/plus/business/index'
|
};
|
},
|
onShareTimeline() {
|
if (this.businessList.length > 0) {
|
return {
|
title: `${this.businessList[this.current].name}的电子名片`,
|
path: `/pages/plus/business/detail?business_card_id=${this.businessList[this.current].business_card_id}&referee_id=${this.getUserId()}`
|
};
|
}
|
return {
|
title: '电子名片',
|
path: '/pages/plus/business/index'
|
};
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.content {
|
padding: 20rpx;
|
}
|
|
.business-card {
|
background: #fff;
|
border-radius: 20rpx;
|
overflow: hidden;
|
|
.top-image {
|
width: 100%;
|
height: 300rpx;
|
display: block;
|
}
|
|
.business-info {
|
padding: 20rpx;
|
display: flex;
|
align-items: center;
|
|
.avatar {
|
width: 150rpx;
|
height: 150rpx;
|
border-radius: 50%;
|
border: 4rpx solid #fff;
|
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.info-text {
|
margin-left: 20rpx;
|
flex: 1;
|
|
.name {
|
font-size: 40rpx;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
}
|
|
.company {
|
font-size: 28rpx;
|
color: #666;
|
margin-bottom: 4rpx;
|
}
|
|
.position {
|
font-size: 26rpx;
|
color: #999;
|
}
|
}
|
}
|
|
.business-contact {
|
padding: 0 20rpx;
|
|
.contact-item {
|
display: flex;
|
align-items: center;
|
padding: 16rpx 0;
|
border-bottom: 1rpx solid #f0f0f0;
|
|
.icon {
|
font-size: 32rpx;
|
color: #37bde6;
|
margin-right: 16rpx;
|
}
|
|
.text {
|
font-size: 28rpx;
|
color: #333;
|
}
|
}
|
}
|
}
|
|
.action-buttons {
|
display: flex;
|
justify-content: space-between;
|
margin: 30rpx 0;
|
|
.btn {
|
flex: 1;
|
background: #37bde6;
|
color: #fff;
|
text-align: center;
|
padding: 24rpx 0;
|
border-radius: 10rpx;
|
font-size: 30rpx;
|
margin: 0 10rpx;
|
}
|
}
|
|
.statistics {
|
background: #fff;
|
border-radius: 20rpx;
|
padding: 30rpx 0;
|
display: flex;
|
justify-content: space-around;
|
|
.stat-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.number {
|
font-size: 40rpx;
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 8rpx;
|
}
|
|
.label {
|
font-size: 26rpx;
|
color: #999;
|
}
|
}
|
}
|
|
.visitors {
|
background: #fff;
|
border-radius: 20rpx;
|
margin-top: 30rpx;
|
padding: 20rpx;
|
|
.section-title {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20rpx;
|
|
.title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.more {
|
font-size: 26rpx;
|
color: #37bde6;
|
}
|
}
|
|
.visitor-item {
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #f0f0f0;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.visitor-avatar {
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: 50%;
|
}
|
|
.visitor-info {
|
margin-left: 20rpx;
|
flex: 1;
|
|
.visitor-name {
|
font-size: 28rpx;
|
color: #333;
|
margin-bottom: 4rpx;
|
}
|
|
.visitor-time {
|
font-size: 24rpx;
|
color: #999;
|
}
|
}
|
}
|
}
|
|
.popup-content {
|
background: #fff;
|
border-top-left-radius: 30rpx;
|
border-top-right-radius: 30rpx;
|
|
.popup-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20rpx 30rpx;
|
border-bottom: 1rpx solid #f0f0f0;
|
|
.title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.close {
|
font-size: 40rpx;
|
color: #999;
|
padding: 0 20rpx;
|
}
|
}
|
|
.card-scroll {
|
height: 500rpx;
|
|
.card-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 30rpx;
|
border-bottom: 1rpx solid #f0f0f0;
|
|
&.active {
|
background: #f5f5f5;
|
}
|
|
.card-preview {
|
.card-name {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 8rpx;
|
}
|
|
.card-company {
|
font-size: 26rpx;
|
color: #666;
|
}
|
}
|
|
.icon {
|
font-size: 32rpx;
|
color: #37bde6;
|
}
|
}
|
|
.add-card {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 30rpx;
|
color: #37bde6;
|
font-size: 30rpx;
|
|
.icon {
|
font-size: 36rpx;
|
margin-right: 10rpx;
|
}
|
}
|
}
|
}
|
</style>
|
