初始上传

public/static/ext/diyview/js/async_load_css.js

@@ -0,0 +1,81 @@
+/**
+ * 异步加载外部CSS文件，并且回调
+ */
+function styleOnload(node, callback) {
+	// for IE6-9 and Opera
+	if (node.attachEvent) {
+		node.attachEvent('onload', callback);
+		// NOTICE:
+		// 1. "onload" will be fired in IE6-9 when the file is 404, but in
+		// this situation, Opera does nothing, so fallback to timeout.
+		// 2. "onerror" doesn't fire in any browsers!
+	}
+	// polling for Firefox, Chrome, Safari
+	else {
+		setTimeout(function () {
+			poll(node, callback);
+		}, 0); // for cache
+	}
+}
+
+function poll(node, callback) {
+	if (callback.isCalled) {
+		return;
+	}
+	var isLoaded = false;
+	if (/webkit/i.test(navigator.userAgent)) {// webkit
+		if (node['sheet']) {
+			isLoaded = true;
+		}
+	}
+	// for Firefox
+	else if (node['sheet']) {
+		try {
+			if (node['sheet'].cssRules) {
+				isLoaded = true;
+			}
+		} catch (ex) {
+			// NS_ERROR_DOM_SECURITY_ERR
+			if (ex.code === 1000) {
+				isLoaded = true;
+			}
+		}
+	}
+	if (isLoaded) {
+		// give time to render.
+		setTimeout(function () {
+			callback();
+		}, 1);
+	} else {
+		setTimeout(function () {
+			poll(node, callback);
+		}, 1);
+	}
+}
+
+// 我的动态创建LINK函数
+function createLink(cssURL, lnkId, charset, media) {
+	var head = document.getElementsByTagName('head')[0], linkTag = null;
+	if (!cssURL) {
+		return false;
+	}
+	linkTag = document.createElement('link');
+	linkTag.setAttribute('id', (lnkId || 'dynamic-style'));
+	linkTag.setAttribute('rel', 'stylesheet');
+	linkTag.setAttribute('charset', (charset || 'utf-8'));
+	linkTag.setAttribute('media', (media || 'all'));
+	linkTag.setAttribute('type', 'text/css');
+	linkTag.href = cssURL;
+	head.appendChild(linkTag);
+	return linkTag;
+}
+
+/**
+ * demo
+ */
+//function loadcss() {
+//	var styleNode = createLink("http://localhost/niucloud/addon/system/DiyView/component/view/rubik_cube/css/rubik_cube.css");
+//	styleOnload(styleNode, function() {
+//		alert("loaded");
+//	});
+//}

public/static/ext/diyview/js/custom_template.js

