优化名片

quanwei

2 days ago 73b874c72ad55eb9eef21c36160ac0de58f0189e

 mobile/pages/plus/business/add.vue

@@ -1,242 +1,293 @@
<template>
   <view>
   <template>
      <view>
      <form @submit="add">
         <view
            style="display: flex;justify-content: center;position: relative;overflow: hidden;border-radius: 30rpx;"
            v-for="(item,index) in templateList" v-if="item.template_id==template_id" :key="index">
            <view v-for="(item,index) in item.style.icon" :key="index"
               :style="'position:absolute;display: flex;left:'+item.left+'px;top:'+item.top+'px;width:'+item.width+'px;height:'+item.height+'px;'">
               <image :src="item.src" :style="'width:'+item.width+'px;height:'+item.height+'px;'"></image>
            </view>
            <view v-for="(item,index) in item.style.address" :key="index"
               :style="'position:absolute;left:'+item.left+'px;top:'+item.top+'px;color:'+item.color+';font-size:'+item.fontSize+'px;'">
               地址：{{(business.address[index]||selectCity!='选择省 市 区')?(selectCity!='选择省 市 区'?selectCity:'')+business.address[index]:'未填写地址'}}
            </view>
            <view v-for="(item,index) in item.style.unit" :key="index"
               :style="'position:absolute;left:'+item.left+'px;top:'+item.top+'px;color:'+item.color+';font-size:'+item.fontSize+'px;'">
               {{business.unit[index]?business.unit[index]:'未填写公司'}}
            </view>
            <!-- <view v-for="(item,index) in item.style.position" :key="index"
               :style="'position:absolute;left:'+item.left+'px;top:'+item.top+'px;color:'+item.color+';font-size:'+item.fontSize+'px;'">
               {{business.position[index]?business.position[index]:'未填职位'}}
            </view> -->
            <view
               :style="'position:absolute;left:'+item.style.duties[0].left+'px;top:'+item.style.duties[0].top+'px;color:'+item.style.duties[0].color+';font-size:'+item.style.duties[0].fontSize+'px;'">
               {{business.duties[0]?business.duties[0]:'未填写职位'}}
            </view>
            <view v-if="business.mailbox"
               :style="'position:absolute;left:'+item.style.mailbox.left+'px;top:'+item.style.mailbox.top+'px;color:'+item.style.mailbox.color+';font-size:'+item.style.mailbox.fontSize+'px;'">
               邮箱：{{business.mailbox?business.mailbox:'未填写邮箱'}}
            </view>
            <view
               :style="'position:absolute;left:'+item.style.mobile.left+'px;top:'+item.style.mobile.top+'px;color:'+item.style.mobile.color+';font-size:'+item.style.mobile.fontSize+'px;'">
               手机：{{business.mobile?business.mobile:'未填写手机'}}{{business.mobile_phone?' / '+business.mobile_phone:''}}
            </view>
            <view
               :style="'position:absolute;left:'+item.style.wechat.left+'px;top:'+item.style.wechat.top+'px;color:'+item.style.wechat.color+';font-size:'+item.style.wechat.fontSize+'px;'">
               微信：{{business.wechat?business.wechat:'未填写微信'}}
            </view>
            <view
               :style="'position:absolute;left:'+item.style.name.left+'px;top:'+item.style.name.top+'px;color:'+item.style.name.color+';font-size:'+item.style.name.fontSize+'px;'">
               {{business.name?business.name:'未填写姓名'}}
            </view>
            <view v-if="business.phone"
               :style="'position:absolute;left:'+item.style.phone.left+'px;top:'+item.style.phone.top+'px;color:'+item.style.phone.color+';font-size:'+item.style.phone.fontSize+'px;'">
               电话：{{business.phone?business.phone:'未填写电话'}}
            </view>
            <image class="tup"
               :style="'width:'+item.style.backdrop.width+'px;height:'+item.style.backdrop.height+'px;'"
               :src="item.style.backdrop.src"></image>
            <view v-if="item.style.avatar.display==1"
               :style="'position:absolute;left:'+item.style.avatar.left+'px;top:'+item.style.avatar.top+'px;width:'+item.style.avatar.width+'px;height:'+item.style.avatar.width+'px;'+(item.style.avatar.style=='circle'?'border-radius:'+item.style.avatar.width+'px;overflow: hidden;':'overflow: hidden;')">
               <image :src="file_path?file_path:item.style.avatar.src"
                  :style="'width:'+item.style.avatar.width+'px;height:'+item.style.avatar.width+'px;'">
               </image>
            </view>
            <view v-if="item.style.logo.display==1" class="logo_h" ref="logo_h"
               :style="'position:absolute;left:'+item.style.logo.left+'px;top:'+item.style.logo.top+'px;width:'+item.style.logo.width+'px;height:'+item.style.logo.height+'px;'+(item.style.logo.style=='circle'?'border-radius:'+item.style.logo.width+'px;overflow: hidden;':'overflow: hidden;')">
               <image :src="logo_path?logo_path:item.style.logo.src" class="logo_h" ref="logo_h"></image>
            </view>
         <!-- 名片预览区域 -->
         <view class="business-card-preview"
            v-for="(templateItem,templateIndex) in templateList" v-if="templateItem.template_id==template_id" :key="templateIndex">

         <!-- 图标装饰 -->
         <view v-for="(item,index) in templateItem.style.icon" :key="index"
            class="card-icon"
            :style="{position:'absolute',display:'flex',left:item.left+'px',top:item.top+'px',width:item.width+'px',height:item.height+'px'}">
            <image :src="item.src" :style="{width:item.width+'px',height:item.height+'px'}"></image>
         </view>

         <!-- 预览区域 - 支持多个公司和职位 -->
         <scroll-view scroll-y="true" class="card-scroll-unit"
            :style="{position:'absolute',left:(templateItem.style.unit[0].left||0)+'px',top:(templateItem.style.unit[0].top||0)+'px',width:unitWidth+'px',height:unitHeight+'px'}">
               <view v-for="(companyItem, idx) in business.unit" :key="idx"
                  class="card-text-item"
                  :style="{color:(templateItem.style.unit[0].color||'#333'),fontSize:(templateItem.style.unit[0].fontSize||14)+'px',marginBottom:((templateItem.style.unit[0].fontSize||14)*0.5)+'px'}">
                  {{companyItem||'未填写公司'}}
               </view>
            </scroll-view>

         <scroll-view scroll-y="true" class="card-scroll-duties"
            :style="{position:'absolute',left:(templateItem.style.duties[0].left||0)+'px',top:(templateItem.style.duties[0].top||0)+'px',width:dutiesWidth+'px',height:dutiesHeight+'px'}">
               <view v-for="(dutiesItem, idx) in business.duties" :key="idx"
                  class="card-text-item"
                  :style="{color:(templateItem.style.duties[0].color||'#333'),fontSize:(templateItem.style.duties[0].fontSize||14)+'px',lineHeight:1.5,marginBottom:((templateItem.style.duties[0].fontSize||14)*0.5)+'px'}">
                  {{dutiesItem||'未填写职位'}}
               </view>
            </scroll-view>

         <!-- 地址 -->
         <view v-for="(item,index) in templateItem.style.address" :key="index"
            class="card-text"
            :style="{position:'absolute',left:item.left+'px',top:item.top+'px',color:item.color,fontSize:item.fontSize+'px',maxWidth:addressMaxWidth+'px'}">
            地址：{{(business.address[index]||selectCity!='选择省 市 区')?(selectCity!='选择省 市 区'?selectCity:'')+business.address[index]:'未填写地址'}}
         </view>

         <!-- 邮箱 -->
         <view v-if="business.mailbox"
            class="card-text"
            :style="{position:'absolute',left:templateItem.style.mailbox.left+'px',top:templateItem.style.mailbox.top+'px',color:templateItem.style.mailbox.color,fontSize:templateItem.style.mailbox.fontSize+'px',maxWidth:mailboxMaxWidth+'px'}">
            邮箱：{{business.mailbox?business.mailbox:'未填写邮箱'}}
         </view>

         <!-- 手机 -->
         <view class="card-text"
            :style="{position:'absolute',left:templateItem.style.mobile.left+'px',top:templateItem.style.mobile.top+'px',color:templateItem.style.mobile.color,fontSize:templateItem.style.mobile.fontSize+'px',maxWidth:mobileMaxWidth+'px'}">
            手机：{{business.mobile?business.mobile:'未填写手机'}}{{business.mobile_phone?' / '+business.mobile_phone:''}}
         </view>

         <!-- 微信 -->
         <view class="card-text"
            :style="{position:'absolute',left:templateItem.style.wechat.left+'px',top:templateItem.style.wechat.top+'px',color:templateItem.style.wechat.color,fontSize:templateItem.style.wechat.fontSize+'px',maxWidth:wechatMaxWidth+'px'}">
            微信：{{business.wechat?business.wechat:'未填写微信'}}
         </view>


         <!-- 姓名 -->
         <view class="card-text"
            :style="{position:'absolute',left:templateItem.style.name.left+'px',top:templateItem.style.name.top+'px',color:templateItem.style.name.color,fontSize:templateItem.style.name.fontSize+'px',maxWidth:nameMaxWidth+'px'}">
            {{business.name?business.name:'未填写姓名'}}
         </view>

         <!-- 电话 -->
         <view v-if="business.phone"
            class="card-text"
            :style="{position:'absolute',left:templateItem.style.phone.left+'px',top:templateItem.style.phone.top+'px',color:templateItem.style.phone.color,fontSize:templateItem.style.phone.fontSize+'px',maxWidth:phoneMaxWidth+'px'}">
            电话：{{business.phone?business.phone:'未填写电话'}}
         </view>

         <!-- 背景图 -->
         <image class="tup card-backdrop"
            :style="{width:templateItem.style.backdrop.width+'px',height:templateItem.style.backdrop.height+'px'}"
            :src="templateItem.style.backdrop.src"></image>

         <!-- 头像 -->
         <view v-if="templateItem.style.avatar.display==1"
            class="card-avatar"
            :class="{'avatar-circle': templateItem.style.avatar.style==='circle'}"
            style="position:absolute"
            :style="{left:templateItem.style.avatar.left+'px',top:templateItem.style.avatar.top+'px',width:templateItem.style.avatar.width+'px',height:templateItem.style.avatar.width+'px'}">
            <image :src="file_path?file_path:templateItem.style.avatar.src"
               :style="{width:templateItem.style.avatar.width+'px',height:templateItem.style.avatar.width+'px'}">
            </image>
         </view>

         <!-- Logo -->
         <view v-if="templateItem.style.logo.display==1"
            class="card-logo"
            :class="{'logo-circle': templateItem.style.logo.style==='circle'}"
            ref="logo_h"
            style="position:absolute"
            :style="{left:templateItem.style.logo.left+'px',top:templateItem.style.logo.top+'px',width:templateItem.style.logo.width+'px',height:templateItem.style.logo.height+'px'}">
            <image :src="logo_path?logo_path:templateItem.style.logo.src" class="logo_h" ref="logo_h"></image>
         </view>
         </view>
         <view class="fds">
            <view>
               <scroll-view scroll-x="true">
                  <view style="width: 100%;white-space: nowrap;">
                     <view class="mpxz" v-for="(item,index) in templateList" :key="index"
                        @tap="radioChange(index)">
                        <view class="zjc" v-if="item.template_id==template_id">
            <scroll-view scroll-x="true">
               <view style="width: 100%;white-space: nowrap;">
                  <view class="mpxz" v-for="(item,index) in templateList" :key="index"
                     @tap="radioChange(index)">
                     <view class="zjc" v-if="item.template_id==template_id">
                     </view>
                     <image class="mpxz-image" :src="item.image" mode="aspectFit"></image>
                  </view>
               </view>
            </scroll-view>
         </view>
         <view class="lxfx">
            <view class="lxfxbiaoti">名片类型：</view>
            <view class="lxfxnrr">
               <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;">
            <view class="biaoti">
               头像
            </view>
            <view class="tx" style="margin-left: 30rpx;">
               <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>
         <view @click="is_logo=true" v-show="logo_display==1">
            <view class="biaoti">
               logo
            </view>
            <view class="logo" style="overflow: hidden;">
               <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>
         <view>
            <view class="biaoti">
               联系方式
            </view>
            <view>
               <view class="lxfx">
                  <view class="lxfxbiaoti"><text style="color: #fa3534;">*</text>姓名：</view>
                  <view class="lxfxnrr">
                     <input placeholder="请输入姓名" name='name' v-model="business.name" class="lxfxneirong"
                        type="text">
                  </view>
               </view>
               <view class="lxfx">
                  <view class="lxfxbiaoti"><text style="color: #fa3534;">*</text>手机：</view>
                  <view class="lxfxnrr">
                     <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">
                     <input style="display: none;" name="mobile_phone" v-model="business.mobile_phone"
                        class="lxfxneirong" type="text">
                  </view>
               </view>

               <view class="lxfx">
                  <view class="lxfxbiaoti">座机：</view>
                  <view class="lxfxnrr"><input placeholder="请输入电话" v-model="business.phone" name="phone"
                        class="lxfxneirong" type="text">
                  </view>
               </view>
               <view class="lxfx">
                  <view class="lxfxbiaoti">微信：</view>
                  <view class="lxfxnrr"><input class="lxfxneirong" name="wechat" v-model="business.wechat"
                        placeholder="请输入微信" type="text">
                  </view>
               </view>
               <view class="lxfx">
                  <view class="lxfxbiaoti">邮箱：</view>
                  <view class="lxfxnrr"><input class="lxfxneirong" name="mailbox" v-model="business.mailbox"
                        placeholder="请输入邮箱" type="text">
                  </view>
               </view>
            </view>
         </view>
         <view style="padding-bottom: 300rpx;">
            <view class="biaoti">
               详细信息
            </view>
            <view>
               <view v-for="(item,index) in companyList" :key="index" class="company-item">
                  <view class="company-header">
                     <text class="company-title">公司/职位 {{index+1}}</text>
                     <text class="delete-btn" v-if="companyList.length > 1" @tap="deleteCompany(index)">删除</text>
                  </view>
                  <view class="lxfx">
                     <view class="lxfxbiaoti">公司名称：</view>
                     <view class="lxfxnrr">
                        <input placeholder="请输入公司名称" :name="'unit['+index+']'"
                           v-model="companyList[index].unit" @input="syncBusinessFromCompanyList"
                           class="lxfxneirong" type="text">
                     </view>
                  </view>
                  <view class="lxfx">
                     <view class="lxfxbiaoti">职位：</view>
                     <view class="lxfxnrr">
                        <input placeholder="请输入职位" :name="'duties['+index+']'"
                           v-model="companyList[index].duties" @input="syncBusinessFromCompanyList"
                           class="lxfxneirong" type="text">
                     </view>
                  </view>
               </view>
               <view class="add-company-btn" @tap="addCompany">
                  <text class="icon iconfont icon-add"></text>
                  <text>添加公司/职位</text>
               </view>
               <view class="lxfx" @tap="industryClose">
                  <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">
                  </view>
               </view>
               <view class="lxfx" >
                  <view class="lxfxbiaoti">所在地区：</view>
                  <view class="lxfxnrr">
                     <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">
                  </view>
               </view>
               <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]"
                        class="lxfxneirong" type="text">
                  </view>
               </view>
               <view class="lxfx">
                  <view class="lxfxbiaoti">简介：</view>
                  <view class="lxfxnrr">
                     <textarea placeholder="请输入个人或公司简介" maxlength="-1" name="Introduction" v-model="business.Introduction"
                        class="lxfxneirong" :auto-height="true"></textarea>
                  </view>
               </view>
            </view>
         </view>
         <view class="anu">
            <button form-type="submit" class="tijiao">保存名片</button>
            <input type="text" style="display: none;" name="file_id" :value="file_id">
            <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">
            <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"
                        :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"
                           :class="{ 'selected': business.industry_id == child.industry_id }">
                           {{ child.name }}
                        </view>
                        <image class="mpxz-image" :src="item.image" mode="aspectFit"></image>
                     </view>
                  </view>
               </scroll-view>
            </view>
            <view class="lxfx">
               <view class="lxfxbiaoti">名片类型：</view>
               <view class="lxfxnrr">
                  <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;">
               <view class="biaoti">
                  头像
               </view>
               <view class="tx" style="margin-left: 30rpx;">
                  <image class="logo" :src="file_path" mode="heightFix"></image>
                  <Upload v-if="is_avatar" @getImgs="handleAvatarUpload" :imageList="[file_path]"></Upload>
               </view>
            </view>
            <view @click="is_logo=true" v-show="logo_display==1">
               <view class="biaoti">
                  logo
               </view>
               <view class="logo" style="overflow: hidden;">
                  <image class="logo" :src="logo_path" mode="heightFix"></image>
                  <Upload v-if="is_logo" @getImgs="handleLogoUpload" :imageList="[logo_path]"></Upload>
               </view>
            </view>
            <view>
               <view class="biaoti">
                  联系方式
               </view>
               <view>
                  <view class="lxfx">
                     <view class="lxfxbiaoti"><text style="color: #fa3534;">*</text>姓名：</view>
                     <view class="lxfxnrr">
                        <input placeholder="请输入姓名" name='name' v-model="business.name" class="lxfxneirong"
                           type="text">
                     </view>
                  </view>
                  <view class="lxfx">
                     <view class="lxfxbiaoti"><text style="color: #fa3534;">*</text>手机：</view>
                     <view class="lxfxnrr">
                        <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">
                        <input style="display: none;" name="mobile_phone" v-model="business.mobile_phone"
                           class="lxfxneirong" type="text">
                     </view>
                  </view>

                  <view class="lxfx">
                     <view class="lxfxbiaoti">座机：</view>
                     <view class="lxfxnrr"><input placeholder="请输入电话" v-model="business.phone" name="phone"
                           class="lxfxneirong" type="text">
                     </view>
                  </view>
                  <view class="lxfx">
                     <view class="lxfxbiaoti">微信：</view>
                     <view class="lxfxnrr"><input class="lxfxneirong" name="wechat" v-model="business.wechat"
                           placeholder="请输入微信" type="text">
                     </view>
                  </view>
                  <view class="lxfx">
                     <view class="lxfxbiaoti">邮箱：</view>
                     <view class="lxfxnrr"><input class="lxfxneirong" name="mailbox" v-model="business.mailbox"
                           placeholder="请输入邮箱" type="text">
                     </view>
                  </view>
               </view>
            </view>
            <view style="padding-bottom: 120rpx;">
               <view class="biaoti">
                  详细信息
               </view>
               <view>
                  <view v-for="(item,index) in unit" :key="index">
                     <view class="lxfx">
                        <view class="lxfxbiaoti">单位名称：</view>
                        <view class="lxfxnrr">
                           <input placeholder="请输入单位名称" :name="'unit['+index+']'"
                              v-model="business.unit[index]" class="lxfxneirong" type="text">
                        </view>
                     </view>
                     <view class="lxfx">
                        <view class="lxfxbiaoti">职位：</view>
                        <view class="lxfxnrr">
                           <input placeholder="请输入职位" :name="'duties['+index+']'"
                              v-model="business.duties[index]" class="lxfxneirong" type="text">
                        </view>
                     </view>
                  </view>
                  <view class="lxfx" @tap="industryClose">
                     <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">
                     </view>
                  </view>
                  <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 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">
                     </view>
                  </view>
                  <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]"
                           class="lxfxneirong" type="text">
                     </view>
                  </view>
                  <view class="lxfx">
                     <view class="lxfxbiaoti">简介：</view>
                     <view class="lxfxnrr">
                        <textarea placeholder="请输入个人或公司简介" name="Introduction" v-model="business.Introduction"
                           class="lxfxneirong" :auto-height="true"></textarea>
                     </view>
                  </view>
               </view>
            </view>
            <view class="anu">
               <button form-type="submit" class="tijiao">保存名片</button>
               <input type="text" style="display: none;" name="file_id" :value="file_id">
               <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">
            </view>
            <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"
                           :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"
                              :class="{ 'selected': business.industry_id == child.industry_id }">
                              {{ child.name }}
                           </view>
                        </view>
                     </view>
                  </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>
         </view>
      </form>
   </view>
         </Popup>
         <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>
