<style>
|
.layui-form-pane .layui-form-label { width: 110px; padding: 8px 15px; height: 38px; line-height: 20px; border-width: 0px; border-style: solid; border-radius: 2px 0 0 2px; text-align: center; background-color: #fff; overflow: hidden; box-sizing: border-box; }
|
</style>
|
<script type="text/html" template lay-done="layui.data.done(d);">
|
<div class="layui-form coreshop-form layui-form-pane" lay-filter="LAY-app-CoreCmsLabel-createForm" id="LAY-app-CoreCmsLabel-createForm">
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
|
<legend>已选标签</legend>
|
</fieldset>
|
<div class="layui-form">
|
<div class="layui-form-item" id="select_label">
|
</div>
|
</div>
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
|
<legend>选择标签</legend>
|
</fieldset>
|
<div class="layui-form">
|
<input type="hidden" name="ids" value="{{d.params.data.ids.id}}">
|
<div class="layui-form-item" id="default_item">
|
{{# layui.each(d.params.data.labels, function(index, item){ }}
|
<div class="layui-inline"><label class="layui-form-label"><span class="layui-badge layui-bg-{{item.style}}" data-value="{{ item.name }}" data-style="{{ item.style }}">{{ item.name }}</span></label></div>
|
{{# }); }}
|
{{# if(d.params.data.labels.length<=0){ }}
|
<div class="layui-inline"><label class="layui-form-label"><span class="layui-badge" data-value="热卖" data-style="red">热卖</span></label></div>
|
<div class="layui-inline"><label class="layui-form-label"><span class="layui-badge layui-bg-green" data-value="新品" data-style="green">新品</span></label></div>
|
<div class="layui-inline"><label class="layui-form-label"><span class="layui-badge layui-bg-orange" data-value="推荐" data-style="orange">推荐</span></label></div>
|
<div class="layui-inline"><label class="layui-form-label"><span class="layui-badge layui-bg-blue" data-value="促销" data-style="blue">促销</span></label></div> {{# } }}
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">标签名称：</label>
|
<div class="layui-input-inline">
|
<input type="text" name="name" id="label_name" lay-verify="verifyname" style="width:200px;" placeholder="请输入标签名称" autocomplete="off" class="layui-input">
|
</div>
|
<div class="layui-input-inline">
|
<select name="style" id="style">
|
<option value="">请选择颜色</option>
|
<option value="red" selected="">红色</option>
|
<option value="green">绿色</option>
|
<option value="orange">橙色</option>
|
<option value="blue">蓝色</option>
|
</select>
|
</div>
|
<div class="layui-input-inline text-center" style="width: 40px;">
|
<button class="layui-btn layui-btn-sm layui-btn-normal" id="add_label" style="height: 37px;line-height: 37px;">确定</button>
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-form-item core-hidden">
|
<input type="button" class="layui-btn" lay-submit lay-filter="LAY-app-CoreCmsLabel-createForm-submit" id="LAY-app-CoreCmsLabel-createForm-submit" value="确认设置">
|
</div>
|
</div>
|
</script>
|
<script>
|
var selected = new Array;
|
var debug = layui.setter.debug;
|
layui.data.done = function (d) {
|
//开启调试情况下获取接口赋值数据
|
if (debug) { console.log(d.params.data); }
|
layui.use(['admin', 'form', 'laydate', 'upload', 'coreHelper'],
|
function () {
|
var $ = layui.$
|
, form = layui.form
|
, admin = layui.admin
|
, laydate = layui.laydate
|
, upload = layui.upload
|
, coreHelper = layui.coreHelper;
|
|
form.verify({
|
verifyname: [/^[\S]{0,4}$/, '标签名称最大只允许输入4位字符，且不能出现空格'],
|
});
|
|
//todo 默认选中
|
$("#default_item span").click(function () {
|
var label_text = $(this).attr("data-value");
|
var label_style = $(this).attr("data-style");
|
appendLabel(label_text, label_style);
|
});
|
$("#add_label").click(function () {
|
var label_text = $("#label_name").val();
|
if (label_text) {
|
var label_style = $("#style").val();
|
appendLabel(label_text, label_style);
|
} else {
|
layer.msg('标签名称不能为空');
|
return false;
|
}
|
|
});
|
//删除标签
|
$(".layui-layer-content").on('click', '.layui-unselect', function () {
|
var label = $(this).parent().parent();
|
var label_text = label.attr('data-text');
|
if (selected.length > 0) {
|
$.each(selected, function (i, j) {
|
if (selected[i]) {
|
if (j.text == label_text) {
|
selected.splice(i, 1);
|
label.remove();
|
}
|
}
|
});
|
}
|
});
|
//追加标签
|
function appendLabel(label_text, label_style) {
|
var current = { 'text': label_text, 'style': label_style };
|
var isAppend = true;
|
$.each(selected, function (i, j) {
|
if (j.text == label_text) {
|
layer.msg(label_text + '标签已存在');
|
isAppend = false;
|
return false;
|
}
|
});
|
if (isAppend) {
|
selected.push(current);
|
switch (label_style) {
|
case 'red':
|
label_style = "";
|
break;
|
case 'green':
|
label_style = "layui-bg-green";
|
break;
|
case 'orange':
|
label_style = "layui-bg-orange";
|
break;
|
case 'blue':
|
label_style = "layui-bg-blue";
|
break;
|
default:
|
label_style = '';
|
}
|
var html = '<div class="layui-inline" data-text="' + label_text + '"><label class="layui-form-label"><span class="layui-badge ' + label_style + '" >' + label_text + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i></label></div>';
|
$("#select_label").append(html);
|
}
|
}
|
|
//重载form
|
form.render(null, 'LAY-app-CoreCmsLabel-createForm');
|
})
|
};
|
function getSelected() {
|
if (selected <= 0) {
|
layer.msg("请先选择标签");
|
return false;
|
}
|
return selected;
|
}
|
</script>
|