@@ -0,0 +1,866 @@
+//最外层组件
+var ncComponentHtml = '<div v-show="data.lazyLoadCss && data.lazyLoad" :key="data.id">';
+		ncComponentHtml += '<div class="preview-draggable" ' +
+			':style="{ ' +
+			'backgroundColor : data.pageBgColor, ' +
+			'paddingTop : data.margin.top + \'px\', ' +
+			'paddingBottom : data.margin.bottom + \'px\', ' +
+			'paddingLeft : data.margin.both + \'px\', ' +
+			'paddingRight : data.margin.both + \'px\'  }" @click="$parent.changeCurrentIndex(data.index)">'; // 拖拽区域
+			ncComponentHtml += '<slot name="preview"></slot>';
+			ncComponentHtml += '<i class="del" v-show="data.isDelete !== 1" @click.stop="$parent.delComponent(data.index)" data-disabled="1">x</i>';
+			ncComponentHtml += '<div class="comp-title">{{ data.componentTitle }}</div>';
+		ncComponentHtml += '</div>';
+
+		ncComponentHtml += '<div class="edit-attribute" :data-have-edit="1">';
+			ncComponentHtml += '<div class="attr-wrap">';
+				ncComponentHtml += '<div class="restore-wrap">';
+
+					ncComponentHtml += '<div class="attr-title">';
+						ncComponentHtml += '<span class="title">{{data.componentTitle}}</span>';
+						ncComponentHtml += '<div class="tab-wrap">';
+							ncComponentHtml += '<span class="active bg-color" data-type="content">内容</span>';
+							ncComponentHtml += '<span data-type="style">样式</span>';
+						ncComponentHtml += '</div>';
+					ncComponentHtml += '</div>';
+
+					// 内容
+					ncComponentHtml += '<div class="edit-content-wrap">';
+						ncComponentHtml += '<slot name="edit-content"></slot>';
+					ncComponentHtml += '</div>';
+
+					// 样式
+					ncComponentHtml += '<div class="edit-style-wrap" style="display: none;">';
+						ncComponentHtml += '<slot name="edit-style"></slot>';
+						ncComponentHtml += '<common-set v-if="data.ignoreLoad" :ignore="data.ignore"></common-set>';
+					ncComponentHtml += '</div>';
+				ncComponentHtml += '</div>';
+
+			ncComponentHtml += '</div>';
+		ncComponentHtml += '</div>';
+
+		ncComponentHtml += '<div style="display:none;">';
+			ncComponentHtml += '<slot name="resource"></slot>';
+		ncComponentHtml += '</div>';
+
+	ncComponentHtml += '</div>';
+
+var ncComponent = {
+	props: ["data"],
+	template: ncComponentHtml,
+	created: function () {
+		//如果当前添加的组件没有添加过资源
+		if (!this.$slots.resource) {
+			this.data.lazyLoadCss = true;
+			this.data.lazyLoad = true;
+		} else {
+			//检测是否只添加了JS或者CSS，没有添加默认为true
+			var countCss = 0, countJs = 0, outerCountJs = 0;
+			for (var i = 0; i < this.$slots.resource.length; i++) {
+				if (this.$slots.resource[i].componentOptions) {
+					if (this.$slots.resource[i].componentOptions.tag === "css") {
+						countCss++;
+					} else if (this.$slots.resource[i].componentOptions.tag === "js") {
+						countJs++;
+						//统计外部JS数量
+						if (!$.isEmptyObject(this.$slots.resource[i].componentOptions.propsData)) outerCountJs++;
+					}
+				}
+			}
+
+			if (countCss === 0) this.data.lazyLoadCss = true;
+			if (countJs === 0) this.data.lazyLoad = true;
+
+			this.data.outerCountJs = outerCountJs;
+
+		}
+	}
+};
+
+/**
+ * 手机端自定义模板Vue对象
+ */
+var vue = new Vue({
+	el: "#diyView",
+	data: {
+		//当前编辑的组件位置
+		currentIndex: -99,
+		globalLazyLoad: false,
+
+		//全局属性
+		global: {
+			name:$('#name').val(),
+			title: "页面" + $('#name').val().replace('DIY_VIEW_RANDOM_', ''),
+			pageBgColor: "#ffffff", // 页面背景颜色
+			topNavColor: "#ffffff",
+			topNavBg: false,
+			navBarSwitch: true, // 导航栏是否显示
+			navStyle: 1, // 导航栏风格
+			textNavColor: "#333333",
+			topNavImg: "",
+			moreLink: {
+				name: ""
+			},
+			//是否显示底部导航标识
+			openBottomNav: true,
+			textImgPosLink: 'center',
+			mpCollect: false,
+			// 弹框形式，不弹出 -1，首次弹出 1，每次弹出 0
+			popWindow: {
+				imageUrl: "",
+				count: -1,
+				show: 0,
+				link: {
+					name: ""
+				},
+				imgWidth: '',
+				imgHeight: ''
+			},
+			bgUrl: '',
+			imgWidth: '',
+			imgHeight: '',
+
+			// 公共模板属性，所有组件都继承，不需要重复定义，组件内部根据业务自行调用
+			template: {
+				pageBgColor: '', // 底部背景颜色
+				textColor: "#303133", // 文字颜色
+
+				componentBgColor: '', // 组件背景颜色
+				componentAngle: 'round', // 组件角标（round：圆角，right：直角）
+				topAroundRadius: 0, // 组件上圆角，命名缩减
+				bottomAroundRadius: 0, // 组件下圆角，命名缩减
+
+				elementBgColor: '', // 元素背景颜色
+				elementAngle: 'round', // 元素角标（round：圆角，right：直角）
+				topElementAroundRadius: 0, // 元素上圆角，命名缩减
+				bottomElementAroundRadius: 0, // 元素下圆角，命名缩减
+
+				margin: {
+					top: 0, // 上边距
+					bottom: 0, // 下边距
+					both: 0, // 左右边距
+				}
+			},
+			//公众号分享
+			wechatShareTitle:'',
+			wechatShareDesc:'',
+			wechatShareImage:'',
+			//小程序分享
+			weappShareTitle:'',
+			weappShareImage:'',
+		},
+		//自定义组件集合
+		data: [],
+	},
+	components: {
+		'nc-component': ncComponent,//最外层组件
+	},
+	created: function () {
+		if ($("#info").length) {
+			setTimeout(function () {
+				$('#diyView').css('visibility', 'visible');
+			}, 50);
+		} else {
+			$('#diyView').css('visibility', 'visible');
+			$('.loading-layer').hide();
+			$('.preview-wrap .preview-restore-wrap').css('visibility', 'visible');
+		}
+	},
+	mounted: function () {
+		this.refresh();
+	},
+	methods: {
+		addComponent: function (obj, other) {
+			//附加公共字段
+			obj.index = 0;
+			obj.sort = 0;
+			obj.lazyLoadCss = false; // 资源懒加载，防止看到界面缓慢加载
+			obj.lazyLoad = false; // 资源懒加载，防止看到界面缓慢加载
+			obj.outerCountJs = 0;
+			obj.ignore = []; // 忽略模板属性
+			obj.ignoreLoad = false; // 等待忽略数组赋值后加载
+			// obj.hidden = []; // 隐藏公共属性
+			obj.tempData = {}; // 临时数据
+			obj.id = ns.gen_non_duplicate(5);
+
+			//第一次添加组件时，添加以下字段
+			if (other) {
+				// 第一次添加组件时，添加以下字段
+				obj.addonName = other.addon_name; // 如果插件不存在，后台则会清除组件
+				obj.componentName = other.name;
+				obj.componentTitle = other.title;
+				obj.isDelete = parseInt(other.is_delete);
+
+				for (var key in this.global.template) {
+					obj[key] = typeof this.global.template[key] == 'object' ? JSON.parse(JSON.stringify(this.global.template[key])) : this.global.template[key];
+				}
+				if (!this.checkComponentIsAdd(obj.componentName)) {
+					this.autoSelected(obj.componentName);
+					return;
+				}
+			}
+
+			if (this.currentIndex === -99 || this.currentIndex === -98) {
+				this.data.push(obj);
+				// 添加组件后（不是编辑调用的），选择最后一个
+				if (other) this.currentIndex = this.data.length - 1;
+			}else {
+				// 查询当前选中索引，插入到指定位置
+				if (other && other.index) {
+					this.data.splice(other.index, 0, obj);// 指定下标
+				} else {
+					this.data.splice(++this.currentIndex, 0, obj);
+				}
+			}
+
+			$('.loading-layer').hide();
+			$('.preview-wrap .preview-restore-wrap').css('visibility', 'visible');
+
+			this.refresh();
+
+			var self = this;
+
+			setTimeout(function () {
+				if (obj.componentName !== "FloatBtn" && obj.componentName !== "FollowOfficialAccount") {
+					// 如果在末尾添加组件，则定位到最后的位置
+					if (self.currentIndex === -99 || ((self.currentIndex + 1) === self.data.length)) {
+						$(".preview-wrap .preview-restore-wrap .div-wrap").scrollTop($(".diy-view-wrap").height());
+					} else {
+						// 如果在其他位置添加组件，则定位到组件位置
+						var element = $(".draggable-element[data-index=" + self.currentIndex + "]");
+						var warp = $(".preview-wrap .preview-restore-wrap .div-wrap");
+						var height = 0;
+						$(".draggable-element:lt(" + (element.index() + 1) + ")").each(function (i) {
+							height += $(this).outerHeight();
+						});
+						height -= element.outerHeight() + 30;
+						warp.animate({scrollTop: height}, 300);
+					}
+				}
+
+			}, 50);
+		},
+
+		//检测组件是否允许添加，true：允许 false：不允许
+		checkComponentIsAdd: function (componentName) {
+
+			var component = $('.component-list ul li[data-name="' + componentName + '"]');
+			var maxCount = parseInt(component.attr('data-max-count'));
+
+			//maxCount为0时不处理
+			if (maxCount === 0) return true;
+
+			var count = 0;
+
+			//遍历已添加的自定义组件，检测是否超出数量
+			for (var i in this.data) if (this.data[i].componentName === componentName) count++;
+
+			if (count >= maxCount) return false;
+			else return true;
+		},
+
+		// 获取组件添加数量
+		getComponentAddCount: function (componentName) {
+			var count = 0;
+			//遍历已添加的自定义组件，检测是否超出数量
+			for (var i in this.data) if (this.data[i].componentName === componentName) count++;
+			return count;
+		},
+
+		//改变当前编辑的组件选中
+		changeCurrentIndex: function (sort) {
+			this.currentIndex = parseInt(sort);
+			this.refresh();
+		},
+
+		//改变当前的删除弹出框的显示状态
+		delComponent: function (i) {
+			if (i < -1) return; // 从0开始
+			var self = this;
+
+			layer.confirm('确定要删除吗?', {title: '操作提示'}, function (index) {
+				self.data.splice(i, 1);
+
+				// 如果组件全部删除，则选中页面设置
+				if(self.data.length === 0){
+					self.currentIndex = -99;
+				}
+
+				// 如果当前选中的组件不存在，则选择上一个
+				if(self.currentIndex === self.data.length){
+					self.currentIndex--;
+				}
+
+				self.refresh();
+				self.refreshQuick(true);
+				layer.close(index);
+			});
+		},
+
+		// 重置当前组件数据
+		resetComponent: function () {
+			if (this.currentIndex < 0) return; // 从0开始
+			// if (self.data.length < 1) return; // 重置全部用
+
+			var self = this;
+			layer.confirm('确认要重置组件默认数据吗?', {title: '操作提示'}, function (index) {
+
+				// 重置当前选中的组件数据
+				var current = $(".draggable-element[data-index=" + self.currentIndex + "]");
+				var id = current.attr('data-id');
+				var temp = {};
+				if ($("#info").length) {
+					var info = JSON.parse($("#info").val().toString());
+					if (Object.keys(info).length) {
+						for (var i = 0; i < info.value.length; i++) {
+							if (info.value[i].id === id) {
+								info.value[i].index = self.currentIndex;
+								info.value[i].sort = self.data[self.currentIndex].sort;
+								info.value[i].lazyLoadCss = true; // 资源懒加载，防止看到界面缓慢加载
+								info.value[i].lazyLoad = true; // 资源懒加载，防止看到界面缓慢加载
+								info.value[i].outerCountJs = self.data[self.currentIndex].outerCountJs;
+								info.value[i].ignore = self.data[self.currentIndex].ignore; // 忽略模板属性
+								info.value[i].tempData = self.data[self.currentIndex].tempData; // 临时数据
+								info.value[i].id = ns.gen_non_duplicate(5);
+								temp = info.value[i];
+								break;
+							}
+						}
+						$("#info").val(JSON.stringify(info));
+					}
+				}
+
+				// 如果是新添加的组件，要重置数据
+				if (Object.keys(temp).length === 0) {
+					var component = $('.component-list ul li[data-name="' + self.data[self.currentIndex].componentName + '"]');
+					var value = JSON.parse(component.attr('data-value'));
+					var index = self.currentIndex;
+
+					self.data.splice(index, 1);
+					self.addComponent(value, {
+						index: index, // 指定下标
+						name: component.attr('data-name'),
+						title: component.attr('title'),
+						addon_name: component.attr('data-addon-name'),
+						max_count: component.attr('data-max-count'),
+						is_delete: component.attr('data-is-delete')
+					});
+
+				} else {
+					self.data.splice(self.currentIndex, 1, temp);
+				}
+
+				setTimeout(function () {
+					fullScreenSize();
+					self.refreshQuick(true);
+				}, 10);
+
+				// 以下是重置全部数据，需要时放开，勿删！
+				// self.data = [];
+				// self.currentIndex = -99;
+				// setTimeout(function () {
+				// 	self.refreshComponent();
+				// }, 10 * 2);
+
+				layer.close(index);
+			});
+		},
+
+		// 上移组件
+		moveUpComponent: function () {
+			if ((this.currentIndex - 1) < 0) return; // 从0开始
+
+			var element = $(".draggable-element[data-index=" + this.currentIndex + "]");
+			var prev = element.prev('.draggable-element'); // 上一个组件
+
+			if(prev.length === 0) return;
+
+			var prevIndex = parseInt(prev.attr('data-index'));
+
+			var temp = this.deepClone(this.data[this.currentIndex]); // 当前选中组件
+			temp.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
+
+			var temp2 = this.deepClone(this.data[prevIndex]); // 上个组件
+			temp2.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
+
+			this.data[this.currentIndex] = temp2;
+			this.data[prevIndex] = temp;
+
+			this.changeCurrentIndex(prevIndex);
+
+			this.refreshQuick();
+
+			var self = this;
+			setTimeout(function () {
+				self.$forceUpdate();
+			},10);
+		},
+
+		// 下移组件
+		moveDownComponent: function () {
+			var element = $(".draggable-element[data-index=" + this.currentIndex + "]");
+			var next = element.next('.draggable-element'); // 上一个组件
+
+			if(next.length === 0) return; // 最后一个不能下移
+
+			var nextIndex = parseInt(next.attr('data-index'));
+
+			var temp = this.deepClone(this.data[this.currentIndex]); // 当前选中组件
+			temp.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
+
+			var temp2 = this.deepClone(this.data[nextIndex]); // 下个组件
+			temp2.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
+
+			this.data[this.currentIndex] = temp2;
+			this.data[nextIndex] = temp;
+
+			this.changeCurrentIndex(nextIndex);
+
+			this.refreshQuick();
+
+			var self = this;
+			setTimeout(function () {
+				self.$forceUpdate();
+			},10);
+		},
+
+		// 复制组件
+		copyComponent: function () {
+			if (this.currentIndex < 0) return; // 从0开始
+
+			var temp = this.deepClone(this.data[this.currentIndex]); // 当前选中组件
+			temp.index++;
+			temp.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
+			var component = $('.component-list ul li[data-name="' + temp.componentName + '"]');
+			var maxCount = parseInt(component.attr('data-max-count'));
+
+			if (!this.checkComponentIsAdd(temp.componentName)) {
+				layer.msg(`无法复制，${temp.componentTitle}组件只能添加${maxCount}个`);
+				return;
+			}
+
+			var index = this.currentIndex + 1;
+			this.data.splice(index, 0, temp);
+
+			this.changeCurrentIndex(index);
+
+			this.refreshQuick(true);
+
+		},
+
+		// 深度拷贝对象
+		deepClone(source) {
+			if (typeof source !== 'object' || source == null) {
+				return source;
+			}
+			var target = Array.isArray(source) ? [] : {};
+			for (var key in source) {
+				if (Object.prototype.hasOwnProperty.call(source, key)) {
+					if (typeof source[key] === 'object' && source[key] !== null) {
+						target[key] = this.deepClone(source[key]);
+					} else {
+						target[key] = source[key];
+					}
+				}
+			}
+			return target;
+		},
+
+		//刷新数据排序
+		refresh: function () {
+			var self = this;
+			//vue框架执行，异步操作组件列表的排序
+			setTimeout(function () {
+
+				$(".draggable-element").each(function (i) {
+					$(this).attr("data-sort", i);
+				});
+
+				for (var i = 0; i < self.data.length; i++) {
+					self.data[i].index = $(".draggable-element[data-index=" + i + "]").attr("data-index");
+					self.data[i].sort = $(".draggable-element[data-index=" + i + "]").attr("data-sort");
+				}
+
+				// 如果当前编辑的组件不存在了，则选中最后一个
+				if (parseInt(self.currentIndex) >= self.data.length) self.currentIndex--;
+
+				$(".draggable-element[data-index=" + self.currentIndex + "] .edit-attribute .attr-wrap").css("height", ($(window).height() - 135) + "px");
+
+			}, 50);
+
+		},
+
+		//转换图片路径
+		changeImgUrl: function (url) {
+			if (url == null || url === "") return '';
+			if (url.indexOf("static/img/") > -1) return ns.img(ns_url.staticImg + "/" + url.replace("public/static/img/", ""));
+			else return ns.img(url);
+		},
+
+		//设置全局对象属性
+		setGlobal: function (obj) {
+			for (var k in obj) {
+				if (k) this.$set(this.global, k, obj[k]);
+			}
+			this.globalLazyLoad = true;
+		},
+
+		verify: function () {
+
+			if (this.global.title === "") {
+				layer.msg('请输入页面名称');
+				this.currentIndex = -99;
+				this.refresh();
+				return false;
+			} else if (this.global.title.length > 15) {
+				layer.msg('页面名称最多15个字符');
+				this.currentIndex = -99;
+				this.refresh();
+				return false;
+			}
+
+			if (this.global.popWindow.count !== -1 && this.global.popWindow.imageUrl === '') {
+				layer.msg('请上传弹框广告');
+				this.currentIndex = -99;
+				this.refresh();
+				return false;
+			}
+
+			for (var i = 0; i < this.data.length; i++) {
+
+				try {
+					if (this.data[i].verify) {
+						for (var j = 0; j < this.data[i].verify.length; j++) {
+							var res = this.data[i].verify[j](i);
+							if (!res.code) {
+								this.currentIndex = i;
+								this.refresh();
+								layer.msg(res.message);
+								return false;
+							}
+						}
+					}
+				} catch (e) {
+					console.log("verify Error:", e, i, this.data[i]);
+				}
+			}
+			return true;
+		},
+
+		// 定位组件位置
+		autoSelected(componentName) {
+			for (var i in this.data) {
+				if (this.data[i].componentName === componentName) {
+					this.changeCurrentIndex(this.data[i].index);
+					var element = $('.preview-wrap .preview-restore-wrap [data-index="' + this.data[i].index + '"]'),
+						warp = $(".preview-wrap .preview-restore-wrap .div-wrap"),
+						warpTop = warp.offset().top,
+						warpBottom = warpTop + warp.height(),
+						elementTop = element.offset().top,
+						elementBottom = elementTop + element.height(),
+						scrollTop = warp.scrollTop();
+
+					if (elementBottom > warpBottom) {
+						scrollTop += (elementBottom - warpBottom) + 2;
+					} else if (warpTop > elementTop) {
+						scrollTop -= (warpTop - elementTop);
+					}
+					warp.animate({scrollTop: scrollTop}, 300);
+					return;
+				}
+			}
+		},
+
+		// 刷新组件数据
+		refreshComponent: function () {
+			if ($("#info").length === 0) return;
+
+			var info = JSON.parse($("#info").val().toString());// .replace(/\@/g, "'"));
+			if (Object.keys(info).length) {
+				for (var i = 0; i < info.value.length; i++) {
+					info.value[i].index = 0;
+					info.value[i].sort = 0;
+					info.value[i].lazyLoadCss = false; // 资源懒加载，防止看到界面缓慢加载
+					info.value[i].lazyLoad = false; // 资源懒加载，防止看到界面缓慢加载
+					info.value[i].outerCountJs = 0;
+					info.value[i].ignore = []; // 忽略模板属性
+					info.value[i].tempData = {}; // 临时数据
+					// info.value[i].id = ns.gen_non_duplicate(5);
+				}
+			}
+
+			this.setGlobal(info.global);
+
+			if(info.value.length) {
+				this.data = info.value;
+				this.changeCurrentIndex(0); // 选择第一个
+				this.refresh();
+			}
+
+			fullScreenSize();
+			$('.loading-layer').hide();
+			$('.preview-wrap .preview-restore-wrap').css('visibility', 'visible');
+
+		},
+
+		/**
+		 * 刷新快捷操作后的展示
+		 * @param isScroll false：滚动，true：不滚动
+		 */
+		refreshQuick: function (isScroll) {
+			var self = this;
+			vue.$nextTick(function () {
+				if (!isScroll) {
+					var element = $(".draggable-element[data-index=" + self.currentIndex + "]");
+					var warp = $(".preview-wrap .preview-restore-wrap .div-wrap");
+					var height = 0;
+					$(".draggable-element:lt(" + (element.index() + 1) + ")").each(function (i) {
+						height += $(this).outerHeight();
+					});
+					height -= element.outerHeight() + 30;
+					warp.animate({scrollTop: height}, 300);
+				}
+
+			});
+		}
+
+	}
+});
+
+// 自适应全屏宽高
+function fullScreenSize(isFull) {
+	var size = 139; // 公式：二级面包屑layui-header-crumbs-second （55px）+ 自定义模板区域上内边距diyview（20px） + 底部保存按钮（90px）
+
+	if (isFull) size = 75; // 顶部面包屑（55px） + 自定义模板区域上内边距diyview（20px）
+	var commonHeight = $(window).height() - size;
+	['.preview-wrap .preview-restore-wrap .div-wrap'].forEach(function (obj) {
+		$(obj).css("height", (commonHeight) + "px");
+	});
+	$('.loading-layer').css('height', (commonHeight - 70) + "px"); // 70px是头部高度
+	$(".component-list nav").css("height", (commonHeight + 20 - 55) + "px");// 20px是自定义模板区域上内边距，55px是标准/第三方组件tab切换高度
+	$(".edit-attribute .attr-wrap").css("height", (commonHeight - 1) + "px");// 1px是上边框
+	$(".preview-block").css("min-height", (commonHeight - 104) + "px"); // 公式：高度 - 自定义模板区域上内边距（20px） - 自定义模板区域下外编辑（20px）- 自定义模板头部（64px）
+}
+
+var form, repeat_flag = false;//防重复标识
+layui.use(['form'], function () {
+	form = layui.form;
+	form.render();
+
+	fullScreenSize();
+
+	if ($("#info").val()) {
+		vue.refreshComponent();
+	} else {
+		if($("#title").val()) vue.global.title = $("#title").val();
+		vue.globalLazyLoad = true;
+	}
+
+	// 标准/第三方组件切换
+	$("body").off("click", ".component-list .tab span").on("click", ".component-list .tab span", function () {
+		var type = $(this).attr("data-type");
+		$('.component-list h3').hide();
+		$('.component-list ul').hide();
+		if(type === 'EXTEND'){
+			$('.component-list h3[data-type="EXTEND"]').show();
+			$('.component-list ul[data-type="EXTEND"]').show();
+		}else{
+			$('.component-list h3[data-type!="EXTEND"]').show();
+			$('.component-list ul[data-type!="EXTEND"]').show();
+		}
+		$(this).addClass('selected').siblings().removeClass('selected');
+	});
+
+	// 组件列表
+	$("body").off("click", ".component-list h3").on("click", ".component-list h3", function () {
+		var index = $(this).attr("data-index");
+		var ul = $(".component-list ul[data-index='" + index + "']");
+		if (ul.height()) {
+			$(this).find("img").attr("src", ns_url.staticExt + "/diyview/img/component_right.png");
+			if (!ul.attr("data-height")) ul.attr("data-height", ul.height());
+			ul.animate({opacity: 0, height: 0}, 100);
+		} else {
+			$(this).find("img").attr("src", ns_url.staticExt + "/diyview/img/component_down.png");
+			ul.animate({opacity: 1, height: ul.attr("data-height") + "px"}, 100);
+		}
+	});
+
+	$("body").off("click", ".edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span").on("click", ".edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span", function () {
+		$(this).addClass('active bg-color').siblings().removeClass('active bg-color');
+		var type = $(this).attr('data-type');
+		$(this).parent().parent().parent().find('.edit-content-wrap').hide();
+		$(this).parent().parent().parent().find('.edit-style-wrap').hide();
+		$(this).parent().parent().parent().find(`.edit-${type}-wrap`).show();
+	});
+
+	// 处理全屏切换事件
+	// 事件开始，通过添加顶级样式控制按钮相关展示
+
+	// 底部全屏按钮，隐藏菜单，添加顶级样式，top-full-screen
+	$('body').off('click', '.full-screen-btn').on('click', '.full-screen-btn', function () {
+		$('body').find('.layui-header').hide(); //顶部菜单
+		$('body').find('.layui-side').hide(); //侧边菜单
+		$('body').find('.layui-layout-admin .crumbs').hide(); //面包屑
+
+		$('body').addClass('top-full-screen'); //添加顶级样式，处理大板块结构
+
+		// 隐藏底部按钮，放开头部按钮
+		$('body').find('.js-bottom-custom-save').hide(); //底部按钮隐藏
+		$('body').find('.js-top-custom-save').removeClass('layui-hide'); //顶部按钮放开
+
+		$('body').find('.main-contact').hide(); //全屏右侧帮助不展示
+
+		// 全屏需处理适应大小
+		fullScreenSize(true);
+	});
+
+	// 顶部恢复按钮，与底部按钮完全相反
+	$('body').off('click', '.cancel-btn').on('click', '.cancel-btn', function () {
+		$('body').find('.layui-header').show(); //顶部菜单
+		$('body').find('.layui-side').show(); //侧边菜单
+		$('body').find('.layui-layout-admin .crumbs').show(); //面包屑
+
+		$('body').removeClass('top-full-screen'); //添加顶级样式，处理大板块结构
+
+		// 隐藏底部按钮，放开头部按钮
+		$('body').find('.js-bottom-custom-save').show(); //底部按钮隐藏
+		$('body').find('.js-top-custom-save').addClass('layui-hide'); //顶部按钮放开
+
+		// 全屏需处理适应大小
+		fullScreenSize();
+	});
+
+	/**
+	 * 绑定拖拽事件
+	 */
+	$('.preview-block').DDSort({
+
+		//拖拽数据源
+		target: '.draggable-element',
+
+		//拖拽时显示的样式
+		floatStyle: {
+			'border': '1px solid',
+			'background-color': '#ffffff'
+		},
+
+		//设置可拖拽区域
+		draggableArea: "preview-draggable",
+
+		//拖拽中，隐藏右侧编辑属性栏
+		move: function (index) {
+			var curr = $(".draggable-element[data-index='" + index + "'] .edit-attribute");
+			if (curr.attr("data-have-edit") == 1) curr.hide();
+		},
+
+		//拖拽结束后，选择当前拖拽，并且显示右侧编辑属性栏，刷新数据
+		up: function (beforeIndex,afterIndex) {
+			var temp = [];
+			$('.draggable-element').each(function (index) {
+				var dIndex = $(this).attr('data-index');
+				temp[index] = vue.deepClone(vue.data[dIndex]);
+			});
+
+			temp.forEach(function (item, index) {
+				item.index = index;
+				item.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
+				vue.$set(vue.data, index, item)
+			});
+
+			vue.currentIndex = afterIndex;
+			$(".draggable-element.selected .edit-attribute").show();
+
+		}
+	});
+
+	// 保存
+	$("button.save").click(function () {
+
+		// 刷新排序
+		vue.refresh();
+		setTimeout(function () {
+
+			if (vue.verify()) {
+
+				//全局属性
+				var global = JSON.stringify(vue.global);
+
+				global = eval("(" + global + ")");
+
+				//组件属性
+				var value = JSON.stringify(vue.data); // .replace(/\@/g, "");
+
+				value = JSON.parse(value);
+
+				//重新排序
+				value.sort(function (a, b) {
+					return a.sort - b.sort;
+				});
+
+				for (var k in value) {
+					value[k].ignore.forEach((item, index) => {
+						if (item.indexOf('margin') !== -1) delete value[k].margin[item.split('margin')[1].toLowerCase()];
+						else delete value[k][item];
+					});
+					delete value[k].ignore;
+					// delete value[k].hidden;
+					delete value[k].ignoreLoad;
+					delete value[k].verify;
+					delete value[k].lazyLoad;
+					delete value[k].lazyLoadCss;
+					delete value[k].index;
+					delete value[k].sort;
+					delete value[k].outerCountJs;
+					delete value[k].tempData; // 临时数据
+				}
+
+				var v = {
+					global: global,
+					value: value
+				};
+
+				// console.log(v);
+				// console.log(JSON.stringify(v));
+				// return false;
+
+				if (repeat_flag) return;
+				repeat_flag = true;
+
+				$.ajax({
+					type: "post",
+					url: ns.url(requestUrl),
+					data: {
+						id: $("#id").val(),
+						name: $("#name").val(),
+						template_id: $("#template_id").val(),
+						page_type: $("#page_type").val(), // 页面类型
+						title: vue.global.title,
+						value: JSON.stringify(v), // .replace(/\'/g, "@")
+						site_id: ns_url.siteId,
+						app_module: ns_url.appModule
+					},
+					dataType: "JSON",
+					success: function (res) {
+						layer.msg(res.message);
+						if (res.code == 0) {
+
+							if ($("#id").val() || $("#name").val().indexOf('DIY_VIEW_RANDOM_') == -1) {
+								repeat_flag = false;
+							} else {
+								location.hash = ns.hash("shop/diy/lists");
+							}
+						} else {
+							repeat_flag = false;
+						}
+					}
+				});
+			}
+		}, 100);
+	});
+
+});
+
+// 预览
+function preview() {
+	window.open(ns.url('index/index/h5preview', {id: $('#id').val(), type: 'page'}));
+}