</template>

<script>
@@ -273,7 +324,9 @@
               city_id: 0, // 城市ID
               region_id: 0, // 区域ID
               Introduction: '', // 简介
               ilk: '' // 名片类型
               ilk: '' ,// 名片类型
               latitude:0,
               longitude:0
            },
            // 名片类型
            ilkList: [], // 类型列表
@@ -284,14 +337,16 @@
            business_card_id: 0, // 名片ID（用于编辑）
            // 图片相关
            file_id: 0, // 头像文件ID
            file_path: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132", // 头像路径
            file_path: "", // 头像路径
            logo_id: 0, // Logo文件ID
            logo_path: "http://lblmh.com/image/diy/logo_top.png", // Logo路径
            logo_path: "", // Logo路径
            // 布局相关
            unit: [], // 单位信息数组
            logo_height: 0, // Logo高度
            logo_width: 0, // Logo宽度
            avatar_width: 0, // 头像宽度
            // 公司职位列表
            companyList: [], // 公司职位列表
            // 显示控制
            avatar_display: 1, // 头像显示状态
            logo_display: 1, // Logo显示状态
@@ -323,6 +378,9 @@
            })
            this.business_card_id = e.business_card_id
            this.getBusiness(e.business_card_id)
         } else {
            // 新增时默认添加一个公司职位
            this.addCompany();
         }
         this.getTemplate();
         this.getIndustryList();
