初始上传

addon/store/component/controller/StoreLabel.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace addon\store\component\controller;
+
+use app\component\controller\BaseDiyView;
+
+/**
+ * 门店标签·组件
+ *
+ */
+class StoreLabel extends BaseDiyView
+{
+
+    /**
+     * 设计界面
+     */
+    public function design()
+    {
+        return $this->fetch("store_label/design.html");
+    }
+}

addon/store/component/controller/StoreShow.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace addon\store\component\controller;
+
+use app\component\controller\BaseDiyView;
+
+/**
+ * 门店展示·组件
+ *
+ */
+class StoreShow extends BaseDiyView
+{
+
+    /**
+     * 设计界面
+     */
+    public function design()
+    {
+        return $this->fetch("store_show/design.html");
+    }
+}

addon/store/component/view/store_label/css/design.css

@@ -0,0 +1,18 @@
+@CHARSET "UTF-8";
+.component-store-label .preview-box ul{display: flex;align-content: center;padding: 10px 0;/*overflow-x: auto;*/overflow: hidden;}
+.component-store-label .preview-box ul.between{justify-content: space-between;}
+.component-store-label .preview-box ul::-webkit-scrollbar {height: 5px;}
+.component-store-label .preview-box ul::-webkit-scrollbar-track {background-color: #e4e4e4;}
+.component-store-label .preview-box ul::-webkit-scrollbar-thumb {background-color: #999;}
+.component-store-label .preview-box ul li{display: flex;align-content: center;flex-shrink: 0;margin-right: 10px;word-break: keep-all;}
+.component-store-label .preview-box ul li:last-of-type{margin-right: 0;}
+.component-store-label .preview-box ul li .icon-box {width: 20px;height: 20px;font-size: 25px;margin-right: 5px;}
+.component-store-label .preview-box ul li span{}
+
+.component-store-label .diy-img {display: flex;align-items: center;}
+.component-store-label .diy-img .right-wrap {display: flex;flex-direction: column;flex: 1;width: 0;}
+.component-store-label .diy-img .action-box {display: flex;margin-bottom: 10px;}
+.component-store-label .diy-img .action {margin-right: 10px;width: 42px;height: 28px;line-height: 28px;text-align: center;border: 1px solid #EEEEEE;cursor: pointer;}
+.component-store-label .diy-img .action .iconfont {font-size: 20px;}
+.component-store-label .diy-img .action:hover {border-color: var(--base-color);color: var(--base-color);}
+.component-store-label .diy-img .desc{flex: 1;color: #B2B2B2;font-size: 12px;line-height: 1.6;}

addon/store/component/view/store_label/design.html

@@ -0,0 +1,122 @@
+<nc-component :data="data[index]" class="component-store-label">
+	
+	<!-- 预览 -->
+	<template slot="preview">
+
+		<template v-if="nc.lazyLoad">
+			<div class="preview-box"
+			     :style="{
+				     borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
+				     borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
+				     borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
+				     borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
+				     backgroundColor : nc.componentBgColor }">
+				<ul v-if="nc.previewList && Object.keys(nc.previewList).length" :class="{'between': Object.keys(nc.previewList).length == 3}">
+					<li v-for="(item, previewIndex) in nc.previewList" :key="previewIndex">
+						<div class="icon-box" v-if="nc.icon">
+							<iconfont :icon="nc.icon" :value="nc.style ? nc.style : ''"></iconfont>
+						</div>
+						<span :style="{color: nc.textColor ? nc.textColor : 'rgba(0,0,0,0)',fontWeight: nc.fontWeight,fontSize: nc.fontSize + 'px'}">{{item.label_name}}</span>
+					</li>
+				</ul>
+
+			</div>
+		</template>
+
+	</template>
+	
+	<!-- 内容编辑 -->
+	<template slot="edit-content">
+		<template v-if="nc.lazyLoad">
+			<store-label-sources></store-label-sources>
+			<div class="template-edit-title">
+				<h3>风格</h3>
+
+				<div class="layui-form-item">
+					<label class="layui-form-label sm">风格</label>
+					<div class="layui-input-block">
+						<div @click="nc.contentStyle='style-1'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.contentStyle=='style-1') }">
+							<i class="layui-anim layui-icon">{{ nc.contentStyle=='style-1' ? "&#xe643;" : "&#xe63f;" }}</i>
+							<div>风格一</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="layui-form-item">
+					<label class="layui-form-label sm">图标</label>
+					<div class="layui-input-block diy-img">
+						<img-icon-upload :data="{data : nc, displayType : 'icon'}"></img-icon-upload>
+						<div class="right-wrap">
+							<div class="action-box">
+								<div class="action" @click="nc.tempData.methods.iconStyle($event)"><i class="iconfont iconpifu"></i></div>
+								<div class="action" :id="'store-label-color-' + nc.index"><i class="iconfont iconyanse"></i></div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+			</div>
+
+			<div class="template-edit-title">
+				<h3>标签内容</h3>
+				<div class="layui-form-item" v-if="nc.tempData.labelSources">
+					<label class="layui-form-label sm">数据来源</label>
+					<div class="layui-input-block">
+						<div class="source-selected">
+							<div class="source">{{ nc.tempData.labelSources[nc.sources].text }}</div>
+							<div v-for="(item,sourcesKey) in nc.tempData.labelSources" :key="sourcesKey" class="source-item" :title="item.text" @click="nc.sources=sourcesKey" :class="{ 'text-color border-color' : (nc.sources == sourcesKey) }">
+								<i class='iconfont' :class='item.icon'></i>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="layui-form-item" v-if="nc.sources == 'diy' && nc.tempData.methods">
+					<label class="layui-form-label sm">选择标签</label>
+					<div class="layui-input-block">
+						<div class="input-text selected-style" @click="nc.tempData.methods.addLabel()">
+							<span v-if="nc.labelIds.length == 0">请选择</span>
+							<span v-if="nc.labelIds.length > 0" class="text-color">已选{{ nc.labelIds.length }}个</span>
+							<i class="iconfont iconyoujiantou"></i>
+						</div>
+					</div>
+				</div>
+
+				<slide :data="{ field : 'count', label: '标签数量', min:1, max: 30}" v-if="nc.sources != 'diy'"></slide>
+			</div>
+
+		</template>
+
+	</template>
+
+	<!-- 样式编辑 -->
+	<template slot="edit-style">
+		<template v-if="nc.lazyLoad">
+			<div class="template-edit-title">
+				<h3>文字设置</h3>
+
+				<slide :data="{ field : 'fontSize', label : '文字大小', min: 12, max : 20 }"></slide>
+
+				<div class="layui-form-item icon-radio">
+					<label class="layui-form-label sm">文字粗细</label>
+					<div class="layui-input-block">
+						<span v-for="item in nc.tempData.thicknessList" :class="[item.value == nc.fontWeight ? '' : 'layui-hide']">{{item.name}}</span>
+						<ul class="icon-wrap">
+							<li v-for="(item, index) in nc.tempData.thicknessList" :class="[item.value == nc.fontWeight ? 'text-color border-color' : '']" @click="nc.fontWeight = item.value">
+								<i class="iconfont" :class="[{'text-color': item.value == nc.fontWeight}, item.src]"></i>
+							</li>
+						</ul>
+					</div>
+				</div>
+
+				<color :data="{ field : 'textColor', label : '文字颜色',defaultColor: '#303133' }"></color>
+			</div>
+		</template>
+	</template>
+
+	<!-- 资源 -->
+	<template slot="resource">
+		<css src="{$resource_path}/css/design.css"></css>
+		<js src="{$resource_path}/js/design.js"></js>
+	</template>
+
+</nc-component>

addon/store/component/view/store_label/js/design.js

@@ -0,0 +1,159 @@
+var storeLabelHtml = '<div style="display:none;"></div>';
+
+Vue.component("store-label-sources", {
+	template: storeLabelHtml,
+	data: function() {
+		return {
+			data: this.$parent.data,
+			labelSources: {
+				initial: {
+					text: "默认",
+					icon: "iconmofang"
+				},
+				diy: {
+					text: "手动选择",
+					icon: "iconshoudongxuanze"
+				},
+			},
+			thicknessList: [
+				{name: "加粗", src: "iconbold", value: "bold"},
+				{name: "常规", src: "iconbold-copy", value: "normal"}
+			]
+		}
+	},
+	created:function() {
+		if(!this.$parent.data.verify) this.$parent.data.verify = [];
+		this.$parent.data.verify.push(this.verify);//加载验证方法
+
+		this.$parent.data.ignore = ['elementAngle','elementBgColor']; //加载忽略内容 -- 其他设置中的属性设置
+		this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
+
+		if(Object.keys(this.$parent.data.previewList).length == 0) {
+			for (var i = 1; i < 4; i++) {
+				this.$parent.data.previewList["label_id_" + ns.gen_non_duplicate(i)] = {
+					label_name: "标签名称",
+					label_id:0
+				};
+			}
+		}
+
+		// 组件所需的临时数据
+		this.$parent.data.tempData = {
+			labelSources:this.labelSources,
+			thicknessList:this.thicknessList,
+			methods: {
+				addLabel: this.addLabel,
+				iconStyle: this.iconStyle
+			}
+		};
+
+		this.fetchIconColor();
+
+	},
+	methods: {
+		verify: function (index) {
+			var res = {code: true, message: ""};
+			return res;
+		},
+		/**
+		 * 选择图标风格
+		 * @param event
+		 */
+		iconStyle(event) {
+			var self = this;
+			selectIconStyle({
+				elem: event.currentTarget,
+				icon: self.data.icon,
+				callback: function (data) {
+					if (data) {
+						self.data.style = data;
+					} else {
+						iconStyleSet({
+							style: JSON.stringify(self.data.style),
+							query: {
+								icon: self.data.icon
+							}
+						}, function (style) {
+							self.data.style = style;
+						})
+					}
+				}
+			})
+		},
+		/**
+		 * 渲染颜色组件
+		 * @param id
+		 * @param color
+		 * @param callback
+		 */
+		colorRender(id, color, callback) {
+			setTimeout(function () {
+				Colorpicker.create({
+					el: id,
+					color: color,
+					change: function (elem, hex) {
+						callback(elem, hex)
+					}
+				});
+			})
+		},
+		/**
+		 * 渲染图标颜色选择器
+		 */
+		fetchIconColor() {
+			var self = this;
+			self.colorRender('store-label-color-' + self.data.index, '', function (elem, color) {
+				if (self.data.style.iconBgColor.length || self.data.style.iconBgImg) {
+					self.data.style.iconBgColor = [color];
+				} else {
+					self.data.style.iconColor = [color];
+				}
+				self.$forceUpdate();
+			});
+		},
+		addLabel: function () {
+			var self = this;
+			self.labelSelect(function (res) {
+				self.$parent.data.labelIds = [];
+				self.$parent.data.previewList = {};
+				for (var i = 0; i < res.length; i++) {
+					self.$parent.data.labelIds.push(res[i].label_id);
+					self.$parent.data.previewList["label_id_" + ns.gen_non_duplicate(i)] = {
+						label_name: res[i].label_name,
+						label_id: res[i].label_id
+					};
+				}
+			}, self.$parent.data.labelIds);
+		},
+		labelSelect: function (callback, selectId) {
+			var self = this;
+			layui.use(['layer'], function () {
+				var url = ns.url("store://shop/store/labelSelect", {request_mode: 'iframe', select_id: selectId.toString()});
+				layer.open({
+					title: "门店标签选择",
+					type: 2,
+					area: ['1000px', '600px'],
+					fixed: false, //不固定
+					btn: ['保存', '返回'],
+					content: url,
+					yes: function (index, layero) {
+						var iframeWin = document.getElementById(layero.find('iframe')[0]['name']).contentWindow;//得到iframe页的窗口对象，执行iframe页的方法：
+						iframeWin.selectStoreLabelListener(function (obj) {
+							if (typeof callback == "string") {
+								try {
+									eval(callback + '(obj)');
+									layer.close(index);
+								} catch (e) {
+									console.error('回调函数' + callback + '未定义');
+								}
+							} else if (typeof callback == "function") {
+								callback(obj);
+								layer.close(index);
+							}
+						});
+					}
+				});
+			});
+		},
+	}
+});

addon/store/component/view/store_show/css/design.css

@@ -0,0 +1,173 @@
+@CHARSET "UTF-8";
+.draggable-element .component-store-show-info .preview-draggable .preview-box {
+}
+
+/* 风格一 */
+.component-store-show-info .style-one, .component-store-show-info .style-three {
+	display: flex;
+	justify-content: space-between;
+	padding: 0 10px;
+}
+
+.component-store-show-info .style-one .info-item {
+	flex: 1;
+}
+
+.component-store-show-info .style-one .store-name {
+	margin-right: 10px;
+	font-size: 16px;
+}
+
+.component-store-show-info .style-one .change {
+	font-size: 12px;
+}
+
+.component-store-show-info .style-one p {
+	margin-top: 10px;
+	font-size: 12px;
+}
+
+.component-store-show-info .style-one .img-wrap, .component-store-show-info .style-two .img-wrap, .component-store-show-info .style-three .img-wrap {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	overflow: hidden;
+	flex-shrink: 0;
+}
+
+.component-store-show-info .style-one .img-wrap img, .component-store-show-info .style-two .img-wrap img, .component-store-show-info .style-three .img-wrap img {
+	width: 100%;
+	height: 100%;
+}
+
+
+/* 风格二 */
+.component-store-show-info .style-two {
+	display: flex;
+}
+
+.component-store-show-info .style-two .info-item {
+	margin-left: 10px;
+}
+
+.component-store-show-info .style-two .store-name {
+	font-size: 16px;
+}
+
+.component-store-show-info .style-two p {
+	margin-top: 10px;
+	font-size: 12px;
+}
+
+.component-store-show-info .style-two .change {
+	margin-left: auto;
+	align-self: center;
+	flex-shrink: 0;
+}
+
+/* 风格三 */
+.component-store-show-info .style-three .info-item {
+	display: flex;
+	align-items: center;
+}
+
+.component-store-show-info .style-three .store-name {
+	margin-left: 8px;
+	margin-right: 15px;
+	font-size: 16px;
+}
+
+.component-store-show-info .style-three .change {
+	font-size: 12px;
+}
+
+.component-store-show-info .style-three .icon-wrap {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 20px;
+	height: 20px;
+	align-self: center;
+}
+
+.component-store-show-info .style-three .icon-wrap img {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+/* 风格四 */
+.component-store-show-info .style-four {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.component-store-show-info .style-four .store-left-wrap {
+	display: flex;
+	align-items: center;
+	line-height: 34px;
+}
+
+.component-store-show-info .style-four .store-left-wrap .iconweizhi {
+	font-size: 14px;
+	color: #303133;
+	margin-right: 3px;
+}
+
+.component-store-show-info .style-four .store-left-wrap .layui-icon-down {
+	font-size: 14px;
+	margin-left: 3px;
+	color: #303133;
+}
+
+.component-store-show-info .style-four .store-right-search {
+	width: 235px;
+	height: 35px;
+	line-height: 35px;
+	display: flex;
+	justify-content: space-between;
+	padding: 0 15px;
+	font-size: 12px;
+	color: #909399;
+	box-sizing: border-box;
+	background-color: #FFFFFF;
+	border-radius: 18px;
+	position: relative;
+}
+
+.component-store-show-info .style-four .store-right-search .iconsousuo2 {
+	position: absolute;
+	right: 15px;
+	height: 12px;
+	font-size: 13px;
+	color: #909399;
+}
+
+/* 弹窗 */
+.style-list-con-store {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.style-list-con-store .item {
+	height: 100px;
+	line-height: 100px;
+	width: 32%;
+	margin-right: 2%;
+	margin-bottom: 15px;
+	cursor: pointer;
+	border: 1px solid #ededed;
+	background: #f7f8fa;
+	box-sizing: border-box;
+}
+
+.style-list-con-store .item img {
+	max-width: 100%;
+}
+
+.style-list-con-store .item:nth-child(3n) {
+	margin-right: 0;
+}

addon/store/component/view/store_show/design.html

@@ -0,0 +1,94 @@
+<nc-component :data="data[index]" class="component-store-show-info">
+	
+	<!-- 预览 -->
+	<template slot="preview">
+		
+		<div class="preview-box">
+			<div class="info-list">
+				<div class="info-item style-one" v-if="nc.style == 1">
+					<div class="info-item">
+						<span class="store-name" :style="{ color: nc.textColor }">门店名称</span>
+						<span class="change" :style="{ color: nc.textColor }">切换 ></span>
+						<p :style="{ color: nc.textColor }">这里展示门店地址</p>
+					</div>
+					<div class="img-wrap">
+						<img src="{$resource_path}/img/default_store.png" />
+					</div>
+				</div>
+
+				<div class="info-item style-three" v-if="nc.style == 2">
+					<div class="info-item">
+						<div class="img-wrap">
+							<img src="{$resource_path}/img/default_store.png" />
+						</div>
+						<span class="store-name" :style="{ color: nc.textColor }">门店名称</span>
+						<span class="change" :style="{ color: nc.textColor }">切换 ></span>
+					</div>
+					<div class="icon-wrap">
+						<img src="{$resource_path}/img/sousuo.png" />
+					</div>
+				</div>
+				
+				<div class="info-item style-four" v-if="nc.style == 3">
+					<div class="store-left-wrap">
+						<i class="iconfont iconweizhi" :style="{ color: nc.textColor }"></i>
+						<span class="store-name" :style="{ color: nc.textColor }">门店名称</span>
+						<i class="layui-icon layui-icon-down" :style="{ color: nc.textColor }"></i>
+					</div>
+					<div class="store-right-search">
+						<div>商品搜索<i class="iconfont iconsousuo2"></i></div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+	</template>
+	
+	<!-- 内容编辑 -->
+	<template slot="edit-content">
+		<template v-if="nc.lazyLoad">
+			<div class="template-edit-title">
+				<h3>门店风格</h3>
+				<store-show-style></store-show-style>
+			</div>
+		</template>
+
+		<!-- 风格弹框 -->
+		<article class="store-style" style="display: none;">
+			<div class="style-list-con-store">
+				<div class="item" :class="{'selected border-color': nc.style == 1}">
+					<img src="{$resource_path}/img/style1.png" />
+					<span class="layui-hide">风格一</span>
+				</div>
+				<div class="item" :class="{'selected border-color': nc.style == 2}">
+					<img src="{$resource_path}/img/style3.png" />
+					<span class="layui-hide">风格二</span>
+				</div>
+				<div class="item" :class="{'selected border-color': nc.style == 3}">
+					<img src="{$resource_path}/img/style4.png" />
+					<span class="layui-hide">风格三</span>
+				</div>
+			</div>
+
+			<input type="hidden" name="style">
+			<input type="hidden" name="style_name" />
+		</article>
+	</template>
+
+	<!-- 样式编辑 -->
+	<template slot="edit-style">
+		<template v-if="nc.lazyLoad">
+			<div class="template-edit-title">
+				<h3>门店样式</h3>
+				<color  :data="{ field : 'textColor', 'label' : '文本颜色','defaultColor': '#303133' }"></color>
+			</div>
+		</template>
+	</template>
+
+	<!-- 资源 -->
+	<template slot="resource">
+		<css src="{$resource_path}/css/design.css"></css>
+		<js src="{$resource_path}/js/design.js"></js>
+	</template>
+
+</nc-component>

addon/store/component/view/store_show/js/design.js

@@ -0,0 +1,55 @@
+var storeShowStyle = '<div>';
+		storeShowStyle += '<div class="layui-form-item">';
+			storeShowStyle += '<label class="layui-form-label sm">选择风格</label>';
+			storeShowStyle += '<div class="layui-input-block">';
+				storeShowStyle += '<div v-if="data.styleName" class="input-text text-color selected-style" @click="selectGoodsStyle()">{{data.styleName}} <i class="layui-icon layui-icon-right"></i></div>';
+				storeShowStyle += '<div v-else class="input-text selected-style" @click="selectGoodsStyle()">选择 <i class="layui-icon layui-icon-right"></i></div>';
+			storeShowStyle += '</div>';
+		storeShowStyle += '</div>';
+	storeShowStyle += '</div>';
+
+Vue.component("store-show-style", {
+	template: storeShowStyle,
+	data: function() {
+		return {
+			data: this.$parent.data,
+		}
+	},
+	created:function() {
+		if(!this.$parent.data.verify) this.$parent.data.verify = [];
+		this.$parent.data.verify.push(this.verify);//加载验证方法
+
+		this.$parent.data.ignore = ['elementAngle','componentAngle','elementBgColor','componentBgColor']; //加载忽略内容 -- 其他设置中的属性设置
+		this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
+	},
+	methods: {
+		verify: function (index) {
+			var res = { code: true, message: "" };
+			return res;
+		},
+		selectGoodsStyle: function() {
+			var self = this;
+			layer.open({
+				type: 1,
+				title: '风格选择',
+				area:['800px','270px'],
+				btn: ['确定', '返回'],
+				content: $(".draggable-element[data-index='" + self.data.index + "'] .edit-attribute .store-style").html(),
+				success: function(layero, index) {
+					$(".layui-layer-content input[name='style']").val(self.data.style);
+					$(".layui-layer-content input[name='style_name']").val(self.data.styleName);
+					$("body").off("click", ".layui-layer-content .style-list-con-store .item").on("click", ".layui-layer-content .style-list-con-store .item", function () {
+						$(this).addClass("selected border-color").siblings().removeClass("selected border-color");
+						$(".layui-layer-content input[name='style']").val($(this).index() + 1);
+						$(".layui-layer-content input[name='style_name']").val($(this).find("span").text());
+					});
+				},
+				yes: function (index, layero) {
+					self.data.style = $(".layui-layer-content input[name='style']").val();
+					self.data.styleName = $(".layui-layer-content input[name='style_name']").val();
+					layer.closeAll()
+				}
+			});
+		},
+	}
+});