public/static/ext/diyview/js/ddsort.js

@@ -0,0 +1,247 @@
+;(function ($) {
+	/**
+	 * Author: https://github.com/Barrior
+	 *
+	 * DDSort: drag and drop sorting.
+	 * @param {Object} options
+	 *        target[string]:        可选，jQuery事件委托选择器字符串，默认'li'
+	 *        cloneStyle[object]:    可选，设置占位符元素的样式
+	 *        floatStyle[object]:    可选，设置拖动元素的样式
+	 *        down[function]:        可选，鼠标按下时执行的函数
+	 *        move[function]:        可选，鼠标移动时执行的函数
+	 *        up[function]:        可选，鼠标抬起时执行的函数
+	 *        draggableArea[string]:可选，设置可拖拽的区域
+	 */
+	$.fn.DDSort = function (options) {
+		var $doc = $(document),
+			fnEmpty = function () {
+			},
+
+			settings = $.extend(true, {
+
+				down: fnEmpty,
+				move: fnEmpty,
+				up: fnEmpty,
+
+				target: 'li',
+				cloneStyle: {
+					'background-color': '#f7f8fa'
+				},
+				floatStyle: {
+					//用固定定位可以防止定位父级不是Body的情况的兼容处理，表示不兼容IE6，无妨
+					'position': 'fixed',
+					'box-shadow': '10px 10px 20px 0 #eee',
+					/*'webkitTransform': 'rotate(4deg)',
+					'mozTransform': 'rotate(4deg)',
+					'msTransform': 'rotate(4deg)',
+					'transform': 'rotate(4deg)'*/
+				},
+				draggableArea: ''
+
+			}, options);
+
+		return this.each(function () {
+
+			var that = $(this),
+				height = 'height',
+				width = 'width';
+
+			if (that.css('box-sizing') == 'border-box') {
+				height = 'outerHeight';
+				width = 'outerWidth';
+			}
+
+			var time; // 监听长按时间
+			var progress = 0; // 记录长按时长
+			that.on('mousedown.DDSort', settings.target, function (e) {
+				//只允许鼠标左键拖动
+				if (e.which != 1) {
+					return;
+				}
+				//防止表单元素失效
+				var tagName = e.target.tagName.toLowerCase();
+				if (tagName == 'input' || tagName == 'textarea' || tagName == 'select' || $(e.target).attr('stop-ddsort')) {
+					return;
+				}
+
+				// 记录长按时长
+				time = setInterval(() => {
+					progress++
+				}, 125);
+
+				var THIS = this,
+					$this = $(THIS),
+					offset = $this.offset(),
+					disX = e.pageX - offset.left,
+					disY = e.pageY - offset.top,
+
+					clone = $this.clone()
+						.css(settings.cloneStyle)
+						.css('height', $this[height]())
+						.empty(),
+
+					hasClone = 1,
+
+					//缓存计算
+					thisOuterHeight = $this.outerHeight(),
+					thatOuterHeight = that.outerHeight(),
+
+					//滚动速度
+					upSpeed = thisOuterHeight,
+					downSpeed = thisOuterHeight,
+					maxSpeed = thisOuterHeight * 3;
+
+				if (settings.draggableArea != "") {
+					//判断当前点击的DOM是否允许拖拽
+					var isDraggable = recursiveQuery($(e.target), settings.draggableArea);
+					// 特殊处理：带有该属性的禁用
+					if ($(e.target).parent().attr("data-disabled") || $(e.target).attr("data-disabled")) {
+						return;
+					}
+					if (!isDraggable) {
+						return;
+					}
+				}
+
+				var downIndex = $(THIS).index();
+				settings.down.call(THIS, downIndex);
+
+				$doc.on('mousemove.DDSort', function (e) {
+					if (progress === 0) return; // 如果没有长按则不能拖拽
+					if (hasClone) {
+						$this.before(clone)
+							.css('width', $this[width]())
+							.css(settings.floatStyle)
+							.appendTo($this.parent());
+
+						hasClone = 0;
+					}
+
+					var left = e.pageX - disX,
+						top = e.pageY - disY,
+
+						prev = clone.prev(),
+						next = clone.next().not($this);
+
+					var gap = $(window).scrollTop();
+					var calculate = top - gap;
+
+					//检测是否滚动了
+					top = ((top - $(window).scrollTop()) != top) ? calculate : top;
+
+					$this.css({
+						left: left,
+						top: top,
+						zIndex: 999
+					});
+
+					//向上排序
+					if (prev.length && top < (prev.offset().top - gap) + prev.outerHeight() / 2) {
+
+						clone.after(prev);
+
+						//向下排序
+					} else if (next.length && top + thisOuterHeight > (next.offset().top - gap) + next.outerHeight() / 2) {
+
+						clone.before(next);
+
+					}
+
+					/**
+					 * 处理滚动条
+					 * that是带着滚动条的元素，这里默认以为that元素是这样的元素（正常情况就是这样），如果使用者事件委托的元素不是这样的元素，那么需要提供接口出来
+					 */
+					var thatScrollTop = that.scrollTop(),
+						thatOffsetTop = that.offset().top,
+						scrollVal;
+
+					//向上滚动
+					if (top < thatOffsetTop) {
+
+						downSpeed = thisOuterHeight;
+						upSpeed = ++upSpeed > maxSpeed ? maxSpeed : upSpeed;
+						scrollVal = thatScrollTop - upSpeed;
+
+						//向下滚动
+					} else if (top + thisOuterHeight - thatOffsetTop > thatOuterHeight) {
+
+						upSpeed = thisOuterHeight;
+						downSpeed = ++downSpeed > maxSpeed ? maxSpeed : downSpeed;
+						scrollVal = thatScrollTop + downSpeed;
+					}
+
+					that.scrollTop(scrollVal);
+
+					var index = recursiveQueryIndex($(THIS));
+					settings.beforeIndex = index; // 当前拖拽元素
+					settings.move.call(THIS, index);
+
+				})
+					.on('mouseup.DDSort', function () {
+						clearInterval(time);
+						progress = 0;
+						$doc.off('mousemove.DDSort mouseup.DDSort');
+
+						//click的时候也会触发mouseup事件，加上判断阻止这种情况
+						if (!hasClone) {
+							clone.before($this.removeAttr('style')).remove();
+							settings.afterIndex = $this.index();
+							settings.up.call(THIS, settings.beforeIndex, settings.afterIndex);
+						}
+					});
+
+				return false;
+			});
+		});
+	};
+
+	//当前递归次数
+	var currentRecursiveCount = 0;
+
+	//最大递归次数
+	var recursiveMaxCount = 20;
+
+	/**
+	 * 递归查询当前区域是否允许拖拽
+	 */
+	function recursiveQuery(o, draggableArea) {
+		if (o.hasClass(draggableArea)) {
+			//允许拖拽，清空递归次数
+			currentRecursiveCount = 0;
+			// console.log($(o));
+			return true;
+		} else {
+			if (currentRecursiveCount <= recursiveMaxCount) {
+				currentRecursiveCount++;
+				return recursiveQuery(o.parent(), draggableArea);
+			} else {
+				//清空递归次数
+//				console.log("清空递归次数");
+				currentRecursiveCount = 0;
+				return false;
+			}
+		}
+	}
+
+	/**
+	 * 递归查询当前拖拽的下标
+	 */
+	function recursiveQueryIndex(o) {
+		if (o.hasClass("draggable-element")) {
+			//允许拖拽，清空递归次数
+			currentRecursiveCount = 0;
+			return $(o).attr("data-index");
+		} else {
+			if (currentRecursiveCount <= recursiveMaxCount) {
+				currentRecursiveCount++;
+				return recursiveQueryIndex(o.parent());
+			} else {
+				//清空递归次数
+				// console.log("清空递归次数");
+				currentRecursiveCount = 0;
+				return -1;
+			}
+		}
+	}
+
+})(jQuery);

