生成名片

quanwei

2025-10-29 76ed09d116f484b261d44219de300b79eb2013b3

 mobile/pages/plus/business/add.vue

@@ -1,495 +1,712 @@
<template>
   <view>
      <header-bar title="编辑名片" :isBack="true" @click="back"></header-bar>
      <scroll-view scroll-y="true" class="scroll-view">
         <!-- 名片预览区域 -->
         <view class="preview-section">
            <view class="preview-title">名片预览</view>
            <view class="preview-card" :style="previewStyle">
               <image v-if="business.background_image" class="preview-bg" :src="business.background_image" mode="aspectFill"></image>
               <view class="preview-content">
                  <image v-if="file_path" class="preview-avatar" :src="file_path" mode="aspectFill"></image>
                  <view class="preview-info">
                     <view class="preview-name">{{business.real_name || '姓名'}}</view>
                     <view class="preview-company">{{business.company_name || '公司名称'}}</view>
                     <view class="preview-position">{{business.position || '职位'}}</view>
                  </view>
               </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>

         <!-- 模板选择 -->
         <view class="template-section">
            <view class="section-title">选择模板</view>
            <scroll-view scroll-x="true" class="template-scroll">
               <view class="template-item" v-for="(template, index) in templateList" :key="index"
                  :class="{active: template_id === template.template_id}" @click="selectTemplate(index)">
                  <image class="template-img" :src="template.preview_image" mode="aspectFill"></image>
               </view>
            </scroll-view>
         </view>

         <!-- 表单内容 -->
         <form @submit="submitForm" class="form-section">
            <!-- 基本信息 -->
            <view class="form-group">
               <view class="group-title">基本信息</view>
					
               <!-- 头像上传 -->
               <view class="form-item" v-if="avatar_display">
                  <view class="item-label">头像</view>
                  <view class="upload-area" @click="uploadImage('avatar')">
                     <image v-if="file_path" class="upload-img" :src="file_path" mode="aspectFill"></image>
                     <view v-else class="upload-placeholder">
                        <text class="icon iconfont icon-camera"></text>
                        <text>上传头像</text>
         <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">
                        </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">
                  <input placeholder="请备注名片的用途" name='ilk' v-model="business.ilk" class="lxfxneirong" type="text">
               </view>

               <!-- 姓名 -->
               <view class="form-item">
                  <view class="item-label">姓名</view>
                  <input type="text" class="item-input" v-model="business.real_name" placeholder="请输入姓名" name="real_name" />
            </view>
            <view class="grxx" @click="is_avatar=true" v-show="avatar_display==1" style="overflow: hidden;">
               <view class="biaoti">
                  头像
               </view>

               <!-- 公司名称 -->
               <view class="form-item">
                  <view class="item-label">公司名称</view>
                  <input type="text" class="item-input" v-model="business.company_name" placeholder="请输入公司名称" name="company_name" />
               <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 class="form-item">
                  <view class="item-label">职位</view>
                  <input type="text" class="item-input" v-model="business.position" placeholder="请输入职位" name="position" />
            </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>

               <!-- 公司Logo -->
               <view class="form-item" v-if="logo_display">
                  <view class="item-label">公司Logo</view>
                  <view class="upload-area" @click="uploadImage('logo')">
                     <image v-if="logo_path" class="upload-img" :src="logo_path" mode="aspectFill"></image>
                     <view v-else class="upload-placeholder">
                        <text class="icon iconfont icon-camera"></text>
                        <text>上传Logo</text>
                  <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 class="form-group">
               <view class="group-title">联系方式</view>
					
               <!-- 手机号 -->
               <view class="form-item">
                  <view class="item-label">手机号</view>
                  <input type="number" class="item-input" v-model="business.phone" placeholder="请输入手机号" name="phone" />
            <view style="padding-bottom: 120rpx;">
               <view class="biaoti">
                  详细信息
               </view>

               <!-- 备用电话 -->
               <view class="form-item">
                  <view class="item-label">备用电话</view>
                  <input type="number" class="item-input" v-model="business.mobile" placeholder="请输入备用电话" name="mobile" />
               </view>

               <!-- 邮箱 -->
               <view class="form-item">
                  <view class="item-label">邮箱</view>
                  <input type="text" class="item-input" v-model="business.email" placeholder="请输入邮箱" name="email" />
               </view>

               <!-- 地址 -->
               <view class="form-item">
                  <view class="item-label">地址</view>
                  <input type="text" class="item-input" v-model="business.address" placeholder="请输入地址" name="address" />
               <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="form-group">
               <view class="group-title">详细信息</view>
					
               <!-- 个人简介 -->
               <view class="form-item">
                  <view class="item-label">个人简介</view>
                  <textarea class="item-textarea" v-model="business.intro" placeholder="请输入个人简介" name="intro" />
               </view>

               <!-- 业务范围 -->
               <view class="form-item">
                  <view class="item-label">业务范围</view>
                  <textarea class="item-textarea" v-model="business.business_scope" placeholder="请输入业务范围" name="business_scope" />
               </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>

            <!-- 保存按钮 -->
            <view class="submit-section">
               <button form-type="submit" class="submit-btn">保存</button>
            </view>
         </form>
      </scroll-view>

      <!-- 上传图片组件 -->
      <Upload v-if="isUpload" @getImgs="handleUpload" @close="closeUpload"></Upload>
            <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>
