<div class="layui-fluid layui-anim febs-anim" id="febs-vipBenefits-add" lay-title="新增会员权益">
|
<div class="layui-row febs-container">
|
<div class="layui-col-md12">
|
<div class="layui-fluid" id="act-add">
|
<form class="layui-form" action="" lay-filter="vipBenefits-add-form">
|
<div class="layui-tab-item layui-show">
|
<blockquote class="layui-elem-quote blue-border">基本信息设置</blockquote>
|
<div class="layui-row layui-col-space10 layui-form-item">
|
<div class="layui-col-lg6">
|
<label class="layui-form-label febs-form-item-require">权益名称：</label>
|
<div class="layui-input-block">
|
<input type="text" name="name" lay-verify="required"
|
placeholder="" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<div class="layui-col-lg6">
|
<label class="layui-form-label febs-form-item-require">权益生效类型</label>
|
<div class="layui-input-block">
|
<select name="gainType" class="gain-type" lay-filter="gain-type-select">
|
<option value="1">会员日</option>
|
<option value="2">会员生日</option>
|
</select>
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<div class="layui-col-lg6">
|
<label class="layui-form-label febs-form-item-require">权益类型</label>
|
<div class="layui-input-block">
|
<select name="type" class="benefits-type" lay-filter="benefits-type-select">
|
<option value="1">积分</option>
|
<option value="2">其他</option>
|
</select>
|
</div>
|
</div>
|
|
<div class="layui-col-lg6" id="scoreMultiple">
|
<label class="layui-form-label febs-form-item-require">积分倍数：</label>
|
<div class="layui-input-block">
|
<input type="text" name="scoreMultiple" placeholder="" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label febs-form-item-require">权益ICON</label>
|
<div class="layui-input-block">
|
<div class="layui-upload">
|
<button type="button" class="layui-btn layui-btn-normal layui-btn" id="test2">上传</button>
|
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
|
<div class="layui-upload-list">
|
<img class="layui-upload-img" id="demo2" style="width: 100px" >
|
</div>
|
</blockquote>
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-form-item febs-hide">
|
<label class="layui-form-label">缩略图链接：</label>
|
<div class="layui-input-block">
|
<input type="text" id="benefitsIcon" lay-verify="required" name="icon" autocomplete="off" class="layui-input" readonly>
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">备注：</label>
|
<div class="layui-input-block">
|
<label>
|
<textarea name="remark" rows="5" autocomplete="off" class="layui-textarea" ></textarea>
|
</label>
|
</div>
|
</div>
|
|
<blockquote class="layui-elem-quote blue-border">权益详情页面设置</blockquote>
|
<div class="layui-row layui-col-space10 layui-form-item">
|
<div class="layui-col-lg3">
|
<label class="layui-form-label">是否可点击</label>
|
<div class="layui-input-block">
|
<input type="radio" name="isClick" value="1" title="是" lay-filter="isClick"/>
|
<input type="radio" name="isClick" value="2" title="否" lay-filter="isClick" checked />
|
</div>
|
</div>
|
<div class="layui-col-lg3 febs-hide" id="linkTypeDiv">
|
<label class="layui-form-label febs-form-item-require">点击类型</label>
|
<div class="layui-input-block">
|
<select name="linkType" class="linkType" lay-filter="link-type-select">
|
<option value="">请选择</option>
|
<option value="1">链接</option>
|
<option value="2">领取商品</option>
|
<option value="3">优惠券</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-col-lg6">
|
<button type="button" class="layui-btn layui-btn-normal layui-btn" id="addBenefits" >添加</button>
|
</div>
|
|
<div class="layui-form-item">
|
<table id="benefitsDetailsItem" lay-filter="benefitsDetailsItem"></table>
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-form-item febs-hide">
|
<button class="layui-btn" lay-submit="" lay-filter="vipBenefits-add-form-submit" id="submit">保存</button>
|
</div>
|
</form>
|
</div>
|
</div>
|
</div>
|
</div>
|
<style>
|
.blue-border {
|
border-left-color: #2db7f5;
|
font-size: 18px;
|
}
|
.layui-table-cell {
|
height:auto;
|
}
|
</style>
|
<script type="text/html" id="toolbar">
|
<div class="layui-btn-container">
|
<button class="layui-btn layui-btn-danger layui-btn-sm" type="button" lay-event="delAct">删除</button>
|
</div>
|
</script>
|
<script type="text/html" id="awardtableImgUpload">
|
<div class="layui-upload">
|
<button type="button" class="layui-btn layui-btn-normal layui-btn-xs sku-img" id="awardImg{{d.index}}">上传</button></br>
|
<img class="layui-upload-img" id="awardImageUrls{{d.index}}" style="width: 100px; display:none;" src="{{d.image}}" >
|
<input type="text" id="awardImage{{d.index}}" name="awardImage{{d.index}}" autocomplete="off" value="{{d.image}}" class="layui-input febs-hide">
|
</div>
|
</script>
|
|
<!--<script type="text/html" id="seqInput">-->
|
<!-- <input type="text" name="seq" autocomplete="off" class="layui-input">-->
|
<!--</script>-->
|
<!-- 表格操作栏 end -->
|
<script data-th-inline="javascript">
|
layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree','dropdown', 'laydate', 'layedit', 'upload', 'element', 'table', 'xmSelect'], function () {
|
var $ = layui.jquery,
|
febs = layui.febs,
|
layer = layui.layer,
|
table = layui.table,
|
formSelects = layui.formSelects,
|
treeSelect = layui.treeSelect,
|
form = layui.form,
|
laydate = layui.laydate,
|
eleTree = layui.eleTree,
|
$view = $('#febs-vip-benefits'),
|
layedit = layui.layedit,
|
upload = layui.upload,
|
validate = layui.validate,
|
element = layui.element;
|
|
form.render();
|
formSelects.render();
|
|
//图片上传
|
upload.render({
|
elem: '#test2'
|
,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
|
,done: function(res){
|
$('#demo2').attr('src', res.data.src);
|
$("#benefitsIcon").val(res.data.src);
|
}
|
});
|
|
var tableBenefitsItemsData=[];
|
var tableIns = table.render({
|
elem: '#benefitsDetailsItem'
|
,limit:999
|
,toolbar:"#toolbar"
|
,defaultToolbar:[]
|
,cols: [[ //表头
|
{type: 'checkbox'}
|
,{field: 'index', title: '序号', width:70}
|
,{field: 'isClick', title: '是否可点击',
|
templet: function (d) {
|
if (d.isClick == '1') {
|
return '<span>是</span>'
|
} else if (d.isClick == '2') {
|
return '<span>否</span>'
|
}else{
|
return ''
|
}
|
}, minWidth: 80,align:'center'}
|
,{field: 'seq', title: '排序', edit:'text'}
|
,{templet: '#awardtableImgUpload', title: '详情图片', width:150}
|
,{templet: '#detailsEvent', title: '操作对应属性'}
|
,{field: 'linkType', title: '类型',
|
templet: function (d) {
|
if (d.linkType == '1') {
|
return '<span>链接</span>'
|
} else if (d.linkType == '2') {
|
return '<span>指定商品</span>'
|
}else if (d.linkType == '3') {
|
return '<span>优惠券</span>'
|
}else{
|
return ''
|
}
|
}, minWidth: 80,align:'center'}
|
]]
|
,data: []
|
});
|
|
table.on('toolbar(benefitsDetailsItem)', function(obj){
|
var data = obj.data;
|
|
var hasData = table.cache['benefitsDetailsItem'];
|
var checkData = table.checkStatus('benefitsDetailsItem').data;
|
|
if (checkData.length <= 0) {
|
febs.alert.warn('请选择删除数据');
|
return;
|
}
|
if(obj.event === 'delAct'){
|
for (let i = 0; i < checkData.length; i++) {
|
var delData = checkData[i];
|
for (let j = 0; j < hasData.length; j++) {
|
if (hasData[j].index == delData.index) {
|
hasData.splice(j, 1);
|
break;
|
}
|
}
|
}
|
|
for (let i = 0; i < hasData.length; i++) {
|
hasData[i].index = i + 1;
|
}
|
|
tableBenefitsItemsData=hasData;
|
reloadTable(hasData);
|
}
|
});
|
|
function addTableDate(data) {
|
var hasData = table.cache['benefitsDetailsItem'];
|
|
data.index = hasData.length + 1;
|
data.contentName = ''
|
data.content = ''
|
tableBenefitsItemsData.push(data);
|
|
reloadTable(tableBenefitsItemsData);
|
return data.index;
|
}
|
|
function reloadTable(data) {
|
table.reload('benefitsDetailsItem', {
|
data : data
|
});
|
|
for (let i = 0; i < data.length; i++) {
|
if (data[i].image) {
|
$('#awardImageUrls'+ (i+1)).css('display','block');
|
}
|
// 重新绑定图片上传
|
bindUpload(i+1);
|
|
listenerLinkContent();
|
listenerGoodsSelect();
|
listenerCouponSelect();
|
}
|
}
|
|
table.on('edit(benefitsDetailsItem)', function(obj){
|
var value = obj.value //得到修改后的值
|
,data = obj.data //得到所在行所有键值
|
,field = obj.field; //得到字段
|
|
for (let i = 0; i < tableBenefitsItemsData.length; i++) {
|
if (tableBenefitsItemsData[i].index == data.index) {
|
tableBenefitsItemsData[i] = data;
|
}
|
}
|
});
|
|
function listenerLinkContent() {
|
var hasData = table.cache['benefitsDetailsItem'];
|
|
$(".linkContent").each(function(index, elem) {
|
var dataIndex = $(this).attr('data-index');
|
var $this = $(this);
|
$(this).off('blur')
|
$(this).on('blur', function() {
|
var data = $this.val();
|
hasData[dataIndex - 1].content = data;
|
|
tableBenefitsItemsData = hasData;
|
})
|
});
|
}
|
|
function listenerGoodsSelect() {
|
var hasData = table.cache['benefitsDetailsItem'];
|
|
$(".goodsSelect").each(function(index, elem) {
|
var dataIndex = $(this).attr('data-index');
|
$(this).off('click')
|
$(this).on('click', function() {
|
febs.modal.open('选择商品', 'modules/vip/config/goodsSelect/' + dataIndex, {
|
btn: ['提交', '取消'],
|
yes: function (index, layero) {
|
$('#febs-select-goods').find('#goods-select-form-submit').trigger('click');
|
layer.close(index);
|
},
|
btn2: function () {
|
}
|
});
|
})
|
});
|
}
|
|
function listenerCouponSelect() {
|
$(".couponSelect").each(function(index, elem) {
|
var dataIndex = $(this).attr('data-index');
|
|
$(this).off('click')
|
$(this).on('click', function() {
|
febs.modal.open('选择优惠券', 'modules/vip/config/couponSelect/' + dataIndex, {
|
btn: ['提交', '取消'],
|
yes: function (index, layero) {
|
$('#vip-coupon-select').find('#submit').trigger('click');
|
layer.close(index);
|
},
|
btn2: function () {
|
}
|
});
|
})
|
});
|
}
|
|
$('#addBenefits').on('click', function (){
|
var isClickVal = $("input[name='isClick']:checked").val();
|
var linkTypeVal = $("select[name='linkType']").val();
|
if(isClickVal == 1 && (linkTypeVal == null || linkTypeVal == "")) {
|
febs.alert.warn('链接类型不能为空');
|
return false;
|
}
|
|
|
var data = {};
|
|
if (isClickVal == 1) {
|
data.linkType = linkTypeVal;
|
}
|
data.isClick = isClickVal;
|
addTableDate(data);
|
|
if (linkTypeVal == 1) {
|
listenerLinkContent();
|
}
|
|
if (linkTypeVal == 2) {
|
listenerGoodsSelect();
|
}
|
|
if (linkTypeVal == 3) {
|
listenerCouponSelect();
|
}
|
|
});
|
|
function bindUpload(index) {
|
// 普通图片上传
|
upload.render({
|
elem: '#awardImg' + index
|
,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
|
,done: function(res){
|
febs.alert.success("上传成功");
|
$('#awardImageUrls' + index).attr('src', res.data.src);
|
$('#awardImageUrls'+ index).css('display','block');
|
$('#awardImage'+ index).val(res.data.src);
|
|
for (let i = 0; i < tableBenefitsItemsData.length; i++) {
|
if(tableBenefitsItemsData[i].index == index) {
|
tableBenefitsItemsData[i].image = res.data.src;
|
}
|
}
|
|
reloadTable(tableBenefitsItemsData);
|
}
|
});
|
}
|
|
form.on('radio(isClick)', function(data) {
|
if (data.value == 2) {
|
$('#linkTypeDiv').hide();
|
} else {
|
$('#linkTypeDiv').show();
|
}
|
});
|
|
form.on('select(benefits-type-select)', function(data) {
|
if (data.value == 1) {
|
$('#scoreMultiple').show();
|
} else {
|
$('#scoreMultiple').hide();
|
}
|
});
|
|
form.on('submit(vipBenefits-add-form-submit)', function (data) {
|
data.field.details = tableBenefitsItemsData;
|
$.ajax({
|
'url':ctx + 'admin/vip/benefits/addOrEditBenefits',
|
'type':'post',
|
'dataType':'json',
|
'headers' : {'Content-Type' : 'application/json;charset=utf-8'}, //接口json格式
|
'traditional': true,//ajax传递数组必须添加属性
|
'data':JSON.stringify(data.field),
|
'success':function (data) {
|
if(data.code==200){
|
layer.closeAll();
|
febs.alert.success(data.message);
|
$('#febs-vip-benefits').find('#reset').click();
|
}else{
|
febs.alert.warn(data.message);
|
}
|
},
|
'error':function () {
|
febs.alert.warn('服务器繁忙');
|
}
|
})
|
return false;
|
});
|
|
window.setGoodsSelect = function(tableIndex, data) {
|
var hasData = table.cache['benefitsDetailsItem'];
|
|
for(var i = 0; i<hasData.length; i++) {
|
if (tableIndex == hasData[i].index) {
|
hasData[i].content = data.id;
|
hasData[i].contentName = data.goodsName
|
}
|
}
|
|
tableBenefitsItemsData = hasData;
|
$(".goodsSelect").each(function(index, elem) {
|
var dataIndex = $(this).attr('data-index');
|
if (dataIndex == tableIndex) {
|
$(this).val(data.goodsName);
|
$(this).next().val(data.id);
|
}
|
});
|
}
|
|
window.setCouponSelect = function(tableIndex, data) {
|
var hasData = table.cache['benefitsDetailsItem'];
|
|
for(var i = 0; i<hasData.length; i++) {
|
if (tableIndex == hasData[i].index) {
|
hasData[i].content = data.couponId;
|
hasData[i].contentName = data.couponName
|
}
|
}
|
|
tableBenefitsItemsData = hasData;
|
console.log(tableBenefitsItemsData)
|
$(".couponSelect").each(function(index, elem) {
|
var dataIndex = $(this).attr('data-index');
|
if (dataIndex == tableIndex) {
|
$(this).val(data.couponName);
|
$(this).next().val(data.couponId);
|
}
|
});
|
}
|
|
});
|
</script>
|
|
|
<script type="text/html" id="detailsEvent">
|
{{# if(d.isClick == 1 && d.linkType == 1){ }}
|
<input type="text" name="content" autocomplete="off" data-index="{{d.index}}" value="{{d.content}}" class="layui-input linkContent">
|
{{# } }}
|
{{# if( d.isClick == 1 && d.linkType == 2){ }}
|
<input type="text" autocomplete="off" name="contentName" data-index="{{d.index}}" value="{{d.contentName}}" class="layui-input goodsSelect" readonly>
|
<input type="text" name="content" autocomplete="off" value="{{d.content}}" class="layui-input goodsSelectId febs-hide" readonly>
|
{{# } }}
|
{{# if(d.isClick == 1 && d.linkType == 3){ }}
|
<input type="text" name="contentName" autocomplete="off" data-index="{{d.index}}" value="{{d.contentName}}" class="layui-input couponSelect" readonly>
|
<input type="text" name="content" autocomplete="off" value="{{d.content}}" class="layui-input couponSelectId febs-hide" readonly>
|
{{# } }}
|
</script>
|
