修改名片列表样式

quanwei

2025-11-13 572f6074c5bedcdcbabcd42995c0a2890995c870

 mobile/pages/plus/business/add.vue

@@ -74,7 +74,14 @@
            <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;">
@@ -82,7 +89,7 @@
                  头像
               </view>
               <view class="tx" style="margin-left: 30rpx;">
                  <image class="logo" :src="file_path" mode="heightFix"></image>
                  <image class="logo" :src="file_path||'@/static/shop/login/qietu_1054.png'" mode="heightFix"></image>
                  <Upload v-if="is_avatar" @getImgs="handleAvatarUpload" :imageList="[file_path]"></Upload>
               </view>
            </view>
@@ -91,7 +98,7 @@
                  logo
               </view>
               <view class="logo" style="overflow: hidden;">
                  <image class="logo" :src="logo_path" mode="heightFix"></image>
                  <image class="logo" :src="logo_path||'@/static/shop/login/qietu_1054.png'" mode="heightFix"></image>
                  <Upload v-if="is_logo" @getImgs="handleLogoUpload" :imageList="[logo_path]"></Upload>
               </view>
            </view>
@@ -110,7 +117,7 @@
                  <view class="lxfx">
                     <view class="lxfxbiaoti"><text style="color: #fa3534;">*</text>手机：</view>
                     <view class="lxfxnrr">
                        <input @input="sjh" placeholder="输入手机号，多个手机号用/隔开" v-model="mobile" class="lxfxneirong"
                        <input @input="sjh" placeholder="输入手机号" v-model="mobile" class="lxfxneirong"
                           type="text">
                        <input style="display: none;" name="mobile" v-model="business.mobile"
                           class="lxfxneirong" type="text">
@@ -164,19 +171,23 @@
                     <view class="lxfxbiaoti">行业：</view>
                     <view class="lxfxnrr">
                        <input class="lxfxneirong" :value="industryNmae" disabled readonly>
                        <input style="display: none;" type="hidden" name="industry_id" v-model="business.industry_id">
                        <input style="display: none;" type="hidden" name="industry_id"
                           v-model="business.industry_id">
                     </view>
                  </view>
                  <view class="lxfx">
                  <view class="lxfx" >
                     <view class="lxfxbiaoti">所在地区：</view>
                     <view class="lxfxnrr">
                        <input class="lxfxneirong" :value="selectCity" disabled="true" @click="showMulLinkageThreePicker" placeholder="请选择省市区">
                        <input style="display: none;" type="hidden" name="province_id" v-model="business.province_id">
                        <input class="lxfxneirong" :value="selectCity" disabled="true"
                           @click="chooseLocation" placeholder="请选择省市区">
                        <input style="display: none;" type="hidden" name="province_id"
                           v-model="business.province_id">
                        <input style="display: none;" type="hidden" name="city_id" v-model="business.city_id">
                        <input style="display: none;" type="hidden" name="region_id" v-model="business.region_id">
                        <input style="display: none;" type="hidden" name="region_id"
                           v-model="business.region_id">
                     </view>
                  </view>
                  <view class="lxfx">
                  <view class="lxfx" >
                     <view class="lxfxbiaoti"><text style="color: #fa3534;">*</text>地址：</view>
                     <view class="lxfxnrr">
                        <input placeholder="请输入详细地址" name="address[0]" v-model="business.address[0]"
@@ -198,23 +209,23 @@
               <input type="text" style="display: none;" name="logo" :value="logo_id">
               <input type="text" style="display: none;" name="logo_height" :value="logo_height">
               <input type="text" style="display: none;" name="logo_width" :value="logo_width">
               <input type="text" style="display: none;" name="longitude" :value="business.longitude">
               <input type="text" style="display: none;" name="latitude" :value="business.latitude">
            </view>
            <Popup :show="industryShow" :width="screenWidth"  type="bottom" :closeable="true" @close="industryClose">
            <Popup :show="industryShow" :width="screenWidth" type="bottom" :closeable="true" @close="industryClose">
               <view class="industry-popup">
                  <view class="industry-title">选择行业</view>
                  <scroll-view scroll-y="true" style="height: 600rpx;">
                     <!-- 递归展示行业树形结构 -->
                     <view v-for="item in industryList" :key="item.industry_id">
                        <view class="industry-item" 
                           @tap="selectIndustry" :data-id="item.industry_id"
                        <view class="industry-item" @tap="selectIndustry" :data-id="item.industry_id"
                           :class="{ 'selected': business.industry_id == item.industry_id }">
                           {{ item.name }}
                        </view>
                        <!-- 显示子行业 -->
                        <view v-if="item.child && item.child.length > 0" class="industry-child">
                           <view class="industry-item industry-child-item" 
                              v-for="child in item.child" :key="child.industry_id"
                              @tap="selectIndustry" :data-id="child.industry_id"
                           <view class="industry-item industry-child-item" v-for="child in item.child"
                              :key="child.industry_id" @tap="selectIndustry" :data-id="child.industry_id"
                              :class="{ 'selected': business.industry_id == child.industry_id }">
                              {{ child.name }}
                           </view>
