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

quanwei

2025-10-30 2b728186c745b598e8ccb9dcc37360eed49375f6

 mobile/pages/plus/business/add.vue

@@ -74,7 +74,13 @@
            <view class="lxfx">
               <view class="lxfxbiaoti">名片类型：</view>
               <view class="lxfxnrr">
                  <input placeholder="请备注名片的用途" name='ilk' v-model="business.ilk" class="lxfxneirong" type="text">
                  <picker @change="changeIlk" :range="ilkList" :range-key="'name'" class="lxfxneirong" mode="selector">
                     <view class="picker-content">
                        {{selectedIlk.name || '请选择名片类型'}}
                        <text class="icon iconfont icon-jiantou"></text>
                     </view>
                     <input style="display: none;" name='ilk' v-model="business.ilk" type="text">
                  </picker>
               </view>
            </view>
            <view class="grxx" @click="is_avatar=true" v-show="avatar_display==1" style="overflow: hidden;">
@@ -262,8 +268,12 @@
                  province_id: 0, // 省份ID
                  city_id: 0, // 城市ID
                  region_id: 0, // 区域ID
                  Introduction: '' // 简介
                  Introduction: '', // 简介
                  ilk: '' // 名片类型
               },
               // 名片类型
               ilkList: [], // 类型列表
               selectedIlk: {}, // 选中的类型
               // 辅助输入
               mobile: '', // 用于输入的手机号（支持多手机号）
               // 业务状态
@@ -312,6 +322,7 @@
         }
         this.getTemplate();
         this.getIndustryList();
         this.getIlkList();
         // 初始化区域选择器数据
         this.initRegionData();
      },
@@ -412,6 +423,25 @@
               this.logo_id = imgs[0].file_id
            }
         },
         // 获取名片类型列表
         getIlkList() {
            let _this = this;
            this._post('plus.business.business/getIlk', {}, res => {
               if (res.data) {
                  // 转换为数组格式便于picker使用
                  _this.ilkList = Object.keys(res.data).map(key => ({
                     id: key,
                     name: res.data[key]
                  }));
               }
            })
         },
         // 切换名片类型
         changeIlk(e) {
            const index = e.detail.value;
            this.selectedIlk = this.ilkList[index];
            this.business.ilk = this.selectedIlk.id;
         },
         getTemplate() {
            let _this = this;
            const systemInfo = uni.getSystemInfoSync()
@@ -469,7 +499,29 @@
                  res.data.logo ? this.logo_path = res.data.logo_image.file_path : "";
                  res.data.logo_width ? this.logo_width = res.data.logo_width : 0;
                  res.data.logo_height ? this.logo_height = res.data.logo_height : 0;
						
					
               // 设置名片类型
                  if (this.business.ilk !== undefined && this.business.ilk !== '') {
                     // 等待类型列表加载完成后设置选中项
                     if (this.ilkList && this.ilkList.length > 0) {
                        // 尝试根据id查找，id可能是字符串或数字
                        const ilkId = String(this.business.ilk);
                        this.selectedIlk = this.ilkList.find(item => item.id === ilkId) || {};
                     } else {
                        // 如果类型列表还没加载完成，先获取列表再设置
                        this._post('plus.business.business/getIlk', {}, res => {
                           if (res.data) {
                              _this.ilkList = Object.keys(res.data).map(key => ({
                                 id: key,
                                 name: res.data[key]
                              }));
                              // 尝试根据id查找，id可能是字符串或数字
                              const ilkId = String(_this.business.ilk);
                              _this.selectedIlk = _this.ilkList.find(item => item.id === ilkId) || {};
                           }
                        })
                     }
                  }	
                  // 设置行业名称
                  if (this.business.industry_id) {
                     // 先等待行业列表加载完成再查找名称
@@ -657,6 +709,14 @@
      border-radius: 30rpx;
   }

   .picker-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
      color: #333;
   }

   .anu {
      position: fixed;
      bottom: 0rpx;