From f226d5fe6327e31bb471a96b7370cf94689c6608 Mon Sep 17 00:00:00 2001
From: quanwei <419654421@qq.com>
Date: Fri, 31 Oct 2025 16:54:48 +0800
Subject: [PATCH] 名片设置 名片置顶 名片分享
---
mobile/pages/plus/business/index.vue | 461 ++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 353 insertions(+), 108 deletions(-)
diff --git a/mobile/pages/plus/business/index.vue b/mobile/pages/plus/business/index.vue
index c57ae12..6a4ecda 100644
--- a/mobile/pages/plus/business/index.vue
+++ b/mobile/pages/plus/business/index.vue
@@ -11,7 +11,8 @@
<view class="action-buttons">
<view class="btn" @click="editCard()">编辑名片</view>
<view class="btn" @click="switchCard()">切换名片</view>
- <view class="btn" @click="shareCard()">分享名片</view>
+ <button open-type="share" class="btn">分享名片</button>
+ <view class="btn" @click="topUpCard()">置顶名片</view>
</view>
<!-- 数据统计区域 -->
@@ -37,39 +38,67 @@
<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">
+ <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_name || '未知访客'}}</view>
- <view class="visitor-time">{{formatTime(visitor.visit_time)}}</view>
+ <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">
- <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>
+ <!-- 切换名片弹窗 -->
+ <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>
- </Popup>
+ <scroll-view scroll-y="true" class="card-scroll">
+ <view class="card-item" v-for="(card, index) in businessList" :key="index"
+ @click="selectCard(index)">
+ <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>
+ <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>
@@ -78,58 +107,47 @@
import Popup from '@/components/uni-popup.vue';
export default {
components: {
- Popup,
+ Popup
},
data() {
return {
+ businessImage: '',
+ business_card_id: '',
+ height: 0,
businessList: [],
current: 0,
statistics: {},
- visitors: [],
- loading: false,
- page: 1,
- search: '',
- businessImage: '',
- height: 0,
- screenWidth: 0, // 屏幕宽度
- popupShow: false
+ visitors: {},
+ popupShow: false,
+ screenWidth: 0,
+ showPayment: false, // 显示支付弹窗
+ paymentMethod: 'balance', // 支付方式
+ topSetting: {}, // 置顶设置
+ userInfo: {} // 用户信息
};
},
onLoad() {
- this.init();
- },
- onShow() {
+ this.screenWidth = uni.getSystemInfoSync().windowWidth * 2 - 70;
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')
+ 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);
}
});
@@ -168,12 +186,26 @@
page: 1,
list_rows: 10
}, function(res) {
- _this.visitors = res.data.list;
+ 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) {
@@ -210,21 +242,68 @@
},
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');
+ },
+ // 置顶名片
+ 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/order/cashier?order_id=' + res.data.order_id +
+ '&order_type=100'
+ });
+ } else {
+ // 跳转到收银台支付
+ uni.redirectTo({
+ url: '/pages/order/cashier?order_id=' + res.data.order_id +
+ '&order_type=100'
+ });
+ }
+ } else {
+ this.showError(res.msg || '创建订单失败');
+ }
+ }, (err) => {
+ this.showError('创建订单失败，请重试');
+ });
+ }
},
formatTime(time) {
if (!time) return '';
@@ -359,6 +438,7 @@
border-radius: 10rpx;
font-size: 30rpx;
margin: 0 10rpx;
+ line-height: normal;
}
}
@@ -375,7 +455,7 @@
align-items: center;
.number {
- font-size: 40rpx;
+ font-size: 36rpx;
font-weight: bold;
color: #333;
margin-bottom: 8rpx;
@@ -391,20 +471,14 @@
.visitors {
background: #fff;
border-radius: 20rpx;
+ padding: 30rpx;
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;
- }
+ margin-bottom: 30rpx;
.more {
font-size: 26rpx;
@@ -412,35 +486,36 @@
}
}
- .visitor-item {
- display: flex;
- align-items: center;
- padding: 20rpx 0;
- border-bottom: 1rpx solid #f0f0f0;
+ .visitor-list {
+ .visitor-item {
+ display: flex;
+ align-items: center;
+ padding: 20rpx 0;
- &: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;
+ &:not(:last-child) {
+ border-bottom: 1rpx solid #f0f0f0;
}
- .visitor-time {
- font-size: 24rpx;
- color: #999;
+ .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;
+ }
}
}
}
@@ -481,16 +556,31 @@
padding: 30rpx;
border-bottom: 1rpx solid #f0f0f0;
- &.active {
- background: #f5f5f5;
- }
.card-preview {
+ border-radius: 12rpx;
+ position: relative;
+
+ .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: #37bde6 solid 1rpx;
}
.card-company {
@@ -520,4 +610,159 @@
}
}
}
+
+ // 支付弹窗样式
+ .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: #37bde6;
+ 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: #37bde6;
+ 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>
\ No newline at end of file
--
Gitblit v1.9.2