初始上传
This commit is contained in:
146
addon/pc/shop/view/public/css/edit_floor.css
Executable file
146
addon/pc/shop/view/public/css/edit_floor.css
Executable file
@@ -0,0 +1,146 @@
|
||||
#app{background: #F5F5F5;width: 1210px;margin-left: 200px;}
|
||||
/* 楼层样式一*/
|
||||
.floor-style-1{}
|
||||
.floor-style-1 .head-wrap h2{line-height: 30px;color: #333;padding: 10px;font-size: 18px;cursor: pointer;width: 95%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
|
||||
.floor-style-1 .body-wrap .left-wrap{float: left;width: 234px;height: 614px;cursor: pointer;}
|
||||
.floor-style-1 .body-wrap .left-wrap div.empty{background: #ebf8fd;height: 100%;text-align: center;color: #88c4dc;position: relative;}
|
||||
.floor-style-1 .body-wrap .left-wrap div.empty span{position: absolute;top: 50%;left: 0;width: 100%;margin-top: -27px;}
|
||||
.floor-style-1 .body-wrap .left-wrap img{max-width: 100%;cursor: pointer;}
|
||||
.floor-style-1 .body-wrap .goods-list{margin-left: 235px;display: flex;flex-wrap: wrap;}
|
||||
.floor-style-1 .body-wrap .goods-list li{width: 23%;margin-left: 15px;margin-bottom: 15px;background: #fff;cursor: pointer;padding: 17px 0;}
|
||||
.floor-style-1 .body-wrap .goods-list li.empty{background: #F5F5F5;}
|
||||
/*.floor-style-1 .body-wrap .goods-list li:nth-child(4n+1){margin-left: 0;}*/
|
||||
.floor-style-1 .body-wrap .goods-list li .img-wrap{width: 160px;height: 160px;margin: 0 auto 18px;text-align: center;line-height: 160px;}
|
||||
.floor-style-1 .body-wrap .goods-list li .img-wrap.empty{background: #ebf8fd;color: #88c4dc;}
|
||||
.floor-style-1 .body-wrap .goods-list li .img-wrap img{max-width: 100%;max-height: 100%;}
|
||||
.floor-style-1 .body-wrap .goods-list li h3{font-size: 14px;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;margin: 5px 15px;}
|
||||
.floor-style-1 .body-wrap .goods-list li .desc{margin: 0 30px 10px;height: 20px;font-size: 12px;color: #b0b0b0;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
|
||||
.floor-style-1 .body-wrap .goods-list li .price{margin: 0 10px 14px;text-align: center;}
|
||||
.floor-style-1 .body-wrap .goods-list li .price del{margin-left: .5em;color: #b0b0b0 !important;}
|
||||
.floor-style-1 .bottom-wrap{margin-top: 15px;width: 1210px;height: 118px;cursor: pointer;overflow: hidden;}
|
||||
.floor-style-1 .bottom-wrap div.empty{background: #ebf8fd;height: 100%;text-align: center;color: #88c4dc;position: relative;}
|
||||
.floor-style-1 .bottom-wrap div.empty span{position: absolute;top: 50%;left: 0;width: 100%;margin-top: -27px;}
|
||||
.floor-style-1 .bottom-wrap img{max-width: 100%;}
|
||||
.floor-style-1 .body-wrap .left-wrap-box{position:relative;display: block;}
|
||||
.floor-style-1 .body-wrap .mask{position: absolute;z-index: 10;background: rgba(101, 101, 101, 0.6);color: #ffffff;opacity: 0;top: 0;right: 0;width: 100%;height: 100%;}
|
||||
.floor-style-1 .body-wrap .mask .left-img-replace {text-align: center;height: 100%;position: relative;}
|
||||
.floor-style-1 .body-wrap .mask .left-img-replace .replace{height:100%;width:100%;position:absolute;z-index:11;display: flex;}
|
||||
.floor-style-1 .body-wrap .mask .left-img-replace .replace span{margin: auto}
|
||||
.floor-style-1 .body-wrap .mask h4{text-align: right;position:absolute; top:5px; right:5px; display:inline-block;z-index:12}
|
||||
.floor-style-1 .body-wrap .left-wrap-box:hover .mask{opacity: 1;}
|
||||
.floor-style-1 .body-wrap .left-wrap{width: 234px;height: 614px;float: left;cursor: pointer;position: absolute;z-index: 9;}
|
||||
|
||||
/* 楼层样式二（通用，方块）*/
|
||||
.floor-style-2{}
|
||||
.floor-style-2 .head-wrap{text-align: center;}
|
||||
.floor-style-2 .head-wrap h2{line-height: 30px;color: #333;padding: 10px;font-size: 22px;cursor: pointer;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
|
||||
.floor-style-2 .head-wrap p{color: #b0b0b0;padding: 0 10px;font-size: 14px;cursor: pointer;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-bottom: 20px;}
|
||||
.floor-style-2 .body-wrap .goods-list{display: flex;flex-wrap: wrap;}
|
||||
.floor-style-2 .body-wrap .goods-list li{width: 18.5%;margin-left: 15px;margin-bottom: 15px;background: #fff;cursor: pointer;padding: 15px 0;}
|
||||
.floor-style-2 .body-wrap .goods-list li.empty{background: #F5F5F5;}
|
||||
.floor-style-2 .body-wrap .goods-list li .img-wrap{width: 160px;height: 160px;margin: 0 auto 18px;text-align: center;line-height: 160px;}
|
||||
.floor-style-2 .body-wrap .goods-list li .img-wrap.empty{background: #ebf8fd;color: #88c4dc;}
|
||||
.floor-style-2 .body-wrap .goods-list li .img-wrap img{max-width: 100%;max-height: 100%;}
|
||||
.floor-style-2 .body-wrap .goods-list li h3{font-size: 14px;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;margin: 5px 15px;}
|
||||
.floor-style-2 .body-wrap .goods-list li .desc{margin: 0 30px 10px;height: 20px;font-size: 12px;color: #b0b0b0;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
|
||||
.floor-style-2 .body-wrap .goods-list li .price{margin: 0 10px 14px;text-align: center;}
|
||||
.floor-style-2 .body-wrap .goods-list li .price del{margin-left: .5em;color: #b0b0b0 !important;}
|
||||
.floor-style-2 .bottom-wrap{margin-top: 15px;width: 1210px;height: 118px;cursor: pointer;overflow: hidden;}
|
||||
.floor-style-2 .bottom-wrap div.empty{background: #ebf8fd;height: 100%;text-align: center;color: #88c4dc;position: relative;}
|
||||
.floor-style-2 .bottom-wrap div.empty span{position: absolute;top: 50%;left: 0;width: 100%;margin-top: -27px;}
|
||||
.floor-style-2 .bottom-wrap img{max-width: 100%;}
|
||||
.floor-style-2 .left-wrap-box{position:relative;display: block;}
|
||||
.floor-style-2 .mask{position: absolute;z-index: 10;background: rgba(101, 101, 101, 0.6);color: #ffffff;opacity: 0;top: 0;right: 0;width: 100%;height: 100%;}
|
||||
.floor-style-2 .mask .left-img-replace {text-align: center;height: 100%;position: relative;}
|
||||
.floor-style-2 .mask .left-img-replace .replace{height:100%;width:100%;position:absolute;z-index:11;display: flex;}
|
||||
.floor-style-2 .mask .left-img-replace .replace span{margin: auto}
|
||||
.floor-style-2 .mask h4{text-align: right;position:absolute; top:5px; right:5px; display:inline-block;z-index:12}
|
||||
.floor-style-2 .left-wrap-box:hover .mask{opacity: 1;}
|
||||
.floor-style-2 .left-wrap-box .bottom-wrap{width: 1210px;height: 118px;float: left;cursor: pointer;position: absolute;z-index: 9;}
|
||||
|
||||
|
||||
|
||||
/* 楼层样式三*/
|
||||
.floor-style-3{overflow: hidden;}
|
||||
.floor-style-3 .item-wrap .head-wrap{height: 50px;line-height: 50px;}
|
||||
.floor-style-3 .item-wrap .head-wrap .title-name{display: inline-block;}
|
||||
.floor-style-3 .item-wrap .head-wrap .title-name span{float: left;width: 5px;height: 21px;margin-top: 15px;}
|
||||
.floor-style-3 .item-wrap .head-wrap .title-name h2{float: left;margin-left: 10px;font-weight: bold;font-size: 20px;}
|
||||
.floor-style-3 .item-wrap .head-wrap .category-wrap{float: right;display: flex;}
|
||||
.floor-style-3 .item-wrap .head-wrap .category-wrap li{margin-right: 10px;}
|
||||
.floor-style-3 .item-wrap .body-wrap .left-img-box{position:absolute;right:-10px;top:-10px;z-index:10;color:#fff;width: 20px;height: 20px;line-height: 20px;background: black;opacity: .3;text-align: center;border-radius: 50%;}
|
||||
.floor-style-3 .item-wrap .body-wrap .left-wrap-box{position:relative;display: block;}
|
||||
.floor-style-3 .item-wrap .body-wrap .mask{position: absolute;z-index: 10;background: rgba(101, 101, 101, 0.6);color: #ffffff;opacity: 0;top: 0;right: 0;width: 100%;height: 100%;}
|
||||
.floor-style-3 .item-wrap .body-wrap .mask .left-img-replace {text-align: center;height: 100%;position: relative;}
|
||||
.floor-style-3 .item-wrap .body-wrap .mask .left-img-replace .replace{height:100%;width:100%;position:absolute;z-index:11;display: flex;}
|
||||
.floor-style-3 .item-wrap .body-wrap .mask .left-img-replace .replace span{margin: auto}
|
||||
.floor-style-3 .item-wrap .body-wrap .mask h4{text-align: right;position:absolute; top:5px; right:5px; display:inline-block;z-index:12}
|
||||
.floor-style-3 .item-wrap .body-wrap .left-wrap-box:hover .mask{opacity: 1;}
|
||||
.floor-style-3 .item-wrap .body-wrap .left-img-wrap{width: 190px;height: 360px;float: left;cursor: pointer;position: absolute;z-index: 9;}
|
||||
.floor-style-3 .item-wrap .body-wrap .left-img-wrap img{max-width: 100%;max-height: 100%;}
|
||||
.floor-style-3 .item-wrap .body-wrap .left-img-wrap div.empty{background: #ebf8fd;height: 100%;text-align: center;color: #88c4dc;position: relative;}
|
||||
.floor-style-3 .item-wrap .body-wrap .left-img-wrap div.empty span{position: absolute;top: 50%;left: 0;width: 100%;margin-top: -27px;}
|
||||
.floor-style-3 .item-wrap .body-wrap .right-goods-wrap{margin-left: 190px;text-align: center;overflow: hidden;}
|
||||
.floor-style-3 .item-wrap .body-wrap .right-goods-wrap li{float: left;width: 19.9%;background: #ffff;border-width: 0 0 1px 1px;border-color: #f9f9f9;border-style: solid;cursor: pointer;}
|
||||
.floor-style-3 .item-wrap .body-wrap .right-goods-wrap li h4{font-size: 14px;margin: 10px 20px 5px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-weight: normal;}
|
||||
.floor-style-3 .item-wrap .body-wrap .right-goods-wrap li p{font-size: 12px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin: 10px 30px;height: 20px;}
|
||||
.floor-style-3 .item-wrap .body-wrap .right-goods-wrap li .img-wrap{width: 105px;height: 105px;line-height: 105px;display: inline-block;margin-bottom: 5px;}
|
||||
.floor-style-3 .item-wrap .body-wrap .right-goods-wrap li .img-wrap img{max-width: 100%;max-height: 100%;}
|
||||
.floor-style-3 .item-wrap .body-wrap .right-goods-wrap li .img-wrap.empty{background: #ebf8fd;color: #88c4dc;}
|
||||
.floor-style-3 .item-wrap .body-wrap .bottom-goods-wrap{overflow: hidden;display: flex;}
|
||||
.floor-style-3 .item-wrap .body-wrap .bottom-goods-wrap li{flex: 1;background: #fff;border-width: 0 0 1px 1px;border-color: #f9f9f9;border-style: solid;cursor: pointer;}
|
||||
.floor-style-3 .item-wrap .body-wrap .bottom-goods-wrap li:first-child{border-left: 0;}
|
||||
.floor-style-3 .item-wrap .body-wrap .bottom-goods-wrap li .info-wrap{display: inline-block;vertical-align: middle;text-align: center;}
|
||||
.floor-style-3 .item-wrap .body-wrap .bottom-goods-wrap li .info-wrap h4{font-size: 14px;margin: 0 10px 5px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 90px;font-weight: normal; }
|
||||
.floor-style-3 .item-wrap .body-wrap .bottom-goods-wrap li .info-wrap p{font-size: 12px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin: 0 20px;width: 70px;}
|
||||
.floor-style-3 .item-wrap .body-wrap .bottom-goods-wrap li .img-wrap{width: 60px;height: 60px;line-height: 60px;display: inline-block;vertical-align: middle;text-align: center;padding: 10px;}
|
||||
.floor-style-3 .item-wrap .body-wrap .bottom-goods-wrap li .img-wrap img{max-width: 100%;max-height: 100%;}
|
||||
.floor-style-3 .item-wrap .body-wrap .bottom-goods-wrap li .img-wrap.empty{background: #ebf8fd;color: #88c4dc;}
|
||||
.floor-style-3 .item-wrap .body-wrap .brand-wrap{display: flex;background: #fff;}
|
||||
.floor-style-3 .item-wrap .body-wrap .brand-wrap li{flex: 1;height: 50px;cursor: pointer;line-height: 50px;text-align: center;background: #fff;}
|
||||
.floor-style-3 .item-wrap .body-wrap .brand-wrap li img{max-width: 100%;max-height: 100%;}
|
||||
.floor-style-3 .item-wrap .body-wrap .brand-wrap li .empty{background: #ebf8fd;color: #88c4dc;}
|
||||
|
||||
.floor-style-4 {}
|
||||
.floor-style-4 .head-wrap {display: flex;align-items: center;justify-content: space-between;}
|
||||
.floor-style-4 .head-wrap h2{line-height: 30px;color: #333;padding: 10px;font-size: 18px;cursor: pointer;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
|
||||
.floor-style-4 .head-wrap .more {cursor: pointer;}
|
||||
.floor-style-4 .body-wrap .left-wrap{float: left;width: 500px;height: 323px;cursor: pointer;}
|
||||
.floor-style-4 .body-wrap .left-wrap div.empty{background: #ebf8fd;height: 100%;text-align: center;color: #88c4dc;position: relative;}
|
||||
.floor-style-4 .body-wrap .left-wrap div.empty span{position: absolute;top: 50%;left: 0;width: 100%;margin-top: -27px;}
|
||||
.floor-style-4 .body-wrap .left-wrap img{max-width: 100%;cursor: pointer;}
|
||||
.floor-style-4 .body-wrap .goods-list{display: flex;flex-wrap: wrap;}
|
||||
.floor-style-4 .body-wrap .goods-list li{width:calc((100% - 45px) / 3);margin-left: 15px;background: #fff;cursor: pointer;padding: 29px 0;}
|
||||
.floor-style-4 .body-wrap .goods-list li.empty{background: #F5F5F5;}
|
||||
.floor-style-4 .body-wrap .goods-list li .img-wrap{width: 160px;height: 160px;margin: 0 auto 20px;text-align: center;line-height: 160px;}
|
||||
.floor-style-4 .body-wrap .goods-list li .img-wrap.empty{background: #ebf8fd;color: #88c4dc;}
|
||||
.floor-style-4 .body-wrap .goods-list li .img-wrap img{max-width: 100%;max-height: 100%;}
|
||||
.floor-style-4 .body-wrap .goods-list li h3{font-size: 14px;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;margin: 5px 15px;}
|
||||
.floor-style-4 .body-wrap .goods-list li .desc{margin: 0 30px 10px;height: 20px;font-size: 12px;color: #b0b0b0;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
|
||||
.floor-style-4 .body-wrap .goods-list li .price{margin: 0 10px 14px;text-align: center;}
|
||||
.floor-style-4 .body-wrap .goods-list li .price del{margin-left: .5em;color: #b0b0b0 !important;}
|
||||
.floor-style-4 .body-wrap .left-wrap-box{position:relative;display: block;}
|
||||
.floor-style-4 .body-wrap .mask{position: absolute;z-index: 10;background: rgba(101, 101, 101, 0.6);color: #ffffff;opacity: 0;top: 0;right: 0;width: 100%;height: 100%;}
|
||||
.floor-style-4 .body-wrap .mask .left-img-replace {text-align: center;height: 100%;position: relative;}
|
||||
.floor-style-4 .body-wrap .mask .left-img-replace .replace{height:100%;width:100%;position:absolute;z-index:11;display: flex;}
|
||||
.floor-style-4 .body-wrap .mask .left-img-replace .replace span{margin: auto}
|
||||
.floor-style-4 .body-wrap .mask h4{text-align: right;position:absolute; top:5px; right:5px; display:inline-block;z-index:12}
|
||||
.floor-style-4 .body-wrap .left-wrap-box:hover .mask{opacity: 1;}
|
||||
.floor-style-4 .switch-wrap {margin-left: 500px;display: flex;padding: 15px 0;justify-content: center}
|
||||
.floor-style-4 .switch-wrap .switch-item {display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;background: #FFFFFF;margin-left: 20px;color: #999999}
|
||||
.floor-style-4 .bottom-wrap{margin-top: 35px; width: 1210px;height: 118px;cursor: pointer;overflow: hidden;}
|
||||
.floor-style-4 .bottom-wrap div.empty{background: #ebf8fd;height: 100%;text-align: center;color: #88c4dc;position: relative;}
|
||||
.floor-style-4 .bottom-wrap div.empty span{position: absolute;top: 50%;left: 0;width: 100%;margin-top: -27px;}
|
||||
.floor-style-4 .bottom-wrap img{max-width: 100%;}
|
||||
|
||||
.layui-layer-content .layui-form.set-title{padding: 0;}
|
||||
.layui-layer-content .layui-form.upload-img{padding: 0;}
|
||||
.layui-layer-content .layui-form.set-category{padding: 0;}
|
||||
.layui-layer-content .layui-form.set-category .selected-wrap{}
|
||||
.layui-layer-content .layui-form.set-category .selected-wrap ul{}
|
||||
.layui-layer-content .layui-form.set-category .selected-wrap ul li{float: left;margin: 0 5px 10px 0;padding: 0 15px 0 10px;color: #636363;line-height: 28px;border: 1px solid #ccc;font-size: 12px;cursor: pointer;position: relative;}
|
||||
.layui-layer-content .layui-form.set-category .selected-wrap ul li i{position: absolute;top: 0;right: 0;width: 14px;height: 14px;line-height: 14px;text-align: center;font-style: normal;background-color: #eee;z-index: 2;font-size: 12px;display: none;}
|
||||
.layui-layer-content .layui-form.set-category .selected-wrap ul li:hover {color: var(--base-color);border-color: var(--base-color);background-color: #eff7fe;}
|
||||
.layui-layer-content .layui-form.set-category .selected-wrap ul li:hover i{display: block;}
|
||||
.layui-colorpicker-main-input div.layui-inline{margin-right: 0;}
|
||||
.layui-colorpicker-main-input input.layui-input{width: 130px;height: 34px;}
|
||||
274
addon/pc/shop/view/public/js/floor/edit.js
Executable file
274
addon/pc/shop/view/public/js/floor/edit.js
Executable file
@@ -0,0 +1,274 @@
|
||||
var floorForm, floorLayer, floorUpload, floorLaytpl, floorColorpicker, repeatFlag = false;
|
||||
layui.use(['form', 'layer', 'upload', 'laytpl', 'colorpicker'], function () {
|
||||
floorForm = layui.form;
|
||||
floorLayer = layui.layer;
|
||||
floorUpload = layui.upload;
|
||||
floorLaytpl = layui.laytpl;
|
||||
floorColorpicker = layui.colorpicker;
|
||||
floorForm.render();
|
||||
|
||||
if ($("#info").length > 0) {
|
||||
setTimeout(function () {
|
||||
vm.data = JSON.parse($("#info").val().toString());
|
||||
vm.blockId = parseInt($("#block_id").val().toString());
|
||||
}, 100);
|
||||
}
|
||||
|
||||
floorForm.on('select(block_id)', function (data) {
|
||||
var value = $(data.elem).find("option:selected").attr("data-value");
|
||||
var blockId = $(data.elem).find("option:selected").attr("data-block-id");
|
||||
vm.blockId = blockId;
|
||||
if (value) {
|
||||
vm.data = JSON.parse(value);
|
||||
}
|
||||
});
|
||||
|
||||
floorForm.verify({
|
||||
title: function (value) {
|
||||
if (value == '') {
|
||||
return '请输入楼层名称';
|
||||
}
|
||||
if (value.length > 100) {
|
||||
return '最多100个字符';
|
||||
}
|
||||
},
|
||||
block_id: function (value) {
|
||||
if (!value) return '请选择楼层模板';
|
||||
}
|
||||
});
|
||||
|
||||
floorForm.on('submit(save)', function (data) {
|
||||
|
||||
var value = JSON.parse(JSON.stringify(vm.data));
|
||||
for (var i in value) {
|
||||
if ($.inArray(value[i].type, ['goods', 'brand', 'category']) == -1) {
|
||||
value[i].value.list = [];
|
||||
}
|
||||
}
|
||||
data.field.value = JSON.stringify(value);
|
||||
if (repeatFlag) return;
|
||||
repeatFlag = true;
|
||||
|
||||
$.ajax({
|
||||
url: ns.url("pc://shop/pc/editFloor"),
|
||||
data: data.field,
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
success: function (res) {
|
||||
floorLayer.msg(res.message);
|
||||
if (res.code == 0) {
|
||||
location.hash = ns.hash("pc://shop/pc/floor");
|
||||
}
|
||||
repeatFlag = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
var vm = new Vue({
|
||||
el: "#app",
|
||||
data: function () {
|
||||
return {
|
||||
data: null,
|
||||
blockId: 0
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
},
|
||||
methods: {
|
||||
img: function (url, type = '') {
|
||||
return url ? ns.img(url, type) : "";
|
||||
},
|
||||
/**
|
||||
* 初始化链接下拉框
|
||||
* @param select_tag
|
||||
* @param link_tag
|
||||
*/
|
||||
initLink: function (select_tag, link_tag) {
|
||||
floorForm.on('select(' + select_tag + ')', function (data) {
|
||||
var title = $(data.elem).find("option:selected").text();
|
||||
if (data.value != 'diy') {
|
||||
$("input[name='" + link_tag + "']").val(JSON.stringify({
|
||||
"title": title,
|
||||
"url": data.value
|
||||
}));
|
||||
} else {
|
||||
floorLayer.prompt({
|
||||
formType: 2,
|
||||
value: $("input[name='" + link_tag + "']").val() ? JSON.parse($("input[name='" + link_tag + "']").val()).url : '',
|
||||
title: '自定义链接地址',
|
||||
area: ['450px', '100px'],
|
||||
cancel: function () {
|
||||
$("input[name='" + link_tag + "']").val("");
|
||||
}
|
||||
}, function (value, index, elem) {
|
||||
$("input[name='" + link_tag + "']").val(JSON.stringify({
|
||||
"title": title,
|
||||
"url": value
|
||||
}));
|
||||
floorLayer.close(index);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 设置文本
|
||||
* @param data 当前数据
|
||||
* @param callback 回调
|
||||
*/
|
||||
setText: function (data, callback) {
|
||||
var self = this;
|
||||
var getTpl = $("#setTitleHtml").html();
|
||||
if (!data) data = {};
|
||||
floorLaytpl(getTpl).render(data, function (html) {
|
||||
var textLayer = floorLayer.open({
|
||||
type: 1,
|
||||
title: "编辑文本",
|
||||
content: html,
|
||||
area: ['400px', 'auto'],
|
||||
success: function (layero, index) {
|
||||
floorForm.render();
|
||||
self.initLink("pc_link_text", "text_link");
|
||||
|
||||
// 文字颜色
|
||||
floorColorpicker.render({
|
||||
elem: '#text_color', //绑定元素
|
||||
color: data.color ? data.color : "",
|
||||
done: function (color) {
|
||||
$("#text_color_input").attr("value", color);
|
||||
}
|
||||
});
|
||||
|
||||
floorForm.on('submit(save_text)', function (data) {
|
||||
if (data.field.text_link) data.field.text_link = JSON.parse(data.field.text_link);
|
||||
if (callback) callback({
|
||||
text: data.field.text,
|
||||
link: data.field.text_link,
|
||||
color: data.field.text_color,
|
||||
textAlign: data.field.textAlign
|
||||
});
|
||||
floorLayer.close(textLayer);
|
||||
});
|
||||
}
|
||||
});
|
||||
floorForm.render();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 上传图片
|
||||
* @param data 当前数据
|
||||
* @param callback 回调
|
||||
*/
|
||||
uploadImg: function (data, callback) {
|
||||
var self = this;
|
||||
var getTpl = $("#uploadImg").html();
|
||||
if (!data) data = {};
|
||||
floorLaytpl(getTpl).render(data, function (html) {
|
||||
var textLayer = floorLayer.open({
|
||||
type: 1,
|
||||
title: "上传图片",
|
||||
content: html,
|
||||
area: ['450px', '300px'],
|
||||
success: function (layero, index) {
|
||||
floorForm.render();
|
||||
floorUpload.render({
|
||||
elem: "#upload_image",
|
||||
url: ns.url("shop/upload/upload"),
|
||||
done: function (res) {
|
||||
$("input[name='upload_image']").val(res.data.pic_path);
|
||||
$("#upload_image").html("<img src=" + ns.img(res.data.pic_path) + " >");
|
||||
}
|
||||
});
|
||||
self.initLink("pc_link_upload", "upload_link");
|
||||
floorForm.on('submit(save_upload)', function (data) {
|
||||
if (data.field.upload_link) data.field.upload_link = JSON.parse(data.field.upload_link);
|
||||
if (callback) callback({
|
||||
url: data.field.upload_image,
|
||||
link: data.field.upload_link
|
||||
});
|
||||
floorLayer.close(textLayer);
|
||||
});
|
||||
}
|
||||
});
|
||||
floorForm.render();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 设置商品分类
|
||||
* @param data 当前数据
|
||||
* @param callback 回调
|
||||
*/
|
||||
setCategory: function (data, callback) {
|
||||
var self = this;
|
||||
var getTpl = $("#setCategoryHtml").html();
|
||||
if (!data) data = {};
|
||||
floorLaytpl(getTpl).render(data, function (html) {
|
||||
var textLayer = floorLayer.open({
|
||||
type: 1,
|
||||
title: "编辑商品分类",
|
||||
content: html,
|
||||
area: ['600px', '400px'],
|
||||
success: function (layero, index) {
|
||||
floorForm.render();
|
||||
floorForm.on('select(goods_category)', function (categoryData) {
|
||||
var category_name = $.trim($(categoryData.elem).find("option:selected").text());
|
||||
var category_id = $(categoryData.elem).val();
|
||||
var isAdd = true;
|
||||
for (var i = 0; i < data.list.length; i++) {
|
||||
if (data.list[i].category_id == category_id) {
|
||||
isAdd = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (isAdd) {
|
||||
data.list.push({
|
||||
category_id: category_id,
|
||||
category_name: category_name
|
||||
});
|
||||
floorLaytpl(getTpl).render(data, function (html) {
|
||||
$(".set-category").html(html);
|
||||
floorForm.render();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
floorForm.on('submit(save_category)', function (data) {
|
||||
if (data.field.category_ids) data.field.category_ids = data.field.category_ids.replace(/\s+/g, "");
|
||||
if (callback) callback({
|
||||
category_ids: data.field.category_ids,
|
||||
list: data.field.category_list ? JSON.parse(data.field.category_list) : [],
|
||||
});
|
||||
floorLayer.close(textLayer);
|
||||
});
|
||||
|
||||
$(document).on('click','.delete-category',function(){
|
||||
var catrgoryId = $(this).attr('data-id');
|
||||
var data_catrgoryIds = data.category_ids.split(',');
|
||||
for (var i = 0; i< data_catrgoryIds.length; i ++) {
|
||||
if(catrgoryId == data_catrgoryIds[i]){
|
||||
delete data_catrgoryIds[i];
|
||||
}
|
||||
}
|
||||
data.category_ids = data_catrgoryIds.toString();
|
||||
if(data_catrgoryIds.length == 2){
|
||||
data.category_ids = data.category_ids.substring(0, data.category_ids.length-1)
|
||||
}
|
||||
|
||||
for (var y = 0; y < data.list.length; y ++ ){
|
||||
if(data.list[y].category_id == catrgoryId){
|
||||
data.list.splice(y, 1);
|
||||
}
|
||||
}
|
||||
|
||||
floorLaytpl(getTpl).render(data, function (html) {
|
||||
$(".set-category").html(html);
|
||||
floorForm.render();
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
floorForm.render();
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
119
addon/pc/shop/view/public/js/floor/floor_style_1.js
Executable file
119
addon/pc/shop/view/public/js/floor/floor_style_1.js
Executable file
@@ -0,0 +1,119 @@
|
||||
var templateFloorStyle1 = `
|
||||
<div class="floor-style-1">
|
||||
<div class="head-wrap"><h2 @click="setTitle()" :style="{ color : mData.title.value.color }">{{ mData.title.value.text }}</h2></div>
|
||||
<div class="body-wrap">
|
||||
<div class="left-wrap left-wrap-box">
|
||||
<div v-if="mData.leftImg.value.url" class="mask">
|
||||
<div class="left-img-replace" @click="uploadLeftImg()">
|
||||
<h4 @click.stop="delLeftImg()" class="iconfont iconshanchu">删除</h4>
|
||||
<div class="replace"><span>点击替换</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-wrap">
|
||||
<img v-if="mData.leftImg.value.url" :src="$parent.img(mData.leftImg.value.url)">
|
||||
<div v-else class="empty" @click="uploadLeftImg()"><span>点击上传图片<br/><br/>建议尺寸 234 x 614 像素</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="goods-list" @click="selectedGoods()">
|
||||
<li v-for="(item,index) in goodsLength" :key="index">
|
||||
<template v-if="mData.goodsList.value.list.length > index && mData.goodsList.value.list[index].goods_name">
|
||||
<div class="img-wrap">
|
||||
<img alt="商品图片" :src="$parent.img(mData.goodsList.value.list[index].goods_image.split(',')[0], 'mid')">
|
||||
</div>
|
||||
<h3>{{mData.goodsList.value.list[index].goods_name}}</h3>
|
||||
<p class="desc">{{mData.goodsList.value.list[index].introduction}}</p>
|
||||
<p class="price text-color">
|
||||
<span class="num">{{mData.goodsList.value.list[index].price}}元</span>
|
||||
<del>{{mData.goodsList.value.list[index].market_price}}元</del>
|
||||
</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="img-wrap empty">商品图片</div>
|
||||
<h3>商品名称</h3>
|
||||
<p class="desc">商品描述</p>
|
||||
<p class="price text-color">
|
||||
<span class="num">99元</span>
|
||||
<del>199元</del>
|
||||
</p>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bottom-wrap" @click="uploadBottomImg()">
|
||||
<img v-if="mData.bottomImg.value.url" :src="$parent.img(mData.bottomImg.value.url)">
|
||||
<div v-else class="empty"><span>点击上传图片<br/><br/>建议尺寸 1210 x 118 像素</span></div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
Vue.component('floor-style-1', {
|
||||
template: templateFloorStyle1,
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
mData: {},
|
||||
selectGoodsId: [],
|
||||
goodsLength: 8
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
this.mData = this.data;
|
||||
},
|
||||
methods: {
|
||||
setTitle: function () {
|
||||
var self = this;
|
||||
this.$parent.setText(self.mData.title.value, function (data) {
|
||||
self.mData.title.value = data;
|
||||
});
|
||||
},
|
||||
delLeftImg:function(){
|
||||
this.mData.leftImg.value.url = '';
|
||||
},
|
||||
uploadLeftImg: function () {
|
||||
var self = this;
|
||||
this.$parent.uploadImg(self.mData.leftImg.value, function (data) {
|
||||
self.mData.leftImg.value = data;
|
||||
});
|
||||
},
|
||||
uploadBottomImg: function () {
|
||||
var self = this;
|
||||
this.$parent.uploadImg(self.mData.bottomImg.value, function (data) {
|
||||
self.mData.bottomImg.value = data;
|
||||
});
|
||||
},
|
||||
selectedGoods: function () {
|
||||
var self = this;
|
||||
goodsSelect(function (data) {
|
||||
|
||||
self.selectGoodsId = [];
|
||||
var goods_ids = [];
|
||||
self.mData.goodsList.value.list = [];
|
||||
|
||||
var i = 0;
|
||||
for (var key in data) {
|
||||
var item = data[key];
|
||||
delete item.sku_list;
|
||||
delete item.selected_sku_list;
|
||||
self.mData.goodsList.value.list[i] = item;
|
||||
self.selectGoodsId.push(item.goods_id);
|
||||
goods_ids.push(item.goods_id);
|
||||
i++;
|
||||
}
|
||||
self.mData.goodsList.value.goods_ids = goods_ids.toString();
|
||||
vm.$forceUpdate();
|
||||
}, self.selectGoodsId, {mode: "spu", max_num: self.goodsLength, min_num: 1, disabled: 0});
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
mData: function (curr) {
|
||||
for (var i = 0; i < curr.goodsList.value.list.length; i++) {
|
||||
this.selectGoodsId.push(curr.goodsList.value.list[i].goods_id);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
122
addon/pc/shop/view/public/js/floor/floor_style_2.js
Executable file
122
addon/pc/shop/view/public/js/floor/floor_style_2.js
Executable file
@@ -0,0 +1,122 @@
|
||||
var templateFloorStyle2 = `
|
||||
<div class="floor-style-2">
|
||||
<div class="head-wrap">
|
||||
<h2 @click="setTitle()" :style="{ textAlign: mData.title.value.textAlign, color : mData.title.value.color }">{{ mData.title.value.text }}</h2>
|
||||
<p @click="setSubTitle()" :style="{ color : mData.subTitle.value.color }">{{ mData.subTitle.value.text }}</p>
|
||||
</div>
|
||||
<div class="body-wrap">
|
||||
<ul class="goods-list" @click="selectedGoods()">
|
||||
<li v-for="(item,index) in goodsLength" :key="index">
|
||||
<template v-if="mData.goodsList.value.list.length > index && mData.goodsList.value.list[index].goods_name">
|
||||
<div class="img-wrap">
|
||||
<img alt="商品图片" :src="$parent.img(mData.goodsList.value.list[index].goods_image.split(',')[0], 'mid')">
|
||||
</div>
|
||||
<h3>{{mData.goodsList.value.list[index].goods_name}}</h3>
|
||||
<p class="desc">{{mData.goodsList.value.list[index].introduction}}</p>
|
||||
<p class="price text-color">
|
||||
<span class="num">{{mData.goodsList.value.list[index].price}}元</span>
|
||||
<del>{{mData.goodsList.value.list[index].market_price}}元</del>
|
||||
</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="img-wrap empty">商品图片</div>
|
||||
<h3>商品名称</h3>
|
||||
<p class="desc">商品描述</p>
|
||||
<p class="price text-color">
|
||||
<span class="num">99元</span>
|
||||
<del>199元</del>
|
||||
</p>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bottom-wrap left-wrap-box">
|
||||
<div v-if="mData.bottomImg.value.url" class="mask">
|
||||
<div class="left-img-replace" @click="uploadBottomImg()">
|
||||
<h4 @click.stop="delLeftImg()" class="iconfont iconshanchu">删除</h4>
|
||||
<div class="replace"><span>点击替换</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-wrap">
|
||||
<img v-if="mData.bottomImg.value.url" :src="$parent.img(mData.bottomImg.value.url)">
|
||||
<div v-else class="empty" @click="uploadBottomImg()"><span>点击上传图片<br/><br/>建议尺寸 1210 x 118 像素</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
Vue.component('floor-style-2', {
|
||||
template: templateFloorStyle2,
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
mData: {},
|
||||
selectGoodsId: [],
|
||||
goodsLength: 20
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
this.mData = this.data;
|
||||
if(!('textAlign' in this.mData.title.value))
|
||||
this.mData.title.value.textAlign = "center";
|
||||
},
|
||||
methods: {
|
||||
setTitle: function () {
|
||||
var self = this;
|
||||
this.$parent.setText(self.mData.title.value, function (data) {
|
||||
self.mData.title.value = data;
|
||||
});
|
||||
},
|
||||
setSubTitle: function () {
|
||||
var self = this;
|
||||
self.mData.subTitle.value.isTextRequired=false;
|
||||
this.$parent.setText(self.mData.subTitle.value, function (data) {
|
||||
self.mData.subTitle.value = data;
|
||||
});
|
||||
},
|
||||
delLeftImg:function(){
|
||||
this.mData.bottomImg.value.url = '';
|
||||
},
|
||||
uploadBottomImg: function () {
|
||||
var self = this;
|
||||
this.$parent.uploadImg(self.mData.bottomImg.value, function (data) {
|
||||
self.mData.bottomImg.value = data;
|
||||
});
|
||||
},
|
||||
selectedGoods: function () {
|
||||
var self = this;
|
||||
goodsSelect(function (data) {
|
||||
|
||||
self.selectGoodsId = [];
|
||||
var goods_ids = [];
|
||||
self.mData.goodsList.value.list = [];
|
||||
|
||||
var i = 0;
|
||||
for (var key in data) {
|
||||
var item = data[key];
|
||||
delete item.sku_list;
|
||||
delete item.selected_sku_list;
|
||||
self.mData.goodsList.value.list[i] = item;
|
||||
self.selectGoodsId.push(item.goods_id);
|
||||
goods_ids.push(item.goods_id);
|
||||
i++;
|
||||
}
|
||||
self.mData.goodsList.value.goods_ids = goods_ids.toString();
|
||||
vm.$forceUpdate();
|
||||
}, self.selectGoodsId, {mode: "spu", max_num: self.goodsLength, min_num: 1, disabled: 0});
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
mData: function (curr) {
|
||||
for (var i = 0; i < curr.goodsList.value.list.length; i++) {
|
||||
this.selectGoodsId.push(curr.goodsList.value.list[i].goods_id);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
196
addon/pc/shop/view/public/js/floor/floor_style_3.js
Executable file
196
addon/pc/shop/view/public/js/floor/floor_style_3.js
Executable file
@@ -0,0 +1,196 @@
|
||||
var templateFloorStyle3 = `
|
||||
<div class="floor-style-3">
|
||||
<div class="item-wrap">
|
||||
<div class="head-wrap">
|
||||
<div class="title-name">
|
||||
<span :style="{ backgroundColor : mData.title.value.color }"></span>
|
||||
<h2 @click="setTitle()" :style="{ color : mData.title.value.color }">{{ mData.title.value.text }}</h2>
|
||||
</div>
|
||||
<div class="category-wrap" @click="setCategory()">
|
||||
<li v-for="(item,index) in categoryLength" :key="index">
|
||||
<template v-if="mData.categoryList.value.list.length > index && mData.categoryList.value.list[index].category_name">
|
||||
<a href="javascript:;">{{mData.categoryList.value.list[index].category_name}}</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a href="javascript:;">商品分类名称</a>
|
||||
</template>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-wrap">
|
||||
<div class="left-img-wrap left-wrap-box">
|
||||
<div v-if="mData.leftImg.value.url" class="mask">
|
||||
<div class="left-img-replace" @click="uploadLeftImg()">
|
||||
<h4 @click.stop="delLeftImg()" class="iconfont iconshanchu">删除</h4>
|
||||
<div class="replace"><span>点击替换</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-img-wrap">
|
||||
<img v-if="mData.leftImg.value.url" :src="$parent.img(mData.leftImg.value.url)">
|
||||
<div v-else class="empty" @click="uploadLeftImg()"><span>点击上传图片<br/><br/>建议尺寸 190 x 360 像素</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="right-goods-wrap" @click="selectedRightGoods()">
|
||||
<li v-for="(item,index) in rightGoodsLength" :key="index">
|
||||
<template v-if="mData.rightGoodsList.value.list.length > index && mData.rightGoodsList.value.list[index].goods_name">
|
||||
<h4>{{mData.rightGoodsList.value.list[index].goods_name}}</h4>
|
||||
<p class="text-color">{{mData.rightGoodsList.value.list[index].introduction}}</p>
|
||||
<div class="img-wrap">
|
||||
<img alt="商品图片" :src="$parent.img(mData.rightGoodsList.value.list[index].goods_image.split(',')[0], 'mid')">
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h4>商品名称</h4>
|
||||
<p class="text-color">商品描述</p>
|
||||
<div class="img-wrap empty">商品图片</div>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="bottom-goods-wrap" @click="selectedBottomGoods()">
|
||||
<li v-for="(item,index) in bottomGoodsLength" :key="index">
|
||||
<template v-if="mData.bottomGoodsList.value.list.length > index && mData.bottomGoodsList.value.list[index].goods_name">
|
||||
<div class="info-wrap">
|
||||
<h4>{{mData.bottomGoodsList.value.list[index].goods_name}}</h4>
|
||||
<p class="text-color">{{mData.bottomGoodsList.value.list[index].introduction}}</p>
|
||||
</div>
|
||||
<div class="img-wrap">
|
||||
<img alt="商品图片" :src="$parent.img(mData.bottomGoodsList.value.list[index].goods_image.split(',')[0], 'mid')">
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="info-wrap">
|
||||
<h4>商品名称</h4>
|
||||
<p class="text-color">商品描述</p>
|
||||
</div>
|
||||
<div class="img-wrap empty">商品图片</div>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
Vue.component('floor-style-3', {
|
||||
template: templateFloorStyle3,
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
mData: {},
|
||||
categoryLength: 6,
|
||||
rightGoodsLength: 10,
|
||||
rightSelectGoodsId: [],
|
||||
bottomGoodsLength: 6,
|
||||
bottomSelectGoodsId: [],
|
||||
// brandLength: 8,
|
||||
// selectBrandsId: []
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
this.mData = this.data;
|
||||
},
|
||||
methods: {
|
||||
setTitle: function () {
|
||||
var self = this;
|
||||
this.$parent.setText(self.mData.title.value, function (data) {
|
||||
self.mData.title.value = data;
|
||||
});
|
||||
},
|
||||
delLeftImg:function(){
|
||||
this.mData.leftImg.value.url = '';
|
||||
},
|
||||
uploadLeftImg: function () {
|
||||
var self = this;
|
||||
this.$parent.uploadImg(self.mData.leftImg.value, function (data) {
|
||||
self.mData.leftImg.value = data;
|
||||
});
|
||||
},
|
||||
setCategory: function () {
|
||||
var self = this;
|
||||
this.$parent.setCategory(self.mData.categoryList.value, function (data) {
|
||||
self.mData.categoryList.value = data;
|
||||
vm.$forceUpdate();
|
||||
});
|
||||
},
|
||||
selectedRightGoods: function () {
|
||||
var self = this;
|
||||
goodsSelect(function (data) {
|
||||
|
||||
self.rightSelectGoodsId = [];
|
||||
var goods_ids = [];
|
||||
self.mData.rightGoodsList.value.list = [];
|
||||
|
||||
var i = 0;
|
||||
for (var key in data) {
|
||||
var item = data[key];
|
||||
delete item.sku_list;
|
||||
delete item.selected_sku_list;
|
||||
self.mData.rightGoodsList.value.list[i] = item;
|
||||
self.rightSelectGoodsId.push(item.goods_id);
|
||||
goods_ids.push(item.goods_id);
|
||||
i++;
|
||||
}
|
||||
self.mData.rightGoodsList.value.goods_ids = goods_ids.toString();
|
||||
vm.$forceUpdate();
|
||||
}, self.rightSelectGoodsId, {mode: "spu", max_num: self.rightGoodsLength, min_num: 1});
|
||||
},
|
||||
selectedBottomGoods: function () {
|
||||
var self = this;
|
||||
goodsSelect(function (data) {
|
||||
|
||||
self.bottomSelectGoodsId = [];
|
||||
var goods_ids = [];
|
||||
self.mData.bottomGoodsList.value.list = [];
|
||||
|
||||
var i = 0;
|
||||
for (var key in data) {
|
||||
var item = data[key];
|
||||
delete item.sku_list;
|
||||
delete item.selected_sku_list;
|
||||
self.mData.bottomGoodsList.value.list[i] = item;
|
||||
self.bottomSelectGoodsId.push(item.goods_id);
|
||||
goods_ids.push(item.goods_id);
|
||||
i++;
|
||||
}
|
||||
self.mData.bottomGoodsList.value.goods_ids = goods_ids.toString();
|
||||
vm.$forceUpdate();
|
||||
}, self.bottomSelectGoodsId, {mode: "spu", max_num: self.bottomGoodsLength, min_num: 1, disabled: 0});
|
||||
},
|
||||
// selectedBrand: function () {
|
||||
// var self = this;
|
||||
// brandSelect(function (res) {
|
||||
// self.selectBrandsId = [];
|
||||
// var brand_ids = [];
|
||||
// self.mData.brandList.value.list = [];
|
||||
// for (var i = 0; i < res.length; i++) {
|
||||
// var item = res[i];
|
||||
// self.mData.brandList.value.list[i] = item;
|
||||
// self.selectBrandsId.push(item.brand_id);
|
||||
// brand_ids.push(item.brand_id);
|
||||
// }
|
||||
// self.mData.brandList.value.brand_ids = brand_ids.toString();
|
||||
// vm.$forceUpdate();
|
||||
|
||||
// }, self.selectBrandsId, {max_num: self.brandLength, min_num: 1});
|
||||
// }
|
||||
|
||||
},
|
||||
watch: {
|
||||
mData: function (curr) {
|
||||
for (var i = 0; i < curr.rightGoodsList.value.list.length; i++) {
|
||||
this.rightSelectGoodsId.push(curr.rightGoodsList.value.list[i].goods_id);
|
||||
}
|
||||
for (var i = 0; i < curr.bottomGoodsList.value.list.length; i++) {
|
||||
this.bottomSelectGoodsId.push(curr.bottomGoodsList.value.list[i].goods_id);
|
||||
}
|
||||
// for (var i = 0; i < curr.brandList.value.list.length; i++) {
|
||||
// this.selectBrandsId.push(curr.brandList.value.list[i].brand_id);
|
||||
// }
|
||||
},
|
||||
},
|
||||
});
|
||||
137
addon/pc/shop/view/public/js/floor/floor_style_4.js
Executable file
137
addon/pc/shop/view/public/js/floor/floor_style_4.js
Executable file
@@ -0,0 +1,137 @@
|
||||
var templateFloorStyle4 = `
|
||||
<div class="floor-style-4">
|
||||
<div class="head-wrap">
|
||||
<h2 @click="setTitle()" :style="{ color : mData.title.value.color }">{{ mData.title.value.text }}</h2>
|
||||
<div class="more" :style="{ color : mData.more.value.color }" @click="setMore()">
|
||||
<span>{{ mData.more.value.text }}</span>
|
||||
<i class="iconfont iconyoujiantou"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-wrap">
|
||||
<div class="left-wrap left-wrap-box">
|
||||
<div v-if="mData.leftImg.value.url" class="mask">
|
||||
<div class="left-img-replace" @click="uploadLeftImg()">
|
||||
<h4 @click.stop="delLeftImg()" class="iconfont iconshanchu">删除</h4>
|
||||
<div class="replace"><span>点击替换</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-wrap">
|
||||
<img v-if="mData.leftImg.value.url" :src="$parent.img(mData.leftImg.value.url)">
|
||||
<div v-else class="empty" @click="uploadLeftImg()"><span>点击上传图片<br/><br/>建议尺寸 500 x 323 像素</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="goods-list" @click="selectedGoods()">
|
||||
<li v-for="(item,index) in goodsLength" :key="index">
|
||||
<template v-if="mData.goodsList.value.list.length > index && mData.goodsList.value.list[index].goods_name">
|
||||
<div class="img-wrap">
|
||||
<img alt="商品图片" :src="$parent.img(mData.goodsList.value.list[index].goods_image.split(',')[0], 'mid')">
|
||||
</div>
|
||||
<h3>{{mData.goodsList.value.list[index].goods_name}}</h3>
|
||||
<p class="desc">{{mData.goodsList.value.list[index].introduction}}</p>
|
||||
<p class="price text-color">
|
||||
<span class="num">{{mData.goodsList.value.list[index].price}}元</span>
|
||||
<del>{{mData.goodsList.value.list[index].market_price}}元</del>
|
||||
</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="img-wrap empty">商品图片</div>
|
||||
<h3>商品名称</h3>
|
||||
<p class="desc">商品描述</p>
|
||||
<p class="price text-color">
|
||||
<span class="num">99元</span>
|
||||
<del>199元</del>
|
||||
</p>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="switch-wrap layui-hide">
|
||||
<div class="switch-item"><i class="iconfont iconback_light"></i></div>
|
||||
<div class="switch-item"><i class="iconfont iconyoujiantou"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-wrap" @click="uploadBottomImg()">
|
||||
<img v-if="mData.bottomImg.value.url" :src="$parent.img(mData.bottomImg.value.url)">
|
||||
<div v-else class="empty"><span>点击上传图片<br/><br/>建议尺寸 1210 x 118 像素</span></div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
Vue.component('floor-style-4', {
|
||||
template: templateFloorStyle4,
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
mData: {},
|
||||
selectGoodsId: [],
|
||||
goodsLength: 3
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
this.mData = this.data;
|
||||
},
|
||||
methods: {
|
||||
setTitle: function () {
|
||||
var self = this;
|
||||
this.$parent.setText(self.mData.title.value, function (data) {
|
||||
self.mData.title.value = data;
|
||||
});
|
||||
},
|
||||
setMore: function () {
|
||||
var self = this;
|
||||
this.$parent.setText(self.mData.more.value, function (data) {
|
||||
self.mData.more.value = data;
|
||||
});
|
||||
},
|
||||
delLeftImg:function(){
|
||||
this.mData.leftImg.value.url = '';
|
||||
},
|
||||
uploadLeftImg: function () {
|
||||
var self = this;
|
||||
this.$parent.uploadImg(self.mData.leftImg.value, function (data) {
|
||||
self.mData.leftImg.value = data;
|
||||
});
|
||||
},
|
||||
uploadBottomImg: function () {
|
||||
var self = this;
|
||||
this.$parent.uploadImg(self.mData.bottomImg.value, function (data) {
|
||||
self.mData.bottomImg.value = data;
|
||||
});
|
||||
},
|
||||
selectedGoods: function () {
|
||||
var self = this;
|
||||
goodsSelect(function (data) {
|
||||
|
||||
self.selectGoodsId = [];
|
||||
var goods_ids = [];
|
||||
self.mData.goodsList.value.list = [];
|
||||
|
||||
var i = 0;
|
||||
for (var key in data) {
|
||||
var item = data[key];
|
||||
delete item.sku_list;
|
||||
delete item.selected_sku_list;
|
||||
self.mData.goodsList.value.list[i] = item;
|
||||
self.selectGoodsId.push(item.goods_id);
|
||||
goods_ids.push(item.goods_id);
|
||||
i++;
|
||||
}
|
||||
self.mData.goodsList.value.goods_ids = goods_ids.toString();
|
||||
vm.$forceUpdate();
|
||||
}, self.selectGoodsId, {mode: "spu", min_num: 1, disabled: 0});
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
mData: function (curr) {
|
||||
for (var i = 0; i < curr.goodsList.value.list.length; i++) {
|
||||
this.selectGoodsId.push(curr.goodsList.value.list[i].goods_id);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user