| | |
| | | <div class="layui-fluid layui-anim febs-anim" id="febs-goods" lay-title="新增商品"> |
| | | <div class="layui-fluid layui-anim febs-anim" id="febs-goods-add" lay-title="新增商品"> |
| | | <div class="layui-row febs-container"> |
| | | <div class="layui-col-md12"> |
| | | <div class="layui-card"> |
| | | <div class="layui-card-body febs-table-full"> |
| | | <!-- <div class="layui-card">--> |
| | | <!-- <div class="layui-card-body febs-table-full">--> |
| | | <div class="layui-fluid" id="goods-add"> |
| | | <form class="layui-form" action="" lay-filter="goods-add-form"> |
| | | <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="goodsName" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> |
| | | <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> |
| | | <ul class="layui-tab-title"> |
| | | <li class="layui-this">基础信息</li> |
| | | <li>详情设置</li> |
| | | <li>价格设置</li> |
| | | </ul> |
| | | <div class="layui-tab-content"> |
| | | <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="goodsName" 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="goodsNo" 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"> |
| | | <div id="goods-category"></div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-col-lg3"> |
| | | <label class="layui-form-label">是否主推:</label> |
| | | <div class="layui-input-block"> |
| | | <input type="radio" name="isHot" value="1" title="是" /> |
| | | <input type="radio" name="isHot" value="2" title="否" checked /> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-col-lg3"> |
| | | <label class="layui-form-label febs-form-item-require">序号:</label> |
| | | <div class="layui-input-block"> |
| | | <input type="number" name="orderNumber" 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="unit" 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="goodsWeight" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> |
| | | |
| | | <div class="layui-form-mid layui-word-aux">默认单位:克。请填写数字。如:1千克,则填入1000。</div> |
| | | </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="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">商品介绍:</label> |
| | | <div class="layui-input-block"> |
| | | <label> |
| | | <textarea name="goodsIntrodution" rows="5" autocomplete="off" class="layui-textarea" ></textarea> |
| | | </label> |
| | | </div> |
| | | </div> |
| | | |
| | | <blockquote class="layui-elem-quote blue-border">商品类型</blockquote> |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label febs-form-item-require">商品类型</label> |
| | | <div class="layui-input-block"> |
| | | <select name="isNormal" class="goods-type" lay-filter="goods-type-select"> |
| | | <option value="1">普通商品区</option> |
| | | <!-- <option value="2">套餐区</option>--> |
| | | </select> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- <div class="layui-form-item">--> |
| | | <!-- <label class="layui-form-label">推销员返积分比例(%)</label>--> |
| | | <!-- <div class="layui-input-block">--> |
| | | <!-- <input type="text" name="staticMulti" placeholder="请输入推销员返积分比例" autocomplete="off" class="layui-input">--> |
| | | <!-- </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">折扣积分=售价*积分折扣(%)*积分换算比例</div>--> |
| | | <!-- <div class="layui-form-mid layui-word-aux">不允许使用积分设置成:0%</div>--> |
| | | <!-- <div class="layui-form-mid layui-word-aux">全部使用积分设置成:大于等于100%</div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | </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="goodsNo" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> |
| | | |
| | | <div class="layui-tab-item"> |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label febs-form-item-require">缩略图:</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" id="demo2"></div> |
| | | </blockquote> |
| | | <div class="layui-word-aux">双击图片删除</div> |
| | | </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="thumb" lay-verify="required" name="thumb" autocomplete="off" class="layui-input" readonly> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label febs-form-item-require">轮播图:</label> |
| | | <div class="layui-input-block"> |
| | | <div class="layui-upload"> |
| | | <button type="button" class="layui-btn layui-btn-normal layui-btn" id="thumbsBanner">上传</button> |
| | | <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> |
| | | <div class="layui-upload-list" id="thumbsBanners"></div> |
| | | </blockquote> |
| | | <div class="layui-word-aux">双击图片删除</div> |
| | | </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="thumbs" lay-verify="required" name="thumbs" 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="goodsParameter" rows="5" autocomplete="off" class="layui-textarea" ></textarea> |
| | | </label> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- <div class="layui-form-item">--> |
| | | <!-- <label class="layui-form-label febs-form-item-require">商品详情:</label>--> |
| | | <!-- <div class="layui-input-block">--> |
| | | <!-- <textarea id="goodsDetailEditAdd" lay-verify="content" name = "goodsDetails" class="layui-textarea"></textarea>--> |
| | | <!--<!– <div style="border: 1px solid #ccc;">–>--> |
| | | <!--<!– <div id="toolbar-container-good-add" style="border-bottom: 1px solid #ccc;"></div>–>--> |
| | | <!--<!– <div id="editor-container-good-add" style="height: 450px;"></div>–>--> |
| | | <!--<!– </div>–>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label febs-form-item-require">商品详情:</label> |
| | | <div class="layui-input-block"> |
| | | <!-- <textarea id="goodsDetailEditAdd" lay-verify="content" name = "goodsDetails" class="layui-textarea"></textarea>--> |
| | | <div style="border: 1px solid #ccc;"> |
| | | <div id="toolbar-container" class="toolbar"></div> |
| | | <div id="text-container" class="text" style="height: 450px;"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </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"> |
| | | <select name="categoryId" class="categary-update-category" > |
| | | <option value="">请选择</option> |
| | | </select> |
| | | <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> |
| | | <div class="layui-input-block"> |
| | | <input type="text" name="originalPrice" 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="presentPrice" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- <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="levelOnePrice" 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="levelTwoPrice" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">--> |
| | | <!-- </div>--> |
| | | <!-- </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="levelThreePrice" 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="costPrice" 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="staticProp" lay-verify="required" placeholder="请输入积分折扣" lay-reqText="请输入积分折扣" autocomplete="off" class="layui-input"> |
| | | <div class="layui-form-mid layui-word-aux">折扣积分=原价 * 积分折扣(%)* 积分换算比例</div> |
| | | <div class="layui-form-mid layui-word-aux">不允许使用积分设置成:0%</div> |
| | | <div class="layui-form-mid layui-word-aux">全部使用积分设置成:大于等于100%</div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | <blockquote class="layui-elem-quote blue-border">运费设置</blockquote> |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label">运费:</label> |
| | | <div class="layui-input-block"> |
| | | <input type="radio" name="carriageType" value="1" title="固定运费" lay-filter="hasCarriage" /> |
| | | <input type="radio" name="carriageType" value="2" title="使用邮费模板" lay-filter="hasCarriage" checked/> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-form-item carriage-input febs-hide"> |
| | | <div class="layui-col-lg6"> |
| | | <label class="layui-form-label">固定运费:</label> |
| | | <div class="layui-input-block"> |
| | | <input id="carriageAmountDefault" type="text" name="carriageAmount" placeholder="" autocomplete="off" class="layui-input"> |
| | | <div class="layui-form-mid layui-word-aux">远费设置为0元,商品将显示为免运费。</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-form-item carriage-rule"> |
| | | <div class="layui-col-lg6"> |
| | | <label class="layui-form-label febs-form-item-require">邮费模板:</label> |
| | | <div class="layui-input-block"> |
| | | <div id="carriage-rule"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <blockquote class="layui-elem-quote blue-border">优惠卷设置</blockquote> |
| | | <div class="layui-form-item coupon-rule"> |
| | | <div class="layui-col-lg6"> |
| | | <label class="layui-form-label">优惠卷:</label> |
| | | <div class="layui-input-block"> |
| | | <div id="coupon-rule"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <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 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-lg1"> |
| | | <button type="button" |
| | | class="layui-btn layui-btn-normal layui-btn" id="test3"> |
| | | 添加 |
| | | </button> |
| | | </div> |
| | | <!-- <div class="layui-col-lg1">--> |
| | | <!-- <button type="button"--> |
| | | <!-- class="layui-btn layui-btn-normal layui-btn" id="test4">--> |
| | | <!-- 新增样品--> |
| | | <!-- </button>--> |
| | | <!-- </div>--> |
| | | </div> |
| | | |
| | | <div class="layui-form-item"> |
| | | <div class="layui-input-block"> |
| | | <table id="multiSku" lay-filter="multiSku"></table> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </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="unit" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> |
| | | </div> |
| | | </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="originalPrice" 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="presentPrice" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label">商品介绍:</label> |
| | | <div class="layui-input-block"> |
| | | <input type="text" name="goodsIntrodution" 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-xs" id="test3" >添加</button> |
| | | </div> |
| | | </div> |
| | | <div id="attrWrap"></div> |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label febs-form-item-require">缩略图:</label> |
| | | <div class="layui-input-block"> |
| | | <div class="layui-upload"> |
| | | <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" id="test2">上传</button> |
| | | <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> |
| | | <div class="layui-upload-list" id="demo2"></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="thumb" lay-verify="required" name="thumb" autocomplete="off" class="layui-input" readonly> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label febs-form-item-require">轮播图:</label> |
| | | <div class="layui-input-block"> |
| | | <div class="layui-upload"> |
| | | <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" id="thumbsBanner">上传</button> |
| | | <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> |
| | | <div class="layui-upload-list" id="thumbsBanners"></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="thumbs" lay-verify="required" name="thumbs" autocomplete="off" class="layui-input" readonly> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label febs-form-item-require">商品详情:</label> |
| | | <div class="layui-input-block"> |
| | | <textarea id="lay_edit" name = "goodsDetails" class="layui-textarea"></textarea> |
| | | </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-input-block"> |
| | | <input type="radio" name="isHot" value="1" title="是" > |
| | | <input type="radio" name="isHot" value="2" title="否" checked=""> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="layui-form-item" style="text-align:center"> |
| | | <div class="layui-form-item febs-hide"> |
| | | <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> |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | </div> |
| | | </div> |
| | | <style> |
| | | .blue-border { |
| | | border-left-color: #2db7f5; |
| | | font-size: 18px; |
| | | } |
| | | .layui-table-cell { |
| | | height:auto; |
| | | } |
| | | .layui-upload-list { |
| | | margin: 0 !important; |
| | | } |
| | | .multi-images { |
| | | margin: 0 5px !important; |
| | | } |
| | | </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'], function () { |
| | | 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, |
| | | member = [[${member}]], |
| | | $view = $('#goods-add'), |
| | | layedit = layui.layedit, |
| | | upload = layui.upload, |
| | | validate = layui.validate; |
| | | |
| | | validate = layui.validate, |
| | | element = layui.element; |
| | | // form.verify(validate); |
| | | form.render(); |
| | | const E = window.wangEditor; |
| | | const editor = new E('#toolbar-container', '#text-container'); // 传入两个元素 |
| | | editor.config.showLinkImg = false; |
| | | editor.config.uploadFileName = 'file'; |
| | | editor.config.customUploadImg = function (files, insertImgFn) { |
| | | // files 是 input 中选中的文件列表 |
| | | // insertImgFn 是获取图片 url 后,插入到编辑器的方法 |
| | | // 上传图片,返回结果,将图片插入到编辑器中 |
| | | for (let i = 0; i < files.length; i++){ |
| | | var form = new FormData(); |
| | | form.append("file", files[0]); |
| | | $.ajax({ |
| | | url:'/admin/goods/uploadFileBase64', |
| | | type: "post", |
| | | processData: false, |
| | | contentType: false, |
| | | data: form, |
| | | dataType: 'json', |
| | | success(res) { |
| | | // 上传代码返回结果之后,将图片插入到编辑器中 |
| | | insertImgFn(res.data.src, res.data.title, '') |
| | | } |
| | | }) |
| | | } |
| | | }; |
| | | editor.create(); |
| | | |
| | | // var E = window.wangEditor; |
| | | // const editorConfig = { MENU_CONF: {} }; |
| | | // editorConfig.MENU_CONF['uploadImage'] = { |
| | | // server: '/admin/goods/uploadFileBase64', |
| | | // fieldName : "file", |
| | | // customInsert(res, insertFn) { |
| | | // insertFn(res.data.src, res.data.title, '') |
| | | // }, |
| | | // } |
| | | // |
| | | // const editor = E.createEditor({ |
| | | // selector: '#editor-container-good-add', |
| | | // config : editorConfig, |
| | | // mode: 'default' |
| | | // }); |
| | | // |
| | | // const toolbar = E.createToolbar({ |
| | | // editor, |
| | | // selector: '#toolbar-container-good-add', |
| | | // mode: 'default' |
| | | // }); |
| | | |
| | | laydate.render({ |
| | | elem: '#febs-form-group-date' |
| | | }); |
| | | layedit.set({ //设置图片接口 |
| | | uploadImage: { |
| | | url: 'admin/goods/uploadFileBase64', //接口url |
| | | type: 'post', |
| | | } |
| | | }); |
| | | //创建一个编辑器 |
| | | var indexAdd = layedit.build('goodsDetailEditAdd',{ |
| | | height: 300 |
| | | }); |
| | | form.verify({ |
| | | //content富文本域中的lay-verify值 |
| | | content: function(value) { |
| | | return layedit.sync(indexAdd); |
| | | } |
| | | }); |
| | | |
| | | formSelects.render(); |
| | | |
| | | var category = xmSelect.render({ |
| | | el: '#goods-category', |
| | | language: 'zn', |
| | | prop : { |
| | | value : 'id', |
| | | children : 'child' |
| | | }, |
| | | iconfont: { |
| | | parent: 'hidden', |
| | | }, |
| | | tips: '请选择', |
| | | filterable: true, |
| | | radio: true, |
| | | clickClose: true, |
| | | tree: { |
| | | show: true, |
| | | //非严格模式 |
| | | strict: false, |
| | | }, |
| | | data: [] |
| | | }) |
| | | |
| | | febs.get(ctx + 'admin/goodsCategory/categoryTree', null, function(res) { |
| | | category.update({ |
| | | data : res.data, |
| | | autoRow: true, |
| | | }); |
| | | }) |
| | | |
| | | var carriageRule = xmSelect.render({ |
| | | el: '#carriage-rule', |
| | | language: 'zn', |
| | | prop : { |
| | | value : 'id', |
| | | children : 'child' |
| | | }, |
| | | iconfont: { |
| | | parent: 'hidden', |
| | | }, |
| | | radio: true, |
| | | clickClose: true, |
| | | tree: { |
| | | show: true, |
| | | //非严格模式 |
| | | strict: false, |
| | | }, |
| | | data: [] |
| | | }) |
| | | |
| | | febs.get(ctx + 'admin/goods/carriageRuleTree', null, function(res) { |
| | | carriageRule.update({ |
| | | data : res.data, |
| | | autoRow: true, |
| | | }); |
| | | }) |
| | | |
| | | var couponRule = xmSelect.render({ |
| | | el: '#coupon-rule', |
| | | language: 'zn', |
| | | prop : { |
| | | value : 'id', |
| | | children : 'child' |
| | | }, |
| | | iconfont: { |
| | | parent: 'hidden', |
| | | }, |
| | | // radio: true, |
| | | clickClose: true, |
| | | tree: { |
| | | show: true, |
| | | //非严格模式 |
| | | strict: false, |
| | | }, |
| | | data: [] |
| | | }) |
| | | |
| | | febs.get(ctx + 'admin/goods/couponTreeSet', null, function(res) { |
| | | couponRule.update({ |
| | | data : res.data, |
| | | autoRow: true, |
| | | }); |
| | | }) |
| | | |
| | | 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', width:200} |
| | | ,{field: 'skuName', title: '规格', edit:'text', width:200} |
| | | // ,{field: 'sample', title:'样品', width:100} |
| | | ,{field: 'goodsWeight', title: '重量', edit:'text', width:100} |
| | | // ,{field: 'levelOnePrice', title: '一级价格', edit:'text', width:100} |
| | | // ,{field: 'levelTwoPrice', title: '二级价格', edit:'text', width:100} |
| | | // ,{field: 'levelThreePrice', title: '三级价格', edit:'text', width:100} |
| | | ,{field: 'originalPrice', title: '原价', edit:'text', width:100} |
| | | ,{field: 'presentPrice', title: '现价', edit:'text', width:100} |
| | | ,{field: 'costPrice', title: '成本价', edit:'text', width:100} |
| | | ,{templet: '#tableImgUpload', title: '缩略图', width:150} |
| | | ,{field: 'stock', title: '库存', edit:'text', width:100} |
| | | ,{field: 'skuVolume', title: '销量', edit:'text', width:100} |
| | | ,{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; |
| | | } |
| | | |
| | | tableSkuData=hasData; |
| | | reloadTable(hasData); |
| | | } |
| | | }); |
| | | |
| | | form.on('radio(isSku)', function(data){ |
| | | |
| | | if (data.value == 2) { |
| | | $('.multi-sku-table').hide(); |
| | | } else { |
| | | $('.multi-sku-table').show(); |
| | | } |
| | | }); |
| | | |
| | | form.on('radio(hasCarriage)', function(data){ |
| | | if (data.value == 2) { |
| | | $('.carriage-input').hide(); |
| | | $('.carriage-rule').show(); |
| | | // document.getElementById('carriageAmountDefault').value = 0; |
| | | } else { |
| | | $('.carriage-input').show(); |
| | | $('.carriage-rule').hide(); |
| | | // document.getElementById('carriageAmountDefault').value = 0; |
| | | } |
| | | }); |
| | | |
| | | 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; |
| | | addTableDate(data); |
| | | }); |
| | | |
| | | $('#test4').on('click', function () { |
| | | var data = {}; |
| | | data.sample = "样品"; |
| | | addTableDate(data); |
| | | }); |
| | | |
| | | 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; |
| | | } |
| | | } |
| | | |
| | | reloadTable(tableSkuData); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | //(下拉框) |
| | | $.get(ctx + 'admin/goodsCategory/categorys/tree', function (data) { |
| | | $.get(ctx + 'admin/goodsCategory/categorys/allTree', function (data) { |
| | | for (var k in data) |
| | | { |
| | | $(".categary-update-category").append("<option value='" + data[k].parentId + "'>" + data[k].name + "</option>"); |
| | | $(".categary-addPeoduct").append("<option value='" + data[k].parentId + "'>" + data[k].name + "</option>"); |
| | | } |
| | | layui.use('form', function () { |
| | | var form = layui.form; |
| | |
| | | ,before: function(obj){ |
| | | //预读本地文件示例,不支持ie8 |
| | | obj.preview(function(index, file, result){ |
| | | $('#thumbsBanners').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 100px">') |
| | | $('#thumbsBanners').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img multi-images" style="width: 130px">') |
| | | }); |
| | | } |
| | | ,done: function(res){ |
| | |
| | | }else{ |
| | | $("#thumbs").val(thumbs + ',' + res.data.src); |
| | | } |
| | | // alert($("#thumb").val()); |
| | | |
| | | imgUnBind(".multi-images"); |
| | | imgMultiBind(); |
| | | } |
| | | }); |
| | | |
| | | //多图片上传 |
| | | function imgUnBind(className) { |
| | | $(className).each(function() { |
| | | $(this).unbind('dblclick'); |
| | | }) |
| | | } |
| | | |
| | | function imgMultiBind() { |
| | | $(".multi-images").each(function(index, element) { |
| | | $(this).on("dblclick", function() { |
| | | var imgThumb = $(".multi-images")[index]; |
| | | $(imgThumb).remove(); |
| | | |
| | | var images = $("#thumbs").val(); |
| | | var imagesArr; |
| | | if (images) { |
| | | imagesArr = images.split(","); |
| | | imagesArr.splice(index, 1); |
| | | images = imagesArr.join(","); |
| | | } |
| | | $("#thumbs").val(images); |
| | | |
| | | imgUnBind(".multi-images"); |
| | | imgMultiBind(); |
| | | }); |
| | | }) |
| | | } |
| | | |
| | | //图片上传 |
| | | upload.render({ |
| | | elem: '#test2' |
| | | ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口 |
| | |
| | | ,before: function(obj){ |
| | | //预读本地文件示例,不支持ie8 |
| | | obj.preview(function(index, file, result){ |
| | | $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 100px">') |
| | | if ($("#thumb").val()) { |
| | | $('#demo2').html('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img single-image" style="width: 130px">') |
| | | } else { |
| | | $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img single-image" style="width: 130px">') |
| | | } |
| | | |
| | | }); |
| | | } |
| | | ,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); |
| | | |
| | | imgUnBind(".single-image"); |
| | | imgSingleBind(); |
| | | } |
| | | }); |
| | | |
| | | layedit.set({ //设置图片接口 |
| | | uploadImage: { |
| | | url: 'admin/goods/uploadFileBase64', //接口url |
| | | type: 'post', |
| | | } |
| | | }); |
| | | //创建一个编辑器 |
| | | var index = layedit.build('lay_edit',{ |
| | | height: 300 |
| | | }); |
| | | //提交时把值同步到文本域中 |
| | | form.verify({ |
| | | //content富文本域中的lay-verify值 |
| | | goodsDetails: function(value) { |
| | | return layedit.sync(index); |
| | | } |
| | | }); |
| | | function imgSingleBind() { |
| | | $(".single-image").each(function(index, element) { |
| | | $(this).on("dblclick", function() { |
| | | var imgThumb = $(".single-image")[index]; |
| | | $(imgThumb).remove(); |
| | | $("#thumb").val(""); |
| | | |
| | | $('#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' //改成您自己的上传接口 |
| | | ,done: function(res){ |
| | | febs.alert.success(res.data.src); |
| | | $('#imageUrls' + index).attr('src', res.data.src); |
| | | $('#skuImage'+ index).val(res.data.src); |
| | | } |
| | | }); |
| | | $("#attrWrap").on("click",".del-attr-btn",function(){ |
| | | var index = $(this).attr('data-index') |
| | | $($("#attrWrap").find(".item")[index].remove()); |
| | | }); |
| | | imgUnBind(".single-image"); |
| | | imgSingleBind(); |
| | | }); |
| | | }) |
| | | } |
| | | |
| | | 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() |
| | | }) |
| | | data.field.goodsType = 1; |
| | | let couponRuleList = couponRule.getValue(); |
| | | if (couponRuleList.length > 0) { |
| | | var couponIds = []; |
| | | layui.each(couponRuleList, function (key, item) { |
| | | couponIds.push(item.id) |
| | | }); |
| | | data.field.couponIds=couponIds; |
| | | } |
| | | // if(skuArr.length < 0){ |
| | | // febs.alert.warn("请填写商品规格"); |
| | | // return false; |
| | | // } |
| | | // console.log(skuArrs) |
| | | data.field.addMallGoodsSkuDtos = skuArrs; |
| | | // console.log(data.field) |
| | | data.field.addMallGoodsSkuDtos = tableSkuData; |
| | | data.field.categoryId = category.getValue('valueStr'); |
| | | data.field.carriageRuleId = carriageRule.getValue('valueStr'); |
| | | // let content = layedit.getContent(); |
| | | // alert(content); |
| | | // data.field.goodsDetails = content; |
| | | data.field.goodsDetails = editor.txt.html(); |
| | | $.ajax({ |
| | | 'url':ctx + 'admin/goods/addMallGoods', |
| | | 'type':'post', |
| | |
| | | 'traditional': true,//ajax传递数组必须添加属性 |
| | | 'data':JSON.stringify(data.field), |
| | | 'success':function (data) { |
| | | if(data.code==0){ |
| | | if(data.code==200){ |
| | | layer.closeAll(); |
| | | febs.alert.success(data.message); |
| | | var index = parent.layer.getFrameIndex(window.name); |
| | | parent.layer.close(index); |
| | | $('#febs-goods').find('#reset').click(); |
| | | }else{ |
| | | febs.alert.warn(data.message); |
| | | } |
| | |
| | | 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> |