<template>
|
<view>
|
<scroll-view scroll-y="true" class="scroll-view">
|
<view class="card-container" v-if="businessInfo">
|
<!-- 名片主体 -->
|
<view class="business-card" @click="viewCard">
|
<image class="card-image" :src="businessInfo.mp" mode="widthFix"></image>
|
</view>
|
|
<!-- 操作按钮区域 -->
|
<view class="action-buttons">
|
<view class="action-btn" @click="makePhoneCall(businessInfo.mobile)">
|
<image src="@/static/icon/bddh.png" class="btn-icon"></image>
|
<text class="btn-text">拨打电话</text>
|
</view>
|
<view class="action-btn" @click="shareToWechat">
|
<image src="@/static/wx.png" class="btn-icon"></image>
|
<text class="btn-text">分享微信</text>
|
</view>
|
<view class="action-btn" @click="openLocation(businessInfo)">
|
<image src="@/static/icon/address_icon.png" class="btn-icon"></image>
|
<text class="btn-text">导航地址</text>
|
</view>
|
<button open-type="share" class="action-btn">
|
<image src="@/static/icon/fenx.png" class="btn-icon"></image>
|
<text class="btn-text">分享名片</text>
|
</button>
|
<view class="action-btn" @click="contactWithChat">
|
<image src="@/static/icon/communication.png" class="btn-icon"></image>
|
<text class="btn-text">在线聊天</text>
|
</view>
|
</view>
|
|
<!-- 名片简介 -->
|
<view class="card-intro" v-if="businessInfo.Introduction || businessInfo.business_scope">
|
<view v-if="businessInfo.Introduction" class="intro-item">
|
<view class="intro-title">个人简介</view>
|
<view class="intro-content">{{businessInfo.Introduction}}</view>
|
</view>
|
<view v-if="businessInfo.business_scope" class="intro-item">
|
<view class="intro-title">业务范围</view>
|
<view class="intro-content">{{businessInfo.business_scope}}</view>
|
</view>
|
</view>
|
|
<!-- 数字资产卡片 -->
|
<view class="asset-cards">
|
<view class="asset-card" @click="goToPlatform">
|
<image class="asset-img" :src="background.digital_asset_1" mode="aspectFill"></image>
|
</view>
|
<view class="asset-card" @click="goToShop">
|
<image class="asset-img" :src="background.digital_asset_2" mode="aspectFill"></image>
|
</view>
|
</view>
|
|
<!-- 底部间距 -->
|
<view class="bottom-space"></view>
|
</view>
|
</scroll-view>
|
|
<!-- 底部固定按钮 -->
|
<view class="bottom-btn-section">
|
<button class="create-card-btn" @click="createNewCard">新建我的数字名片</button>
|
<button class="create-card-btn desensitization" @click="buyCard"
|
v-if="businessInfo.posterType === 'desensitization' && !businessInfo.has_purchased">查看联系方式</button>
|
</view>
|
|
<!-- 支付弹窗 -->
|
<view class="payment-modal" v-if="showPayment">
|
<view class="modal-content">
|
<view class="modal-header">
|
<text class="title">查看联系方式确认</text>
|
<text class="close" @tap="closePaymentModal">×</text>
|
</view>
|
<view class="payment-info">
|
<text class="name">{{ businessInfo.name }}</text>
|
<text class="position"
|
v-if="businessInfo.duties && businessInfo.duties.length > 0">{{ businessInfo.duties[0] }}</text>
|
<text class="price">￥{{ businessInfo.grade.price }}</text>
|
</view>
|
<view class="modal-footer">
|
<view class="cancel-btn" @tap="closePaymentModal">取消</view>
|
<view class="confirm-btn" @tap="confirmPayment">确认</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
businessInfo: null,
|
business_card_id: '',
|
loading: true,
|
// 支付相关
|
showPayment: false,
|
selectedGrade: {},
|
paymentMethod: 'balance',
|
background: {}
|
};
|
},
|
onLoad(options) {
|
if (options.business_card_id) {
|
this.business_card_id = options.business_card_id;
|
this.getBusinessDetail();
|
// 记录访问日志
|
this.recordVisit();
|
}
|
this.getSettingBackground()
|
},
|
onShow() {
|
this.getBusinessDetail();
|
},
|
methods: {
|
back() {
|
uni.navigateBack();
|
},
|
viewCard() {
|
let _this = this
|
// 预览图片
|
uni.previewImage({
|
urls: [_this.businessInfo.mp],
|
longPressActions: {
|
itemList: ['转发给朋友', '保存图片', '收藏', '翻译图片中的文字', '提取文字'],
|
success: function(data) {
|
if (data.tapIndex == 1) {
|
_this.recordVisit(20)
|
}
|
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
},
|
fail: function(err) {
|
console.log(err.errMsg);
|
}
|
},
|
complete: function(res) {
|
console.log(res);
|
}
|
})
|
},
|
getSettingBackground() {
|
let _this = this;
|
_this._post('plus.business.setting/getBackground', {}, function(res) {
|
_this.background = res.data
|
})
|
},
|
// 获取名片详情
|
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;
|
_this.loading = false;
|
// 设置默认选中的等级
|
if (_this.businessInfo.grade && _this.businessInfo.grade.length > 0) {
|
_this.selectedGrade = _this.businessInfo.grade;
|
}
|
});
|
},
|
// 记录访问
|
recordVisit(type = 10) {
|
let _this = this;
|
const params = {
|
business_card_id: _this.business_card_id,
|
type: type
|
};
|
_this._post('plus.business.saving/add', params, function() {
|
// 无需处理返回结果
|
});
|
},
|
// 拨打电话
|
makePhoneCall(phone) {
|
if (!phone) {
|
this.showError('暂无联系电话');
|
return;
|
}
|
uni.makePhoneCall({
|
phoneNumber: phone
|
});
|
},
|
// 分享到微信
|
shareToWechat() {
|
// 实现分享到微信的逻辑
|
if (this.businessInfo && this.businessInfo.wechat) {
|
uni.setClipboardData({
|
data: this.businessInfo.wechat,
|
success: () => {
|
this.showSuccess('微信号已复制');
|
}
|
});
|
} else {
|
this.showError('暂未填写微信');
|
}
|
},
|
// 通过聊天联系
|
contactWithChat() {
|
console.log(this.businessInfo);
|
if (!this.businessInfo) return;
|
|
uni.navigateTo({
|
url: `/pages/plus/business/chat/chat?user_id=${this.businessInfo.user_id}&business_card_id=${this.business_card_id}&nickName=${this.businessInfo.name}`
|
});
|
},
|
// 打开地图
|
openLocation(businessInfo) {
|
let address = businessInfo.region.province + ' ' + businessInfo.region.city + ' ' + businessInfo.region
|
.region + ' ' + businessInfo.address
|
if (!address) {
|
this.showError('暂无地址信息');
|
return;
|
}
|
console.log(businessInfo.latitude);
|
console.log(businessInfo.longitude);
|
let latitude = Number(businessInfo.latitude)
|
let longitude = Number(businessInfo.longitude)
|
uni.openLocation({
|
latitude: latitude,
|
longitude: longitude,
|
name: businessInfo.address,
|
address: address,
|
scale: 18,
|
complete: function(res) {
|
console.log(res);
|
}
|
|
});
|
|
},
|
// 分享名片
|
shareCard() {
|
uni.showShareMenu({
|
withShareTicket: true,
|
menus: ['shareAppMessage', 'shareTimeline']
|
});
|
},
|
// 跳转到平台
|
goToPlatform() {
|
uni.setStorageSync('shop_supplier_id', 1)
|
uni.navigateTo({
|
url: '/pages/shop/shop?shop_supplier_id=1'
|
});
|
},
|
// 跳转到店铺
|
goToShop() {
|
let _this = this;
|
_this._post('store.store/getUserStore', {
|
user_id: _this.businessInfo.user_id
|
}, function(res) {
|
if (res.data.list) {
|
uni.setStorageSync('shop_supplier_id', res.data.list.shop_supplier_id)
|
uni.navigateTo({
|
url: '/pages/shop/shop?shop_supplier_id=' + res.data.list.shop_supplier_id
|
});
|
} else {
|
_this.showError('该用户暂无店铺')
|
}
|
/* uni.navigateTo({
|
url: '/pages/shop/shop?shop_supplier_id=1'
|
}); */
|
});
|
},
|
// 新建数字名片
|
createNewCard() {
|
uni.navigateTo({
|
url: '/pages/plus/business/add'
|
});
|
},
|
// 购买名片
|
buyCard() {
|
// 显示支付弹窗
|
this.showPayment = true;
|
},
|
// 关闭支付弹窗
|
closePaymentModal() {
|
this.showPayment = false;
|
},
|
// 选择支付方式
|
selectPaymentMethod(method) {
|
this.paymentMethod = method;
|
},
|
// 确认支付
|
confirmPayment() {
|
let payType = this.paymentMethod === 'balance' ? 10 : 20;
|
let params = {
|
business_card_id: this.business_card_id,
|
grade_id: this.businessInfo.grade.grade_id,
|
order_source: 10, // 查看名片
|
pay_type: payType
|
};
|
|
this._post('plus.business.order/create', params, (res) => {
|
if (res.code === 1) {
|
// 跳转到收银台支付
|
uni.redirectTo({
|
url: '/pages/plus/business/cashier?order_id=' + res.data.order_id +
|
'&order_type=100'
|
});
|
} else {
|
this.showError(res.msg || '支付失败');
|
}
|
}, (err) => {
|
this.showError('支付失败，请重试');
|
});
|
},
|
// 在线聊天
|
contactWithChat() {
|
console.log(this.businessInfo);
|
if (!this.businessInfo) return;
|
|
uni.navigateTo({
|
url: `/pages/plus/business/chat/chat?user_id=${this.businessInfo.user_id}&business_card_id=${this.business_card_id}&nickName=${this.businessInfo.name}`
|
});
|
}
|
},
|
onShareAppMessage() {
|
if (this.businessInfo) {
|
return {
|
title: `${this.businessInfo.name}的电子名片`,
|
path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}&referee_id=${this.businessInfo.user_id}`
|
};
|
}
|
return {
|
title: '电子名片',
|
path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}&referee_id=${this.businessInfo.user_id}`
|
};
|
},
|
onShareTimeline() {
|
if (this.businessInfo) {
|
return {
|
title: `${this.businessInfo.name}的电子名片`,
|
path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}&referee_id=${this.businessInfo.user_id}`
|
};
|
}
|
return {
|
title: '电子名片',
|
path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}&referee_id=${this.businessInfo.user_id}`
|
};
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.scroll-view {
|
height: calc(100vh - 80rpx);
|
}
|
|
.card-container {
|
padding: 0 30rpx;
|
}
|
|
// 名片主体样式
|
.card-image {
|
width: 100%;
|
}
|
|
.card-header {
|
display: flex;
|
align-items: center;
|
|
.avatar {
|
width: 140rpx;
|
height: 140rpx;
|
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: 8rpx;
|
}
|
|
.position {
|
font-size: 32rpx;
|
opacity: 0.9;
|
}
|
}
|
}
|
|
.company-info {
|
margin-top: 30rpx;
|
|
.company-name {
|
font-size: 34rpx;
|
opacity: 0.9;
|
}
|
}
|
|
.contact-info {
|
margin-top: 30rpx;
|
|
.contact-item {
|
display: flex;
|
align-items: center;
|
margin-bottom: 16rpx;
|
|
.contact-label {
|
font-size: 30rpx;
|
margin-right: 16rpx;
|
}
|
|
.contact-value {
|
font-size: 30rpx;
|
opacity: 0.9;
|
flex: 1;
|
word-break: break-all;
|
}
|
}
|
}
|
|
.verification-info {
|
margin-top: 30rpx;
|
display: flex;
|
align-items: center;
|
|
.verification-text {
|
font-size: 28rpx;
|
opacity: 0.8;
|
margin-right: 20rpx;
|
}
|
|
.verification-tags {
|
display: flex;
|
|
.verification-tag {
|
background: rgba(255, 255, 255, 0.2);
|
padding: 6rpx 16rpx;
|
border-radius: 16rpx;
|
font-size: 24rpx;
|
margin-right: 12rpx;
|
}
|
}
|
}
|
|
// 操作按钮区域
|
.action-buttons {
|
display: flex;
|
justify-content: space-between;
|
background: #fff;
|
border-radius: 20rpx;
|
padding: 30rpx;
|
margin-top: 30rpx;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
.action-btn {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
flex: 1;
|
line-height: normal;
|
background: #ffffff00;
|
padding: 0;
|
|
.btn-icon {
|
font-size: 56rpx;
|
width: 56rpx;
|
height: 56rpx;
|
margin-bottom: 12rpx;
|
}
|
|
.btn-text {
|
font-size: 28rpx;
|
color: #666;
|
}
|
}
|
}
|
|
// 名片简介
|
.card-intro {
|
background: #fff;
|
border-radius: 20rpx;
|
padding: 30rpx;
|
margin-top: 30rpx;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
.intro-item {
|
margin-bottom: 30rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.intro-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 16rpx;
|
}
|
|
.intro-content {
|
font-size: 28rpx;
|
color: #666;
|
line-height: 1.6;
|
}
|
}
|
}
|
|
// 跳转卡片
|
.redirect-cards {
|
margin-top: 30rpx;
|
display: flex;
|
justify-content: space-between;
|
|
.redirect-card {
|
flex: 0 0 calc(50% - 15rpx);
|
background: #fff;
|
border-radius: 20rpx;
|
overflow: hidden;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
display: flex;
|
align-items: center;
|
padding: 20rpx;
|
|
.redirect-img {
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: 12rpx;
|
}
|
|
.redirect-info {
|
flex: 1;
|
margin-left: 20rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.redirect-title {
|
font-size: 30rpx;
|
color: #333;
|
}
|
|
.redirect-arrow {
|
font-size: 40rpx;
|
color: #999;
|
}
|
}
|
}
|
}
|
|
// 数字资产卡片
|
.asset-cards {
|
margin-top: 30rpx;
|
display: flex;
|
justify-content: space-between;
|
|
.asset-card {
|
flex: 0 0 calc(50% - 15rpx);
|
overflow: hidden;
|
border-radius: 20rpx;
|
|
.asset-img {
|
width: 100%;
|
height: 200rpx;
|
border-radius: 20rpx;
|
}
|
}
|
}
|
|
// 底部间距
|
.bottom-space {
|
height: 150rpx;
|
}
|
|
// 底部固定按钮
|
.bottom-btn-section {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
width: calc(100% - 60rpx);
|
background: #fff;
|
padding: 20rpx 30rpx 40rpx;
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
z-index: 999;
|
display: flex;
|
gap: 10rpx;
|
|
.create-card-btn {
|
background: linear-gradient(90deg, #ff1529, #ff435f);
|
color: #fff;
|
font-weight: bold;
|
padding: 10rpx 0;
|
border-radius: 60rpx;
|
border: none;
|
width: 100%;
|
}
|
|
.desensitization {
|
background: linear-gradient(-45deg, #fe632a 0%, #ff7a04 100%) !important;
|
}
|
}
|
|
// 支付弹窗
|
.payment-modal {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: rgba(0, 0, 0, 0.5);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
z-index: 9999;
|
|
.modal-content {
|
background-color: #fff;
|
width: 80%;
|
border-radius: 20rpx;
|
overflow: hidden;
|
|
.modal-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 24rpx 32rpx;
|
border-bottom: 1rpx solid #e0e0e0;
|
|
.title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.close {
|
font-size: 40rpx;
|
color: #999;
|
}
|
}
|
|
.payment-info {
|
padding: 32rpx;
|
text-align: center;
|
|
.name {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 8rpx;
|
}
|
|
.position {
|
font-size: 28rpx;
|
color: #666;
|
margin-bottom: 24rpx;
|
}
|
|
.price {
|
font-size: 48rpx;
|
font-weight: bold;
|
color: #ff4757;
|
}
|
}
|
|
.payment-methods {
|
border-top: 1rpx solid #e0e0e0;
|
|
.method-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 28rpx 32rpx;
|
border-bottom: 1rpx solid #f0f0f0;
|
font-size: 28rpx;
|
color: #333;
|
|
&.active {
|
color: #37bde6;
|
}
|
|
.icon-check {
|
font-size: 32rpx;
|
}
|
}
|
}
|
|
.modal-footer {
|
display: flex;
|
padding: 24rpx 32rpx;
|
|
.cancel-btn,
|
.confirm-btn {
|
flex: 1;
|
text-align: center;
|
padding: 20rpx 0;
|
border-radius: 8rpx;
|
font-size: 28rpx;
|
}
|
|
.cancel-btn {
|
color: #666;
|
margin-right: 20rpx;
|
background-color: #f5f5f5;
|
}
|
|
.confirm-btn {
|
color: #fff;
|
background-color: #D41003;
|
}
|
}
|
}
|
}
|
</style>
|
