初始上传
This commit is contained in:
186
app/component/view/image_ads/css/design.css
Executable file
186
app/component/view/image_ads/css/design.css
Executable file
@@ -0,0 +1,186 @@
|
||||
@CHARSET "UTF-8";
|
||||
.image-ads .layui-input-block span.sm span{
|
||||
max-width: 100px;
|
||||
}
|
||||
/*图片广告组件*/
|
||||
.image-ads .image-ads-warp {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.image-ads .image-ads-warp .image-ads-item{
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
/* 图片轮播点 */
|
||||
.image-ads .carousel-btn{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
.image-ads .carousel-btn .arrows{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.image-ads .carousel-btn .arrows i{
|
||||
display: none;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.image-ads .carousel-btn .dot-wrap{
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.image-ads .carousel-btn .dot-wrap.line i{
|
||||
width: 9px;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.image-ads .carousel-btn .dot-wrap.line i:last-of-type{
|
||||
margin-right: 0;
|
||||
}
|
||||
.image-ads .carousel-btn .dot-wrap.left{
|
||||
left: 35px;
|
||||
}
|
||||
.image-ads .carousel-btn .dot-wrap.right{
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.image-ads .carousel-btn .dot-wrap.hide{
|
||||
display: none;
|
||||
}
|
||||
.image-ads .carousel-btn .dot-wrap.straightLine i{
|
||||
width: 12px;
|
||||
height: 4px;
|
||||
border-radius: 0;
|
||||
|
||||
}
|
||||
.image-ads .carousel-btn .dot-wrap i{
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background-color: #b2b2b2;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.image-ads .carousel-btn .dot-wrap i.active{
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
}
|
||||
.image-ads .carousel-btn .dot-wrap.line i.active{
|
||||
width: 18px;
|
||||
}
|
||||
.image-ads .carousel-btn:hover .arrows i{
|
||||
display: block;
|
||||
}
|
||||
/* 图片广告 - 属性设置 */
|
||||
.image-ads .edit-attribute .attr-wrap .restore-wrap .img-block{
|
||||
margin-left: 40px;
|
||||
}
|
||||
.image-ads .edit-attribute .attr-wrap .restore-wrap .img-block + .content-block{
|
||||
width: calc(100% - 125px);
|
||||
}
|
||||
.edit-attribute .attr-wrap .restore-wrap .image-ad-list>ul>li:hover .img-block i.del {
|
||||
display:block;
|
||||
}
|
||||
.image-ads .image-ad-list {
|
||||
margin-left:20px;
|
||||
}
|
||||
.image-ads .image-ad-list .word-aux {
|
||||
margin: 10px 0 10px 0;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
.image-ads .image-ad-list>ul>li {
|
||||
padding:10px;
|
||||
background: #ffffff;
|
||||
border:1px dashed #e5e5e5;
|
||||
position:relative;
|
||||
margin-top:16px;
|
||||
}
|
||||
.image-ads .image-ad-list>ul>li:first-child {
|
||||
margin-top:0;
|
||||
}
|
||||
.image-ads .image-ad-list>ul>li .content-block {
|
||||
display:inline-block;
|
||||
width:71%;
|
||||
min-height: 66px;
|
||||
}
|
||||
.image-ads .image-ad-list>ul>li .content-block.textNavigation {
|
||||
width:100%;
|
||||
}
|
||||
.image-ads .image-ad-list>ul>li .content-block .layui-form-item {
|
||||
margin:0;
|
||||
}
|
||||
.image-ads .image-ad-list>ul>li .content-block .layui-form-label {
|
||||
width:60px;
|
||||
padding:9px 0;
|
||||
line-height: 1;
|
||||
}
|
||||
.image-ads .image-ad-list>ul>li .content-block div {
|
||||
margin-top:10px;
|
||||
}
|
||||
.image-ads .image-ad-list>ul>li .content-block div:last-child {
|
||||
margin-top:0;
|
||||
}
|
||||
.image-ads .image-ad-list>ul>li:hover .del {
|
||||
display:block;
|
||||
}
|
||||
.image-ads .image-ad-list>ul>li>.iconfont {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 15px;
|
||||
cursor: move;
|
||||
font-size: 20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.image-ads .add-item {
|
||||
border:1px dashed #e5e5e5;
|
||||
text-align: center;
|
||||
cursor:pointer;
|
||||
background: #ffffff;
|
||||
padding:10px;
|
||||
margin:16px 0;
|
||||
}
|
||||
.image-ads .add-item p i {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
}
|
||||
.image-ads .add-item p span {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.image-ads .add-item>span {
|
||||
vertical-align: middle;
|
||||
color:#999;
|
||||
font-size:12px;
|
||||
}
|
||||
.image-ads .navigation-set-list .error-msg{
|
||||
margin: 5px 0 0 40px;
|
||||
color: #f44;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.image-ads .layui-form-item.slide-component .layui-form-label{
|
||||
width: 100px !important;
|
||||
}
|
||||
118
app/component/view/image_ads/design.html
Executable file
118
app/component/view/image_ads/design.html
Executable file
@@ -0,0 +1,118 @@
|
||||
<nc-component :data="data[index]" class="image-ads">
|
||||
|
||||
<!-- 预览 -->
|
||||
<template slot="preview">
|
||||
|
||||
<template v-if="nc.lazyLoad">
|
||||
<image-ads-carouse></image-ads-carouse>
|
||||
<div class="image-ads-warp" :style="{
|
||||
backgroundColor: nc.componentBgColor,
|
||||
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
|
||||
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0)
|
||||
}">
|
||||
<div class="image-ads-content">
|
||||
<template v-for="(item,index) in nc.list">
|
||||
<div v-if="item.imageUrl" :style="{height: nc.tempData.swiperHeight + 'px'}" :class="['image-ads-item',{'layui-hide': nc.tempData.carouselIndex != index}]">
|
||||
<nc-image :src="changeImgUrl(item.imageUrl)" :mode="item.imageMode"></nc-image>
|
||||
</div>
|
||||
<div v-else :style="{backgroundImage: 'url(' + changeImgUrl('public/static/img/default_img/figure.png') + ')',height: nc.tempData.swiperHeight + 'px'}" :class="['image-ads-item',{'layui-hide': nc.tempData.carouselIndex != index}]"></div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="carousel-btn" v-if="nc.list.length > 1">
|
||||
<div class="arrows">
|
||||
<i class="iconfont iconback_light" @click="nc.tempData.carouselIndex = (nc.tempData.carouselIndex ? nc.tempData.carouselIndex-1 : nc.tempData.carouselIndex)"></i>
|
||||
<i class="iconfont iconyoujiantou" @click="nc.tempData.carouselIndex = [nc.tempData.carouselIndex < nc.list.length-1 ? +nc.tempData.carouselIndex+1 : nc.list.length-1]"></i>
|
||||
</div>
|
||||
<div :class="['dot-wrap',nc.indicatorLocation,nc.carouselStyle]">
|
||||
<i v-for="(numItem,numIndex) in nc.list.length" :class="{'active': nc.tempData.carouselIndex == numIndex}" :style="[nc.tempData.carouselIndex == numIndex && {'backgroundColor': nc.indicatorColor}]" @click="nc.tempData.carouselIndex = numIndex"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 内容编辑 -->
|
||||
<template slot="edit-content">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<div class="template-edit-title">
|
||||
<h3>图片设置</h3>
|
||||
<image-ads-list></image-ads-list>
|
||||
<div class="image-ad-list">
|
||||
<p class="word-aux">建议上传尺寸相同的图片，推荐尺寸750*350</p>
|
||||
<ul class="navigation-set-list">
|
||||
<li v-for="(item,index) in nc.list" :data-sort="index" :data-index="index" :key="item.id">
|
||||
<img-upload :data="{ data: item}" data-disabled="1"></img-upload>
|
||||
<div class="content-block">
|
||||
<nc-link :data="{ field : item.link }"></nc-link>
|
||||
<nc-image-mode :data="item"></nc-image-mode>
|
||||
</div>
|
||||
<div class="error-msg"></div>
|
||||
<i class="del" @click="nc.tempData.methods.deleteItem(index)" data-disabled="1">x</i>
|
||||
<div class="iconfont icontuodong"></div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="add-item text-color" v-if="nc.list.length < 10" @click="nc.tempData.methods.addItem()">
|
||||
<p>
|
||||
<i>+</i>
|
||||
<span>添加一个图片广告</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 样式编辑 -->
|
||||
<template slot="edit-style">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<div class="template-edit-title" v-if="nc.list.length > 1">
|
||||
<h3>设置</h3>
|
||||
|
||||
<div class="layui-form-item checkbox-wrap">
|
||||
<label class="layui-form-label sm">展示开关</label>
|
||||
<div class="layui-input-block">
|
||||
<span v-if="nc.indicatorIsShow == true">显示</span>
|
||||
<span v-else>隐藏</span>
|
||||
<div v-if="nc.indicatorIsShow == true" @click="nc.indicatorIsShow = false" class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
|
||||
<i class="layui-icon layui-icon-ok"></i>
|
||||
</div>
|
||||
<div v-else @click="nc.indicatorIsShow = true" class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
||||
<i class="layui-icon layui-icon-ok"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux diy-word-aux">此处控制当前页面导航栏是否显示</div>
|
||||
</div>
|
||||
|
||||
<slide :data="{ field : 'interval', label : '切换间隔(毫秒)', step : 1000, min: 1000, max : 10000 }"></slide>
|
||||
|
||||
<div class="layui-form-item icon-radio">
|
||||
<label class="layui-form-label sm banner-sm">样式</label>
|
||||
<div class="layui-input-block">
|
||||
<span v-for="(item) in nc.tempData.imgAdsCarousel" :class="[item.value == nc.carouselStyle ? '' : 'layui-hide']">{{item.text}}</span>
|
||||
<ul class="icon-wrap">
|
||||
<li v-for="(item) in nc.tempData.imgAdsCarousel" :class="[item.value == nc.carouselStyle ? 'text-color border-color' : '']" @click="nc.carouselStyle=item.value">
|
||||
<i class="iconfont" :class="[{'text-color': item.value == nc.carouselStyle}, item.src]"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<text-align :data="{ field : 'indicatorLocation', 'label' : '位置' }"></text-align>
|
||||
<color :data="{ field : 'indicatorColor', 'label' : '颜色' }"></color>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 资源 -->
|
||||
<template slot="resource">
|
||||
<js>
|
||||
var imageAdsResourcePath = "{$resource_path}"; // http路径
|
||||
var imageAdsRelativePath = "{$relative_path}"; // 相对路径
|
||||
</js>
|
||||
<css src="{$resource_path}/css/design.css"></css>
|
||||
<js src="{$resource_path}/js/design.js"></js>
|
||||
</template>
|
||||
|
||||
</nc-component>
|
||||
150
app/component/view/image_ads/js/design.js
Executable file
150
app/component/view/image_ads/js/design.js
Executable file
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* 图片广告的图片上传
|
||||
*/
|
||||
var imageAdsCarouselHtml = '<div style="display:none;"></div>';
|
||||
|
||||
Vue.component("image-ads-carouse", {
|
||||
data: function () {
|
||||
return {
|
||||
data: this.$parent.data
|
||||
}
|
||||
},
|
||||
created: function () {
|
||||
this.$parent.data.ignore = ['textColor', 'elementBgColor', 'elementAngle'];//加载忽略内容 -- 其他设置中的属性设置
|
||||
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
||||
|
||||
// 组件所需的临时数据
|
||||
this.$parent.data.tempData = {
|
||||
swiperHeight: 0,
|
||||
carouselIndex: 0
|
||||
};
|
||||
|
||||
var imgArr = [];
|
||||
for (let i = 0; i < this.data.list.length; i++) {
|
||||
let item = this.data.list[i];
|
||||
imgArr[i] = (item.imgWidth / item.imgHeight);
|
||||
}
|
||||
imgArr.sort(function (a, b) {
|
||||
return b - a
|
||||
});
|
||||
var swiperHeight = (370 / imgArr[0]).toFixed(2);
|
||||
this.$parent.data.tempData.swiperHeight = swiperHeight;
|
||||
},
|
||||
template: imageAdsCarouselHtml,
|
||||
watch: {
|
||||
data: {
|
||||
handler: function (val, oldVal) {
|
||||
// 计算图片高度
|
||||
var imgArr = [];
|
||||
for (let i = 0; i < this.data.list.length; i++) {
|
||||
let item = this.data.list[i];
|
||||
imgArr[i] = (item.imgWidth / item.imgHeight) || 2;
|
||||
}
|
||||
imgArr.sort(function (a, b) {
|
||||
return b - a
|
||||
});
|
||||
// 屏幕宽度
|
||||
var rootWidth = 370 - this.data.margin.both * 2;
|
||||
var swiperHeight = (rootWidth / imgArr[0]).toFixed(2);
|
||||
this.$parent.data.tempData.swiperHeight = swiperHeight;
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
|
||||
var imageAdsListHtml = '<div style="display:none;"></div>';
|
||||
|
||||
Vue.component("image-ads-list", {
|
||||
template: imageAdsListHtml,
|
||||
data: function () {
|
||||
return {
|
||||
data: this.$parent.data,
|
||||
list: this.$parent.data.list,
|
||||
imgAdsCarousel: [
|
||||
{
|
||||
text: "圆点",
|
||||
value: "circle",
|
||||
src: "iconyuandian",
|
||||
},
|
||||
{
|
||||
text: "直线",
|
||||
value: "line",
|
||||
src: "iconzhishiqi-yuanjiao",
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created: function () {
|
||||
if (!this.$parent.data.verify) this.$parent.data.verify = [];
|
||||
this.$parent.data.verify.push(this.verify);//加载验证方法
|
||||
|
||||
this.list.forEach(function (e, i) {
|
||||
if (!e.id) e.id = ns.gen_non_duplicate(6);
|
||||
});
|
||||
this.$parent.data.list = this.list;
|
||||
|
||||
// 组件所需的临时数据
|
||||
this.$parent.data.tempData = {
|
||||
...this.$parent.data.tempData,
|
||||
imgAdsCarousel: this.imgAdsCarousel,
|
||||
methods: {
|
||||
deleteItem: this.deleteItem,
|
||||
addItem: this.addItem,
|
||||
}
|
||||
};
|
||||
|
||||
var moveBeforeIndex = 0;
|
||||
var _this = this;
|
||||
setTimeout(function () {
|
||||
var componentIndex = _this.data.index;
|
||||
$('[data-index="' + componentIndex + '"] .navigation-set-list').DDSort({
|
||||
target: 'li',
|
||||
floatStyle: {
|
||||
'border': '1px solid #ccc',
|
||||
'background-color': '#fff'
|
||||
},
|
||||
//设置可拖拽区域
|
||||
draggableArea: "icontuodong",
|
||||
down: function (index) {
|
||||
moveBeforeIndex = index;
|
||||
},
|
||||
up: function () {
|
||||
var index = $(this).index();
|
||||
var temp = _this.list[moveBeforeIndex];
|
||||
_this.list.splice(moveBeforeIndex, 1);
|
||||
_this.list.splice(index, 0, temp);
|
||||
_this.$parent.data.list = _this.list;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
verify: function (index) {
|
||||
var res = {code: true, message: ""};
|
||||
$(".draggable-element[data-index='" + index + "'] .image-ads .image-ad-list>ul>li").each(function (i) {
|
||||
if (vue.data[index].list[i].imageUrl === "") {
|
||||
res.code = false;
|
||||
res.message = "请添加图片";
|
||||
$(this).find(".error-msg").text("请添加图片").show();
|
||||
return res;
|
||||
} else {
|
||||
$(this).find(".error-msg").text("").hide();
|
||||
}
|
||||
});
|
||||
return res;
|
||||
},
|
||||
addItem: function () {
|
||||
this.list.push({
|
||||
imageUrl: "",
|
||||
imgWidth: 0,
|
||||
imgHeight: 0,
|
||||
link: {name: ""}
|
||||
});
|
||||
},
|
||||
deleteItem: function (index) {
|
||||
this.list.splice(index, 1);
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user