<script type="text/html" template lay-done="layui.data.sendParams(d);">
|
<div class="layui-form coreshop-form layui-form-pane" lay-filter="LAY-app-CoreCmsAdvertisement-editForm" id="LAY-app-CoreCmsAdvertisement-editForm">
|
<input type="hidden" name="id" id="id" value="{{d.params.data.model.id || '' }}" />
|
|
<div class="layui-form-item">
|
<label for="positionId" class="layui-form-label">广告位置</label>
|
<div class="layui-input-inline">
|
<select name="positionId" id="positionId" required lay-verify="required" lay-reqText="请输入位置序列" placeholder="请输入位置序列">
|
<option value="">请选择</option>
|
{{# layui.each(d.params.data.advertPosition, function(index, item){ }}
|
<option value="{{ item.id }}" {{d.params.data.model.positionId==item.id?'selected="selected"':''}}>{{ item.name }}</option>
|
{{# }); }}
|
</select>
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label for="name" class="layui-form-label">广告名称</label>
|
<div class="layui-input-inline">
|
<input name="name" id="name" lay-verify="required|verifyname" class="layui-input" placeholder="请输入广告名称" lay-reqText="请输入广告名称" value="{{d.params.data.model.name || '' }}" />
|
</div>
|
<div class="layui-form-mid layui-word-aux">请输入不超过50个字符内容</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label for="imageUrl" class="layui-form-label">广告图片</label>
|
<div class="layui-input-inline layui-inline-8">
|
<input name="imageUrl" id="imageUrl" lay-verify="required" class="layui-input" value="{{d.params.data.model.imageUrl || '' }}" placeholder="请上传广告图片id" lay-reqText="请上传广告图片id" />
|
</div>
|
<div class="layui-input-inline">
|
<div class="layui-upload">
|
<button type="button" class="layui-btn" lay-active="doCropperImg">裁剪上传</button>
|
<button type="button" class="layui-btn" id="upBtnOriginal">原图上传</button>
|
<div class="layui-upload-list">
|
<img class="layui-upload-img" id="viewImgBoximageUrl" src="{{d.params.data.model.imageUrl || layui.setter.noImagePicUrl }}">
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label for="type" class="layui-form-label">类型</label>
|
<div class="layui-input-inline">
|
<select name="type" id="type" required lay-filter="type" lay-verify="required" lay-reqText="请输入类型" placeholder="请输入类型">
|
<option value="">请选择</option>
|
{{# layui.each(d.params.data.types, function(index, item){ }}
|
<option value="{{ item.value }}" {{item.value==d.params.data.model.type?'selected="selected"':''}}>{{ item.description }}</option>
|
{{# }); }}
|
</select>
|
</div>
|
<div class="layui-form-mid layui-word-aux">请输入数字</div>
|
</div>
|
|
<div id="div1" style="display: none">
|
<div class="layui-form-item">
|
<label class="layui-form-label"><i class="required-color">*</i>广告链接URL：</label>
|
<div class="layui-input-block">
|
<input type="text" id="url" name="url" value="{{d.params.data.model.type==1 ? d.params.data.model.val:'' }}" required placeholder="请输入合法的URL链接,必须以http://开头" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
</div>
|
|
<div id="div2" style="display: none">
|
<input type="hidden" name="goodsId" id="goodsId" value="{{d.params.data.model.type==2 ? d.params.data.model.val:'' }}">
|
<div class="layui-form-item">
|
<label class="layui-form-label"><i class="required-color">*</i>广告商品：</label>
|
<div class="layui-input-block">
|
<input type="text" id="goods" name="goods" value="{{d.params.data.model.type==2 ? d.params.data.model.valDes:'' }}" readonly="readonly" required placeholder="请选择广告商品" autocomplete="off" class="layui-input" lay-active="getGoodsList">
|
</div>
|
</div>
|
</div>
|
|
<div id="div3" style="display: none">
|
<input type="hidden" name="articleId" id="articleId" value="{{d.params.data.model.type==3 ? d.params.data.model.val:'' }}">
|
<div class="layui-form-item">
|
<label class="layui-form-label"><i class="required-color">*</i>广告文章：</label>
|
<div class="layui-input-block">
|
<input type="text" id="article" name="article" value="{{d.params.data.model.type==3 ? d.params.data.model.valDes:'' }}" readonly="readonly" required placeholder="请选择广告文章" autocomplete="off" class="layui-input" lay-active="getArticleList">
|
</div>
|
</div>
|
</div>
|
|
<div id="div4" style="display: none">
|
<input type="hidden" name="articleTypeId" id="articleTypeId" value="{{d.params.data.model.type==4 ? d.params.data.model.val:'' }}">
|
<div class="layui-form-item">
|
<label class="layui-form-label"><i class="required-color">*</i>文章分类：</label>
|
<div class="layui-input-block">
|
<input type="text" id="articleType" name="articleType" value="{{d.params.data.model.type==4 ? d.params.data.model.valDes:'' }}" readonly="readonly" required placeholder="请选择文章分类" autocomplete="off" class="layui-input" lay-active="getArticleTypeList">
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label for="sort" class="layui-form-label">排序</label>
|
<div class="layui-input-inline">
|
<input type="number" min="0" max="999999" name="sort" id="sort" lay-verify="required|number" class="layui-input" value="{{d.params.data.model.sort || '' }}" placeholder="请输入排序" lay-reqText="请输入排序并为数字" />
|
</div>
|
<div class="layui-form-mid layui-word-aux">请输入数字</div>
|
</div>
|
|
<div class="layui-form-item core-hidden">
|
<input type="button" class="layui-btn" lay-submit lay-filter="LAY-app-CoreCmsAdvertisement-editForm-submit" id="LAY-app-CoreCmsAdvertisement-editForm-submit" value="确认编辑">
|
</div>
|
</div>
|
</script>
|
<script>
|
var debug = layui.setter.debug;
|
layui.data.sendParams = function (d) {
|
//开启调试情况下获取接口赋值数据
|
if (debug) { console.log(d.params.data); }
|
layui.use(['admin', 'form', 'laydate', 'upload', 'coreHelper', 'table', 'util', 'treeTable', 'cropperImg'],
|
function () {
|
var $ = layui.$
|
, form = layui.form
|
, admin = layui.admin
|
, laydate = layui.laydate
|
, upload = layui.upload
|
, table = layui.table
|
, cropperImg = layui.cropperImg
|
, view = layui.view
|
, coreHelper = layui.coreHelper
|
, treeTable = layui.treeTable
|
, util = layui.util;
|
|
var type = $('select[name=type] option:selected').val();
|
|
if (type === '1') {
|
$("#div1").show();
|
} else if (type === '2') {
|
$("#div2").show();
|
} else if (type === '3') {
|
$("#div3").show();
|
} else {
|
$("#div4").show()
|
}
|
|
form.on('select(type)', function (data) {
|
if (data.value === '1') {
|
$("#div1").show();
|
$("#div2").hide();
|
$("#div3").hide();
|
$("#div4").hide();
|
}
|
if (data.value === '2') {
|
$("#div1").hide();
|
$("#div2").show();
|
$("#div3").hide();
|
$("#div4").hide();
|
}
|
if (data.value === '3') {
|
$("#div1").hide();
|
$("#div2").hide();
|
$("#div3").show();
|
$("#div4").hide();
|
}
|
if (data.value === '4') {
|
$("#div1").hide()
|
$("#div2").hide()
|
$("#div3").hide()
|
$("#div4").show()
|
}
|
});
|
|
//处理属性 为 lay-active 的所有元素事件
|
util.event('lay-active', {
|
getGoodsList: function () {
|
admin.popup({
|
shadeClose: false,
|
title: '选择商品',
|
area: ['1200px', '90%'],
|
id: 'LAY-popup-CoreCmsAdvertisement-GetGoodsList',
|
success: function (layero, index) {
|
view(this.id).render('content/advert/advertisement/getGoods', null).done(function () {
|
form.render();
|
//监听商品列表页工具条
|
table.on('tool(LAY-app-CoreCmsGoods-tableBox)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
|
var data = obj.data; //获得当前行数据
|
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
|
var tr = obj.tr; //获得当前行 tr 的DOM对象
|
if (layEvent === 'selectGoods') { //选择
|
console.log(layEvent);
|
$("#goods").val(data.name);
|
$("#goodsId").val(data.id);
|
$("#articleId").val('');
|
$("#article").val('');
|
$("#url").val('');
|
$("#articleTypeId").val('');
|
$("#articleType").val('');
|
layer.close(index); //再执行关闭
|
}
|
});
|
});
|
}
|
});
|
}
|
, getArticleList: function () {
|
admin.popup({
|
shadeClose: false,
|
title: '选择文章',
|
area: ['1200px', '90%'],
|
id: 'LAY-popup-CoreCmsAdvertisement-GetArticleList',
|
success: function (layero, index) {
|
view(this.id).render('content/advert/advertisement/getArticle', null).done(function () {
|
form.render();
|
//监听文章列表页工具条
|
table.on('tool(LAY-app-CoreCmsArticle-tableBox)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
|
var data = obj.data; //获得当前行数据
|
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
|
var tr = obj.tr; //获得当前行 tr 的DOM对象
|
if (layEvent === 'selectArticle') { //选择
|
$("#article").val(data.title);
|
$("#articleId").val(data.id);
|
$("#goods").val('');
|
$("#goodsId").val('');
|
$("#url").val('');
|
$("#articleTypeId").val('');
|
$("#articleType").val('');
|
layer.close(index); //再执行关闭
|
}
|
});
|
});
|
}
|
});
|
}
|
, getArticleTypeList: function () {
|
admin.popup({
|
shadeClose: false,
|
title: '选择文章分类',
|
area: ['1200px', '90%'],
|
id: 'LAY-popup-CoreCmsAdvertisement-GetArticleTypeList',
|
success: function (layero, index) {
|
view(this.id).render('content/advert/advertisement/getArticleType', null).done(function () {
|
form.render();
|
// 监听文章分类列表页工具条
|
treeTable.on('tool(LAY-app-CoreCmsArticleType-tableBox)', function (obj) {
|
var data = obj.data;
|
var layEvent = obj.event;
|
var tr = obj.tr;
|
if (layEvent === 'selectType') { //选择
|
console.log(layEvent);
|
$("#articleTypeId").val(data.id);
|
$("#articleType").val(data.name);
|
$("#goods").val('');
|
$("#goodsId").val('');
|
$("#articleId").val('');
|
$("#article").val('');
|
$("#url").val('');
|
layer.close(index); //再执行关闭
|
}
|
})
|
});
|
}
|
});
|
}
|
, doCropperImg: function () {
|
cropperImg.cropImg({
|
imgSrc: $('#viewImgBoximageUrl').attr('src'),
|
onCrop: function (data) {
|
var loadIndex = layer.load(2);
|
coreHelper.Post("api/Tools/UploadFilesFByBase64", { base64: data }, function (res) {
|
if (0 === res.code) {
|
$('#viewImgBoximageUrl').attr('src', res.data.fileUrl);
|
$("#imageUrl").val(res.data.fileUrl);
|
layer.msg(res.msg);
|
layer.close(loadIndex);
|
} else {
|
layer.close(loadIndex);
|
layer.msg(res.msg, { icon: 2, anim: 6 });
|
}
|
});
|
}
|
});
|
}
|
});
|
|
//原图上传
|
upload.render({
|
elem: '#upBtnOriginal'
|
, url: layui.setter.apiUrl + 'Api/Tools/UploadFiles'
|
, done: function (res) {
|
if (res.code > 0) { return layer.msg('上传失败'); }
|
layer.msg('上传成功');
|
$('#viewImgBoximageUrl').attr('src', res.data.fileUrl);
|
$("#imageUrl").val(res.data.fileUrl);
|
}
|
, error: function () {
|
var viewTextBox = $('#viewTextBox');
|
viewTextBox.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
viewTextBox.find('.demo-reload').on('click', function () {
|
uploadInst.upload();
|
});
|
}
|
});
|
|
|
form.verify({
|
|
verifyname: [/^[\S]{0,50}$/, '广告名称最大只允许输入50位字符，且不能出现空格'],
|
verifyimageUrl: [/^[\S]{0,255}$/, '广告图片id最大只允许输入255位字符，且不能出现空格'],
|
verifyval: [/^[\S]{0,255}$/, '链接属性值最大只允许输入255位字符，且不能出现空格'],
|
verifycode: [/^[\S]{0,32}$/, '广告位置编码最大只允许输入32位字符，且不能出现空格'],
|
});
|
//重载form
|
form.render(null, 'LAY-app-CoreCmsAdvertisement-editForm');
|
})
|
};
|
</script>
|
