<template>
|
<!--
|
作者：系统自动生成
|
时间：当前日期
|
描述：插件中心-名片模板-编辑模板
|
-->
|
<div class="user" v-loading="loading">
|
<div class="common-form">名片模板编辑</div>
|
<div class="poster-box d-s-s">
|
<div class="left-box" style="width: auto;height: auto;min-height: auto;">
|
<div v-if="form.backdrop" class="img"><img v-img-url="form.backdrop.src" /></div>
|
<div class="userinfo">
|
<!-- 头像 -->
|
<div v-if="form.avatar.display == 1"
|
class="photo pa"
|
v-drag="{type:'avatar',obj:this}"
|
:class="{ radius: form.avatar.style == 'circle' }"
|
:style="'width:' + form.avatar.width + 'px;height:' + form.avatar.width + 'px;top:' + form.avatar.top + 'px;left:' + form.avatar.left + 'px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;color:#999'">
|
<span>头像</span>
|
</div>
|
|
<!-- Logo -->
|
<div v-if="form.logo.display == 1"
|
class="logo pa"
|
v-drag="{type:'logo',obj:this}"
|
:class="{ radius: form.logo.style == 'circle' }"
|
:style="'width:' + form.logo.width + 'px;height:' + form.logo.height + 'px;top:' + form.logo.top + 'px;left:' + form.logo.left + 'px;'">
|
<img v-img-url="form.logo.src" alt="" />
|
</div>
|
|
<!-- 姓名 -->
|
<div class="name pa"
|
v-drag="{type:'name',obj:this}"
|
:style="'font-size:' + form.name.fontSize + 'px;color:' + form.name.color + ';top:' + form.name.top + 'px;left:' + form.name.left + 'px;'">
|
这里是姓名
|
</div>
|
|
<!-- 手机 -->
|
<div class="mobile pa"
|
v-drag="{type:'mobile',obj:this}"
|
:style="'font-size:' + form.mobile.fontSize + 'px;color:' + form.mobile.color + ';top:' + form.mobile.top + 'px;left:' + form.mobile.left + 'px;'">
|
手机：134xxxxxxxx
|
</div>
|
|
<!-- 公司 -->
|
<div v-for="(item, index) in form.unit" :key="'unit' + index"
|
:class="'unit' + index + ' pa unit'"
|
v-drag="{type:'unit', index:index, obj:this}"
|
:style="'font-size:' + form.unit[index].fontSize + 'px;color:' + form.unit[index].color + ';top:' + form.unit[index].top + 'px;left:' + form.unit[index].left + 'px;'">
|
这是公司
|
</div>
|
|
<!-- 职位 -->
|
<div v-for="(item, index) in form.duties" :key="'duties' + index"
|
:class="'duties' + index + ' pa duties'"
|
v-drag="{type:'duties', index:index, obj:this}"
|
:style="'font-size:' + form.duties[index].fontSize + 'px;color:' + form.duties[index].color + ';top:' + form.duties[index].top + 'px;left:' + form.duties[index].left + 'px;'">
|
这是职位
|
</div>
|
|
<!-- 地址 -->
|
<div v-for="(item, index) in form.address" :key="'address' + index"
|
:class="'address' + index + ' pa address'"
|
v-drag="{type:'address', index:index, obj:this}"
|
:style="'font-size:' + form.address[index].fontSize + 'px;color:' + form.address[index].color + ';top:' + form.address[index].top + 'px;left:' + form.address[index].left + 'px;'">
|
地址：广西南宁江南区壮锦大道xxxx号
|
</div>
|
|
<!-- 微信 -->
|
<div class="wechat pa"
|
v-drag="{type:'wechat',obj:this}"
|
:style="'font-size:' + form.wechat.fontSize + 'px;color:' + form.wechat.color + ';top:' + form.wechat.top + 'px;left:' + form.wechat.left + 'px;'">
|
微信：134xxxxxxxx
|
</div>
|
|
<!-- 邮箱 -->
|
<div class="mailbox pa"
|
v-drag="{type:'mailbox',obj:this}"
|
:style="'font-size:' + form.mailbox.fontSize + 'px;color:' + form.mailbox.color + ';top:' + form.mailbox.top + 'px;left:' + form.mailbox.left + 'px;'">
|
邮箱：134xxxxxxxx@.xxx.com
|
</div>
|
|
<!-- 电话 -->
|
<div class="phone pa"
|
v-drag="{type:'phone',obj:this}"
|
:style="'font-size:' + form.phone.fontSize + 'px;color:' + form.phone.color + ';top:' + form.phone.top + 'px;left:' + form.phone.left + 'px;'">
|
电话：xxx-xxx-xxx
|
</div>
|
|
<!-- 自定义图标 -->
|
<div v-for="(item, index) in form.iconL" :key="'iconL' + index"
|
:class="'iconL' + index + ' pa icon'"
|
v-drag="{type:'iconL', index:index, obj:this}"
|
:style="'width:' + form.iconL[index].width + 'px;height:' + form.iconL[index].height + 'px;top:' + form.iconL[index].top + 'px;left:' + form.iconL[index].left + 'px;'">
|
<img v-img-url="form.iconL[index].src" alt="" />
|
</div>
|
</div>
|
</div>
|
|
<div class="right-box flex-1">
|
<el-form size="small" ref="form" :model="form" label-width="150px">
|
<!-- 背景图 -->
|
<el-form-item label="海报背景图">
|
<el-button type="primary" @click="openUpload(1)">上传图片</el-button>
|
<div class="tips">尺寸建议：名片标准尺寸为1063x634像素</div>
|
</el-form-item>
|
|
<!-- 头像设置 -->
|
<el-form-item label="是否显示头像">
|
<el-radio v-model="form.avatar.display" label="1">显示</el-radio>
|
<el-radio v-model="form.avatar.display" label="0">隐藏</el-radio>
|
</el-form-item>
|
<el-form-item v-if="form.avatar.display == 1" label="头像宽度" prop="avatar.width" :rules="[{ required: true, message: '请输入头像宽度' }]">
|
<el-input v-model.number="form.avatar.width" min="30" type="number" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item v-if="form.avatar.display == 1" label="头像样式">
|
<el-radio v-model="form.avatar.style" label="square">正方形</el-radio>
|
<el-radio v-model="form.avatar.style" label="circle">圆形</el-radio>
|
</el-form-item>
|
<el-form-item v-if="form.avatar.display == 1" label="头像位置">
|
<div class="d-s-r">
|
<el-input v-model.number="form.avatar.left" min="0" type="number" class="max-w200" placeholder="左右位置"></el-input>
|
<span class="mr-10">x</span>
|
<el-input v-model.number="form.avatar.top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
|
</div>
|
</el-form-item>
|
|
<!-- Logo设置 -->
|
<el-form-item label="是否显示Logo">
|
<el-radio v-model="form.logo.display" label="1">显示</el-radio>
|
<el-radio v-model="form.logo.display" label="0">隐藏</el-radio>
|
</el-form-item>
|
<el-form-item v-if="form.logo.display == 1" label="Logo图片">
|
<el-button type="primary" @click="openUpload(2)">上传图片</el-button>
|
</el-form-item>
|
<el-form-item v-if="form.logo.display == 1" label="Logo尺寸" prop="logo.width" :rules="[{ required: true, message: '请输入Logo宽度' }]">
|
<div class="d-s-r">
|
<el-input v-model.number="form.logo.width" min="10" type="number" class="max-w200" placeholder="宽度"></el-input>
|
<span class="mr-10">x</span>
|
<el-input v-model.number="form.logo.height" min="10" type="number" class="max-w200" placeholder="高度"></el-input>
|
</div>
|
</el-form-item>
|
<el-form-item v-if="form.logo.display == 1" label="Logo样式">
|
<el-radio v-model="form.logo.style" label="square">正方形</el-radio>
|
<el-radio v-model="form.logo.style" label="circle">圆形</el-radio>
|
</el-form-item>
|
<el-form-item v-if="form.logo.display == 1" label="Logo位置">
|
<div class="d-s-r">
|
<el-input v-model.number="form.logo.left" min="0" type="number" class="max-w200" placeholder="左右位置"></el-input>
|
<span class="mr-10">x</span>
|
<el-input v-model.number="form.logo.top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
|
</div>
|
</el-form-item>
|
|
<!-- 姓名设置 -->
|
<el-form-item label="姓名字体大小" prop="name.fontSize" :rules="[{ required: true, message: '请输入字体大小' }]">
|
<el-input v-model.number="form.name.fontSize" min="12" type="number" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="姓名字体颜色">
|
<el-color-picker v-model="form.name.color"></el-color-picker>
|
</el-form-item>
|
<el-form-item label="姓名位置">
|
<div class="d-s-r">
|
<el-input v-model.number="form.name.left" min="0" type="number" class="max-w200" placeholder="左右位置"></el-input>
|
<span class="mr-10">x</span>
|
<el-input v-model.number="form.name.top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
|
</div>
|
</el-form-item>
|
|
<!-- 手机设置 -->
|
<el-form-item label="手机字体大小" prop="mobile.fontSize" :rules="[{ required: true, message: '请输入字体大小' }]">
|
<el-input v-model.number="form.mobile.fontSize" min="12" type="number" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="手机字体颜色">
|
<el-color-picker v-model="form.mobile.color"></el-color-picker>
|
</el-form-item>
|
<el-form-item label="手机位置">
|
<div class="d-s-r">
|
<el-input v-model.number="form.mobile.left" min="0" type="number" class="max-w200" placeholder="左右位置"></el-input>
|
<span class="mr-10">x</span>
|
<el-input v-model.number="form.mobile.top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
|
</div>
|
</el-form-item>
|
|
<!-- 图标数量设置 -->
|
<!--<el-form-item label="图标数量">
|
<div class="d-s-r">
|
<el-button type="text" @click="editIcon" :disabled="form.iconL.length <= 0">
|
<i class="el-icon-minus"></i>
|
</el-button>
|
<span class="mr-10 ml-10">{{ form.iconL.length }}</span>
|
<el-button type="text" @click="addIcon">
|
<i class="el-icon-plus"></i>
|
</el-button>
|
</div>
|
</el-form-item>-->
|
|
<!-- 图标设置
|
<div v-for="(item, index) in form.iconL" :key="'icon_setting' + index" class="icon-setting">
|
<el-form-item :label="'图标' + (index + 1)">
|
<el-button type="primary" @click="openUpload(3, index)">上传图片</el-button>
|
</el-form-item>
|
<el-form-item :label="'图标' + (index + 1) + '尺寸'">
|
<div class="d-s-r">
|
<el-input v-model.number="form.iconL[index].width" min="10" type="number" class="max-w200" placeholder="宽度"></el-input>
|
<span class="mr-10">x</span>
|
<el-input v-model.number="form.iconL[index].height" min="10" type="number" class="max-w200" placeholder="高度"></el-input>
|
</div>
|
</el-form-item>
|
<el-form-item :label="'图标' + (index + 1) + '位置'">
|
<div class="d-s-r">
|
<el-input v-model.number="form.iconL[index].left" min="0" type="number" class="max-w200" placeholder="左右位置"></el-input>
|
<span class="mr-10">x</span>
|
<el-input v-model.number="form.iconL[index].top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
|
</div>
|
</el-form-item>
|
</div>-->
|
|
<!-- 公司数量设置
|
<el-form-item label="公司数量">
|
<div class="d-s-r">
|
<el-button type="text" @click="editUnit" :disabled="form.unit.length <= 0">
|
<i class="el-icon-minus"></i>
|
</el-button>
|
<span class="mr-10 ml-10">{{ form.unit.length }}</span>
|
<el-button type="text" @click="addUnit">
|
<i class="el-icon-plus"></i>
|
</el-button>
|
</div>
|
</el-form-item>-->
|
|
<!-- 公司设置 -->
|
<div v-for="(item, index) in form.unit" :key="'unit_setting' + index" class="unit-setting">
|
<el-form-item :label="'公司字体大小'">
|
<el-input v-model.number="form.unit[index].fontSize" min="12" type="number" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item :label="'公司字体颜色'">
|
<el-color-picker v-model="form.unit[index].color"></el-color-picker>
|
</el-form-item>
|
<el-form-item :label="'公司位置'">
|
<div class="d-s-r">
|
<el-input v-model.number="form.unit[index].left" min="0" type="number" class="max-w200" placeholder="左右位置"></el-input>
|
<span class="mr-10">x</span>
|
<el-input v-model.number="form.unit[index].top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
|
</div>
|
</el-form-item>
|
</div>
|
|
<!-- 职位数量设置
|
<el-form-item label="职位数量">
|
<div class="d-s-r">
|
<el-button type="text" @click="editDuties" :disabled="form.duties.length <= 0">
|
<i class="el-icon-minus"></i>
|
</el-button>
|
<span class="mr-10 ml-10">{{ form.duties.length }}</span>
|
<el-button type="text" @click="addDuties">
|
<i class="el-icon-plus"></i>
|
</el-button>
|
</div>
|
</el-form-item>-->
|
|
<!-- 职位设置 -->
|
<div v-for="(item, index) in form.duties" :key="'duties_setting' + index" class="duties-setting">
|
<el-form-item :label="'职位字体大小'">
|
<el-input v-model.number="form.duties[index].fontSize" min="12" type="number" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item :label="'职位字体颜色'">
|
<el-color-picker v-model="form.duties[index].color"></el-color-picker>
|
</el-form-item>
|
<el-form-item :label="'职位位置'">
|
<div class="d-s-r">
|
<el-input v-model.number="form.duties[index].left" min="0" type="number" class="max-w200" placeholder="左右位置"></el-input>
|
<span class="mr-10">x</span>
|
<el-input v-model.number="form.duties[index].top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
|
</div>
|
</el-form-item>
|
</div>
|
|
<!-- 地址数量设置
|
<el-form-item label="地址数量">
|
<div class="d-s-r">
|
<el-button type="text" @click="editAddress" :disabled="form.address.length <= 0">
|
<i class="el-icon-minus"></i>
|
</el-button>
|
<span class="mr-10 ml-10">{{ form.address.length }}</span>
|
<el-button type="text" @click="addAddress">
|
<i class="el-icon-plus"></i>
|
</el-button>
|
</div>
|
</el-form-item>-->
|
|
<!-- 地址设置 -->
|
<div v-for="(item, index) in form.address" :key="'address_setting' + index" class="address-setting">
|
<el-form-item :label="'地址字体大小'">
|
<el-input v-model.number="form.address[index].fontSize" min="12" type="number" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item :label="'地址字体颜色'">
|
<el-color-picker v-model="form.address[index].color"></el-color-picker>
|
</el-form-item>
|
<el-form-item :label="'地址位置'">
|
<div class="d-s-r">
|
<el-input v-model.number="form.address[index].left" min="0" type="number" class="max-w200" placeholder="左右位置"></el-input>
|
<span class="mr-10">x</span>
|
<el-input v-model.number="form.address[index].top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
|
</div>
|
</el-form-item>
|
</div>
|
|
<!-- 微信设置 -->
|
<el-form-item label="微信字体大小">
|
<el-input v-model.number="form.wechat.fontSize" min="12" type="number" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="微信字体颜色">
|
<el-color-picker v-model="form.wechat.color"></el-color-picker>
|
</el-form-item>
|
<el-form-item label="微信位置">
|
<div class="d-s-r">
|
<el-input v-model.number="form.wechat.left" min="0" type="number" class="max-w200" placeholder="左右位置"></el-input>
|
<span class="mr-10">x</span>
|
<el-input v-model.number="form.wechat.top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
|
</div>
|
</el-form-item>
|
|
<!-- 邮箱设置 -->
|
<el-form-item label="邮箱字体大小">
|
<el-input v-model.number="form.mailbox.fontSize" min="12" type="number" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="邮箱字体颜色">
|
<el-color-picker v-model="form.mailbox.color"></el-color-picker>
|
</el-form-item>
|
<el-form-item label="邮箱位置">
|
<div class="d-s-r">
|
<el-input v-model.number="form.mailbox.left" min="0" type="number" class="max-w200" placeholder="左右位置"></el-input>
|
<span class="mr-10">x</span>
|
<el-input v-model.number="form.mailbox.top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
|
</div>
|
</el-form-item>
|
|
<!-- 电话设置 -->
|
<el-form-item label="电话字体大小">
|
<el-input v-model.number="form.phone.fontSize" min="12" type="number" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="电话字体颜色">
|
<el-color-picker v-model="form.phone.color"></el-color-picker>
|
</el-form-item>
|
<el-form-item label="电话位置">
|
<div class="d-s-r">
|
<el-input v-model.number="form.phone.left" min="0" type="number" class="max-w200" placeholder="左右位置"></el-input>
|
<span class="mr-10">x</span>
|
<el-input v-model.number="form.phone.top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
|
</div>
|
</el-form-item>
|
|
<!-- 提交按钮 -->
|
<div class="common-button-wrapper">
|
<el-button @click="back">返回</el-button>
|
<el-button type="primary" @click="onSubmit" :loading="loading">提交</el-button>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
|
<!-- 上传图片组件 -->
|
<Upload v-if="isupload" :isupload="isupload" :type="uploadType" :index="uploadIndex" @returnImgs="returnImgsFunc">上传图片</Upload>
|
</div>
|
</template>
|
|
<script>
|
import Upload from '@/components/file/Upload';
|
import BusinessApi from '@/api/business';
|
|
export default {
|
components: {
|
Upload
|
},
|
data() {
|
return {
|
loading: false,
|
isupload: false,
|
uploadType: 1,
|
uploadIndex: 0,
|
form: {
|
backdrop: {
|
src: '',
|
height: 0,
|
width: 0,
|
type: 'backdrop'
|
},
|
is_business: 0,
|
name: {
|
fontSize: 14,
|
color: '#000000',
|
left: 232,
|
top: 13,
|
fontWeight: 400,
|
type: 'text'
|
},
|
avatar: {
|
width: 70,
|
style: 'circle',
|
left: 37,
|
top: 37,
|
display: 1,
|
src: '',
|
type: 'avatar'
|
},
|
logo: {
|
width: 70,
|
height: 27,
|
style: 'square',
|
left: 22,
|
src: '',
|
top: 24,
|
display: 1,
|
type: 'image'
|
},
|
mobile: {
|
fontSize: 14,
|
color: '#000000',
|
left: 192,
|
top: 43,
|
fontWeight: 400
|
},
|
address: [
|
{
|
fontSize: 14,
|
color: '#000000',
|
left: 133,
|
top: 206,
|
fontWeight: 400,
|
type: 'text'
|
}
|
],
|
unit: [
|
{
|
fontSize: 14,
|
color: '#000000',
|
left: 133,
|
top: 167,
|
fontWeight: 100,
|
type: 'text'
|
}
|
],
|
duties: [
|
{
|
fontSize: 14,
|
color: '#000000',
|
left: 260,
|
top: 167,
|
fontWeight: 400,
|
type: 'text'
|
}
|
],
|
position: [],
|
wechat: {
|
fontSize: 14,
|
color: '#000000',
|
left: 205,
|
top: 65,
|
fontWeight: 400,
|
type: 'text'
|
},
|
mailbox: {
|
fontSize: 14,
|
color: '#000000',
|
left: 205,
|
top: 104,
|
fontWeight: 400,
|
type: 'text'
|
},
|
phone: {
|
fontSize: 14,
|
color: '#000000',
|
left: 205,
|
top: 84,
|
fontWeight: 400,
|
type: 'text'
|
},
|
positionNum: 0,
|
iconL: []
|
}
|
};
|
},
|
directives: {
|
drag: {
|
inserted(el, binding) {
|
const { type, obj } = binding.value;
|
|
// 添加类型相关的类名，用于拖拽事件的绑定
|
el.classList.add('drag');
|
el.classList.add(type);
|
|
// 避免指令和dragEventArray方法重复绑定拖拽事件
|
// 实际的拖拽逻辑由dragEventArray方法处理
|
el.style.position = 'absolute';
|
}
|
}
|
},
|
created() {
|
// 获取URL参数中的template_id
|
this.template_id = this.$route.query.template_id;
|
if (this.template_id) {
|
this.loadData();
|
}
|
},
|
mounted() {
|
// 在组件挂载完成后，为所有可拖拽元素初始化拖拽事件
|
this.$nextTick(() => {
|
// 为数组类型的元素初始化拖拽事件
|
Object.keys(this.form).forEach(key => {
|
this.dragEventArray(key);
|
});
|
});
|
},
|
methods: {
|
// 拖拽事件初始化方法，用于处理数组类型元素的拖拽
|
dragEventArray(type) {
|
// 使用类选择器获取对应的元素，更准确高效
|
const elements = document.querySelectorAll(`.${type}`);
|
|
elements.forEach((el, index) => {
|
// 检查是否已经绑定过拖拽事件，避免重复绑定
|
if (el.getAttribute('drag-handler') === 'true') return;
|
el.setAttribute('drag-handler', 'true');
|
|
// 为每个元素添加拖拽事件
|
el.onmousedown = (event) => {
|
event.preventDefault();
|
|
// 计算鼠标按下位置与元素左上角的偏移
|
let sentX = event.clientX - el.offsetLeft;
|
let sentY = event.clientY - el.offsetTop;
|
|
// 获取父容器的边界
|
let parent = el.parentElement;
|
let l = 0;
|
let t = 0;
|
let r = parent.offsetWidth - el.offsetWidth;
|
let b = parent.offsetHeight - el.offsetHeight;
|
|
document.onmousemove = (event) => {
|
event.preventDefault();
|
|
// 计算新位置
|
let slideLeft = event.clientX - sentX;
|
let slideTop = event.clientY - sentY;
|
|
// 限制在父容器内
|
slideLeft <= l && (slideLeft = l);
|
slideLeft >= r && (slideLeft = r);
|
slideTop <= t && (slideTop = t);
|
slideTop >= b && (slideTop = b);
|
|
// 更新位置
|
if (Array.isArray(this.form[type]) && this.form[type][index]) {
|
// 使用Vue.set确保响应式更新，这样右侧表单的位置输入框也能同步更新
|
this.$set(this.form[type][index], 'left', slideLeft);
|
this.$set(this.form[type][index], 'top', slideTop);
|
|
// 直接更新DOM样式，确保视觉效果即时生效
|
el.style.left = slideLeft + 'px';
|
el.style.top = slideTop + 'px';
|
|
// 强制Vue更新，确保表单输入框同步更新
|
this.$forceUpdate();
|
} else {
|
// 使用Vue.set确保响应式更新，这样右侧表单的位置输入框也能同步更新
|
this.$set(this.form[type], 'left', slideLeft);
|
this.$set(this.form[type], 'top', slideTop);
|
// 直接更新DOM样式，确保视觉效果即时生效
|
el.style.left = slideLeft + 'px';
|
el.style.top = slideTop + 'px';
|
// 强制Vue更新，确保表单输入框同步更新
|
this.$forceUpdate();
|
}
|
};
|
|
document.onmouseup = () => {
|
document.onmousemove = null;
|
document.onmouseup = null;
|
};
|
|
return false;
|
};
|
});
|
},
|
|
// 加载数据
|
loadData() {
|
let self = this;
|
self.loading = true;
|
BusinessApi.templateDetail({template_id: self.template_id}, true)
|
.then(res => {
|
if (res.data.data) {
|
try {
|
const data = JSON.parse(res.data.data);
|
// 确保所有必要的数组字段存在
|
if (!data.unit) data.unit = [];
|
if (!data.duties) data.duties = [];
|
if (!data.address) data.address = [];
|
if (!data.iconL) data.iconL = [];
|
self.form = data;
|
|
// 数据加载完成后，重新初始化拖拽事件
|
self.$nextTick(() => {
|
['unit', 'duties', 'address', 'iconL'].forEach(type => {
|
self.dragEventArray(type);
|
});
|
});
|
} catch (e) {
|
console.error('解析数据失败', e);
|
}
|
}
|
self.loading = false;
|
})
|
.catch(error => {
|
self.loading = false;
|
console.error('加载数据失败', error);
|
});
|
},
|
|
// 拖动处理
|
dragDiv(x, y, type, index) {
|
// 确保坐标值有效
|
x = Math.max(0, x || 0);
|
y = Math.max(0, y || 0);
|
|
// 确保form对象存在
|
if (!this.form) {
|
console.warn('Form object not initialized');
|
return;
|
}
|
|
switch (type) {
|
case 'avatar':
|
if (this.form.avatar) {
|
this.form.avatar.left = x;
|
this.form.avatar.top = y;
|
}
|
break;
|
case 'logo':
|
if (this.form.logo) {
|
this.form.logo.left = x;
|
this.form.logo.top = y;
|
}
|
break;
|
case 'name':
|
if (this.form.name) {
|
this.form.name.left = x;
|
this.form.name.top = y;
|
}
|
break;
|
case 'mobile':
|
if (this.form.mobile) {
|
this.form.mobile.left = x;
|
this.form.mobile.top = y;
|
}
|
break;
|
case 'wechat':
|
if (this.form.wechat) {
|
this.form.wechat.left = x;
|
this.form.wechat.top = y;
|
}
|
break;
|
case 'mailbox':
|
if (this.form.mailbox) {
|
this.form.mailbox.left = x;
|
this.form.mailbox.top = y;
|
}
|
break;
|
case 'phone':
|
if (this.form.phone) {
|
this.form.phone.left = x;
|
this.form.phone.top = y;
|
}
|
break;
|
case 'unit':
|
// 增强公司元素的拖拽处理
|
if (Array.isArray(this.form.unit) && this.form.unit[index]) {
|
// 确保对象存在并具有left和top属性
|
if (!this.form.unit[index].left && this.form.unit[index].left !== 0) {
|
this.form.unit[index].left = 0;
|
}
|
if (!this.form.unit[index].top && this.form.unit[index].top !== 0) {
|
this.form.unit[index].top = 0;
|
}
|
this.form.unit[index].left = x;
|
this.form.unit[index].top = y;
|
} else {
|
console.warn('Unit element not found at index:', index);
|
}
|
break;
|
case 'duties':
|
// 增强职位元素的拖拽处理
|
if (Array.isArray(this.form.duties) && this.form.duties[index]) {
|
if (!this.form.duties[index].left && this.form.duties[index].left !== 0) {
|
this.form.duties[index].left = 0;
|
}
|
if (!this.form.duties[index].top && this.form.duties[index].top !== 0) {
|
this.form.duties[index].top = 0;
|
}
|
this.form.duties[index].left = x;
|
this.form.duties[index].top = y;
|
} else {
|
console.warn('Duties element not found at index:', index);
|
}
|
break;
|
case 'address':
|
// 增强地址元素的拖拽处理
|
if (Array.isArray(this.form.address) && this.form.address[index]) {
|
if (!this.form.address[index].left && this.form.address[index].left !== 0) {
|
this.form.address[index].left = 0;
|
}
|
if (!this.form.address[index].top && this.form.address[index].top !== 0) {
|
this.form.address[index].top = 0;
|
}
|
this.form.address[index].left = x;
|
this.form.address[index].top = y;
|
} else {
|
console.warn('Address element not found at index:', index);
|
}
|
break;
|
case 'iconL':
|
if (Array.isArray(this.form.iconL) && this.form.iconL[index]) {
|
this.form.iconL[index].left = x;
|
this.form.iconL[index].top = y;
|
}
|
break;
|
default:
|
console.warn('Unknown drag type:', type);
|
}
|
},
|
|
// 打开上传
|
openUpload(type, index) {
|
this.uploadType = type;
|
this.uploadIndex = index;
|
this.isupload = true;
|
},
|
|
// 返回图片
|
returnImgsFunc(e) {
|
if (e && e.length > 0) {
|
switch (this.uploadType) {
|
case 1: // 背景图
|
this.form.backdrop.src = e[0].file_path;
|
// 这里可以添加获取图片尺寸的逻辑
|
break;
|
case 2: // Logo
|
this.form.logo.src = e[0].file_path;
|
break;
|
case 3: // 图标
|
if (!this.form.iconL[this.uploadIndex]) {
|
this.form.iconL[this.uploadIndex] = {};
|
}
|
this.form.iconL[this.uploadIndex].src = e[0].file_path;
|
break;
|
}
|
}
|
this.isupload = false;
|
},
|
|
// 添加图标
|
addIcon() {
|
this.form.iconL.push({
|
src: '',
|
width: 30,
|
height: 30,
|
left: 100,
|
top: 100
|
});
|
// 添加后重新初始化拖拽事件
|
this.$nextTick(() => {
|
this.dragEventArray('iconL');
|
});
|
},
|
|
// 减少图标
|
editIcon() {
|
if (this.form.iconL.length > 0) {
|
this.form.iconL.pop();
|
}
|
},
|
|
// 添加公司
|
addUnit() {
|
const index = this.form.unit.length;
|
this.form.unit.push({
|
fontSize: 14,
|
color: '#000000',
|
left: 133,
|
top: 167 + (index * 20),
|
fontWeight: 100,
|
type: 'text'
|
});
|
|
// 添加后重新初始化拖拽事件
|
this.$nextTick(() => {
|
this.dragEventArray('unit');
|
});
|
},
|
|
// 减少公司
|
editUnit() {
|
if (this.form.unit.length > 0) {
|
this.form.unit.pop();
|
}
|
},
|
|
// 添加职位
|
addDuties() {
|
const index = this.form.duties.length;
|
this.form.duties.push({
|
fontSize: 14,
|
color: '#000000',
|
left: 260,
|
top: 167 + (index * 20),
|
fontWeight: 400,
|
type: 'text'
|
});
|
|
// 添加后重新初始化拖拽事件
|
this.$nextTick(() => {
|
this.dragEventArray('duties');
|
});
|
},
|
|
// 减少职位
|
editDuties() {
|
if (this.form.duties.length > 0) {
|
this.form.duties.pop();
|
}
|
},
|
|
// 添加地址
|
addAddress() {
|
const index = this.form.address.length;
|
this.form.address.push({
|
fontSize: 14,
|
color: '#000000',
|
left: 133,
|
top: 206 + (index * 20),
|
fontWeight: 400,
|
type: 'text'
|
});
|
|
// 添加后重新初始化拖拽事件
|
this.$nextTick(() => {
|
this.dragEventArray('address');
|
});
|
},
|
|
// 减少地址
|
editAddress() {
|
if (this.form.address.length > 0) {
|
this.form.address.pop();
|
}
|
},
|
|
// 提交表单
|
onSubmit() {
|
let self = this;
|
self.$refs.form.validate(valid => {
|
if (valid) {
|
self.loading = true;
|
|
// 确保必要字段存在
|
if (!self.form.backdrop.src) {
|
self.$message.error('请上传背景图');
|
self.loading = false;
|
return;
|
}
|
|
BusinessApi.templateEdit({
|
template_id: self.template_id,
|
template: self.form
|
}, true)
|
.then(res => {
|
self.loading = false;
|
self.$message({
|
message: '保存成功',
|
type: 'success'
|
});
|
})
|
.catch(error => {
|
self.loading = false;
|
self.$message.error('保存失败，请重试');
|
});
|
}
|
});
|
},
|
|
// 返回
|
back() {
|
this.$router.push('/plus/business/template/index');
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.poster-box {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.poster-box .left-box {
|
position: relative;
|
overflow: hidden;
|
margin: 0 30px;
|
border: 1px solid #e0e0e0;
|
border-radius: 8px;
|
background-color: #f5f5f5;
|
}
|
|
.poster-box .left-box .img img {
|
width: auto;
|
object-fit: cover;
|
}
|
|
.poster-box .left-box .userinfo {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
}
|
|
.poster-box .left-box .pa {
|
position: absolute;
|
cursor: move;
|
}
|
|
.poster-box .left-box .photo,
|
.poster-box .left-box .logo,
|
.poster-box .left-box .icon {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
overflow: hidden;
|
background: #ffffff;
|
border: 1px solid #e0e0e0;
|
}
|
|
.poster-box .left-box .photo.radius,
|
.poster-box .left-box .logo.radius,
|
.poster-box .left-box .icon.radius {
|
border-radius: 50%;
|
}
|
|
.poster-box .left-box .photo img,
|
.poster-box .left-box .logo img,
|
.poster-box .left-box .icon img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
|
.poster-box .left-box .name,
|
.poster-box .left-box .mobile,
|
.poster-box .left-box .unit,
|
.poster-box .left-box .duties,
|
.poster-box .left-box .address,
|
.poster-box .left-box .wechat,
|
.poster-box .left-box .mailbox,
|
.poster-box .left-box .phone {
|
padding: 2px 5px;
|
white-space: nowrap;
|
border-radius: 4px;
|
}
|
|
.poster-box .right-box {
|
flex: 1;
|
min-width: 400px;
|
max-height: 800px;
|
overflow-y: auto;
|
padding: 0 20px;
|
}
|
|
.tips {
|
margin-top: 5px;
|
color: #999;
|
font-size: 12px;
|
}
|
|
.d-s-r {
|
display: flex;
|
align-items: center;
|
}
|
|
.max-w460 {
|
max-width: 460px;
|
}
|
|
.max-w200 {
|
max-width: 200px;
|
}
|
|
.mr-10 {
|
margin-right: 10px;
|
}
|
|
.ml-10 {
|
margin-left: 10px;
|
}
|
|
.icon-setting {
|
border: 1px solid #e0e0e0;
|
padding: 10px;
|
margin-bottom: 10px;
|
border-radius: 4px;
|
}
|
</style>
|
