<template>
|
<view>
|
<!-- 名片展示区域 -->
|
<view class="content">
|
<view class="business-card">
|
<image class="card-image" @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>
|
<button open-type="share" class="btn">分享名片</button>
|
<view class="btn" @click="topUpCard()">置顶名片</view>
|
<view class="btn" @click="gotoChatList()">聊天记录</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.data" :key="index">
|
<image class="visitor-avatar" :src="visitor.user.avatarUrl || '/static/default.png'"
|
mode="aspectFill">
|
</image>
|
<view class="visitor-info">
|
<view class="visitor-name">{{visitor.user.nickName || '未知访客'}}</view>
|
<view class="visitor-time">{{visitor.update_time}}</view>
|
</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">
|
<uni-swipe-action>
|
<view v-for="(card, index) in businessList" :key="index">
|
<uni-swipe-action-item :right-options="rightOptions" @click="handleDel(index, card)">
|
<view @click="selectCard(index)" class="card-item">
|
<view :class="{active: card.is_default==1}" class="card-preview">
|
<image style="width: 650rpx;border-radius: 12rpx;" :src="card.mp"
|
mode="widthFix"></image>
|
<image v-show="card.is_default==1" src="@/static/icon/mrmp.png" class="mrmp">
|
</image>
|
</view>
|
</view>
|
</uni-swipe-action-item>
|
</view>
|
</uni-swipe-action>
|
<view class="add-card" @click="addNewCard()">
|
<text class="icon iconfont icon-add"></text>
|
<text>添加新名片</text>
|
</view>
|
</scroll-view>
|
</view>
|
</Popup>
|
|
<!-- 支付弹窗 -->
|
<view class="payment-modal" v-if="showPayment">
|
<view class="modal-content">
|
<view class="modal-header">
|
<text class="title">名片置顶确认</text>
|
<text class="close" @click="closePaymentModal">×</text>
|
</view>
|
<view class="modal-body">
|
<view class="payment-info">
|
<view class="info-item">
|
<text class="label">置顶天数：</text>
|
<text class="value">{{topSetting.top_days}}天</text>
|
</view>
|
<view class="info-item">
|
<text class="label">支付金额：</text>
|
<text class="value price">￥{{topSetting.top_amount}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="modal-footer">
|
<button class="cancel-btn" @click="closePaymentModal">取消</button>
|
<button class="confirm-btn" @click="confirmPayment">确认支付</button>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import Popup from '@/components/uni-popup.vue';
|
import uniSwipeAction from '@/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action.vue';
|
import uniSwipeActionItem from '@/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item.vue';
|
export default {
|
components: {
|
Popup,
|
uniSwipeAction,
|
uniSwipeActionItem
|
},
|
data() {
|
return {
|
businessImage: '',
|
business_card_id: '',
|
height: 0,
|
cardWidth: 0, // 名片宽度
|
businessList: [],
|
current: 0,
|
statistics: {},
|
visitors: {},
|
popupShow: false,
|
screenWidth: 0,
|
showPayment: false, // 显示支付弹窗
|
paymentMethod: 'balance', // 支付方式
|
topSetting: {}, // 置顶设置
|
userInfo: {}, // 用户信息
|
rightOptions: [{
|
text: '删除',
|
style: {
|
backgroundColor: '#FF3B30'
|
}
|
}]
|
};
|
},
|
onLoad() {
|
this.screenWidth = uni.getSystemInfoSync().windowWidth * 2 - 70;
|
// 计算名片宽度:屏幕宽度减去左右padding(40rpx)
|
const systemInfo = uni.getSystemInfoSync();
|
this.cardWidth = (systemInfo.windowWidth * 2) - 40; // rpx单位
|
},
|
onShow() {
|
this.getbusinessList();
|
this.getVisitorList();
|
},
|
methods: {
|
getbusinessList() {
|
let _this = this;
|
_this._post('plus.business.business/getList', {
|
page: 1,
|
list_rows: 1000,
|
user_id: _this.getUserId()
|
}, function(res) {
|
_this.businessList = res.data.data;
|
if (_this.businessList.length > 0) {
|
for (let i in _this.businessList) {
|
if (_this.businessList[i].is_default == 1) {
|
_this.current = i;
|
}
|
}
|
_this.getbusiness(_this.businessList[_this.current].user_id)
|
_this.shareCard();
|
_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) {
|
console.log(res);
|
_this.visitors = res.data;
|
});
|
},
|
makePhoneCall(phone) {
|
uni.makePhoneCall({
|
phoneNumber: phone
|
});
|
},
|
viewPicture(url) {
|
this.gotoPage(
|
`/pages/plus/business/detail?business_card_id=${this.businessList[this.current].business_card_id}`
|
);
|
},
|
getbusinessDetail() {
|
let _this = this;
|
_this._post('plus.business.business/detail', {
|
business_card_id: _this.business_card_id
|
}, function(res) {
|
_this.businessDetail = res.data;
|
});
|
},
|
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}`
|
);
|
} else {
|
this.gotoPage(
|
`/pages/plus/business/add`
|
);
|
}
|
},
|
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() {
|
// 分享名片逻辑
|
|
},
|
viewAllVisitors() {
|
// 查看全部访客
|
this.gotoPage('/pages/plus/business/visitors');
|
},
|
|
// 跳转到聊天记录页面
|
gotoChatList() {
|
uni.navigateTo({
|
url: '/pages/plus/business/chat/list'
|
});
|
},
|
// 置顶名片
|
topUpCard() {
|
if (this.businessList.length > 0) {
|
// 获取置顶设置
|
this._get('plus.business.setting/getAll', {}, (res) => {
|
if (res.data && res.data.basic && res.data.basic.values) {
|
this.topSetting = res.data.basic.values;
|
// 获取用户信息
|
this._get('user.index/detail', {}, (userRes) => {
|
this.userInfo = userRes.data;
|
this.showPayment = true;
|
});
|
}
|
});
|
}
|
},
|
// 关闭支付弹窗
|
closePaymentModal() {
|
this.showPayment = false;
|
},
|
// 选择支付方式
|
selectPaymentMethod(method) {
|
this.paymentMethod = method;
|
},
|
// 确认支付
|
confirmPayment() {
|
if (this.businessList.length > 0) {
|
let payType = this.paymentMethod === 'balance' ? 10 : 20;
|
let params = {
|
business_card_id: this.businessList[this.current].business_card_id,
|
pay_type: payType
|
};
|
|
this._post('plus.business.top/create', params, (res) => {
|
if (res.code === 1) {
|
// 如果是余额支付，直接处理
|
if (this.paymentMethod === 'balance') {
|
// 直接跳转支付
|
uni.redirectTo({
|
url: '/pages/plus/business/cashier?order_id=' + res.data.order_id +
|
'&order_type=100'
|
});
|
} else {
|
// 跳转到收银台支付
|
uni.redirectTo({
|
url: '/pages/plus/business/cashier?order_id=' + res.data.order_id +
|
'&order_type=100'
|
});
|
}
|
} else {
|
this.showError(res.msg || '创建订单失败');
|
}
|
}, (err) => {
|
this.showError('创建订单失败，请重试');
|
});
|
}
|
},
|
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();
|
}
|
},
|
// 删除名片
|
handleDel(index, card) {
|
// 防止删除默认名片
|
if (card.is_default === 1) {
|
this.showToast('默认名片不能删除');
|
return;
|
}
|
|
uni.showModal({
|
title: '提示',
|
content: '确定要删除这个名片吗？',
|
success: (res) => {
|
if (res.confirm) {
|
// 调用删除接口
|
this._post('plus.business.business/delete', {
|
business_card_id: card.business_card_id
|
}, (res) => {
|
if (res.code === 1) {
|
// 删除成功，更新列表
|
this.businessList.splice(index, 1);
|
this.showToast('删除成功');
|
|
// 如果删除的是当前选中的名片，切换到第一个名片
|
if (index === this.current) {
|
if (this.businessList.length > 0) {
|
this.current = 0;
|
this.getStatistics(this.businessList[this.current]
|
.business_card_id);
|
}
|
} else if (index < this.current) {
|
// 如果删除的是当前选中名片之前的，current减1
|
this.current--;
|
}
|
} else {
|
this.showToast(res.msg || '删除失败');
|
}
|
});
|
}
|
}
|
});
|
},
|
// 显示提示信息
|
showToast(msg) {
|
uni.showToast({
|
title: msg,
|
icon: 'none',
|
duration: 2000
|
});
|
}
|
},
|
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;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
.card-image {
|
width: 100%;
|
display: block;
|
// 确保图片清晰度,使用高质量渲染
|
image-rendering: -webkit-optimize-contrast;
|
image-rendering: crisp-edges;
|
}
|
|
.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: #D41003;
|
margin-right: 16rpx;
|
}
|
|
.text {
|
font-size: 28rpx;
|
color: #333;
|
}
|
}
|
}
|
}
|
|
.action-buttons {
|
display: flex;
|
justify-content: space-between;
|
margin: 30rpx 0;
|
|
.btn {
|
flex: 1;
|
background: #D41003;
|
color: #fff;
|
text-align: center;
|
padding: 24rpx 0;
|
border-radius: 10rpx;
|
font-size: 30rpx;
|
margin: 0 10rpx;
|
line-height: normal;
|
}
|
}
|
|
.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: 36rpx;
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 8rpx;
|
}
|
|
.label {
|
font-size: 26rpx;
|
color: #999;
|
}
|
}
|
}
|
|
.visitors {
|
background: #fff;
|
border-radius: 20rpx;
|
padding: 30rpx;
|
margin-top: 30rpx;
|
|
.section-title {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 30rpx;
|
|
.more {
|
font-size: 26rpx;
|
color: #37bde6;
|
}
|
}
|
|
.visitor-list {
|
.visitor-item {
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0;
|
|
&:not(:last-child) {
|
border-bottom: 1rpx solid #f0f0f0;
|
}
|
|
.visitor-avatar {
|
width: 70rpx;
|
height: 70rpx;
|
border-radius: 50%;
|
margin-right: 20rpx;
|
}
|
|
.visitor-info {
|
flex: 1;
|
|
.visitor-name {
|
font-size: 30rpx;
|
color: #333;
|
margin-bottom: 8rpx;
|
}
|
|
.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;
|
|
|
.card-preview {
|
border-radius: 12rpx;
|
position: relative;
|
overflow: hidden;
|
|
image {
|
// 保持图片原始清晰度
|
display: block;
|
image-rendering: -webkit-optimize-contrast;
|
}
|
|
.mrmp {
|
height: 50rpx;
|
width: 50rpx;
|
position: absolute;
|
bottom: 0rpx;
|
right: 0rpx;
|
border-top-left-radius: 10rpx;
|
border-bottom-right-radius: 10rpx;
|
}
|
|
.card-name {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 8rpx;
|
}
|
|
&.active {
|
background: #f5f5f5;
|
border: #D41003 solid 1rpx;
|
}
|
|
.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: #D41003;
|
font-size: 30rpx;
|
|
.icon {
|
font-size: 36rpx;
|
margin-right: 10rpx;
|
}
|
}
|
}
|
}
|
|
// 支付弹窗样式
|
.payment-modal {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0, 0, 0, 0.6);
|
z-index: 9999;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.modal-content {
|
background: #fff;
|
border-radius: 20rpx;
|
width: 600rpx;
|
max-width: 90%;
|
|
.modal-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 30rpx;
|
border-bottom: 1rpx solid #f0f0f0;
|
|
.title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.close {
|
font-size: 40rpx;
|
color: #999;
|
padding: 0 10rpx;
|
}
|
}
|
|
.modal-body {
|
padding: 30rpx;
|
|
.payment-info {
|
background: #f9f9f9;
|
border-radius: 10rpx;
|
padding: 20rpx;
|
margin-bottom: 30rpx;
|
|
.info-item {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 15rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.label {
|
font-size: 28rpx;
|
color: #666;
|
}
|
|
.value {
|
font-size: 28rpx;
|
color: #333;
|
|
&.price {
|
color: #ff4444;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
|
.payment-methods {
|
.method-title {
|
font-size: 28rpx;
|
color: #333;
|
margin-bottom: 20rpx;
|
}
|
|
.method-item {
|
display: flex;
|
align-items: center;
|
padding: 20rpx;
|
border: 1rpx solid #f0f0f0;
|
border-radius: 10rpx;
|
margin-bottom: 20rpx;
|
position: relative;
|
|
&.active {
|
border-color: #D41003;
|
background: #f0f9ff;
|
}
|
|
.icon {
|
font-size: 40rpx;
|
margin-right: 20rpx;
|
|
&.icon-yue {
|
color: #ff9900;
|
}
|
|
&.icon-weixin {
|
color: #09bb07;
|
}
|
}
|
|
.method-name {
|
font-size: 28rpx;
|
color: #333;
|
flex: 1;
|
}
|
|
.balance {
|
font-size: 24rpx;
|
color: #999;
|
margin-right: 20rpx;
|
}
|
|
.checked {
|
color: #D41003;
|
font-size: 36rpx;
|
}
|
}
|
}
|
}
|
|
.modal-footer {
|
display: flex;
|
border-top: 1rpx solid #f0f0f0;
|
|
.cancel-btn,
|
.confirm-btn {
|
flex: 1;
|
padding: 30rpx;
|
text-align: center;
|
font-size: 30rpx;
|
border: none;
|
background: none;
|
}
|
|
.cancel-btn {
|
color: #666;
|
border-right: 1rpx solid #f0f0f0;
|
}
|
|
.confirm-btn {
|
color: #37bde6;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
</style>
|
