初始上传

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);
+							}
+						});
+					}
+				});
+			});
+		},
+	}
+});