@@ -330,7 +388,230 @@
         // 初始化区域选择器数据
         this.initRegionData();
      },
      computed: {
         // 计算公司列表高度
         unitHeight() {
            const fontSize = (this.templateList.find(t => t.template_id === this.template_id)?.style?.unit?.[0]?.fontSize) || 14;
            const lineHeight = fontSize * 1.5; // 行高 = 字体大小 * 1.5
            const lineSpacing = fontSize * 0.5; // 行间距 = 字体大小 * 0.5
            const itemCount = this.business.unit ? this.business.unit.length : 0;
            // 估算高度：每个公司可能占用最多3行，乘以行高，加上行间距，再加上padding
            const estimatedLinesPerItem = 3;
            const height = (lineHeight * estimatedLinesPerItem + lineSpacing) * itemCount + 20;
            return Math.max(height, 80); // 确保最小高度为80px
         },
         // 计算职位列表高度
         dutiesHeight() {
            const fontSize = (this.templateList.find(t => t.template_id === this.template_id)?.style?.duties?.[0]?.fontSize) || 14;
            const lineHeight = fontSize * 1.5; // 行高 = 字体大小 * 1.5
            const lineSpacing = fontSize * 0.5; // 行间距 = 字体大小 * 0.5
            const itemCount = this.business.duties ? this.business.duties.length : 0;
            // 估算高度：每个职位可能占用最多3行，乘以行高，加上行间距，再加上padding
            const estimatedLinesPerItem = 3;
            const height = (lineHeight * estimatedLinesPerItem + lineSpacing) * itemCount + 20;
            return Math.max(height, 80); // 确保最小高度为80px
         },
         // 计算公司容器的合适宽度（智能判断右边是否有其他字段）
         unitWidth() {
            const template = this.templateList.find(t => t.template_id === this.template_id);
            if (!template || !template.style?.unit?.[0]) return 150;
            return this.calculateFieldMaxWidth(template.style.unit[0].left, template.style.unit[0].top);
         },
         // 计算职位容器的合适宽度（智能判断右边是否有其他字段）
         dutiesWidth() {
            const template = this.templateList.find(t => t.template_id === this.template_id);
            if (!template || !template.style?.duties?.[0]) return 150;
            return this.calculateFieldMaxWidth(template.style.duties[0].left, template.style.duties[0].top);
         },
         // 地址字段的最大宽度
         addressMaxWidth() {
            const template = this.templateList.find(t => t.template_id === this.template_id);
            if (!template || !template.style?.address?.[0]) return 200;
            return this.calculateFieldMaxWidth(template.style.address[0].left, template.style.address[0].top);
         },
         // 邮箱字段的最大宽度
         mailboxMaxWidth() {
            const template = this.templateList.find(t => t.template_id === this.template_id);
            if (!template || !template.style?.mailbox) return 200;
            return this.calculateFieldMaxWidth(template.style.mailbox.left, template.style.mailbox.top);
         },
         // 手机字段的最大宽度
         mobileMaxWidth() {
            const template = this.templateList.find(t => t.template_id === this.template_id);
            if (!template || !template.style?.mobile) return 200;
            return this.calculateFieldMaxWidth(template.style.mobile.left, template.style.mobile.top);
         },
         // 微信字段的最大宽度
         wechatMaxWidth() {
            const template = this.templateList.find(t => t.template_id === this.template_id);
            if (!template || !template.style?.wechat) return 200;
            return this.calculateFieldMaxWidth(template.style.wechat.left, template.style.wechat.top);
         },
         // 姓名字段的最大宽度
         nameMaxWidth() {
            const template = this.templateList.find(t => t.template_id === this.template_id);
            if (!template || !template.style?.name) return 200;
            return this.calculateFieldMaxWidth(template.style.name.left, template.style.name.top);
         },
         // 电话字段的最大宽度
         phoneMaxWidth() {
            const template = this.templateList.find(t => t.template_id === this.template_id);
            if (!template || !template.style?.phone) return 200;
            return this.calculateFieldMaxWidth(template.style.phone.left, template.style.phone.top);
         }
      },
      watch: {
         // 监听companyList变化,同步到business对象
         // 不使用deep监听,只在数组引用变化时同步
         // 这样可以避免深度监听导致的多次同步
         companyList: {
            handler(newVal, oldVal) {
               if (newVal && newVal.length > 0) {
                  this.syncBusinessFromCompanyList();
               }
            }
         }
      },
      methods: {
         // 智能计算文本字段的最大宽度（供computed调用）
         // 根据右边是否有其他字段来动态计算maxWidth
         calculateFieldMaxWidth(left, top) {
            const template = this.templateList.find(t => t.template_id === this.template_id);
            if (!template || !template.style?.backdrop) return 200;

            const backdropWidth = template.style.backdrop.width || 375;
            const rightFields = [];

            // 收集所有可能的字段
            const fields = [];

            // 公司
            if (template.style.unit && template.style.unit[0]) {
               fields.push({
                  name: 'unit',
                  left: template.style.unit[0].left,
                  top: template.style.unit[0].top,
                  width: template.style.unit[0].width
               });
            }

            // 职位
            if (template.style.duties && template.style.duties[0]) {
               fields.push({
                  name: 'duties',
                  left: template.style.duties[0].left,
                  top: template.style.duties[0].top,
                  width: template.style.duties[0].width
               });
            }

            // 姓名
            if (template.style.name) {
               fields.push({
                  name: 'name',
                  left: template.style.name.left,
                  top: template.style.name.top,
                  width: template.style.name.width
               });
            }

            // 地址
            if (template.style.address && template.style.address[0]) {
               fields.push({
                  name: 'address',
                  left: template.style.address[0].left,
                  top: template.style.address[0].top,
                  width: template.style.address[0].width
               });
            }

            // 邮箱
            if (template.style.mailbox) {
               fields.push({
                  name: 'mailbox',
                  left: template.style.mailbox.left,
                  top: template.style.mailbox.top,
                  width: template.style.mailbox.width
               });
            }

            // 手机
            if (template.style.mobile) {
               fields.push({
                  name: 'mobile',
                  left: template.style.mobile.left,
                  top: template.style.mobile.top,
                  width: template.style.mobile.width
               });
            }

            // 微信
            if (template.style.wechat) {
               fields.push({
                  name: 'wechat',
                  left: template.style.wechat.left,
                  top: template.style.wechat.top,
                  width: template.style.wechat.width
               });
            }

            // 电话
            if (template.style.phone) {
               fields.push({
                  name: 'phone',
                  left: template.style.phone.left,
                  top: template.style.phone.top,
                  width: template.style.phone.width
               });
            }

            // 找出右边最近的字段
            // 判断标准: left > 当前left, 且top在合理范围内(±20px)
            const TOLERANCE = 20;
            for (let field of fields) {
               if (field.left > left && Math.abs(field.top - top) <= TOLERANCE) {
                  rightFields.push(field);
               }
            }

            // 如果右边有字段,取最近的一个的左边距
            if (rightFields.length > 0) {
               rightFields.sort((a, b) => a.left - b.left);
               return Math.max(rightFields[0].left - left, 50);
            }

            // 如果右边没有字段,使用名片边缘
            return Math.max(backdropWidth - left - 10, 100);
         },
         // 打开地图选择地址 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
         },