@@ -223,7 +234,8 @@
                  </scroll-view>
               </view>
            </Popup>
            <mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
            <mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area"
               :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
         </view>
      </form>
   </view>
@@ -235,72 +247,78 @@
   import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
   export default {
      components: {
            Upload,
            Popup,
            mpvueCityPicker
         },
         data() {
            return {
               // 模板相关
               templateList: [], // 模板列表
               templateShow: false, // 模板弹窗显示状态
               template_id: 0, // 当前选中的模板ID
               templateIndex: 0, // 当前选中的模板索引
               // 业务数据
               business: {
                  name: '', // 姓名
                  mobile: '', // 手机号
                  mobile_phone: '', // 备用手机号
                  duties: [], // 职位
                  phone: '', // 电话
                  mailbox: '', // 邮箱
                  wechat: '', // 微信
                  unit: [], // 单位名称
                  position: [], // 职位信息
                  address: [], // 地址
                  industry_id: 0, // 行业ID
                  province_id: 0, // 省份ID
                  city_id: 0, // 城市ID
                  region_id: 0, // 区域ID
                  Introduction: '' // 简介
               },
               // 辅助输入
               mobile: '', // 用于输入的手机号（支持多手机号）
               // 业务状态
               business_card_id: 0, // 名片ID（用于编辑）
               // 图片相关
               file_id: 0, // 头像文件ID
               file_path: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132", // 头像路径
               logo_id: 0, // Logo文件ID
               logo_path: "http://lblmh.com/image/diy/logo_top.png", // Logo路径
               // 布局相关
               unit: [], // 单位信息数组
               logo_height: 0, // Logo高度
               logo_width: 0, // Logo宽度
               avatar_width: 0, // 头像宽度
               // 显示控制
               avatar_display: 1, // 头像显示状态
               logo_display: 1, // Logo显示状态
               position: [], // 位置信息
               is_business: 0, // 业务类型
               duties: '', // 职位字符串
               positionNum: 0, // 位置数量
               is_avatar: false, // 头像上传弹窗状态
               is_logo: false, // Logo上传弹窗状态
               // 行业相关
               industryList: [], // 行业列表
               industryShow: false, // 行业选择弹窗状态
               industryNmae:'请选择行业', // 选中的行业名称
               screenWidth:0, // 屏幕宽度
               // 区域选择相关
               cityPickerValueDefault: [0, 0, 0], // 地区选择器默认值
               selectCity: '选择省 市 区', // 选中的地区显示
               region: {}, // 地区信息
               is_load: false, // 数据加载状态
               province: [], // 省份数据
               city: [], // 城市数据
               area: [] // 区域数据
            }
         Upload,
         Popup,
         mpvueCityPicker
      },
      data() {
         return {
            // 模板相关
            templateList: [], // 模板列表
            templateShow: false, // 模板弹窗显示状态
            template_id: 0, // 当前选中的模板ID
            templateIndex: 0, // 当前选中的模板索引
            // 业务数据
            business: {
               name: '', // 姓名
               mobile: '', // 手机号
               mobile_phone: '', // 备用手机号
               duties: [], // 职位
               phone: '', // 电话
               mailbox: '', // 邮箱
               wechat: '', // 微信
               unit: [], // 单位名称
               position: [], // 职位信息
               address: [], // 地址
               industry_id: 0, // 行业ID
               province_id: 0, // 省份ID
               city_id: 0, // 城市ID
               region_id: 0, // 区域ID
               Introduction: '', // 简介
               ilk: '' ,// 名片类型
               latitude:0,
               longitude:0
            },
            // 名片类型
            ilkList: [], // 类型列表
            selectedIlk: {}, // 选中的类型
            // 辅助输入
            mobile: '', // 用于输入的手机号（支持多手机号）
            // 业务状态
            business_card_id: 0, // 名片ID（用于编辑）
            // 图片相关
            file_id: 0, // 头像文件ID
            file_path: "", // 头像路径
            logo_id: 0, // Logo文件ID
            logo_path: "", // Logo路径
            // 布局相关
            unit: [], // 单位信息数组
            logo_height: 0, // Logo高度
            logo_width: 0, // Logo宽度
            avatar_width: 0, // 头像宽度
            // 显示控制
            avatar_display: 1, // 头像显示状态
            logo_display: 1, // Logo显示状态
            position: [], // 位置信息
            is_business: 0, // 业务类型
            duties: '', // 职位字符串
            positionNum: 0, // 位置数量
            is_avatar: false, // 头像上传弹窗状态
            is_logo: false, // Logo上传弹窗状态
            // 行业相关
            industryList: [], // 行业列表
            industryShow: false, // 行业选择弹窗状态
            industryNmae: '请选择行业', // 选中的行业名称
            screenWidth: 0, // 屏幕宽度
            // 区域选择相关
            cityPickerValueDefault: [0, 0, 0], // 地区选择器默认值
            selectCity: '选择省 市 区', // 选中的地区显示
            region: {}, // 地区信息
            is_load: false, // 数据加载状态
            province: [], // 省份数据
            city: [], // 城市数据
            area: [] // 区域数据
         }
      },
      onLoad(e) {
         if (e.business_card_id) {
@@ -312,10 +330,40 @@
         }
         this.getTemplate();
         this.getIndustryList();
         this.getIlkList();
         // 初始化区域选择器数据
         this.initRegionData();
      },
      methods: {
         // 打开地图选择地址 by lyzflash
         chooseLocation(n) {
            let self=this;
            uni.chooseLocation({
               success: function (res) {
                  console.log(res);
                  self.business.longitude=res.longitude;
                  self.business.latitude=res.latitude;
                  self.location_address=res.address;
                  self.business.address[0]=res.name;
                  // 获取省市区
                  self.setLocationAddress();
               }
            });
         },
			
         // 获取掉省市区 by lyzflash
         setLocationAddress() {
            let self = this;
            self._get('user.address/setLocationAddress', {
               address: self.location_address
            }, function(res) {
               /* self.address.location_address = res.data.short_address; */
               self.business.province_id = res.data.cityCode[0];
               self.business.city_id = res.data.cityCode[1];
               self.business.region_id = res.data.cityCode[2];
               self.selectCity = res.data.region;
            });
         },
         templateClose() {
            this.templateShow = !this.templateShow
         },
@@ -400,22 +448,42 @@
            this.business.duties = duties
         },
         handleAvatarUpload(imgs) {
               this.is_avatar = false
            if (imgs && imgs.length > 0) {
               this.file_path = imgs[0].file_path
               this.file_id = imgs[0].file_id
               this.is_avatar = false
            }
         },
         handleLogoUpload(imgs) {
               this.is_logo = false
            if (imgs && imgs.length > 0) {
               this.logo_path = imgs[0].file_path
               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()
            this.screenWidth=systemInfo.screenWidth*2-70;
            this.screenWidth = systemInfo.screenWidth * 2 - 70;
            this._post('plus.business.template/getList', {
               screenWidth: systemInfo.screenWidth
            }, res => {
@@ -465,11 +533,34 @@
                  })
                  this.file_id = res.data.file_id;
                  this.logo_id = res.data.logo
                  res.data.file_path ? this.file_path = res.data.file_path : "";
                  res.data.logo ? this.logo_path = res.data.logo_image.file_path : "";
                  res.data.file_id ? this.file_path = res.data.file_path : "";
                  res.data.logo ? this.logo_path = res.data.logoImage.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) {
                     // 先等待行业列表加载完成再查找名称
@@ -480,18 +571,19 @@
                        this._post('plus.business.industry/getIndustryTree', {}, res => {
                           if (res.data) {
                              _this.industryList = res.data.tree;
                              _this.findIndustryName(_this.industryList, _this.business.industry_id);
                              _this.findIndustryName(_this.industryList, _this.business
                                 .industry_id);
                           }
                        })
                     }
                  }
						

                  // 设置地区显示值
                  if (this.business.region && this.business.region.province) {
                     let region = this.business.region;
                     this.selectCity = `${region.province} ${region.city} ${region.region}`;
                  }
						

                  this.getTemplate();

               }
@@ -608,7 +700,7 @@
   }

   .biaoti {
      color: #37bde6;
      color: #D41003;
      font-size: 40rpx;
      padding: 20rpx 0rpx;
   }
@@ -657,6 +749,14 @@
      border-radius: 30rpx;
   }

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

   .anu {
      position: fixed;
      bottom: 0rpx;
@@ -668,42 +768,42 @@

   .tijiao {
      width: 30%;
      background-color: #37bde6;
      background-color: #D41003;
      margin-left: 35%;
      color: #fff;
   }
	

   .industry-popup {
      padding: 20rpx;
   }
	

   .industry-title {
      text-align: center;
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      color: #37bde6;
      color: #D41003;
   }
	

   .industry-item {
      padding: 20rpx;
      border-bottom: 1rpx solid #e5e5e5;
      font-size: 32rpx;
   }
	

   .industry-item.selected {
      color: #37bde6;
      color: #D41003;
   }
	

   .industry-item:active {
      background-color: #f5f5f5;
   }
	

   /* 子行业样式 */
   .industry-child {
      background-color: #f8f8f8;
   }
	

   .industry-child-item {
      padding-left: 60rpx;
      font-size: 30rpx;