初始上传
This commit is contained in:
521
addon/fenxiao/shop/view/poster_template/add.html
Executable file
521
addon/fenxiao/shop/view/poster_template/add.html
Executable file
@@ -0,0 +1,521 @@
|
||||
<style>
|
||||
.layui-layout-admin .layui-body .body-content {
|
||||
min-height: initial;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.layui-form-label.mid {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.layui-form-label.mid+.layui-input-block {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.new-mid {
|
||||
margin-left: -20px !important;
|
||||
}
|
||||
|
||||
.poster-form {
|
||||
display: flex;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.poster-left {
|
||||
width: 400px;
|
||||
height: 800px;
|
||||
background: #FFFFFF;
|
||||
padding: 10px 30px 10px 10px;
|
||||
}
|
||||
|
||||
.poster-left-header {
|
||||
font-size: 18px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 0 0 10px 0;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.layui-input-block {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.poster-headimg,
|
||||
.poster-name {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.poster-right {
|
||||
width: 360px;
|
||||
height: 640px;
|
||||
opacity: 0.9;
|
||||
margin: 20px 0 0 271px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.tips {
|
||||
width: 153px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #909399;
|
||||
padding-left: 100px;
|
||||
}
|
||||
|
||||
.album-img-select {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin: 0 0 5px 20px;
|
||||
}
|
||||
|
||||
.upload-img-block {
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.poster-tips {
|
||||
background: #fff;
|
||||
width: 280px;
|
||||
margin-left: 320px;
|
||||
padding: 20px 20px;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.set-tips {
|
||||
font-size: 16px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bolder;
|
||||
color: #303133;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 12px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #909399;
|
||||
line-height: 22px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.layui-nav-more1 {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-width: 1px;
|
||||
border-color: #333 #333 transparent transparent;
|
||||
border-style: solid;
|
||||
transform: rotate(135deg);
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.layui-nav-more2 {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-width: 1px;
|
||||
border-color: #333 #333 transparent transparent;
|
||||
border-style: solid;
|
||||
transform: rotate(135deg);
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.layui-new-more1 {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.layui-new-more2 {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.layui-colorpicker {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
width: 89.7%;
|
||||
background: #fff;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.form-row button{
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.layui-colorpicker-main-input .layui-btn {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.upload img {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.img_prev {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-form add-poster">
|
||||
<div class="poster-form">
|
||||
<div id="view" style="display: flex;"></div>
|
||||
<div class="poster-tips">
|
||||
<div class="set-tips">海报设置说明</div>
|
||||
<div class="content">
|
||||
1. 用户头像,用户昵称这两个元素需要空出<br>
|
||||
2. 裂变海报其他部分皆可自定义设计<br>
|
||||
3. 可自行拖拉设置相应元素的大小
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<button class="layui-btn" lay-submit lay-filter="save_poster">保存</button>
|
||||
<input type="hidden" name="template_id" value='{notempty name="$template_data"}{$template_data.template_id}{/notempty}'>
|
||||
<button class="layui-btn layui-btn-primary" onclick="backFenxiaoPosterTemplateList()">返回</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="poster_left">
|
||||
<div class="poster-left">
|
||||
<div class="poster-left-header">基础设置</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label mid"><span class="required">*</span>海报名称</label>
|
||||
<div class="layui-input-block mid">
|
||||
<input type="text" class="layui-input" lay-verify="required" placeholder="请输入海报名称" name="poster_name" value="{{d.poster_name || ''}}"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label mid"><span class="required">*</span>宣传语</label>
|
||||
<div class="layui-input-block mid">
|
||||
<input type="text" class="layui-input" lay-verify="required" placeholder="请输入宣传语" name="share_content" value="{{d.share_content || ''}}"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label short-label mid"><span class="required">*</span>上传海报</label>
|
||||
<div class="layui-input-block mid">
|
||||
<div class="upload-img-block icon">
|
||||
<div class="upload-img-box {{d.background ? 'hover' : ''}}" >
|
||||
<div class="upload-default" id="posterImg">
|
||||
{{# if (d.background) { }}
|
||||
<div id="preview_posterImg" class="preview_img">
|
||||
<img layer-src src='{{ ns.img(d.background) }}' class="img_prev" data-id="qr_img"/>
|
||||
<p style="width: 300px;"></p>
|
||||
</div>
|
||||
{{# } else { }}
|
||||
<div class="upload">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
{{# } }}
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div style="position: absolute; top: -10px; left: 110px;">
|
||||
<i title="图片预览" class="iconfont iconreview js-preview"></i>
|
||||
<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
|
||||
</div>
|
||||
<div class="replace_img js-replace">点击替换</div>
|
||||
</div>
|
||||
<input type="hidden" lay-verify="background" name="background" value='{{d.background}}' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips">建议图片尺寸：720*1280px</div>
|
||||
|
||||
<div class="layui-form-item poster-headimg">
|
||||
<div class="layui-form album-img-select">
|
||||
<input type="checkbox" name="switch" lay-filter="headimg" value="" lay-skin="primary" {{d.headimg_is_show == '1' ? 'checked' : ''}}>
|
||||
</div>
|
||||
<label class="layui-form-label mid" style="text-align: left;">用户头像</label>
|
||||
<div class="layui-input-block mid new-mid">
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" lay-filter="headimg" name="shop_status" value="circle" title="圆形" {{d.headimg_shape == 'circle' ? 'checked' : ''}}>
|
||||
<input type="radio" lay-filter="headimg" name="shop_status" value="square" title="方形" {{d.headimg_shape == 'square' ? 'checked' : ''}}>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item poster-name">
|
||||
<div class="layui-form album-img-select">
|
||||
<input type="checkbox" name="check[]" lay-filter="nickname" value="" lay-skin="primary" {{d.nickname_is_show == '1' ? 'checked' : ''}}>
|
||||
</div>
|
||||
<label class="layui-form-label mid" style="text-align: left;">用户昵称</label>
|
||||
<div class="layui-input-block mid new-mid">
|
||||
<div class="poster-name-box">
|
||||
<div class="layui-form poster-select len-short" lay-filter="poster-select">
|
||||
<select name="" lay-filter="nickname">
|
||||
{{# for (var font_index = 14; font_index <= 36; font_index++) { }}
|
||||
{{# if (font_index == d.nickname_font_size) { }}
|
||||
<option value="{{font_index}}" selected>{{font_index}}px</option>
|
||||
{{# } else { }}
|
||||
<option value="{{font_index}}">{{font_index}}px</option>
|
||||
{{# } }}
|
||||
{{# } }}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form poster_color_nickname">
|
||||
颜色：
|
||||
<div>
|
||||
<input type="hidden" name="color" id="friendfission-all-input">
|
||||
<div class="friendfission-all"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item poster-name">
|
||||
<div class="layui-form album-img-select">
|
||||
<input type="checkbox" name="check[]" lay-filter="share_content" value="" lay-skin="primary" {{d.share_content_is_show == '1' ? 'checked' : ''}}>
|
||||
</div>
|
||||
<label class="layui-form-label mid" style="text-align: left;">宣传语</label>
|
||||
<div class="layui-input-block mid new-mid">
|
||||
<div class="poster-name-box">
|
||||
<div class="layui-form poster-select len-short" lay-filter="poster-select">
|
||||
<select name="" lay-filter="share_content">
|
||||
{{# for (var font_index = 14; font_index <= 36; font_index++) { }}
|
||||
{{# if (font_index == d.share_content_font_size) { }}
|
||||
<option value="{{font_index}}" selected>{{font_index}}px</option>
|
||||
{{# } else { }}
|
||||
<option value="{{font_index}}">{{font_index}}px</option>
|
||||
{{# } }}
|
||||
{{# } }}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form poster_color_share_content">
|
||||
颜色：
|
||||
<div>
|
||||
<input type="hidden" name="color" id="friendfission-all-input">
|
||||
<div class="friendfission-all"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="poster-right design-sketch" style="position: relative;border: 1px solid #d6d6d6;
|
||||
{notempty name='$template_data.background'}background-image:url({:img($template_data.background)}); background-size: 100% 100%; background-repeat: no-repeat;{/notempty}
|
||||
{{# if (d.background) { }}background-image:url({{ ns.img(d.background) }});background-size: 100% 100%;background-repeat: no-repeat;{{# } }}
|
||||
">
|
||||
<div class="headimg {{d.headimg_is_show == '1' ? '' : 'layui-hide'}}" style="position:absolute;top: {{d.headimg_top}}px; left: {{d.headimg_left}}px; width: {{d.headimg_width}}px; height: {{d.headimg_height}}px;">
|
||||
<img alt="" class="{{d.headimg_shape == 'circle' ? 'circle' : ''}}" src="__STATIC__/img/caner1.png" width="100%" />
|
||||
</div>
|
||||
|
||||
<div class="nickname {{d.nickname_is_show == '1' ? '' : 'layui-hide'}}" style="position:absolute;top: {{d.nickname_top}}px; left: {{d.nickname_left}}px; width: {{d.nickname_width}}px; color: {{d.nickname_color}}; font-size: {{d.nickname_font_size}}px;">
|
||||
<span class="design-text">用户昵称</span>
|
||||
</div>
|
||||
|
||||
<div style="margin: 10px;">
|
||||
<div class="share_content {{d.share_content_is_show == '1' ? '' : 'layui-hide'}}" style="position:absolute;top: {{d.share_content_top}}px; color: {{d.share_content_color}}; left: {{d.share_content_left}}px; width: {{d.share_content_width}}px; height: {{d.share_content_height}}px; font-size: {{d.share_content_font_size}}px;">
|
||||
<span class="design-text">{{d.share_content}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="qrcode" style="top: {{d.qrcode_top}}px; left: {{d.qrcode_left}}px; height: {{d.qrcode_height}}px; width: {{d.qrcode_width}}px;">
|
||||
<img alt="" src="__STATIC__/img/caner_erweima.png" width="100%" />
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script src="STATIC_JS/tdrag.js"></script>
|
||||
<script>
|
||||
var form, laytpl, laypage, laydate, colorpicker, repeat_flag = false;
|
||||
var poster_detail = JSON.parse('{:json_encode($template_info)}');
|
||||
|
||||
layui.use(['form', 'laytpl', 'colorpicker'], function() {
|
||||
var form = layui.form,
|
||||
laytpl = layui.laytpl,
|
||||
colorpicker = layui.colorpicker,
|
||||
repeat_flag = false; //防重复标识
|
||||
form.render();
|
||||
|
||||
laytpl($("#poster_left").html()).render(poster_detail, function(html) {
|
||||
$('#view').html(html);
|
||||
form.render();
|
||||
new Upload({
|
||||
elem: '#posterImg',
|
||||
data: {
|
||||
},
|
||||
callback: function(res) {
|
||||
if (res.code >= 0) {
|
||||
$('.poster-right').css({
|
||||
"background-image": `url('${ns.img(res.data.pic_path)}')`,
|
||||
"background-size": "100% 100%",
|
||||
"background-repeat": "no-repeat"
|
||||
});
|
||||
poster_detail.background = res.data.pic_path;
|
||||
$("input[name='background']").val(res.data.pic_path)
|
||||
}
|
||||
},
|
||||
deleteCallback: function() {
|
||||
poster_detail.background = '';
|
||||
$("input[name='background']").val('')
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//是否显示的控制
|
||||
var checkbox_field_arr = ['headimg', 'nickname', 'share_content'];
|
||||
checkbox_field_arr.forEach(function(field_name, index){
|
||||
form.on('checkbox('+ field_name +')', function(data) {
|
||||
poster_detail[field_name + '_is_show'] = data.elem.checked ? '1' : '0';
|
||||
if (data.elem.checked) {
|
||||
$("."+ field_name).removeClass("layui-hide");
|
||||
} else {
|
||||
$("."+ field_name).addClass("layui-hide");
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
//字体大小控制
|
||||
var font_field_arr = ['nickname', 'share_content'];
|
||||
font_field_arr.forEach(function(field_name, index){
|
||||
form.on('select('+ field_name +')', function(data) {
|
||||
poster_detail[field_name + '_font_size'] = data.value;
|
||||
$("."+ field_name).css("font-size", data.value + "px")
|
||||
});
|
||||
});
|
||||
|
||||
//字体颜色控制
|
||||
var color_field_arr = ['nickname', 'share_content'];
|
||||
color_field_arr.forEach(function(field_name, index){
|
||||
colorpicker.render({
|
||||
elem: '.poster_color_' + field_name, //绑定元素
|
||||
color: poster_detail[field_name + '_color'],
|
||||
done: function(color) {
|
||||
$("."+ field_name).css("color", color);
|
||||
poster_detail[field_name + '_color'] = color;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//圆角控制
|
||||
var shape_field_arr = ['headimg'];
|
||||
shape_field_arr.forEach(function(field_name, index){
|
||||
form.on('radio('+ field_name +')', function(data) {
|
||||
var shape = data.value;
|
||||
poster_detail[field_name + '_shape'] = shape;
|
||||
if(shape == 'circle'){
|
||||
$("."+ field_name +" img").addClass('circle');
|
||||
}else{
|
||||
$("."+ field_name +" img").removeClass('circle');
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
//拖拽控制
|
||||
var drag_field_arr = ['headimg', 'nickname', 'qrcode', 'share_content'];
|
||||
drag_field_arr.forEach((field_name, index) => {
|
||||
$(`.${field_name}`).Tdrag({
|
||||
scope: '.design-sketch',
|
||||
cbChange: function(obj, self) {
|
||||
poster_detail[field_name + '_top'] = parseFloat($(self.$element).css('top'));
|
||||
poster_detail[field_name + '_left'] =parseFloat($(self.$element).css('left'));
|
||||
poster_detail[field_name + '_width'] = parseFloat($(self.$element).css('width'));
|
||||
poster_detail[field_name + '_height'] = parseFloat($(self.$element).css('height'));
|
||||
},
|
||||
cbEnd: function (obj, self) {
|
||||
poster_detail[field_name + '_top'] = parseFloat($(self.$element).css('top'));
|
||||
poster_detail[field_name + '_left'] =parseFloat($(self.$element).css('left'));
|
||||
poster_detail[field_name + '_width'] = parseFloat($(self.$element).css('width'));
|
||||
poster_detail[field_name + '_height'] = parseFloat($(self.$element).css('height'));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
form.verify({
|
||||
background: function(value){
|
||||
if(!value){
|
||||
return '请上传海报背景';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 监听提交
|
||||
*/
|
||||
form.on('submit(save_poster)', function(data) {
|
||||
poster_detail.poster_name = data.field.poster_name;
|
||||
poster_detail.share_content = data.field.share_content;
|
||||
|
||||
if (repeat_flag) return false;
|
||||
repeat_flag = true;
|
||||
$.ajax({
|
||||
url: ns.url("fenxiao://shop/postertemplate/"+ (poster_detail['template_id'] ? 'edit' : 'add') +"postertemplate"),
|
||||
data:poster_detail,
|
||||
dataType: 'JSON', //服务器返回json格式数据
|
||||
type: 'POST', //HTTP请求类型
|
||||
success: function(res) {
|
||||
repeat_flag = false;
|
||||
if(res.code == 0){
|
||||
layer.confirm(poster_detail['template_id'] ? '编辑成功' : '添加成功',{
|
||||
title: '操作提示',
|
||||
btn: ['返回列表',poster_detail['template_id'] ? '继续编辑' : '继续添加'],
|
||||
closeBtn: 0,
|
||||
yes: function(index, layero) {
|
||||
location.hash = ns.hash("fenxiao://shop/postertemplate/lists");
|
||||
layer.close(index);
|
||||
},
|
||||
btn2: function(index, layero) {
|
||||
listenerHash(); // 刷新页面
|
||||
layer.close(index);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
layer.msg(res.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function backFenxiaoPosterTemplateList() {
|
||||
location.hash = ns.hash("fenxiao://shop/postertemplate/lists");
|
||||
localStorage.removeItem("poster_data");
|
||||
}
|
||||
|
||||
$('body').off('click', '.layui-nav-more1').on('click', '.layui-nav-more1', function() {
|
||||
$(this).addClass('layui-new-more1');
|
||||
$('.layer-form').css("display", 'none');
|
||||
});
|
||||
|
||||
$('body').off('click', '.layui-new-more1').on('click', '.layui-new-more1', function() {
|
||||
$(this).removeClass('layui-new-more1');
|
||||
$('.layer-form').css("display", 'block');
|
||||
});
|
||||
|
||||
$('body').off('click', '.layui-nav-more2').on('click', '.layui-nav-more2', function() {
|
||||
$(this).addClass('layui-new-more2');
|
||||
$('.layer-form2').css("display", 'none');
|
||||
});
|
||||
|
||||
$('body').off('click', '.layui-new-more2').on('click', '.layui-new-more2', function() {
|
||||
$(this).removeClass('layui-new-more2');
|
||||
$('.layer-form2').css("display", 'block');
|
||||
});
|
||||
|
||||
$('body').off('click', '.js-delete').on('click', '.js-delete', function() {
|
||||
$('.poster-right').css("background-image", 'none');
|
||||
});
|
||||
</script>
|
||||
316
addon/fenxiao/shop/view/poster_template/lists.html
Executable file
316
addon/fenxiao/shop/view/poster_template/lists.html
Executable file
@@ -0,0 +1,316 @@
|
||||
<style type="text/css">
|
||||
.iconadd_light{font-size: 40px;}
|
||||
.good-poster{width: 240px;height: 413px;margin:0 0 10px 30px;text-align: center;position: relative;cursor: pointer;}
|
||||
</style>
|
||||
|
||||
<div class="single-filter-box">
|
||||
<button class="layui-btn add-button" onclick="add()">添加海报</button>
|
||||
</div>
|
||||
|
||||
<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="search_text" placeholder="请输入海报名称" class="layui-input" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<button type="button" class="layui-btn" lay-filter="search" lay-submit>筛选</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-tab table-tab" lay-filter="manjian_tab">
|
||||
<div class="layui-tab-content">
|
||||
<!-- 列表 -->
|
||||
<table id="poster_list" lay-filter="poster_list"></table>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/html" id="qr_img">
|
||||
<div class='table-title'>
|
||||
<div class='title-pic'>
|
||||
<img layer-src src="{{ns.img()}}" onerror="this.src = '{:img('public/static/img/default_img/head.png')}' ">
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="poster_status">
|
||||
<div class='table-title'>
|
||||
{{# if(d.template_status == 0){ }}
|
||||
<div class='title-pic' style="text-align:left">未启用</div>
|
||||
{{# }else{ }}
|
||||
<div class='title-pic text-color' style="text-align:left">启用</div>
|
||||
{{# } }}
|
||||
</div>
|
||||
</script>
|
||||
<!-- 操作 -->
|
||||
<script type="text/html" id="operation">
|
||||
<div class="table-btn">
|
||||
<a class="layui-btn" lay-event="detail">预览</a>
|
||||
<a class="layui-btn" lay-event="edit">编辑</a>
|
||||
{{# if(d.template_status==0){ }}
|
||||
<a class="layui-btn" lay-event="start">启用</a>
|
||||
<a class="layui-btn" lay-event="delete">删除</a>
|
||||
{{# }else{ }}
|
||||
<a class="layui-btn" lay-event="close">关闭</a>
|
||||
{{# } }}
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="add">
|
||||
<div style="display: flex;">
|
||||
<div>
|
||||
<div class="border-color text-color" style="width: 240px; height: 413px; border: 1px dashed;text-align: center; line-height: 413px; cursor: pointer; display: inline-block;" onclick="toAdd()">
|
||||
<i class="iconfont iconadd_light"></i>
|
||||
</div>
|
||||
<div style="text-align: center; margin-top: 10px;">自定义海报</div>
|
||||
</div>
|
||||
<div style="display: inline-block; position: relative;">
|
||||
<div style="display: flex;">
|
||||
{{# d.forEach(function(item, index){ }}
|
||||
<li class="good-poster" onclick="toAdd({{ item.muban_id }})">
|
||||
<span class="iconfont" ></span>
|
||||
<img data-id="1" style="width: 100%;" src="{{ item.image }}">
|
||||
<span style="color: #000000; font-size: 14px;">{{ item.name }}</span>
|
||||
<div class="js-zhezhao" ></div>
|
||||
</li>
|
||||
{{# }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- 详情弹框html -->
|
||||
<script type="text/html" id="detail">
|
||||
<img layer-src src="{{ns.img(d)}}" style="width: 360px; height: 640px;" />
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var laytpl,template_id,table,form,repeat_flag = false;
|
||||
layui.use(['form', 'element', 'laytpl'], function() {
|
||||
form = layui.form;
|
||||
element = layui.element;
|
||||
laytpl = layui.laytpl;
|
||||
form.render();
|
||||
|
||||
table = new Table({
|
||||
elem: '#poster_list',
|
||||
url: ns.url("fenxiao://shop/postertemplate/lists"),
|
||||
cols: [
|
||||
[ {
|
||||
field: 'poster_name',
|
||||
title: '海报名称',
|
||||
unresize: 'false',
|
||||
width: '15%',
|
||||
}, {
|
||||
field: 'template_status',
|
||||
title: '海报状态',
|
||||
unresize: 'false',
|
||||
width: '60%',
|
||||
templet: '#poster_status'
|
||||
}, {
|
||||
title: '操作',
|
||||
toolbar: '#operation',
|
||||
unresize: 'false',
|
||||
align:'right'
|
||||
}]
|
||||
]
|
||||
});
|
||||
|
||||
/**
|
||||
* 监听工具栏操作
|
||||
*/
|
||||
table.tool(function(obj) {
|
||||
var data = obj.data;
|
||||
switch (obj.event) {
|
||||
case 'detail': //预览
|
||||
detailPoster(data.template_id);
|
||||
break;
|
||||
case 'edit': //编辑
|
||||
location.hash = ns.hash("fenxiao://shop/postertemplate/editpostertemplate", {
|
||||
"template_id": data.template_id
|
||||
});
|
||||
break;
|
||||
case 'delete': //删除
|
||||
deletePoster(data.template_id, data.template_status);
|
||||
break;
|
||||
case 'close': //关闭
|
||||
close(data.template_id);
|
||||
break;
|
||||
case 'start': //启用
|
||||
start(data.template_id);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
function deletePoster(template_ids, template_status) {
|
||||
if (template_status == 1) {
|
||||
return layer.msg('请先关闭海报后再删除');
|
||||
}
|
||||
|
||||
layer.confirm('确定要删除该海报吗?', function(index) {
|
||||
if (repeat_flag) return false;
|
||||
repeat_flag = true;
|
||||
layer.close(index);
|
||||
$.ajax({
|
||||
url: ns.url("fenxiao://shop/postertemplate/delpostertemplate"),
|
||||
data: {
|
||||
template_ids: template_ids
|
||||
},
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
success: function(res) {
|
||||
repeat_flag = false;
|
||||
layer.msg(res.message);
|
||||
if (res.code == 0) {
|
||||
table.reload({
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}, function() {
|
||||
layer.close();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭
|
||||
*/
|
||||
function close(template_id) {
|
||||
layer.confirm('确定关闭吗?', function(index) {
|
||||
if (repeat_flag) return false;
|
||||
repeat_flag = true;
|
||||
layer.close(index);
|
||||
$.ajax({
|
||||
url: ns.url("fenxiao://shop/postertemplate/editstatus"),
|
||||
data: {
|
||||
template_id: template_id,
|
||||
template_status: 0
|
||||
},
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
success: function(res) {
|
||||
repeat_flag = false;
|
||||
layer.msg(res.message);
|
||||
if (res.code == 0) {
|
||||
table.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 预览
|
||||
*/
|
||||
function detailPoster(template_id) {
|
||||
if (repeat_flag) return false;
|
||||
repeat_flag = true;
|
||||
$.ajax({
|
||||
url: ns.url("fenxiao://shop/postertemplate/postertemplatedetail"),
|
||||
data: {
|
||||
template_id: template_id,
|
||||
},
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
success: function(res) {
|
||||
repeat_flag = false;
|
||||
if (res.code >= 0) {
|
||||
laytpl($("#detail").html()).render(res.data, function(html) {
|
||||
layer.open({
|
||||
type: 1,
|
||||
shadeClose: true,
|
||||
shade: 0.3,
|
||||
offset: 'auto',
|
||||
fixed: false,
|
||||
title: "预览",
|
||||
area: ['400px', '760px'],
|
||||
btn: ['关闭'],
|
||||
content: html,
|
||||
skin: 'detail'
|
||||
});
|
||||
})
|
||||
}else{
|
||||
layer.msg(res.message || '操作错误');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 开启
|
||||
*/
|
||||
function start(template_id) {
|
||||
layer.confirm('确定启用吗?', function(index) {
|
||||
if (repeat_flag) return false;
|
||||
repeat_flag = true;
|
||||
layer.close(index);
|
||||
$.ajax({
|
||||
url: ns.url("fenxiao://shop/postertemplate/editstatus"),
|
||||
data: {
|
||||
template_id: template_id,
|
||||
template_status: 1
|
||||
},
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
success: function(res) {
|
||||
repeat_flag = false;
|
||||
layer.msg(res.message);
|
||||
if (res.code == 0) {
|
||||
table.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索功能
|
||||
*/
|
||||
form.on('submit(search)', function(data) {
|
||||
table.reload({
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function add() {
|
||||
var mubanList = [
|
||||
{muban_id: 4, name:'分销海报1', image:"__ROOT__/addon/fenxiao/shop/view/public/img/poster1.jpg"},
|
||||
];
|
||||
laytpl($("#add").html()).render(mubanList, function(html) {
|
||||
layer.open({
|
||||
type: 1,
|
||||
shadeClose: true,
|
||||
shade: 0.3,
|
||||
offset: 'auto',
|
||||
fixed: false,
|
||||
title: "添加海报",
|
||||
area: ['560px', '560px'],
|
||||
btnAlign: 'c',
|
||||
content: html,
|
||||
skin: 'add',
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function toAdd(muban_id) {
|
||||
location.hash = ns.hash("fenxiao://shop/postertemplate/addpostertemplate", {muban_id:muban_id});
|
||||
}
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user