public/static/ext/diyview/js/link.js

@@ -0,0 +1,796 @@
+var form, laytpl;
+var goodsLink = ['ALL_GOODS', 'PINTUAN_GOODS', 'PINFAN_GOODS', 'GROUPBUY_GOODS', 'DISTRIBUTION_GOODS', 'BARGAIN_GOODS', 'PRESALE_GOODS','BUNDING_GOODS'];
+layui.use(['form', 'laytpl'], function () {
+	form = layui.form;
+	laytpl = layui.laytpl;
+	setTimeout(function () {
+		if (selectLink.name) {
+			// 编辑赋值
+			$('.link-box .link-left dd.text-color').click();
+		} else if (selectLink.parent && goodsLink.indexOf(selectLink.parent) !== -1) {
+			// 如果选择了商品
+			$('.link-box .link-left dd[data-name="' + selectLink.parent + '"]').click();
+		} else {
+			// 默认选中第一个
+			$('.link-box .link-left dd:eq(0)').click();
+		}
+	}, 100);
+});
+
+/**
+ * 查询子级链接
+ * @param name
+ */
+function getLinkInfo(name) {
+	try {
+		$('.link-box .link-right.js-system dl').hide();
+		var linkList = $('.link-box .link-right.js-system dl[data-parent="' + name + '"]');
+		linkList.show();
+		if (linkList.length === 0) childLinkCallback(name); // 触发选择子级链接回调
+	} catch (e) {
+		console.log('childLinkCallback error', e);
+	}
+}
+
+// 展开收缩自定义链接
+$(".link-box .link-left dt").click(function () {
+	if ($(this).hasClass("active")) {
+		$(this).removeClass("active");
+		$(this).parent("dl").find("dd").removeClass("layui-hide");
+	} else {
+		$(this).addClass("active");
+		$(this).parent("dl").find("dd").addClass("layui-hide");
+	}
+
+	if ($(this).parent("dl").find("dd").length === 0) {
+		$(".link-box .link-left dd,.link-box .link-left dt").removeClass("text-color");
+		$(this).addClass("text-color");
+	}
+});
+
+// 选择左侧父级链接
+$('.link-box .link-left dd').click(function () {
+	$('.link-box .link-left dd').removeClass("text-color");
+	$(this).addClass("text-color");
+	var name = $(this).attr('data-name');
+	switch (name) {
+		case 'CUSTOM_LINK':
+			// 自定义链接，支持外链
+			var data = JSON.parse(JSON.stringify(selectLink));
+			if(data.parent !=='CUSTOM_LINK') {
+				data.title = '';
+				data.wap_url = '';
+			}
+			laytpl($('#customHtml').html()).render(data, function (html) {
+				$(".link-right.js-system").hide();
+				$(".link-right.js-extend").html(html).show();
+			});
+			break;
+		case 'OTHER_APPLET':
+			// 跳转小程序
+			laytpl($('#appletHtml').html()).render(selectLink, function (html) {
+				$(".link-right.js-system").hide();
+				$(".link-right.js-extend").html(html).show();
+			});
+			break;
+		case 'MOBILE':
+			// 拨打手机号
+			laytpl($('#mobileHtml').html()).render(selectLink, function (html) {
+				$(".link-right.js-system").hide();
+				$(".link-right.js-extend").html(html).show();
+			});
+			break;
+		default:
+			$(".link-right.js-extend").hide();
+			$(".link-right.js-system").show();
+			getLinkInfo(name);
+			break;
+	}
+
+});
+
+$("body").off("click", ".link-box .link-right dd").on("click", ".link-box .link-right dd", function () {
+	$(".link-box .link-right dd").removeClass("border-color text-color");
+	$(this).addClass("border-color text-color");
+});
+
+//清空
+$(".link-btn .link-eliminate").click(function () {
+	window.linkData = {name:'',title:'',wap_url:'',parent:''};
+	layer.close(window.linkIndex);
+});
+
+// 取消
+$(".link-btn .link-cancel").click(function () {
+	layer.close(window.linkIndex);
+});
+
+// 保存
+$(".link-box .link-save").click(function () {
+	var value = {};
+	var dd = $(".link-box .link-right dd.border-color"); // 子级链接
+	var parentLink = $('.link-box .link-left dd.text-color'); // 父级链接
+
+	// 标准链接
+	if (dd.length) {
+		value = {
+			name: dd.attr('data-name'),
+			title: dd.text(),
+			wap_url: dd.attr('data-wap-url')
+		};
+	}
+
+	// 自定义链接
+	if (parentLink.attr('data-name') === 'CUSTOM_LINK') {
+		var title = $(".custom-link input[name='title']").val();
+		var wap_url = $(".custom-link input[name='wap_url']").val();
+		if (!title) {
+			layer.msg("链接名称不能为空");
+			return;
+		}
+
+		if (!wap_url) {
+			layer.msg("跳转路径不能为空");
+			return;
+		}
+
+		value = {
+			name: parentLink.attr('data-name'),
+			title: title,
+			wap_url: wap_url
+		};
+	}
+
+	// 跳转小程序
+	if (parentLink.attr('data-name') === 'OTHER_APPLET') {
+		var appid = $(".other-applet input[name='appid']").val();
+		var page = $(".other-applet input[name='page']").val();
+		if (!appid) {
+			layer.msg("跳转微信小程序的appid不能为空");
+			return;
+		}
+		if (!page) {
+			layer.msg("微信小程序路径不能为空");
+			return;
+		}
+		value = {
+			name: parentLink.attr('data-name'),
+			title: '微信小程序-' + appid,
+			appid: appid,
+			page: page
+		};
+	}
+
+	if (parentLink.attr('data-name') === 'MOBILE') {
+		var mobile = $(".call-mobile input[name='mobile']").val();
+		if (!mobile) {
+			layer.msg("电话号码不能为空");
+			return;
+		}
+		value = {
+			name: parentLink.attr('data-name'),
+			title: '拨打电话：' + mobile,
+			mobile: mobile
+		};
+	}
+
+	try {
+		value = beforeSaveCallback(value); // 保存前处理数据的回调
+	} catch (e) {
+		console.log('saveCallback error', e);
+	}
+	if (Object.keys(value).length) {
+		value.parent = parentLink.attr('data-name');
+		window.linkData = value;
+	}
+	layer.close(window.linkIndex);
+});
+
+/**
+ * 触发选择子级链接回调
+ * @param name
+ */
+function childLinkCallback(name) {
+	if (name === 'GOODS_CATEGORY') {
+		// 商品分类
+		var html = `<div id="goods_category_list"></div>`;
+		$(".link-right.js-extend").html(html).show();
+		$(".link-right.js-system").hide();
+		getGoodsCategory();
+	} else if (goodsLink.indexOf(name) !== -1) {
+		if(name == "BUNDING_GOODS"){
+			var placeholder = "请输入套餐名称"
+		}else{
+			var placeholder = "请输入商品名称"
+		}
+		var html = "<div class='search'>";
+		html += `<input name='search_text' class='layui-input search-input layui-input-inline len-mid' placeholder='`+placeholder+`' onkeyup="if(event.keyCode === 13) getGoodsList('${name}') " />`;
+		html += `<button onclick="getGoodsList('${name}')" class='layui-btn'>搜索</button>`;
+		html += "</div>";
+		html += `<table id="goods_list" lay-filter="goods_list"></table>`;
+		$(".link-right.js-extend").html(html).show();
+		$(".link-right.js-system").hide();
+		getGoodsList(name);
+	} else if (['CARDS_GAME', 'TURNTABLE_GAME', 'EGG_GAME'].indexOf(name) !== -1) {
+		var html = `<table id="game_list" lay-filter="game_list"></table>`;
+		$(".link-right.js-extend").html(html).show();
+		$(".link-right.js-system").hide();
+		getGameList(name);
+	} else if (['DIY_FORM'].indexOf(name) !== -1) {
+		var html = `<table id="diy_form_list" lay-filter="diy_form_list"></table>`;
+		$(".link-right.js-extend").html(html).show();
+		$(".link-right.js-system").hide();
+		getDiyFormList(name);
+	} else if (name == 'CARDS_SERVICE_CATEGORY_LINK') {
+		var html = `<div id="service_category_list"></div>`;
+		$(".link-right.js-extend").html(html).show();
+		$(".link-right.js-system").hide();
+		getServiceCategoryList();
+	}else if(name == 'GOODS_CATEGORY_PAGE'){
+		var html = `<div id="goods_category_list"></div>`;
+		$(".link-right.js-extend").html(html).show();
+		$(".link-right.js-system").hide();
+		getGoodsCategoryPage()
+	}
+}
+
+/**
+ * 获取商品分类数据
+ */
+function getGoodsCategory() {
+	laytpl($("#goodsCategoryHtml").html()).render([], function (html) {
+		$("#goods_category_list").html(html);
+
+		//展开收齐点击事件
+		$(".js-switch").click(function () {
+			var category_id = $(this).attr("data-category-id");
+			var operation = $(this).attr("data-operation");
+			if (operation === 'off') {
+				$(".goods-category-list .layui-table tr[data-pid='" + category_id + "']").show();
+				$(this).text("-").attr("data-operation", 'on');
+			} else {
+				$(".goods-category-list .layui-table tr[data-pid='" + category_id + "']").hide();
+				$(this).text("+").attr("data-operation", 'off');
+			}
+		});
+
+		var category = $("input[name='category_id']:checked");
+		if (category.length) {
+			var pid = category.parent().parent().attr('data-pid');
+			if (pid) $(".js-switch[data-category-id='" + pid + "']").click();
+		}
+
+		// 勾选分类
+		form.on('checkbox(category_id)', function (data) {
+			if (data.elem.checked) {
+				$("input[name='category_id']:checked").prop("checked", false);
+				$(data.elem).prop("checked", true);
+				form.render();
+			}
+		});
+
+		form.render();
+	});
+
+}
+
+
+function getGoodsCategoryPage() {
+	laytpl($("#goodsCategoryPageHtml").html()).render([], function (html) {
+		$("#goods_category_list").html(html);
+		// 勾选分类
+		form.on('checkbox(category_id)', function (data) {
+			if (data.elem.checked) {
+				$("input[name='category_id']:checked").prop("checked", false);
+				$(data.elem).prop("checked", true);
+				form.render();
+			}
+		});
+		form.render();
+	});
+}
+
+
+/**
+ * 获取项目分类
+ * @param name
+ */
+function getServiceCategoryList() {
+	laytpl($("#serviceCategoryHtml").html()).render([], function (html) {
+		$("#service_category_list").html(html);
+
+		var category = $("input[name='service_category_id']:checked");
+
+		if (category.length) {
+			var pid = category.parent().parent().attr('data-pid');
+			if (pid) $(".js-switch[data-category-id='" + pid + "']").click();
+		}
+
+		// 勾选分类
+		form.on('checkbox(service_category_id)', function (data) {
+			if (data.elem.checked) {
+				$("input[name='service_category_id']:checked").prop("checked", false);
+				$(data.elem).prop("checked", true);
+				form.render();
+			}
+		});
+
+		form.render();
+	});
+
+}
+
+/**
+ * 获取商品列表
+ * @param name
+ */
+function getGoodsList(name) {
+	var promotion = '', goodsCols = [];
+	if (name === 'ALL_GOODS') {
+		promotion = 'all';
+		goodsCols = [
+			[
+				{
+					width: '8%',
+					templet: function (data) {
+						return `<input type="checkbox" name="goods_checkbox" value="${data.goods_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.goods_id == selectLink.goods_id ? 'checked' : ''} />`;
+					}
+				},
+				{
+					title: '商品',
+					width: '52%',
+					templet: '#goods_info'
+				},
+				{
+					field: 'price',
+					title: '价格',
+					width: '15%'
+				},
+				{
+					field: 'goods_stock',
+					title: '库存',
+					width: '15%'
+				}
+			]
+		];
+	} else if (name === "PINTUAN_GOODS") {
+		promotion = 'pintuan';
+		goodsCols = [
+			[{
+				unresize: 'false',
+				width: '8%',
+				templet: function (data) {
+					return `<input type="checkbox" name="goods_checkbox" value="${data.pintuan_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.pintuan_id == selectLink.pintuan_id ? 'checked' : ''} />`;
+				}
+			}, {
+				title: '拼团商品',
+				unresize: 'false',
+				width: '52%',
+				templet: '#goods_info'
+			}, {
+				field: 'pintuan_price',
+				title: '价格',
+				unresize: 'false',
+				width: '15%'
+			}, {
+				field: 'goods_stock',
+				title: '库存',
+				unresize: 'false',
+				width: '15%'
+			}]
+		];
+	} else if (name === "PINFAN_GOODS") {
+		promotion = 'pinfan';
+		goodsCols = [
+			[{
+				unresize: 'false',
+				width: '8%',
+				templet: function (data) {
+					return `<input type="checkbox" name="goods_checkbox" value="${data.pintuan_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.pintuan_id == selectLink.pinfan_id ? 'checked' : ''} />`;
+				}
+			}, {
+				title: '拼团返利',
+				unresize: 'false',
+				width: '52%',
+				templet: '#goods_info'
+			}, {
+				field: 'pintuan_price',
+				title: '价格',
+				unresize: 'false',
+				width: '15%'
+			}, {
+				field: 'goods_stock',
+				title: '库存',
+				unresize: 'false',
+				width: '15%'
+			}]
+		];
+	} else if (name === "GROUPBUY_GOODS") {
+		promotion = 'groupbuy';
+		goodsCols = [
+			[{
+				unresize: 'false',
+				width: '8%',
+				templet: function (data) {
+					return `<input type="checkbox" name="goods_checkbox" value="${data.groupbuy_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.groupbuy_id == selectLink.groupbuy_id ? 'checked' : ''} />`;
+				}
+			}, {
+				title: '团购商品',
+				unresize: 'false',
+				width: '52%',
+				templet: '#goods_info'
+			}, {
+				field: 'groupbuy_price',
+				title: '价格',
+				unresize: 'false',
+				width: '15%'
+			}, {
+				field: 'goods_stock',
+				title: '库存',
+				unresize: 'false',
+				width: '15%'
+			}]
+		];
+	} else if (name === "DISTRIBUTION_GOODS") {
+		promotion = 'fenxiao';
+		goodsCols = [
+			[{
+				unresize: 'false',
+				width: '8%',
+				templet: function (data) {
+					return `<input type="checkbox" name="goods_checkbox" value="${data.goods_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.goods_id == selectLink.goods_id ? 'checked' : ''} />`;
+				}
+			}, {
+				title: '分销商品',
+				unresize: 'false',
+				width: '52%',
+				templet: '#goods_info'
+			}, {
+				field: 'price',
+				title: '价格',
+				unresize: 'false',
+				width: '15%'
+			}, {
+				field: 'goods_stock',
+				title: '库存',
+				unresize: 'false',
+				width: '15%'
+			}]
+		]
+	} else if (name === "BARGAIN_GOODS") {
+		promotion = 'bargain';
+		goodsCols = [
+			[{
+				unresize: 'false',
+				width: '8%',
+				templet: function (data) {
+					return `<input type="checkbox" name="goods_checkbox" value="${data.bargain_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.bargain_id == selectLink.bargain_id ? 'checked' : ''} />`;
+				}
+			}, {
+				title: '砍价商品',
+				unresize: 'false',
+				width: '52%',
+				templet: '#goods_info'
+			}, {
+				field: 'price',
+				title: '价格',
+				unresize: 'false',
+				width: '15%'
+			}, {
+				field: 'goods_stock',
+				title: '库存',
+				unresize: 'false',
+				width: '15%'
+			}]
+		]
+	} else if (name === "PRESALE_GOODS") {
+		promotion = 'presale';
+		goodsCols = [
+			[{
+				unresize: 'false',
+				width: '8%',
+				templet: function (data) {
+					return `<input type="checkbox" name="goods_checkbox" value="${data.presale_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.presale_id == selectLink.presale_id ? 'checked' : ''} />`;
+				}
+			}, {
+				title: '预售商品',
+				unresize: 'false',
+				width: '45%',
+				templet: '#goods_info'
+			}, {
+				field: 'presale_name',
+				title: '活动名称',
+				unresize: 'false',
+				width: '30%'
+			}, {
+				field: 'presale_stock',
+				title: '库存',
+				unresize: 'false',
+				width: '15%'
+			}]
+		]
+	}else if (name === "BUNDING_GOODS") {
+		promotion = 'bundling';
+		console.log(selectLink)
+		goodsCols = [
+			[{
+				unresize: 'false',
+				width: '8%',
+				templet: function (data) {
+					return `<input type="checkbox" name="goods_checkbox" value="${data.bl_id}" data-goods-name="${data.bl_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.bl_id == selectLink.presale_id ? 'checked' : ''} />`;
+				}
+			}, {
+				field: 'bl_name',
+				title: '套餐名称',
+				unresize: 'false',
+				width: '45%',
+			}, {
+				field: 'bl_price',
+				title: '套餐价',
+				unresize: 'false',
+				width: '30%'
+			}, {
+				field: 'goods_money',
+				title: '商品总价',
+				unresize: 'false',
+				width: '15%'
+			}]
+		]
+	}
+
+	new Table({
+		elem: '#goods_list',
+		url: ns.url('shop/goods/goodsselect'),
+		where: {
+			site_id: ns_url.siteId,
+			app_module: ns_url.appModule,
+			promotion: promotion,
+			search_text: $("input[name='search_text']").val()
+		},
+		cols: goodsCols
+	});
+
+	// 选择商品
+	form.on('checkbox(goods_checkbox)', function (data) {
+		if (data.elem.checked) {
+			$("input[name='goods_checkbox']:checked").prop("checked", false);
+			$(data.elem).prop("checked", true);
+			form.render();
+		}
+	});
+}
+
+/**
+ * 获取小游戏
+ * @param name
+ */
+function getGameList(name) {
+	var addon_url = '';
+	if (name === 'CARDS_GAME') {
+		addon_url = ns.url('cards://shop/cards/lists', {
+			status: 1,
+			app_module: ns_url.appModule,
+			site_id: ns_url.siteId
+		});
+	} else if (name === 'TURNTABLE_GAME') {
+		addon_url = ns.url('turntable://shop/turntable/lists', {
+			status: 1,
+			app_module: ns_url.appModule,
+			site_id: ns_url.siteId
+		});
+	} else if (name === 'EGG_GAME') {
+		addon_url = ns.url('egg://shop/egg/lists', {status: 1, app_module: ns_url.appModule, site_id: ns_url.siteId});
+	}
+	var gameCols = [
+		[
+			{
+				unresize: 'false',
+				width: '8%',
+				templet: function (data) {
+					return `<input type="checkbox" name="game_checkbox" value="${data.game_id}" data-game-name="${data.game_name}" lay-skin="primary" lay-filter="game_checkbox" ${data.game_id == selectLink.game_id ? 'checked' : ''} />`;
+				}
+			},
+			{
+				field: 'game_name',
+				title: '游戏名称',
+				unresize: 'false',
+				width: '60%',
+			},
+			{
+				field: 'status',
+				title: '游戏状态',
+				unresize: 'false',
+				width: '30%',
+				templet: function (d) {
+					var status = '';
+					if (d.status == 0) {
+						status = '未开始';
+					} else if (d.status == 1) {
+						status = '进行中';
+					} else if (d.status == 2) {
+						status = '已结束';
+					} else if (d.status == 3) {
+						status = '已关闭';
+					}
+					return status;
+				}
+			}
+		]
+	];
+	new Table({
+		elem: '#game_list',
+		url: addon_url,
+		cols: gameCols
+	});
+
+	// 勾选小游戏
+	form.on('checkbox(game_checkbox)', function (data) {
+		if (data.elem.checked) {
+			$("input[name='game_checkbox']:checked").prop("checked", false);
+			$(data.elem).prop("checked", true);
+			form.render();
+		}
+	});
+
+}
+
+/**
+ * 获取小游戏
+ * @param name
+ */
+function getDiyFormList(name) {
+	var addon_url = ns.url('form://shop/form/lists', {
+		form_type: 'custom',
+		is_use: 1,
+		app_module: ns_url.appModule,
+		site_id: ns_url.siteId
+	});
+	var diyFormCols = [
+		[
+			{
+				unresize: 'false',
+				width: '10%',
+				templet: function (data) {
+					return `<input type="checkbox" name="diy_form_checkbox" value="${data.id}" data-form-name="${data.form_name}" lay-skin="primary" lay-filter="diy_form_checkbox" ${data.id == selectLink.form_id ? 'checked' : ''} />`;
+				}
+			},
+			{
+				field: 'form_name',
+				title: '表单名称',
+				unresize: 'false',
+				width: '80%',
+			}
+		]
+	];
+	new Table({
+		elem: '#diy_form_list',
+		url: addon_url,
+		cols: diyFormCols
+	});
+
+	// 勾选自定义表单
+	form.on('checkbox(diy_form_checkbox)', function (data) {
+		if (data.elem.checked) {
+			$("input[name='diy_form_checkbox']:checked").prop("checked", false);
+			$(data.elem).prop("checked", true);
+			form.render();
+		}
+	});
+
+}
+
+/**
+ * 保存前处理数据的回调
+ * @param oV 原链接
+ */
+function beforeSaveCallback(oV) {
+	var name = $('.link-box .link-left dd.text-color').attr('data-name');
+	var value = {};
+
+	// 选择商品分类
+	var category = $("input[name='category_id']:checked");
+	if (category.length) {
+		value.name = name;
+		if(name === "GOODS_CATEGORY_PAGE"){
+			value.wap_url = '/pages/goods/category?category_id=' + category.val();
+		}else{
+			value.wap_url = '/pages/goods/list?category_id=' + category.val();
+		}
+		value.title = category.attr('data-category-name');
+		value.category_id = category.val();
+	}
+
+	// 选择商品分类
+	var service_category = $("input[name='service_category_id']:checked");
+	if (service_category.length) {
+		value.name = name;
+		value.wap_url = '/pages_promotion/cardservice/service_goods/service_list?category_id=' + service_category.val();
+		value.title = service_category.attr('data-category-name');
+		value.service_category_id = service_category.val();
+	}
+
+	// 选择商品
+	var goods = $("input[name='goods_checkbox']:checked");
+	if (goods.length) {
+		value.name = name;
+		value.title = goods.attr('data-goods-name');
+		console.log(name)
+		console.log(goods.val())
+		switch (name) {
+			case 'BARGAIN_GOODS':
+				// 砍价商品
+				value.bargain_id = goods.val();
+				value.wap_url = '/pages_promotion/bargain/detail?b_id=';
+				break;
+			case 'GROUPBUY_GOODS':
+				// 团购商品
+				value.groupbuy_id = goods.val();
+				value.wap_url = '/pages_promotion/groupbuy/detail?groupbuy_id=';
+				break;
+			case 'PINTUAN_GOODS':
+				// 拼团商品
+				value.pintuan_id = goods.val();
+				value.wap_url = '/pages_promotion/pintuan/detail?pintuan_id=';
+				break;
+			case 'PINFAN_GOODS':
+				// 拼团返利商品
+				value.pinfan_id = goods.val();
+				value.wap_url = '/pages_promotion/pinfan/detail?pinfan_id=';
+				break;
+			case 'PRESALE_GOODS':
+				// 预售商品
+				value.presale_id = goods.val();
+				value.wap_url = '/pages_promotion/presale/detail?id=';
+				break;
+			case 'BUNDING_GOODS':
+				// 预售商品
+				value.presale_id = goods.val();
+				value.wap_url = '/pages_promotion/bundling/detail?bl_id=';
+				break;
+			default:
+				// 全部商品、分销商品
+				value.goods_id = goods.val();
+				value.wap_url = '/pages/goods/detail?goods_id=';
+				break;
+		}
+		value.wap_url += goods.val();
+	}
+
+	// 选择小游戏
+	var game = $("input[name='game_checkbox']:checked");
+	if(game.length) {
+		value.name = name;
+		value.wap_url = '';
+		value.title = game.attr('data-game-name');
+		value.game_id = game.val();
+
+		switch (name) {
+			case 'CARDS_GAME':
+				value.wap_url = '/pages_promotion/game/cards?id=';
+				break;
+			case 'TURNTABLE_GAME':
+				value.wap_url = '/pages_promotion/game/turntable?id=';
+				break;
+			case 'EGG_GAME':
+				value.wap_url = '/pages_promotion/game/smash_eggs?id=';
+				break;
+		}
+		value.wap_url += game.val();
+
+	}
+
+	// 选择自定义表单
+	var diyForm = $("input[name='diy_form_checkbox']:checked");
+	if(diyForm.length) {
+		value.name = name;
+		value.wap_url = '/pages_tool/form/form?id=';
+		value.title = diyForm.attr('data-form-name');
+		value.form_id = diyForm.val();
+		value.wap_url += diyForm.val();
+	}
+
+	// 如果没有选择以上链接，则还原最初链接
+	if (Object.keys(value).length === 0) value = oV;
+
+	return value;
+}

