添加名片聊天功能（未完成）

quanwei

2025-11-15 6f12eadd25c8f5335fd9eccf373bf9835bf3e4c6

 mobile/pages/plus/business/index.vue

@@ -3,14 +3,17 @@
      <!-- 名片展示区域 -->
      <view class="content">
         <view class="business-card">
            <image style="width: 100%;" @tap="viewPicture(businessImage)" mode="widthFix" :src="businessImage"></image>
            <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>
            <button open-type="share" class="btn">分享名片</button>
            <view class="btn" @click="topUpCard()">置顶名片</view>
            <view class="btn" @click="gotoChatList()">聊天记录</view>
         </view>

         <!-- 数据统计区域 -->
@@ -36,95 +39,130 @@
               <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" :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">
                        <view class="card-name">{{card.real_name}}</view>
                        <view class="card-company">{{card.company_name}}</view>
                     </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">
               <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,
            businessList: [],
            current: 0,
            statistics: {},
            visitors: [],
            loading: false,
            page: 1,
            search: '',
            businessImage: '',
            height: 0,
            popupShow: false
            visitors: {},
            popupShow: false,
            screenWidth: 0,
            showPayment: false, // 显示支付弹窗
            paymentMethod: 'balance', // 支付方式
            topSetting: {}, // 置顶设置
            userInfo: {}, // 用户信息
            rightOptions: [{
               text: '删除',
               style: {
                  backgroundColor: '#FF3B30'
               }
            }]
         };
      },
      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();
         },
         getbusinessList() {
            let _this = this;
            _this._post('plus.business.business/getList', {}, function(res) {
            _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);
               }
            });
@@ -138,11 +176,14 @@
            });
         },

         getStatistics() {
            // 获取统计数据
         getStatistics(business_card_id) {
            // 默认名片
            let _this = this;
            _this._post('plus.business.business/getStatistics', {}, function(res) {
               _this.statistics = res.data;
            _this._post('plus.business.business/editDefault', {
               business_card_id: business_card_id
            }, function(res) {
               _this.getbusinessList();
               _this.getVisitorList();
            });
         },
         getbusiness(user_id) {
@@ -160,12 +201,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) {
@@ -181,6 +236,10 @@
               this.gotoPage(
                  `/pages/plus/business/add?business_card_id=${this.businessList[this.current].business_card_id}`
               );
            }else{
               this.gotoPage(
                  `/pages/plus/business/add`
               );
            }
         },
         switchCard() {
@@ -193,7 +252,7 @@
         },
         selectCard(index) {
            this.current = index;
            this.getCardStatistics(this.businessList[this.current].business_card_id);
            this.getStatistics(this.businessList[this.current].business_card_id);
            this.closePopup();
         },
         addNewCard() {
@@ -202,21 +261,75 @@
         },
         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');
         },
			
         // 跳转到聊天记录页面
         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 '';
@@ -233,6 +346,54 @@
            } 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() {
@@ -325,7 +486,7 @@

            .icon {
               font-size: 32rpx;
               color: #37bde6;
               color: #D41003;
               margin-right: 16rpx;
            }

@@ -344,13 +505,14 @@

      .btn {
         flex: 1;
         background: #37bde6;
         background: #D41003;
         color: #fff;
         text-align: center;
         padding: 24rpx 0;
         border-radius: 10rpx;
         font-size: 30rpx;
         margin: 0 10rpx;
         line-height: normal;
      }
   }

@@ -367,7 +529,7 @@
         align-items: center;

         .number {
            font-size: 40rpx;
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 8rpx;
@@ -383,20 +545,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;
@@ -404,35 +560,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;
               }
            }
         }
      }
@@ -473,16 +630,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: #D41003 solid 1rpx;
               }

               .card-company {
@@ -502,7 +674,7 @@
            align-items: center;
            justify-content: center;
            padding: 30rpx;
            color: #37bde6;
            color: #D41003;
            font-size: 30rpx;

            .icon {
@@ -512,4 +684,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: #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>