484 lines
17 KiB
HTML
484 lines
17 KiB
HTML
<template id="diy-adv">
|
|
<div class="component-wrap" :class="{curr: curr == 'diy-adv'}" @click="selectComponent()" :style="{padding: value.adv.margin.join(' ')}">
|
|
<div class="adv-wrap" :style="radius">
|
|
<div v-if="value.adv.list.length" class="swiper-wrap">
|
|
<div class="layui-carousel" id="advCarousel">
|
|
<div carousel-item>
|
|
<div v-for="(item, index) in value.adv.list" :key="item.id">
|
|
<img :src="ns.img(item.img)" alt="" v-if="item.img">
|
|
<div class="adv-empty-tips" v-else>
|
|
<p>点击编辑广告位</p>
|
|
<p>建议尺寸750*200</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="adv-empty-tips" v-else>
|
|
<p>点击编辑广告位</p>
|
|
<p>建议尺寸750*200</p>
|
|
</div>
|
|
</div>
|
|
<div class="selected-area"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 组件样式 -->
|
|
<style>
|
|
.adv-wrap {
|
|
overflow: hidden;
|
|
}
|
|
.adv-wrap .adv-empty-tips {
|
|
width: 100%;
|
|
height: 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #88c4dc;
|
|
background: #ebf8fd;
|
|
}
|
|
.adv-wrap .swiper-wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.adv-wrap .layui-carousel-ind {
|
|
top: -25px;
|
|
}
|
|
.adv-wrap .layui-carousel-ind ul {
|
|
background: none;
|
|
}
|
|
.adv-wrap .layui-carousel-ind ul li {
|
|
background: rgba(50, 50, 50, .3);
|
|
}
|
|
.adv-wrap .layui-carousel-ind ul li.layui-this {
|
|
background: #fff;
|
|
}
|
|
.adv-wrap [carousel-item] img {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
Vue.component('diy-adv', {
|
|
props: {
|
|
curr: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
value: {
|
|
type: Object,
|
|
default: function () {
|
|
return {};
|
|
}
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
carousel: 100
|
|
}
|
|
},
|
|
mounted(){
|
|
if (this.value.adv.list.length) {
|
|
setTimeout(function () {
|
|
carousel.render({
|
|
elem: '#advCarousel',
|
|
width: '100%', //设置容器宽度
|
|
height: '100%',
|
|
arrow: 'none'
|
|
});
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
radius(){
|
|
let wrapHeight = 0,
|
|
imgs = ns.deepclone(this.value.adv.list),
|
|
wrapWidth = 375 - parseInt(this.value.adv.margin[1]) * 2;
|
|
|
|
imgs.forEach((item, index) => {
|
|
let ratio = wrapWidth / item.img_width;
|
|
let height = item.img_height * ratio;
|
|
if (wrapHeight == 0 || wrapHeight < height) wrapHeight = height;
|
|
});
|
|
|
|
return {
|
|
'border-top-left-radius': this.value.adv.radius[0],
|
|
'border-top-right-radius': this.value.adv.radius[0],
|
|
'border-bottom-left-radius': this.value.adv.radius[1],
|
|
'border-bottom-right-radius': this.value.adv.radius[1],
|
|
'height': (wrapHeight ? wrapHeight : 100) + 'px'
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
selectComponent(){
|
|
this.$emit('click', 'diy-adv');
|
|
},
|
|
/**
|
|
* 计算图片高度
|
|
*/
|
|
calculateHeight(){
|
|
var height = 100;
|
|
if (this.value.adv.list.length) {
|
|
|
|
}
|
|
this.carousel = height;
|
|
},
|
|
/**
|
|
* 验证数据
|
|
* @returns {boolean}
|
|
*/
|
|
verify(){
|
|
var verify = true, self = this;
|
|
for (var i = 0; i < this.value.adv.list.length; i++) {
|
|
let item = this.value.adv.list[i];
|
|
if (item.img == '') {
|
|
layer.msg('请上传广告图片'); verify = false;
|
|
break;
|
|
}
|
|
}
|
|
return verify;
|
|
}
|
|
},
|
|
watch:{
|
|
'value.adv.list': function (nval, oval) {
|
|
setTimeout(function () {
|
|
carousel.render({
|
|
elem: '#advCarousel',
|
|
width: '100%', //设置容器宽度
|
|
height: '100%',
|
|
arrow: 'none'
|
|
});
|
|
})
|
|
this.calculateHeight();
|
|
}
|
|
},
|
|
template: '#diy-adv'
|
|
})
|
|
</script>
|
|
|
|
<!--编辑组件-->
|
|
<template id="diy-adv-edit">
|
|
<div class="component-wrpp diy-adv-edit">
|
|
<div class="edit-title">
|
|
<span>广告位设置</span>
|
|
<div class="tab-wrap">
|
|
<span class="tab-item" :class="{active: tab == 'content'}" @click="tab = 'content'">内容</span>
|
|
<span class="tab-item" :class="{active: tab == 'style'}" @click="tab = 'style'">样式</span>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form">
|
|
<div v-show="tab == 'content'">
|
|
<div class="group-title">
|
|
<span>广告设置</span>
|
|
</div>
|
|
<div class="adv-list">
|
|
<div class="adv-item" v-for="(item, index) in value.adv.list" :key="item.id">
|
|
<div class="iconfont icontuodong"></div>
|
|
<div class="main-box">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label sm">广告图</label>
|
|
<div class="layui-input-block img-upload">
|
|
<div class="upload-img-block">
|
|
<div class="upload-img-box" :class="{hover: item.img}">
|
|
<div class="upload-default">
|
|
<div class="preview_img" v-if="item.img" :id="'adv-icon-' + index">
|
|
<img :layer-src="img(item.img)" :src="img(item.img)" class="img_prev"/>
|
|
</div>
|
|
<div class="upload" v-else @click="uploadImg(index)">
|
|
<span class="add">+</span>
|
|
</div>
|
|
</div>
|
|
<div class="operation">
|
|
<div >
|
|
<i title="图片预览" class="iconfont iconreview js-preview" @click="previewImg(index)"></i>
|
|
<i title="删除图片" class="layui-icon layui-icon-delete js-delete" @click="deleteImg(index)"></i>
|
|
</div>
|
|
<div class="replace_img js-replace" @click="uploadImg(index)">点击替换</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label sm">链接</label>
|
|
<div class="layui-input-block">
|
|
<div class="select-url" @click="selectLink(index)">
|
|
<div class="text" :class="{'text-color': item.link.title }">{{ item.link.title ? item.link.title : '请选择链接' }}</div>
|
|
<i class="layui-icon layui-icon-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<i class="del" @click="deleteAdv(index)">x</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="add-adv" @click="addAdv" v-if="value.adv.list.length < 5">
|
|
<i class="iconfont iconjia2"></i>
|
|
添加广告
|
|
</div>
|
|
</div>
|
|
<div v-show="tab == 'style'">
|
|
<div class="group-title">
|
|
<span>组件样式</span>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label sm">上边距</label>
|
|
<div class="layui-input-block slide-wrap">
|
|
<div class="top"></div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label sm">下边距</label>
|
|
<div class="layui-input-block slide-wrap">
|
|
<div class="bottom"></div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label sm">左右边距</label>
|
|
<div class="layui-input-block slide-wrap">
|
|
<div class="about"></div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label sm">上圆角</label>
|
|
<div class="layui-input-block slide-wrap">
|
|
<div class="top-radius"></div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label sm">下圆角</label>
|
|
<div class="layui-input-block slide-wrap">
|
|
<div class="bottom-radius"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.diy-adv-edit {
|
|
|
|
}
|
|
.diy-adv-edit .adv-item {
|
|
background: #fff;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
user-select: none;
|
|
position: relative;
|
|
border: 1px dashed #eee;
|
|
}
|
|
.diy-adv-edit .adv-item .del {
|
|
background: #999;
|
|
color: #FFFFFF;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
right: -10px;
|
|
top: -10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
display: none;
|
|
}
|
|
.diy-adv-edit .adv-item:hover .del {
|
|
display: block;
|
|
}
|
|
.diy-adv-edit .adv-item .icontuodong {
|
|
cursor: move;
|
|
margin-right: 10px;
|
|
}
|
|
.diy-adv-edit .adv-item .main-box {
|
|
flex: 1;
|
|
width: 0;
|
|
}
|
|
.diy-adv-edit .adv-item .layui-form-label {
|
|
width: 55px;
|
|
}
|
|
.diy-adv-edit .adv-item .layui-form-label.sm + .layui-input-block {
|
|
margin-left: 60px;
|
|
}
|
|
.diy-adv-edit .adv-item .layui-form-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.diy-adv-edit .add-adv {
|
|
height: 40px;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
border: 1px solid #eee;
|
|
cursor: pointer;
|
|
color: #666;
|
|
margin-top: 10px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
}
|
|
.diy-adv-edit .add-adv:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
Vue.component('diy-adv-edit', {
|
|
props: {
|
|
value: {
|
|
type: Object,
|
|
default: function () {
|
|
return {};
|
|
}
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
tab: 'content',
|
|
styleList: [
|
|
{ title: '样式一', value: 1},
|
|
{ title: '样式二', value: 2}
|
|
]
|
|
}
|
|
},
|
|
mounted(){
|
|
var self = this;
|
|
slider.render({
|
|
elem: '.diy-adv-edit .top',
|
|
input: true,
|
|
value: self.value.adv.margin[0].split('px')[0],
|
|
change: function (value) {
|
|
self.value.adv.margin[0] = value + 'px';
|
|
self.updateMargin();
|
|
}
|
|
});
|
|
slider.render({
|
|
elem: '.diy-adv-edit .bottom',
|
|
input: true,
|
|
value: self.value.adv.margin[2].split('px')[0],
|
|
change: function (value) {
|
|
self.value.adv.margin[2] = value + 'px';
|
|
self.updateMargin();
|
|
}
|
|
});
|
|
slider.render({
|
|
elem: '.diy-adv-edit .about',
|
|
input: true,
|
|
max: 20,
|
|
value: self.value.adv.margin[1].split('px')[0],
|
|
change: function (value) {
|
|
self.value.adv.margin[1] = value + 'px';
|
|
self.value.adv.margin[3] = value + 'px';
|
|
self.updateMargin();
|
|
}
|
|
});
|
|
slider.render({
|
|
elem: '.diy-adv-edit .top-radius',
|
|
input: true,
|
|
value: self.value.adv.radius[0].split('px')[0],
|
|
max: 30,
|
|
change: function (value) {
|
|
self.value.adv.radius[0] = value + 'px';
|
|
self.updateRadius()
|
|
}
|
|
});
|
|
slider.render({
|
|
elem: '.diy-adv-edit .bottom-radius',
|
|
input: true,
|
|
value: self.value.adv.radius[1].split('px')[0],
|
|
max: 30,
|
|
change: function (value) {
|
|
self.value.adv.radius[1] = value + 'px';
|
|
self.updateRadius()
|
|
}
|
|
});
|
|
|
|
var downIndex = 0;
|
|
$('.diy-adv-edit .adv-list').DDSort({
|
|
//拖拽数据源
|
|
target: '.adv-item',
|
|
down: function (index) {
|
|
downIndex = index;
|
|
},
|
|
//拖拽结束
|
|
up: function () {
|
|
var index = $(this).index();
|
|
var temp = self.value.adv.list.splice(downIndex, 1);
|
|
self.value.adv.list.splice(index, 0, temp[0]);
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
updateMargin(){
|
|
this.value.adv.margin.push('')
|
|
this.value.adv.margin.pop()
|
|
},
|
|
updateRadius(){
|
|
this.value.adv.radius.push('')
|
|
this.value.adv.radius.pop()
|
|
},
|
|
addAdv(){
|
|
this.value.adv.list.push({
|
|
id: ns.gen_non_duplicate(6),
|
|
img: '',
|
|
text: '',
|
|
link: {
|
|
name: ''
|
|
}
|
|
})
|
|
},
|
|
img(src){
|
|
return ns.img(src);
|
|
},
|
|
/**
|
|
* 选择链接
|
|
* @param index
|
|
*/
|
|
selectLink(index){
|
|
var self = this;
|
|
ns.select_link(this.value.adv.list[index].link, function (data) {
|
|
self.value.adv.list[index].link = data;
|
|
self.updateArray('list');
|
|
});
|
|
},
|
|
uploadImg(index){
|
|
var self = this;
|
|
openAlbum(function (obj) {
|
|
for (var i = 0; i < obj.length; i++) {
|
|
self.value.adv.list[index].img = obj[i].pic_path;
|
|
self.value.adv.list[index].img_width = obj[i].pic_spec.split("*")[0];
|
|
self.value.adv.list[index].img_height = obj[i].pic_spec.split("*")[1];
|
|
self.updateArray('list');
|
|
}
|
|
}, 1);
|
|
},
|
|
previewImg(index){
|
|
layer.photos({
|
|
photos: '#adv-icon-' + index,
|
|
anim: 5
|
|
});
|
|
$('#adv-icon-' + index + ' img').click()
|
|
},
|
|
deleteImg(index){
|
|
this.value.adv.list[index].img = '';
|
|
this.updateArray('list');
|
|
},
|
|
deleteAdv(index){
|
|
var self = this;
|
|
layer.confirm('确定要删除吗?', function(_index){
|
|
self.value.adv.list.splice(index, 1);
|
|
layer.close(_index);
|
|
});
|
|
},
|
|
updateArray(key){
|
|
this.value.adv[key].push('')
|
|
this.value.adv[key].pop()
|
|
}
|
|
},
|
|
template: '#diy-adv-edit'
|
|
})
|
|
</script> |