初始上传
This commit is contained in:
230
app/shop/view/goodscategory/add_category.html
Executable file
230
app/shop/view/goodscategory/add_category.html
Executable file
@@ -0,0 +1,230 @@
|
||||
<style>
|
||||
.layui-input-inline.js-pid a{margin-left: 20px;}
|
||||
.link-url-show{margin-right: 10px}
|
||||
.click-link{height: 34px;line-height: 34px;display: inline-block;white-space: nowrap;text-align: center;border-radius: 2px;cursor: pointer;padding: 0 16px;border: 1px solid #C9C9C9;background-color: #fff;color: #555;}
|
||||
</style>
|
||||
|
||||
<div class="layui-form form-wrap">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>分类名称：</label>
|
||||
<div class="layui-input-block len-long">
|
||||
<input name="category_name" type="text" placeholder="请输入分类名称" maxlength="30" lay-verify="required" class="layui-input" autocomplete="off">
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>分类名称最长不超过30个字符</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="layui-form-item">
|
||||
<label class="layui-form-label">简称：</label>
|
||||
<div class="layui-input-block len-long">
|
||||
<input name="short_name" type="text" placeholder="请输入简称" maxlength="20" class="layui-input" autocomplete="off">
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>分类名过长设置简称方便显示，字数设置为不超过20个字符</p>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">上级分类：</label>
|
||||
<div class="layui-input-block js-pid">
|
||||
<span class="input-text">顶级分类</span>
|
||||
<input type="hidden" name="pid" value="0">
|
||||
<input type="hidden" name="level" value="1">
|
||||
<input type="hidden" name="category_id_1" value="0">
|
||||
<input type="hidden" name="category_id_2" value="0">
|
||||
<a class="text-color" href="javascript:selectedCategoryPopup();">选择分类</a>
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>如果选择上级分类，那么新增的分类则为被选择上级分类的子分类，不选择上级分类默认为顶级分类</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="layui-form-item">
|
||||
<label class="layui-form-label">商品参数：</label>
|
||||
<div class="layui-input-block len-mid">
|
||||
<select name="attr_class_id" lay-filter="attr_class_id">
|
||||
<option value=""></option>
|
||||
{foreach name="$attr_class_list" item="vo"}
|
||||
<option value="{$vo.class_id}">{$vo.class_name}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">分类图片：</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="upload-img-block">
|
||||
<div class="upload-img-box">
|
||||
<div class="upload-default" id="imgUpload">
|
||||
<div class="upload">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div>
|
||||
<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
|
||||
<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
|
||||
</div>
|
||||
|
||||
<div class="replace_img js-replace">点击替换</div>
|
||||
</div>
|
||||
<input type="hidden" name="image">
|
||||
</div>
|
||||
<!-- <p id="imgUpload" class="no-replace">替换</p>
|
||||
<input type="hidden" name="image">
|
||||
<i class="del">x</i> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>建议图片尺寸：不能大于100k。图片格式：jpg、png、jpeg。</p>
|
||||
</div>
|
||||
<a id="imageUploadAction"></a>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">分类广告图：</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="upload-img-block">
|
||||
<div class="upload-img-box">
|
||||
<div class="upload-default" id="imgUploadAdv">
|
||||
<div class="upload">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div>
|
||||
<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
|
||||
<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
|
||||
</div>
|
||||
<div class="replace_img js-replace">点击替换</div>
|
||||
</div>
|
||||
<input type="hidden" name="image_adv" value="">
|
||||
</div>
|
||||
<!-- <p id="imgUploadAdv" class="no-replace">替换</p>
|
||||
<i class="del">x</i> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>该图片只对一级使用, 建议图片尺寸：550px * 250px。图片格式：jpg、png、jpeg。</p>
|
||||
</div>
|
||||
<a id="imageAdvUploadAction"></a>
|
||||
</div>
|
||||
<!-- <div class="layui-form-item">
|
||||
<label class="layui-form-label">是否显示：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="is_show" lay-skin="switch" value="1" checked>
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>用于控制前台是否展示</p>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="layui-form-item link-url-show-wrap">
|
||||
<label class="layui-form-label">广告链接：</label>
|
||||
<div class="layui-input-block">
|
||||
<span class="link-url-show"></span>
|
||||
<input name="link_url" type="hidden" class="layui-input len-long" autocomplete="off">
|
||||
<a class="click-link" onclick="selectedLink()">选择链接</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">关键字：</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="keywords" type="text" placeholder="请输入关键字" class="layui-input len-long" autocomplete="off">
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>用于网站搜索引擎的优化，关键字之间请用英文逗号分隔</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">分类描述：</label>
|
||||
<div class="layui-input-block len-long">
|
||||
<textarea name="description" placeholder="请输入分类描述" class="layui-textarea" maxlength="150"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">分类图标：</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="icon" type="text" placeholder="请输入分类图标类名，示例：iconfont home" class="layui-input len-long" autocomplete="off">
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>通过引用外部文件，实现加载字体图标，示例：iconfont home</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="layui-form-item">
|
||||
<label class="layui-form-label">排序：</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="sort" type="number" value="0" placeholder="请输入排序" lay-verify="num" class="layui-input len-short" autocomplete="off">
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>排序值必须为整数</p>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">是否推荐</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="is_recommend" value="1" title="是">
|
||||
<input type="radio" name="is_recommend" value="0" title="否" checked>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">是否显示</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="is_show" value="0" title="显示" checked="">
|
||||
<input type="radio" name="is_show" value="-1" title="不显示">
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>如果不显示会导致小程序、h5没有该分类以及该分类下的所有商品</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<button class="layui-btn bg-color" lay-submit lay-filter="save">保存</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary" onclick="backGoodsCategoryList()">返回</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="selectedCategory">
|
||||
|
||||
<form class="layui-form">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">一级分类</label>
|
||||
<div class="layui-input-block len-mid">
|
||||
<select name="category_id_1" lay-filter="category_id_1">
|
||||
<option value="0" data-level="0">顶级分类</option>
|
||||
{{# for(var i=0;i<d.category_list_1.length;i++){ }}
|
||||
{{# if(d.category_id_1 ==d.category_list_1[i].category_id){ }}
|
||||
<option value="{{ d.category_list_1[i].category_id }}" data-level="{{d.category_list_1[i].level}}" selected>{{ d.category_list_1[i].category_name }}</option>
|
||||
{{# }else{ }}
|
||||
<option value="{{ d.category_list_1[i].category_id }}" data-level="{{d.category_list_1[i].level}}">{{ d.category_list_1[i].category_name }}</option>
|
||||
{{# } }}
|
||||
{{# } }}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">二级分类</label>
|
||||
<div class="layui-input-block len-mid">
|
||||
<select name="category_id_2" lay-filter="category_id_2"></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row sm">
|
||||
<button class="layui-btn bg-color" lay-submit lay-filter="save_pid">保存</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</script>
|
||||
|
||||
<script src="SHOP_JS/goods_edit_category.js"></script>
|
||||
346
app/shop/view/goodscategory/edit_category.html
Executable file
346
app/shop/view/goodscategory/edit_category.html
Executable file
@@ -0,0 +1,346 @@
|
||||
<style>
|
||||
.js-pid a{
|
||||
margin-left: 20px;
|
||||
}
|
||||
.form-wrap {
|
||||
margin-top: 0;
|
||||
}
|
||||
.link-url-show{margin-right: 10px}
|
||||
.click-link{height: 34px;line-height: 34px;display: inline-block;white-space: nowrap;text-align: center;border-radius: 2px;cursor: pointer;padding: 0 16px;border: 1px solid #C9C9C9;background-color: #fff;color: #555;}
|
||||
.goods-category-list .layui-table td{border-left: 0;border-right: 0;}
|
||||
.goods-category-list .layui-table .switch{font-size: 16px;cursor: pointer;width: 12px;line-height: 1;display: inline-block;text-align: center;vertical-align: middle;}
|
||||
.goods-category-list .layui-table img{width: 40px;}
|
||||
/* 分类样式*/
|
||||
.table_div{color:#666}
|
||||
.table_head{display: flex;font-weight: bold;background-color: #F7F7F7;}
|
||||
.table_head li{height: 50px;line-height: 50px;border: 0;padding: 0 15px;font-size: 14px;font-weight: 400;color: #333;}
|
||||
.table_head .operate{text-align: right;}
|
||||
.table_head li:first-child{padding-right: 0;}
|
||||
.table_tr{display: flex;border-bottom: 1px solid #e6e6e6;background: #fff;align-items: center;}
|
||||
.table_tr .table_td{position: relative;padding: 5px 15px;font-size: 14px;display: flex;align-items: center;}
|
||||
.table_tr .table_td span{cursor: pointer;}
|
||||
.table_tr .table_td span>img{width:12px;height:12px}
|
||||
.table_tr .table_td span>img.rotate{transform:rotate(90deg);}
|
||||
.table_tr .table_td .img-box{width:30px;height:30px;line-height: 30px;}
|
||||
.table_tr .table_td:first-child{padding-right:0}
|
||||
.table_tr .table-btn{display: flex;flex-wrap: wrap;justify-content: flex-end;}
|
||||
.table_tr .layui-btn{display: flex;justify-content: center;align-items: center;height: 23px;border-radius: 50px;background-color: transparent;color: var(--base-color);text-align: center;padding: 2px 0;margin: 5px 0 5px 10px;position: relative;}
|
||||
.table_two_div{display: none;}
|
||||
.table_three{display: none;}
|
||||
.empty_switch{display: inline-block;width:30px;height:25px;padding-right:15px;}
|
||||
.js-switch{display: inline-block;width:30px;text-align: center;}
|
||||
.table_move{float:left;margin-right: 10px;}
|
||||
.table_moves{float:left;margin-right: 10px;}
|
||||
.tables_move{float:left;margin-right: 20px;padding-left: 70px;}
|
||||
.select-category .layui-layer-content{overflow: auto!important;}
|
||||
.table_three .table_td.checkbox{
|
||||
padding-left: 70px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<form class="layui-form form-wrap">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>分类名称：</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="category_name" type="text" value="{$goods_category_info['category_name']}" placeholder="请输入分类名称" maxlength="30" lay-verify="required" class="layui-input len-long" autocomplete="off">
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>分类名称最长不超过30个字符</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="layui-form-item">
|
||||
<label class="layui-form-label">简称：</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="short_name" type="text" value="{$goods_category_info['short_name']}" placeholder="请输入简称" maxlength="20" class="layui-input len-long" autocomplete="off">
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>分类名过长设置简称方便显示，字数设置为不超过20个字符</p>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">上级分类：</label>
|
||||
<div class="layui-input-block len-mid js-pid">
|
||||
{if $goods_category_info['pid'] == 0}
|
||||
<span class="input-text">顶级分类</span>
|
||||
{else/}
|
||||
<span class="input-text">{$goods_category_parent_info['category_name']}</span>
|
||||
{/if}
|
||||
<input type="hidden" name="pid" value="{$goods_category_info['pid']}">
|
||||
<input type="hidden" name="level" value="{$goods_category_info['level']}">
|
||||
<input type="hidden" name="category_id_1" value="{$goods_category_info['category_id_1']}">
|
||||
<input type="hidden" name="category_id_2" value="{$goods_category_info['category_id_2']}">
|
||||
<input type="hidden" name="category_id_3" value="{$goods_category_info['category_id_3']}">
|
||||
<input type="hidden" name="category_name_1" value="">
|
||||
<a class="text-color" href="javascript:selectedCategoryPopup();">选择分类</a>
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
{if $goods_category_info['level'] == 1}
|
||||
<p>注意：顶级分类不能修改</p>
|
||||
{elseif $goods_category_info['level'] == 2}
|
||||
<p>注意：二级分类可以修改一级分类</p>
|
||||
{elseif $goods_category_info['level'] == 3}
|
||||
<p>注意：三级分类可以修改二级分类</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="layui-form-item">
|
||||
<label class="layui-form-label">商品参数：</label>
|
||||
<div class="layui-input-block len-mid">
|
||||
<select name="attr_class_id" lay-filter="attr_class_id">
|
||||
<option value=""></option>
|
||||
{foreach name="$attr_class_list" item="vo"}
|
||||
<option value="{$vo.class_id}" {if $goods_category_info['attr_class_id'] == $vo['class_id']}selected{/if}>{$vo.class_name}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">分类图片：</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="upload-img-block">
|
||||
<div class="upload-img-box {notempty name="$goods_category_info['image']"}hover{/notempty}">
|
||||
<div class="upload-default" id="imgUpload">
|
||||
{notempty name="$goods_category_info['image']"}
|
||||
<div id="preview_imgUpload" class="preview_img">
|
||||
<img layer-src src="{:img($goods_category_info['image'])}" class="img_prev"/>
|
||||
</div>
|
||||
{else/}
|
||||
<div class="upload">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
{/notempty}
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div>
|
||||
<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
|
||||
<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
|
||||
</div>
|
||||
|
||||
<div class="replace_img js-replace">点击替换</div>
|
||||
</div>
|
||||
<input type="hidden" name="image" value="{$goods_category_info['image']}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>建议图片尺寸：不能大于100k。图片格式：jpg、png、jpeg。</p>
|
||||
</div>
|
||||
<a id="imageUploadAction"></a>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">分类广告图：</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="upload-img-block ">
|
||||
<div class="upload-img-box {notempty name="$goods_category_info['image_adv']"} hover {/notempty}" >
|
||||
<div class="upload-default" id="imgUploadAdv">
|
||||
{notempty name="$goods_category_info['image_adv']"}
|
||||
<div id="preview_imgUploadAdv" class="preview_img">
|
||||
<img layer-src src="{:img($goods_category_info['image_adv'])}" class="img_prev"/>
|
||||
</div>
|
||||
{else/}
|
||||
<div class="upload">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
{/notempty}
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div>
|
||||
<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
|
||||
<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
|
||||
</div>
|
||||
|
||||
<div class="replace_img js-replace">点击替换</div>
|
||||
</div>
|
||||
<input type="hidden" name="image_adv" value="{$goods_category_info['image_adv']}">
|
||||
</div>
|
||||
|
||||
<!-- <p id="imgUploadAdv" class=" {if condition="$goods_category_info['image_adv']"} replace {else/} no-replace{/if}">替换</p> -->
|
||||
<!-- <i class="del {if condition="$goods_category_info['image_adv']"}show{/if}">x</i> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>该图片只对一级使用, 建议图片尺寸：550px * 250px。图片格式：jpg、png、jpeg。</p>
|
||||
</div>
|
||||
<a id="imageAdvUploadAction"></a>
|
||||
</div>
|
||||
|
||||
<!-- <div class="layui-form-item">
|
||||
<label class="layui-form-label">是否显示：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="is_show" lay-skin="switch" value="1" {if $goods_category_info['is_show']==1}checked{/if}>
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>用于控制前台是否展示</p>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="layui-form-item link-url-show-wrap">
|
||||
<label class="layui-form-label">广告链接：</label>
|
||||
<div class="layui-input-block">
|
||||
<span class="link-url-show"></span>
|
||||
<input name="link_url" type="hidden" class="layui-input len-long" autocomplete="off" value="{$goods_category_info.link_url}">
|
||||
<a class="click-link" onclick="selectedLink()">选择链接</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">关键字：</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="keywords" type="text" placeholder="请输入关键字" value="{$goods_category_info['keywords']}" class="layui-input len-long" autocomplete="off">
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>用于网站搜索引擎的优化，关键字之间请用英文逗号分隔</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">分类描述：</label>
|
||||
<div class="layui-input-inline len-long">
|
||||
<textarea name="description" placeholder="请输入分类描述" class="layui-textarea" maxlength="150">{$goods_category_info['description']}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">分类图标：</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="icon" type="text" placeholder="请输入分类图标类名，示例：iconfont home" class="layui-input len-long" autocomplete="off" value="{$goods_category_info['icon']}">
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>通过引用外部文件，实现加载字体图标，示例：iconfont home</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="layui-form-item">
|
||||
<label class="layui-form-label">排序：</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="sort" type="number" placeholder="请输入排序" lay-verify="num" class="layui-input len-short" value="{$goods_category_info['sort']}">
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>排序值只能为整数</p>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">是否推荐</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="is_recommend" value="1" title="是" {if $goods_category_info['is_recommend'] == 1} checked {/if}>
|
||||
<input type="radio" name="is_recommend" value="0" title="否" {if $goods_category_info['is_recommend'] == 0} checked {/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">是否显示</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="is_show" value="0" title="显示" {if $goods_category_info['is_show'] == 0} checked="" {/if}>
|
||||
<input type="radio" name="is_show" value="-1" title="不显示" {if $goods_category_info['is_show'] == -1} checked="" {/if}>
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>如果不显示会导致小程序、h5没有该分类以及该分类下的所有商品</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" id="category_id" name="category_id" value="{$goods_category_info['category_id']}">
|
||||
<input type="hidden" name="category_full_name" value="{$goods_category_info['category_full_name']}">
|
||||
|
||||
<div class="form-row">
|
||||
<button class="layui-btn" lay-submit lay-filter="save">保存</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary" onclick="backGoodsCategoryList()">返回</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script type="text/html" id="selectedCategory">
|
||||
<div class="goods-category-list layui-form">
|
||||
<div class="table_div" >
|
||||
<ul class="table_head">
|
||||
<li style="width:60px"></li>
|
||||
<li style="flex:6">分类名称</li>
|
||||
<li style="flex:2">是否显示</li>
|
||||
</ul>
|
||||
<div class="table_body">
|
||||
{if condition="$list"}
|
||||
{foreach name="$list" item="vo" key="index"}
|
||||
<li class="table_one" data-index="{$index}" data-sort="{$vo['sort']}" data-cateid="{$vo['category_id']}">
|
||||
<div class="table_tr">
|
||||
<div class="table_td" style="width:60px">
|
||||
<div class="table_move">
|
||||
<input type="checkbox" name="category_id" title="" lay-skin="primary" data-name="{$vo['category_name']}" value="{$vo['category_id']}" data-category-id="{$vo['category_id']}" data-level="{$vo['level']}" data-open="0" lay-filter="category">
|
||||
</div>
|
||||
{notempty name="$vo['child_list']"}
|
||||
<span class="switch text-color js-switch" data-category-id="{$vo['category_id']}" data-level="{$vo['level']}" data-open="0">+</span>
|
||||
{/notempty}
|
||||
</div>
|
||||
<div class="table_td" style="flex:6">{$vo['category_name']}</div>
|
||||
|
||||
<div class="table_td" style="flex:2">
|
||||
{if $vo['is_show'] == 0} 显示 {else /} 不显示 {/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{notempty name="$vo['child_list']"}
|
||||
<div class="table_two_div">
|
||||
{foreach name="$vo['child_list']" item="second"}
|
||||
|
||||
<div class="table_two" data-index="{$index}" data-sort="{$second['sort']}" data-cateid="{$second['category_id']}">
|
||||
|
||||
<div class="table_tr">
|
||||
<div class="table_td" style="width: 36px">
|
||||
</div>
|
||||
<div class="table_td" style="flex:6.4">
|
||||
<div class="table_move">
|
||||
<input type="checkbox" name="category_id" title="" lay-skin="primary" value="{$second['category_id']}" data-category-id="{$second['category_id']}" data-level="{$second['level']}" data-open="0" data-name="{$second['category_name']}" lay-filter="category">
|
||||
</div>
|
||||
<!-- <span class="switch text-color empty_switch" > </span>-->
|
||||
<span>{$second['category_name']}</span>
|
||||
</div>
|
||||
|
||||
<div class="table_td" style="flex:2">
|
||||
{if $second['is_show'] == 0} 显示 {else /} 不显示 {/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{notempty name="$second['child_list']"}
|
||||
|
||||
<div class="table_three layui-hide">
|
||||
{foreach name="$second['child_list']" item="third"}
|
||||
<div class="table_tr table_three_tr" data-sort="{$third['sort']}" data-cateid="{$third['category_id']}">
|
||||
<div class="table_td" style="width: 36px">
|
||||
</div>
|
||||
<div class="table_td checkbox" style="flex:5.5">
|
||||
<input type="checkbox" name="category_id" title="" lay-skin="primary" data-name="{$third['category_name']}" value="{$third['category_id']}" data-category-id="{$third['category_id']}" data-level="{$third['level']}" data-open="0">
|
||||
<div>{$third['category_name']}</div>
|
||||
</div>
|
||||
|
||||
<div class="table_td" style="flex:2">
|
||||
{if $third['is_show'] == 0} 显示 {else /} 不显示 {/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/foreach}
|
||||
|
||||
</div>
|
||||
{/notempty}
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
{/notempty}
|
||||
</li>
|
||||
|
||||
{/foreach}
|
||||
{else/}
|
||||
<div class="table_tr">
|
||||
<div class="table_td" style="flex:1;text-align: center;">暂无数据</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script src="SHOP_JS/goods_edit_category.js"></script>
|
||||
372
app/shop/view/goodscategory/lists.html
Executable file
372
app/shop/view/goodscategory/lists.html
Executable file
@@ -0,0 +1,372 @@
|
||||
<style>
|
||||
.table_body{font-family: arial;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
|
||||
.goods-category-list .layui-table td{border-left: 0;border-right: 0;}
|
||||
.goods-category-list .layui-table .switch{font-size: 16px;cursor: pointer;width: 12px;line-height: 1;display: inline-block;text-align: center;vertical-align: middle;}
|
||||
.goods-category-list .layui-table img{width: 40px;}
|
||||
/* 分类样式*/
|
||||
.table_div{color:#666}
|
||||
.table_head{display: flex;font-weight: bold;background-color: #F7F7F7;}
|
||||
.table_head li{height: 50px;line-height: 50px;border: 0;padding: 0 15px;font-size: 14px;font-weight: 400;color: #333;}
|
||||
.table_head .operate{text-align: right;}
|
||||
.table_head li:first-child{padding-right: 0;}
|
||||
.table_tr{display: flex;border-bottom: 1px solid #e6e6e6;background: #fff;align-items: center;}
|
||||
.table_tr .table_td{position: relative;padding: 5px 15px;font-size: 14px;}
|
||||
.table_tr .table_td span{cursor: pointer;}
|
||||
.table_tr .table_td span>img{width:12px;height:12px}
|
||||
.table_tr .table_td span>img.rotate{transform:rotate(90deg);}
|
||||
.table_tr .table_td .img-box{width:30px;height:30px;line-height: 30px;}
|
||||
.table_tr .table_td:first-child{padding-right:0}
|
||||
.table_tr .table-btn{display: flex;flex-wrap: wrap;justify-content: flex-end;}
|
||||
.table_tr .layui-btn{display: flex;justify-content: center;align-items: center;height: 23px;border-radius: 50px;background-color: transparent;color: var(--base-color);text-align: center;padding: 2px 0;margin: 5px 0 5px 10px;position: relative;}
|
||||
.table_two_div{display: none;}
|
||||
.table_three{display: none;}
|
||||
.empty_switch{display: inline-block;width:30px;height:25px;padding-right:15px;}
|
||||
.js-switch{display: inline-block;height:30px;width:30px;text-align: center;line-height: 30px;}
|
||||
.table_move{cursor: move;float:left;margin-right: 10px;line-height: 30px;}
|
||||
.table_moves{cursor: move;float:left;margin-right: 10px;}
|
||||
.tables_move{cursor: move;float:left;margin-right: 20px;padding-left: 70px;}
|
||||
</style>
|
||||
|
||||
<div class="single-filter-box">
|
||||
<button class="layui-btn" onclick="addCategory()">添加商品分类</button>
|
||||
</div>
|
||||
|
||||
<div class="goods-category-list">
|
||||
<div class="table_div" >
|
||||
<ul class="table_head">
|
||||
<li style="width:60px"></li>
|
||||
<li style="flex:6">分类名称</li>
|
||||
<li style="flex:2">图片</li>
|
||||
<!-- <li style="flex:2">排序</li> -->
|
||||
<li style="flex:2">是否显示</li>
|
||||
<li class="operate" style="flex:2">操作</li>
|
||||
</ul>
|
||||
<div class="table_body">
|
||||
{if condition="$list"}
|
||||
{foreach name="$list" item="vo" key="index"}
|
||||
<li class="table_one" data-index="{$index}" data-sort="{$vo['sort']}" data-cateid="{$vo['category_id']}">
|
||||
<div class="table_tr">
|
||||
<div class="table_td" style="width:60px">
|
||||
<div class="table_move iconfont icontuodong"></div>
|
||||
{notempty name="$vo['child_list']"}
|
||||
<span class="switch text-color js-switch" data-category-id="{$vo['category_id']}" data-level="{$vo['level']}" data-open="0">+</span>
|
||||
{/notempty}
|
||||
</div>
|
||||
<div class="table_td" style="flex:6">{$vo['category_name']}</div>
|
||||
<div class="table_td" style="flex:2">
|
||||
{notempty name="$vo['image']"}
|
||||
<div class="img-box">
|
||||
<img layer-src src="{:img($vo['image'])}"/>
|
||||
</div>
|
||||
{/notempty}
|
||||
</div>
|
||||
<!-- <div class="table_td" style="flex:2">
|
||||
<input type="number" class="layui-input len-short" value="{$vo['sort']}" onchange="editSort('{$vo.category_id}')" id="category_sort{$vo.category_id}">
|
||||
</div> -->
|
||||
<div class="table_td layui-form" style="flex:2">
|
||||
<input type="checkbox" name="is_show" value="{$vo['category_id']}" lay-skin="switch" lay-text="" lay-filter="is_show" {if $vo['is_show'] == 0} checked {/if}>
|
||||
</div>
|
||||
<div class="table_td" style="flex:2">
|
||||
<div class="table-btn">
|
||||
<a class="layui-btn" href="{:href_url('shop/goodscategory/editcategory',['category_id'=>$vo['category_id']])}">编辑</a>
|
||||
<a class="layui-btn" href="javascript:deleteCategory({$vo['category_id']});">删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{notempty name="$vo['child_list']"}
|
||||
<div class="table_two_div">
|
||||
{foreach name="$vo['child_list']" item="second"}
|
||||
|
||||
<div class="table_two" data-index="{$index}" data-sort="{$second['sort']}" data-cateid="{$second['category_id']}">
|
||||
|
||||
<div class="table_tr">
|
||||
<div class="table_td" style="width: 36px"></div>
|
||||
<div class="table_td" style="flex:6.2">
|
||||
<div class="table_moves iconfont icontuodong"></div>
|
||||
{notempty name="$second['child_list']"}
|
||||
<span class="switch text-color js-switch" data-category-id="{$second['category_id']}" data-level="{$second['level']}" data-open="0" style="padding-right: 15px;">
|
||||
+
|
||||
</span>
|
||||
{else /}
|
||||
<span class="switch text-color empty_switch" > </span>
|
||||
{/notempty}
|
||||
<span>{$second['category_name']}</span>
|
||||
</div>
|
||||
<div class="table_td" style="flex:2">
|
||||
{notempty name="$second['image']"}
|
||||
<div class="img-box">
|
||||
<img layer-src src="{:img($second['image'])}"/>
|
||||
</div>
|
||||
{/notempty}
|
||||
</div>
|
||||
<!-- <div class="table_td" style="flex:2">
|
||||
<input type="number" class="layui-input len-short" value="{$second['sort']}" onchange="editSort('{$second.category_id}')" id="category_sort{$second.category_id}">
|
||||
</div> -->
|
||||
<!-- <div class="table_td" style="flex:2">-->
|
||||
<!-- {if $second['is_show'] == 0} 显示 {else /} 隐藏 {/if}-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="table_td layui-form" style="flex:2">
|
||||
<input type="checkbox" name="is_show" value="{$second['category_id']}" lay-skin="switch" lay-text="" lay-filter="is_show" {if $second['is_show'] == 0} checked {/if}>
|
||||
</div>
|
||||
|
||||
<div class="table_td" style="flex:2">
|
||||
<div class="table-btn">
|
||||
<a class="layui-btn" href="{:href_url('shop/goodscategory/editcategory',['category_id'=>$second['category_id']])}">编辑</a>
|
||||
<a class="layui-btn" href="javascript:deleteCategory({$second['category_id']});">删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{notempty name="$second['child_list']"}
|
||||
|
||||
<div class="table_three">
|
||||
{foreach name="$second['child_list']" item="third"}
|
||||
<div class="table_tr table_three_tr" data-sort="{$third['sort']}" data-cateid="{$third['category_id']}">
|
||||
<div class="table_td" style="width: 36px"></div>
|
||||
<div class="table_td" style="flex:6.2">
|
||||
<div class="tables_move iconfont icontuodong"></div>
|
||||
<div>{$third['category_name']}</div>
|
||||
</div>
|
||||
<div class="table_td" style="flex:2">
|
||||
{notempty name="$third['image']"}
|
||||
<div class="img-box">
|
||||
<img layer-src src="{:img($third['image'])}"/>
|
||||
</div>
|
||||
{/notempty}
|
||||
</div>
|
||||
<!-- <div class="table_td" style="flex:2">
|
||||
<input type="number" class="layui-input len-short" value="{$second['sort']}" onchange="editSort('{$second.category_id}')" id="category_sort{$second.category_id}">
|
||||
</div> -->
|
||||
<!-- <div class="table_td" style="flex:2">-->
|
||||
<!-- {if $third['is_show'] == 0} 显示 {else /} 隐藏 {/if}-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="table_td layui-form" style="flex:2">
|
||||
<input type="checkbox" name="is_show" value="{$third['category_id']}" lay-skin="switch" lay-text="" lay-filter="is_show" {if $third['is_show'] == 0} checked {/if}>
|
||||
</div>
|
||||
|
||||
<div class="table_td" style="flex:2">
|
||||
<div class="table-btn">
|
||||
<a class="layui-btn" href="{:href_url('shop/goodscategory/editcategory',['category_id'=>$third['category_id']])}">编辑</a>
|
||||
<a class="layui-btn" href="javascript:deleteCategory({$third['category_id']});">删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/foreach}
|
||||
|
||||
</div>
|
||||
{/notempty}
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
{/notempty}
|
||||
</li>
|
||||
|
||||
{/foreach}
|
||||
{else/}
|
||||
<div class="table_tr">
|
||||
<div class="table_td" style="flex:1;text-align: center;">暂无数据</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="STATIC_EXT/drag-arrange.js"></script>
|
||||
<script src="STATIC_EXT/diyview/js/ddsort.js"></script>
|
||||
<script>
|
||||
|
||||
var form;
|
||||
layui.use(['form'], function(){
|
||||
|
||||
form = layui.form;
|
||||
form.on('switch(is_show)', function(data){
|
||||
|
||||
$.ajax({
|
||||
url: ns.url("shop/goodscategory/modifyShow"),
|
||||
data: {id:data.value,is_show:data.elem.checked ? 0 : -1},
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
async: false,
|
||||
success: function (res) {
|
||||
layer.msg(res.message);
|
||||
}
|
||||
});
|
||||
|
||||
console.log(data.elem); // 获取当前 checkbox 的 DOM 对象
|
||||
console.log(data.elem.checked); // 获取当前 checkbox 的选中状态，true 或 false
|
||||
console.log(data.value); // 获取当前 checkbox 的 value 值，即 name 属性的值或者自定义的 value 值（如果有的话）
|
||||
console.log(data.othis); // 获取当前 checkbox 的 jQuery 对象
|
||||
});
|
||||
form.render();
|
||||
});
|
||||
|
||||
$(function() {
|
||||
var tempPos = '';
|
||||
$('li').arrangeable({
|
||||
dragSelector: '.table_move',
|
||||
callback:function(e){
|
||||
var temparr = [];
|
||||
$('.table_one').each(function(index,item){
|
||||
var tempObj = {};
|
||||
tempObj.category_id = item.getAttribute('data-cateid');
|
||||
tempObj.sort = index;
|
||||
temparr.push(tempObj)
|
||||
})
|
||||
setTimeout(function(){
|
||||
$.ajax({
|
||||
url: ns.url("shop/goodscategory/modifySort"),
|
||||
data: {category_sort_array : JSON.stringify(temparr)},
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
async: false,
|
||||
success: function (res) {
|
||||
layer.msg(res.message);
|
||||
}
|
||||
});
|
||||
},100);
|
||||
}
|
||||
});
|
||||
$('.table_two').arrangeable({
|
||||
dragSelector: '.table_moves',
|
||||
callback:function(e){
|
||||
var temparrs = [];
|
||||
$('.table_two').each(function(index,item){
|
||||
var tempObjs = {};
|
||||
tempObjs.category_id = item.getAttribute('data-cateid');
|
||||
tempObjs.sort = index;
|
||||
temparrs.push(tempObjs)
|
||||
})
|
||||
setTimeout(function(){
|
||||
$.ajax({
|
||||
url: ns.url("shop/goodscategory/modifySort"),
|
||||
data: {category_sort_array : JSON.stringify(temparrs)},
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
async: false,
|
||||
success: function (res) {
|
||||
layer.msg(res.message);
|
||||
}
|
||||
});
|
||||
},100);
|
||||
}
|
||||
});
|
||||
$('.table_three_tr').arrangeable({
|
||||
dragSelector: '.tables_move',
|
||||
callback:function(e){
|
||||
var temparres = [];
|
||||
$('.table_three_tr').each(function(index,item){
|
||||
var tempObjes = {};
|
||||
tempObjes.category_id = item.getAttribute('data-cateid');
|
||||
tempObjes.sort = index;
|
||||
temparres.push(tempObjes)
|
||||
})
|
||||
setTimeout(function(){
|
||||
$.ajax({
|
||||
url: ns.url("shop/goodscategory/modifySort"),
|
||||
data: {category_sort_array : JSON.stringify(temparres)},
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
async: false,
|
||||
success: function (res) {
|
||||
layer.msg(res.message);
|
||||
}
|
||||
});
|
||||
},100);
|
||||
}
|
||||
});
|
||||
});
|
||||
// var tempPos = '';
|
||||
// bindDragSort('.table_body' ,'.table_one');
|
||||
// bindDragSort('.table_two_div' ,'.table_two');
|
||||
// bindDragSort('.table_three' ,'.table_tr');
|
||||
// function bindDragSort(paremtElem,childElem){
|
||||
// $(paremtElem ).DDSort({
|
||||
// target: childElem,
|
||||
// floatStyle: {
|
||||
// 'border': '1px solid #ccc',
|
||||
// 'background-color': '#fff'
|
||||
// },
|
||||
// down:function(e){
|
||||
// tempPos = $(this).data('sort');
|
||||
// },
|
||||
// up:function(e){
|
||||
// var index = $(this).index(),self = $(this);
|
||||
// if(index != tempPos){
|
||||
// var temparr = [];
|
||||
// $(childElem).each(function(index,item){
|
||||
// var tempObj = {};
|
||||
// tempObj.category_id = item.getAttribute('data-cateid');
|
||||
// tempObj.sort = index;
|
||||
// temparr.push(tempObj)
|
||||
// })
|
||||
// setTimeout(function(){
|
||||
// $.ajax({
|
||||
// url: ns.url("shop/goodscategory/modifySort"),
|
||||
// data: {category_sort_array : JSON.stringify(temparr)},
|
||||
// dataType: 'JSON',
|
||||
// type: 'POST',
|
||||
// async: false,
|
||||
// success: function (res) {
|
||||
// self.data('sort',index)
|
||||
// layer.msg(res.message);
|
||||
// }
|
||||
// });
|
||||
// },100);
|
||||
// }
|
||||
//
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
$(function () {
|
||||
loadImgMagnify(); //图片放大
|
||||
|
||||
//展开收齐点击事件
|
||||
$(".js-switch").click(function (event) {
|
||||
event.stopPropagation();
|
||||
var category_id = $(this).attr("data-category-id");
|
||||
var level = $(this).attr("data-level");
|
||||
var open = parseInt($(this).attr("data-open").toString());
|
||||
if(open){
|
||||
$(".goods-category-list .layui-table tr[data-category-id-"+ level+"='" + category_id + "']").hide();
|
||||
// $(this).children("img").removeClass('rotate');
|
||||
$(this).text("+");
|
||||
if(level == 1) $(this).parents('.table_tr').siblings('.table_two_div').hide();
|
||||
else if(level == 2) $(this).parents('.table_tr').siblings('.table_three').hide();
|
||||
|
||||
}else{
|
||||
$(".goods-category-list .layui-table tr[data-category-id-"+ level+"='" + category_id + "']").show();
|
||||
$(this).text("-");
|
||||
// $(this).children("img").addClass('rotate');
|
||||
if(level == 1) $(this).parents('.table_tr').siblings('.table_two_div').show();
|
||||
else if(level == 2) $(this).parents('.table_tr').siblings('.table_three').show();
|
||||
|
||||
}
|
||||
$(this).attr("data-open", (open ? 0 : 1));
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
function deleteCategory(category_id) {
|
||||
layer.confirm('子级分类也会删除，请谨慎操作', function(index) {
|
||||
layer.close(index);
|
||||
$.ajax({
|
||||
url: ns.url("shop/goodscategory/deleteCategory"),
|
||||
data: {category_id : category_id},
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
async: false,
|
||||
success: function (res) {
|
||||
layer.msg(res.message);
|
||||
if (res.code == 0) {
|
||||
listenerHash(); // 刷新页面
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
function addCategory() {
|
||||
location.hash = ns.hash("shop/goodscategory/addcategory");
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user