<template>
|
<view>
|
<form @submit="add">
|
<!-- 名片预览区域 -->
|
<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">
|
</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>
|
</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,
|
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, // 头像宽度
|
// 公司职位列表
|
companyList: [], // 公司职位列表
|
// 显示控制
|
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) {
|
uni.setNavigationBarTitle({
|
title: '编辑名片'
|
})
|
this.business_card_id = e.business_card_id
|
this.getBusiness(e.business_card_id)
|
} else {
|
// 新增时默认添加一个公司职位
|
this.addCompany();
|
}
|
this.getTemplate();
|
this.getIndustryList();
|
this.getIlkList();
|
// 初始化区域选择器数据
|
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
|
},
|
industryClose() {
|
this.industryShow = !this.industryShow
|
},
|
getIndustryList() {
|
let _this = this;
|
this._post('plus.business.industry/getIndustryTree', {}, res => {
|
if (res.data) {
|
_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;
|
}
|
});
|
},
|
// 显示区域选择器
|
showMulLinkageThreePicker() {
|
this.$refs.mpvueCityPicker.show();
|
},
|
// 选择区域后的回调
|
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];
|
},
|
sjh(e) {
|
let _this = this;
|
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) {
|
this.is_avatar = false
|
if (imgs && imgs.length > 0) {
|
this.file_path = imgs[0].file_path
|
this.file_id = imgs[0].file_id
|
}
|
},
|
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();
|
// 使用实际屏幕宽度减去左右边距 (20rpx * 2 = 40rpx = 20px)
|
const displayWidth = systemInfo.screenWidth - 20;
|
this.screenWidth = displayWidth * 2; // 保存为rpx宽度
|
|
this._post('plus.business.template/getList', {
|
screenWidth: displayWidth // 传递实际显示宽度(px)
|
}, 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.initCompanyList();
|
|
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_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) {
|
// 先等待行业列表加载完成再查找名称
|
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;
|
},
|
|
// 初始化公司职位列表
|
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 {
|
min-height: 100rpx;
|
align-items: center;
|
display: flex;
|
border-bottom: #dce3ec 1rpx solid;
|
padding: 10rpx 0;
|
}
|
|
.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: #D41003;
|
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;
|
}
|
|
/* 名片预览样式优化 */
|
.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;
|
align-items: center;
|
height: 100rpx;
|
color: #333;
|
}
|
|
.anu {
|
position: fixed;
|
bottom: 0rpx;
|
width: 100%;
|
padding: 10rpx 0rpx;
|
background-color: #fff;
|
z-index: 99;
|
}
|
|
.tijiao {
|
width: 30%;
|
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: #D41003;
|
}
|
|
.industry-item {
|
padding: 20rpx;
|
border-bottom: 1rpx solid #e5e5e5;
|
font-size: 32rpx;
|
}
|
|
.industry-item.selected {
|
color: #D41003;
|
}
|
|
.industry-item:active {
|
background-color: #f5f5f5;
|
}
|
|
/* 子行业样式 */
|
.industry-child {
|
background-color: #f8f8f8;
|
}
|
|
.industry-child-item {
|
padding-left: 60rpx;
|
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>
|
