完成名片列表功能 完成名片筛选功能 完成查看名片详情 完成购买名片查看联系方式

quanwei

2025-10-30 2b728186c745b598e8ccb9dcc37360eed49375f6

 mobile/pages/plus/business/index.vue

@@ -1,34 +1,10 @@
<template>
   <view>
      <header-bar title="我的名片" :isBack="true" @click="back"></header-bar>
      <!-- 名片展示区域 -->
      <view class="content">
         <view class="business-card" v-if="businessList.length > 0">
            <image class="top-image" :src="businessList[current].background_image" mode="aspectFill"></image>
            <view class="business-info">
               <image class="avatar" :src="businessList[current].avatar" mode="aspectFill"></image>
               <view class="info-text">
                  <view class="name">{{businessList[current].real_name}}</view>
                  <view class="company">{{businessList[current].company_name}}</view>
                  <view class="position">{{businessList[current].position}}</view>
               </view>
            </view>
            <view class="business-contact">
               <view class="contact-item" @click="makePhoneCall(businessList[current].phone)">
                  <text class="icon iconfont icon-phone"></text>
                  <text class="text">{{businessList[current].phone}}</text>
               </view>
               <view class="contact-item" v-if="businessList[current].mobile"
                  @click="makePhoneCall(businessList[current].mobile)">
                  <text class="icon iconfont icon-mobile"></text>
                  <text class="text">{{businessList[current].mobile}}</text>
               </view>
               <view class="contact-item" v-if="businessList[current].email"
                  @click="sendEmail(businessList[current].email)">
                  <text class="icon iconfont icon-email"></text>
                  <text class="text">{{businessList[current].email}}</text>
               </view>
            </view>
         <view class="business-card">
            <image style="width: 100%;" @tap="viewPicture(businessImage)" mode="widthFix" :src="businessImage">
            </image>
         </view>

         <!-- 名片操作按钮 -->
@@ -73,7 +49,7 @@
         </view>

         <!-- 切换名片弹窗 -->
         <uni-popup ref="popup" type="bottom" :mask-click="false">
         <Popup :show="popupShow" type="bottom" :width="screenWidth" :mask-click="false">
            <view class="popup-content">
               <view class="popup-header">
                  <text class="title">选择名片</text>
@@ -83,8 +59,7 @@
                  <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>
                        <image style="width: 650rpx;" :src="card.mp" mode="widthFix"></image>
                     </view>
                     <text v-if="index === current" class="icon iconfont icon-check"></text>
                  </view>
@@ -94,13 +69,17 @@
                  </view>
               </scroll-view>
            </view>
         </uni-popup>
         </Popup>
      </view>
   </view>
</template>

<script>
   import Popup from '@/components/uni-popup.vue';
   export default {
      components: {
         Popup,
      },
      data() {
         return {
            businessList: [],
@@ -109,7 +88,11 @@
            visitors: [],
            loading: false,
            page: 1,
            search: ''
            search: '',
            businessImage: '',
            height: 0,
            screenWidth: 0, // 屏幕宽度
            popupShow: false
         };
      },
      onLoad() {
@@ -120,41 +103,63 @@
         this.getVisitorList();
      },
      methods: {
         /**
          * 查看图片
          * @param {Object} e
          */
         viewPicture(e) {
            uni.previewImage({
               urls: [e]
            })
         },
         back() {
            uni.navigateBack();
         },
         init() {
            this.getbusinessList();
            this.getStatistics();
            //this.getStatistics();
            this.getVisitorList();
            const systemInfo = uni.getSystemInfoSync()
            this.screenWidth=systemInfo.screenWidth*2-70;
         },
         getbusinessList() {
            let _this = this;
            _this._post('plus.business/business/getList', {}, function(res) {
               _this.businessList = res.data;
            _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', {
            _this._post('plus.business.business/getStatistics', {
               business_card_id: business_card_id
            }, function(res) {
               _this.statistics = res.data;
            });
         },

         getStatistics() {
            // 获取统计数据
            let _this = this;
            _this._post('plus.business/business/getStatistics', {}, function(res) {
            _this._post('plus.business.business/getStatistics', {}, function(res) {
               _this.statistics = res.data;
            });
         },
         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/business/getVisitors', {
            _this._post('plus.business.saving/getList', {
               page: 1,
               list_rows: 10
            }, function(res) {
@@ -178,14 +183,16 @@
            if (this.businessList.length > 0) {
               this.gotoPage(
                  `/pages/plus/business/add?business_card_id=${this.businessList[this.current].business_card_id}`
                  );
               );
            }
         },
         switchCard() {
            this.$refs.popup.open();
            this.popupShow = true;
            //this.$refs.popup.open();
         },
         closePopup() {
            this.$refs.popup.close();
            this.popupShow = false;
            //this.$refs.popup.close();
         },
         selectCard(index) {
            this.current = index;
@@ -193,7 +200,7 @@
            this.closePopup();
         },
         addNewCard() {
            this.closePopup();
            //this.closePopup();
            this.gotoPage('/pages/plus/business/add');
         },
         shareCard() {
@@ -201,7 +208,12 @@
            if (this.businessList.length > 0) {
               uni.showShareMenu({
                  withShareTicket: true,
                  menus: ['shareAppMessage', 'shareTimeline']
                  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);
                  }
               });
            }
         },
@@ -229,7 +241,7 @@
      onShareAppMessage() {
         if (this.businessList.length > 0) {
            return {
               title: `${this.businessList[this.current].real_name}的电子名片`,
               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()}`
            };
         }
@@ -241,7 +253,7 @@
      onShareTimeline() {
         if (this.businessList.length > 0) {
            return {
               title: `${this.businessList[this.current].real_name}的电子名片`,
               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()}`
            };
         }
@@ -262,7 +274,6 @@
      background: #fff;
      border-radius: 20rpx;
      overflow: hidden;
      padding-bottom: 30rpx;

      .top-image {
         width: 100%;