@@ -415,13 +696,14 @@
            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
@@ -448,10 +730,13 @@
         },
         getTemplate() {
            let _this = this;
            const systemInfo = uni.getSystemInfoSync()
            this.screenWidth = systemInfo.screenWidth * 2 - 70;
            const systemInfo = uni.getSystemInfoSync();
            // 使用实际屏幕宽度减去左右边距 (20rpx * 2 = 40rpx = 20px)
            const displayWidth = systemInfo.screenWidth - 20;
            this.screenWidth = displayWidth * 2; // 保存为rpx宽度

            this._post('plus.business.template/getList', {
               screenWidth: systemInfo.screenWidth
               screenWidth: displayWidth // 传递实际显示宽度(px)
            }, res => {
               this.templateList = res.data;
               this.template_id ? '' : this.template_id = this.templateList[0].template_id
@@ -492,6 +777,10 @@
                  this.template_id = res.data.template_id;
                  this.unit = res.data.unit;
                  this.position = res.data.position;

                  // 初始化公司职位列表
                  this.initCompanyList();

                  this.mobile = this.business.mobile + (this.business.mobile_phone ? '/' + this.business
                     .mobile_phone : '');
                  this.business.duties.forEach(function(item, index) {
@@ -499,8 +788,8 @@
                  })
                  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;

@@ -589,13 +878,61 @@
            this.is_business = templateList.style.is_business;
         },

         // 初始化公司职位列表
         initCompanyList() {
            let unitLength = Array.isArray(this.business.unit) ? this.business.unit.length : 0;
            if (unitLength > 0) {
               // 根据现有数据生成公司职位列表
               this.companyList = [];
               for (let i = 0; i < unitLength; i++) {
                  this.companyList.push({
                     unit: this.business.unit[i] || '',
                     duties: this.business.duties[i] || ''
                  });
               }
            } else {
               // 如果没有数据,至少添加一个
               this.companyList = [{ unit: '', duties: '' }];
            }

            // 不在这里调用syncBusinessFromCompanyList,因为watch会自动同步
            // 这样可以避免数据被意外重置
         },

         // 添加公司职位
         addCompany() {
            this.companyList.push({
               unit: '',
               duties: ''
            });
            // 移除syncBusinessFromCompanyList调用,watch会处理
         },

         // 删除公司职位
         deleteCompany(index) {
            if (this.companyList.length <= 1) {
               this.showError('至少保留一个公司/职位');
               return;
            }
            this.companyList.splice(index, 1);
            // 移除syncBusinessFromCompanyList调用,watch会处理
         },

         // 从公司职位列表同步到business对象
         syncBusinessFromCompanyList() {
            if (this.companyList && this.companyList.length > 0) {
               this.business.unit = this.companyList.map(item => item.unit);
               this.business.duties = this.companyList.map(item => item.duties);
            }
         }

      }
   }
