初始上传

This commit is contained in:
2026-04-04 17:27:12 +08:00
parent 4d80d28eb4
commit b7e11774ee
11191 changed files with 1588469 additions and 0 deletions

View File

@@ -0,0 +1,38 @@
@CHARSET "UTF-8";
/*公告组件*/
.notice .notice-config ul {padding: 10px 0 0 15px;}
.notice .notice-config ul li{position:relative;padding:10px;background: #ffffff;border:1px dashed #e5e5e5;margin-top:16px;}
.notice .notice-config ul>li:first-child{margin-top:0;}
.notice .notice-config ul>li .content-block.textNavigation{width:100%;}
.notice .notice-config ul>li .content-block .layui-form-item{margin:0;}
.notice .notice-config ul>li .content-block .layui-form-label{width:60px !important;padding:9px 0;line-height: 1;}
.notice .notice-config ul>li .content-block div{margin-top:10px;}
.notice .notice-config ul>li .content-block div:last-child{margin-top:0;}
.notice .notice-config ul li:hover .del{display:block;background-color: #909399;}
.notice .notice-config ul li .iconfont {position: absolute;top: calc(50% - 10px);left: 15px;cursor: move;font-size: 20px;}
.notice .add-item{padding: 10px;border: 1px dashed ;margin: 20px 0 10px 15px;cursor: pointer;text-align: center;}
.notice .add-item i{display: inline-block;height: 24px; line-height: 24px; font-size: 18px;font-style: normal;margin-right: 10px;}
.notice .add-item span{display: inline-block;height: 24px; line-height: 24px;}
.notice .notice-box {border-radius: 4px;padding: 10px;line-height: 20px;}
.notice .notice-box .notice-con {display: flex;align-items: center;}
.notice .notice-box .img-wrap {flex-shrink: 0;height: 20px;text-align: center;line-height: 20px;}
.notice .notice-box .img-wrap img {max-width: 100%;max-height: 100%;vertical-align: top;}
.notice .notice-box .img-wrap .icon-box {overflow: hidden;display: flex;justify-content: center;align-items: center;width: 30px;height: 30px;font-size: 40px;margin-top: -5px;}
.notice .notice-box .notice-con-split {width: 1px;height: 13px;background-color: #E4E4E4;margin: 0 8px;}
.notice .notice-box .notice-con-font {font-size: 14px;color: #666666;flex: 1;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.notice .goods-list-edit .system-img{margin: 10px 15px 0;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;background-color: #f5f5f5;border-radius: 3px;}
.notice .goods-list-edit .system-img .system-img-item{width: 60px;height: 25px;margin-right: 10px;line-height: 25px;cursor: pointer;border: 1px solid transparent;border-radius: 3px;padding: 5px;}
.notice .goods-list-edit .system-img img{max-width: 60px;max-height: 25px;}
.notice .diy-img{margin: 10px 15px;display: flex;align-items: center;}
.notice .diy-img .right-wrap {display: flex;flex-direction: column;flex: 1;width: 0;}
.notice .diy-img .action-box {display: flex;margin-bottom: 10px;}
.notice .diy-img .action {margin-right: 10px;width: 42px;height: 28px;line-height: 28px;text-align: center;border: 1px solid #EEEEEE;cursor: pointer;}
.notice .diy-img .action .iconfont {font-size: 20px;}
.notice .diy-img .action:hover {border-color: var(--base-color);color: var(--base-color);}
.notice .diy-img .desc{flex: 1;color: #B2B2B2;font-size: 12px;line-height: 1.6;}
/* 风格二 */
.notice .notice-box.style-2 .notice-icon-one{margin-right: 5px;}
.notice .notice-box.style-2 .notice-icon-two{color: #999;}

View File

@@ -0,0 +1,180 @@
<nc-component :data="data[index]" class="notice">
<!-- 预览 -->
<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 }">
<div :class="['notice-box',nc.contentStyle]">
<div class="notice-con" v-for="(item, previewIndex) in nc.list" v-if="previewIndex < 1">
<div :class="['img-wrap',nc.iconType]" v-if="previewIndex == 0">
<img v-if="nc.iconType == 'img'" :src="changeImgUrl(nc.imageUrl)" />
<div v-if="nc.iconType == 'icon'" class="icon-box">
<iconfont :icon="nc.icon" v-if="nc.icon" :value="nc.style ? nc.style : ''"></iconfont>
</div>
</div>
<div class="notice-con-split"></div>
<span class="notice-con-font" :style="{color: nc.textColor ? nc.textColor : 'rgba(0,0,0,0)',fontWeight: nc.fontWeight,fontSize: nc.fontSize + 'px'}">{{ item.title }}</span>
</div>
</div>
</div>
</template>
</template>
<!-- 内容编辑 -->
<template slot="edit-content">
<template v-if="nc.lazyLoad">
<notice-sources></notice-sources>
<div class="template-edit-title">
<h3>公告风格</h3>
<div class="goods-list-edit layui-form" v-if="nc.tempData.iconList">
<div class="layui-form-item icon-radio">
<label class="layui-form-label sm">公告图标</label>
<div class="layui-input-block">
<span v-for="(item, sourcesKey) in nc.tempData.iconList" :key="sourcesKey" :class="[sourcesKey == nc.iconSources ? '' : 'layui-hide']">{{item.text}}</span>
<ul class="icon-wrap">
<li v-for="(item, sourcesKey) in nc.tempData.iconList" :key="sourcesKey" :class="[sourcesKey == nc.iconSources ? 'text-color border-color' : '']" @click="nc.iconSources=sourcesKey;nc.iconType=item.type;">
<i class="iconfont" :class="[{'text-color': sourcesKey == nc.iconSources}, item.src]"></i>
</li>
</ul>
</div>
<div v-if="nc.iconSources == 'initial'" class="system-img">
<div class="system-img-item" v-for="item in nc.tempData.iconList[nc.iconSources].icon" :class="{'border-color': nc.imageUrl == item}" @click="nc.imageUrl = item">
<img :src="changeImgUrl(item)"/>
</div>
</div>
</div>
<div class="diy-img" v-show="nc.iconSources == 'diy'">
<img-icon-upload :data="{data : nc}"></img-icon-upload>
<div class="right-wrap">
<div class="action-box" v-show="nc.iconType == 'icon'">
<div class="action" @click="nc.tempData.methods.iconStyle($event)"><i class="iconfont iconpifu"></i></div>
<div class="action" :id="'notice-color-' + nc.index"><i class="iconfont iconyanse"></i></div>
</div>
<div class="desc">宽度自适应高度20px</div>
</div>
</div>
<!-- <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 @click="nc.contentStyle='style-2'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.contentStyle=='style-2') }">-->
<!-- <i class="layui-anim layui-icon">{{ nc.contentStyle=='style-2' ? "&#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">
<div @click="nc.scrollWay='upDown'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.scrollWay=='upDown') }">
<i class="layui-anim layui-icon">{{ nc.scrollWay=='upDown' ? "&#xe643;" : "&#xe63f;" }}</i>
<div>上下滚动</div>
</div>
<div @click="nc.scrollWay='horizontal'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.scrollWay=='horizontal') }">
<i class="layui-anim layui-icon">{{ nc.scrollWay=='horizontal' ? "&#xe643;" : "&#xe63f;" }}</i>
<div>横向滚动</div>
</div>
</div>
</div>
</div>
</div>
<div class="template-edit-title">
<h3>公告内容</h3>
<div class="layui-form-item" v-if="nc.tempData.noticeSources">
<label class="layui-form-label sm">数据来源</label>
<div class="layui-input-block">
<div class="source-selected">
<div class="source">{{ nc.tempData.noticeSources[nc.sources].text }}</div>
<div v-for="(item,sourcesKey) in nc.tempData.noticeSources" :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>
<slide :data="{ field : 'count', label: '公告数量', min:1, max: 20}" v-if="nc.sources == 'initial'"></slide>
<div class="layui-form-item" v-if="nc.sources == 'initial' && 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.selectNotice()">
<span v-if="nc.noticeIds.length == 0">请选择</span>
<span v-if="nc.noticeIds.length > 0" class="text-color">已选{{ nc.noticeIds.length }}个</span>
<i class="iconfont iconyoujiantou"></i>
</div>
</div>
</div>
<div class="notice-config" v-if="nc.sources == 'diy'">
<ul>
<li v-for="(item,index) in nc.list" :key="item.id">
<div class="content-block">
<div class="layui-form-item" >
<label class="layui-form-label sm">内容</label>
<div class="layui-input-block">
<input type="text" name='title' v-model="item.title" class="layui-input" />
</div>
</div>
<nc-link :data="{ field : nc.list[index].link, label:'链接' }"></nc-link>
</div>
<i class="del" @click="nc.list.splice(index,1)">x</i>
<div class="iconfont icontuodong"></div>
</li>
</ul>
<div class="add-item text-color border-color" @click="nc.tempData.methods.addNotice()">
<i>+</i>
<span>添加一条公告</span>
</div>
</div>
</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">
<js>
var noticeResourcePath = "{$resource_path}"; // http路径
var noticeRelativePath = "{$relative_path}"; // 相对路径
</js>
<css src="{$resource_path}/css/design.css"></css>
<js src="{$resource_path}/js/design.js"></js>
</template>
</nc-component>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@@ -0,0 +1,254 @@
/**
* 公告·组件
*/
var noticeConHtml = '<div style="display:none;"></div>';
Vue.component("notice-sources", {
template: noticeConHtml,
data: function () {
return {
data: this.$parent.data,
list: this.$parent.data.list,
noticeSources: {
initial: {
text: "默认",
icon: "iconmofang"
},
diy: {
text: "自定义",
icon: "iconshoudongxuanze"
},
},
iconList: {
initial: {
text: "系统图标",
type: 'img',
src: "iconshangpinfenlei",
icon: [(noticeRelativePath + "/img/notice_01.png"), (noticeRelativePath + "/img/notice_02.png"), (noticeRelativePath + "/img/notice_03.png")]
},
diy: {
type: 'icon',
text: "自定义",
src: "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);//加载验证方法
// 赋值初始化图片
if (!this.data.imageUrl) this.data.imageUrl = this.iconList.initial.icon[0];
this.$parent.data.ignore = ['elementBgColor', 'elementAngle'];//加载忽略内容 -- 其他设置中的属性设置
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
// 组件所需的临时数据
this.$parent.data.tempData = {
noticeSources: this.noticeSources,
iconList: this.iconList,
thicknessList: this.thicknessList,
methods: {
selectNotice: this.selectNotice,
addNotice: this.addNotice,
iconStyle: this.iconStyle
}
};
this.list.forEach(function (e, i) {
if(!e.id ) e.id = ns.gen_non_duplicate(6);
});
this.$parent.data.list = this.list;
var moveBeforeIndex = 0;
var _this = this;
setTimeout(function () {
var componentIndex = _this.data.index;
$('[data-index="' + componentIndex + '"] .notice-config ul').DDSort({
target: 'li',
floatStyle: {
'border': '1px solid #ccc',
'background-color': '#fff'
},
//设置可拖拽区域
draggableArea: "icontuodong",
down: function (index) {
moveBeforeIndex = index;
},
up: function () {
var index = $(this).index();
var temp = _this.list[moveBeforeIndex];
_this.list.splice(moveBeforeIndex, 1);
_this.list.splice(index, 0, temp);
_this.$parent.data.list = _this.list;
}
});
})
},
mounted() {
this.fetchIconColor();
},
watch: {
'$parent.data.sources':function (oVal,nVal) {
if(oVal == 'initial') return;
var moveBeforeIndex = 0;
var _this = this;
setTimeout(function () {
var componentIndex = _this.data.index;
$('[data-index="' + componentIndex + '"] .notice-config ul').DDSort({
target: 'li',
floatStyle: {
'border': '1px solid #ccc',
'background-color': '#fff'
},
//设置可拖拽区域
draggableArea: "icontuodong",
down: function (index) {
moveBeforeIndex = index;
},
up: function () {
var index = $(this).index();
var temp = _this.list[moveBeforeIndex];
_this.list.splice(moveBeforeIndex, 1);
_this.list.splice(index, 0, temp);
_this.$parent.data.list = _this.list;
}
});
})
}
},
methods: {
verify: function (index) {
var res = {code: true, message: ""};
if (vue.data[index].list.length > 0) {
for (var i = 0; i < vue.data[index].list.length; i++) {
if (vue.data[index].list[i].title === "") {
res.code = false;
res.message = "公告内容不能为空";
break;
}
}
} else {
res.code = false;
res.message = "请添加一条公告";
}
return res;
},
selectNotice: function () {
var self = this;
self.noticeSelect(function (res) {
self.$parent.data.noticeIds = [];
self.$parent.data.list = [];
for (var i = 0; i < res.length; i++) {
self.$parent.data.noticeIds.push(res[i].id);
self.$parent.data.list[i] = {
title: res[i].title,
link: {},
id: res[i].id
};
}
self.list = self.$parent.data.list;
}, self.$parent.data.noticeIds);
},
addNotice:function () {
this.list.push({
id: ns.gen_non_duplicate(6),
title: '公告',
link: {name: ''}
})
},
/**
* 选择图标风格
* @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('notice-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();
});
},
noticeSelect: function (callback, selectId) {
layui.use(['layer'], function () {
var url = ns.url("shop/notice/noticeselect", {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.selectNoticeListener(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);
}
});
}
});
});
},
}
});