public/static/ext/diyview/js/shop_bottom_nav.js

@@ -0,0 +1,581 @@
+/**
+ * 底部导航·组件
+ */
+var bottomMenuHtml = '<div class="bottom-menu-config">';
+		bottomMenuHtml += '<div class="template-edit-title">';
+			bottomMenuHtml += '<h3>导航样式设置</h3>';
+			bottomMenuHtml += '<div class="layui-form-item icon-radio">';
+				bottomMenuHtml += '<label class="layui-form-label sm">导航类型</label>';
+				bottomMenuHtml += '<div class="layui-input-block">';
+					bottomMenuHtml += '<template v-for="(item, index) in typeList">';
+						bottomMenuHtml += '<span :class="[item.value == data.type ? \'\' : \'layui-hide\']">{{item.label}}</span>';
+					bottomMenuHtml += '</template>';
+					bottomMenuHtml += '<ul class="icon-wrap">';
+						bottomMenuHtml += '<li v-for="(item, index) in typeList" :class="{\'text-color border-color\':data.type==item.value}" @click="data.type=item.value">';
+							bottomMenuHtml += '<i :class="[\'iconfont\',item.src,{\'text-color\':data.type==item.value}]"></i>';
+						bottomMenuHtml += '</li>';
+					bottomMenuHtml += '</ul>';
+				bottomMenuHtml += '</div>';
+			bottomMenuHtml += '</div>';
+
+			bottomMenuHtml += '<div class="layui-form-item">';
+				bottomMenuHtml += '<label class="layui-form-label sm">色调</label>';
+				bottomMenuHtml += '<div class="layui-input-block">';
+					bottomMenuHtml += '<div @click="switchTheme(\'default\')" :class="{ \'layui-unselect layui-form-radio\' : true,\'layui-form-radioed\' : ($parent.data.theme == \'default\') }">';
+						bottomMenuHtml += '<i class="layui-anim layui-icon">{{ $parent.data.theme == \'default\' ? \'&#xe643;\' : \'&#xe63f;\' }}</i>';
+						bottomMenuHtml += '<div>跟随主题风格</div>';
+					bottomMenuHtml += '</div>';
+					bottomMenuHtml += '<div @click="switchTheme(\'diy\')" :class="{ \'layui-unselect layui-form-radio\' : true,\'layui-form-radioed\' : ($parent.data.theme == \'diy\') }">';
+						bottomMenuHtml += '<i class="layui-anim layui-icon">{{ $parent.data.theme == \'diy\' ? \'&#xe643;\' : \'&#xe63f;\' }}</i>';
+						bottomMenuHtml += '<div>自定义</div>';
+					bottomMenuHtml += '</div>';
+				bottomMenuHtml += '</div>';
+			bottomMenuHtml += '</div>';
+
+			bottomMenuHtml += '<div v-show="$parent.data.theme==\'diy\'">';
+				bottomMenuHtml += '<color :data="{ field: \'backgroundColor\', label: \'背景颜色\' }"></color>';
+				bottomMenuHtml += '<color v-show="$parent.data.type == 1 || $parent.data.type == 3"></color>';
+				bottomMenuHtml += '<color :data="{ field: \'textHoverColor\', label: \'文字选中\' }" v-show="$parent.data.type == 1 || $parent.data.type == 3"></color>';
+			bottomMenuHtml += '</div>';
+		bottomMenuHtml += '</div>';
+
+		bottomMenuHtml += '<div class="template-edit-title">';
+			bottomMenuHtml += '<h3>导航内容设置</h3>';
+		bottomMenuHtml += '</div>';
+
+		bottomMenuHtml += '<ul class="bottom-menu-set">';
+			bottomMenuHtml += '<li v-for="(item,index) in menuList" :key="item.id">';
+
+				bottomMenuHtml += '<div class="content-block">';
+
+					bottomMenuHtml += '<div class="layui-form-item" v-show="$parent.data.type != 3">';
+						bottomMenuHtml += '<label class="layui-form-label sm">图标</label>';
+						bottomMenuHtml += '<div class="layui-input-block">';
+							bottomMenuHtml += '<div class="image-block">';
+								bottomMenuHtml += '<icon-upload :data="{ data : item, field : \'iconPath\'}" ></icon-upload>';
+								bottomMenuHtml += '<icon-upload :data="{ data : item, field : \'selectedIconPath\'}" ></icon-upload>';
+							bottomMenuHtml += '</div>';
+						bottomMenuHtml += '</div>';
+					bottomMenuHtml += '</div>';
+
+					bottomMenuHtml += '<div class="layui-form-item" v-show="$parent.data.type == 1 || $parent.data.type == 3">';
+						bottomMenuHtml += '<label class="layui-form-label sm">标题</label>';
+						bottomMenuHtml += '<div class="layui-input-block">';
+							bottomMenuHtml += '<input type="text" name=\'text\' v-model="item.text" maxlength="5" @keyup="listenText(index,item.text)" class="layui-input" />';
+						bottomMenuHtml += '</div>';
+					bottomMenuHtml += '</div>';
+
+					bottomMenuHtml += '<nc-link :data="{ field : $parent.data.list[index].link, label:\'链接\' }"></nc-link>';
+				bottomMenuHtml += '</div>';
+
+				bottomMenuHtml += '<i class="del" @click="menuList.splice(index,1)" data-disabled="1">x</i>';
+
+				bottomMenuHtml += '<div class="error-msg"></div>';
+				bottomMenuHtml += '<div class="iconfont icontuodong"></div>';
+			bottomMenuHtml += '</li>';
+
+		bottomMenuHtml += '</ul>';
+
+		bottomMenuHtml += '<div class="add-item text-color" v-if="showAddItem" @click="addMemu">';
+			bottomMenuHtml += '<i>+</i>';
+			bottomMenuHtml += '<span>添加一个图文导航</span>';
+		bottomMenuHtml += '</div>';
+
+		bottomMenuHtml += '<p class="hint">建议上传比例相同的图片，最多添加 {{maxTip}} 个底部导航</p>';
+
+	bottomMenuHtml += '</div>';
+
+Vue.component("bottom-menu", {
+	
+	template: bottomMenuHtml,
+	data: function () {
+		
+		return {
+			data: this.$parent.data,
+			typeList: [
+				{
+					label: "图文",
+					value: 1,
+					src: "icontuwendaohang1",
+				},
+				{
+					label: "图片",
+					value: 2,
+					src: "icontuwendaohang",
+				},
+				{
+					label: "文字",
+					value: 3,
+					src: "iconchunwenzidaohang",
+				},
+			],
+			menuList: this.$parent.data.list,
+			showAddItem: true,
+			maxTip: 5,
+		};
+		
+	},
+	created: function () {
+		this.changeShowAddItem();
+
+		this.menuList.forEach(function(e, i){
+			if(!e.id ) e.id = ns.gen_non_duplicate(6);
+		});
+		this.$parent.data.list = this.menuList;
+
+		var moveBeforeIndex = 0;
+		var _this = this;
+
+		setTimeout(function(){
+			$( '.edit-attribute .bottom-menu-set' ).DDSort({
+			    // target: 'li',
+			    floatStyle: {
+			        'border': '1px solid #ccc',
+			        'background-color': '#fff'
+			    },
+			    down: function(index){
+			    	moveBeforeIndex = index;
+			    },
+				move: function (){
+				},
+			    up: function(){
+					var index = $(this).index();
+			    	var temp = _this.menuList[moveBeforeIndex];
+			    	_this.menuList.splice(moveBeforeIndex, 1);
+			    	_this.menuList.splice(index, 0, temp);
+		    		_this.$parent.data.list = _this.menuList;
+					_this.$forceUpdate();
+			    }
+			});
+		}, 500)
+	},
+	
+	methods: {
+		switchTheme: function (theme) {
+			this.$parent.data.theme = theme;
+			this.$parent.data.backgroundColor = "#ffffff";
+			this.$parent.data.textColor = "#333333";
+			this.$forceUpdate();
+		},
+		listenText: function (index, text) {
+			if (text.length > 6) {
+				this.data.list[index].text = this.data.list[index].text.substr(0, 5);
+				layer.msg("字数不能超出5位");
+			}
+		},
+		
+		//改变图文导航按钮的显示隐藏
+		changeShowAddItem: function () {
+			if (this.menuList.length >= this.maxTip) this.showAddItem = false;
+			else this.showAddItem = true;
+		},
+		addMemu(){
+			this.menuList.push({
+				iconPath: '',
+				selectedIconPath: '',
+				text: '菜单',
+				link: {},
+				iconClass : '',
+				style: null,
+				selected_style: null,
+				id: ns.gen_non_duplicate(6)
+			})
+		}
+	},
+	
+	watch: {
+		menuList: function () {
+			this.changeShowAddItem();
+		}
+	}
+});
+
+var iconHtml = '<div class="icon-block layui-form" :id="id">';
+
+	iconHtml += '<div v-if="data.field == \'iconPath\'">';
+		iconHtml += '<template v-if="!myData.data[data.field]">';
+			iconHtml += '<div class="icon-box">';
+				iconHtml += '<div class="select-icon" v-if="myData.data[data.field] == \'\'" @click="uploadImg(\'icon_type\')">';
+				iconHtml += '<span class="add">+</span>';
+				iconHtml += '</div>';
+			iconHtml += '</div>';
+		iconHtml += '</template>';
+		iconHtml += '<template v-else>';
+			iconHtml += '<template v-if="myData.data.icon_type == \'icon\'">';
+				iconHtml += '<div class="icon-box">';
+					iconHtml += '<iconfont :icon="myData.data[data.field]" :value="myData.data.style ? myData.data.style : null"></iconfont>';
+					iconHtml += '<div class="operation">';
+						iconHtml += '<div class="operation-warp">';
+							iconHtml += '<i title="图片预览" class="iconfont iconreview js-preview"></i>';
+							iconHtml += '<i title="删除图标" class="layui-icon layui-icon-delete" @click="deleteIcon()"></i>';
+						iconHtml += '</div>';
+						iconHtml += '<div @click="uploadImg(\'icon_type\')" class="js-replace">点击替换</div>';
+					iconHtml += '</div>';
+				iconHtml += '</div>';
+				iconHtml += '<div class="action-box">';
+					iconHtml += '<div class="action" @click="iconStyle($event, \'style\')"><i class="iconfont iconpifu"></i></div>';
+					iconHtml += '<div class="action" @click="selectColor(\'color-\' + data.field+id, \'style\')" :id="\'color-\' + data.field+id"><i class="iconfont iconyanse"></i></div>';
+				iconHtml += '</div>';
+			iconHtml += '</template>';
+
+			iconHtml += '<template v-if="myData.data.icon_type == \'img\'">';
+				iconHtml += '<div class="upload-box">';
+					iconHtml += '<img :layer-src="img(myData.data[data.field])" :src="img(myData.data[data.field])" class="img_prev"/>';
+					iconHtml += '<div class="operation">';
+						iconHtml += '<div class="operation-warp">';
+							iconHtml += '<i title="图片预览" class="iconfont iconreview js-preview" @click="previewImg()"></i>';
+							iconHtml += '<i title="删除图片" class="layui-icon layui-icon-delete js-delete" @click="deleteImg()"></i>';
+						iconHtml += '</div>';
+						iconHtml += '<div @click="uploadImg(\'icon_type\')" class="js-replace">点击替换</div>';
+					iconHtml += '</div>';
+				iconHtml += '</div>';
+			iconHtml += '</template>';
+		iconHtml += '</template>';
+	iconHtml += '</div>';
+
+	iconHtml += '<div v-if="data.field == \'selectedIconPath\'">';
+		iconHtml += '<template v-if="!myData.data[data.field]">';
+			iconHtml += '<div class="icon-box">';
+				iconHtml += '<div class="select-icon" v-if="myData.data[data.field] == \'\'" @click="uploadImg(\'selected_icon_type\')">';
+				iconHtml += '<span class="add">+</span>';
+				iconHtml += '</div>';
+			iconHtml += '</div>';
+		iconHtml += '</template>';
+		iconHtml += '<template v-else>';
+			iconHtml += '<template v-if="myData.data.selected_icon_type == \'icon\'">';
+				iconHtml += '<div class="icon-box">';
+					iconHtml += '<template>';
+						iconHtml += '<iconfont :icon="myData.data[data.field]" :value="myData.data.selected_style ? myData.data.selected_style : null"></iconfont>';
+						iconHtml += '<div class="operation">';
+							iconHtml += '<div class="operation-warp">';
+							iconHtml += '<i title="图片预览" class="iconfont iconreview js-preview"></i>';
+							iconHtml += '<i title="删除图标" class="layui-icon layui-icon-delete" @click="deleteIcon()"></i>';
+							iconHtml += '</div>';
+							iconHtml += '<div @click="uploadImg(\'selected_icon_type\',\'img,icon\')" class="js-replace">点击替换</div>';
+						iconHtml += '</div>';
+					iconHtml += '</template>';
+				iconHtml += '</div>';
+				iconHtml += '<div class="action-box">';
+					iconHtml += '<div class="action" @click="iconStyle($event, \'selected_style\')"><i class="iconfont iconpifu"></i></div>';
+					iconHtml += '<div class="action" @click="selectColor(\'color-\' + data.field+id, \'selected_style\')" :id="\'color-\' + data.field+id"><i class="iconfont iconyanse"></i></div>';
+				iconHtml += '</div>';
+			iconHtml += '</template>';
+
+			iconHtml += '<template v-if="myData.data.selected_icon_type == \'img\'">';
+				iconHtml += '<div class="upload-box">';
+					iconHtml += '<img :layer-src="img(myData.data[data.field])" :src="img(myData.data[data.field])" class="img_prev"/>';
+					iconHtml += '<div class="operation">';
+						iconHtml += '<div class="operation-warp">';
+							iconHtml += '<i title="图片预览" class="iconfont iconreview js-preview" @click="previewImg()"></i>';
+							iconHtml += '<i title="删除图片" class="layui-icon layui-icon-delete js-delete" @click="deleteImg()"></i>';
+						iconHtml += '</div>';
+						iconHtml += '<div @click="uploadImg(\'selected_icon_type\',\'img,icon\')" class="js-replace">点击替换</div>';
+					iconHtml += '</div>';
+				iconHtml += '</div>';
+			iconHtml += '</template>';
+		iconHtml += '</template>';
+	iconHtml += '</div>';
+
+	iconHtml += '<div class="icon-text" v-if="data.field == \'iconPath\'">未选中</div>';
+	iconHtml += '<div class="icon-text" v-if="data.field == \'selectedIconPath\'">已选中</div>';
+iconHtml += '</div>';
+
+/**
+ * 选择Icon组件：
+ * 参数说明：data：链接对象，callback：回调
+ */
+Vue.component("icon-upload", {
+	props: {
+		data: {
+			type: Object,
+			default: function () {
+				return {
+					field: null,// icon对象
+					label: "图标",// 文本
+				};
+			}
+		}
+	},
+	template: iconHtml,
+	data: function () {
+		return {
+			id: ns.gen_non_duplicate(10),
+			myData: this.data, // 此处用数组的目的是触发变异方法，进行视图更新
+			parent: (Object.keys(this.$parent.data).length) ? this.$parent.data : this.$parent.global
+		};
+	},
+	created: function () {
+		this.myData.label = this.myData.label || "图标";
+		// 找寻父级
+		if (this.myData.parent !== undefined) this.parent = this.$parent.data[this.myData.parent];
+
+		this.id = ns.gen_non_duplicate(10);
+
+	},
+	methods: {
+		selectedIcon: function () {
+			iconSelect((data) => {
+				this.myData.data[this.data.field] = data;
+			})
+		},
+		uploadImg(field, display_type) {
+			display_type = display_type || 'img,icon';
+			var self = this;
+			openAlbum(function (obj) {
+				if (typeof obj == 'object') {
+					self.myData.data[self.data.field] = obj[0].pic_path;
+					self.myData.data[field] = 'img';
+				} else {
+					self.myData.data[self.data.field] = obj;
+					self.myData.data[field] = 'icon';
+					var defaultStyle = {
+						fontSize: 100,
+						iconBgColor: [],
+						iconBgColorDeg: 0,
+						iconBgImg: '',
+						bgRadius: 0,
+						iconColor: ['#000'],
+						iconColorDeg: 0,
+					};
+					if (!self.myData.data.selected_style) self.$set(self.myData.data, 'selected_style', JSON.parse(JSON.stringify(defaultStyle)))
+					if (!self.myData.data.style) self.$set(self.myData.data, 'style', JSON.parse(JSON.stringify(defaultStyle)))
+				}
+				self.$forceUpdate();
+			}, 1, 0, 'img', display_type);
+		},
+		previewImg() {
+			$('#' + this.id).find('.upload-box>img').click();
+		},
+		deleteImg() {
+			this.myData.data[this.data.field] = '';
+			this.$forceUpdate();
+		},
+		deleteIcon(index) {
+			this.myData.data[this.data.field] = '';
+			this.$forceUpdate();
+		},
+		img(path) {
+			return ns.img(path)
+		},
+		selectColor(id, style_field) {
+			var self = this;
+			colorRender(id, '', function (elem, color) {
+				if (self.myData.data[style_field].iconBgImg || self.myData.data[style_field]['iconBgColor'].length) {
+					self.myData.data[style_field]['iconBgColor'] = [color];
+				} else {
+					self.myData.data[style_field]['iconColor'] = [color];
+				}
+				self.$forceUpdate();
+			})
+		},
+		/**
+		 * 选择图标风格
+		 * @param event
+		 * @param style_field
+		 */
+		iconStyle(event, style_field) {
+			var self = this;
+			selectIconStyle({
+				elem: event,
+				icon: self.myData.data[self.data.field],
+				callback: function (data) {
+					if (data) {
+						self.myData.data[style_field] = data;
+						self.$forceUpdate();
+					} else {
+						iconStyleSet({
+							query: {
+								icon: self.myData.data[self.data.field]
+							},
+						}, function (style) {
+							self.myData.data[style_field] = style;
+							self.$forceUpdate();
+						})
+					}
+				}
+			})
+		},
+
+	}
+});
+
+/**
+ * 渲染颜色组件
+ * @param id
+ * @param color
+ * @param callback
+ */
+var _colorPicker = {};
+function colorRender(id, color, callback){
+	if (_colorPicker[id]) return;
+	setTimeout(function () {
+		_colorPicker[id] = Colorpicker.create({
+			el: id,
+			color: color,
+			change: function (elem, hex) {
+				callback(elem, hex)
+			}
+		});
+		$('#'+id).click();
+	},10)
+}
+
+function selectIconStyle(option) {
+	var _w = option.width ? option.width : 340,
+		_h = option.height ? option.height : 200,
+		_x = option.elem.x - _w,
+		_y = option.elem.y;
+
+	option.pagex -= _w;
+
+	window.onmessage = function(e) {
+		if (e.data.event && e.data.event == 'selectIconStyle') {
+			$('.select-icon-style').remove();
+			typeof option.callback == 'function' && option.callback(e.data.data);
+		}
+	};
+
+	var h = `
+            <div class="select-icon-style">
+                <div class="icon-style-wrap" style="width: `+ _w +`px;height: `+ _h +`px;left:`+ _x +`px;top:`+ _y +`px">
+                    <iframe src="`+ ns.url('shop/diy/selecticonstyle', {request_mode: 'iframe',icon: option.icon}) +`" frameborder="0"></iframe>
+                </div>
+            </div>
+        `;
+	$('body').append(h);
+	// 点击任意位置关闭弹窗
+	$('.select-icon-style').click(function () {
+		$(this).remove();
+	})
+}
+
+/**
+ * 底部导航Vue对象
+ */
+var vue = new Vue({
+	
+	el: "#bottomNav",
+	
+	data: {
+		
+		data: {
+			type: 1,
+			theme:'default',
+			// fontSize: 14,
+			textColor: "#333333",
+			textHoverColor: "#ff0036",
+			iconColor: "#333333",
+			iconHoverColor: "#ff0036",
+			backgroundColor: "#ffffff",
+			bulge : true,
+			list: [
+				{iconPath: '', selectedIconPath: '', text: '菜单', link: {}, icon_type:'icon', selected_icon_type:'icon', style:'', selected_style:''},
+				{iconPath: '', selectedIconPath: '', text: '菜单', link: {}, icon_type:'icon', selected_icon_type:'icon', style:'', selected_style:''},
+				{iconPath: '', selectedIconPath: '', text: '菜单', link: {}, icon_type:'icon', selected_icon_type:'icon', style:'', selected_style:''},
+				{iconPath: '', selectedIconPath: '', text: '菜单', link: {}, icon_type:'icon', selected_icon_type:'icon', style:'', selected_style:''},
+			],
+		},
+		selected: -1,
+	},
+	created: function () {
+		if (bottomNavInfo) this.data = bottomNavInfo;
+	},
+	methods: {
+		
+		mouseOver: function (index) {
+			this.selected = index;
+		},
+		mouseOut: function () {
+			this.selected = -1;
+		},
+		
+		//转换图片路径
+		changeImgUrl: function (url) {
+			if (url == null || url === "") return '';
+			if (url.indexOf("static/img/") > -1) return ns.img(ns_url.staticImg + "/" + url.replace("public/static/img/", ""));
+			else return ns.img(url);
+		},
+		
+	}
+});
+
+$('.edit-attribute').height($(window).height()-150+'px');
+
+var repeat_flag = false;//防重复标识
+$("button.save").click(function () {
+	
+	// 验证
+	var verify = {
+		flag : false,
+		message : ""
+	};
+	for (var i=0;i<vue.data.list.length;i++) {
+		var item = vue.data.list[i];
+		if (vue.data.type == 1) {
+			// 图文
+			if (item.text == '') {
+				verify.flag = true;
+				verify.message = "请输入第[" + (i + 1) + "]个标题";
+				break;
+			}
+			if (item.iconPath == '' ) {
+				verify.flag = true;
+				verify.message = "请上传第[" + (i + 1) + "]个图标";
+				break;
+			}
+			if (item.selectedIconPath == '') {
+				verify.flag = true;
+				verify.message = "请上传第[" + (i + 1) + "]个选中图标";
+				break;
+			}
+
+		} else if (vue.data.type == 2) {
+			// 图片
+			if (item.iconPath == '') {
+				verify.flag = true;
+				verify.message = "请上传第[" + (i + 1) + "]个图片";
+				break;
+			}
+			if (item.selectedIconPath == '') {
+				verify.flag = true;
+				verify.message = "请上传第[" + (i + 1) + "]个选中图片";
+				break;
+			}
+
+		} else if (vue.data.type == 3) {
+			// 文字
+			if (item.text == '') {
+				verify.flag = true;
+				verify.message = "请输入第[" + (i + 1) + "]个标题";
+				break;
+			}
+		}
+		if ($.isEmptyObject(item.link)) {
+			verify.flag = true;
+			verify.message = "请选择链接地址";
+			break;
+		}
+	}
+	
+	if(verify.flag){
+		layer.msg(verify.message);
+		return;
+	}
+	
+	if (repeat_flag) return;
+	repeat_flag = true;
+
+	$.ajax({
+		type: "post",
+		url: ns.url("shop/diy/bottomNavDesign"),
+		data: {value: JSON.stringify(vue.data)},
+		dataType: "JSON",
+		success: function (res) {
+			layer.msg(res.message);
+			repeat_flag = false;
+			if (res.code == 0) {
+				listenerHash(); // 刷新页面
+			}
+		}
+	});
+});