初始上传
This commit is contained in:
25
app/component/view/hot_area/css/design.css
Executable file
25
app/component/view/hot_area/css/design.css
Executable file
@@ -0,0 +1,25 @@
|
||||
@CHARSET "UTF-8";
|
||||
|
||||
.hot-area .hot-area-warp {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.hot-area .hot-area-warp .hot-area-item{
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.hot-area .hot-area-wrap{
|
||||
margin-left: 20px;
|
||||
}
|
||||
.hot-area .hot-area-wrap .word-aux {
|
||||
margin: 10px 0 10px 0;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hot-area .hot-area-wrap .error-msg{
|
||||
margin: 10px 0 0 0;
|
||||
color: #f44;
|
||||
display: none;
|
||||
}
|
||||
58
app/component/view/hot_area/design.html
Executable file
58
app/component/view/hot_area/design.html
Executable file
@@ -0,0 +1,58 @@
|
||||
<nc-component :data="data[index]" class="hot-area">
|
||||
|
||||
<!-- 预览 -->
|
||||
<template slot="preview">
|
||||
|
||||
<template v-if="nc.lazyLoad">
|
||||
<hot-area-carouse></hot-area-carouse>
|
||||
<div class="hot-area-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="hot-area-content">
|
||||
<div v-if="nc.imageUrl" :style="{backgroundImage: 'url('+ changeImgUrl(nc.imageUrl) +')',height: nc.tempData.swiperHeight + 'px'}" class="hot-area-item"></div>
|
||||
<div v-else :style="{backgroundImage: 'url(' + changeImgUrl('public/static/img/default_img/figure.png') + ')',height: nc.tempData.swiperHeight + 'px'}" class="hot-area-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 内容编辑 -->
|
||||
<template slot="edit-content">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<hot-area-list></hot-area-list>
|
||||
|
||||
<div class="template-edit-title">
|
||||
<h3>图片设置</h3>
|
||||
<div class="hot-area-wrap">
|
||||
<p class="word-aux">推荐尺寸750*350</p>
|
||||
<img-upload :data="{ data: nc }" data-disabled="1"></img-upload>
|
||||
<div class="selected-style" :class="{'text-color' : nc.heatMapData }" @click="nc.tempData.methods.setHeatMap()">
|
||||
<span>{{ nc.heatMapData.length ? '已选' + nc.heatMapData.length + '个热区' : '热区设置' }}</span>
|
||||
<i class="layui-icon layui-icon-right"></i>
|
||||
</div>
|
||||
<div class="error-msg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 样式编辑 -->
|
||||
<template slot="edit-style">
|
||||
</template>
|
||||
|
||||
<!-- 资源 -->
|
||||
<template slot="resource">
|
||||
<js>
|
||||
var hotAreaResourcePath = "{$resource_path}"; // http路径
|
||||
var hotAreaRelativePath = "{$relative_path}"; // 相对路径
|
||||
</js>
|
||||
<css src="{$resource_path}/css/design.css"></css>
|
||||
<js src="{$resource_path}/js/design.js"></js>
|
||||
</template>
|
||||
|
||||
</nc-component>
|
||||
115
app/component/view/hot_area/js/design.js
Executable file
115
app/component/view/hot_area/js/design.js
Executable file
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* 热区
|
||||
*/
|
||||
var hotAreaCarouselHtml = '<div style="display:none;"></div>';
|
||||
|
||||
Vue.component("hot-area-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
|
||||
};
|
||||
|
||||
if(this.data.imgWidth && this.data.imgHeight) {
|
||||
var radio = this.data.imgWidth / this.data.imgHeight;
|
||||
var swiperHeight = (370 / radio).toFixed(2);
|
||||
this.$parent.data.tempData.swiperHeight = swiperHeight;
|
||||
}
|
||||
},
|
||||
template: hotAreaCarouselHtml,
|
||||
watch: {
|
||||
data: {
|
||||
handler: function (val, oldVal) {
|
||||
// 计算图片高度
|
||||
var radio = (this.data.imgWidth / this.data.imgHeight) || 2;
|
||||
// 屏幕宽度
|
||||
var rootWidth = 370 - this.data.margin.both * 2;
|
||||
var swiperHeight = (rootWidth / radio).toFixed(2);
|
||||
this.$parent.data.tempData.swiperHeight = swiperHeight;
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
|
||||
var hotAreaListHtml = '<div style="display:none;"></div>';
|
||||
|
||||
Vue.component("hot-area-list", {
|
||||
template: hotAreaListHtml,
|
||||
data: function () {
|
||||
return {
|
||||
data: this.$parent.data,
|
||||
}
|
||||
},
|
||||
created: function () {
|
||||
if (!this.$parent.data.verify) this.$parent.data.verify = [];
|
||||
this.$parent.data.verify.push(this.verify);//加载验证方法
|
||||
|
||||
// 组件所需的临时数据
|
||||
this.$parent.data.tempData = {
|
||||
...this.$parent.data.tempData,
|
||||
methods: {
|
||||
setHeatMap:this.setHeatMap
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//热区设置
|
||||
setHeatMap :function() {
|
||||
let that = this;
|
||||
if (!that.$parent.data.imageUrl) {
|
||||
layer.msg('请先上传图片');
|
||||
return;
|
||||
}
|
||||
sessionStorage.setItem('imageData', JSON.stringify(that.$parent.data));
|
||||
|
||||
layui.use(['layer'], function () {
|
||||
layer.open({
|
||||
title: '热区设置',
|
||||
type: 2,
|
||||
area: ['100%', '100%'],
|
||||
fixed: false, //不固定
|
||||
btn: ['保存', '返回'],
|
||||
content: ns.url("shop/diy/heatmap", {request_mode: 'iframe'}),
|
||||
yes: function (index, layero) {
|
||||
var iframeWin = document.getElementById(layero.find('iframe')[0]['name']).contentWindow;//得到iframe页的窗口对象，执行iframe页的方法：
|
||||
iframeWin.heatMapListener(function (obj) {
|
||||
that.$parent.data.heatMapData = obj.heatMapData;
|
||||
layer.close(index);
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
// ns.open_iframe({
|
||||
// success: function(data){
|
||||
// that.$parent.data.heatMapData = data.heatMapData;
|
||||
// }
|
||||
// })
|
||||
|
||||
},
|
||||
verify: function (index) {
|
||||
var res = {code: true, message: ""};
|
||||
$(".draggable-element[data-index='" + index + "'] .hot-area").each(function (i) {
|
||||
if (vue.data[index].imageUrl === "") {
|
||||
res.code = false;
|
||||
res.message = "请添加图片";
|
||||
$(this).find(".error-msg").text("请添加图片").show();
|
||||
return res;
|
||||
} else {
|
||||
$(this).find(".error-msg").text("").hide();
|
||||
}
|
||||
});
|
||||
return res;
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user