</template>

<script>
   import Popup from '@/components/uni-popup.vue';
   import Upload from '@/components/upload/uploadOne.vue';
   import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
   export default {
      components: {
         Upload
            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: [] // 区域数据
            }
      },
      data() {
         return {
            business: {
               real_name: '',
               company_name: '',
               position: '',
               phone: '',
               mobile: '',
               email: '',
               address: '',
               intro: '',
               business_scope: '',
               background_image: ''
            },
            templateList: [],
            template_id: '',
            file_id: '',
            file_path: '',
            logo_id: '',
            logo_path: '',
            business_card_id: '',
            avatar_display: true,
            logo_display: true,
            isUpload: false,
            uploadType: '',
            previewStyle: {}
         };
      },
      onLoad(options) {
         if (options.business_card_id) {
            this.business_card_id = options.business_card_id;
            this.getBusinessDetail();
      onLoad(e) {
         if (e.business_card_id) {
            uni.setNavigationBarTitle({
               title: '编辑名片'
            })
            this.business_card_id = e.business_card_id
            this.getBusiness(e.business_card_id)
         }
         this.getTemplateList();
         this.getTemplate();
         this.getIndustryList();
         // 初始化区域选择器数据
         this.initRegionData();
      },
      methods: {
         back() {
            uni.navigateBack();
         templateClose() {
            this.templateShow = !this.templateShow
         },
         // 获取模板列表
         getTemplateList() {
            let _this = this;
            uni.getSystemInfo({ success: function(res) { _this.systemInfo = res; } });
            _this._post('plus.business/template/getList', { screenWidth: _this.systemInfo.screenWidth }, function(res) {
               _this.templateList = res.data;
               if (_this.templateList.length > 0 && !_this.template_id) {
                  _this.template_id = _this.templateList[0].template_id;
                  _this.selectTemplate(0);
               }
            });
         industryClose() {
            this.industryShow = !this.industryShow
         },
         // 获取名片详情
         getBusinessDetail() {
         getIndustryList() {
            let _this = this;
            _this._post('plus.business/business/detail', { business_card_id: _this.business_card_id }, function(res) {
            this._post('plus.business.industry/getIndustryTree', {}, res => {
               if (res.data) {
                  _this.business = res.data;
                  _this.template_id = res.data.template_id;
                  _this.file_id = res.data.file_id;
                  _this.file_path = res.data.file_path || '';
                  _this.logo_id = res.data.logo_id;
                  _this.logo_path = res.data.logo_path || '';
                  // 找到对应模板并应用样式
                  _this.templateList.forEach((template, index) => {
                     if (template.template_id === _this.template_id) {
                        _this.selectTemplate(index);
                  _this.industryList = res.data.tree;
               }
            })
         },
         selectIndustry(e) {
            const industryId = e.target.dataset.id;
            console.log(industryId);
            this.business.industry_id = industryId;
            // 查找选中的行业名称
            this.findIndustryName(this.industryList, industryId);
            this.industryShow = false;
         },
         findIndustryName(industryList, industryId) {
            for (let item of industryList) {
               if (item.industry_id == industryId) {
                  this.industryNmae = item.name;
                  return;
               }
               if (item.child && item.child.length > 0) {
                  for (let child of item.child) {
                     if (child.industry_id == industryId) {
                        this.industryNmae = child.name;
                        return;
                     }
                  });
                  }
               }
            }
         },
         // 初始化区域数据
         initRegionData() {
            let self = this;
            self._get('settings/getRegion', {}, function(res) {
               if (res.data) {
                  self.province = res.data.regionData[0];
                  self.city = res.data.regionData[1];
                  self.area = res.data.regionData[2];
                  self.is_load = true;
               }
            });
         },
         // 选择模板
         selectTemplate(index) {
            const template = this.templateList[index];
            this.template_id = template.template_id;
            // 应用模板样式
            this.avatar_display = template.style?.avatar?.display !== false;
            this.logo_display = template.style?.logo?.display !== false;
            this.previewStyle = {
               backgroundColor: template.style?.background?.color || '#37bde6',
               color: template.style?.text?.color || '#fff'
            };
            // 如果有背景图优先级高于背景色
            if (template.background_image) {
               this.business.background_image = template.background_image;
            }
         // 显示区域选择器
         showMulLinkageThreePicker() {
            this.$refs.mpvueCityPicker.show();
         },
         // 上传图片
         uploadImage(type) {
            this.uploadType = type;
            this.isUpload = true;
         // 选择区域后的回调
         onConfirm(e) {
            this.region = e.label.split(' ');
            this.selectCity = e.label;
            this.business.province_id = e.cityCode[0];
            this.business.city_id = e.cityCode[1];
            this.business.region_id = e.cityCode[2];
         },
         // 处理上传结果
         handleUpload(data) {
            if (data && data.length > 0) {
               const file = data[0];
               if (this.uploadType === 'avatar') {
                  this.file_id = file.file_id;
                  this.file_path = file.file_path;
               } else if (this.uploadType === 'logo') {
                  this.logo_id = file.file_id;
                  this.logo_path = file.file_path;
               }
            }
            this.closeUpload();
         },
         // 关闭上传组件
         closeUpload() {
            this.isUpload = false;
            this.uploadType = '';
         },
         // 表单提交
         submitForm(e) {
            const formData = e.detail.value;
				
            // 表单验证
            if (!formData.real_name) {
               this.showError('请输入姓名');
               return false;
            }
            if (!formData.phone) {
               this.showError('请输入手机号');
               return false;
            }
				
            // 组装提交数据
            const submitData = {
               ...formData,
               template_id: this.template_id,
               file_id: this.file_id,
               logo_id: this.logo_id
            };
				
            // 判断是新增还是编辑
            let url = 'plus.business/business/add';
            if (this.business_card_id) {
               url = 'plus.business/business/edit';
               submitData.business_card_id = this.business_card_id;
            }
				
            // 提交表单
         sjh(e) {
            let _this = this;
            _this._post(url, submitData, function(res) {
               _this.showSuccess(res.msg, function() {
                  uni.navigateBack();
            let mobile = e.detail.value.split('/');
            if (mobile.length > 2) {
               this.showError('最多只能添加两个', function() {
                  _this.mobile = mobile[0] + '/' + mobile[1]
               });
            });
         }
               return false
            }
            console.log(mobile)
            this.business.mobile = mobile[0]
            this.business.mobile_phone = mobile[1]
         },
         jw(e) {
            let duties = e.detail.value.split('/');
            if (duties.length > 3) {
               this.showError('最多只能添加三个');
               return false
            }
            this.business.duties = duties
         },
         handleAvatarUpload(imgs) {
            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) {
            if (imgs && imgs.length > 0) {
               this.logo_path = imgs[0].file_path
               this.logo_id = imgs[0].file_id
            }
         },
         getTemplate() {
            let _this = this;
            const systemInfo = uni.getSystemInfoSync()
            this.screenWidth=systemInfo.screenWidth*2-70;
            this._post('plus.business.template/getList', {
               screenWidth: systemInfo.screenWidth
            }, res => {
               this.templateList = res.data;
               this.template_id ? '' : this.template_id = this.templateList[0].template_id
               _this.avatar_display = this.templateList[0].style.avatar.display;
               _this.is_business = this.templateList[0].style.is_business;
               _this.logo_display = this.templateList[0].style.logo.display;
               _this.templateList.forEach(function(res, index) {
                  if (res.template_id == _this.template_id) {
                     _this.radioChange(index)
                  }
               })

               /* uni.getImageInfo({
                  src: _this.logo_path,
                  success: function(image) {
                     console.log(image);
                     _this.logo_width=image.width
                     _this.logo_height=image.height
                     _this.templateList.forEach(function(res, index) {
                        let typel = _this.templateList[index].style.logo,
                           px = _this.templateList[index].px;
                        _this.templateList[index].style.logo.width = (image.width * px)
                        _this.templateList[index].style.logo.height = (image.height * px)
                     })
                  }

               }); */
               console.log(_this.templateList);
            })
         },
         getBusiness(business_card_id) {
            let _this = this;
            this._post('plus.business.business/detail', {
               business_card_id: business_card_id
            }, res => {
               if (res.data) {
                  this.business = res.data;
                  this.template_id = res.data.template_id;
                  this.unit = res.data.unit;
                  this.position = res.data.position;
                  this.mobile = this.business.mobile + (this.business.mobile_phone ? '/' + this.business
                     .mobile_phone : '');
                  this.business.duties.forEach(function(item, index) {
                     _this.duties = _this.duties + (item ? (index != 0 ? '/' + item : item) : '');
                  })
                  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.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.industry_id) {
                     // 先等待行业列表加载完成再查找名称
                     if (this.industryList && this.industryList.length > 0) {
                        this.findIndustryName(this.industryList, this.business.industry_id);
                     } else {
                        // 如果行业列表还没加载完成，先获取列表再查找
                        this._post('plus.business.industry/getIndustryTree', {}, res => {
                           if (res.data) {
                              _this.industryList = res.data.tree;
                              _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();

               }
            })
         },
         add(e) {
            let formDate = e.detail.value;
            formDate.template_id = this.template_id;
            /* formDate.unit=this.business.unit;
            formDate.duties=this.business.duties;
            formDate.address=this.business.address; */
            console.log(formDate);
            let url = 'plus.business.business/add'
            if (this.business_card_id) {
               url = 'plus.business.business/edit'
               Object.assign(formDate, {
                  business_card_id: this.business_card_id,
               })
            }
            this._post(url, formDate, res => {
               this.showSuccess(res.msg, res => {
                  uni.navigateBack()
               })
            })
         },
         radioChange(e) {
            let templateList = this.templateList[e];
            //style = JSON.parse(templateList.style);
            this.template_id = templateList.template_id;
            this.template_id = templateList.template_id;
            this.templateIndex = e;
            this.unit = templateList.style.unit;
            this.positionNum = templateList.style.positionNum;
            this.position = templateList.style.position;
            this.avatar_display = templateList.style.avatar.display;
            this.logo_display = templateList.style.logo.display;
            this.is_business = templateList.style.is_business;
         },

      }
   };
   }
</script>

<style lang="scss">
   .scroll-view {
      height: calc(100vh - 80rpx);
<style>
   .lxfx {
      height: 100rpx;
      align-items: center;
      display: flex;
      border-bottom: #dce3ec 1rpx solid;
      padding: 10rpx 0;
   }

   .preview-section {
      background: #fff;
      padding: 30rpx;
   .mpxz {
      width: 25%;
      margin-right: 2%;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 120rpx;
   }

   .zjc {
      z-index: 2;
      background-color: #0000008f;
      height: 120rpx;
      position: absolute;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10rpx;
   }

   .mpxz-image {
      height: 100rpx;
      width: 93%;
      border-radius: 10rpx;
   }

   .fds {
      padding: 0rpx 20rpx;
      background-color: #fff;
   }

   .toxian {
      margin-top: 10rpx;
      width: 170rpx;
      height: 170rpx;
      float: left;
   }

   .xinxx {
      height: 50rpx;
      margin-top: 17rpx;
   }

   .shurubiaoti {
      width: 20%;
      text-align: right;
      display: inline-block;
      line-height: 50rpx;
   }

   .shurunrr {
      display: inline-block;
      height: 50rpx;
      width: calc(80% - 180rpx);
   }

   .shuruneirong {
      display: flex;
      line-height: 50rpx;
   }

   .biaoti {
      color: #37bde6;
      font-size: 40rpx;
      padding: 20rpx 0rpx;
   }

   .logo {
      height: 100rpx;
      margin-left: 30rpx;
   }

   .lxfxbiaoti {
      display: inline-block;
   }

   .lxfxnrr {
      width: 80%;
      display: inline-flex;
      height: 100%;
   }

   .lxfxneirong {
      height: 100%;
      width: 100%;
   }

   .xzmc {
      line-height: 50rpx;
   }

   .xz {
      border: 1rpx solid #cbd4de;
      width: 50%;
      line-height: 50rpx;
      text-align: center;
      display: inline-block;
      color: #777b80;
   }

   .scroll-mpmb {
      height: 1000rpx;
      margin-top: 20rpx;
   }

   .tup {
      height: 450rpx;
      width: 90%;
      border-radius: 30rpx;
   }

   .anu {
      position: fixed;
      bottom: 0rpx;
      width: 100%;
      padding: 10rpx 0rpx;
      background-color: #fff;
      z-index: 99;
   }

   .tijiao {
      width: 30%;
      background-color: #37bde6;
      margin-left: 35%;
      color: #fff;
   }
	
   .industry-popup {
      padding: 20rpx;
   }
	
   .industry-title {
      text-align: center;
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 20rpx;

      .preview-title {
         font-size: 32rpx;
         font-weight: bold;
         color: #333;
         margin-bottom: 20rpx;
      }

      .preview-card {
         height: 400rpx;
         border-radius: 20rpx;
         overflow: hidden;
         position: relative;

         .preview-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
         }

         .preview-content {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            padding: 40rpx;
            color: #fff;

            .preview-avatar {
               width: 150rpx;
               height: 150rpx;
               border-radius: 50%;
               border: 4rpx solid #fff;
            }

            .preview-info {
               margin-left: 30rpx;

               .preview-name {
                  font-size: 44rpx;
                  font-weight: bold;
                  margin-bottom: 10rpx;
               }

               .preview-company {
                  font-size: 32rpx;
                  margin-bottom: 8rpx;
                  opacity: 0.9;
               }

               .preview-position {
                  font-size: 28rpx;
                  opacity: 0.8;
               }
            }
         }
      }
      color: #37bde6;
   }

   .template-section {
      background: #fff;
      padding: 30rpx;
      margin-bottom: 20rpx;

      .section-title {
         font-size: 32rpx;
         font-weight: bold;
         color: #333;
         margin-bottom: 20rpx;
      }

      .template-scroll {
         white-space: nowrap;
         padding-bottom: 10rpx;

         .template-item {
            display: inline-block;
            width: 200rpx;
            height: 140rpx;
            margin-right: 20rpx;
            border-radius: 10rpx;
            overflow: hidden;
            border: 2rpx solid transparent;

            &.active {
               border-color: #37bde6;
            }

            .template-img {
               width: 100%;
               height: 100%;
            }
         }
      }
	
   .industry-item {
      padding: 20rpx;
      border-bottom: 1rpx solid #e5e5e5;
      font-size: 32rpx;
   }

   .form-section {
      background: #fff;
      padding: 30rpx;

      .form-group {
         margin-bottom: 40rpx;

         .group-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
         }

         .form-item {
            display: flex;
            align-items: center;
            padding: 20rpx 0;
            border-bottom: 1rpx solid #f0f0f0;

            .item-label {
               width: 160rpx;
               font-size: 28rpx;
               color: #666;
            }

            .item-input {
               flex: 1;
               font-size: 28rpx;
               color: #333;
               padding: 0;
            }

            .item-textarea {
               flex: 1;
               font-size: 28rpx;
               color: #333;
               padding: 0;
               height: 150rpx;
               text-align: left;
            }

            .upload-area {
               width: 150rpx;
               height: 150rpx;
               border-radius: 10rpx;
               overflow: hidden;
               background: #f5f5f5;
               display: flex;
               align-items: center;
               justify-content: center;

               .upload-img {
                  width: 100%;
                  height: 100%;
               }

               .upload-placeholder {
                  text-align: center;

                  .icon {
                     font-size: 48rpx;
                     color: #999;
                     margin-bottom: 10rpx;
                  }

                  text {
                     font-size: 24rpx;
                     color: #999;
                  }
               }
         }
      }

      .submit-section {
         margin-top: 60rpx;
         margin-bottom: 40rpx;

         .submit-btn {
            width: 100%;
            background: #37bde6;
            color: #fff;
            border: none;
            border-radius: 10rpx;
            padding: 28rpx 0;
            font-size: 32rpx;
            font-weight: bold;
         }
      }
	
   .industry-item.selected {
      color: #37bde6;
   }
	
   .industry-item:active {
      background-color: #f5f5f5;
   }
	
   /* 子行业样式 */
   .industry-child {
      background-color: #f8f8f8;
   }
	
   .industry-child-item {
      padding-left: 60rpx;
      font-size: 30rpx;
      color: #666;
   }
</style>