</script>

<style>
   .lxfx {
      height: 100rpx;
      min-height: 100rpx;
      align-items: center;
      display: flex;
      border-bottom: #dce3ec 1rpx solid;
@@ -666,7 +1003,7 @@
   }

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

   /* 名片预览样式优化 */
   .business-card-preview {
      position: sticky;
      top: 0;
      z-index: 99999;
      overflow: visible;
      border-radius: 30rpx;
      margin: 20rpx;
      background-color: #f5f5f5;
      width: calc(100% - 40rpx);
      min-height: 450rpx;
   }

   .card-backdrop {
      border-radius: 30rpx;
   }

   .card-icon {
      z-index: 10;
   }

   .card-text {
      white-space: normal;
      word-break: break-word;
      word-wrap: break-word;
      overflow-wrap: break-word;
      overflow: hidden;
      max-width: 100%;
      line-height: 1.5;
   }

   .card-scroll-unit,
   .card-scroll-duties {
      overflow: hidden;
      overflow-y: auto;
      background-color: transparent;
      box-sizing: border-box;
   }

   .card-text-item {
      word-break: break-word;
      word-wrap: break-word;
      overflow-wrap: break-word;
      white-space: normal;
      padding: 2px 4px;
      line-height: 1.5;
      margin-bottom: 4px; /* 行间距 */
   }

   .card-avatar,
   .card-logo {
      overflow: hidden;
   }

   .card-avatar.avatar-circle {
      border-radius: 50%;
   }

   .card-logo.logo-circle {
      border-radius: 50%;
   }

   .card-avatar image,
   .card-logo image {
      width: 100%;
      height: 100%;
      object-fit: cover;
   }

   .picker-content {
      display: flex;
      justify-content: space-between;
@@ -734,7 +1140,7 @@

   .tijiao {
      width: 30%;
      background-color: #37bde6;
      background-color: #D41003;
      margin-left: 35%;
      color: #fff;
   }
@@ -748,7 +1154,7 @@
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      color: #37bde6;
      color: #D41003;
   }

   .industry-item {
@@ -758,7 +1164,7 @@
   }

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

   .industry-item:active {
@@ -775,4 +1181,53 @@
      font-size: 30rpx;
      color: #666;
   }

   /* 公司职位样式 */
   .company-item {
      background-color: #f9f9f9;
      border-radius: 12rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
   }

   .company-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
      padding-bottom: 12rpx;
      border-bottom: 1rpx solid #e5e5e5;
   }

   .company-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
   }

   .delete-btn {
      font-size: 26rpx;
      color: #fa3534;
      padding: 4rpx 12rpx;
      background-color: rgba(250, 53, 52, 0.1);
      border-radius: 4rpx;
   }

   .add-company-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24rpx;
      margin-top: 20rpx;
      border: 2rpx dashed #D41003;
      border-radius: 12rpx;
      color: #D41003;
      font-size: 28rpx;
      background-color: rgba(212, 16, 3, 0.05);
   }

   .add-company-btn .icon {
      margin-right: 8rpx;
      font-size: 32rpx;
   }
</style>