New file |
| | |
| | | <div class="layui-fluid layui-anim febs-anim" id="febs-vipBenefits-edit" 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-edit-form"> |
| | | <div class="layui-form-item febs-hide"> |
| | | <label class="layui-form-label febs-form-item-require">id:</label> |
| | | <div class="layui-input-block"> |
| | | <input type="text" name="id"> |
| | | </div> |
| | | </div> |
| | | <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-edit-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, |
| | | benefitsData = [[${benefitsData}]], |
| | | element = layui.element; |
| | | |
| | | form.render(); |
| | | formSelects.render(); |
| | | |
| | | function initValue() { |
| | | form.val("goods-detail-form", { |
| | | "id": benefitsData.id, |
| | | "goodsNo": mailGoodsDetail.name, |
| | | "categoryId": mailGoodsDetail.categoryId, |
| | | "mailGoodsSkuDetailVo": mailGoodsDetail.mailGoodsSkuDetailVo, |
| | | "unit": mailGoodsDetail.unit, |
| | | "originalPrice": mailGoodsDetail.originalPrice, |
| | | "presentPrice": mailGoodsDetail.presentPrice, |
| | | "goodsIntrodution": mailGoodsDetail.goodsIntrodution, |
| | | "thumb": mailGoodsDetail.thumb, |
| | | "goodsDetails": mailGoodsDetail.goodsDetails, |
| | | "isHot": mailGoodsDetail.isHot, |
| | | "goodsName": mailGoodsDetail.goodsName |
| | | }); |
| | | } |
| | | |
| | | //图片上传 |
| | | 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).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).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).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 = {}; |
| | | 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-edit-form-submit)', function (data) { |
| | | data.field.details = tableBenefitsItemsData; |
| | | $.ajax({ |
| | | 'url':ctx + 'admin/vip/benefits/addBenefits', |
| | | '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> |