初始上传
This commit is contained in:
315
addon/notes/shop/view/group/lists.html
Executable file
315
addon/notes/shop/view/group/lists.html
Executable file
@@ -0,0 +1,315 @@
|
||||
<!-- 搜索框 -->
|
||||
<div class="single-filter-box">
|
||||
<button class="layui-btn" onclick="addGroup()">添加笔记分组</button>
|
||||
<div class="layui-form">
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="group_name" placeholder="请输入笔记分组名称" autocomplete="off" class="layui-input">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-filter="search" lay-submit>
|
||||
<i class="layui-icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表 -->
|
||||
<table id="attr_class_list" lay-filter="attr_class_list"></table>
|
||||
|
||||
<!-- 编辑排序 -->
|
||||
<script type="text/html" id="editSort">
|
||||
<input name="sort" type="number" onchange="editSort({{d.group_id}}, this)" value="{{d.sort}}" class="layui-input edit-sort len-short">
|
||||
</script>
|
||||
|
||||
<!-- 操作 -->
|
||||
<script type="text/html" id="operation">
|
||||
<div class="table-btn">
|
||||
<a class="layui-btn" lay-event="edit">编辑</a>
|
||||
<a class="layui-btn" lay-event="delete">删除</a>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="addGroup">
|
||||
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label mid"><span class="required">*</span>笔记分组：</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="group_name" type="text" placeholder="请输入笔记分组名称" lay-verify="required" class="layui-input len-mid">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label mid">排序：</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="sort" type="number" class="layui-input edit-sort len-short">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row mid">
|
||||
<button class="layui-btn" lay-submit lay-filter="save">保存</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="closeAttrLayer()">返回</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="editGroup">
|
||||
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label mid"><span class="required">*</span>笔记分组：</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="group_name" type="text" value="{{ d.group_name }}" placeholder="请输入笔记分组名称" lay-verify="required" class="layui-input len-mid">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label mid">排序：</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="sort" type="number" value="{{ d.sort }}" class="layui-input edit-sort len-short">
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="group_id" value="{{ d.group_id }}">
|
||||
<div class="form-row mid">
|
||||
<button class="layui-btn" lay-submit lay-filter="edit_save">保存</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="closeAttrLayer()">返回</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var laytpl, add_attr_index = -1,
|
||||
form, table;
|
||||
layui.use(['form', 'laytpl'], function() {
|
||||
var repeat_flag = false; //防重复标识
|
||||
laytpl = layui.laytpl;
|
||||
form = layui.form;
|
||||
form.render();
|
||||
|
||||
table = new Table({
|
||||
elem: '#attr_class_list',
|
||||
url: ns.url("notes://shop/group/lists"),
|
||||
cols: [
|
||||
[ {
|
||||
field: 'group_name',
|
||||
title: '分组名称',
|
||||
unresize: 'false'
|
||||
},{
|
||||
field: 'notes_num',
|
||||
title: '店铺笔记总数',
|
||||
unresize: 'false'
|
||||
},{
|
||||
field: 'release_num',
|
||||
title: '笔记发布数',
|
||||
unresize: 'false'
|
||||
},{
|
||||
field: 'sort',
|
||||
sort : true,
|
||||
unresize:'false',
|
||||
title: '排序',
|
||||
width: '20%',
|
||||
align: 'center',
|
||||
templet: '#editSort'
|
||||
},{
|
||||
title: '操作',
|
||||
toolbar: '#operation',
|
||||
unresize: 'false',
|
||||
align:'right'
|
||||
}]
|
||||
]
|
||||
});
|
||||
|
||||
/**
|
||||
* 监听工具栏操作
|
||||
*/
|
||||
table.tool(function(obj) {
|
||||
var data = obj.data;
|
||||
switch (obj.event) {
|
||||
case 'edit':
|
||||
editGroup(data);
|
||||
break;
|
||||
case 'delete':
|
||||
deleteGroup(data.group_id);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
function deleteGroup(group_id) {
|
||||
layer.confirm('确认删除该分组吗？', function(index) {
|
||||
layer.close(index);
|
||||
$.ajax({
|
||||
url: ns.url("notes://shop/group/delete"),
|
||||
data: {
|
||||
group_id:group_id
|
||||
},
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
success: function(res) {
|
||||
layer.msg(res.message);
|
||||
if (res.code == 0) {
|
||||
table.reload({
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
table.on("sort",function (obj) {
|
||||
table.reload({
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: {
|
||||
order:obj.field,
|
||||
sort:obj.type
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 搜索功能
|
||||
*/
|
||||
form.on('submit(search)', function(data) {
|
||||
table.reload({
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
});
|
||||
});
|
||||
|
||||
form.on('submit(save)', function(data) {
|
||||
|
||||
if (repeat_flag) return false;
|
||||
repeat_flag = true;
|
||||
|
||||
$.ajax({
|
||||
url: '{:addon_url("notes://shop/group/add")}',
|
||||
data: data.field,
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
success: function(data) {
|
||||
layer.msg(data.message);
|
||||
if (data.code == 0) {
|
||||
table.reload();
|
||||
layer.close(add_attr_index);
|
||||
}
|
||||
repeat_flag = false;
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
form.on('submit(edit_save)', function(data) {
|
||||
|
||||
if (repeat_flag) return false;
|
||||
repeat_flag = true;
|
||||
|
||||
$.ajax({
|
||||
url: '{:addon_url("notes://shop/group/edit")}',
|
||||
data: data.field,
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
success: function(data) {
|
||||
layer.msg(data.message);
|
||||
if (data.code == 0) {
|
||||
table.reload();
|
||||
layer.close(add_attr_index);
|
||||
}
|
||||
repeat_flag = false;
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单验证
|
||||
*/
|
||||
form.verify({
|
||||
num: function(value) {
|
||||
if (value == '') {
|
||||
return;
|
||||
}
|
||||
if (value % 1 != 0) {
|
||||
return '排序数值必须为整数';
|
||||
}
|
||||
if (value < 0) {
|
||||
return '排序数值必须为大于0';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function addGroup() {
|
||||
var add_attr = $("#addGroup").html();
|
||||
laytpl(add_attr).render({}, function(html) {
|
||||
add_attr_index = layer.open({
|
||||
title: '添加笔记分组',
|
||||
skin: 'layer-tips-class',
|
||||
type: 1,
|
||||
area: ['500px'],
|
||||
content: html
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function editGroup(data) {
|
||||
var add_attr = $("#editGroup").html();
|
||||
laytpl(add_attr).render(data, function(html) {
|
||||
add_attr_index = layer.open({
|
||||
title: '编辑笔记分组',
|
||||
skin: 'layer-tips-class',
|
||||
type: 1,
|
||||
area: ['500px'],
|
||||
content: html
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function closeAttrLayer() {
|
||||
layer.close(add_attr_index);
|
||||
}
|
||||
|
||||
// 监听单元格编辑
|
||||
function editSort(group_id, event){
|
||||
var data = $(event).val();
|
||||
|
||||
if (data == '') {
|
||||
$(event).val(0);
|
||||
data = 0;
|
||||
}
|
||||
|
||||
if(!new RegExp("^-?[0-9]\\d*$").test(data)){
|
||||
layer.msg("排序号只能是整数");
|
||||
return ;
|
||||
}
|
||||
if(data<0){
|
||||
layer.msg("排序号必须大于0");
|
||||
return ;
|
||||
}
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: ns.url("notes://shop/group/modifySort"),
|
||||
data: {
|
||||
sort: data,
|
||||
group_id: group_id
|
||||
},
|
||||
dataType: 'JSON',
|
||||
success: function(res) {
|
||||
layer.msg(res.message);
|
||||
if(res.code==0){
|
||||
table.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
439
addon/notes/shop/view/notes/add_article.html
Executable file
439
addon/notes/shop/view/notes/add_article.html
Executable file
@@ -0,0 +1,439 @@
|
||||
<style>
|
||||
.layui-form-selected dl{z-index: 1000;}
|
||||
.upload-img-block .upload-img-box .upload-default{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
|
||||
.multiple-uploading{display: flex;flex-wrap: wrap;}
|
||||
.multiple-uploading .multiple-item{position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;margin-bottom: 10px;padding: 10px;width: 100px;height: 100px;border: 1px dashed #ddd;text-align: center;box-sizing: border-box;line-height: 1;color: #5a5a5a;}
|
||||
.multiple-uploading .multiple-item p{line-height: 20px;margin-top: 5px;}
|
||||
.multiple-uploading .multiple-item span{display: none;position: absolute;top: -10px;right: -7px;width: 20px;height: 20px;border: 1px solid #999;color: #999;background-color: #fff;border-radius: 50%;line-height: 1;font-size: 18px;cursor: pointer;}
|
||||
.multiple-uploading .multiple-item:hover .icon{display: block;}
|
||||
.multiple-uploading .multiple-item ~ .multiple-item{margin-left: 10px;}
|
||||
.multiple-uploading .iconfont{font-size: 30px;color: #6D7278;}
|
||||
#multiple_uploading{cursor: pointer;}
|
||||
.multiple-item img{max-width: 100%;max-height: 100%;}
|
||||
</style>
|
||||
|
||||
<div class="layui-form form-wrap">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label"><span class="required">*</span>笔记标题：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="note_title" lay-verify="required" maxlength="40" autocomplete="off" placeholder="笔记标题最多40个字" class="layui-input len-long">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">摘要：</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="note_abstract" class="layui-textarea len-long" maxlength="100"></textarea>
|
||||
</div>
|
||||
<div class="word-aux">笔记摘要最多可输入100个字</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>封面：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="cover_type" value="0" title="单图" lay-filter="cover_type" checked>
|
||||
<input type="radio" name="cover_type" value="1" title="多图" lay-filter="cover_type">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"></label>
|
||||
<div class="layui-input-block img-upload">
|
||||
<div class="upload-img-block square simple-uploading">
|
||||
<div class="upload-img-box" id="img">
|
||||
<div class="upload-default">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="image" />
|
||||
<i class="del">x</i>
|
||||
</div>
|
||||
|
||||
<div class="multiple-uploading layui-hide">
|
||||
<div class="multiple-item" id="multiple_uploading">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">推荐使用 750x420 像素的图片 最多上传1张</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>笔记分组：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="group_id" lay-verify="required">
|
||||
<option value="">请选择</option>
|
||||
{foreach $group_list as $v}
|
||||
<option value="{$v['group_id']}">{$v['group_name']}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>正文：</label>
|
||||
<div class="layui-input-inline">
|
||||
<script id="editor" type="text/plain" class="special-length" style="height:500px;"></script>
|
||||
<input type="hidden" name="note_content" id="note_content" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">发布时间：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_release_time" value="1" title="显示" checked>
|
||||
<input type="radio" name="is_show_release_time" value="0" title="不显示">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">阅读次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_read_num" value="1" title="显示" checked>
|
||||
<input type="radio" name="is_show_read_num" value="0" title="不显示">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">点赞次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_dianzan_num" value="1" title="显示" checked>
|
||||
<input type="radio" name="is_show_dianzan_num" value="0" title="不显示">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">虚拟阅读数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_read_num" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">虚拟点赞数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_dianzan_num" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="sort" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<button class="layui-btn" lay-submit lay-filter="save">立即发布</button>
|
||||
<button class="layui-btn" lay-submit lay-filter="saveDrafts">保存至草稿箱</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="backNotesList()">返回</button>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="goods_ids" value="" />
|
||||
<input type="hidden" name="note_type" value="{$note_type}" />
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.config.js?time=20240614"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.all.js?time=20240614"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/lang/zh-cn/zh-cn.js"></script>
|
||||
<script>
|
||||
//实例化富文本
|
||||
UE.registerUI('添加商品', function(editor, uiName) {
|
||||
//注册按钮执行时的command命令，使用命令默认就会带有回退操作
|
||||
editor.registerCommand(uiName, {
|
||||
execCommand: function() {
|
||||
alert('execCommand:' + uiName)
|
||||
}
|
||||
});
|
||||
//创建一个button
|
||||
var btn = new UE.ui.Button({
|
||||
//按钮的名字
|
||||
name: uiName,
|
||||
//提示
|
||||
title: uiName,
|
||||
label:'添加商品',
|
||||
//添加额外样式，指定icon图标，这里默认使用一个重复的icon
|
||||
cssRules: 'background-position: -500px 0;',
|
||||
showIcon:false,
|
||||
//点击时执行的命令
|
||||
onclick: function() {
|
||||
//这里可以不用执行命令,做你自己的操作也可
|
||||
// editor.execCommand(uiName);
|
||||
addGoods();
|
||||
}
|
||||
});
|
||||
//当点到编辑内容上时，按钮要做的状态反射
|
||||
editor.addListener('selectionchange', function() {
|
||||
var state = editor.queryCommandState(uiName);
|
||||
if (state == -1) {
|
||||
btn.setDisabled(true);
|
||||
btn.setChecked(false);
|
||||
} else {
|
||||
btn.setDisabled(false);
|
||||
btn.setChecked(state);
|
||||
}
|
||||
});
|
||||
//因为你是添加button,所以需要返回这个button
|
||||
return btn;
|
||||
});
|
||||
|
||||
var ue = UE.getEditor('editor');
|
||||
if($("#note_content").val()){
|
||||
ue.ready(function() {
|
||||
ue.setContent($("#note_content").val());
|
||||
});
|
||||
}
|
||||
|
||||
var form,repeat_flag,
|
||||
IMAGE_MAX = 9, //最多可以上传多少张图片
|
||||
imageCollection = [], //图片集合
|
||||
selectedGoodsId = [],
|
||||
goods_id = [],
|
||||
goods_list =[];
|
||||
|
||||
layui.use(['form'], function() {
|
||||
form = layui.form;
|
||||
repeat_flag = false;
|
||||
|
||||
form.render();
|
||||
|
||||
/**
|
||||
* 图片切换
|
||||
*/
|
||||
form.on('radio(cover_type)', function(data){
|
||||
//0单图 1多图
|
||||
if (data.value == 0){
|
||||
|
||||
if(imageCollection.length) {
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}
|
||||
|
||||
$(".simple-uploading").removeClass("layui-hide");
|
||||
$(".multiple-uploading").addClass("layui-hide");
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 750x420 像素的图片 最多上传1张');
|
||||
|
||||
} else{
|
||||
if(imageCollection.length) {
|
||||
var html = '';
|
||||
html += `<div class="multiple-item" id="multiple_uploading">`;
|
||||
html += `<i class="iconfont iconshangchuan"></i>`;
|
||||
html += `<p>点击上传</p>`;
|
||||
html += `</div>`;
|
||||
|
||||
for (var i = 0; i < imageCollection.length; i++) {
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(imageCollection[i])}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
$(".multiple-uploading").html(html);
|
||||
}
|
||||
|
||||
$(".simple-uploading").addClass("layui-hide");
|
||||
$(".multiple-uploading").removeClass("layui-hide");
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 350x350 像素的图片，最多上传9张');
|
||||
}
|
||||
});
|
||||
|
||||
/* var upload = new Upload({
|
||||
elem: '#img',
|
||||
callback:function (res) {
|
||||
if (res.code >= 0) {
|
||||
imageCollection = [];
|
||||
imageCollection.push(res.data.pic_path)
|
||||
}
|
||||
},
|
||||
deleteCallback:function () {
|
||||
upload.delete();
|
||||
imageCollection = [];
|
||||
}
|
||||
}); */
|
||||
|
||||
// 单图上传
|
||||
$("body").off("click", "#img").on("click", "#img", function () {
|
||||
openAlbum(function (data) {
|
||||
imageCollection = [];
|
||||
imageCollection.push(data[0].pic_path);
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}, 1);
|
||||
});
|
||||
|
||||
//多图上传
|
||||
$("body").off("click","#multiple_uploading").on("click","#multiple_uploading", function () {
|
||||
var html = '';
|
||||
openAlbum(function (data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (imageCollection.length < IMAGE_MAX){
|
||||
imageCollection.push(data[i].pic_path);
|
||||
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(data[i].pic_path)}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
}
|
||||
if (imageCollection.length >= IMAGE_MAX)
|
||||
$("#multiple_uploading").addClass("layui-hide");
|
||||
|
||||
$(".multiple-uploading").append(html);
|
||||
|
||||
}, IMAGE_MAX);
|
||||
});
|
||||
|
||||
$("body").off('click', '.multiple-item .icon').on('click', '.multiple-item .icon', function () {
|
||||
var index = $(this).parent().index() - 1;
|
||||
imageCollection.splice(index,1);
|
||||
$(this).parent().remove();
|
||||
|
||||
if (imageCollection.length < IMAGE_MAX) $("#multiple_uploading").removeClass("layui-hide");
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(立即发布)
|
||||
*/
|
||||
form.on('submit(save)', function(data){
|
||||
var field = data.field;
|
||||
field.status = 1;
|
||||
formSubmit(field)
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(草稿箱)
|
||||
*/
|
||||
form.on('submit(saveDrafts)', function(data){
|
||||
var field = data.field;
|
||||
field.status = 0;
|
||||
formSubmit(field)
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
function formSubmit(data)
|
||||
{
|
||||
if (!imageCollection.length){
|
||||
layer.msg('请选择封面图！', {icon: 5, anim: 6});
|
||||
return;
|
||||
}
|
||||
|
||||
// if (selectedGoodsId.length == 0) {
|
||||
// layer.msg('请选择参与活动的商品！', {icon: 5, anim: 6});
|
||||
// return;
|
||||
// }
|
||||
|
||||
data.cover_img = imageCollection.join();
|
||||
|
||||
var goodsHighlights = [];
|
||||
$(".lightspot-item").each(function (index,item) {
|
||||
goodsHighlights.push($(item).find('input').val());
|
||||
});
|
||||
data.goods_highlights = goodsHighlights.toString();
|
||||
|
||||
if (!ue.getContent()){
|
||||
layer.msg("笔记内容不能为空");
|
||||
return false;
|
||||
}
|
||||
|
||||
if(data.sort < 0){
|
||||
layer.msg("排序号不能小于0");
|
||||
return false;
|
||||
}
|
||||
|
||||
data.note_content = ue.getContent();
|
||||
|
||||
if(repeat_flag) return;
|
||||
repeat_flag = true;
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
dataType: 'JSON',
|
||||
url: ns.url("notes://shop/notes/add"),
|
||||
data: data,
|
||||
async: false,
|
||||
success: function(res){
|
||||
repeat_flag = false;
|
||||
|
||||
if (res.code == 0) {
|
||||
layer.confirm('添加成功', {
|
||||
title:'操作提示',
|
||||
btn: ['返回列表', '继续添加'],
|
||||
closeBtn: 0,
|
||||
yes: function(index, layero){
|
||||
if(data.status == 0){
|
||||
location.hash = ns.hash("notes://shop/notes/drafts");
|
||||
}else{
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
}
|
||||
layer.close(index);
|
||||
},
|
||||
btn2: function(index, layero) {
|
||||
listenerHash(); // 刷新页面
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
}else{
|
||||
layer.msg(res.message);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* 添加商品 */
|
||||
function addGoods(){
|
||||
goodsSelect(function (data) {
|
||||
|
||||
for (var key in data) {
|
||||
var item = data[key];
|
||||
|
||||
var temp_html = `<div style="margin-bottom:20px;">`;
|
||||
temp_html += `<div style="width:100%;padding:8px;box-sizing:border-box;border-radius:4px;background:#f8f8f8;display:flex">`;
|
||||
temp_html += `<img style='width:74px;height:74px;border-radius:4px' src="${item.goods_image ? ns.img(item.goods_image) : ''}">`;
|
||||
temp_html += `<div style="margin-left: 10px;width: 200px;flex: 1;min-height: 0;min-width: 0;">`;
|
||||
temp_html += `<div style="font-size:14px;color:#202021;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" >${item.goods_name}</div>`;
|
||||
temp_html += `<div style="font-size:13px;color:#5e6066;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></div>`;
|
||||
temp_html += `<div style="font-size:14px;color:#fd463e;font-weight:700;margin-top:10px"><span>￥</span>${item.price}</div>`;
|
||||
temp_html += `</div>`;
|
||||
temp_html += `</div></div>`;
|
||||
ue.setContent(temp_html, true);
|
||||
}
|
||||
|
||||
},selectedGoodsId, {mode: "spu"});
|
||||
}
|
||||
|
||||
function backNotesList() {
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
}
|
||||
|
||||
//检测数据类型
|
||||
function detectionNumType(el, type) {
|
||||
var value = $(el).val();
|
||||
//大于零 且 不是小数
|
||||
if (value < 0 && type == 'integral')
|
||||
$(el).val(0);
|
||||
else if (type == 'integral')
|
||||
$(el).val(Math.round(value));
|
||||
|
||||
//大于1 且 不是小数
|
||||
if (value < 1 && type == 'positiveInteger')
|
||||
$(el).val(1);
|
||||
else if (type == 'positiveInteger')
|
||||
$(el).val(Math.round(value));
|
||||
//大于零可以是小数
|
||||
if (type == 'positiveNumber') {
|
||||
value = parseFloat(value).toFixed(2);
|
||||
if (value < 0)
|
||||
$(el).val(0);
|
||||
else
|
||||
$(el).val(value);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
545
addon/notes/shop/view/notes/add_goods_item.html
Executable file
545
addon/notes/shop/view/notes/add_goods_item.html
Executable file
@@ -0,0 +1,545 @@
|
||||
<style>
|
||||
.layui-form-selected dl {
|
||||
z-index: 1000;
|
||||
}
|
||||
.upload-img-block .upload-img-box .upload-default{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
|
||||
|
||||
.multiple-uploading {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.multiple-uploading .multiple-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px dashed #ddd;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
line-height: 1;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
|
||||
.multiple-uploading .multiple-item p {
|
||||
line-height: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.multiple-uploading .multiple-item span {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -7px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid #999;
|
||||
color: #999;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
line-height: 1;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.multiple-uploading .multiple-item:hover .icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.multiple-uploading .multiple-item ~ .multiple-item {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.multiple-uploading .iconfont{font-size: 30px;color: #6D7278;}
|
||||
|
||||
#multiple_uploading {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.multiple-item img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.shopping-lightspot {
|
||||
width: 290px;
|
||||
}
|
||||
|
||||
.shopping-lightspot .add-lightspot {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.shopping-lightspot .add-lightspot, .shopping-lightspot .lightspot-item {
|
||||
padding: 15px;
|
||||
border: 1px dashed #e5e5e5;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.shopping-lightspot .lightspot-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.shopping-lightspot .lightspot-item span {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -9px;
|
||||
display: none;
|
||||
text-align: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid #999;
|
||||
border-radius: 50%;
|
||||
font-size: 18px;
|
||||
color: #999;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.shopping-lightspot .lightspot-item:hover span {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.shopping-lightspot .lightspot-item input {
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-collapse tips-wrap">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">操作提示</h2>
|
||||
<ul class="layui-colla-content layui-show">
|
||||
<li>管理员可以在此页添加店铺笔记</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form form-wrap">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label"><span class="required">*</span>笔记标题：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="note_title" lay-verify="required" maxlength="40" autocomplete="off" placeholder="笔记标题最多40个字" class="layui-input len-long">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">摘要：</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="note_abstract" class="layui-textarea len-long" maxlength="100"></textarea>
|
||||
</div>
|
||||
<div class="word-aux">笔记摘要最多可输入100个字</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>封面：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="cover_type" value="0" title="单图" lay-filter="cover_type" checked>
|
||||
<input type="radio" name="cover_type" value="1" title="多图" lay-filter="cover_type">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"></label>
|
||||
<div class="layui-input-block img-upload">
|
||||
<div class="upload-img-block square simple-uploading">
|
||||
<div class="upload-img-box" id="img">
|
||||
<div class="upload-default">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="image"/>
|
||||
<i class="del">x</i>
|
||||
</div>
|
||||
|
||||
<div class="multiple-uploading layui-hide">
|
||||
<div class="multiple-item" id="multiple_uploading">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">推荐使用 750x420 像素的图片 最多上传1张</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>笔记分组：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="group_id" lay-verify="required">
|
||||
<option value="">请选择</option>
|
||||
{foreach $group_list as $v}
|
||||
<option value="{$v['group_id']}">{$v['group_name']}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">关联商品：</label>
|
||||
<div class="layui-input-inline">
|
||||
<div class="upload-img-block square">
|
||||
<div class="upload-img-box" id="goodImg" lay-verify="select" onclick="addGoods()">
|
||||
<div class="upload-default">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>选择商品</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">商品亮点：</label>
|
||||
<div class="layui-input-block shopping-lightspot">
|
||||
<div class="add-lightspot">+ 添加亮点</div>
|
||||
</div>
|
||||
<div class="word-aux">商品亮点最多可添加3个亮点</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>正文：</label>
|
||||
<div class="layui-input-inline">
|
||||
<script id="editor" type="text/plain" class="special-length" style="height:500px;"></script>
|
||||
<input type="hidden" name="note_content" id="note_content"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">发布时间：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_release_time" value="1" title="显示" checked>
|
||||
<input type="radio" name="is_show_release_time" value="0" title="不显示">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">阅读次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_read_num" value="1" title="显示" checked>
|
||||
<input type="radio" name="is_show_read_num" value="0" title="不显示">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">点赞次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_dianzan_num" value="1" title="显示" checked>
|
||||
<input type="radio" name="is_show_dianzan_num" value="0" title="不显示">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">虚拟阅读数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_read_num" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">虚拟点赞数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_dianzan_num" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="sort" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<button class="layui-btn" lay-submit lay-filter="save">立即发布</button>
|
||||
<button class="layui-btn" lay-submit lay-filter="saveDrafts">保存至草稿箱</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="backNotesList()">返回</button>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="goods_ids" value=""/>
|
||||
<input type="hidden" name="note_type" value="{$note_type}"/>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.config.js?time=20240614"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.all.js?time=20240614"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/lang/zh-cn/zh-cn.js"></script>
|
||||
<script>
|
||||
var form, upload, repeat_flag,
|
||||
IMAGE_MAX = 9, //最多可以上传多少张图片
|
||||
imageCollection = [], //图片集合
|
||||
goods_ids = "";
|
||||
|
||||
//实例化富文本
|
||||
var ue = UE.getEditor('editor');
|
||||
if ($("#note_content").val()) {
|
||||
ue.ready(function () {
|
||||
ue.setContent($("#note_content").val());
|
||||
});
|
||||
}
|
||||
|
||||
layui.use(['form'], function () {
|
||||
form = layui.form;
|
||||
repeat_flag = false;
|
||||
|
||||
form.render();
|
||||
|
||||
//图片切换
|
||||
form.on('radio(cover_type)', function (data) {
|
||||
//0单图 1多图
|
||||
if (data.value == 0) {
|
||||
|
||||
if (imageCollection.length) {
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}
|
||||
|
||||
$(".simple-uploading").removeClass("layui-hide");
|
||||
$(".multiple-uploading").addClass("layui-hide");
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 750x420 像素的图片 最多上传1张');
|
||||
|
||||
} else {
|
||||
if (imageCollection.length) {
|
||||
var html = '';
|
||||
html += `<div class="multiple-item" id="multiple_uploading">`;
|
||||
html += `<i class="iconfont iconshangchuan"></i>`;
|
||||
html += `<p>点击上传</p>`;
|
||||
html += `</div>`;
|
||||
|
||||
for (var i = 0; i < imageCollection.length; i++) {
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(imageCollection[i])}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
$(".multiple-uploading").html(html);
|
||||
}
|
||||
|
||||
$(".simple-uploading").addClass("layui-hide");
|
||||
$(".multiple-uploading").removeClass("layui-hide");
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 350x350 像素的图片，最多上传9张');
|
||||
}
|
||||
});
|
||||
|
||||
/* var upload = new Upload({
|
||||
elem: '#img',
|
||||
callback: function (res) {
|
||||
if (res.code >= 0) {
|
||||
imageCollection = [];
|
||||
imageCollection.push(res.data.pic_path)
|
||||
}
|
||||
},
|
||||
deleteCallback: function () {
|
||||
upload.delete();
|
||||
imageCollection = [];
|
||||
}
|
||||
}); */
|
||||
// 单图上传
|
||||
$("body").off("click", "#img").on("click", "#img", function () {
|
||||
openAlbum(function (data) {
|
||||
imageCollection = [];
|
||||
imageCollection.push(data[0].pic_path);
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}, 1);
|
||||
});
|
||||
|
||||
//多图上传
|
||||
$("body").off("click", "#multiple_uploading").on("click", "#multiple_uploading", function () {
|
||||
var html = '';
|
||||
openAlbum(function (data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (imageCollection.length < IMAGE_MAX) {
|
||||
imageCollection.push(data[i].pic_path);
|
||||
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(data[i].pic_path)}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
}
|
||||
if (imageCollection.length >= IMAGE_MAX)
|
||||
$("#multiple_uploading").addClass("layui-hide");
|
||||
|
||||
$(".multiple-uploading").append(html);
|
||||
|
||||
}, IMAGE_MAX);
|
||||
});
|
||||
|
||||
$("body").off('click', '.multiple-item .icon').on('click', '.multiple-item .icon', function () {
|
||||
var index = $(this).parent().index() - 1;
|
||||
imageCollection.splice(index, 1);
|
||||
$(this).parent().remove();
|
||||
|
||||
if (imageCollection.length < IMAGE_MAX)
|
||||
$("#multiple_uploading").removeClass("layui-hide");
|
||||
});
|
||||
|
||||
//商品亮点
|
||||
$("body").off("click", ".shopping-lightspot .add-lightspot").on("click", ".shopping-lightspot .add-lightspot", function () {
|
||||
var len = 0,
|
||||
html = "";
|
||||
|
||||
html += `<div class="lightspot-item">`;
|
||||
html += `亮点名称：<input type="text" class="layui-input" maxlength="10" placeholder="最多10个字">`;
|
||||
html += `<span>x</span>`;
|
||||
html += `</div>`;
|
||||
$(this).before(html);
|
||||
|
||||
len = $(".shopping-lightspot .lightspot-item").length;
|
||||
if (len >= 3)
|
||||
$(this).addClass("layui-hide");
|
||||
});
|
||||
|
||||
$("body").off("click", ".shopping-lightspot .lightspot-item span").on("click", ".shopping-lightspot .lightspot-item span", function () {
|
||||
$(this).parents(".lightspot-item").remove();
|
||||
|
||||
var len = $(".shopping-lightspot .lightspot-item").length;
|
||||
if (len < 3)
|
||||
$(".shopping-lightspot .add-lightspot").removeClass("layui-hide");
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(立即发布)
|
||||
*/
|
||||
form.on('submit(save)', function (data) {
|
||||
field = data.field;
|
||||
field.status = 1;
|
||||
formSubmit(field)
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(草稿箱)
|
||||
*/
|
||||
form.on('submit(saveDrafts)', function (data) {
|
||||
var field = data.field;
|
||||
field.status = 0;
|
||||
formSubmit(field)
|
||||
});
|
||||
|
||||
function formSubmit(data) {
|
||||
|
||||
if (selectedGoodsId.length == 0) {
|
||||
layer.msg('请选择参与活动的商品！', {icon: 5, anim: 6});
|
||||
return;
|
||||
}
|
||||
|
||||
data.cover_img = imageCollection.join();
|
||||
|
||||
var goodsHighlights = [];
|
||||
$(".lightspot-item").each(function (index, item) {
|
||||
goodsHighlights.push($(item).find('input').val());
|
||||
});
|
||||
data.goods_highlights = goodsHighlights.toString();
|
||||
|
||||
if (!ue.getContent()) {
|
||||
layer.msg("笔记内容不能为空");
|
||||
return false;
|
||||
}
|
||||
data.note_content = ue.getContent();
|
||||
|
||||
if (data.cover_img == '') {
|
||||
layer.msg("请选择笔记封面");
|
||||
return false;
|
||||
}
|
||||
|
||||
if(data.sort < 0){
|
||||
layer.msg("排序号不能小于0");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (repeat_flag) return;
|
||||
repeat_flag = true;
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
dataType: 'JSON',
|
||||
url: ns.url("notes://shop/notes/add"),
|
||||
data: data,
|
||||
async: false,
|
||||
success: function (res) {
|
||||
repeat_flag = false;
|
||||
|
||||
if (res.code == 0) {
|
||||
layer.confirm('添加成功', {
|
||||
title: '操作提示',
|
||||
btn: ['返回列表', '继续添加'],
|
||||
closeBtn: 0,
|
||||
yes: function (index, layero) {
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
layer.close(index);
|
||||
},
|
||||
btn2: function (index, layero) {
|
||||
listenerHash(); // 刷新页面
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
layer.msg(res.message);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 添加商品
|
||||
*/
|
||||
var selectedGoodsId = [];
|
||||
|
||||
function addGoods() {
|
||||
goodsSelect(function (data) {
|
||||
if (Object.keys(data).length == 0) {
|
||||
selectGoodsSkuId = [];
|
||||
$("#goodImg").html('<div class="upload-default"> <i class="iconfont iconshangchuan"></i> <p>选择商品</p> </div>');
|
||||
return;
|
||||
}
|
||||
|
||||
selectedGoodsId = [];
|
||||
for (var key in data) {
|
||||
var item = data[key];
|
||||
goods_ids = item.goods_id;
|
||||
$("input[name=goods_ids]").val(goods_ids);
|
||||
$("#goodImg").html("<img src=" + ns.img(item.goods_image.split(",")[0], 'SMALL') + " >");
|
||||
}
|
||||
selectedGoodsId.push(goods_ids);
|
||||
}, selectedGoodsId, {mode: "spu", max_num: 1, min_num: 1, disabled: 0});
|
||||
}
|
||||
|
||||
function backNotesList() {
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
}
|
||||
//检测数据类型
|
||||
function detectionNumType(el, type) {
|
||||
var value = $(el).val();
|
||||
//大于零 且 不是小数
|
||||
if (value < 0 && type == 'integral')
|
||||
$(el).val(0);
|
||||
else if (type == 'integral')
|
||||
$(el).val(Math.round(value));
|
||||
|
||||
//大于1 且 不是小数
|
||||
if (value < 1 && type == 'positiveInteger')
|
||||
$(el).val(1);
|
||||
else if (type == 'positiveInteger')
|
||||
$(el).val(Math.round(value));
|
||||
//大于零可以是小数
|
||||
if (type == 'positiveNumber') {
|
||||
value = parseFloat(value).toFixed(2);
|
||||
if (value < 0)
|
||||
$(el).val(0);
|
||||
else
|
||||
$(el).val(value);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
572
addon/notes/shop/view/notes/add_goods_video.html
Executable file
572
addon/notes/shop/view/notes/add_goods_video.html
Executable file
@@ -0,0 +1,572 @@
|
||||
<link rel="stylesheet" href="__STATIC__/ext/video/video.css">
|
||||
<style>
|
||||
.layui-form-selected dl{z-index: 1000;}
|
||||
.upload-img-block .upload-img-box .upload-default{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
|
||||
.multiple-uploading{display: flex;flex-wrap: wrap;}
|
||||
.multiple-uploading .multiple-item{position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;margin-bottom: 10px;padding: 10px;width: 100px;height: 100px;border: 1px dashed #ddd;text-align: center;box-sizing: border-box;line-height: 1;color: #5a5a5a;}
|
||||
.multiple-uploading .multiple-item p{line-height: 20px;margin-top: 5px;}
|
||||
.multiple-uploading .multiple-item span{display: none;position: absolute;top: -10px;right: -7px;width: 20px;height: 20px;border: 1px solid #999;color: #999;background-color: #fff;border-radius: 50%;line-height: 1;font-size: 18px;cursor: pointer;}
|
||||
.multiple-uploading .multiple-item:hover .icon{display: block;}
|
||||
.multiple-uploading .multiple-item ~ .multiple-item{margin-left: 10px;}
|
||||
.multiple-uploading .iconfont{font-size: 30px;color: #6D7278;}
|
||||
#multiple_uploading{cursor: pointer;}
|
||||
.multiple-item img{max-width: 100%;max-height: 100%;}
|
||||
|
||||
/*上传视频相关*/
|
||||
.video-thumb{display:block;float:left;width:250px;height:120px;position:relative}
|
||||
.delete-video{width:51px;height:51px;cursor:pointer;position:absolute;right:150px;top:45px;color:#fff;z-index:100}
|
||||
.replace-video{width:75px;height:51px;cursor:pointer;position:absolute;right:50px;top:45px;color:#fff;z-index:100}
|
||||
.replace-video2{right:100px}
|
||||
.mask{position:absolute;left:0;width:250px;height:92px;background:#000;opacity:.6;cursor:pointer;z-index:10}
|
||||
.del-img{width:14px;margin-right:5px;padding-bottom:2px}
|
||||
.up-img{width:14px;height:14px;margin-right:5px;padding-bottom:3px}
|
||||
.up-video{position:absolute;left:0;width:250px;height:92px;cursor:pointer;z-index:10}
|
||||
.video-thumb .hide{display:none!important}
|
||||
.video-thumb>#goods_video{width:100%!important;height:121px;background:#fff}
|
||||
.hide{display:none}
|
||||
</style>
|
||||
|
||||
<div class="layui-form form-wrap">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label"><span class="required">*</span>笔记标题：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="note_title" lay-verify="required" maxlength="40" autocomplete="off" placeholder="笔记标题最多40个字" class="layui-input len-long">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">摘要：</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="note_abstract" class="layui-textarea len-long" maxlength="100"></textarea>
|
||||
</div>
|
||||
<div class="word-aux">笔记摘要最多可输入100个字</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>封面：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="cover_type" value="0" title="单图" lay-filter="cover_type" checked>
|
||||
<input type="radio" name="cover_type" value="1" title="多图" lay-filter="cover_type">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"></label>
|
||||
<div class="layui-input-block img-upload">
|
||||
<div class="upload-img-block square simple-uploading">
|
||||
<div class="upload-img-box" id="img">
|
||||
<div class="upload-default">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="image" />
|
||||
<i class="del">x</i>
|
||||
</div>
|
||||
|
||||
<div class="multiple-uploading layui-hide">
|
||||
<div class="multiple-item" id="multiple_uploading">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">推荐使用 750x420 像素的图片 最多上传1张</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>笔记分组：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="group_id" lay-verify="required">
|
||||
<option value="">请选择</option>
|
||||
{foreach $group_list as $v}
|
||||
<option value="{$v['group_id']}">{$v['group_name']}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item goods_list">
|
||||
<label class="layui-form-label">关联商品：</label>
|
||||
<div class="layui-input-block">
|
||||
<table id="selected_goods_list"></table>
|
||||
<button class="layui-btn" onclick="addGoods()">选择商品</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>添加视频：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="hidden" name="video_path" placeholder="在此输入外链视频地址" value="" autocomplete="off" class="layui-input len-long">
|
||||
<div class="video-thumb">
|
||||
<video id="goods_video" class="video-js vjs-big-play-centered" controls="" poster="SHOP_IMG/goods_video_preview.png" preload="auto"></video>
|
||||
</div>
|
||||
<div id="videoUpload2" class="up-video" title="商品视频" >
|
||||
<span class="delete-video hide" onclick="deleteVideo()"><img class="del-img" src="SHOP_IMG/delete.png">删除</span>
|
||||
<span id="" class="replace-video hide js-add-goods-video" ><img class="up-img" src="SHOP_IMG/upload.png">上传视频</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">发布时间：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_release_time" value="1" title="显示" checked>
|
||||
<input type="radio" name="is_show_release_time" value="0" title="不显示">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">阅读次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_read_num" value="1" title="显示" checked>
|
||||
<input type="radio" name="is_show_read_num" value="0" title="不显示">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">点赞次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_dianzan_num" value="1" title="显示" checked>
|
||||
<input type="radio" name="is_show_dianzan_num" value="0" title="不显示">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">虚拟阅读数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_read_num" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">虚拟点赞数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_dianzan_num" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="sort" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<button class="layui-btn" lay-submit lay-filter="save">立即发布</button>
|
||||
<button class="layui-btn" lay-submit lay-filter="saveDrafts">保存至草稿箱</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="backNotesList()">返回</button>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="goods_ids" value="" />
|
||||
<input type="hidden" name="note_type" value="{$note_type}" />
|
||||
</div>
|
||||
|
||||
<!-- 操作 -->
|
||||
<script type="text/html" id="operation">
|
||||
<div class="table-btn">
|
||||
<a class="layui-btn" onclick="delGoods({{d.goods_id}})">删除</a>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script src="__STATIC__/ext/video/videojs-ie8.min.js"></script>
|
||||
<script src="__STATIC__/ext/video/video.min.js"></script>
|
||||
<script>
|
||||
var form,repeat_flag,
|
||||
IMAGE_MAX = 9, //最多可以上传多少张图片
|
||||
imageCollection = [], //图片集合
|
||||
selectedGoodsId = [],
|
||||
goods_id = [],
|
||||
goods_list =[];
|
||||
|
||||
layui.use(['form'], function() {
|
||||
form = layui.form;
|
||||
repeat_flag = false;
|
||||
|
||||
form.render();
|
||||
|
||||
/**
|
||||
* 图片切换
|
||||
*/
|
||||
form.on('radio(cover_type)', function(data){
|
||||
//0单图 1多图
|
||||
if (data.value == 0){
|
||||
|
||||
if(imageCollection.length) {
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}
|
||||
|
||||
$(".simple-uploading").removeClass("layui-hide");
|
||||
$(".multiple-uploading").addClass("layui-hide");
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 750x420 像素的图片 最多上传1张');
|
||||
|
||||
} else{
|
||||
if(imageCollection.length) {
|
||||
var html = '';
|
||||
html += `<div class="multiple-item" id="multiple_uploading">`;
|
||||
html += `<i class="iconfont iconshangchuan"></i>`;
|
||||
html += `<p>点击上传</p>`;
|
||||
html += `</div>`;
|
||||
|
||||
for (var i = 0; i < imageCollection.length; i++) {
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(imageCollection[i])}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
$(".multiple-uploading").html(html);
|
||||
}
|
||||
|
||||
$(".simple-uploading").addClass("layui-hide");
|
||||
$(".multiple-uploading").removeClass("layui-hide");
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 350x350 像素的图片，最多上传9张');
|
||||
}
|
||||
});
|
||||
|
||||
/* var upload = new Upload({
|
||||
elem: '#img',
|
||||
callback:function (res) {
|
||||
if (res.code >= 0) {
|
||||
imageCollection = [];
|
||||
imageCollection.push(res.data.pic_path)
|
||||
}
|
||||
},
|
||||
deleteCallback:function () {
|
||||
upload.delete();
|
||||
imageCollection = [];
|
||||
}
|
||||
}); */
|
||||
|
||||
// 单图上传
|
||||
$("body").off("click", "#img").on("click", "#img", function () {
|
||||
openAlbum(function (data) {
|
||||
imageCollection = [];
|
||||
imageCollection.push(data[0].pic_path);
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}, 1);
|
||||
});
|
||||
|
||||
//多图上传
|
||||
$("body").off("click","#multiple_uploading").on("click","#multiple_uploading", function () {
|
||||
var html = '';
|
||||
openAlbum(function (data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (imageCollection.length < IMAGE_MAX){
|
||||
imageCollection.push(data[i].pic_path);
|
||||
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(data[i].pic_path)}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
}
|
||||
if (imageCollection.length >= IMAGE_MAX)
|
||||
$("#multiple_uploading").addClass("layui-hide");
|
||||
|
||||
$(".multiple-uploading").append(html);
|
||||
|
||||
}, IMAGE_MAX);
|
||||
});
|
||||
|
||||
$("body").off('click', '.multiple-item .icon').on('click', '.multiple-item .icon', function () {
|
||||
var index = $(this).parent().index() - 1;
|
||||
imageCollection.splice(index,1);
|
||||
$(this).parent().remove();
|
||||
|
||||
if (imageCollection.length < IMAGE_MAX) $("#multiple_uploading").removeClass("layui-hide");
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(立即发布)
|
||||
*/
|
||||
form.on('submit(save)', function(data){
|
||||
var field = data.field;
|
||||
field.status = 1;
|
||||
formSubmit(field)
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(草稿箱)
|
||||
*/
|
||||
form.on('submit(saveDrafts)', function(data){
|
||||
var field = data.field;
|
||||
field.status = 0;
|
||||
|
||||
formSubmit(field)
|
||||
});
|
||||
|
||||
var upload = new Upload({
|
||||
elem: '#videoUpload',
|
||||
url: ns.url("shop/upload/video"),
|
||||
accept: "video",
|
||||
callback:function (res) {
|
||||
if (res.code >= 0) {
|
||||
$("input[name='video_path']").val(res.data.path);
|
||||
loadVideo();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
function formSubmit(data)
|
||||
{
|
||||
if (!imageCollection.length){
|
||||
layer.msg('请选择封面图！', {icon: 5, anim: 6});
|
||||
return;
|
||||
}
|
||||
|
||||
// if (selectedGoodsId.length == 0) {
|
||||
// layer.msg('请选择参与活动的商品！', {icon: 5, anim: 6});
|
||||
// return;
|
||||
// }
|
||||
|
||||
data.cover_img = imageCollection.join();
|
||||
if(data.video_path == ''){
|
||||
layer.msg('请选择视频！', {icon: 5, anim: 6});
|
||||
return;
|
||||
}
|
||||
|
||||
if(data.sort < 0){
|
||||
layer.msg("排序号不能小于0");
|
||||
return false;
|
||||
}
|
||||
|
||||
if(repeat_flag) return;
|
||||
repeat_flag = true;
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
dataType: 'JSON',
|
||||
url: ns.url("notes://shop/notes/add"),
|
||||
data: data,
|
||||
async: false,
|
||||
success: function(res){
|
||||
repeat_flag = false;
|
||||
|
||||
if (res.code == 0) {
|
||||
layer.confirm('添加成功', {
|
||||
title:'操作提示',
|
||||
btn: ['返回列表', '继续添加'],
|
||||
closeBtn: 0,
|
||||
yes: function(index, layero){
|
||||
if(data.status == 0){
|
||||
location.hash = ns.hash("notes://shop/notes/drafts");
|
||||
}else{
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
}
|
||||
layer.close(index);
|
||||
},
|
||||
btn2: function(index, layero) {
|
||||
listenerHash(); // 刷新页面
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
}else{
|
||||
layer.msg(res.message);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 表格渲染
|
||||
renderTable();
|
||||
function renderTable(goods_list = []) {
|
||||
//展示已知数据
|
||||
table = new Table({
|
||||
elem: '#selected_goods_list',
|
||||
cols: [
|
||||
[{
|
||||
field: 'goods_name',
|
||||
title: '商品名称',
|
||||
unresize: 'false',
|
||||
width: '50%'
|
||||
}, {
|
||||
field: 'price',
|
||||
title: '商品价格(元)',
|
||||
unresize: 'false',
|
||||
align: 'right',
|
||||
width: '20%',
|
||||
templet: function(data) {
|
||||
return '￥' + data.price;
|
||||
}
|
||||
}, {
|
||||
field: 'goods_stock',
|
||||
title: '库存',
|
||||
unresize: 'false',
|
||||
align: 'center',
|
||||
width: '20%'
|
||||
}, {
|
||||
title: '操作',
|
||||
toolbar: '#operation',
|
||||
unresize: 'false',
|
||||
align:'right'
|
||||
}],
|
||||
],
|
||||
data: goods_list
|
||||
});
|
||||
}
|
||||
|
||||
/* 添加商品 */
|
||||
function addGoods(){
|
||||
goodsSelect(function (data) {
|
||||
|
||||
goods_id = [];
|
||||
goods_list = [];
|
||||
|
||||
for (var key in data) {
|
||||
goods_id.push(data[key].goods_id);
|
||||
goods_list.push(data[key]);
|
||||
}
|
||||
|
||||
renderTable(goods_list);
|
||||
$("input[name='goods_ids']").val(goods_id.toString());
|
||||
selectedGoodsId = goods_id;
|
||||
|
||||
},selectedGoodsId, {mode: "spu"});
|
||||
}
|
||||
|
||||
// 删除选中商品
|
||||
function delGoods(id) {
|
||||
$.each(goods_list, function(index, item) {
|
||||
var goods_id = item.goods_id;
|
||||
|
||||
if (id == Number(goods_id)) {
|
||||
goods_list.splice(index, 1);
|
||||
renderTable(goods_list);
|
||||
}
|
||||
});
|
||||
|
||||
$.each(selectedGoodsId, function(index, item) {
|
||||
if (id == Number(item)) {
|
||||
selectedGoodsId.splice(index, 1);
|
||||
goods_id = selectedGoodsId;
|
||||
}
|
||||
});
|
||||
$("input[name='goods_ids']").val(goods_id.toString());
|
||||
}
|
||||
|
||||
function backNotesList() {
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
}
|
||||
|
||||
//检测数据类型
|
||||
function detectionNumType(el, type) {
|
||||
var value = $(el).val();
|
||||
//大于零 且 不是小数
|
||||
if (value < 0 && type == 'integral')
|
||||
$(el).val(0);
|
||||
else if (type == 'integral')
|
||||
$(el).val(Math.round(value));
|
||||
|
||||
//大于1 且 不是小数
|
||||
if (value < 1 && type == 'positiveInteger')
|
||||
$(el).val(1);
|
||||
else if (type == 'positiveInteger')
|
||||
$(el).val(Math.round(value));
|
||||
//大于零可以是小数
|
||||
if (type == 'positiveNumber') {
|
||||
value = parseFloat(value).toFixed(2);
|
||||
if (value < 0)
|
||||
$(el).val(0);
|
||||
else
|
||||
$(el).val(value);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteVideoClass(){
|
||||
$('#goods_video').removeClass("vjs-error");
|
||||
}
|
||||
//删除已选择的视频
|
||||
function deleteVideo() {
|
||||
var src = $("input[name='video_path']").val();
|
||||
if (src != "") {
|
||||
var video = 'goods_video';
|
||||
var myPlayer = videojs(video);
|
||||
videojs(video).ready(function () {
|
||||
var myPlayer = this;
|
||||
myPlayer.pause();
|
||||
});
|
||||
|
||||
$("#goods_video_html5_api").attr('src', "");
|
||||
$(".vjs-modal-dialog-content").hide();
|
||||
$(".vjs-error-display").hide();
|
||||
setTimeout("deleteVideoClass()",30 );
|
||||
$('#goods_video_html5_api').attr('controls', true);
|
||||
$(".vjs-poster").hide();
|
||||
|
||||
$("input[name='video_path']").val('');
|
||||
}
|
||||
}
|
||||
|
||||
$('body').off('mouseover', '#videoUpload2').on('mouseover', '#videoUpload2', function () {
|
||||
$(this).addClass('mask');
|
||||
var src = $('#goods_video_html5_api').attr('src');
|
||||
if(src) {
|
||||
$(".delete-video").removeClass('hide');
|
||||
$(".replace-video").removeClass('hide').removeClass('replace-video2');
|
||||
} else {
|
||||
$(".replace-video").removeClass('hide').addClass('replace-video2');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$('body').off('mouseout', '#videoUpload2').on('mouseout', '#videoUpload2', function () {
|
||||
$(this).removeClass('mask');
|
||||
$(".delete-video").addClass('hide');
|
||||
$(".replace-video").addClass('hide');
|
||||
});
|
||||
|
||||
//添加商品视频
|
||||
$("body").off("click", ".js-add-goods-video").on("click", ".js-add-goods-video", function () {
|
||||
openAlbum(function (data) {
|
||||
if(data.length > 0) {
|
||||
$("input[name='video_path']").val(data[0]['pic_path']);
|
||||
loadVideo();
|
||||
}
|
||||
}, 1, 0, 'video');
|
||||
});
|
||||
|
||||
/**
|
||||
* 加载视频
|
||||
* @param flag 是否暂停
|
||||
*/
|
||||
function loadVideo(flag) {
|
||||
|
||||
var video_path = $("input[name='video_path']").val();
|
||||
if (!video_path.length) return;
|
||||
|
||||
var video = "goods_video";
|
||||
var myPlayer = videojs(video);
|
||||
var value = ns.img(video_path);
|
||||
|
||||
videojs(video).ready(function () {
|
||||
var myPlayer = this;
|
||||
myPlayer.src(value);
|
||||
myPlayer.load(value);
|
||||
myPlayer.play();
|
||||
if (flag) {
|
||||
setTimeout(function () {
|
||||
myPlayer.pause();
|
||||
}, 10);
|
||||
}
|
||||
setTimeout(function () {
|
||||
if (!$(".video-thumb .vjs-error-display").hasClass("vjs-hidden")) {
|
||||
$("input[name='video_path']").val("");//video.js Line:7873
|
||||
layer.msg("媒体不能加载，要么是因为服务器或网络失败，要么是因为格式不受支持。");
|
||||
} else {
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
471
addon/notes/shop/view/notes/add_shop_said.html
Executable file
471
addon/notes/shop/view/notes/add_shop_said.html
Executable file
@@ -0,0 +1,471 @@
|
||||
<style>
|
||||
.layui-form-selected dl{z-index: 1000;}
|
||||
.upload-img-block .upload-img-box .upload-default{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
|
||||
.multiple-uploading{display: flex;flex-wrap: wrap;}
|
||||
.multiple-uploading .multiple-item{position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;margin-bottom: 10px;padding: 10px;width: 100px;height: 100px;border: 1px dashed #ddd;text-align: center;box-sizing: border-box;line-height: 1;color: #5a5a5a;}
|
||||
.multiple-uploading .multiple-item p{line-height: 20px;margin-top: 5px;}
|
||||
.multiple-uploading .multiple-item span{display: none;position: absolute;top: -10px;right: -7px;width: 20px;height: 20px;border: 1px solid #999;color: #999;background-color: #fff;border-radius: 50%;line-height: 1;font-size: 18px;cursor: pointer;}
|
||||
.multiple-uploading .multiple-item:hover .icon{display: block;}
|
||||
.multiple-uploading .multiple-item ~ .multiple-item{margin-left: 10px;}
|
||||
.multiple-uploading .iconfont{font-size: 30px;color: #6D7278;}
|
||||
#multiple_uploading{cursor: pointer;}
|
||||
.multiple-item img{max-width: 100%;max-height: 100%;}
|
||||
</style>
|
||||
|
||||
<div class="layui-form form-wrap">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label"><span class="required">*</span>笔记标题：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="note_title" lay-verify="required" maxlength="40" autocomplete="off" placeholder="笔记标题最多40个字" class="layui-input len-long">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">摘要：</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="note_abstract" class="layui-textarea len-long" maxlength="100"></textarea>
|
||||
</div>
|
||||
<div class="word-aux">笔记摘要最多可输入100个字</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>封面：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="cover_type" value="0" title="单图" lay-filter="cover_type" checked>
|
||||
<input type="radio" name="cover_type" value="1" title="多图" lay-filter="cover_type">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"></label>
|
||||
<div class="layui-input-block img-upload">
|
||||
<div class="upload-img-block square simple-uploading">
|
||||
<div class="upload-img-box" id="img">
|
||||
<div class="upload-default">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="image" />
|
||||
<i class="del">x</i>
|
||||
</div>
|
||||
|
||||
<div class="multiple-uploading layui-hide">
|
||||
<div class="multiple-item" id="multiple_uploading">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">推荐使用 750x420 像素的图片 最多上传1张</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>笔记分组：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="group_id" lay-verify="required">
|
||||
<option value="">请选择</option>
|
||||
{foreach $group_list as $v}
|
||||
<option value="{$v['group_id']}">{$v['group_name']}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item goods_list">
|
||||
<label class="layui-form-label">选择商品：</label>
|
||||
<div class="layui-input-block">
|
||||
<table id="selected_goods_list"></table>
|
||||
<button class="layui-btn" onclick="addGoods()">选择商品</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>正文：</label>
|
||||
<div class="layui-input-inline">
|
||||
<script id="editor" type="text/plain" class="special-length" style="height:500px;"></script>
|
||||
<input type="hidden" name="note_content" id="note_content" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">发布时间：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_release_time" value="1" title="显示" checked>
|
||||
<input type="radio" name="is_show_release_time" value="0" title="不显示">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">阅读次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_read_num" value="1" title="显示" checked>
|
||||
<input type="radio" name="is_show_read_num" value="0" title="不显示">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">点赞次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_dianzan_num" value="1" title="显示" checked>
|
||||
<input type="radio" name="is_show_dianzan_num" value="0" title="不显示">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">虚拟阅读数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_read_num" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">虚拟点赞数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_dianzan_num" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="sort" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<button class="layui-btn" lay-submit lay-filter="save">立即发布</button>
|
||||
<button class="layui-btn" lay-submit lay-filter="saveDrafts">保存至草稿箱</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="backNotesList()">返回</button>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="goods_ids" value="" />
|
||||
<input type="hidden" name="note_type" value="{$note_type}" />
|
||||
</div>
|
||||
|
||||
<!-- 操作 -->
|
||||
<script type="text/html" id="operation">
|
||||
<div class="table-btn">
|
||||
<a class="layui-btn" onclick="delGoods({{d.goods_id}})">删除</a>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.config.js?time=20240614"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.all.js?time=20240614"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/lang/zh-cn/zh-cn.js"></script>
|
||||
<script>
|
||||
//实例化富文本
|
||||
var ue = UE.getEditor('editor');
|
||||
if($("#note_content").val()){
|
||||
ue.ready(function() {
|
||||
ue.setContent($("#note_content").val());
|
||||
});
|
||||
}
|
||||
|
||||
var form,repeat_flag,
|
||||
IMAGE_MAX = 9, //最多可以上传多少张图片
|
||||
imageCollection = [], //图片集合
|
||||
selectedGoodsId = [],
|
||||
goods_id = [],
|
||||
goods_list =[];
|
||||
|
||||
layui.use(['form'], function() {
|
||||
form = layui.form;
|
||||
repeat_flag = false;
|
||||
|
||||
form.render();
|
||||
|
||||
/**
|
||||
* 图片切换
|
||||
*/
|
||||
form.on('radio(cover_type)', function(data){
|
||||
//0单图 1多图
|
||||
if (data.value == 0){
|
||||
|
||||
if(imageCollection.length) {
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}
|
||||
|
||||
$(".simple-uploading").removeClass("layui-hide");
|
||||
$(".multiple-uploading").addClass("layui-hide");
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 750x420 像素的图片 最多上传1张');
|
||||
|
||||
} else{
|
||||
if(imageCollection.length) {
|
||||
var html = '';
|
||||
html += `<div class="multiple-item" id="multiple_uploading">`;
|
||||
html += `<i class="iconfont iconshangchuan"></i>`;
|
||||
html += `<p>点击上传</p>`;
|
||||
html += `</div>`;
|
||||
|
||||
for (var i = 0; i < imageCollection.length; i++) {
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(imageCollection[i])}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
$(".multiple-uploading").html(html);
|
||||
}
|
||||
|
||||
$(".simple-uploading").addClass("layui-hide");
|
||||
$(".multiple-uploading").removeClass("layui-hide");
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 350x350 像素的图片，最多上传9张');
|
||||
}
|
||||
});
|
||||
|
||||
/* var upload = new Upload({
|
||||
elem: '#img',
|
||||
callback:function (res) {
|
||||
if (res.code >= 0) {
|
||||
imageCollection = [];
|
||||
imageCollection.push(res.data.pic_path)
|
||||
}
|
||||
},
|
||||
deleteCallback:function () {
|
||||
upload.delete();
|
||||
imageCollection = [];
|
||||
}
|
||||
}); */
|
||||
|
||||
// 单图上传
|
||||
$("body").off("click", "#img").on("click", "#img", function () {
|
||||
openAlbum(function (data) {
|
||||
imageCollection = [];
|
||||
imageCollection.push(data[0].pic_path);
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}, 1);
|
||||
});
|
||||
|
||||
//多图上传
|
||||
$("body").off("click","#multiple_uploading").on("click","#multiple_uploading", function () {
|
||||
var html = '';
|
||||
openAlbum(function (data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (imageCollection.length < IMAGE_MAX){
|
||||
imageCollection.push(data[i].pic_path);
|
||||
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(data[i].pic_path)}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
}
|
||||
if (imageCollection.length >= IMAGE_MAX)
|
||||
$("#multiple_uploading").addClass("layui-hide");
|
||||
|
||||
$(".multiple-uploading").append(html);
|
||||
|
||||
}, IMAGE_MAX);
|
||||
});
|
||||
|
||||
$("body").off('click', '.multiple-item .icon').on('click', '.multiple-item .icon', function () {
|
||||
var index = $(this).parent().index() - 1;
|
||||
imageCollection.splice(index,1);
|
||||
$(this).parent().remove();
|
||||
|
||||
if (imageCollection.length < IMAGE_MAX) $("#multiple_uploading").removeClass("layui-hide");
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(立即发布)
|
||||
*/
|
||||
form.on('submit(save)', function(data){
|
||||
field = data.field;
|
||||
field.status = 1;
|
||||
formSubmit(field)
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(草稿箱)
|
||||
*/
|
||||
form.on('submit(saveDrafts)', function(data){
|
||||
field = data.field;
|
||||
field.status = 0;
|
||||
|
||||
formSubmit(field)
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
function formSubmit(data)
|
||||
{
|
||||
if (!imageCollection.length){
|
||||
layer.msg('请选择封面图！', {icon: 5, anim: 6});
|
||||
return;
|
||||
}
|
||||
|
||||
// if (selectedGoodsId.length == 0) {
|
||||
// layer.msg('请选择参与活动的商品！', {icon: 5, anim: 6});
|
||||
// return;
|
||||
// }
|
||||
|
||||
data.cover_img = imageCollection.join();
|
||||
|
||||
var goodsHighlights = [];
|
||||
$(".lightspot-item").each(function (index,item) {
|
||||
goodsHighlights.push($(item).find('input').val());
|
||||
});
|
||||
data.goods_highlights = goodsHighlights.toString();
|
||||
|
||||
if (!ue.getContent()){
|
||||
layer.msg("笔记内容不能为空");
|
||||
return false;
|
||||
}
|
||||
|
||||
if(data.sort < 0){
|
||||
layer.msg("排序号不能小于0");
|
||||
return false;
|
||||
}
|
||||
|
||||
data.note_content = ue.getContent();
|
||||
|
||||
if(repeat_flag) return;
|
||||
repeat_flag = true;
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
dataType: 'JSON',
|
||||
url: ns.url("notes://shop/notes/add"),
|
||||
data: data,
|
||||
async: false,
|
||||
success: function(res){
|
||||
repeat_flag = false;
|
||||
|
||||
if (res.code == 0) {
|
||||
layer.confirm('添加成功', {
|
||||
title:'操作提示',
|
||||
btn: ['返回列表', '继续添加'],
|
||||
closeBtn: 0,
|
||||
yes: function(index, layero){
|
||||
if(data.status == 0){
|
||||
location.hash = ns.hash("notes://shop/notes/drafts");
|
||||
}else{
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
}
|
||||
layer.close(index);
|
||||
},
|
||||
btn2: function(index, layero) {
|
||||
listenerHash(); // 刷新页面
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
}else{
|
||||
layer.msg(res.message);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 表格渲染
|
||||
renderTable();
|
||||
function renderTable(goods_list = []) {
|
||||
//展示已知数据
|
||||
table = new Table({
|
||||
elem: '#selected_goods_list',
|
||||
cols: [
|
||||
[{
|
||||
field: 'goods_name',
|
||||
title: '商品名称',
|
||||
unresize: 'false',
|
||||
width: '50%'
|
||||
}, {
|
||||
field: 'price',
|
||||
title: '商品价格(元)',
|
||||
unresize: 'false',
|
||||
align: 'right',
|
||||
width: '20%',
|
||||
templet: function(data) {
|
||||
return '￥' + data.price;
|
||||
}
|
||||
}, {
|
||||
field: 'goods_stock',
|
||||
title: '库存',
|
||||
unresize: 'false',
|
||||
align: 'center',
|
||||
width: '20%'
|
||||
}, {
|
||||
title: '操作',
|
||||
toolbar: '#operation',
|
||||
unresize: 'false',
|
||||
align:'right'
|
||||
}],
|
||||
],
|
||||
data: goods_list
|
||||
});
|
||||
}
|
||||
|
||||
/* 添加商品 */
|
||||
function addGoods(){
|
||||
goodsSelect(function (data) {
|
||||
goods_id = [];
|
||||
goods_list = [];
|
||||
|
||||
for (var key in data) {
|
||||
goods_id.push(data[key].goods_id);
|
||||
goods_list.push(data[key]);
|
||||
}
|
||||
|
||||
renderTable(goods_list);
|
||||
$("input[name='goods_ids']").val(goods_id.toString());
|
||||
selectedGoodsId = goods_id;
|
||||
|
||||
},selectedGoodsId, {mode: "spu"});
|
||||
}
|
||||
|
||||
// 删除选中商品
|
||||
function delGoods(id) {
|
||||
$.each(goods_list, function(index, item) {
|
||||
var goods_id = item.goods_id;
|
||||
|
||||
if (id == Number(goods_id)) {
|
||||
goods_list.splice(index, 1);
|
||||
renderTable(goods_list);
|
||||
}
|
||||
});
|
||||
|
||||
$.each(selectedGoodsId, function(index, item) {
|
||||
if (id == Number(item)) {
|
||||
selectedGoodsId.splice(index, 1);
|
||||
goods_id = selectedGoodsId;
|
||||
}
|
||||
});
|
||||
$("input[name='goods_ids']").val(goods_id.toString());
|
||||
}
|
||||
|
||||
function backNotesList() {
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
}
|
||||
|
||||
//检测数据类型
|
||||
function detectionNumType(el, type) {
|
||||
var value = $(el).val();
|
||||
//大于零 且 不是小数
|
||||
if (value < 0 && type == 'integral')
|
||||
$(el).val(0);
|
||||
else if (type == 'integral')
|
||||
$(el).val(Math.round(value));
|
||||
|
||||
//大于1 且 不是小数
|
||||
if (value < 1 && type == 'positiveInteger')
|
||||
$(el).val(1);
|
||||
else if (type == 'positiveInteger')
|
||||
$(el).val(Math.round(value));
|
||||
//大于零可以是小数
|
||||
if (type == 'positiveNumber') {
|
||||
value = parseFloat(value).toFixed(2);
|
||||
if (value < 0)
|
||||
$(el).val(0);
|
||||
else
|
||||
$(el).val(value);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
528
addon/notes/shop/view/notes/add_wechat_article.html
Executable file
528
addon/notes/shop/view/notes/add_wechat_article.html
Executable file
@@ -0,0 +1,528 @@
|
||||
<style>
|
||||
.layui-form-selected dl{z-index: 1000;}
|
||||
.upload-img-block .upload-img-box .upload-default{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
|
||||
.multiple-uploading{display: flex;flex-wrap: wrap;}
|
||||
.multiple-uploading .multiple-item{position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;margin-bottom: 10px;padding: 10px;width: 100px;height: 100px;border: 1px dashed #ddd;text-align: center;box-sizing: border-box;line-height: 1;color: #5a5a5a;}
|
||||
.multiple-uploading .multiple-item p{line-height: 20px;margin-top: 5px;}
|
||||
.multiple-uploading .multiple-item span{display: none;position: absolute;top: -10px;right: -7px;width: 20px;height: 20px;border: 1px solid #999;color: #999;background-color: #fff;border-radius: 50%;line-height: 1;font-size: 18px;cursor: pointer;}
|
||||
.multiple-uploading .multiple-item:hover .icon{display: block;}
|
||||
.multiple-uploading .multiple-item ~ .multiple-item{margin-left: 10px;}
|
||||
.multiple-uploading .iconfont{font-size: 30px;color: #6D7278;}
|
||||
#multiple_uploading{cursor: pointer;}
|
||||
.multiple-item img{max-width: 100%;max-height: 100%;}
|
||||
|
||||
.form-view .short-label{width:120px}
|
||||
.form-view .layui-input-block{margin-left:120px}
|
||||
.form-view .word-aux{margin-left:120px}
|
||||
.wechat-view{width: 100%;display: flex;}
|
||||
.content-view{width: 450px;}
|
||||
.form-view{flex:1;}
|
||||
.preview-head-div{background:url(STATIC_EXT/diyview/img/preview_head.png) no-repeat 50%/cover;font-size:14px;display:block;height:64px;line-height:82px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer;margin:0 auto}
|
||||
#title_html{text-align: center;font-size: 16px;font-weight: bold;}
|
||||
|
||||
.content-box::-webkit-scrollbar { width: 0 !important }
|
||||
.content-box { -ms-overflow-style: none; }
|
||||
.content-box { overflow: -moz-scrollbars-none; }
|
||||
.pull-disabled-btn{opacity: .6;filter: alpha(opacity=60);color: #fff;}
|
||||
</style>
|
||||
|
||||
<div class="wechat-view">
|
||||
<div class="content-view" style="padding: 0px 24px;height: 100%;overflow: auto;">
|
||||
<div style="border: 1px solid rgb(241, 241, 241);width: 375px;">
|
||||
<div style="padding: 13px 20px; background: rgb(255, 255, 255); box-shadow: rgb(239, 239, 239) 0px -1px 0px inset;">
|
||||
<div data-v-713f8b68="" class="component-title" style="padding-left: 0px; font-size: 14px; font-weight: bold; color: rgba(0, 0, 0, 0.8);">店铺笔记预览</div>
|
||||
</div>
|
||||
<div class="preview-head-div" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); text-align: left;"><span style="text-align: left;"> </span></div>
|
||||
<div>
|
||||
<h5 id="title_html"></h5>
|
||||
</div>
|
||||
<div class="content-box" style="padding: 9px 12px;box-sizing: border-box;height: 650px;overflow-x: hidden; overflow-y: auto;">
|
||||
<div id="content_html"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form form-wrap form-view" style="overflow: auto;background: #fff;position: relative;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">文章链接：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="note_link" autocomplete="off" placeholder="请输入文章链接" class="layui-input len-mid">
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<button class="layui-btn pull-btn" onclick="pullArticle(this)">获取文章</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label"><span class="required">*</span>笔记标题：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="note_title" lay-verify="required" onchange="fetchTitle(this.value)" maxlength="40" autocomplete="off" placeholder="笔记标题最多40个字" class="layui-input len-mid">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">摘要：</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="note_abstract" class="layui-textarea len-mid" maxlength="100"></textarea>
|
||||
</div>
|
||||
<div class="word-aux">笔记摘要最多可输入100个字</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label"><span class="required">*</span>封面：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="cover_type" value="0" title="单图" lay-filter="cover_type" checked>
|
||||
<input type="radio" name="cover_type" value="1" title="多图" lay-filter="cover_type">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label"></label>
|
||||
<div class="layui-input-block img-upload">
|
||||
<div class="upload-img-block square simple-uploading">
|
||||
<div class="upload-img-box" id="img">
|
||||
<div class="upload-default">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="image" />
|
||||
<i class="del">x</i>
|
||||
</div>
|
||||
|
||||
<div class="multiple-uploading layui-hide">
|
||||
<div class="multiple-item" id="multiple_uploading">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">推荐使用 750x420 像素的图片 最多上传1张</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label"><span class="required">*</span>笔记分组：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="group_id" lay-verify="required">
|
||||
<option value="">请选择</option>
|
||||
{foreach $group_list as $v}
|
||||
<option value="{$v['group_id']}">{$v['group_name']}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item goods_list">
|
||||
<label class="layui-form-label short-label">关联商品：</label>
|
||||
<div class="layui-input-block">
|
||||
<table id="selected_goods_list"></table>
|
||||
<button class="layui-btn" onclick="addGoods()">选择商品</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">发布时间：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_release_time" value="1" title="显示" checked>
|
||||
<input type="radio" name="is_show_release_time" value="0" title="不显示">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">阅读次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_read_num" value="1" title="显示" checked>
|
||||
<input type="radio" name="is_show_read_num" value="0" title="不显示">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">点赞次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_dianzan_num" value="1" title="显示" checked>
|
||||
<input type="radio" name="is_show_dianzan_num" value="0" title="不显示">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">虚拟阅读数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_read_num" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">虚拟点赞数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_dianzan_num" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">排序：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="sort" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<button class="layui-btn" lay-submit lay-filter="save">立即发布</button>
|
||||
<button class="layui-btn" lay-submit lay-filter="saveDrafts">保存至草稿箱</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="backNotesList()">返回</button>
|
||||
</div>
|
||||
<input type="hidden" name="note_content" value=""/>
|
||||
<input type="hidden" name="goods_ids" value="" />
|
||||
<input type="hidden" name="note_type" value="{$note_type}" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 操作 -->
|
||||
<script type="text/html" id="operation">
|
||||
<div class="table-btn">
|
||||
<a class="layui-btn" onclick="delGoods({{d.goods_id}})">删除</a>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
//实例化富文本
|
||||
var form,repeat_flag,
|
||||
IMAGE_MAX = 9, //最多可以上传多少张图片
|
||||
imageCollection = [], //图片集合
|
||||
selectedGoodsId = [],
|
||||
goods_id = [],
|
||||
goods_list =[];
|
||||
|
||||
layui.use(['form'], function() {
|
||||
form = layui.form;
|
||||
repeat_flag = false;
|
||||
|
||||
form.render();
|
||||
|
||||
/**
|
||||
* 图片切换
|
||||
*/
|
||||
form.on('radio(cover_type)', function(data){
|
||||
//0单图 1多图
|
||||
if (data.value == 0){
|
||||
|
||||
if(imageCollection.length) {
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}
|
||||
|
||||
$(".simple-uploading").removeClass("layui-hide");
|
||||
$(".multiple-uploading").addClass("layui-hide");
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 750x420 像素的图片 最多上传1张');
|
||||
|
||||
} else{
|
||||
if(imageCollection.length) {
|
||||
var html = '';
|
||||
html += `<div class="multiple-item" id="multiple_uploading">`;
|
||||
html += `<i class="iconfont iconshangchuan"></i>`;
|
||||
html += `<p>点击上传</p>`;
|
||||
html += `</div>`;
|
||||
|
||||
for (var i = 0; i < imageCollection.length; i++) {
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(imageCollection[i])}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
$(".multiple-uploading").html(html);
|
||||
}
|
||||
|
||||
$(".simple-uploading").addClass("layui-hide");
|
||||
$(".multiple-uploading").removeClass("layui-hide");
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 350x350 像素的图片，最多上传9张');
|
||||
}
|
||||
});
|
||||
|
||||
/* var upload = new Upload({
|
||||
elem: '#img',
|
||||
callback:function (res) {
|
||||
if (res.code >= 0) {
|
||||
imageCollection = [];
|
||||
imageCollection.push(res.data.pic_path)
|
||||
}
|
||||
},
|
||||
deleteCallback:function () {
|
||||
upload.delete();
|
||||
imageCollection = [];
|
||||
}
|
||||
}); */
|
||||
|
||||
// 单图上传
|
||||
$("body").off("click", "#img").on("click", "#img", function () {
|
||||
openAlbum(function (data) {
|
||||
imageCollection = [];
|
||||
imageCollection.push(data[0].pic_path);
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}, 1);
|
||||
});
|
||||
|
||||
//多图上传
|
||||
$("body").off("click","#multiple_uploading").on("click","#multiple_uploading", function () {
|
||||
var html = '';
|
||||
openAlbum(function (data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (imageCollection.length < IMAGE_MAX){
|
||||
imageCollection.push(data[i].pic_path);
|
||||
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(data[i].pic_path)}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
}
|
||||
if (imageCollection.length >= IMAGE_MAX)
|
||||
$("#multiple_uploading").addClass("layui-hide");
|
||||
|
||||
$(".multiple-uploading").append(html);
|
||||
|
||||
}, IMAGE_MAX);
|
||||
});
|
||||
|
||||
$("body").off('click', '.multiple-item .icon').on('click', '.multiple-item .icon', function () {
|
||||
var index = $(this).parent().index() - 1;
|
||||
imageCollection.splice(index,1);
|
||||
$(this).parent().remove();
|
||||
|
||||
if (imageCollection.length < IMAGE_MAX) $("#multiple_uploading").removeClass("layui-hide");
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(立即发布)
|
||||
*/
|
||||
form.on('submit(save)', function(data){
|
||||
var field = data.field;
|
||||
field.status = 1;
|
||||
formSubmit(field)
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(草稿箱)
|
||||
*/
|
||||
form.on('submit(saveDrafts)', function(data){
|
||||
var field = data.field;
|
||||
field.status = 0;
|
||||
|
||||
formSubmit(field)
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
function formSubmit(data)
|
||||
{
|
||||
if (!imageCollection.length){
|
||||
layer.msg('请选择封面图！', {icon: 5, anim: 6});
|
||||
return;
|
||||
}
|
||||
|
||||
// if (selectedGoodsId.length == 0) {
|
||||
// layer.msg('请选择参与活动的商品！', {icon: 5, anim: 6});
|
||||
// return;
|
||||
// }
|
||||
if(data.note_content == ''){
|
||||
layer.msg('请先获取文章信息！', {icon: 5, anim: 6});
|
||||
return;
|
||||
}
|
||||
data.cover_img = imageCollection.join();
|
||||
|
||||
if(data.sort < 0){
|
||||
layer.msg("排序号不能小于0");
|
||||
return false;
|
||||
}
|
||||
|
||||
if(repeat_flag) return;
|
||||
repeat_flag = true;
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
dataType: 'JSON',
|
||||
url: ns.url("notes://shop/notes/add"),
|
||||
data: data,
|
||||
async: false,
|
||||
success: function(res){
|
||||
repeat_flag = false;
|
||||
|
||||
if (res.code == 0) {
|
||||
layer.confirm('添加成功', {
|
||||
title:'操作提示',
|
||||
btn: ['返回列表', '继续添加'],
|
||||
closeBtn: 0,
|
||||
yes: function(index, layero){
|
||||
if(data.status == 0){
|
||||
location.hash = ns.hash("notes://shop/notes/drafts");
|
||||
}else{
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
}
|
||||
layer.close(index);
|
||||
},
|
||||
btn2: function(index, layero) {
|
||||
listenerHash(); // 刷新页面
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
}else{
|
||||
layer.msg(res.message);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 表格渲染
|
||||
renderTable();
|
||||
function renderTable(goods_list = []) {
|
||||
//展示已知数据
|
||||
table = new Table({
|
||||
elem: '#selected_goods_list',
|
||||
cols: [
|
||||
[{
|
||||
field: 'goods_name',
|
||||
title: '商品名称',
|
||||
unresize: 'false',
|
||||
width: '50%'
|
||||
}, {
|
||||
field: 'price',
|
||||
title: '商品价格(元)',
|
||||
unresize: 'false',
|
||||
align: 'right',
|
||||
width: '20%',
|
||||
templet: function(data) {
|
||||
return '￥' + data.price;
|
||||
}
|
||||
}, {
|
||||
field: 'goods_stock',
|
||||
title: '库存',
|
||||
unresize: 'false',
|
||||
align: 'center',
|
||||
width: '20%'
|
||||
}, {
|
||||
title: '操作',
|
||||
toolbar: '#operation',
|
||||
unresize: 'false',
|
||||
align:'right'
|
||||
}],
|
||||
],
|
||||
data: goods_list
|
||||
});
|
||||
}
|
||||
|
||||
/* 添加商品 */
|
||||
function addGoods(){
|
||||
goodsSelect(function (data) {
|
||||
|
||||
goods_id = [];
|
||||
goods_list = [];
|
||||
|
||||
for (var key in data) {
|
||||
goods_id.push(data[key].goods_id);
|
||||
goods_list.push(data[key]);
|
||||
}
|
||||
|
||||
renderTable(goods_list);
|
||||
$("input[name='goods_ids']").val(goods_id.toString());
|
||||
selectedGoodsId = goods_id;
|
||||
|
||||
},selectedGoodsId, {mode: "spu"});
|
||||
}
|
||||
|
||||
// 删除选中商品
|
||||
function delGoods(id) {
|
||||
$.each(goods_list, function(index, item) {
|
||||
var goods_id = item.goods_id;
|
||||
|
||||
if (id == Number(goods_id)) {
|
||||
goods_list.splice(index, 1);
|
||||
renderTable(goods_list);
|
||||
}
|
||||
});
|
||||
|
||||
$.each(selectedGoodsId, function(index, item) {
|
||||
if (id == Number(item)) {
|
||||
selectedGoodsId.splice(index, 1);
|
||||
goods_id = selectedGoodsId;
|
||||
}
|
||||
});
|
||||
$("input[name='goods_ids']").val(goods_id.toString());
|
||||
}
|
||||
|
||||
function backNotesList() {
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
}
|
||||
|
||||
//检测数据类型
|
||||
function detectionNumType(el, type) {
|
||||
var value = $(el).val();
|
||||
//大于零 且 不是小数
|
||||
if (value < 0 && type == 'integral')
|
||||
$(el).val(0);
|
||||
else if (type == 'integral')
|
||||
$(el).val(Math.round(value));
|
||||
|
||||
//大于1 且 不是小数
|
||||
if (value < 1 && type == 'positiveInteger')
|
||||
$(el).val(1);
|
||||
else if (type == 'positiveInteger')
|
||||
$(el).val(Math.round(value));
|
||||
//大于零可以是小数
|
||||
if (type == 'positiveNumber') {
|
||||
value = parseFloat(value).toFixed(2);
|
||||
if (value < 0)
|
||||
$(el).val(0);
|
||||
else
|
||||
$(el).val(value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 采集公众号文章信息
|
||||
*/
|
||||
function pullArticle(self_obj){
|
||||
if($(self_obj).hasClass('pull-disabled-btn')){
|
||||
return;
|
||||
}
|
||||
var wechat_url = $('input[name=note_link]').val();
|
||||
if(wechat_url == ''){
|
||||
layer.msg('文章链接不可为空!', {icon: 5, anim: 6});
|
||||
return false;
|
||||
}
|
||||
$(self_obj).addClass('pull-disabled-btn');
|
||||
$(self_obj).prepend(`<i class="common-loading-layer layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>`);
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
dataType: 'JSON',
|
||||
url: ns.url("notes://shop/notes/pullArticle"),
|
||||
data: {wechat_url:$('input[name=note_link]').val()},
|
||||
// async: false,
|
||||
success: function(res){
|
||||
if (res.code >= 0) {
|
||||
fetchTitle(res.data.title);
|
||||
fetchArticle(res.data.content_html);
|
||||
initPullBtn();
|
||||
}else{
|
||||
layer.msg(res.message);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function initPullBtn(){
|
||||
$(".pull-btn").text('获取文章');
|
||||
$(".pull-btn").removeClass('pull-disabled-btn');
|
||||
}
|
||||
|
||||
//填充标题
|
||||
function fetchTitle(data){
|
||||
$('input[name=note_title]').val(data);
|
||||
$('#title_html').text(data);
|
||||
}
|
||||
function fetchArticle(data){
|
||||
$('input[name=note_content]').val(data);
|
||||
$("#content_html").html(data);
|
||||
}
|
||||
</script>
|
||||
261
addon/notes/shop/view/notes/drafts.html
Executable file
261
addon/notes/shop/view/notes/drafts.html
Executable file
@@ -0,0 +1,261 @@
|
||||
<style>
|
||||
.layui-layout-admin .layui-form-item .layui-input-inline{background-color: #fff;}
|
||||
</style>
|
||||
|
||||
<div class="screen layui-collapse" lay-filter="selection_panel">
|
||||
<div class="layui-colla-item">
|
||||
<form class="layui-colla-content layui-form layui-show">
|
||||
<div class="layui-form-item">
|
||||
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">笔记名称：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="note_title" placeholder="请输入笔记名称" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">笔记类型：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="note_type" lay-filter="status">
|
||||
<option value="">全部</option>
|
||||
{foreach $note_type as $v}
|
||||
<option value="{$v['type']}">{$v['name']}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">笔记分组：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="group_id" lay-filter="status">
|
||||
<option value="">全部</option>
|
||||
{foreach $group_list as $v}
|
||||
<option value="{$v['group_id']}">{$v['group_name']}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">创建时间：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" name="start_time" id="start_time" autocomplete="off" placeholder="开始时间" readonly>
|
||||
<i class=" iconrili iconfont calendar"></i>
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" name="end_time" id="end_time" autocomplete="off" placeholder="结束时间" readonly>
|
||||
<i class=" iconrili iconfont calendar"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<button class="layui-btn" lay-submit lay-filter="search">筛选</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-tab table-tab" lay-filter="notes_tab">
|
||||
|
||||
<div class="layui-tab-content">
|
||||
<!-- 列表 -->
|
||||
<table id="notes_list" lay-filter="notes_list"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品 -->
|
||||
<script type="text/html" id="goods">
|
||||
<div class="table-title">
|
||||
<div class="title-pic">
|
||||
{{# if(d.goods_image){ }}
|
||||
<img layer-src src="{{ns.img(d.goods_image.split(',')[0],'small')}}"/>
|
||||
{{# } }}
|
||||
</div>
|
||||
<div class="title-content">
|
||||
<a href="javascript:;" class="multi-line-hiding text-color" title="{{d.goods_name}}">{{d.goods_name}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- 时间 -->
|
||||
<script id="time" type="text/html">
|
||||
<div class="layui-elip">开始：{{ns.time_to_date(d.start_time)}}</div>
|
||||
<div class="layui-elip">结束：{{ns.time_to_date(d.end_time)}}</div>
|
||||
</script>
|
||||
|
||||
<!-- 操作 -->
|
||||
<script type="text/html" id="operation">
|
||||
<div class="table-btn">
|
||||
<a class="layui-btn" lay-event="edit">编辑</a>
|
||||
<a class="layui-btn" lay-event="del">删除</a>
|
||||
{{# if(d.status == 0){ }}
|
||||
<a class="layui-btn text-color" lay-event="release">发布</a>
|
||||
{{# }else{ }}
|
||||
<a class="layui-btn" lay-event="unrelease">取消发布</a>
|
||||
{{# } }}
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var table;
|
||||
|
||||
layui.use(['form', 'element','laydate'], function() {
|
||||
var form = layui.form,
|
||||
laydate = layui.laydate,
|
||||
repeat_flag = false; //防重复标识
|
||||
form.render();
|
||||
|
||||
//渲染时间
|
||||
laydate.render({
|
||||
elem: '#start_time',
|
||||
type: 'datetime'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#end_time',
|
||||
type: 'datetime'
|
||||
});
|
||||
|
||||
table = new Table({
|
||||
elem: '#notes_list',
|
||||
url: ns.url("notes://shop/notes/lists"),
|
||||
where:{
|
||||
status:0
|
||||
},
|
||||
cols: [
|
||||
[{
|
||||
field:'note_title',
|
||||
title: '笔记标题',
|
||||
unresize: 'false',
|
||||
width: '23%'
|
||||
}, {
|
||||
field: 'group_name',
|
||||
title: '所属分组',
|
||||
unresize: 'false'
|
||||
}, {
|
||||
title: '添加时间',
|
||||
unresize: 'false',
|
||||
templet:function(data){
|
||||
return ns.time_to_date(data.create_time);
|
||||
}
|
||||
}, {
|
||||
title: '操作',
|
||||
toolbar: '#operation',
|
||||
unresize: 'false',
|
||||
align:'right'
|
||||
}]
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* 搜索功能
|
||||
*/
|
||||
form.on('submit(search)', function(data) {
|
||||
table.reload({
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* 监听工具栏操作
|
||||
*/
|
||||
table.tool(function(obj) {
|
||||
var data = obj.data;
|
||||
switch (obj.event) {
|
||||
case 'edit': //编辑
|
||||
location.hash = ns.hash("notes://shop/notes/edit", {"note_id": data.note_id});
|
||||
break;
|
||||
case 'del': //删除
|
||||
deleteNotes(data.note_id);
|
||||
break;
|
||||
case 'release': //发布
|
||||
release(data.note_id);
|
||||
break;
|
||||
case 'unrelease': //取消发布
|
||||
unrelease(data.note_id);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
function deleteNotes(note_id) {
|
||||
layer.confirm('确定要删除该笔记吗?', function(index) {
|
||||
if (repeat_flag) return;
|
||||
repeat_flag = true;
|
||||
layer.close(index);
|
||||
|
||||
$.ajax({
|
||||
url: ns.url("notes://shop/notes/delete"),
|
||||
data: {
|
||||
note_id: note_id
|
||||
},
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
success: function(res) {
|
||||
layer.msg(res.message);
|
||||
repeat_flag = false;
|
||||
if (res.code == 0) {
|
||||
table.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
}, function() {
|
||||
layer.close();
|
||||
repeat_flag = false;
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
function release(id){
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: ns.url("notes://shop/notes/releaseEvent"),
|
||||
data: {
|
||||
status: 1,
|
||||
note_id: id
|
||||
},
|
||||
dataType: 'JSON',
|
||||
success: function(res) {
|
||||
layer.msg(res.message);
|
||||
if (res.code == 0) {
|
||||
table.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function unrelease(id){
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: ns.url("notes://shop/notes/releaseEvent"),
|
||||
data: {
|
||||
status: 0,
|
||||
note_id: id
|
||||
},
|
||||
dataType: 'JSON',
|
||||
success: function(res) {
|
||||
layer.msg(res.message);
|
||||
if (res.code == 0) {
|
||||
table.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function add() {
|
||||
location.hash = ns.hash("notes://shop/notes/add");
|
||||
}
|
||||
</script>
|
||||
429
addon/notes/shop/view/notes/edit_article.html
Executable file
429
addon/notes/shop/view/notes/edit_article.html
Executable file
@@ -0,0 +1,429 @@
|
||||
<style>
|
||||
.layui-form-selected dl{z-index: 1000;}
|
||||
.upload-img-block .upload-img-box .upload-default{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
|
||||
.multiple-uploading{display: flex;flex-wrap: wrap;}
|
||||
.multiple-uploading .multiple-item{position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;margin-bottom: 10px;padding: 10px;width: 100px;height: 100px;border: 1px dashed #ddd;text-align: center;box-sizing: border-box;line-height: 1;color: #5a5a5a;}
|
||||
.multiple-uploading .multiple-item p{line-height: 20px;margin-top: 5px;}
|
||||
.multiple-uploading .multiple-item span{display: none;position: absolute;top: -10px;right: -7px;width: 20px;height: 20px;border: 1px solid #999;color: #999;background-color: #fff;border-radius: 50%;line-height: 1;font-size: 18px;cursor: pointer;}
|
||||
.multiple-uploading .multiple-item:hover .icon{display: block;}
|
||||
.multiple-uploading .multiple-item ~ .multiple-item{margin-left: 10px;}
|
||||
.multiple-uploading .iconfont{font-size: 30px;color: #6D7278;}
|
||||
#multiple_uploading{cursor: pointer;}
|
||||
.multiple-item img{max-width: 100%;max-height: 100%;}
|
||||
</style>
|
||||
|
||||
<div class="layui-collapse tips-wrap">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">操作提示</h2>
|
||||
<ul class="layui-colla-content layui-show">
|
||||
<li>管理员可以在此页编辑店铺笔记</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form form-wrap">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label"><span class="required">*</span>笔记标题：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="note_title" value="{$info.note_title}" lay-verify="required" maxlength="40" autocomplete="off" placeholder="笔记标题最多40个字" class="layui-input len-long">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">摘要：</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="note_abstract" class="layui-textarea len-long" maxlength="100">{$info.note_abstract}</textarea>
|
||||
</div>
|
||||
<div class="word-aux">笔记摘要最多可输入100个字</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>封面：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="cover_type" value="0" title="单图" lay-filter="cover_type" {if $info.cover_type == 0} checked {/if}>
|
||||
<input type="radio" name="cover_type" value="1" title="多图" lay-filter="cover_type" {if $info.cover_type == 1} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"></label>
|
||||
<div class="layui-input-block img-upload">
|
||||
<div class="upload-img-block square simple-uploading {if $info.cover_type != 0}layui-hide{/if}">
|
||||
<div class="upload-img-box" id="img">
|
||||
<div class="upload-default">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="multiple-uploading {if $info.cover_type != 1}layui-hide{/if}">
|
||||
<div class="multiple-item" id="multiple_uploading">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">推荐使用 750x420 像素的图片 最多上传1张</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>笔记分组：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="group_id" lay-verify="required">
|
||||
<option value="">请选择</option>
|
||||
{foreach $group_list as $v}
|
||||
<option value="{$v['group_id']}" {if $info.group_id == $v.group_id} selected {/if}>{$v['group_name']}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>笔记内容：</label>
|
||||
<div class="layui-input-inline">
|
||||
<script id="editor" type="text/plain" class="special-length" style="height:500px;"></script>
|
||||
<input type="hidden" name="note_content" id="note_content" value="{$info.note_content}"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">发布时间：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_release_time" value="1" title="显示" {if $info.is_show_release_time == 1} checked {/if}>
|
||||
<input type="radio" name="is_show_release_time" value="0" title="不显示" {if $info.is_show_release_time == 0} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">阅读次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_read_num" value="1" title="显示" {if $info.is_show_read_num == 1} checked {/if}>
|
||||
<input type="radio" name="is_show_read_num" value="0" title="不显示" {if $info.is_show_read_num == 0} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">点赞次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_dianzan_num" value="1" title="显示" {if $info.is_show_dianzan_num == 1} checked {/if}>
|
||||
<input type="radio" name="is_show_dianzan_num" value="0" title="不显示" {if $info.is_show_dianzan_num == 0} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">虚拟阅读数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_read_num" value="{$info.initial_read_num}" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">虚拟点赞数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_dianzan_num" value="{$info.initial_dianzan_num}" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="sort" value="{$info.sort}" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="note_id" value="{$info.note_id}" />
|
||||
<input type="hidden" name="goods_ids" value="{$info.goods_ids}" />
|
||||
<input type="hidden" name="note_type" value="{$info.note_type}" />
|
||||
|
||||
<div class="form-row">
|
||||
{if $info.status == 1}
|
||||
<button class="layui-btn" lay-submit lay-filter="save">保存</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="backNotesList()">返回</button>
|
||||
{else /}
|
||||
<button class="layui-btn" lay-submit lay-filter="saveDrafts">保存</button>
|
||||
<button class="layui-btn" lay-submit lay-filter="save">立即发布</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="backNotesList()">返回</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 操作 -->
|
||||
<script type="text/html" id="operation">
|
||||
<div class="table-btn">
|
||||
<a class="layui-btn" onclick="delGoods({{d.LAY_INDEX}})">删除</a>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.config.js?time=20240614"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.all.js?time=20240614"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/lang/zh-cn/zh-cn.js"></script>
|
||||
<script>
|
||||
var form,upload,
|
||||
IMAGE_MAX = 9, //最多可以上传多少张图片
|
||||
imageCollection = [], //图片集合
|
||||
selectedGoodsId = [],
|
||||
goods_id=[],
|
||||
repeat_flag = false,
|
||||
coverType = '{$info.cover_type}',
|
||||
coverImg = '{$info.cover_img}';
|
||||
|
||||
initImg();//初始化图片
|
||||
function initImg(){
|
||||
if (coverType == 0){
|
||||
imageCollection.push(coverImg);
|
||||
//单图
|
||||
if (coverImg) $("#img").html("<img src=" + ns.img(coverImg) + " >");
|
||||
} else if (coverType == 1) {
|
||||
//多图
|
||||
var coverImgArr = coverImg.split(','),
|
||||
html = '';
|
||||
|
||||
imageCollection = coverImgArr;
|
||||
for (var i = 0; i < coverImgArr.length; i++) {
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(coverImgArr[i])}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
$(".multiple-uploading").append(html);
|
||||
}
|
||||
}
|
||||
|
||||
//实例化富文本
|
||||
var ue = UE.getEditor('editor');
|
||||
if($("#note_content").val()){
|
||||
ue.ready(function() {
|
||||
ue.setContent($("#note_content").val());
|
||||
});
|
||||
}
|
||||
|
||||
layui.use(['form'], function() {
|
||||
form = layui.form;
|
||||
form.render();
|
||||
|
||||
/**
|
||||
* 图片切换
|
||||
*/
|
||||
form.on('radio(cover_type)', function(data){
|
||||
//0单图 1多图
|
||||
if (data.value == 0){
|
||||
|
||||
if(imageCollection.length) {
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}
|
||||
|
||||
$(".simple-uploading").removeClass("layui-hide");
|
||||
$(".multiple-uploading").addClass("layui-hide");
|
||||
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 750x420 像素的图片 最多上传1张');
|
||||
|
||||
} else{
|
||||
if(imageCollection.length) {
|
||||
var html = '';
|
||||
html += `<div class="multiple-item" id="multiple_uploading">`;
|
||||
html += `<i class="iconfont iconshangchuan"></i>`;
|
||||
html += `<p>点击上传</p>`;
|
||||
html += `</div>`;
|
||||
|
||||
for (var i = 0; i < imageCollection.length; i++) {
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(imageCollection[i])}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
$(".multiple-uploading").html(html);
|
||||
}
|
||||
|
||||
$(".simple-uploading").addClass("layui-hide");
|
||||
$(".multiple-uploading").removeClass("layui-hide");
|
||||
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 350x350 像素的图片，最多上传9张');
|
||||
}
|
||||
});
|
||||
|
||||
// 单图上传
|
||||
$("body").off("click", "#img").on("click", "#img", function () {
|
||||
var html = '';
|
||||
openAlbum(function (data) {
|
||||
imageCollection = [];
|
||||
imageCollection.push(data[0].pic_path);
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}, 1);
|
||||
});
|
||||
|
||||
//多图上传
|
||||
$("body").off("click","#multiple_uploading").on("click","#multiple_uploading", function () {
|
||||
var html = '';
|
||||
openAlbum(function (data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (imageCollection.length < IMAGE_MAX){
|
||||
imageCollection.push(data[i].pic_path);
|
||||
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(data[i].pic_path)}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
}
|
||||
if (imageCollection.length >= IMAGE_MAX)
|
||||
$("#multiple_uploading").addClass("layui-hide");
|
||||
|
||||
$(".multiple-uploading").append(html);
|
||||
|
||||
}, IMAGE_MAX);
|
||||
});
|
||||
|
||||
$("body").off('click', '.multiple-item .icon').on('click', '.multiple-item .icon', function () {
|
||||
var index = $(this).parent().index() - 1;
|
||||
imageCollection.splice(index,1);
|
||||
$(this).parent().remove();
|
||||
|
||||
if (imageCollection.length < IMAGE_MAX)
|
||||
$("#multiple_uploading").removeClass("layui-hide");
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(立即发布)
|
||||
*/
|
||||
form.on('submit(save)', function(data){
|
||||
var field = data.field;
|
||||
field.status = 1;
|
||||
formSubmit(field)
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(草稿箱)
|
||||
*/
|
||||
form.on('submit(saveDrafts)', function(data){
|
||||
var field = data.field;
|
||||
field.status = 0;
|
||||
|
||||
formSubmit(field)
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
function formSubmit(field)
|
||||
{
|
||||
if (!imageCollection.length){
|
||||
layer.msg('请选择封面图！', {icon: 5, anim: 6});
|
||||
return;
|
||||
}
|
||||
|
||||
// if (selectedGoodsId.length == 0) {
|
||||
// layer.msg('请选择参与活动的商品！', {icon: 5, anim: 6});
|
||||
// return;
|
||||
// }
|
||||
|
||||
field.cover_img = imageCollection.join();
|
||||
|
||||
if (!ue.getContent()){
|
||||
layer.msg("笔记内容不能为空");
|
||||
return false;
|
||||
}
|
||||
|
||||
if(field.sort < 0){
|
||||
layer.msg("排序号不能小于0");
|
||||
return false;
|
||||
}
|
||||
|
||||
field.note_content = ue.getContent();
|
||||
|
||||
if(repeat_flag) return;
|
||||
repeat_flag = true;
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
dataType: 'JSON',
|
||||
url: ns.url("notes://shop/notes/edit"),
|
||||
data: field,
|
||||
async: false,
|
||||
success: function(res){
|
||||
repeat_flag = false;
|
||||
|
||||
if (res.code == 0) {
|
||||
layer.confirm('编辑成功', {
|
||||
title:'操作提示',
|
||||
btn: ['返回列表', '继续编辑'],
|
||||
yes: function(index, layero){
|
||||
if(field.status == 0){
|
||||
location.hash = ns.hash("notes://shop/notes/drafts");
|
||||
}else{
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
}
|
||||
layer.close(index);
|
||||
},
|
||||
btn2: function(index, layero) {
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
}else{
|
||||
layer.msg(res.message);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* 添加商品 */
|
||||
function addGoods(){
|
||||
goodsSelect(function (data) {
|
||||
|
||||
for (var key in data) {
|
||||
var item = data[key];
|
||||
|
||||
var temp_html = `<div style="margin-bottom:20px;">`;
|
||||
temp_html += `<div style="width:100%;padding:8px;box-sizing:border-box;border-radius:4px;background:#f8f8f8;display:flex">`;
|
||||
temp_html += `<img style='width:74px;height:74px;border-radius:4px' src="${item.goods_image ? ns.img(item.goods_image) : ''}">`;
|
||||
temp_html += `<div style="margin-left: 10px;width: 200px;flex: 1;min-height: 0;min-width: 0;">`;
|
||||
temp_html += `<div style="font-size:14px;color:#202021;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" >${item.goods_name}</div>`;
|
||||
temp_html += `<div style="font-size:13px;color:#5e6066;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></div>`;
|
||||
temp_html += `<div style="font-size:14px;color:#fd463e;font-weight:700;margin-top:10px"><span>￥</span>${item.price}</div>`;
|
||||
temp_html += `</div>`;
|
||||
temp_html += `</div></div>`;
|
||||
ue.setContent(temp_html, true);
|
||||
}
|
||||
|
||||
},selectedGoodsId, {mode: "spu"});
|
||||
}
|
||||
|
||||
function backNotesList() {
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
}
|
||||
|
||||
//检测数据类型
|
||||
function detectionNumType(el, type) {
|
||||
var value = $(el).val();
|
||||
//大于零 且 不是小数
|
||||
if (value < 0 && type == 'integral')
|
||||
$(el).val(0);
|
||||
else if (type == 'integral')
|
||||
$(el).val(Math.round(value));
|
||||
|
||||
//大于1 且 不是小数
|
||||
if (value < 1 && type == 'positiveInteger')
|
||||
$(el).val(1);
|
||||
else if (type == 'positiveInteger')
|
||||
$(el).val(Math.round(value));
|
||||
//大于零可以是小数
|
||||
if (type == 'positiveNumber') {
|
||||
value = parseFloat(value).toFixed(2);
|
||||
if (value < 0)
|
||||
$(el).val(0);
|
||||
else
|
||||
$(el).val(value);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
515
addon/notes/shop/view/notes/edit_goods_item.html
Executable file
515
addon/notes/shop/view/notes/edit_goods_item.html
Executable file
@@ -0,0 +1,515 @@
|
||||
<style>
|
||||
.layui-form-selected dl{z-index: 1000;}
|
||||
.upload-img-block .upload-img-box .upload-default{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
|
||||
.multiple-uploading{display: flex;flex-wrap: wrap;}
|
||||
.multiple-uploading .multiple-item{position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;margin-bottom: 10px;padding: 10px;width: 100px;height: 100px;border: 1px dashed #ddd;text-align: center;box-sizing: border-box;line-height: 1;color: #5a5a5a;}
|
||||
.multiple-uploading .multiple-item p{line-height: 20px;margin-top: 5px;}
|
||||
.multiple-uploading .multiple-item span{display: none;position: absolute;top: -10px;right: -7px;width: 20px;height: 20px;border: 1px solid #999;color: #999;background-color: #fff;border-radius: 50%;line-height: 1;font-size: 18px;cursor: pointer;}
|
||||
.multiple-uploading .multiple-item:hover .icon{display: block;}
|
||||
.multiple-uploading .multiple-item ~ .multiple-item{margin-left: 10px;}
|
||||
.multiple-uploading .iconfont{font-size: 30px;color: #6D7278;}
|
||||
#multiple_uploading{cursor: pointer;}
|
||||
.multiple-item img{max-width: 100%;max-height: 100%;}
|
||||
.shopping-lightspot{width: 290px;}
|
||||
.shopping-lightspot .add-lightspot{cursor: pointer;}
|
||||
.shopping-lightspot .add-lightspot, .shopping-lightspot .lightspot-item{padding: 15px;border: 1px dashed #e5e5e5;line-height: 1;}
|
||||
.shopping-lightspot .lightspot-item{position: relative;display: flex;align-items: center;margin-bottom: 10px;white-space: nowrap;}
|
||||
.shopping-lightspot .lightspot-item span{position: absolute;top: -10px;right: -9px;display: none;text-align: center;width: 20px;height: 20px;border: 1px solid #999;border-radius: 50%;font-size: 18px;color: #999;background: #fff;}
|
||||
.shopping-lightspot .lightspot-item:hover span{display: block;cursor: pointer;}
|
||||
.shopping-lightspot .lightspot-item input{margin-left: 5px;}
|
||||
</style>
|
||||
|
||||
<div class="layui-collapse tips-wrap">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">操作提示</h2>
|
||||
<ul class="layui-colla-content layui-show">
|
||||
<li>管理员可以在此页编辑店铺笔记</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form form-wrap">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label"><span class="required">*</span>笔记标题：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="note_title" value="{$info.note_title}" lay-verify="required" maxlength="40" autocomplete="off" placeholder="笔记标题最多40个字" class="layui-input len-long">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">摘要：</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="note_abstract" class="layui-textarea len-long" maxlength="100">{$info.note_abstract}</textarea>
|
||||
</div>
|
||||
<div class="word-aux">笔记摘要最多可输入100个字</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>封面：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="cover_type" value="0" title="单图" lay-filter="cover_type" {if $info.cover_type == 0} checked {/if}>
|
||||
<input type="radio" name="cover_type" value="1" title="多图" lay-filter="cover_type" {if $info.cover_type == 1} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"></label>
|
||||
<div class="layui-input-block img-upload">
|
||||
<div class="upload-img-block square simple-uploading {if $info.cover_type != 0}layui-hide{/if}">
|
||||
<div class="upload-img-box" id="img">
|
||||
<div class="upload-default">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="multiple-uploading {if $info.cover_type != 1}layui-hide{/if}">
|
||||
<div class="multiple-item" id="multiple_uploading">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">推荐使用 750x420 像素的图片 最多上传1张</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>笔记分组：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="group_id" lay-verify="required">
|
||||
<option value="">请选择</option>
|
||||
{foreach $group_list as $v}
|
||||
<option value="{$v['group_id']}" {if $info.group_id == $v.group_id} selected {/if}>{$v['group_name']}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">关联商品：</label>
|
||||
<div class="layui-input-inline">
|
||||
<div class="upload-img-block square">
|
||||
{if condition="$info.goods_list"}
|
||||
<div class="upload-img-box" id="goodImg" lay-verify="select" onclick="addGoods()">
|
||||
<img src="{:img(explode(',', $info.goods_list[0]['goods_image'])[0])}" alt="">
|
||||
</div>
|
||||
{else/}
|
||||
<div class="upload-img-box" id="goodImg" lay-verify="select" onclick="addGoods()">
|
||||
<div class="upload-default">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>选择商品</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">商品亮点：</label>
|
||||
<div class="layui-input-block shopping-lightspot">
|
||||
<div class="add-lightspot">+ 添加亮点</div>
|
||||
</div>
|
||||
<div class="word-aux">商品亮点最多可添加3个亮点</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>笔记内容：</label>
|
||||
<div class="layui-input-inline">
|
||||
<script id="editor" type="text/plain" class="special-length" style="height:500px;"></script>
|
||||
<input type="hidden" name="note_content" id="note_content" value="{$info.note_content}"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">发布时间：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_release_time" value="1" title="显示" {if $info.is_show_release_time == 1} checked {/if}>
|
||||
<input type="radio" name="is_show_release_time" value="0" title="不显示" {if $info.is_show_release_time == 0} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">阅读次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_read_num" value="1" title="显示" {if $info.is_show_read_num == 1} checked {/if}>
|
||||
<input type="radio" name="is_show_read_num" value="0" title="不显示" {if $info.is_show_read_num == 0} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">点赞次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_dianzan_num" value="1" title="显示" {if $info.is_show_dianzan_num == 1} checked {/if}>
|
||||
<input type="radio" name="is_show_dianzan_num" value="0" title="不显示" {if $info.is_show_dianzan_num == 0} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">虚拟阅读数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_read_num" value="{$info.initial_read_num}" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">虚拟点赞数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_dianzan_num" value="{$info.initial_dianzan_num}" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="sort" value="{$info.sort}" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="note_id" value="{$info.note_id}" />
|
||||
<input type="hidden" name="goods_ids" value="{$info.goods_ids}" />
|
||||
<input type="hidden" name="note_type" value="{$info.note_type}" />
|
||||
|
||||
<div class="form-row">
|
||||
{if $info.status == 1}
|
||||
<button class="layui-btn" lay-submit lay-filter="save">保存</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="backNotesList()">返回</button>
|
||||
{else /}
|
||||
<button class="layui-btn" lay-submit lay-filter="saveDrafts">保存</button>
|
||||
<button class="layui-btn" lay-submit lay-filter="save">立即发布</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="backNotesList()">返回</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 操作 -->
|
||||
<script type="text/html" id="operation">
|
||||
<div class="table-btn">
|
||||
<a class="layui-btn" onclick="delGoods({{d.goods_id}})">删除</a>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.config.js?time=20240614"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.all.js?time=20240614"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/lang/zh-cn/zh-cn.js"></script>
|
||||
<script>
|
||||
var form,
|
||||
IMAGE_MAX = 9, //最多可以上传多少张图片
|
||||
imageCollection = [], //图片集合
|
||||
repeat_flag = false,
|
||||
coverType = '{$info.cover_type}',
|
||||
coverImg = '{$info.cover_img}',
|
||||
goods_ids = '{$info.goods_ids}';
|
||||
|
||||
initImg();//初始化图片
|
||||
function initImg(){
|
||||
if (coverType == 0){
|
||||
imageCollection.push(coverImg);
|
||||
//单图
|
||||
$("#img").html("<img src=" + ns.img(coverImg) + " >");
|
||||
} else if (coverType == 1) {
|
||||
//多图
|
||||
var coverImgArr = coverImg.split(','),
|
||||
html = '';
|
||||
|
||||
imageCollection = coverImgArr;
|
||||
for (var i = 0; i < coverImgArr.length; i++) {
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(coverImgArr[i])}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
$(".multiple-uploading").append(html);
|
||||
}
|
||||
}
|
||||
//初始化商品亮点
|
||||
var spotGoods = "{$info.goods_highlights}";
|
||||
initShoppingLightspot();
|
||||
function initShoppingLightspot() {
|
||||
if (!spotGoods) return false;
|
||||
|
||||
spotGoods = spotGoods.split(',');
|
||||
|
||||
var html = '';
|
||||
|
||||
for(var i = 0; i < spotGoods.length; i++){
|
||||
html += `<div class="lightspot-item">`;
|
||||
html += `亮点名称：<input type="text" class="layui-input" maxlength="10" placeholder="最多10个字" value="${spotGoods[i]}">`;
|
||||
html += `<span>x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
if (spotGoods.length == 3) $(".shopping-lightspot").html(html);
|
||||
else $(".shopping-lightspot .add-lightspot").before(html)
|
||||
}
|
||||
|
||||
//实例化富文本
|
||||
var ue = UE.getEditor('editor');
|
||||
if($("#note_content").val()){
|
||||
ue.ready(function() {
|
||||
ue.setContent($("#note_content").val());
|
||||
});
|
||||
}
|
||||
|
||||
layui.use(['form'], function() {
|
||||
form = layui.form;
|
||||
form.render();
|
||||
|
||||
/**
|
||||
* 图片切换
|
||||
*/
|
||||
form.on('radio(cover_type)', function(data){
|
||||
//0单图 1多图
|
||||
if (data.value == 0){
|
||||
|
||||
if(imageCollection.length) {
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}
|
||||
|
||||
$(".simple-uploading").removeClass("layui-hide");
|
||||
$(".multiple-uploading").addClass("layui-hide");
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 750x420 像素的图片 最多上传1张');
|
||||
} else{
|
||||
if(imageCollection.length) {
|
||||
var html = '';
|
||||
html += `<div class="multiple-item" id="multiple_uploading">`;
|
||||
html += `<i class="iconfont iconshangchuan"></i>`;
|
||||
html += `<p>点击上传</p>`;
|
||||
html += `</div>`;
|
||||
|
||||
for (var i = 0; i < imageCollection.length; i++) {
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(imageCollection[i])}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
$(".multiple-uploading").html(html);
|
||||
}
|
||||
|
||||
$(".simple-uploading").addClass("layui-hide");
|
||||
$(".multiple-uploading").removeClass("layui-hide");
|
||||
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 350x350 像素的图片，最多上传9张');
|
||||
}
|
||||
});
|
||||
|
||||
// 单图上传
|
||||
$("body").off("click", "#img").on("click", "#img", function () {
|
||||
openAlbum(function (data) {
|
||||
imageCollection = [];
|
||||
imageCollection.push(data[0].pic_path);
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}, 1);
|
||||
});
|
||||
|
||||
//多图上传
|
||||
$("body").off("click","#multiple_uploading").on("click","#multiple_uploading", function () {
|
||||
var html = '';
|
||||
openAlbum(function (data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (imageCollection.length < IMAGE_MAX){
|
||||
imageCollection.push(data[i].pic_path);
|
||||
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(data[i].pic_path)}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
}
|
||||
if (imageCollection.length >= IMAGE_MAX)
|
||||
$("#multiple_uploading").addClass("layui-hide");
|
||||
|
||||
$(".multiple-uploading").append(html);
|
||||
|
||||
}, IMAGE_MAX);
|
||||
});
|
||||
|
||||
$("body").off('click', '.multiple-item .icon').on('click', '.multiple-item .icon', function () {
|
||||
var index = $(this).parent().index() - 1;
|
||||
imageCollection.splice(index,1);
|
||||
$(this).parent().remove();
|
||||
|
||||
if (imageCollection.length < IMAGE_MAX)
|
||||
$("#multiple_uploading").removeClass("layui-hide");
|
||||
});
|
||||
|
||||
//商品亮点
|
||||
$("body").off("click", ".shopping-lightspot .add-lightspot").on("click", ".shopping-lightspot .add-lightspot", function () {
|
||||
var len = 0,
|
||||
html = "";
|
||||
|
||||
html += `<div class="lightspot-item">`;
|
||||
html += `亮点名称：<input type="text" class="layui-input" maxlength="10" placeholder="最多10个字">`;
|
||||
html += `<span>x</span>`;
|
||||
html += `</div>`;
|
||||
$(this).before(html);
|
||||
|
||||
len = $(".shopping-lightspot .lightspot-item").length;
|
||||
if(len >= 3)
|
||||
$(this).addClass("layui-hide");
|
||||
});
|
||||
|
||||
$("body").off("click", ".shopping-lightspot .lightspot-item span").on("click", ".shopping-lightspot .lightspot-item span", function () {
|
||||
$(this).parents(".lightspot-item").remove();
|
||||
|
||||
var len = $(".shopping-lightspot .lightspot-item").length;
|
||||
if(len < 3) $(".shopping-lightspot .add-lightspot").removeClass("layui-hide");
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(立即发布)
|
||||
*/
|
||||
form.on('submit(save)', function(data){
|
||||
var field = data.field;
|
||||
field.status = 1;
|
||||
formSubmit(field)
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(草稿箱)
|
||||
*/
|
||||
form.on('submit(saveDrafts)', function(data){
|
||||
var field = data.field;
|
||||
field.status = 0;
|
||||
formSubmit(field)
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
function formSubmit(field)
|
||||
{
|
||||
// if (selectedGoodsId.length == 0) {
|
||||
// layer.msg('请选择参与活动的商品！', {icon: 5, anim: 6});
|
||||
// return;
|
||||
// }
|
||||
|
||||
if (!imageCollection.length){
|
||||
layer.msg('请选择封面图！', {icon: 5, anim: 6});
|
||||
return;
|
||||
}
|
||||
field.cover_img = imageCollection.join();
|
||||
|
||||
var goodsHighlights = [];
|
||||
for (var i = 0; i < $(".lightspot-item").length; i++){
|
||||
if($(".lightspot-item").eq(i).find('input').val()){
|
||||
goodsHighlights.push($(".lightspot-item").eq(i).find('input').val());
|
||||
}
|
||||
// else{
|
||||
// layer.msg("商品亮点不能为空");
|
||||
// return false;
|
||||
// }
|
||||
}
|
||||
field.goods_highlights = goodsHighlights.toString();
|
||||
|
||||
if (!ue.getContent()){
|
||||
layer.msg("笔记内容不能为空");
|
||||
return false;
|
||||
}
|
||||
|
||||
if(field.sort < 0){
|
||||
layer.msg("排序号不能小于0");
|
||||
return false;
|
||||
}
|
||||
field.note_content = ue.getContent();
|
||||
|
||||
if(repeat_flag) return;
|
||||
repeat_flag = true;
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
dataType: 'JSON',
|
||||
url: ns.url("notes://shop/notes/edit"),
|
||||
data: field,
|
||||
async: false,
|
||||
success: function(res){
|
||||
repeat_flag = false;
|
||||
|
||||
if (res.code == 0) {
|
||||
layer.confirm('编辑成功', {
|
||||
title:'操作提示',
|
||||
btn: ['返回列表', '继续编辑'],
|
||||
yes: function(index, layero){
|
||||
if(field.status == 0){
|
||||
location.hash = ns.hash("notes://shop/notes/drafts");
|
||||
}else{
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
}
|
||||
layer.close(index);
|
||||
},
|
||||
btn2: function(index, layero) {
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
}else{
|
||||
layer.msg(res.message);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加商品
|
||||
*/
|
||||
var selectedGoodsId = ['{$info.goods_ids}'];
|
||||
function addGoods() {
|
||||
goodsSelect(function (data) {
|
||||
if (Object.keys(data).length == 0) {
|
||||
selectGoodsSkuId = [];
|
||||
$("#goodImg").html('<div class="upload-default"> <i class="iconfont iconshangchuan"></i> <p>选择商品</p> </div>');
|
||||
return;
|
||||
}
|
||||
|
||||
selectedGoodsId = [];
|
||||
for (var key in data) {
|
||||
var item = data[key];
|
||||
goods_ids = item.goods_id;
|
||||
$("input[name=goods_ids]").val(goods_ids);
|
||||
$("#goodImg").html("<img src=" + ns.img(item.goods_image.split(",")[0],'small') + " >");
|
||||
$(".good-img").val(item.goods_image);
|
||||
$(".good-name").text(item.goods_name);
|
||||
$(".good-price span").text(item.price);
|
||||
}
|
||||
selectedGoodsId.push(goods_ids);
|
||||
}, selectedGoodsId, {mode: "spu", max_num: 1, min_num: 1, disabled:0});
|
||||
}
|
||||
|
||||
function backNotesList() {
|
||||
location.hash = ns.hash("notes://shop/notes/drafts");
|
||||
}
|
||||
|
||||
//检测数据类型
|
||||
function detectionNumType(el, type) {
|
||||
var value = $(el).val();
|
||||
//大于零 且 不是小数
|
||||
if (value < 0 && type == 'integral')
|
||||
$(el).val(0);
|
||||
else if (type == 'integral')
|
||||
$(el).val(Math.round(value));
|
||||
|
||||
//大于1 且 不是小数
|
||||
if (value < 1 && type == 'positiveInteger')
|
||||
$(el).val(1);
|
||||
else if (type == 'positiveInteger')
|
||||
$(el).val(Math.round(value));
|
||||
//大于零可以是小数
|
||||
if (type == 'positiveNumber') {
|
||||
value = parseFloat(value).toFixed(2);
|
||||
if (value < 0)
|
||||
$(el).val(0);
|
||||
else
|
||||
$(el).val(value);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
585
addon/notes/shop/view/notes/edit_goods_video.html
Executable file
585
addon/notes/shop/view/notes/edit_goods_video.html
Executable file
@@ -0,0 +1,585 @@
|
||||
|
||||
<link rel="stylesheet" href="__STATIC__/ext/video/video.css">
|
||||
<style>
|
||||
.layui-form-selected dl{z-index: 1000;}
|
||||
.upload-img-block .upload-img-box .upload-default{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
|
||||
.multiple-uploading{display: flex;flex-wrap: wrap;}
|
||||
.multiple-uploading .multiple-item{position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;margin-bottom: 10px;padding: 10px;width: 100px;height: 100px;border: 1px dashed #ddd;text-align: center;box-sizing: border-box;line-height: 1;color: #5a5a5a;}
|
||||
.multiple-uploading .multiple-item p{line-height: 20px;margin-top: 5px;}
|
||||
.multiple-uploading .multiple-item span{display: none;position: absolute;top: -10px;right: -7px;width: 20px;height: 20px;border: 1px solid #999;color: #999;background-color: #fff;border-radius: 50%;line-height: 1;font-size: 18px;cursor: pointer;}
|
||||
.multiple-uploading .multiple-item:hover .icon{display: block;}
|
||||
.multiple-uploading .multiple-item ~ .multiple-item{margin-left: 10px;}
|
||||
.multiple-uploading .iconfont{font-size: 30px;color: #6D7278;}
|
||||
#multiple_uploading{cursor: pointer;}
|
||||
.multiple-item img{max-width: 100%;max-height: 100%;}
|
||||
|
||||
/*上传视频相关*/
|
||||
.video-thumb{display:block;float:left;width:250px;height:120px;position:relative}
|
||||
.delete-video{width:51px;height:51px;cursor:pointer;position:absolute;right:150px;top:45px;color:#fff;z-index:100}
|
||||
.replace-video{width:75px;height:51px;cursor:pointer;position:absolute;right:50px;top:45px;color:#fff;z-index:100}
|
||||
.replace-video2{right:100px}
|
||||
.mask{position:absolute;left:0;width:250px;height:92px;background:#000;opacity:.6;cursor:pointer;z-index:10}
|
||||
.del-img{width:14px;margin-right:5px;padding-bottom:2px}
|
||||
.up-img{width:14px;height:14px;margin-right:5px;padding-bottom:3px}
|
||||
.up-video{position:absolute;left:0;width:250px;height:92px;cursor:pointer;z-index:10}
|
||||
.video-thumb .hide{display:none!important}
|
||||
.video-thumb>#goods_video{width:100%!important;height:121px;background:#fff}
|
||||
.hide{display:none}
|
||||
</style>
|
||||
|
||||
<div class="layui-collapse tips-wrap">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">操作提示</h2>
|
||||
<ul class="layui-colla-content layui-show">
|
||||
<li>管理员可以在此页编辑店铺笔记</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form form-wrap">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label"><span class="required">*</span>笔记标题：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="note_title" value="{$info.note_title}" lay-verify="required" maxlength="40" autocomplete="off" placeholder="笔记标题最多40个字" class="layui-input len-long">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">摘要：</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="note_abstract" class="layui-textarea len-long" maxlength="100">{$info.note_abstract}</textarea>
|
||||
</div>
|
||||
<div class="word-aux">笔记摘要最多可输入100个字</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>封面：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="cover_type" value="0" title="单图" lay-filter="cover_type" {if $info.cover_type == 0} checked {/if}>
|
||||
<input type="radio" name="cover_type" value="1" title="多图" lay-filter="cover_type" {if $info.cover_type == 1} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"></label>
|
||||
<div class="layui-input-block img-upload">
|
||||
<div class="upload-img-block square simple-uploading {if $info.cover_type != 0}layui-hide{/if}">
|
||||
<div class="upload-img-box" id="img">
|
||||
<div class="upload-default">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="multiple-uploading {if $info.cover_type != 1}layui-hide{/if}">
|
||||
<div class="multiple-item" id="multiple_uploading">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">推荐使用 750x420 像素的图片 最多上传1张</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>笔记分组：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="group_id" lay-verify="required">
|
||||
<option value="">请选择</option>
|
||||
{foreach $group_list as $v}
|
||||
<option value="{$v['group_id']}" {if $info.group_id == $v.group_id} selected {/if}>{$v['group_name']}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item goods_list">
|
||||
<label class="layui-form-label">关联商品：</label>
|
||||
|
||||
<div class="layui-input-block">
|
||||
<table id="selected_goods_list"></table>
|
||||
<button class="layui-btn" onclick="addGoods()">选择商品</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>添加视频：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="hidden" name="video_path" placeholder="在此输入外链视频地址" value="{$info.video_path}" autocomplete="off" class="layui-input len-long">
|
||||
<div class="video-thumb">
|
||||
<video id="goods_video" class="video-js vjs-big-play-centered" controls="" poster="SHOP_IMG/goods_video_preview.png" preload="auto"></video>
|
||||
</div>
|
||||
<div id="videoUpload2" class="up-video" title="商品视频" >
|
||||
<span class="delete-video hide" onclick="deleteVideo()"><img class="del-img" src="SHOP_IMG/delete.png">删除</span>
|
||||
<span id="" class="replace-video hide js-add-goods-video" ><img class="up-img" src="SHOP_IMG/upload.png">上传视频</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">发布时间：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_release_time" value="1" title="显示" {if $info.is_show_release_time == 1} checked {/if}>
|
||||
<input type="radio" name="is_show_release_time" value="0" title="不显示" {if $info.is_show_release_time == 0} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">阅读次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_read_num" value="1" title="显示" {if $info.is_show_read_num == 1} checked {/if}>
|
||||
<input type="radio" name="is_show_read_num" value="0" title="不显示" {if $info.is_show_read_num == 0} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">点赞次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_dianzan_num" value="1" title="显示" {if $info.is_show_dianzan_num == 1} checked {/if}>
|
||||
<input type="radio" name="is_show_dianzan_num" value="0" title="不显示" {if $info.is_show_dianzan_num == 0} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">虚拟阅读数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_read_num" value="{$info.initial_read_num}" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">虚拟点赞数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_dianzan_num" value="{$info.initial_dianzan_num}" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="sort" value="{$info.sort}" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="note_id" value="{$info.note_id}"/>
|
||||
<input type="hidden" name="goods_ids" value="{$info.goods_ids}"/>
|
||||
<input type="hidden" name="note_type" value="{$info.note_type}"/>
|
||||
|
||||
<div class="form-row">
|
||||
{if $info.status == 1}
|
||||
<button class="layui-btn" lay-submit lay-filter="save">保存</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="backNotesDrafts()">返回</button>
|
||||
{else /}
|
||||
<button class="layui-btn" lay-submit lay-filter="saveDrafts">保存</button>
|
||||
<button class="layui-btn" lay-submit lay-filter="save">立即发布</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="backNotesDrafts()">返回</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 操作 -->
|
||||
<script type="text/html" id="operation">
|
||||
<div class="table-btn">
|
||||
<a class="layui-btn" onclick="delGoods({{d.LAY_INDEX}})">删除</a>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script src="__STATIC__/ext/video/videojs-ie8.min.js"></script>
|
||||
<script src="__STATIC__/ext/video/video.min.js"></script>
|
||||
<script>
|
||||
var form,upload,
|
||||
IMAGE_MAX = 9, //最多可以上传多少张图片
|
||||
imageCollection = [], //图片集合
|
||||
selectedGoodsId = [],
|
||||
goods_id=[],
|
||||
repeat_flag = false,
|
||||
coverType = '{$info.cover_type}',
|
||||
coverImg = '{$info.cover_img}',
|
||||
goods_list = {:json_encode($info.goods_list, JSON_UNESCAPED_UNICODE)};
|
||||
|
||||
initImg();//初始化图片
|
||||
function initImg(){
|
||||
if (coverType == 0){
|
||||
imageCollection.push(coverImg);
|
||||
//单图
|
||||
if (coverImg) $("#img").html("<img src=" + ns.img(coverImg) + " >");
|
||||
} else if (coverType == 1) {
|
||||
//多图
|
||||
var coverImgArr = coverImg.split(','), html = '';
|
||||
|
||||
imageCollection = coverImgArr;
|
||||
for (var i = 0; i < coverImgArr.length; i++) {
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(coverImgArr[i])}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
$(".multiple-uploading").append(html);
|
||||
}
|
||||
}
|
||||
|
||||
loadVideo(true);
|
||||
|
||||
//初始化商品
|
||||
$.each(goods_list, function(index, item) {
|
||||
var id = item.goods_id;
|
||||
selectedGoodsId.push(id);
|
||||
goods_id.push(id);
|
||||
});
|
||||
$("input[name='goods_ids']").val(goods_id.toString());
|
||||
|
||||
renderTable(goods_list); // 初始化表格
|
||||
|
||||
layui.use(['form'], function() {
|
||||
form = layui.form;
|
||||
form.render();
|
||||
|
||||
/**
|
||||
* 图片切换
|
||||
*/
|
||||
form.on('radio(cover_type)', function(data){
|
||||
//0单图 1多图
|
||||
if (data.value == 0){
|
||||
|
||||
if(imageCollection.length) {
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}
|
||||
|
||||
$(".simple-uploading").removeClass("layui-hide");
|
||||
$(".multiple-uploading").addClass("layui-hide");
|
||||
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 750x420 像素的图片 最多上传1张');
|
||||
|
||||
} else{
|
||||
if(imageCollection.length) {
|
||||
var html = '';
|
||||
html += `<div class="multiple-item" id="multiple_uploading">`;
|
||||
html += `<i class="iconfont iconshangchuan"></i>`;
|
||||
html += `<p>点击上传</p>`;
|
||||
html += `</div>`;
|
||||
|
||||
for (var i = 0; i < imageCollection.length; i++) {
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(imageCollection[i])}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
$(".multiple-uploading").html(html);
|
||||
}
|
||||
|
||||
$(".simple-uploading").addClass("layui-hide");
|
||||
$(".multiple-uploading").removeClass("layui-hide");
|
||||
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 350x350 像素的图片，最多上传9张');
|
||||
}
|
||||
});
|
||||
|
||||
// 单图上传
|
||||
$("body").off("click", "#img").on("click", "#img", function () {
|
||||
openAlbum(function (data) {
|
||||
imageCollection = [];
|
||||
imageCollection.push(data[0].pic_path);
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}, 1);
|
||||
});
|
||||
|
||||
//多图上传
|
||||
$("body").off("click","#multiple_uploading").on("click","#multiple_uploading", function () {
|
||||
var html = '';
|
||||
openAlbum(function (data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (imageCollection.length < IMAGE_MAX){
|
||||
imageCollection.push(data[i].pic_path);
|
||||
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(data[i].pic_path)}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
}
|
||||
if (imageCollection.length >= IMAGE_MAX)
|
||||
$("#multiple_uploading").addClass("layui-hide");
|
||||
|
||||
$(".multiple-uploading").append(html);
|
||||
|
||||
}, IMAGE_MAX);
|
||||
});
|
||||
|
||||
$("body").off('click', '.multiple-item .icon').on('click', '.multiple-item .icon', function () {
|
||||
var index = $(this).parent().index() - 1;
|
||||
imageCollection.splice(index,1);
|
||||
$(this).parent().remove();
|
||||
|
||||
if (imageCollection.length < IMAGE_MAX)
|
||||
$("#multiple_uploading").removeClass("layui-hide");
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(立即发布)
|
||||
*/
|
||||
form.on('submit(save)', function(data){
|
||||
var field = data.field;
|
||||
field.status = 1;
|
||||
formSubmit(field)
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(草稿箱)
|
||||
*/
|
||||
form.on('submit(saveDrafts)', function(data){
|
||||
var field = data.field;
|
||||
field.status = 0;
|
||||
formSubmit(field)
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
function formSubmit(data)
|
||||
{
|
||||
if (!imageCollection.length){
|
||||
layer.msg('请选择封面图！', {icon: 5, anim: 6});
|
||||
return;
|
||||
}
|
||||
|
||||
// if (selectedGoodsId.length == 0) {
|
||||
// layer.msg('请选择参与活动的商品！', {icon: 5, anim: 6});
|
||||
// return;
|
||||
// }
|
||||
|
||||
data.cover_img = imageCollection.join();
|
||||
if(data.video_path == ''){
|
||||
layer.msg('请选择视频！', {icon: 5, anim: 6});
|
||||
return;
|
||||
}
|
||||
|
||||
if(data.sort < 0){
|
||||
layer.msg("排序号不能小于0");
|
||||
return false;
|
||||
}
|
||||
|
||||
if(repeat_flag) return;
|
||||
repeat_flag = true;
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
dataType: 'JSON',
|
||||
url: ns.url("notes://shop/notes/edit"),
|
||||
data: data,
|
||||
async: false,
|
||||
success: function(res){
|
||||
repeat_flag = false;
|
||||
|
||||
if (res.code == 0) {
|
||||
layer.confirm('编辑成功', {
|
||||
title:'操作提示',
|
||||
btn: ['返回列表', '继续编辑'],
|
||||
yes: function(index, layero){
|
||||
if(data.status == 0){
|
||||
location.hash = ns.hash("notes://shop/notes/drafts");
|
||||
}else{
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
}
|
||||
layer.close(index);
|
||||
},
|
||||
btn2: function(index, layero) {
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
}else{
|
||||
layer.msg(res.message);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 表格渲染
|
||||
function renderTable(goods_list) {
|
||||
//展示已知数据
|
||||
table = new Table({
|
||||
elem: '#selected_goods_list',
|
||||
cols: [
|
||||
[{
|
||||
field: 'goods_name',
|
||||
title: '商品名称',
|
||||
unresize: 'false',
|
||||
width: '50%'
|
||||
}, {
|
||||
field: 'price',
|
||||
title: '商品价格(元)',
|
||||
unresize: 'false',
|
||||
align: 'right',
|
||||
width: '20%',
|
||||
templet: function(data) {
|
||||
return '￥' + data.price;
|
||||
}
|
||||
}, {
|
||||
field: 'goods_stock',
|
||||
title: '库存',
|
||||
unresize: 'false',
|
||||
align: 'center',
|
||||
width: '20%'
|
||||
}, {
|
||||
title: '操作',
|
||||
toolbar: '#operation',
|
||||
unresize: 'false',
|
||||
align:'right'
|
||||
}],
|
||||
],
|
||||
data: goods_list,
|
||||
});
|
||||
}
|
||||
|
||||
// 添加商品
|
||||
function addGoods(){
|
||||
goodsSelect(function (data) {
|
||||
|
||||
goods_id = [];
|
||||
goods_list = [];
|
||||
|
||||
for (var key in data) {
|
||||
goods_id.push(data[key].goods_id);
|
||||
goods_list.push(data[key]);
|
||||
}
|
||||
|
||||
renderTable(goods_list);
|
||||
$("input[name='goods_ids']").val(goods_id.toString());
|
||||
selectedGoodsId = goods_id;
|
||||
|
||||
},selectedGoodsId, {mode: "spu"});
|
||||
}
|
||||
|
||||
// 删除选中商品
|
||||
function delGoods(index) {
|
||||
goods_list.splice(index, 1);
|
||||
renderTable(goods_list);
|
||||
|
||||
selectedGoodsId.splice(index, 1);
|
||||
goods_id = selectedGoodsId;
|
||||
$("input[name='goods_ids']").val(goods_id.toString());
|
||||
}
|
||||
|
||||
function backNotesDrafts() {
|
||||
location.hash = ns.hash("notes://shop/notes/drafts");
|
||||
}
|
||||
|
||||
//检测数据类型
|
||||
function detectionNumType(el, type) {
|
||||
var value = $(el).val();
|
||||
//大于零 且 不是小数
|
||||
if (value < 0 && type == 'integral')
|
||||
$(el).val(0);
|
||||
else if (type == 'integral')
|
||||
$(el).val(Math.round(value));
|
||||
|
||||
//大于1 且 不是小数
|
||||
if (value < 1 && type == 'positiveInteger')
|
||||
$(el).val(1);
|
||||
else if (type == 'positiveInteger')
|
||||
$(el).val(Math.round(value));
|
||||
//大于零可以是小数
|
||||
if (type == 'positiveNumber') {
|
||||
value = parseFloat(value).toFixed(2);
|
||||
if (value < 0)
|
||||
$(el).val(0);
|
||||
else
|
||||
$(el).val(value);
|
||||
}
|
||||
}
|
||||
function deleteVideoClass(){
|
||||
$('#goods_video').removeClass("vjs-error");
|
||||
}
|
||||
//删除已选择的视频
|
||||
function deleteVideo() {
|
||||
var src = $("input[name='video_path']").val();
|
||||
if (src != "") {
|
||||
var video = 'goods_video';
|
||||
var myPlayer = videojs(video);
|
||||
videojs(video).ready(function () {
|
||||
var myPlayer = this;
|
||||
myPlayer.pause();
|
||||
});
|
||||
|
||||
$("#goods_video_html5_api").attr('src', "");
|
||||
$(".vjs-modal-dialog-content").hide();
|
||||
$(".vjs-error-display").hide();
|
||||
setTimeout("deleteVideoClass()",30 );
|
||||
$('#goods_video_html5_api').attr('controls', true);
|
||||
$(".vjs-poster").hide();
|
||||
|
||||
$("input[name='video_path']").val('');
|
||||
}
|
||||
}
|
||||
|
||||
$('body').off('mouseover', '#videoUpload2').on('mouseover', '#videoUpload2', function () {
|
||||
$(this).addClass('mask');
|
||||
var src = $('#goods_video_html5_api').attr('src');
|
||||
if(src) {
|
||||
$(".delete-video").removeClass('hide');
|
||||
$(".replace-video").removeClass('hide').removeClass('replace-video2');
|
||||
} else {
|
||||
$(".replace-video").removeClass('hide').addClass('replace-video2');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$('body').off('mouseout', '#videoUpload2').on('mouseout', '#videoUpload2', function () {
|
||||
$(this).removeClass('mask');
|
||||
$(".delete-video").addClass('hide');
|
||||
$(".replace-video").addClass('hide');
|
||||
});
|
||||
|
||||
//添加商品视频
|
||||
$("body").off("click", ".js-add-goods-video").on("click", ".js-add-goods-video", function () {
|
||||
openAlbum(function (data) {
|
||||
if(data.length > 0) {
|
||||
$("input[name='video_path']").val(data[0]['pic_path']);
|
||||
loadVideo();
|
||||
}
|
||||
}, 1, 0, 'video');
|
||||
});
|
||||
/**
|
||||
* 加载视频
|
||||
* @param flag 是否暂停
|
||||
*/
|
||||
function loadVideo(flag) {
|
||||
|
||||
var video_path = $("input[name='video_path']").val();
|
||||
if (!video_path.length) return;
|
||||
|
||||
var video = "goods_video";
|
||||
var myPlayer = videojs(video);
|
||||
var value = ns.img(video_path);
|
||||
|
||||
videojs(video).ready(function () {
|
||||
var myPlayer = this;
|
||||
myPlayer.src(value);
|
||||
myPlayer.load(value);
|
||||
myPlayer.play();
|
||||
// if (flag) {
|
||||
// setTimeout(function () {
|
||||
// myPlayer.pause();
|
||||
// }, 10);
|
||||
// }
|
||||
setTimeout(function () {
|
||||
if (!$(".video-thumb .vjs-error-display").hasClass("vjs-hidden")) {
|
||||
$("input[name='video_path']").val("");//video.js Line:7873
|
||||
layer.msg("媒体不能加载，要么是因为服务器或网络失败，要么是因为格式不受支持。");
|
||||
} else {
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
491
addon/notes/shop/view/notes/edit_shop_said.html
Executable file
491
addon/notes/shop/view/notes/edit_shop_said.html
Executable file
@@ -0,0 +1,491 @@
|
||||
<style>
|
||||
.layui-form-selected dl{z-index: 1000;}
|
||||
.upload-img-block .upload-img-box .upload-default{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
|
||||
.multiple-uploading{display: flex;flex-wrap: wrap;}
|
||||
.multiple-uploading .multiple-item{position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;margin-bottom: 10px;padding: 10px;width: 100px;height: 100px;border: 1px dashed #ddd;text-align: center;box-sizing: border-box;line-height: 1;color: #5a5a5a;}
|
||||
.multiple-uploading .multiple-item p{line-height: 20px;margin-top: 5px;}
|
||||
.multiple-uploading .multiple-item span{display: none;position: absolute;top: -10px;right: -7px;width: 20px;height: 20px;border: 1px solid #999;color: #999;background-color: #fff;border-radius: 50%;line-height: 1;font-size: 18px;cursor: pointer;}
|
||||
.multiple-uploading .multiple-item:hover .icon{display: block;}
|
||||
.multiple-uploading .multiple-item ~ .multiple-item{margin-left: 10px;}
|
||||
.multiple-uploading .iconfont{font-size: 30px;color: #6D7278;}
|
||||
#multiple_uploading{cursor: pointer;}
|
||||
.multiple-item img{max-width: 100%;max-height: 100%;}
|
||||
</style>
|
||||
|
||||
<div class="layui-collapse tips-wrap">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">操作提示</h2>
|
||||
<ul class="layui-colla-content layui-show">
|
||||
<li>管理员可以在此页编辑店铺笔记</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form form-wrap">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label"><span class="required">*</span>笔记标题：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="note_title" value="{$info.note_title}" lay-verify="required" maxlength="40" autocomplete="off" placeholder="笔记标题最多40个字" class="layui-input len-long">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">摘要：</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="note_abstract" class="layui-textarea len-long" maxlength="100">{$info.note_abstract}</textarea>
|
||||
</div>
|
||||
<div class="word-aux">笔记摘要最多可输入100个字</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>封面：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="cover_type" value="0" title="单图" lay-filter="cover_type" {if $info.cover_type == 0} checked {/if}>
|
||||
<input type="radio" name="cover_type" value="1" title="多图" lay-filter="cover_type" {if $info.cover_type == 1} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"></label>
|
||||
<div class="layui-input-block img-upload">
|
||||
<div class="upload-img-block square simple-uploading {if $info.cover_type != 0}layui-hide{/if}">
|
||||
<div class="upload-img-box" id="img">
|
||||
<div class="upload-default">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="multiple-uploading {if $info.cover_type != 1}layui-hide{/if}">
|
||||
<div class="multiple-item" id="multiple_uploading">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">推荐使用 750x420 像素的图片 最多上传1张</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>笔记分组：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="group_id" lay-verify="required">
|
||||
<option value="">请选择</option>
|
||||
{foreach $group_list as $v}
|
||||
<option value="{$v['group_id']}" {if $info.group_id == $v.group_id} selected {/if}>{$v['group_name']}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item goods_list">
|
||||
<label class="layui-form-label">选择商品：</label>
|
||||
|
||||
<div class="layui-input-block">
|
||||
<table id="selected_goods_list"></table>
|
||||
<button class="layui-btn" onclick="addGoods()">选择商品</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>笔记内容：</label>
|
||||
<div class="layui-input-inline">
|
||||
<script id="editor" type="text/plain" class="special-length" style="height:500px;"></script>
|
||||
<input type="hidden" name="note_content" id="note_content" value="{$info.note_content}"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">发布时间：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_release_time" value="1" title="显示" {if $info.is_show_release_time == 1} checked {/if}>
|
||||
<input type="radio" name="is_show_release_time" value="0" title="不显示" {if $info.is_show_release_time == 0} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">阅读次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_read_num" value="1" title="显示" {if $info.is_show_read_num == 1} checked {/if}>
|
||||
<input type="radio" name="is_show_read_num" value="0" title="不显示" {if $info.is_show_read_num == 0} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">点赞次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_dianzan_num" value="1" title="显示" {if $info.is_show_dianzan_num == 1} checked {/if}>
|
||||
<input type="radio" name="is_show_dianzan_num" value="0" title="不显示" {if $info.is_show_dianzan_num == 0} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">虚拟阅读数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_read_num" value="{$info.initial_read_num}" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">虚拟点赞数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="initial_dianzan_num" value="{$info.initial_dianzan_num}" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" min="0" name="sort" value="{$info.sort}" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="note_id" value="{$info.note_id}" />
|
||||
<input type="hidden" name="goods_ids" value="{$info.goods_ids}" />
|
||||
<input type="hidden" name="note_type" value="{$info.note_type}" />
|
||||
|
||||
<div class="form-row">
|
||||
{if $info.status == 1}
|
||||
<button class="layui-btn" lay-submit lay-filter="save">保存</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="backNotesDrafts()">返回</button>
|
||||
{else /}
|
||||
<button class="layui-btn" lay-submit lay-filter="saveDrafts">保存</button>
|
||||
<button class="layui-btn" lay-submit lay-filter="save">立即发布</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="backNotesDrafts()">返回</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 操作 -->
|
||||
<script type="text/html" id="operation">
|
||||
<div class="table-btn">
|
||||
<a class="layui-btn" onclick="delGoods({{d.LAY_INDEX-1}})">删除</a>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.config.js?time=20240614"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.all.js?time=20240614"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/lang/zh-cn/zh-cn.js"></script>
|
||||
<script>
|
||||
var form,upload,
|
||||
IMAGE_MAX = 9, //最多可以上传多少张图片
|
||||
imageCollection = [], //图片集合
|
||||
selectedGoodsId = [],
|
||||
goods_id=[],
|
||||
repeat_flag = false,
|
||||
coverType = '{$info.cover_type}',
|
||||
coverImg = '{$info.cover_img}',
|
||||
goods_list = {:json_encode($info.goods_list, JSON_UNESCAPED_UNICODE)};
|
||||
|
||||
initImg();//初始化图片
|
||||
function initImg(){
|
||||
if (coverType == 0){
|
||||
imageCollection.push(coverImg);
|
||||
//单图
|
||||
if (coverImg) $("#img").html("<img src=" + ns.img(coverImg) + " >");
|
||||
} else if (coverType == 1) {
|
||||
//多图
|
||||
var coverImgArr = coverImg.split(','),
|
||||
html = '';
|
||||
|
||||
imageCollection = coverImgArr;
|
||||
for (var i = 0; i < coverImgArr.length; i++) {
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(coverImgArr[i])}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
$(".multiple-uploading").append(html);
|
||||
}
|
||||
}
|
||||
|
||||
//初始化商品
|
||||
$.each(goods_list, function(index, item) {
|
||||
var id = item.goods_id;
|
||||
selectedGoodsId.push(id);
|
||||
goods_id.push(id);
|
||||
});
|
||||
$("input[name='goods_ids']").val(goods_id.toString());
|
||||
|
||||
renderTable(goods_list); // 初始化表格
|
||||
|
||||
//实例化富文本
|
||||
var ue = UE.getEditor('editor');
|
||||
if($("#note_content").val()){
|
||||
ue.ready(function() {
|
||||
ue.setContent($("#note_content").val());
|
||||
});
|
||||
}
|
||||
|
||||
layui.use(['form'], function() {
|
||||
form = layui.form;
|
||||
form.render();
|
||||
|
||||
/**
|
||||
* 图片切换
|
||||
*/
|
||||
form.on('radio(cover_type)', function(data){
|
||||
//0单图 1多图
|
||||
if (data.value == 0){
|
||||
|
||||
if(imageCollection.length) {
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}
|
||||
|
||||
$(".simple-uploading").removeClass("layui-hide");
|
||||
$(".multiple-uploading").addClass("layui-hide");
|
||||
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 750x420 像素的图片 最多上传1张');
|
||||
|
||||
} else{
|
||||
if(imageCollection.length) {
|
||||
var html = '';
|
||||
html += `<div class="multiple-item" id="multiple_uploading">`;
|
||||
html += `<i class="iconfont iconshangchuan"></i>`;
|
||||
html += `<p>点击上传</p>`;
|
||||
html += `</div>`;
|
||||
|
||||
for (var i = 0; i < imageCollection.length; i++) {
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(imageCollection[i])}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
$(".multiple-uploading").html(html);
|
||||
}
|
||||
|
||||
$(".simple-uploading").addClass("layui-hide");
|
||||
$(".multiple-uploading").removeClass("layui-hide");
|
||||
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 350x350 像素的图片，最多上传9张');
|
||||
}
|
||||
});
|
||||
|
||||
// 单图上传
|
||||
$("body").off("click", "#img").on("click", "#img", function () {
|
||||
openAlbum(function (data) {
|
||||
imageCollection = [];
|
||||
imageCollection.push(data[0].pic_path);
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}, 1);
|
||||
});
|
||||
|
||||
//多图上传
|
||||
$("body").off("click","#multiple_uploading").on("click","#multiple_uploading", function () {
|
||||
var html = '';
|
||||
openAlbum(function (data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (imageCollection.length < IMAGE_MAX){
|
||||
imageCollection.push(data[i].pic_path);
|
||||
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(data[i].pic_path)}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
}
|
||||
if (imageCollection.length >= IMAGE_MAX)
|
||||
$("#multiple_uploading").addClass("layui-hide");
|
||||
|
||||
$(".multiple-uploading").append(html);
|
||||
|
||||
}, IMAGE_MAX);
|
||||
});
|
||||
|
||||
$("body").off('click', '.multiple-item .icon').on('click', '.multiple-item .icon', function () {
|
||||
var index = $(this).parent().index() - 1;
|
||||
imageCollection.splice(index,1);
|
||||
$(this).parent().remove();
|
||||
|
||||
if (imageCollection.length < IMAGE_MAX)
|
||||
$("#multiple_uploading").removeClass("layui-hide");
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(立即发布)
|
||||
*/
|
||||
form.on('submit(save)', function(data){
|
||||
var field = data.field;
|
||||
field.status = 1;
|
||||
formSubmit(field)
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(草稿箱)
|
||||
*/
|
||||
form.on('submit(saveDrafts)', function(data){
|
||||
var field = data.field;
|
||||
field.status = 0;
|
||||
formSubmit(field)
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
function formSubmit(field)
|
||||
{
|
||||
if (!imageCollection.length){
|
||||
layer.msg('请选择封面图！', {icon: 5, anim: 6});
|
||||
return;
|
||||
}
|
||||
|
||||
// if (selectedGoodsId.length == 0) {
|
||||
// layer.msg('请选择参与活动的商品！', {icon: 5, anim: 6});
|
||||
// return;
|
||||
// }
|
||||
|
||||
field.cover_img = imageCollection.join();
|
||||
|
||||
if (!ue.getContent()){
|
||||
layer.msg("笔记内容不能为空");
|
||||
return false;
|
||||
}
|
||||
|
||||
if(field.sort < 0){
|
||||
layer.msg("排序号不能小于0");
|
||||
return false;
|
||||
}
|
||||
|
||||
field.note_content = ue.getContent();
|
||||
|
||||
if(repeat_flag) return;
|
||||
repeat_flag = true;
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
dataType: 'JSON',
|
||||
url: ns.url("notes://shop/notes/edit"),
|
||||
data: field,
|
||||
async: false,
|
||||
success: function(res){
|
||||
repeat_flag = false;
|
||||
|
||||
if (res.code == 0) {
|
||||
layer.confirm('编辑成功', {
|
||||
title:'操作提示',
|
||||
btn: ['返回列表', '继续编辑'],
|
||||
yes: function(index, layero){
|
||||
if(field.status == 0){
|
||||
location.hash = ns.hash("notes://shop/notes/drafts");
|
||||
}else{
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
}
|
||||
layer.close(index);
|
||||
},
|
||||
btn2: function(index, layero) {
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
}else{
|
||||
layer.msg(res.message);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 表格渲染
|
||||
function renderTable(goods_list) {
|
||||
//展示已知数据
|
||||
table = new Table({
|
||||
elem: '#selected_goods_list',
|
||||
cols: [
|
||||
[{
|
||||
field: 'goods_name',
|
||||
title: '商品名称',
|
||||
unresize: 'false',
|
||||
width: '50%'
|
||||
}, {
|
||||
field: 'price',
|
||||
title: '商品价格(元)',
|
||||
unresize: 'false',
|
||||
align: 'right',
|
||||
width: '20%',
|
||||
templet: function(data) {
|
||||
return '￥' + data.price;
|
||||
}
|
||||
}, {
|
||||
field: 'goods_stock',
|
||||
title: '库存',
|
||||
unresize: 'false',
|
||||
align: 'center',
|
||||
width: '20%'
|
||||
}, {
|
||||
title: '操作',
|
||||
toolbar: '#operation',
|
||||
unresize: 'false',
|
||||
align:'right'
|
||||
}],
|
||||
],
|
||||
data: goods_list,
|
||||
});
|
||||
}
|
||||
|
||||
// 添加商品
|
||||
function addGoods(){
|
||||
goodsSelect(function (data) {
|
||||
|
||||
goods_id = [];
|
||||
goods_list = [];
|
||||
|
||||
for (var key in data) {
|
||||
goods_id.push(data[key].goods_id);
|
||||
goods_list.push(data[key]);
|
||||
}
|
||||
|
||||
renderTable(goods_list);
|
||||
$("input[name='goods_ids']").val(goods_id.toString());
|
||||
selectedGoodsId = goods_id;
|
||||
|
||||
},selectedGoodsId, {mode: "spu"});
|
||||
}
|
||||
|
||||
// 删除选中商品
|
||||
function delGoods(index) {
|
||||
goods_list.splice(index, 1);
|
||||
renderTable(goods_list);
|
||||
|
||||
selectedGoodsId.splice(index, 1);
|
||||
goods_id = selectedGoodsId;
|
||||
$("input[name='goods_ids']").val(goods_id.toString());
|
||||
}
|
||||
|
||||
function backNotesDrafts() {
|
||||
location.hash = ns.hash("notes://shop/notes/drafts");
|
||||
}
|
||||
|
||||
//检测数据类型
|
||||
function detectionNumType(el, type) {
|
||||
var value = $(el).val();
|
||||
//大于零 且 不是小数
|
||||
if (value < 0 && type == 'integral')
|
||||
$(el).val(0);
|
||||
else if (type == 'integral')
|
||||
$(el).val(Math.round(value));
|
||||
|
||||
//大于1 且 不是小数
|
||||
if (value < 1 && type == 'positiveInteger')
|
||||
$(el).val(1);
|
||||
else if (type == 'positiveInteger')
|
||||
$(el).val(Math.round(value));
|
||||
//大于零可以是小数
|
||||
if (type == 'positiveNumber') {
|
||||
value = parseFloat(value).toFixed(2);
|
||||
if (value < 0)
|
||||
$(el).val(0);
|
||||
else
|
||||
$(el).val(value);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
568
addon/notes/shop/view/notes/edit_wechat_article.html
Executable file
568
addon/notes/shop/view/notes/edit_wechat_article.html
Executable file
@@ -0,0 +1,568 @@
|
||||
<style>
|
||||
.layui-form-selected dl{z-index: 1000;}
|
||||
.upload-img-block .upload-img-box .upload-default{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
|
||||
.multiple-uploading{display: flex;flex-wrap: wrap;}
|
||||
.multiple-uploading .multiple-item{position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;margin-bottom: 10px;padding: 10px;width: 100px;height: 100px;border: 1px dashed #ddd;text-align: center;box-sizing: border-box;line-height: 1;color: #5a5a5a;}
|
||||
.multiple-uploading .multiple-item p{line-height: 20px;margin-top: 5px;}
|
||||
.multiple-uploading .multiple-item span{display: none;position: absolute;top: -10px;right: -7px;width: 20px;height: 20px;border: 1px solid #999;color: #999;background-color: #fff;border-radius: 50%;line-height: 1;font-size: 18px;cursor: pointer;}
|
||||
.multiple-uploading .multiple-item:hover .icon{display: block;}
|
||||
.multiple-uploading .multiple-item ~ .multiple-item{margin-left: 10px;}
|
||||
.multiple-uploading .iconfont{font-size: 30px;color: #6D7278;}
|
||||
#multiple_uploading{cursor: pointer;}
|
||||
.multiple-item img{max-width: 100%;max-height: 100%;}
|
||||
|
||||
.form-view .short-label{width:120px}
|
||||
.form-view .layui-input-block{margin-left:120px}
|
||||
.form-view .word-aux{margin-left:120px}
|
||||
.wechat-view{width: 100%;display: flex;}
|
||||
.content-view{width: 450px;}
|
||||
.form-view{flex:1;}
|
||||
.preview-head-div{background:url(STATIC_EXT/diyview/img/preview_head.png) no-repeat 50%/cover;font-size:14px;display:block;height:64px;line-height:82px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer;margin:0 auto}
|
||||
#title_html{text-align: center;font-size: 16px;font-weight: bold;}
|
||||
|
||||
.content-box::-webkit-scrollbar { width: 0 !important }
|
||||
.content-box { -ms-overflow-style: none; }
|
||||
.content-box { overflow: -moz-scrollbars-none; }
|
||||
.pull-disabled-btn{opacity: .6;filter: alpha(opacity=60);color: #fff;}
|
||||
</style>
|
||||
|
||||
<div class="wechat-view">
|
||||
<div class="content-view" style="padding: 0px 24px;height: 100%;overflow: auto;">
|
||||
<div style=" border: 1px solid rgb(241, 241, 241);width: 375px;">
|
||||
<div style="padding: 13px 20px; background: rgb(255, 255, 255); box-shadow: rgb(239, 239, 239) 0px -1px 0px inset;">
|
||||
<div class="component-title" style="padding-left: 0px; font-size: 14px; font-weight: bold; color: rgba(0, 0, 0, 0.8);">店铺笔记预览</div>
|
||||
</div>
|
||||
<div class="preview-head-div" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); text-align: left;"><span style="text-align: left;"> </span></div>
|
||||
<div>
|
||||
<h5 id="title_html">{$info.note_title}</h5>
|
||||
</div>
|
||||
<div class="content-box" style="padding: 9px 12px;box-sizing: border-box;height: 650px;overflow-x: hidden; overflow-y: auto;">
|
||||
<div id="content_html">{php}echo $info['note_content'];{/php}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form form-wrap form-view" style="overflow: auto;background: #fff;position: relative;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">文章链接：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="note_link" value="{$info.note_link}" autocomplete="off" placeholder="请输入文章链接" class="layui-input len-mid">
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<button class="layui-btn pull-btn" onclick="pullArticle(this)">获取文章</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label"><span class="required">*</span>笔记标题：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" value="{$info.note_title}"name="note_title" lay-verify="required" onchange="fetchTitle(this.value)" maxlength="40" autocomplete="off" placeholder="笔记标题最多40个字" class="layui-input len-mid">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">摘要：</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="note_abstract" class="layui-textarea len-mid" maxlength="100">{$info.note_abstract}</textarea>
|
||||
</div>
|
||||
<div class="word-aux">笔记摘要最多可输入100个字</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label"><span class="required">*</span>封面：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="cover_type" value="0" title="单图" lay-filter="cover_type"{if $info.cover_type == 0} checked{/if}>
|
||||
<input type="radio" name="cover_type" value="1" title="多图" lay-filter="cover_type"{if $info.cover_type == 1} checked{/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label"></label>
|
||||
<div class="layui-input-block img-upload">
|
||||
<div class="upload-img-block square simple-uploading {if $info.cover_type != 0}layui-hide{/if}">
|
||||
<div class="upload-img-box" id="img">
|
||||
<div class="upload-default">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="multiple-uploading {if $info.cover_type != 1}layui-hide{/if}">
|
||||
<div class="multiple-item" id="multiple_uploading">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">推荐使用 750x420 像素的图片 最多上传1张</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label"><span class="required">*</span>笔记分组：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="group_id" lay-verify="required">
|
||||
<option value="">请选择</option>
|
||||
{foreach $group_list as $v}
|
||||
<option value="{$v['group_id']}" {if $info.group_id == $v.group_id} selected {/if}>{$v['group_name']}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item goods_list">
|
||||
<label class="layui-form-label short-label">关联商品：</label>
|
||||
|
||||
<div class="layui-input-block">
|
||||
<table id="selected_goods_list"></table>
|
||||
<button class="layui-btn" onclick="addGoods()">选择商品</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">发布时间：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_release_time" value="1" title="显示" {if $info.is_show_release_time == 1} checked {/if}>
|
||||
<input type="radio" name="is_show_release_time" value="0" title="不显示" {if $info.is_show_release_time == 0} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">阅读次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_read_num" value="1" title="显示" {if $info.is_show_read_num == 1} checked {/if}>
|
||||
<input type="radio" name="is_show_read_num" value="0" title="不显示" {if $info.is_show_read_num == 0} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">点赞次数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="is_show_dianzan_num" value="1" title="显示" {if $info.is_show_dianzan_num == 1} checked {/if}>
|
||||
<input type="radio" name="is_show_dianzan_num" value="0" title="不显示" {if $info.is_show_dianzan_num == 0} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">虚拟阅读数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" value="{$info.initial_read_num}" min="0" name="initial_read_num" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">虚拟点赞数：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" value="{$info.initial_dianzan_num}" min="0" name="initial_dianzan_num" onchange="detectionNumType(this,'integral')" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label">排序：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" value="{$info.sort}" min="0" name="sort" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<button class="layui-btn" lay-submit lay-filter="save">立即发布</button>
|
||||
<button class="layui-btn" lay-submit lay-filter="saveDrafts">保存至草稿箱</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="backNotesList()">返回</button>
|
||||
</div>
|
||||
<input type="hidden" name="note_content" value="{$info.note_content}"/>
|
||||
<input type="hidden" name="goods_ids" value="{$info.goods_ids}" />
|
||||
<input type="hidden" name="note_type" value="{$info.note_type}" />
|
||||
<input type="hidden" name="note_id" value="{$info.note_id}" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作 -->
|
||||
<script type="text/html" id="operation">
|
||||
<div class="table-btn">
|
||||
<a class="layui-btn" onclick="delGoods({{d.goods_id}})">删除</a>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
//实例化富文本
|
||||
var form,repeat_flag,
|
||||
IMAGE_MAX = 9, //最多可以上传多少张图片
|
||||
imageCollection = [], //图片集合
|
||||
coverType = '{$info.cover_type}',
|
||||
coverImg = '{$info.cover_img}',
|
||||
selectedGoodsId = [],
|
||||
goods_id=[],
|
||||
goods_list = {:json_encode($info.goods_list, JSON_UNESCAPED_UNICODE)};
|
||||
|
||||
initImg();//初始化图片
|
||||
function initImg(){
|
||||
if (coverType == 0){
|
||||
imageCollection.push(coverImg);
|
||||
//单图
|
||||
$("#img").html("<img src=" + ns.img(coverImg) + " >");
|
||||
} else if (coverType == 1) {
|
||||
//多图
|
||||
var coverImgArr = coverImg.split(','),
|
||||
html = '';
|
||||
|
||||
imageCollection = coverImgArr;
|
||||
for (var i = 0; i < coverImgArr.length; i++) {
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(coverImgArr[i])}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
$(".multiple-uploading").append(html);
|
||||
}
|
||||
}
|
||||
|
||||
//初始化商品
|
||||
$.each(goods_list, function(index, item) {
|
||||
var id = item.goods_id;
|
||||
selectedGoodsId.push(id);
|
||||
goods_id.push(id);
|
||||
});
|
||||
$("input[name='goods_ids']").val(goods_id.toString());
|
||||
|
||||
renderTable(goods_list); // 初始化表格
|
||||
|
||||
layui.use(['form'], function() {
|
||||
form = layui.form;
|
||||
repeat_flag = false;
|
||||
|
||||
form.render();
|
||||
|
||||
/**
|
||||
* 图片切换
|
||||
*/
|
||||
form.on('radio(cover_type)', function(data){
|
||||
//0单图 1多图
|
||||
if (data.value == 0){
|
||||
|
||||
if(imageCollection.length) {
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}
|
||||
|
||||
$(".simple-uploading").removeClass("layui-hide");
|
||||
$(".multiple-uploading").addClass("layui-hide");
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 750x420 像素的图片 最多上传1张');
|
||||
|
||||
} else{
|
||||
if(imageCollection.length) {
|
||||
var html = '';
|
||||
html += `<div class="multiple-item" id="multiple_uploading">`;
|
||||
html += `<i class="iconfont iconshangchuan"></i>`;
|
||||
html += `<p>点击上传</p>`;
|
||||
html += `</div>`;
|
||||
|
||||
for (var i = 0; i < imageCollection.length; i++) {
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(imageCollection[i])}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
$(".multiple-uploading").html(html);
|
||||
}
|
||||
|
||||
$(".simple-uploading").addClass("layui-hide");
|
||||
$(".multiple-uploading").removeClass("layui-hide");
|
||||
$(".simple-uploading").parents(".layui-form-item").find('.word-aux').text('推荐使用 350x350 像素的图片，最多上传9张');
|
||||
}
|
||||
});
|
||||
|
||||
/* var upload = new Upload({
|
||||
elem: '#img',
|
||||
callback:function (res) {
|
||||
if (res.code >= 0) {
|
||||
imageCollection = [];
|
||||
imageCollection.push(res.data.pic_path)
|
||||
}
|
||||
},
|
||||
deleteCallback:function () {
|
||||
upload.delete();
|
||||
imageCollection = [];
|
||||
}
|
||||
}); */
|
||||
|
||||
// 单图上传
|
||||
$("body").off("click", "#img").on("click", "#img", function () {
|
||||
openAlbum(function (data) {
|
||||
imageCollection = [];
|
||||
imageCollection.push(data[0].pic_path);
|
||||
imageCollection.splice(1, imageCollection.length);
|
||||
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="">';
|
||||
$("#img").html(val);
|
||||
}, 1);
|
||||
});
|
||||
|
||||
//多图上传
|
||||
$("body").off("click","#multiple_uploading").on("click","#multiple_uploading", function () {
|
||||
var html = '';
|
||||
openAlbum(function (data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (imageCollection.length < IMAGE_MAX){
|
||||
imageCollection.push(data[i].pic_path);
|
||||
|
||||
html += `<div class="multiple-item">`;
|
||||
html += `<img src="${ns.img(data[i].pic_path)}" alt="">`;
|
||||
html += `<span class="icon">x</span>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
}
|
||||
if (imageCollection.length >= IMAGE_MAX)
|
||||
$("#multiple_uploading").addClass("layui-hide");
|
||||
|
||||
$(".multiple-uploading").append(html);
|
||||
|
||||
}, IMAGE_MAX);
|
||||
});
|
||||
|
||||
$("body").off('click', '.multiple-item .icon').on('click', '.multiple-item .icon', function () {
|
||||
var index = $(this).parent().index() - 1;
|
||||
imageCollection.splice(index,1);
|
||||
$(this).parent().remove();
|
||||
|
||||
if (imageCollection.length < IMAGE_MAX) $("#multiple_uploading").removeClass("layui-hide");
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(立即发布)
|
||||
*/
|
||||
form.on('submit(save)', function(data){
|
||||
var field = data.field;
|
||||
field.status = 1;
|
||||
formSubmit(field)
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交(草稿箱)
|
||||
*/
|
||||
form.on('submit(saveDrafts)', function(data){
|
||||
var field = data.field;
|
||||
field.status = 0;
|
||||
formSubmit(field)
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
function formSubmit(data)
|
||||
{
|
||||
if (!imageCollection.length){
|
||||
layer.msg('请选择封面图！', {icon: 5, anim: 6});
|
||||
return;
|
||||
}
|
||||
|
||||
// if (selectedGoodsId.length == 0) {
|
||||
// layer.msg('请选择参与活动的商品！', {icon: 5, anim: 6});
|
||||
// return;
|
||||
// }
|
||||
if(data.note_content == ''){
|
||||
layer.msg('请先获取文章信息！', {icon: 5, anim: 6});
|
||||
return;
|
||||
}
|
||||
data.cover_img = imageCollection.join();
|
||||
|
||||
var goodsHighlights = [];
|
||||
$(".lightspot-item").each(function (index,item) {
|
||||
goodsHighlights.push($(item).find('input').val());
|
||||
});
|
||||
data.goods_highlights = goodsHighlights.toString();
|
||||
|
||||
if(data.sort < 0){
|
||||
layer.msg("排序号不能小于0");
|
||||
return false;
|
||||
}
|
||||
|
||||
if(repeat_flag) return;
|
||||
repeat_flag = true;
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
dataType: 'JSON',
|
||||
url: ns.url("notes://shop/notes/edit"),
|
||||
data: data,
|
||||
async: false,
|
||||
success: function(res){
|
||||
repeat_flag = false;
|
||||
|
||||
if (res.code == 0) {
|
||||
layer.confirm('编辑成功', {
|
||||
title:'操作提示',
|
||||
btn: ['返回列表', '继续编辑'],
|
||||
closeBtn: 0,
|
||||
yes: function(index, layero){
|
||||
if(data.status == 0){
|
||||
location.hash = ns.hash("notes://shop/notes/drafts");
|
||||
}else{
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
}
|
||||
layer.close(index);
|
||||
},
|
||||
btn2: function(index, layero) {
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
}else{
|
||||
layer.msg(res.message);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 表格渲
|
||||
function renderTable(goods_list = []) {
|
||||
//展示已知数据
|
||||
table = new Table({
|
||||
elem: '#selected_goods_list',
|
||||
cols: [
|
||||
[{
|
||||
field: 'goods_name',
|
||||
title: '商品名称',
|
||||
unresize: 'false',
|
||||
width: '50%'
|
||||
}, {
|
||||
field: 'price',
|
||||
title: '商品价格(元)',
|
||||
unresize: 'false',
|
||||
align: 'right',
|
||||
width: '20%',
|
||||
templet: function(data) {
|
||||
return '￥' + data.price;
|
||||
}
|
||||
}, {
|
||||
field: 'goods_stock',
|
||||
title: '库存',
|
||||
unresize: 'false',
|
||||
align: 'center',
|
||||
width: '20%'
|
||||
}, {
|
||||
title: '操作',
|
||||
toolbar: '#operation',
|
||||
unresize: 'false',
|
||||
align:'right'
|
||||
}],
|
||||
],
|
||||
data: goods_list
|
||||
});
|
||||
}
|
||||
|
||||
/* 添加商品 */
|
||||
function addGoods(){
|
||||
goodsSelect(function (data) {
|
||||
|
||||
goods_id = [];
|
||||
goods_list = [];
|
||||
|
||||
for (var key in data) {
|
||||
goods_id.push(data[key].goods_id);
|
||||
goods_list.push(data[key]);
|
||||
}
|
||||
|
||||
renderTable(goods_list);
|
||||
$("input[name='goods_ids']").val(goods_id.toString());
|
||||
selectedGoodsId = goods_id;
|
||||
|
||||
},selectedGoodsId, {mode: "spu"});
|
||||
}
|
||||
|
||||
// 删除选中商品
|
||||
function delGoods(id) {
|
||||
$.each(goods_list, function(index, item) {
|
||||
var goods_id = item.goods_id;
|
||||
|
||||
if (id == Number(goods_id)) {
|
||||
goods_list.splice(index, 1);
|
||||
renderTable(goods_list);
|
||||
}
|
||||
});
|
||||
|
||||
$.each(selectedGoodsId, function(index, item) {
|
||||
if (id == Number(item)) {
|
||||
selectedGoodsId.splice(index, 1);
|
||||
goods_id = selectedGoodsId;
|
||||
}
|
||||
});
|
||||
$("input[name='goods_ids']").val(goods_id.toString());
|
||||
}
|
||||
|
||||
function backNotesList() {
|
||||
location.hash = ns.hash("notes://shop/notes/lists");
|
||||
}
|
||||
|
||||
//检测数据类型
|
||||
function detectionNumType(el, type) {
|
||||
var value = $(el).val();
|
||||
//大于零 且 不是小数
|
||||
if (value < 0 && type == 'integral')
|
||||
$(el).val(0);
|
||||
else if (type == 'integral')
|
||||
$(el).val(Math.round(value));
|
||||
|
||||
//大于1 且 不是小数
|
||||
if (value < 1 && type == 'positiveInteger')
|
||||
$(el).val(1);
|
||||
else if (type == 'positiveInteger')
|
||||
$(el).val(Math.round(value));
|
||||
//大于零可以是小数
|
||||
if (type == 'positiveNumber') {
|
||||
value = parseFloat(value).toFixed(2);
|
||||
if (value < 0)
|
||||
$(el).val(0);
|
||||
else
|
||||
$(el).val(value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 采集公众号文章信息
|
||||
*/
|
||||
function pullArticle(self_obj){
|
||||
if($(self_obj).hasClass('pull-disabled-btn')){
|
||||
return;
|
||||
}
|
||||
var wechat_url = $('input[name=note_link]').val();
|
||||
if(wechat_url == ''){
|
||||
layer.msg('文章链接不可为空!', {icon: 5, anim: 6});
|
||||
return false;
|
||||
}
|
||||
$(self_obj).addClass('pull-disabled-btn');
|
||||
$(self_obj).prepend(`<i class="common-loading-layer layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>`);
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
dataType: 'JSON',
|
||||
url: ns.url("notes://shop/notes/pullArticle"),
|
||||
data: {wechat_url:$('input[name=note_link]').val()},
|
||||
// async: false,
|
||||
success: function(res){
|
||||
if (res.code >= 0) {
|
||||
fetchTitle(res.data.title);
|
||||
fetchArticle(res.data.content_html);
|
||||
initPullBtn();
|
||||
}else{
|
||||
layer.msg(res.message);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function initPullBtn(){
|
||||
$(".pull-btn").text('获取文章');
|
||||
$(".pull-btn").removeClass('pull-disabled-btn');
|
||||
}
|
||||
|
||||
//填充标题
|
||||
function fetchTitle(data){
|
||||
$('input[name=note_title]').val(data);
|
||||
$('#title_html').text(data);
|
||||
}
|
||||
function fetchArticle(data){
|
||||
$('input[name=note_content]').val(data);
|
||||
$("#content_html").html(data);
|
||||
}
|
||||
</script>
|
||||
427
addon/notes/shop/view/notes/lists.html
Executable file
427
addon/notes/shop/view/notes/lists.html
Executable file
@@ -0,0 +1,427 @@
|
||||
<style>
|
||||
.goods-type{display: flex;justify-content: space-between;}
|
||||
.goods-type .item-type{display: flex;flex-direction: column;align-items: center;padding: 15px;border: 1px solid #e5e5e5;border-radius: 5px;cursor: pointer;}
|
||||
.goods-type .item-type ~ .item-type{margin-left: 20px;}
|
||||
.goods-type .item-img{display: flex;justify-content: center;align-content: center;width: 200px;height: 270px;}
|
||||
.goods-type .item-img img{max-width: 100%;max-height: 100%;}
|
||||
.goods-type .item-content{margin-top: 15px;text-align: center;}
|
||||
.goods-type .item-content .description{margin-top: 10px;font-size: 12px;color: #999;line-height: 1.6;}
|
||||
.layui-layer-page .layui-layer-content{padding: 30px;}
|
||||
|
||||
.layui-table-header{overflow: inherit;}
|
||||
.layui-table-header .layui-table-cell{overflow: inherit;}
|
||||
.layui-form-item .layui-form-checkbox[lay-skin=primary] {margin-top: 0;}
|
||||
.layui-layout-admin .layui-form-item .layui-input-inline{background-color: #fff;}
|
||||
</style>
|
||||
|
||||
<div class="single-filter-box">
|
||||
<button class="layui-btn" onclick="add()">添加笔记</button>
|
||||
</div>
|
||||
<div class="screen layui-collapse" lay-filter="selection_panel">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">筛选</h2>
|
||||
<form class="layui-colla-content layui-form layui-show">
|
||||
<div class="layui-form-item">
|
||||
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">笔记名称：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="note_title" placeholder="请输入笔记名称" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">笔记类型：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="note_type" lay-filter="status">
|
||||
<option value="">全部</option>
|
||||
{foreach $note_type as $v}
|
||||
<option value="{$v['type']}">{$v['name']}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">笔记分组：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="group_id" lay-filter="status">
|
||||
<option value="">全部</option>
|
||||
{foreach $group_list as $v}
|
||||
<option value="{$v['group_id']}">{$v['group_name']}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">发布时间：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" name="start_time" id="start_time" autocomplete="off" placeholder="开始时间" readonly>
|
||||
<i class=" iconrili iconfont calendar"></i>
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" name="end_time" id="end_time" autocomplete="off" placeholder="结束时间" readonly>
|
||||
<i class=" iconrili iconfont calendar"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<button class="layui-btn" lay-submit lay-filter="search">筛选</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-tab table-tab" lay-filter="notes_tab">
|
||||
|
||||
<div class="layui-tab-content">
|
||||
<!-- 列表 -->
|
||||
<table id="notes_list" lay-filter="notes_list"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品 -->
|
||||
<script type="text/html" id="goods">
|
||||
|
||||
<!--<ul class="layui-tab-title">-->
|
||||
<!--<li class="layui-this" data-status="">全部</li>-->
|
||||
<!--<li data-status="1">正常</li>-->
|
||||
<!--<li data-status="2">关闭</li>-->
|
||||
<!--</ul>-->
|
||||
|
||||
<div class="table-title">
|
||||
<div class="title-pic">
|
||||
{{# if(d.goods_image){ }}
|
||||
<img layer-src src="{{ns.img(d.goods_image.split(',')[0],'small')}}"/>
|
||||
{{# } }}
|
||||
</div>
|
||||
<div class="title-content">
|
||||
<a href="javascript:;" class="multi-line-hiding text-color" title="{{d.goods_name}}">{{d.goods_name}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- 时间 -->
|
||||
<script id="time" type="text/html">
|
||||
<div class="layui-elip">开始：{{ns.time_to_date(d.start_time)}}</div>
|
||||
<div class="layui-elip">结束：{{ns.time_to_date(d.end_time)}}</div>
|
||||
</script>
|
||||
|
||||
<!-- 操作 -->
|
||||
<script type="text/html" id="operation">
|
||||
<div class="table-btn">
|
||||
<a class="layui-btn" lay-event="edit">编辑</a>
|
||||
<a class="layui-btn" lay-event="del">删除</a>
|
||||
{{# if(d.status == 0){ }}
|
||||
<a class="layui-btn text-color" lay-event="release">发布</a>
|
||||
{{# }else{ }}
|
||||
<a class="layui-btn" lay-event="unrelease">取消发布</a>
|
||||
{{# } }}
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- 添加笔记 -->
|
||||
<script type="text/html" id="addNote">
|
||||
<div class="goods-type">
|
||||
<div class="item-type" onclick="location.hash = ns.hash('notes://shop/notes/add', {'note_type': 'goods_item'})">
|
||||
<div class="item-img"><img src="SHOP_IMG/notes/item_introduction.png" alt=""></div>
|
||||
<div class="item-content">
|
||||
<p class="name">单品介绍</p>
|
||||
<p class="description">围绕单个商品的亮点、使用心得展开介绍。好的介绍将让粉丝购买的欲望大增</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-type" onclick="location.hash = ns.hash('notes://shop/notes/add', {'note_type': 'shop_said'})">
|
||||
<div class="item-img"><img src="SHOP_IMG/notes/shopkeeper_said.png" alt=""></div>
|
||||
<div class="item-content">
|
||||
<p class="name">掌柜说</p>
|
||||
<p class="description">创作自由度高，多种组件灵活编辑。优质的笔记更容易使消费者产生购买欲望</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="item-type" onclick="location.hash = ns.hash('notes://shop/notes/add', {'note_type': 'article'})">-->
|
||||
<!-- <div class="item-img"><img src="SHOP_IMG/notes/shopkeeper_said.png" alt=""></div>-->
|
||||
<!-- <div class="item-content">-->
|
||||
<!-- <p class="name">种草文章</p>-->
|
||||
<!-- <p class="description">商家将专题，爆款等活动展示在一起，提升消费者对活动的参与</p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="item-type" onclick="location.hash = ns.hash('notes://shop/notes/add', {'note_type': 'wechat_article'})">-->
|
||||
<!-- <div class="item-img"><img src="SHOP_IMG/notes/shopkeeper_said.png" alt=""></div>-->
|
||||
<!-- <div class="item-content">-->
|
||||
<!-- <p class="name">公众号文章</p>-->
|
||||
<!-- <p class="description">在小程序或者公众号内发布公众号文章，打通小程序、公众号、视频号等微信流量</p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="item-type" onclick="location.hash = ns.hash('notes://shop/notes/add', {'note_type': 'goods_video'})">-->
|
||||
<!-- <div class="item-img"><img src="SHOP_IMG/notes/shopkeeper_said.png" alt=""></div>-->
|
||||
<!-- <div class="item-content">-->
|
||||
<!-- <p class="name">短视频</p>-->
|
||||
<!-- <p class="description">快速布局短视频导购，提升店铺留存，促进商品成交转化</p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- 排序 -->
|
||||
<script type="text/html" id="editSort">
|
||||
<input name="sort" type="number" onchange="editSort({{d.note_id}},this)" value="{{d.sort}}" placeholder="请输入排序" class="layui-input edit-sort len-short">
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var laytpl,table,form,laydate,repeat_flag;
|
||||
layui.use(['form', 'element','laydate','laytpl'], function() {
|
||||
form = layui.form;
|
||||
laytpl = layui.laytpl;
|
||||
laydate = layui.laydate;
|
||||
repeat_flag = false; //防重复标识
|
||||
|
||||
form.render();
|
||||
|
||||
//渲染时间
|
||||
laydate.render({
|
||||
elem: '#start_time',
|
||||
type: 'datetime'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#end_time',
|
||||
type: 'datetime'
|
||||
});
|
||||
|
||||
table = new Table({
|
||||
elem: '#notes_list',
|
||||
url: ns.url("notes://shop/notes/lists"),
|
||||
where:{
|
||||
status:1
|
||||
},
|
||||
cols: [
|
||||
[{
|
||||
field:'note_title',
|
||||
title: '笔记标题',
|
||||
unresize: 'false',
|
||||
width: '15%'
|
||||
},{
|
||||
field: 'note_type_name',
|
||||
title: '笔记类型',
|
||||
unresize: 'false',
|
||||
width: '8%'
|
||||
}, {
|
||||
field: 'group_name',
|
||||
title: '所属分组',
|
||||
unresize: 'false',
|
||||
width: '10%'
|
||||
}, {
|
||||
field: 'read_num',
|
||||
title: '阅读次数',
|
||||
unresize: 'false',
|
||||
width: '8%'
|
||||
}, {
|
||||
field: 'dianzan_num',
|
||||
title: '点赞次数',
|
||||
unresize: 'false',
|
||||
width: '8%'
|
||||
}, {
|
||||
field: 'sort',
|
||||
title: '排序',
|
||||
unresize: 'false',
|
||||
align: 'left',
|
||||
sort : true,
|
||||
width: '10%',
|
||||
templet:'#editSort'
|
||||
}, {
|
||||
title: '创建时间',
|
||||
unresize: 'false',
|
||||
width: '13%',
|
||||
templet:function(data){
|
||||
return ns.time_to_date(data.create_time);
|
||||
}
|
||||
}, {
|
||||
title: '发布时间',
|
||||
unresize: 'false',
|
||||
width: '13%',
|
||||
templet:function(data){
|
||||
return ns.time_to_date(data.release_time);
|
||||
}
|
||||
}, {
|
||||
title: '操作',
|
||||
toolbar: '#operation',
|
||||
unresize: 'false',
|
||||
width: '15%',
|
||||
align: 'right',
|
||||
}]
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* 搜索功能
|
||||
*/
|
||||
form.on('submit(search)', function(data) {
|
||||
table.reload({
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
table.on("sort",function (obj) {
|
||||
table.reload({
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: {
|
||||
order:obj.field,
|
||||
sort:obj.type
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 监听工具栏操作
|
||||
*/
|
||||
table.tool(function(obj) {
|
||||
var data = obj.data;
|
||||
switch (obj.event) {
|
||||
case 'edit': //编辑
|
||||
location.hash = ns.hash("notes://shop/notes/edit", {"note_id": data.note_id,"note_type": data.note_type});
|
||||
break;
|
||||
case 'del': //删除
|
||||
deleteNotes(data.note_id);
|
||||
break;
|
||||
case 'release': //发布
|
||||
release(data.note_id);
|
||||
break;
|
||||
case 'unrelease': //取消发布
|
||||
unrelease(data.note_id);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
function deleteNotes(note_id) {
|
||||
layer.confirm('确定要删除该笔记吗?', function(index) {
|
||||
if (repeat_flag) return;
|
||||
repeat_flag = true;
|
||||
layer.close(index);
|
||||
|
||||
$.ajax({
|
||||
url: ns.url("notes://shop/notes/delete"),
|
||||
data: {
|
||||
note_id: note_id
|
||||
},
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
success: function(res) {
|
||||
layer.msg(res.message);
|
||||
repeat_flag = false;
|
||||
if (res.code == 0) {
|
||||
table.reload({
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}, function() {
|
||||
layer.close();
|
||||
repeat_flag = false;
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// 监听单元格编辑
|
||||
function editSort(id, event) {
|
||||
var data = $(event).val();
|
||||
if (!new RegExp("^-?[1-9]\\d*$").test(data)) {
|
||||
layer.msg("排序号只能是整数");
|
||||
return;
|
||||
}
|
||||
if(data<0){
|
||||
layer.msg("排序号必须大于0");
|
||||
return ;
|
||||
}
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: ns.url("notes://shop/notes/modifySort"),
|
||||
data: {
|
||||
sort: data,
|
||||
note_id: id
|
||||
},
|
||||
dataType: 'JSON',
|
||||
success: function(res) {
|
||||
layer.msg(res.message);
|
||||
if (res.code == 0) {
|
||||
table.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function add() {
|
||||
var html = $("#addNote").html();
|
||||
laytpl(html).render({}, function (html) {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '选择笔记类型',
|
||||
area: ['800px'],
|
||||
//area: ['1300px'],
|
||||
content: html
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$("body").off("mouseenter",".goods-type .item-type").on("mouseenter",".goods-type .item-type",function () {
|
||||
$(this).addClass("border-color");
|
||||
});
|
||||
$("body").off("mouseleave",".goods-type .item-type").on("mouseleave",".goods-type .item-type",function () {
|
||||
$(this).removeClass("border-color");
|
||||
});
|
||||
|
||||
function release(id){
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: ns.url("notes://shop/notes/releaseEvent"),
|
||||
data: {
|
||||
status: 1,
|
||||
note_id: id
|
||||
},
|
||||
dataType: 'JSON',
|
||||
success: function(res) {
|
||||
layer.msg(res.message);
|
||||
if (res.code == 0) {
|
||||
table.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function unrelease(id){
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: ns.url("notes://shop/notes/releaseEvent"),
|
||||
data: {
|
||||
status: 0,
|
||||
note_id: id
|
||||
},
|
||||
dataType: 'JSON',
|
||||
success: function(res) {
|
||||
layer.msg(res.message);
|
||||
if (res.code == 0) {
|
||||
table.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
274
addon/notes/shop/view/notes/notes_select.html
Executable file
274
addon/notes/shop/view/notes/notes_select.html
Executable file
@@ -0,0 +1,274 @@
|
||||
<style>
|
||||
.notes-list-layer {padding: 20px;}
|
||||
</style>
|
||||
|
||||
<div class="notes-list-layer">
|
||||
<div class="screen layui-collapse" lay-filter="selection_panel">
|
||||
<div class="layui-colla-item">
|
||||
<form class="layui-colla-content layui-form layui-show">
|
||||
<div class="layui-form-item">
|
||||
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">笔记名称：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="note_title" placeholder="请输入笔记名称" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">笔记类型：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="note_type" lay-filter="status">
|
||||
<option value="">全部</option>
|
||||
{foreach $note_type as $v}
|
||||
<option value="{$v['type']}">{$v['name']}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">笔记分组：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="group_id" lay-filter="status">
|
||||
<option value="">全部</option>
|
||||
{foreach $group_list as $v}
|
||||
<option value="{$v['group_id']}">{$v['group_name']}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">发布时间：</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" name="start_time" id="start_time" autocomplete="off" placeholder="开始时间" readonly>
|
||||
<i class=" iconrili iconfont calendar"></i>
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" name="end_time" id="end_time" autocomplete="off" placeholder="结束时间" readonly>
|
||||
<i class=" iconrili iconfont calendar"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<button class="layui-btn" lay-submit lay-filter="search">筛选</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table id="notes_list" lay-filter="notes_list"></table>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="checkbox">
|
||||
{{# if($.inArray(d.note_id.toString(), selected_id_arr) != -1){ }}
|
||||
<input type="checkbox" data-note-id="{{d.note_id}}" name="notes_checkbox" lay-skin="primary" lay-filter="notes_checkbox" checked>
|
||||
{{# }else{ }}
|
||||
<input type="checkbox" data-note-id="{{d.note_id}}" name="notes_checkbox" lay-skin="primary" lay-filter="notes_checkbox">
|
||||
{{# } }}
|
||||
<input type="hidden" data-note-id="{{d.note_id}}" name="notes_json" value='{{ JSON.stringify(d) }}' />
|
||||
</script>
|
||||
|
||||
<!-- 排序 -->
|
||||
<script type="text/html" id="editSort">
|
||||
<input name="sort" type="number" onchange="editSort({{d.note_id}},this)" value="{{d.sort}}" placeholder="请输入排序" class="layui-input edit-sort len-short">
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var laytpl, table, form, laydate,
|
||||
select_id = localStorage.getItem('note_select_id') || '', // "{$select_id}", //选中商品id
|
||||
max_num = "{$max_num}", //最大商品数量
|
||||
min_num = "{$min_num}", //最小商品数量
|
||||
selected_id_arr = select_id.length ? select_id.split(',') : [],
|
||||
select_list = [], //选中商品所有数据
|
||||
notesIdArr = selected_id_arr;
|
||||
layui.use(['form', 'element', 'laydate', 'laytpl'], function() {
|
||||
form = layui.form;
|
||||
laytpl = layui.laytpl;
|
||||
laydate = layui.laydate;
|
||||
|
||||
form.render();
|
||||
|
||||
//渲染时间
|
||||
laydate.render({
|
||||
elem: '#start_time',
|
||||
type: 'datetime'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#end_time',
|
||||
type: 'datetime'
|
||||
});
|
||||
|
||||
table = new Table({
|
||||
elem: '#notes_list',
|
||||
url: ns.url("notes://shop/notes/notesSelect"),
|
||||
where:{
|
||||
status:1
|
||||
},
|
||||
cols: [
|
||||
[{
|
||||
unresize: 'false',
|
||||
width: '8%',
|
||||
templet: '#checkbox'
|
||||
}, {
|
||||
field:'note_title',
|
||||
title: '笔记标题',
|
||||
unresize: 'false',
|
||||
width: '20%'
|
||||
}, {
|
||||
field: 'group_name',
|
||||
title: '所属分组',
|
||||
unresize: 'false',
|
||||
width: '15%'
|
||||
}, {
|
||||
field: 'read_num',
|
||||
title: '阅读次数',
|
||||
unresize: 'false',
|
||||
width: '10%'
|
||||
}, {
|
||||
field: 'dianzan_num',
|
||||
title: '点赞次数',
|
||||
unresize: 'false',
|
||||
width: '10%'
|
||||
}, {
|
||||
title: '排序',
|
||||
unresize: 'false',
|
||||
align: 'left',
|
||||
templet:'#editSort',
|
||||
width: '17%'
|
||||
}, {
|
||||
title: '发布时间',
|
||||
unresize: 'false',
|
||||
templet:function(data){
|
||||
return ns.time_to_date(data.create_time);
|
||||
},
|
||||
width: '20%'
|
||||
}]
|
||||
],
|
||||
callback: function(res) {
|
||||
// 更新复选框状态
|
||||
for (var i=0;i<notesIdArr.length;i++) {
|
||||
var selected_notes = $("input[name='notes_checkbox'][data-note-id='" + notesIdArr[i] + "']");
|
||||
if (selected_notes.length) {
|
||||
$("input[name='notes_checkbox'][data-note-id='" + notesIdArr[i] + "']").prop("checked", true);
|
||||
}
|
||||
}
|
||||
|
||||
initData();
|
||||
form.render();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 搜索功能
|
||||
*/
|
||||
form.on('submit(search)', function(data) {
|
||||
table.reload({
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
// 勾选商品
|
||||
form.on('checkbox(notes_checkbox)', function(data) {
|
||||
var note_id = $(data.elem).attr("data-note-id"),
|
||||
json = {};
|
||||
|
||||
var dataLen = $("input[name='notes_checkbox'][data-note-id="+ note_id +"]:checked").length;
|
||||
|
||||
if (dataLen){
|
||||
json = JSON.parse($("input[name='notes_json'][data-note-id="+ note_id +"]").val());
|
||||
delete json.LAY_INDEX;
|
||||
delete json.LAY_TABLE_INDEX;
|
||||
delete json.create_time;
|
||||
select_list.push(json);
|
||||
notesIdArr.push(note_id);
|
||||
} else {
|
||||
var temp = "";
|
||||
$.each(select_list, function(index, item) {
|
||||
if (note_id == item.note_id) {
|
||||
temp = index;
|
||||
}
|
||||
})
|
||||
select_list.splice(temp);
|
||||
notesIdArr.splice(temp);
|
||||
}
|
||||
});
|
||||
|
||||
//初始化数据
|
||||
function initData(){
|
||||
var dataLen = $("input[name='notes_checkbox'][data-note-id]:checked").length;
|
||||
|
||||
//父级
|
||||
for (var i = 0; i < dataLen; i++){
|
||||
var noteId = $("input[name='notes_checkbox'][data-note-id]:checked").eq(i).attr("data-note-id");
|
||||
var ident = false;
|
||||
for (var k = 0; k < select_list.length; k++){
|
||||
if(select_list[k].note_id == noteId){
|
||||
ident = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (ident) return;
|
||||
|
||||
json = JSON.parse($("input[name='notes_json'][data-note-id="+ noteId +"]").val());
|
||||
delete json.LAY_INDEX;
|
||||
delete json.LAY_TABLE_INDEX;
|
||||
delete json.create_time;
|
||||
select_list.push(json);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 监听单元格编辑
|
||||
function editSort(id, event) {
|
||||
var data = $(event).val();
|
||||
if (!new RegExp("^-?[1-9]\\d*$").test(data)) {
|
||||
layer.msg("排序号只能是整数");
|
||||
return;
|
||||
}
|
||||
if(data<0){
|
||||
layer.msg("排序号必须大于0");
|
||||
return ;
|
||||
}
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: ns.url("notes://shop/notes/modifySort"),
|
||||
data: {
|
||||
sort: data,
|
||||
note_id: id
|
||||
},
|
||||
dataType: 'JSON',
|
||||
success: function(res) {
|
||||
layer.msg(res.message);
|
||||
if (res.code == 0) {
|
||||
table.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function selectNotesListener(callback) {
|
||||
var res = select_list;
|
||||
var num = notesIdArr.length;
|
||||
res = notesIdArr;
|
||||
|
||||
if (min_num && min_num > 0 && num < min_num) {
|
||||
layer.msg("所选数量不能少于" + min_num + '条');
|
||||
return;
|
||||
}
|
||||
callback(res);
|
||||
}
|
||||
</script>
|
||||
BIN
addon/notes/shop/view/public/img/distribution.png
Executable file
BIN
addon/notes/shop/view/public/img/distribution.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
addon/notes/shop/view/public/img/distribution_new.png
Executable file
BIN
addon/notes/shop/view/public/img/distribution_new.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
addon/notes/shop/view/public/img/distribution_select.png
Executable file
BIN
addon/notes/shop/view/public/img/distribution_select.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Reference in New Issue
Block a user