| | |
| | | <input type="text" name="unit" 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"> |
| | | <input type="text" name="store" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> |
| | | <input type="text" name="stock" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> |
| | | </div> |
| | | </div> |
| | | <div class="layui-col-lg6"> |
| | | <label class="layui-form-label febs-form-item-require">销量:</label> |
| | | <div class="layui-input-block"> |
| | | <input type="text" name="volume" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label febs-form-item-require">商品类型</label> |
| | | <div class="layui-input-block"> |
| | | <select name="goodsType" class="goods-type" > |
| | | <select name="goodsType" class="goods-type" lay-filter="goods-type-select"> |
| | | <option value="1">普通商品区</option> |
| | | <option value="2">套餐区</option> |
| | | </select> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-form-item febs-hide tc-set"> |
| | | <label class="layui-form-label">静态倍数</label> |
| | | <div class="layui-input-block"> |
| | | <input type="text" name="staticMulti" placeholder="请输入静态倍数" autocomplete="off" class="layui-input"> |
| | | <div class="layui-form-mid layui-word-aux">支付后,赠送(购买金额*静态倍数)的赠送积分</div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-form-item febs-hide tc-set"> |
| | | <label class="layui-form-label">静态占比(%)</label> |
| | | <div class="layui-input-block"> |
| | | <input type="text" name="staticProp" placeholder="请输入静态占比" autocomplete="off" class="layui-input"> |
| | | <div class="layui-form-mid layui-word-aux">所有套餐静态占比相加应等于100%</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-tab-item"> |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label febs-form-item-require">缩略图:</label> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-form-item febs-hide"> |
| | | <label class="layui-form-label">缩略图链接:</label> |
| | | <div class="layui-input-block"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-form-item febs-hide"> |
| | | <label class="layui-form-label">缩略图链接:</label> |
| | | <div class="layui-input-block"> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="layui-tab-item"> |
| | | <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> |
| | |
| | | <input type="text" name="costPrice" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> |
| | | </div> |
| | | </div> |
| | | <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="addMallGoodsSkuDtos" autocomplete="off" class="layui-input" id="attrName"> |
| | | </div> |
| | | </div> |
| | | <div class="layui-col-lg6"> |
| | | <button type="button" class="layui-btn layui-btn-normal layui-btn" id="test3" >添加</button> |
| | | |
| | | <blockquote class="layui-elem-quote blue-border">多规格设置</blockquote> |
| | | <div class="layui-col-lg6"> |
| | | <label class="layui-form-label">开启多规格:</label> |
| | | <div class="layui-input-block"> |
| | | <input type="radio" name="isSku" value="1" title="是" lay-filter="isSku" /> |
| | | <input type="radio" name="isSku" value="2" title="否" lay-filter="isSku" checked /> |
| | | </div> |
| | | </div> |
| | | <div id="attrWrap"></div> |
| | | <div class="layui-form-item multi-sku-table febs-hide"> |
| | | <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="addMallGoodsSkuDtos" autocomplete="off" class="layui-input" id="attrName"> |
| | | </div> |
| | | </div> |
| | | <div class="layui-col-lg6"> |
| | | <button type="button" class="layui-btn layui-btn-normal layui-btn" id="test3" >添加</button> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-row layui-col-space10 layui-form-item"> |
| | | <div class="layui-col-lg6"> |
| | | <label class="layui-form-label">是否热卖:</label> |
| | | <div class="layui-form-item"> |
| | | <div class="layui-input-block"> |
| | | <input type="radio" name="isHot" value="1" title="是" > |
| | | <input type="radio" name="isHot" value="2" title="否" checked=""> |
| | | <table id="multiSku" lay-filter="multiSku"></table> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | <div class="layui-form-item" style="text-align:center"> |
| | | <button class="layui-btn" lay-submit="" lay-filter="goods-add-form-submit" id="submit">保存</button> |
| | | <button class="layui-btn" lay-submit="" lay-filter="goods-add-form-cancel" id="cancel">取消</button> |
| | | <button class="layui-btn layui-btn-danger" lay-submit="" lay-filter="goods-add-form-cancel" id="cancel">取消</button> |
| | | </div> |
| | | </form> |
| | | </div> |
| | |
| | | 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="delSku">删除</button> |
| | | </div> |
| | | </script> |
| | | <script type="text/html" id="tableImgUpload"> |
| | | <div class="layui-upload"> |
| | | <button type="button" class="layui-btn layui-btn-normal layui-btn-xs sku-img" id="skuImg{{d.index}}">上传</button></br> |
| | | <img class="layui-upload-img" id="imageUrls{{d.index}}" style="width: 100px; display:none;" src="{{d.skuImage}}" > |
| | | <input type="text" id="skuImage{{d.index}}" name="skuImage{{d.index}}" autocomplete="off" value="{{d.skuImage}}" class="layui-input febs-hide"> |
| | | </div> |
| | | </script> |
| | | <!-- 表格操作栏 end --> |
| | | <script data-th-inline="javascript"> |
| | | layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree','dropdown', 'laydate','layedit','upload', 'element'], function () { |
| | | layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree','dropdown', 'laydate','layedit','upload', 'element', 'table'], function () { |
| | | var $ = layui.jquery, |
| | | febs = layui.febs, |
| | | layer = layui.layer, |
| | | table = layui.table, |
| | | formSelects = layui.formSelects, |
| | | treeSelect = layui.treeSelect, |
| | | form = layui.form, |
| | |
| | | |
| | | formSelects.render(); |
| | | |
| | | var tableSkuData=[]; |
| | | var tableIns = table.render({ |
| | | elem: '#multiSku' |
| | | ,limit:999 |
| | | ,toolbar:"#toolbar" |
| | | ,defaultToolbar:[] |
| | | ,cols: [[ //表头 |
| | | {type: 'checkbox'} |
| | | ,{field: 'index', title: '序号', width:70} |
| | | ,{field: 'styleName', title: '样式', edit:'text'} |
| | | ,{field: 'skuName', title: '规格', edit:'text'} |
| | | ,{field: 'presentPrice', title: '现价', edit:'text'} |
| | | ,{field: 'originalPrice', title: '原价', edit:'text'} |
| | | ,{field: 'costPrice', title: '成本价', edit:'text'} |
| | | ,{templet: '#tableImgUpload', title: '缩略图', width:150} |
| | | ,{field: 'stock', title: '库存', edit:'text'} |
| | | ,{field: 'skuVolume', title: '销量', edit:'text'} |
| | | ,{field: 'skuImage', title: '缩略图地址', hide:true} |
| | | ]] |
| | | ,data: [] |
| | | }); |
| | | |
| | | table.on('toolbar(multiSku)', function(obj){ |
| | | var data = obj.data; |
| | | |
| | | var hasData = table.cache['multiSku']; |
| | | var checkData = table.checkStatus('multiSku').data; |
| | | |
| | | if (checkData.length <= 0) { |
| | | febs.alert.warn('请选择删除数据'); |
| | | return; |
| | | } |
| | | if(obj.event === 'delSku'){ |
| | | 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; |
| | | } |
| | | reloadTable(hasData); |
| | | } |
| | | }); |
| | | |
| | | form.on('radio(isSku)', function(data){ |
| | | |
| | | if (data.value == 2) { |
| | | $('.multi-sku-table').hide(); |
| | | } else { |
| | | $('.multi-sku-table').show(); |
| | | } |
| | | }); |
| | | |
| | | function addTableDate(data) { |
| | | var hasData = table.cache['multiSku']; |
| | | |
| | | data.index = hasData.length + 1; |
| | | tableSkuData.push(data); |
| | | |
| | | reloadTable(tableSkuData); |
| | | return data.index; |
| | | } |
| | | |
| | | function reloadTable(data) { |
| | | table.reload('multiSku', { |
| | | data : data |
| | | }); |
| | | |
| | | for (let i = 0; i < data.length; i++) { |
| | | if (data[i].skuImage) { |
| | | $('#imageUrls'+ (i+1)).css('display','block'); |
| | | } |
| | | // 重新绑定图片上传 |
| | | bindUpload(i+1); |
| | | } |
| | | } |
| | | |
| | | table.on('edit(multiSku)', function(obj){ |
| | | var value = obj.value //得到修改后的值 |
| | | ,data = obj.data //得到所在行所有键值 |
| | | ,field = obj.field; //得到字段 |
| | | |
| | | for (let i = 0; i < tableSkuData.length; i++) { |
| | | if (tableSkuData[i].index == data.index) { |
| | | tableSkuData[i] = data; |
| | | } |
| | | } |
| | | }); |
| | | |
| | | $('#test3').on('click', function (){ |
| | | let attrNameVal = $('#attrName').val(); |
| | | if(attrNameVal == null || attrNameVal == ""){ |
| | | febs.alert.warn('样式名称不能为空'); |
| | | return false; |
| | | } |
| | | |
| | | var data = {}; |
| | | data.styleName = attrNameVal; |
| | | var index = addTableDate(data); |
| | | bindUpload(index); |
| | | }); |
| | | |
| | | function bindUpload(index) { |
| | | // 普通图片上传 |
| | | upload.render({ |
| | | elem: '#skuImg' + index |
| | | ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口 |
| | | ,done: function(res){ |
| | | febs.alert.success(res.data.src); |
| | | $('#imageUrls' + index).attr('src', res.data.src); |
| | | $('#imageUrls'+ index).css('display','block'); |
| | | $('#skuImage'+ index).val(res.data.src); |
| | | |
| | | |
| | | for (let i = 0; i < tableSkuData.length; i++) { |
| | | if(tableSkuData[i].index == index) { |
| | | tableSkuData[i].skuImage = res.data.src; |
| | | } |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | //(下拉框) |
| | | $.get(ctx + 'admin/goodsCategory/categorys/allTree', function (data) { |
| | |
| | | }else{ |
| | | $("#thumbs").val(thumbs + ',' + res.data.src); |
| | | } |
| | | // alert($("#thumb").val()); |
| | | } |
| | | }); |
| | | |
| | |
| | | }); |
| | | } |
| | | ,done: function(res){ |
| | | // var thumbs = $("#thumb").val(); |
| | | // if(thumbs == ''){ |
| | | $("#thumb").val(res.data.src); |
| | | // }else{ |
| | | // $("#thumb").val(thumbs + ',' + res.data.src); |
| | | // } |
| | | // alert($("#thumb").val()); |
| | | $("#thumb").val(res.data.src); |
| | | } |
| | | }); |
| | | |
| | |
| | | } |
| | | }); |
| | | |
| | | $('#test3').on('click', function (){ |
| | | var index = $("#attrWrap").children().length; |
| | | let attrNameVal = $('#attrName').val(); |
| | | if(attrNameVal==null || attrNameVal==""){ |
| | | febs.alert.warn('样式名称不能为空'); |
| | | return false; |
| | | } |
| | | $('#attrWrap').append(` |
| | | <div class="layui-form-item item"> |
| | | <div style="float:left" > |
| | | <input type="text" name="styleName` + index + `" value="` + $('#attrName').val() + `" autocomplete="off" class="layui-input" readonly > |
| | | </div> |
| | | <div style="float:left" > |
| | | <div> |
| | | <input type="text" name="skuName` + index +`" placeholder="规格名称" autocomplete="off" class="layui-input" > |
| | | </div> |
| | | </div> |
| | | <div style="float:left" > |
| | | <label class="layui-form-label">图片:</label> |
| | | <div class="layui-input-block"> |
| | | <div class="layui-upload"> |
| | | <button type="button" class="layui-btn layui-btn-normal layui-btn-xs sku-img" id="skuImg` + index + `">上传</button> |
| | | <img class="layui-upload-img" id="imageUrls` + index + `" style="width: 100px" > |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div style="float:left" class="febs-hide"> |
| | | <div> |
| | | <input type="text" id="skuImage` + index +`" name="skuImage` + index + `" autocomplete="off" class="layui-input"> |
| | | </div> |
| | | </div> |
| | | <div style="float:left" > |
| | | <div> |
| | | <input type="number" name="stock` + index +`" placeholder="库存" autocomplete="off" class="layui-input" > |
| | | </div> |
| | | </div> |
| | | <div style="float:left" > |
| | | <div> |
| | | <input type="number" name="skuVolume` + index +`" placeholder="销售数量" autocomplete="off" class="layui-input" > |
| | | </div> |
| | | </div> |
| | | <div style="float:left" > |
| | | <div> |
| | | <input type="number" name="originalPrice` + index +`" placeholder="原价" autocomplete="off" class="layui-input" > |
| | | </div> |
| | | </div> |
| | | <div style="float:left" > |
| | | <div> |
| | | <input type="number" name="presentPrice` + index + `" placeholder="现价" autocomplete="off" class="layui-input" > |
| | | </div> |
| | | </div> |
| | | <div style="float:left" > |
| | | <button type="button" class="layui-btn del-attr-btn" data-index="` + index +`">删除</button> |
| | | </div> |
| | | </div> |
| | | `) |
| | | //普通图片上传 |
| | | upload.render({ |
| | | elem: '#skuImg' + index |
| | | ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口 |
| | | ,done: function(res){ |
| | | febs.alert.success(res.data.src); |
| | | $('#imageUrls' + index).attr('src', res.data.src); |
| | | $('#skuImage'+ index).val(res.data.src); |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | upload.render({ |
| | | elem: '#skuImg'+index |
| | | ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口 |
| | |
| | | $('#skuImage'+ index).val(res.data.src); |
| | | } |
| | | }); |
| | | $("#attrWrap").on("click",".del-attr-btn",function(){ |
| | | var index = $(this).attr('data-index') |
| | | $($("#attrWrap").find(".item")[index].remove()); |
| | | }); |
| | | |
| | | form.on('submit(goods-add-form-submit)', function (data) { |
| | | let skuArrs = []; |
| | | var skuArr = $("#attrWrap").find(".item"); |
| | | for(var i = 0;i < skuArr.length;i++){ |
| | | skuArrs.push({ |
| | | styleName: $("input[name='styleName" + i + "']").val(), |
| | | skuName: $("input[name='skuName" + i + "']").val(), |
| | | skuImage: $("input[name='skuImage" + i + "']").val(), |
| | | stock: $("input[name='stock" + i + "']").val(), |
| | | skuVolume: $("input[name='skuVolume" + i + "']").val(), |
| | | originalPrice:$("input[name='originalPrice" + i + "']").val(), |
| | | presentPrice: $("input[name='presentPrice" + i + "']").val() |
| | | }) |
| | | } |
| | | // if(skuArr.length < 0){ |
| | | // febs.alert.warn("请填写商品规格"); |
| | | // return false; |
| | | // } |
| | | // console.log(skuArrs) |
| | | data.field.addMallGoodsSkuDtos = skuArrs; |
| | | // console.log(data.field) |
| | | data.field.addMallGoodsSkuDtos = tableSkuData; |
| | | $.ajax({ |
| | | 'url':ctx + 'admin/goods/addMallGoods', |
| | | 'type':'post', |
| | |
| | | return false; |
| | | }); |
| | | |
| | | // $('cancel').on('click', function () { |
| | | // var currentUrl = window.location.hash.replace('#', ''); |
| | | // febs.view.tab.del(currentUrl); |
| | | // febs.view.tab.change("/modules/goods/goodsList/"); |
| | | // }); |
| | | |
| | | form.on('select(goods-type-select)', function(data){ |
| | | $('.tc-set').each(function() { |
| | | if (data.value == 2) { |
| | | $(this).show(); |
| | | } else { |
| | | $(this).hide(); |
| | | } |
| | | }) |
| | | }); |
| | | }); |
| | | </script> |