layui table 分页 记住之前勾选的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加商品</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" type="text/css" href="../common/layui/css/layui.css" media="all"> <link rel="stylesheet" type="text/css" href="../common/bootstrap/css/bootstrap.css" media="all"> <link rel="stylesheet" type="text/css" href="../common/font/iconfont.css" media="all"> <link rel="stylesheet" type="text/css" href="../css/pages.css" media="all"> <style type="text/css"> .clear { clear: both; height: 0; line-height: 0; font-size: 0; overflow: hidden; } .top_title { margin-bottom: 20px; line-height: 45px; font-size: 20px; font-weight: 600; color: #33A7FD; border-bottom: 1px solid #eee; } .layui-input-block .form_text { padding: 0; margin: 0; line-height: 1.8em; font-size: 14px; color: #999; } label.layui-form-label { width: 145px !important; font-size: 18px !important; padding: 8px; } .layui-input-block { margin-left: 145px; font-size: 18px; } .vis_hid { visibility: hidden; } .layui-tab-item { padding: 20px 20px 20px 10px; background-color: #F7F7F7; } .layui-input { font-size: 16px; } .layui-input:hover { border-color: #33A7FD; } input.layui-input[disabled="disabled"], .input_disabled { border: 0 !important; background: #eeeeee !important; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; } input[type="number"] { -moz-appearance: textfield; } @media only screen and (max-width:1600px) { #form_data { width: 100%; } } /* 商品头部 选项卡切换 */ .pro_top_tab { position: relative; left: 0; height: 40px; margin-top: 0; margin-bottom: 10px; border-bottom: 1px solid #e6e6e6; white-space: nowrap; font-size: 0; transition: all .2s; -webkit-transition: all .2s; } .pro_top_tab li { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; font-size: 14px; transition: all .2s; -webkit-transition: all .2s; position: relative; line-height: 40px; min-width: 65px; padding: 0 15px; text-align: center; cursor: pointer; } .pro_top_tab li a { display: block } .pro_top_tab .tab_this { color: #1E9FFF; font-weight: 600; border-color: #1E9FFF; } .pro_top_tab .tab_this:after { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 41px; border-bottom: 2px solid #1E9FFF; border-radius: 2px 2px 0 0; box-sizing: border-box; pointer-events: none } /* 商品名称 */ .pro_add_unit {} .pro_add_unit>.layui-input { width: 65%; } .pro_add_unit .unit_box { width: 25%; min-width: 180px; height: 38px; position: absolute; right: 0px; top: 0px; } /* 选择商品分类 */ .choose_box { position: relative; } .choose_box .choose_inline { min-width: 80px; height: 38px; position: absolute; right: -2px; top: 0px; } .choose_box .choose_inline .choose_button { display: inline-block; height: 38px; line-height: 38px; padding: 0 18px; margin: 0; background-color: #33A7FD; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border: none; border-radius: 3px; cursor: pointer; } /* 商品价格 */ .pro_price { height: 41px; border: 1px solid #e6e6e6; border-radius: 3px; } .pro_price {} .pro_price .layui-input { width: 100%; float: left; border: 0; color: #888; text-indent: 1em; } .pro_price .pro_price_unit { float: left; display: inline-block; width: 16.6%; line-height: 38px; margin: 0; background-color: #f9f9f9; border: 1px solid #e6e6e6; border-radius: 3px; text-align: center; font-size: 14px; } /* 商品图片 */ .banner_file { position: relative; } .banner_file .banner_inline { min-width: 80px; height: 38px; position: absolute; right: -2px; top: 0px; } .banner_file .banner_inline .button_tb { display: inline-block; height: 38px; line-height: 38px; padding: 0 18px; margin: 0; background-color: #33A7FD; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border: none; cursor: pointer; } #file_img_list { overflow: hidden; } #file_img_list .file_img { float: left; margin-right: 45px; } .banner_file .file_img { width: 274px; height: 150px; border: 1px solid #ccc; margin-right: 30px; margin-top: 20px; background: #FFFFFF url(../images/file_img.png) no-repeat center; position: relative; text-align: center; } .banner_file .file_img img, .banner_file .file_img video { max-width: 100%; height: 100%; } .banner_file .file_img .file_exit { padding: 0; margin: 0; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 24px; position: absolute; top: -1px; right: -30px; cursor: pointer; border: 1px solid #ccc; } .banner_file .file_img_tishi { height: 40px; line-height: 40px; font-size: 14px; color: #999; } #file_video { width: 366px; height: 200px; } /* 商品销量 */ .pro_sales { position: relative; } .pro_sales .layui-input { width: 50%; float: left; color: #888; text-indent: 0.3em; } .pro_sales .pro_sales_unit { float: left; display: inline-block; width: 50px; line-height: 38px; margin: 0 0 0 30px; background-color: #fafafa; border: 1px solid #e6e6e6; border-radius: 3px; text-align: center; font-size: 14px; } /* 商品状态选择 / 商品标签选择 */ .ifon_checkbox_choose { display: inline-block; vertical-align: middle; position: relative; height: 30px; line-height: 30px; margin-right: 10px; margin-top: 4px; padding-right: 30px; cursor: pointer; background-color: #fff; font-size: 0; -webkit-transition: .1s linear; transition: .1s linear; box-sizing: border-box; } .ifon_checkbox_choose span { display: inline-block; vertical-align: middle; padding: 0 10px; height: 100%; border-radius: 2px 0 0 2px; background-color: #d2d2d2; color: #fff; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .ifon_checkbox_choose i { display: inline-block; vertical-align: middle; position: absolute; right: 0; top: 0; width: 30px; height: 30px; border: 1px solid #d2d2d2; border-left: none; border-radius: 0 2px 2px 0; color: #fff; font-size: 20px; text-align: center; } .ifon_checkbox_choose:hover i { border-color: #c2c2c2; color: #c2c2c2; } .ifon_checkbox_choose:hover span { background-color: #c2c2c2; } .ifon_checked span, .ifon_checked:hover span { background-color: #1E9FFF; } .ifon_checked i, .ifon_checked:hover i { color: #1E9FFF; border-color: #1E9FFF; } /* 重量 */ .pro_weight_box { position: relative; } .pro_weight_box .pro_weight { width: 50px; height: 36px; line-height: 36px; background-color: #fafafa; border: 1px solid #e6e6e6; text-align: center; font-size: 14px; position: absolute; right: 1px; top: 1px; } /* 添加规格 */ /* 是否启用添加规格 和是否启用优惠券 */ .guige_box, .state_box {} .guige_box .guige_checked, .state_box .state_checked { display: inline-block; margin-top: 4px; padding-left: 26px; position: relative; height: 30px; line-height: 30px; cursor: pointer; -webkit-transition: .1s linear; transition: .1s linear; box-sizing: border-box; } .guige_box .guige_checked span, .state_box .state_checked span { display: inline-block; padding: 0 10px; height: 100%; font-size: 18px; border-radius: 3px; color: #999; overflow: hidden; } .guige_box .guige_checked i, .state_box .state_checked i { position: absolute; left: 0; top: 0; width: 25px; height: 25px; line-height: 25px; margin-top: 2px; border: 1px solid #d2d2d2; border-radius: 3px; color: #fff; font-size: 18px; text-align: center; } .guige_box .guige_click span, .state_box .state_click span { font-weight: 500; color: #1E9FFF; } .guige_box .guige_click i, .state_box .state_click i { border-color: #1E9FFF; color: #1E9FFF; } #guige_div { display: none; } .pro_guige {} .pro_guige .guige_text { border: 1px solid #ccc; padding: 8px; margin: 10px 0; position: relative; } .pro_guige .guige_inline { min-width: 80px; height: 38px; position: absolute; right: 8px; top: 8px; } .pro_guige .guige_inline .button_tb { float: right; display: inline-block; height: 38px; line-height: 38px; padding: 0 18px; margin: 0; background-color: #33A7FD; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border: none; cursor: pointer; } .pro_guige .guige_inline .guige_exit { float: right; padding: 0; margin: 0; width: 38px; height: 38px; line-height: 38px; background-color: #EB6160; color: #fff; text-align: center; font-size: 24px; cursor: pointer; } .pro_guige .guige_list { margin: 15px; } .pro_guige .guige_list li { display: inline-block; width: 295px; height: 38px; line-height: 38px; border: 1px solid #e6e6e6; background-color: #fff; border-radius: 3px; margin: 10px; } .pro_guige .guige_list li input { float: left; width: 180px; height: 36px; padding-left: 10px; border: 0; } .pro_guige .guige_list li .input_guige_checkbox { float: left; width: 38px; height: 100%; border-right: 1px solid #e6e6e6; text-align: center; } .pro_guige .guige_list li .input_guige_checkbox i { font-size: 16px; border: 1px solid #e6e6e6; } .pro_guige .guige_list li .input_guige_click i { color: #fff; border-color: #33A7FD; background-color: #33A7FD; } .pro_guige .guige_list li .input_guige_exit, .pro_guige .guige_list li .input_guige_mobile { float: right; padding: 0; margin: 0; width: 35px; height: 100%; border-left: 1px solid #e6e6e6; text-align: center; cursor: pointer; -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; } .pro_guige .guige_list li .input_guige_exit { font-size: 26px; } .pro_guige .guige_list li .input_guige_mobile {} /* 参数 */ #pro_canshu_list { position: relative; } .pro_canshu { font-size: 16px; height: 38px; line-height: 38px; margin-bottom: 18px; position: relative; } .pro_canshu .canshu_left { width: 150px; height: 100%; float: left; margin-right: 45px; } .pro_canshu .canshu_left input { width: 100%; } .pro_canshu .canshu_right {} .pro_canshu .canshu_exit, .pro_canshu .canshu_mobile { float: left; margin-left: 60px; text-align: center; cursor: pointer; -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; } .pro_canshu .canshu_exit { width: 38px; height: 38px; border: 2px solid #dedede; font-size: 24px; } .pro_canshu .canshu_mobile { display: inline-block; padding: 0px 15px; border: 1px solid #dedede; font-size: 14px; } .pro_canshu input { width: 50%; height: 38px; float: left; } .pro_buttom { display: inline-block; height: 38px; line-height: 38px; padding: 0 18px; margin: 0 3px; background-color: #33A7FD; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border: none; border-radius: 5px; cursor: pointer; outline: 0; -webkit-appearance: none; transition: all .3s; -webkit-transition: all .3s; box-sizing: border-box; } .pro_buttom:hover { opacity: 0.8; filter: alpha(opacity=80); color: #fff; } .pro_time { width: 350px; font-size: 15px; } /* 优惠额度 */ /* .pro_preferential {padding:0 50px 0 65px; width:350px; height:40px; border:1px solid #e6e6e6; border-radius:3px; position: relative; } .pro_preferential .layui-input{ border:0; color:#888; } .pro_preferential .preferential_box ,.pro_preferential .pro_weight{ height: 38px; line-height:38px; background-color:#fafafa; border:1px solid #e6e6e6; text-align: center; font-size: 14px; position:absolute; top:0px; } .pro_preferential .preferential_box{width:65px; left:0px; } .pro_preferential .pro_weight{width:50px; right:0px; } */ /* 获取积分 */ .pro_jifen {} .pro_jifen dd { float: left; width: 180px; height: 38px; line-height: 38px; margin-right: 30px; font-size: 16px; } .pro_jifen dd .canshu_exit, .pro_jifen dd .hy_canshu_exit { width: 38px; height: 38px; margin: 0; border: 5px; border: 1px solid #dedede; line-height: 38px; text-align: center; font-size: 24px; cursor: pointer; } .form_select { position: relative; } .form_select_title .layui-input { padding-right: 30px; cursor: pointer; } .form_select_title .layui-edge { position: absolute; right: 10px; top: 50%; margin-top: -3px; cursor: pointer; border-width: 6px; border-top-color: #c2c2c2; border-top-style: solid; transition: all .3s; -webkit-transition: all .3s; } .form_select_click .layui-edge { margin-top: -9px\0/IE9; margin-top: -9px; -webkit-transform: rotate(180deg); transform: rotate(180deg); margin-top: -3px\9; } .form_select_upbit { display: none; position: absolute; left: 0; top: 42px; z-index: 899; padding: 5px 0; min-width: 100%; max-height: 300px; border: 1px solid #d2d2d2; overflow-y: auto; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); box-sizing: border-box; -webkit-animation-name: layui-upbit; animation-name: layui-upbit; -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .form_select_upbit li { cursor: pointer; padding: 0 10px; line-height: 36px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .form_select_upbit li:hover { background-color: #f2f2f2; -webkit-transition: .5s all; transition: .5s all; } .form_select_upbit .select_tips { color: #999; } .form_select_upbit .select_this, .form_select_upbit .select_this:hover { background-color: #1E9FFF; color: #fff; } .jifen_box { /* overflow: hidden; */ } .pro_jifen_box { margin-bottom: 20px; } .pro_jifen_box .jifen_box_title { float: left; display: block; width: 245px; padding: 8px; line-height: 20px; font-size: 18px; font-weight: 400; text-align: right; } .pro_jifen_box .jifen_box_form { float: left; display: block; margin-left: 10px; } /* 弹窗样式 */ #details_layer { z-index: 888; width: 100%; min-width: 500px; position: fixed; top: 0; left: 0; visibility: hidden; background-color: rgba(0, 0, 0, 0.2); } #details_layer .details_export { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; z-index: 889; width: 60%; min-height: 360px; overflow: auto; position: absolute; top: 40%; left: 50%; margin: -180px 0 0 -30%; padding: 20px 20px 85px 20px; background-color: #fff; border-radius: 5px; } #details_layer .layer_top { height: 35px; line-height: 35px; padding-left: 10px; border-left: 4px solid #33A7FD; font-size: 18px; } #details_layer .layer_top span { padding: 0px 8px; color: #33A7FD; } #details_layer .tc_button { width: 100%; height: 70px; padding-top: 15px; text-align: center; font-size: 16px; background-color: #fff; position: absolute; left: 0; bottom: 0px; } #details_layer .tc_button button { display: inline-block; width: 100px; height: 40px; line-height: 40px; text-align: center; border-radius: 5px; border: 0; } #details_layer #tc_determine { background-color: #33A7FD; color: #fff; margin-right: 10%; } #details_layer #tc_cancel {} .details_box { height: 246px; overflow-x: hidden; overflow-y: scroll; } /* 列表数据样式 */ .data_list { padding-top: 25px; } #data_list_info {} #data_list_info span { display: inline-block; min-width: 120px; height: 45px; padding: 0 5px; margin: 0 8px 10px; border-radius: 5px; border: 1px solid #C1C1C1; text-align: center; line-height: 45px; font-size: 16px; cursor: pointer; } </style> <style type="text/css"> table { margin-left: 140px; width: 90%; border-collapse: collapse; /*margin: 0 auto;*/ text-align: center; } table td, table th { text-align: center; border: 1px solid #cad9ea; color: #666; height: 30px; } table thead th { background-color: #CCE8EB; width: 100px; } table tr:nth-child(odd) { background: #fff; } table tr:nth-child(even) { background: #F5FAFA; } </style> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="../js/jquery.cookie.js"></script> <!-- 移动排序 <script type="text/javascript" src="./drag_sorting/jquery.min.js"></script> --> <script type="text/javascript" src="./drag_sorting/drag-arrange.js"></script> </head> <body> <div class="layui-tab layui-tab-brief" id="product_tab" lay-filter="docDemoTabBrief"> <ul class="pro_top_tab "> <li class="tab_this">基本</li> <li>库存/规格</li> <li>参数</li> <li>详情</li> <li>购买权限</li> <!-- <li>购买权限</li> <li>优惠券</li> --> <!-- <li id="product_jifen_but">商品积分</li> --> </ul> <form class="layui-form col-xs-9" id="form_data" enctype="multipart/form-data"> <div class="layui-tab-content"> <!-- 基本 --> <div class="layui-tab-item layui-show"> <div class="layui-form-item"> <label class="layui-form-label">排序：</label> <div class="layui-input-block"> <input type="number" maxlength="5" name="sqe" autocomplete="off" lay-verify="required|number" class="layui-input sqe" placeholder="排序号"> <p class="form_text"> 数字越大，排名越靠前；如果为空，默认排序方式为创建时间。</p> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">款号：</label> <div class="layui-input-block"> <input type="text" name="modelNumber" autocomplete="off" lay-verify="required" class="layui-input modelNumber" placeholder="款号"> </div> </div> <div class="layui-form-item" style="display: none"> <label class="layui-form-label">品牌商code：</label> <div class="layui-input-block"> <input maxlength="5" name="merchantCode" autocomplete="off" class="layui-input merchantCode" placeholder="品牌商code"> </div> </div> <div class="layui-form-item" style="display: none"> <label class="layui-form-label">品牌商名字：</label> <div class="layui-input-block"> <input maxlength="5" name="merchantName" autocomplete="off" class="layui-input merchantName" placeholder="品牌商名字"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">商品名称：</label> <div class="layui-input-block pro_add_unit"> <input type="text" name="name" autocomplete="off" lay-verify="required" class="layui-input info_name" placeholder="商品名称"> <div class="unit_box"> <input type="text" name="unit" class="layui-input unit" placeholder="单位：如个/件/包"> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">商品分类：</label> <div class="layui-input-block choose_box"> <input type="hidden" name="typeId" title="商品分类" value="0" class="typeId" id="typeid"> <input type="text" readonly="true" autocomplete="off" class="layui-input input_disabled typeId_text" name="typeid_text" id="typeid_text" placeholder="请选择商品分类"> <div class="choose_inline"> <label class="choose_button" id="choose_pro" style="background-color:#e9e9e9; color:#333;">选择商品分类</label> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">商品价格：</label> <div class="layui-input-block pro_price"> <input type="number" name="price" autocomplete="off" max="9999" min="0" lay-verify="required|number" class="layui-input" placeholder="商品价格(元)"> <!-- <p class="pro_price_unit">元 原价：</p> <input type="number" name="originalPrice" autocomplete="off" max="9999" min="0" lay-verify="required" class="layui-input" placeholder="原价(元)" > <p class="pro_price_unit">元 </p> --> <!-- <p class="pro_price_unit">元 会员价：</p> --> <!-- <input type="number" name="memberPrice" autocomplete="off" max="9999" min="0" lay-verify="required|number" class="layui-input" placeholder="会员价(元)" > <p class="pro_price_unit" style="float:right;">元</p> --> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">原价：</label> <div class="layui-input-block pro_price"> <input type="number" name="originalPrice" autocomplete="off" max="9999" min="0" lay-verify="required" class="layui-input" placeholder="原价(元)"> <!-- <p class="pro_price_unit">元 原价：</p> <input type="number" name="originalPrice" autocomplete="off" max="9999" min="0" lay-verify="required" class="layui-input" placeholder="原价(元)" > <p class="pro_price_unit">元 </p> --> <!-- <p class="pro_price_unit">元 会员价：</p> --> <!-- <input type="number" name="memberPrice" autocomplete="off" max="9999" min="0" lay-verify="required|number" class="layui-input" placeholder="会员价(元)" > <p class="pro_price_unit" style="float:right;">元</p> --> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">商品属性：</label> <div class="layui-input-block form_checkbox" id="product_attribute"> <input type="hidden" name="ispromotion" title="促销商品" value="0" class="ispromotion"> <div class="ifon_checkbox_choose ispromotion"><span>促销商品</span><i class="layui-icon layui-icon-ok"></i></div> <input type="hidden" name="isreferentia" title="限时促销" value="0" class="isreferentia"> <div class="ifon_checkbox_choose isreferentia"><span>限时促销</span><i class="layui-icon layui-icon-ok"></i></div> <input type="hidden" name="isnewProducts" title="新品上架" value="0" class="isnewProducts"> <div class="ifon_checkbox_choose isnewProducts"><span>新品上架</span><i class="layui-icon layui-icon-ok"></i></div> <input type="hidden" name="isrecommend" title="推荐商品" value="0" class="isrecommend"> <div class="ifon_checkbox_choose isrecommend"><span>推荐商品</span><i class="layui-icon layui-icon-ok"></i></div> <input type="hidden" name="ishost" title="热卖商品" value="0" class="ishost"> <div class="ifon_checkbox_choose ishost"><span>热卖商品</span><i class="layui-icon layui-icon-ok"></i></div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">商品图片：</label> <div class="layui-input-block banner_file"> <!-- 商品修改 imgFlag 图片修改标识 0未修改 1重新传问价留 2 删除个别链接 DBImgUrl 删除几张图片后 直接存入数据库的 链接 --> <input type="hidden" name="imgFlag" title="商品图片修改状态" value="0" class="imgFlag" id="imgFlag"> <input type="text" readonly="true" autocomplete="off" name="productImg" id="productImg" class="layui-input productImg_url input_disabled" title="商品图片url"> <div class="banner_inline"> <label class="button_tb" for="female">选择图片</label> <input class="layui-upload-file productImg" name="file" type="file" accept="image/*" id="female" multiple="multiple"> </div> <div class="file_img_list" id="file_img_list"> <!-- <div class="file_img"> <p class="file_exit">×</p> <img src="" alt=""> </div> --> </div> <p class="file_img_tishi">缩略图 尺寸建议宽度640*350，并保持图片尺寸大小保持一致。</p> </div> </div> <!-- <div class="layui-form-item"> <label class="layui-form-label">商品视屏：</label> <div class="layui-input-block banner_file" > <input type="text" readonly="true" autocomplete="off" id="productVideo" class="layui-input input_disabled"> <div class="banner_inline"> <label class="button_tb" for="female_video" >选择商品视屏</label> <input class="layui-upload-file" type="file" name="productVideo" id="female_video"> </div> <div class="file_img" id="file_video"> <p class="file_exit">×</p> <video src="" controls="controls">Your browser does not support the video tag.</video> </div> <p class="file_img_tishi">商品视屏 尺寸建议宽度640*350。</p> </div> </div> --> <div class="layui-form-item"> <label class="layui-form-label">商品销量：</label> <div class="layui-input-block pro_sales"> <input type="number" name="actualsales" autocomplete="off" class="layui-input" placeholder="商品销量"> <div class="pro_sales_unit"> 件 </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"> </label> <div class="layui-input-block pro_sales_checkbox"> <input type="checkbox" lay-skin="primary" title="显示销量"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">商品标签：</label> <div class="layui-input-block form_checkbox"> <input type="hidden" name="isgenuine" title="品质保证" value="0" class="isgenuine"> <div class="ifon_checkbox_choose isgenuine"><span>品质保证</span><i class="layui-icon layui-icon-ok"></i></div> <input type="hidden" name="isdaysreturn" title="7天无理由退货" value="0" class="isdaysreturn"> <div class="ifon_checkbox_choose isdaysreturn"><span>7天无理由退货</span><i class="layui-icon layui-icon-ok"></i></div> <input type="hidden" name="repidrefund" title="急速退款" value="0" class="repidrefund"> <div class="ifon_checkbox_choose repidrefund"><span>急速退款</span><i class="layui-icon layui-icon-ok"></i></div> <input type="hidden" name="freefreighe" title="赠运险费" value="0" class="freefreighe"> <div class="ifon_checkbox_choose freefreighe"><span>赠运险费</span><i class="layui-icon layui-icon-ok"></i></div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">商品状态：</label> <div class="layui-input-block"> <input type="radio" name="status" value="0" title="上架" checked=""> <input type="radio" name="status" value="1" title="下架"> </div> </div> <!-- 下一步操作 --> <div class="layui-form-item" style="margin-top:50px;"> <div class="layui-input-block"> <button type="button" class="layui-btn layui-btn-lg product_next" box_index="1"> 下一步 </button> </div> </div> </div> <!-- 库存/规格 --> <div class="layui-tab-item"> <div class="layui-form-item" style="display: none"> <label class="layui-form-label">编码：</label> <div class="layui-input-block" style="width:50%;"> <input type="text" name="productCode" autocomplete="off" class="layui-input" placeholder="商品编码"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">重量：</label> <div class="layui-input-block pro_weight_box" style="width:40%;"> <input type="number" name="weight" autocomplete="off" class="layui-input" placeholder="商品重量"> <div class="pro_weight"> 克 </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">最多购买：</label> <div class="layui-input-block pro_weight_box" style="width:50%;"> <input type="number" name="buyMax" autocomplete="off" class="layui-input" placeholder="最多购买数"> <div class="pro_weight"> 件 </div> <p class="form_text"> 用户购买过的此商品数量限制。</p> </div> </div> <!--<div class="layui-form-item">--> <!--<label class="layui-form-label">库存：</label>--> <!--<div class="layui-input-block" style="width:30%;">--> <!--<input type="number" name="stock" autocomplete="off" class="layui-input" placeholder="商品库存">--> <!--</div>--> <!--</div>--> <!--蓝色分割线 <hr class="layui-bg-blue" style="width:90%; margin:0 auto 20px;">--> <div class="layui-form-item"> <label class="layui-form-label">规格：</label> <div class="layui-input-block guige_box"> <div class="guige_checked" checked_id="0"><i class="layui-icon layui-icon-ok"></i><span>启用商品规格</span></div> <input type="hidden" id="specification" value=""> <div class="pro_buttom" id="guige_but" style="float:right"><i class="icon iconfont icon-jia2"></i> 添加规格 </div> <div class="pro_buttom" id="guige_tegetder" style="float: right;"> 组合 </div> <div id="guige_div"> <dl class="pro_guige" id="pro_guige_list"> <dd class="guige_text"> <input type="text" autocomplete="off" class="layui-input guige_type" placeholder="请输入规格类型"> <div class="guige_inline"> <p class="guige_exit">×</p> <label class="button_tb"><i class="icon iconfont icon-jia2"></i> 添加规格项</label> </div> <ul class="guige_list"> <p class="clear"></p> <li> <div class="input_guige_checkbox input_guige_click" checked_in="1"><i class="layui-icon layui-icon-ok"></i></div> <input type="text" class="input_guige"> <div class="input_guige_mobile"><i class="icon iconfont icon-yidong"></i></div> <div class="input_guige_exit">×</div> </li> </ul> </dd> </dl> </div> </div> <script type="text/javascript"> var tablearrinfo = {}; // 组合 $('#guige_tegetder').on('click', function () { $('.tablehead').empty(); $('.tablebody').empty(); $('.vip').show(); // 表头处理开始 $('.tablehead').append('<th>库存</th><th>价格</th><th>sku规格 Code</th>'); $('.guige_type').eq(1).val() != undefined ? $('.tablehead').prepend('<th>' + $('.guige_type').eq(1).val() + '</th> ') : null; $('.tablehead').prepend('<th>' + $('.guige_type').eq(0).val() + '</th> '); // 表头处理结束 // 表体开始 let inpu = $('.guige_list').eq(0).find('li'); let inpus = $('.guige_list').eq(1).find('li').children('input'); console.log(inpus); console.log($('.guige_text').length); for (var i = 0; i < inpu.length; i++) { if ($('.guige_text').length == 1) { // $('.tablebody').eq(0).append('<td>'+$('.input_guige').eq(i).val()+'</td>'); $('.tablebody').eq(0).append('<tr>' + '<td class="jq">' + $('.input_guige').eq(i).val() + '</td>' + '<td><input type="text"></td>>' + '<td><input type="text"></td>>' + '</tr>'); } if ($('.guige_text').length > 1) { for (var k = 0; k < inpus.length; k++) { $('.tablebody').eq(0).append('<tr class="trinfo">' + '<td class="tdinfo">' + $('.input_guige').eq(i).val() + '</td>' + '<td class="td2info">' + inpus.eq(k).val() + '</td>' + '<td><input class="cun" type="text" value="0"></td>>' + '<td><input class="pice" type="text" value="0"></td>>' + '<td><input class="sku_code" type="text" value="0"></td>>' + '</tr>'); } } } // 表体结束' $('.product_next').click(function () { var theadarr = [] var tabodyarr = []; theadarr.push($('.guige_type').eq(0).val(), $('.guige_type').eq(1).val()); for (var j = 0; j < $('.tablebody').children('tr').length; j++) { var duidui = []; duidui.push($('.tdinfo').eq(j).text(), $('.td2info').eq(j).text()); tabodyarr.push({ amount: $('.cun').eq(j).val(), price: $('.pice').eq(j).val(), mem_price: $('.vips').eq(j).val(), sku_code: $('.sku_code').eq(j).val(), standards: duidui }); tablearrinfo.bundles = theadarr; tablearrinfo.list = tabodyarr; console.log(tablearrinfo); } }) // console.log($('.guige_list').eq(0).find('.input_guige').val()); }) //点击启用商品规格 $(".guige_box .guige_checked").click(function () { if ($(this).attr('checked_id') == '0') { $(this).attr('checked_id', '1'); $(this).addClass("guige_click"); $(this).siblings('#guige_div').css('display', 'block'); $(this).siblings('#specification').attr("name", "specification"); } else { $(this).attr('checked_id', '0'); $(this).removeClass("guige_click"); $(this).siblings('#guige_div').css('display', 'none'); $(this).siblings('#specification').removeAttr("name"); }; }); //点击添加规格类型 var canshu_id = 1; $("#guige_but").click(function () { if ($('#pro_guige_list').children().length == 2) { layer.msg('不能再添加窝~~'); return; } $("#pro_guige_list").append('<dd class="guige_text">' + '<input type="text" autocomplete="off" class="layui-input guige_type" placeholder="请输入规格类型">' + '<div class="guige_inline"><p class="guige_exit" >×</p><label class="button_tb"><i class="icon iconfont icon-jia2"></i> 添加规格项</label></div>' + '<ul class="guige_list"><p class="clear"></p> <li>' + '<div class="input_guige_checkbox input_guige_click" checked_in="1"><i class="layui-icon layui-icon-ok"></i></div>' + '<input type="text" class="input_guige" >' + '<div class="input_guige_mobile"><i class="icon iconfont icon-yidong"></i></div><div class="input_guige_exit">×</div>' + '</li></ul></dd>'); canshu_id++; }); //点击 规格类型 里面的 .canshu_exit 清除整个规格类型 $(document).on("click", "#pro_guige_list .guige_exit", function () { //$(this).parent().remove(); parents //alert($(this).parents('.pro_canshu').attr('canshu-id')); //console.log($(this).parents('.pro_canshu').index()); $(this).parents('.guige_text').remove(); }); //点击 规格类型 里面的 .button_tb 添加规格子类型 $(document).on("click", "#pro_guige_list .button_tb", function () { //console.log('添加规格子类型'); $(this).parents(".guige_inline").siblings(".guige_list").append('<li>' + '<div class="input_guige_checkbox input_guige_click" checked_in="1"><i class="layui-icon layui-icon-ok"></i></div>' + '<input type="text" class="input_guige" >' + '<div class="input_guige_mobile"><i class="icon iconfont icon-yidong"></i></div><div class="input_guige_exit">×</div></li>'); }); //点击 子规格的 .input_guige_exit 清除整个 li 规格类型 $(document).on("click", "#pro_guige_list .guige_list .input_guige_exit", function () { $(this).parents('li').remove(); }); //点击 子规格的 .input_guige_checkbox 勾选 规格类型 或者取消勾选 /*$(document).on("click","#pro_guige_list .guige_list .input_guige_checkbox",function(){ if ($(this).attr("checked_in")=="0") { $(this).addClass('input_guige_click'); $(this).attr("checked_in","1"); }else if($(this).attr("checked_in")=="1"){ $(this).removeClass('input_guige_click'); $(this).attr("checked_in","0"); }; });*/ //绑定拖动事件 进行排序 $(document).on("mousedown", ".guige_list li .input_guige_mobile", function () { $('.guige_list li').arrangeable({ dragSelector: '.input_guige_mobile' }); }); $(document).on("mousemove", ".guige_list li .input_guige_mobile", function () { $('.guige_list li').arrangeable({ dragSelector: '.input_guige_mobile' }); }); $(document).on("mouseup", ".guige_list li .input_guige_mobile", function () { $('.guige_list li').arrangeable({ dragSelector: '.input_guige_mobile' }); }); $(document).on("touchstart", ".guige_list li .input_guige_mobile", function () { $('.guige_list li').arrangeable({ dragSelector: '.input_guige_mobile' }); }); $(document).on("touchmove", ".guige_list li .input_guige_mobile", function () { $('.guige_list li').arrangeable({ dragSelector: '.input_guige_mobile' }); }); $(document).on("touchend", ".guige_list li .input_guige_mobile", function () { $('.guige_list li').arrangeable({ dragSelector: '.input_guige_mobile' }); }); </script> </div> <table class="gridtable"> <thead> <tr class="tablehead"> <th hidden class="vip">会员</th> <th hidden class="vip">库存</th> <th hidden class="vip">价格</th> </tr> </thead> <tbody class="tablebody"> </tbody> </table> <!-- 下一步操作 --> <div class="layui-form-item" style="margin-top:50px;"> <div class="layui-input-block"> <button type="button" class="layui-btn layui-btn-lg product_next" box_index="2"> 下一步 </button> </div> </div> </div> <!-- 参数 --> <div class="layui-tab-item"> <div class="layui-form-item"> <label class="layui-form-label">参数：</label> <div class="layui-input-block" style="padding-left:20px;"> <div class="pro_canshu"> <div class="canshu_left"> 参数名称 </div> <div class="canshu_right"> 参数值 可拖动进行排序 </div> <p class="clear"></p> </div> <div class="pro_canshu_list" id="pro_canshu_list"> <input type="hidden" name="productParams" id="productParams" value=""> <ul> <li class="pro_canshu" canshu-id="0"> <div class="canshu_left"><input type="text" class="layui-input canshu_name"> </div> <input type="text" class="layui-input canshu_value"> <p class="canshu_exit">×</p> <p class="canshu_mobile"><i class="icon iconfont icon-yidong"></i> 推动排序</p> <p class="clear"></p> </li> </ul> </div> <p class="clear"></p> <div class="pro_buttom" id="canshu_but"><i class="icon iconfont icon-jia2"></i> 添加参数 </div> <script type="text/javascript"> //点击添加规格 var canshu_id = 1; $("#canshu_but").click(function () { $("#pro_canshu_list ul").append('<li class="pro_canshu" canshu-id="' + canshu_id + '"><div class="canshu_left"><input type="text" class="layui-input canshu_name"></div><input type="text" class="layui-input canshu_value"><p class="canshu_exit">×</p><p class="canshu_mobile"><i class="icon iconfont icon-yidong"></i> 推动排序</p><p class="clear"></p></li>'); canshu_id++; }); //点击添加规格 里面的 .canshu_exit 清除整个属性参数 $(document).on("click", "#pro_canshu_list .pro_canshu .canshu_exit", function () { //$(this).parent().remove(); parents //alert($(this).parents('.pro_canshu').attr('canshu-id')); //console.log($(this).parents('.pro_canshu').index()); $(this).parents('.pro_canshu').remove(); }); //绑定拖动事件 进行排序 $(document).on("mousedown", "#pro_canshu_list .pro_canshu .canshu_mobile", function () { $('#pro_canshu_list .pro_canshu').arrangeable({ dragSelector: '.canshu_mobile' }); }); $(document).on("mousemove", "#pro_canshu_list .pro_canshu .canshu_mobile", function () { $('#pro_canshu_list .pro_canshu').arrangeable({ dragSelector: '.canshu_mobile' }); }); $(document).on("mouseup", "#pro_canshu_list .pro_canshu .canshu_mobile", function () { $('#pro_canshu_list .pro_canshu').arrangeable({ dragSelector: '.canshu_mobile' }); }); $(document).on("touchstart", "#pro_canshu_list .pro_canshu .canshu_mobile", function () { $('#pro_canshu_list .pro_canshu').arrangeable({ dragSelector: '.canshu_mobile' }); }); $(document).on("touchmove", "#pro_canshu_list .pro_canshu .canshu_mobile", function () { $('#pro_canshu_list .pro_canshu').arrangeable({ dragSelector: '.canshu_mobile' }); }); $(document).on("touchend", "#pro_canshu_list .pro_canshu .canshu_mobile", function () { $('#pro_canshu_list .pro_canshu').arrangeable({ dragSelector: '.canshu_mobile' }); }); </script> </div> </div> <!-- 下一步操作 --> <div class="layui-form-item" style="margin-top:50px;"> <div class="layui-input-block" style="padding-left: 20px;"> <button type="button" class="layui-btn layui-btn-lg product_next" box_index="3"> 下一步 </button> </div> </div> </div> <!-- 详情 --> <div class="layui-tab-item"> <div class="layui-form-item"> <label class="layui-form-label">详情：</label> <div class="layui-input-block"> <textarea id="details_demo" name="appdetailhtml" style="display: none;"></textarea> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">套餐的使用次数：</label> <div class="layui-input-block" style="width:50%;"> <input type="text" name="number" id="info_number" autocomplete="off" class="layui-input" placeholder="套餐的使用次数"> </div> </div> <!-- <input type="hidden" class="info_type" id="info_type" name="type" title="商品促销 类型" value="" /> <input type="hidden" class="info_type" id="info_type1" name="type" title="商品促销 类型" value="" /> --> <!-- 下一步操作 --> <!-- <div class="layui-form-item" style="margin-top:50px;"> <div class="layui-input-block"> <button type="button" class="layui-btn layui-btn-lg product_next" box_index="4" > 下一步 </button> </div> </div> --> <!-- 提交添加商品 --> <div class="layui-form-item" style="margin-top:50px;"> <div class="layui-input-block"> <button type="button" class="layui-btn layui-btn-lg" id="form_add_but"> 添加商品 </button> <button type="reset" class="layui-btn layui-btn-lg layui-btn-primary"> 重置 </button> </div> </div> </div> <!-- 购买权限 --> <div class="layui-tab-item"> <div> </div> <!-- 下一步操作 --> <div class="layui-form-item" style="margin-top:50px;"> <div class="layui-input-block"> <button type="button" class="layui-btn layui-btn-lg product_next" box_index="5"> 下一步 </button> </div> </div> </div> <!-- 优惠券 --> <div class="layui-tab-item"> <div class="layui-form-item" style="display: none"> <label class="layui-form-label">优惠券状态：</label> <div class="layui-input-block state_box"> <input type="hidden" name="iscoupon" class="iscoupon" value="0"> <div class="state_checked" checked_id="1"><i class="layui-icon layui-icon-ok"></i><span> 可以使用优惠券 </span></div> <div class="state_checked state_click" checked_id="0"><i class="layui-icon layui-icon-ok"></i><span> 不可使用优惠券 </span></div> </div> </div> <!-- 提交添加商品 --> <div class="layui-form-item" style="margin-top:50px;"> <div class="layui-input-block"> <button type="button" class="layui-btn layui-btn-lg" id="form_add_but"> 添加商品 </button> <button type="reset" class="layui-btn layui-btn-lg layui-btn-primary"> 重置 </button> </div> </div> </div> </div> </form> </div> <div class="layui-tab-item product_jifen" id="product_jifen"> <form class="layui-form" id="product_jifen_data"> <input type="hidden" name="product_id" id="product_id" value=""> <!-- 商品积分 --> <div class="pro_jifen_box"> <div class="jifen_box"> <p class="jifen_box_title">商品复购积分：</p> <div class="jifen_box_form"> <dl class="pro_jifen"> <dd> 选择用户等级 </dd> <dd> 重消他 </dd> <dd> 重消她 </dd> <!-- <dd> 会员一层获取积分 </dd> <dd> 会员二层获取积分 </dd> --> <dd> </dd> <p class="clear"></p> </dl> <div class="jifen_list" id="jifen_list"> <dl class="pro_jifen"> <dd> <div class="form_select_title"> <input type="hidden" value="1" class="members_type"> <input type="text" placeholder="用户等级" value="听她说品牌VIP" disabled="disabled" class="members_type_text layui-input"> </div> </dd> <dd><input type="number" class="layui-input non_vip_1" placeholder="非会员一层获取积分" value="0"> </dd> <dd><input type="number" class="layui-input non_vip_2" placeholder="非会员二层获取积分" value="0"> </dd> <!-- <dd><input type="number" class="layui-input vip_1" placeholder="会员一层获取积分" value="0"> </dd> <dd><input type="number" class="layui-input vip_2" placeholder="会员二层获取积分" value="0"> </dd> --> <p class="clear"></p> </dl> <dl class="pro_jifen"> <dd> <div class="form_select_title"> <input type="hidden" value="2" class="members_type"> <input type="text" placeholder="用户等级" value="听她说品牌服务社区店" disabled="disabled" class="members_type_text layui-input"> </div> </dd> <dd><input type="number" class="layui-input non_vip_1" placeholder="非会员一层获取积分" value="0"> </dd> <dd><input type="number" class="layui-input non_vip_2" placeholder="非会员二层获取积分" value="0"> </dd> <!-- <dd><input type="number" class="layui-input vip_1" placeholder="会员一层获取积分" value="0"> </dd> <dd><input type="number" class="layui-input vip_2" placeholder="会员二层获取积分" value="0"> </dd> --> <p class="clear"></p> </dl> <dl class="pro_jifen"> <dd> <div class="form_select_title"> <input type="hidden" value="3" class="members_type"> <input type="text" placeholder="用户等级" value="豪华服务社区" disabled="disabled" class="members_type_text layui-input"> </div> </dd> <dd><input type="number" class="layui-input non_vip_1" placeholder="非会员一层获取积分" value="0"> </dd> <dd><input type="number" class="layui-input non_vip_2" placeholder="非会员二层获取积分" value="0"> </dd> <!-- <dd><input type="number" class="layui-input vip_1" placeholder="会员一层获取积分" value="0"> </dd> <dd><input type="number" class="layui-input vip_2" placeholder="会员二层获取积分" value="0"> </dd> --> <p class="clear"></p> </dl> <dl class="pro_jifen"> <dd> <div class="form_select_title"> <input type="hidden" value="4" class="members_type"> <input type="text" placeholder="用户等级" value="形象中心" disabled="disabled" class="members_type_text layui-input"> </div> </dd> <dd><input type="number" class="layui-input non_vip_1" placeholder="非会员一层获取积分" value="0"> </dd> <dd><input type="number" class="layui-input non_vip_2" placeholder="非会员二层获取积分" value="0"> </dd> <!-- <dd><input type="number" class="layui-input vip_1" placeholder="会员一层获取积分" value="0"> </dd> <dd><input type="number" class="layui-input vip_2" placeholder="会员二层获取积分" value="0"> </dd> --> <p class="clear"></p> </dl> <dl class="pro_jifen"> <dd> <div class="form_select_title"> <input type="hidden" value="5" class="members_type"> <input type="text" placeholder="用户等级" value="市S" disabled="disabled" class="members_type_text layui-input"> </div> </dd> <dd><input type="number" class="layui-input non_vip_1" placeholder="非会员一层获取积分" value="0"> </dd> <dd><input type="number" class="layui-input non_vip_2" placeholder="非会员二层获取积分" value="0"> </dd> <!-- <dd><input type="number" class="layui-input vip_1" placeholder="会员一层获取积分" value="0"> </dd> <dd><input type="number" class="layui-input vip_2" placeholder="会员二层获取积分" value="0"> </dd> --> <p class="clear"></p> </dl> <dl class="pro_jifen"> <dd> <div class="form_select_title"> <input type="hidden" value="6" class="members_type"> <input type="text" placeholder="用户等级" value="听她说品牌消费者" disabled="disabled" class="members_type_text layui-input"> </div> </dd> <dd><input type="number" class="layui-input non_vip_1" placeholder="非会员一层获取积分" value="0"> </dd> <dd><input type="number" class="layui-input non_vip_2" placeholder="非会员二层获取积分" value="0"> </dd> <!-- <dd><input type="number" class="layui-input vip_1" placeholder="会员一层获取积分" value="0"> </dd> <dd><input type="number" class="layui-input vip_2" placeholder="会员二层获取积分" value="0"> </dd> --> <p class="clear"></p> </dl> </div> </div> <p class="clear"></p> </div> <!-- <div class="jifen_box quyu_jifen" style="margin-top:50px;"> <p class="jifen_box_title">非会员购买区域重消积分：</p> <div class="jifen_box_form"> <div class="layui-form-item"> <label class="layui-form-label">区域积分：</label> <div class="layui-input-block"> <input type="number" class="layui-input quyu_integral" value="0"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">省积分：</label> <div class="layui-input-block"> <input type="number" class="layui-input sheng_integral" value="0"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">市积分：</label> <div class="layui-input-block"> <input type="number" class="layui-input shi_integral" value="0"> </div> </div> </div> <p class="clear"></p> </div> --> <div class="jifen_box quyu_jifen" style="margin-top:50px;"> <p class="jifen_box_title">区域重消积分：</p> <div class="jifen_box_form"> <div class="layui-form-item"> <label class="layui-form-label">区县重消积分：</label> <div class="layui-input-block"> <input type="number" class="layui-input vip_quyu_integral" value="0"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">市S重消积分：</label> <div class="layui-input-block"> <input type="number" class="layui-input vip_sheng_integral" value="0"> </div> </div> <!-- <div class="layui-form-item"> <label class="layui-form-label">市积分：</label> <div class="layui-input-block"> <input type="number" class="layui-input vip_shi_integral" value="0"> </div> </div> --> </div> <p class="clear"></p> </div> <p class="clear"></p> </div> <div class="layui-form-item" style="margin-top:50px;"> <div class="layui-input-block"> <button type="button" class="layui-btn layui-btn-lg" id="product_jifen_add"> 设置商品积分 </button> </div> </div> </form> </div> <!-- 选择商品分类 列表 --> <div id="details_layer"> <div class="details_export"> <div class="top_title"> 选择商品分类</div> <!-- 选择商品分类 数据 --> <div class="details_box data_list" id="details_box"> <div id="data_list_info"> <p class="clear"></p> </div> </div> <div class="tc_button"> <!-- <button id="tc_determine">确定</button> --> <button id="tc_cancel">关闭</button> </div> </div> </div> <script type="text/javascript" src="../common/layui/layui.js"></script> <script type="text/javascript" src="../common/layui/layui.all.js"></script> <script type="text/javascript"> layui.use('table', function () { var table = layui.table; //监听表格复选框选择 table.on('checkbox(demo)', function (obj) { console.log(obj) }); //监听工具条 table.on('tool(demo)', function (obj) { var data = obj.data; if (obj.event === 'detail') { layer.msg('ID：' + data.id + ' 的查看操作'); } else if (obj.event === 'del') { layer.confirm('真的删除行么', function (index) { obj.del(); layer.close(index); }); } else if (obj.event === 'edit') { layer.alert('编辑行：<br>' + JSON.stringify(data)) } }); var $ = layui.$, active = { getCheckData: function () { //获取选中数据 var checkStatus = table.checkStatus('idTest') , data = checkStatus.data; layer.alert(JSON.stringify(data)); } , getCheckLength: function () { //获取选中数目 var checkStatus = table.checkStatus('idTest') , data = checkStatus.data; layer.msg('选中了：' + data.length + ' 个'); } , isAll: function () { //验证是否全选 var checkStatus = table.checkStatus('idTest'); layer.msg(checkStatus.isAll ? '全选' : '未全选') } }; $('.demoTable .layui-btn').on('click', function () { var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); }); /* * （变量、方法所在文件 ./js/jquery.coolei.js） * 全局变量介绍 * 1、url_domain（通用接口域名） * 2、token （请求头 token） * * 引入公共方法说明 */ var url_domain = ''; $('.file_exit').click(function () { console.log(111) }) // console.log(11) // //$(this).siblings("img").attr('src',''); // //$(this).parent(".file_img").css('display','none'); // //获取当前删除的 图片的 本地url // var this_img, // this_index = $(this).parent(".file_img").index(); // if(this_index==0||this_index=='0') { // this_img = $(this).parent(".file_img").attr("img_url"); // }else { // this_img = ','+$(this).parent(".file_img").attr("img_url"); // }; // //获取总的 图片 本地url // var img_val = $("#productImg").val(); // // 在总的 图片url 中删除 当前图片的url 再赋值 // $('#productImg').val(img_val.replace(this_img, '')); // //$(this).parent(".file_img").css('display','none'); // //在数组中删除 该图片对象 // curFiles.splice(this_index,1); // //删除 当前图片容器 // $(this).parent(".file_img").remove(); // }); //弹出层 //页面加载时 设置弹层背景的高度 为可视化窗口的高度 $(document).ready(function () { $('#details_layer').css({ "height": $(window).height() }); }); //当页面窗口改变时 弹层背景的高度也随之改变 $(window).resize(function () { $('#details_layer').css({ "height": $(window).height() }); }); //展开弹窗 $('#choose_pro').click(function () { //分类数据加载 $.ajax({ headers: { 'Authorization': token }, url: url_domain + "/mall-server/api/mall/ShopProductType/queryByLevel", //提交的地址 type: "post", //提交方式post|get data: { 'level': '1' }, async: false, success: function (msg) { //指定处理的回调函数 var data_length = msg.data.length; var info_html = ""; for (var i = 0; i < data_length; i++) { info_html += '<span info_id="' + msg.data[i].id + '">' + msg.data[i].name + '</span>'; }; $("#data_list_info").html(info_html); } });// $.ajax 结束 $('#details_layer').css({ 'visibility': 'visible' }); }); // 选择商品分类id 效果 $(document).on("click", "#data_list_info span", function () { var pro_id = $(this).attr('info_id'); $("#typeid").val(pro_id); console.log($(this).text()); $("#typeid_text").val($(this).text()); $("#details_layer").css({ 'visibility': 'hidden' }); }); //关闭弹出层 点击取消 关闭弹出层 $('#tc_cancel').click(function () { $("#details_layer").css({ 'visibility': 'hidden' }); }); //弹出层 var click_index, //当前点击tab的 小标 check_index, //当前选中的下标 click_box = $("#product_tab .pro_top_tab li"), //点击列表 content_box = $("#product_tab .layui-tab-content .layui-tab-item"); //显示盒子 click_box.click(function () { check_index = $("#product_tab .pro_top_tab li.tab_this").index(); click_index = $(this).index(); //alert(click_index); if (check_index == 6) { } else { $(this).addClass("tab_this").siblings("li").removeClass("tab_this"); content_box.eq(click_index).addClass("layui-show").siblings().removeClass("layui-show"); } }); //点击 下一步操作 效果 $("#product_tab .product_next").click(function () { var box_index = $(this).attr("box_index"); $("#product_tab .pro_top_tab li").eq(box_index).addClass("tab_this").siblings("li").removeClass("tab_this"); $("#product_tab .layui-tab-content .layui-tab-item").eq(box_index).addClass("layui-show").siblings().removeClass("layui-show"); }); //商品基本 checkbox 属性效果 $(".form_checkbox .ifon_checkbox_choose").click(function () { if ($(this).hasClass("ifon_checked")) { $(this).removeClass("ifon_checked"); $(this).prev('input[type="hidden"]').val('0'); } else { $(this).addClass("ifon_checked"); $(this).prev('input[type="hidden"]').val('1'); } }); //点击选择 是否启用 优惠券 $(".state_box .state_checked").click(function () { $(this).addClass("state_click").siblings().removeClass("state_click"); $(this).siblings("input").val($(this).attr('checked_id')); }); // // 图片上传 // //定义一个数组 把文件数组的值给新数组 对新数组进行操作 然后把新数组传递给后台 // var curFiles = []; // $('#female').change(function() { // var img_file = $(this).val(), //获取第一张文件路径 // file_length, //多张图片 数 // file_list = ""; // if (img_file != ""&&img_file!=null) { // //获取文件 // file_list = $(this)[0].files; // file_length = file_list.length; // //把所选的文件对象数组 赋值给 curFiles数组 // Array.prototype.push.apply(curFiles, file_list); // //获取图片的 文件夹 路径 // var img_url = img_file.replace(file_list[0].name, ''); // $("#file_img_list").html(""); // for (var i = 0; i < file_length; i++) { // //创建读取文件的对象 // var reader = new FileReader(); // //为文件读取成功设置事件 // reader.onload=function(e) { // //显示所选择的 图片 // $("#file_img_list").append('<div class="file_img" img_url="" style="background:none;"> <p class="file_exit">×</p> <img src="'+this.result+'" alt=""> </div>'); // }; // //正式读取文件 // reader.readAsDataURL(file_list[i]); // }; // setTimeout(function(){ // for (var j = 0; j < file_length; j++){ // if(j > 0) { // img_file += ","+img_url+file_list[j].name; // }; // var img_name = img_url+file_list[j].name; // //$("#file_img_list .file_exit").eq(i).setAttribute("img_url",img_name); // console.log(img_name); // $("#file_img_list .file_img").eq(j).attr("img_url",img_url+file_list[j].name); // }; // $("#productImg").val(img_file); // },200); // }; // }); // //商品 多图片上传的 去掉图片效果 // //$("#file_img_list .file_exit").click(function(){ // $(document).on("click","#file_img_list .file_exit",function(){ // //$(this).siblings("img").attr('src',''); // //$(this).parent(".file_img").css('display','none'); // //获取当前删除的 图片的 本地url // var this_img, // this_index = $(this).parent(".file_img").index(); // if(this_index==0||this_index=='0') { // this_img = $(this).parent(".file_img").attr("img_url"); // }else { // this_img = ','+$(this).parent(".file_img").attr("img_url"); // }; // //获取总的 图片 本地url // var img_val = $("#productImg").val(); // // 在总的 图片url 中删除 当前图片的url 再赋值 // $('#productImg').val(img_val.replace(this_img, '')); // //$(this).parent(".file_img").css('display','none'); // //在数组中删除 该图片对象 // curFiles.splice(this_index,1); // //删除 当前图片容器 // $(this).parent(".file_img").remove(); // }); // 图片上传 //定义一个数组 把文件数组的值给新数组 对新数组进行操作 然后把新数组传递给后台 var curFiles = []; $('#female').change(function () { var FormElement=new FormData(); var fill=$('.productImg').get(0).files[0]; console.log(FormElement.append('file',fill)); console.log(FormElement); // $.ajax({ // // url: "/mall-server/api/mall/B/ShopProduct/updateProduct", // url: "/rule/sys/oss/upload", // headers: {'Authorization': token}, // ContentType:'multipart/form-data', // type: "post", // data:FormElement, // dataType: 'JSON', // processData: false, // contentType: false, // success: function (res) { // console.log(res); // }, // error: function (returndata) { // // alert(returndata); // } // }); // var img_file = $(this).val(), //获取第一张文件路径 // file_length, //多张图片 数 // file_list = ""; // // if (img_file != "" && img_file != null) { // //获取文件 // file_list = $(this)[0].files; // file_length = file_list.length; // //把所选的文件对象数组 赋值给 curFiles数组 // Array.prototype.push.apply(curFiles, file_list); // // //获取图片的 文件夹 路径 // var img_url = img_file.replace(file_list[0].name, ''); // // $("#file_img_list").html(""); // for (var i = 0; i < file_length; i++) { // //创建读取文件的对象 // var reader = new FileReader(); // // //为文件读取成功设置事件 // reader.onload = function (e) { // //显示所选择的 图片 // $("#file_img_list").append('<div class="file_img" img_url="" style="background:none;"> <p class="file_exit">×</p> <img src="' + this.result + '" alt=""> </div>'); // }; // //正式读取文件 // reader.readAsDataURL(file_list[i]); // } // ; // // setTimeout(function () { // for (var j = 0; j < file_length; j++) { // if (j > 0) { // img_file += "," + img_url + file_list[j].name; // } // ; // //var img_name = img_url+file_list[j].name; // //console.log(img_name); // $("#file_img_list .file_img").eq(j).attr("img_url", img_url + file_list[j].name); // } // ; // $("#productImg").val(img_file); // $("#imgFlag").val("1"); // $(this).attr("name", "productImg"); // $("#productImg").removeAttr("name"); // }, 200); // // } // ; }); $('#female').on('change', function () { var FormElement = new FormData(); var fill = $('.productImg').get(0).files[0]; FormElement.append('file', fill); // console.log(FormElement); // var pro_img_html = ''; $.ajax({ // url: "/mall-server/api/mall/B/ShopProduct/updateProduct", url: "/rule/sys/oss/upload", headers: { 'Authorization': token }, ContentType: 'multipart/form-data', type: "post", data: FormElement, dataType: 'JSON', processData: false, contentType: false, success: function (res) { console.log(res.data.url); var pro_img_html = ''; pro_img_html= '<div class="file_img" img_data="1" img_url="' +res.data.url + '"><p class="file_exit">×</p><img src="' +res.data.url + '"> </div>'; console.log(pro_img_html); $("#form_data #file_img_list").append(pro_img_html); var img_url = $("#productImg").val(); img_url+= res.data.url+','; $("#productImg").val(img_url); }, error: function (returndata) { // alert(returndata); } }); // var img_file = $(this).val(), //获取第一张文件路径 // file_length, //多张图片 数 // file_list = ""; // // if (img_file != "" && img_file != null) { // //获取文件 // file_list = $(this)[0].files; // file_length = file_list.length; // //把所选的文件对象数组 赋值给 curFiles数组 // Array.prototype.push.apply(curFiles, file_list); // // //获取图片的 文件夹 路径 // var img_url = img_file.replace(file_list[0].name, ''); // // $("#file_img_list").html(""); // for (var i = 0; i < file_length; i++) { // //创建读取文件的对象 // var reader = new FileReader(); // // //为文件读取成功设置事件 // reader.onload = function (e) { // //显示所选择的 图片 // $("#file_img_list").append('<div class="file_img" img_url="" style="background:none;"> <p class="file_exit">×</p> <img src="' + this.result + '" alt=""> </div>'); // }; // //正式读取文件 // reader.readAsDataURL(file_list[i]); // } // ; // // setTimeout(function () { // for (var j = 0; j < file_length; j++) { // if (j > 0) { // img_file += "," + img_url + file_list[j].name; // } // ; // //var img_name = img_url+file_list[j].name; // //console.log(img_name); // $("#file_img_list .file_img").eq(j).attr("img_url", img_url + file_list[j].name); // } // ; // $("#productImg").val(img_file); // $("#imgFlag").val("1"); // $(this).attr("name", "productImg"); // $("#productImg").removeAttr("name"); // }, 200); // // } // ; }) //商品 多图片上传的 去掉图片效果 $(document).on("click", "#file_img_list .file_exit", function () { //$(this).siblings("img").attr('src',''); var img_type = $("#imgFlag").val(); console.log(img_type); if (img_type == "0" || img_type == "2") { $(this).parent(".file_img").attr('img_data', '0'); $("#imgFlag").val("2"); var img_length = $("#file_img_list .file_img[img_data='1']").length; //console.log(img_length); var img_url_data = ""; for (var i = 0; i < img_length; i++) { img_url_data += $("#file_img_list .file_img[img_data='1']").eq(i).attr("img_url") + ","; }; $("#productImg").val(img_url_data); } else if (img_type == "1") { //获取当前删除的 图片的 本地url var this_img, this_index = $(this).parent(".file_img").index(); if (this_index == 0 || this_index == '0') { this_img = $(this).parent(".file_img").attr("img_url"); } else { this_img = ',' + $(this).parent(".file_img").attr("img_url"); } ; //获取总的 图片 本地url var img_val = $("#productImg").val(); // 在总的 图片url 中删除 当前图片的url 再赋值 $('#productImg').val(img_val.replace(this_img, '')); //$(this).parent(".file_img").css('display','none'); //在数组中删除 该图片对象 curFiles.splice(this_index, 1); } ; //隐藏 当前图片 $(this).parent(".file_img").css('display', 'none'); }); //商品视屏 取消展示效果 $("#file_video .file_exit").click(function () { $(this).siblings("video").attr('src', ''); $(this).parent(".file_img").css('display', 'none'); $('#productVideo').val(""); }); // 视频上传 $('#female_video').change(function () { var video_file = $('#female_video').val(); if (video_file != "" && video_file != null) { //获取文件 var file = $('#female_video')[0].files[0]; //console.log(file); //创建读取文件的对象 var reader = new FileReader(); $("#productVideo").val(video_file); //为文件读取成功设置事件 reader.onload = function (e) { //创建文件读取相关的变量 var imgFile = e.target.result; $("#file_video video").attr('src', imgFile); $("#file_video video").css({ "background": "none", 'display': 'block' }); }; //正式读取文件 reader.readAsDataURL(file); }; }); //获取 规格数据 function guige_info() { //规格赋值 var guige_value = "", //{规格拼接 容器 guige_text_demo = $("#guige_div .guige_text"), //#guige_div 下的 .guige_text 的demo guige_length = guige_text_demo.length, //.guige_text 的demo 的总个数（规格项总个数） guige_type_demo, //.#guige_div 下的 规格类型 .guige_type 的demo guige_type_val, //#guige_div 下的 .guige_type 规格类型 项的值 guige_list_length, //.guige_text 下的 子规格项 个数 input_guige; //.guige_text 下的 子规格项 的值 for (var g = 0; g < guige_length; g++) { guige_type_demo = $("#guige_div .guige_type").eq(g); //规格类型 .guige_type 的demo guige_type_val = guige_type_demo.val(); //规格类型 .guige_type 的值 //规格类型 不能为空 if (guige_type_val != "" || guige_type_val != null) { //规格拼接类型 guige_value += guige_type_val + ","; //.guige_text 下的子规格项 个数 guige_list_length = guige_text_demo.eq(g).find("li").length; //循环拼接 自规格项的值 for (var l = 0; l < guige_list_length; l++) { //子规格项 的值 input_guige = guige_text_demo.eq(g).find(".input_guige").eq(l).val(); //子规格项 的值 不为空时 拼接，为空时不处理 if (input_guige != "" || input_guige != null) { //拼接 子规格项 的值 if (l == (guige_list_length - 1)) { guige_value += input_guige + ";"; } else { guige_value += input_guige + ","; }; }; }; } else { return "g"; }; }; //guige_value += "}"; //把 规格拼接数据 赋值到 规格隐藏域里 $("#specification").val(guige_value); } //获取 参数数据 function canshu_info() { var canshu_data = [], //{参数数据 容器 // canshu_datajson = "", canshu_list_demo = $("#pro_canshu_list li"), //参数列表 demo canshu_length = canshu_list_demo.length, //参数总个数 canshu_name, //参数名 canshu_value; //参数值 for (var c = 0; c < canshu_length; c++) { canshu_name = canshu_list_demo.eq(c).find(".canshu_name").val(); canshu_value = canshu_list_demo.eq(c).find(".canshu_value").val(); if (canshu_name != "" && canshu_value != "") { //拼接参数 // canshu_data += canshu_name+","; // canshu_data += canshu_value+";"; canshu_data.push({ "key": canshu_name, "value": canshu_value }); }; }; var json = JSON.stringify(canshu_data); console.log(json); //canshu_data += "}"; //把 规格拼接数据 赋值到 规格隐藏域里 $("#productParams").val(json); //alert(canshu_data); } //会员积分 拼接 function product_jifen() { var jifen_json = "[", //{参数数据 容器 jifen_list_demo = $("#jifen_list dl"), //参数列表 demo jifen_length = jifen_list_demo.length, //参数总个数 members_type, //会员类型 jifen_product_id = $("#product_id").val(); for (var j = 0; j < jifen_length; j++) { members_type = jifen_list_demo.eq(j).find(".members_type").val(); /*jifen_name = jifen_list_demo.eq(j).find(".non_vip_1").val(); jifen_value = jifen_list_demo.eq(j).find(".non_vip_2").val(); jifen_name = jifen_list_demo.eq(j).find(".vip_1").val(); jifen_value = jifen_list_demo.eq(j).find(".vip_2").val();*/ if (members_type != "") { //拼接参数 jifen_json += '{"memberLevelId":"' + members_type + '",'; jifen_json += '"productId":"' + jifen_product_id + '",'; jifen_json += '"awardPointFirst":"' + jifen_list_demo.eq(j).find(".non_vip_1").val() + '",'; jifen_json += '"awardPointSecond":"' + jifen_list_demo.eq(j).find(".non_vip_2").val() + '"},'; // jifen_json += '"nonmemberAwardPointFirst":"'+jifen_list_demo.eq(j).find(".vip_1").val()+'",'; // jifen_json += '"nonmemberAwardPointSecond":"'+jifen_list_demo.eq(j).find(".vip_2").val()+'"},'; }; }; jifen_json = jifen_json.substring(0, jifen_json.length - 1) + "]"; //return JSON.parse(jifen_json); return jifen_json; /*var obj = str.parseJSON(); //由JSON字符串转换为JSON对象 var obj = JSON.parse(str); //由JSON字符串转换为JSON对象*/ } layui.use(["jquery", "form", "upload", "table", "layer", "layedit", "laydate", "element"], function () { var layer = parent.layer === undefined ? layui.layer : parent.layer, laypage = layui.laypage, table = layui.table, form = layui.form, element = layui.element, layedit = layui.layedit, laydate = layui.laydate; $ = layui.jquery; //选择商品分类id /*$("#choose_pro").click(function(){ var index = layer.open({ type : 2, title : "选择分类连接", area : [ '75%', '65%' ], content : './pages/classification_list.html' }); });*/ // 编辑器 插入图片接口 layedit.set({ uploadImage: { url: url_domain + "/mall-server/api/mall/ShopNav/uploadImg" //接口url , type: 'post' //默认post } }); //建立编辑器 var textarea_demo = layedit.build('details_demo', { height: 280, //设置编辑器高度 tool: [ 'strong' //加粗 , 'italic' //斜体 , 'underline' //下划线 , 'del' //删除线 , '|' //分割线 , 'left' //左对齐 , 'center' //居中对齐 , 'right' //右对齐 , 'link' //超链接 , 'unlink' //清除链接 , 'face' //表情 , 'image' //插入图片 , 'help' //帮助 ] }); //添加商品 form 表单提交 $("#form_add_but").click(function () { //获取 规格数据 并且赋值到 规格隐藏域 // guige_info(); $("#specification").val(JSON.stringify(tablearrinfo)); //获取 参数数据 并且赋值到 参数隐藏域 canshu_info(); //console.log(); $("input[name='file']").removeAttr("name"); //富文本赋值 $("#details_demo").val(layedit.getContent(textarea_demo)); var form_data = new FormData(document.getElementById("form_data")); // #Lexin 注释，图片显示问题 // var form_img = curFiles.length; //图片数组个数 // if(form_img > 0) { // for (var f = 0; f < form_img; f++) { // form_data.append('productImg', curFiles[f]); // } // }; if ($("#productVideo").val() == "" || $("#productVideo").val() == null) { form_data.set("productVideo", ""); }; console.log('test 传参'); console.log(form_data); form_data.set("productForm", "1"); $.ajax({ url: url_domain + "/mall-server/api/mall/tmp/product/createForMeal", headers: { 'Authorization': token }, type: "post", data: form_data, dataType: "JSON", processData: false, contentType: false, success: function (obj) { if (obj.status == 0) { console.log(obj); console.log(obj.data.productCode); var productCode = obj.data.productCode; var mealCode = obj.data.id; layer.open({ title: "添加成功", time: 2000 }); $("#product_id").val(obj.data.id); var huiyuan_miaoshu = $("#info_number").val(); console.log(huiyuan_miaoshu); if (huiyuan_miaoshu == "") { layer.open({ title: "信息提示:", icon: 2, content: "套餐的使用次数，请输入套餐的使用次数！", time: 4000 }); // $("#form_data .first_instance_describe").css("border-color","#ff0000"); } else { console.log(productCode) //添加商品成功调接口 $.ajax({ url: url_domain + "/mall-server/api/mall/B/meal/create", headers: { 'Authorization': token }, type: "get", data: { // 'mealCode': mealCode, 'productCode': productCode, 'useLimit': $("#info_number").val(), 'ids': '' }, // datatype: "JSON", // processData: false, // contentType: false, success: function (obj) { if (obj.status == 0) { console.log(obj) layer.open({ title: "添加成功", time: 2000 }); //触发点击事件 // $('#product_jifen_but').trigger('click'); var fenpei_index = parent.layer.getFrameIndex(window.name); //获取窗口索引 parent.layer.close(fenpei_index); // 关闭layer window.parent.location.reload(); //刷新父页面 } else { layer.open({ title: "添加失败", time: 3000 }); layer.alert(obj.statusText, { icon: 5, title: "提示" }); } }, error: function (returndata) { // alert(returndata); } }); } } else { layer.open({ title: "添加失败", time: 3000 }); layer.alert(obj.statusText, { icon: 5, title: "提示" }); } }, error: function (returndata) { alert(returndata); } }); }); //返回列表 $("#cancel").click(function () { var fenpei_index = parent.layer.getFrameIndex(window.name); //获取窗口索引 parent.layer.close(fenpei_index); // 关闭layer window.parent.location.reload(); //刷新父页面 }); //点击商品积分 时的提示 $("#product_jifen_but").click(function () { //.hasClass("layui-show") var index_2 = $(".layui-tab-content .layui-show").index(); if ($("#product_id").val() == "" || $("#product_id").val() == null) { setTimeout(function () { $("#product_tab .pro_top_tab li").eq(index_2).addClass("tab_this").siblings().removeClass("tab_this"); }, 1); layer.confirm('请先添加商品，再设置会员积分！', { icon: 3, title: '提示信息' }); } else { $("#form_data").css("display", "none"); $("#product_jifen").css("display", "block"); }; }); //添加商品 积分 form 表单提交 $("#product_jifen_add").click(function () { //拼接积分参数 var jifen_obj = product_jifen(); //拼接区域积分参数 var form_jifen_data = "4," + $(".vip_quyu_integral").val() + ";5," + $(" .vip_sheng_integral").val() + ';'; //console.log(typeof form_jifen_data); $.ajax({ url: url_domain + "/mall-server/api/mall/tmp/product/add", // headers :{'Authorization':token}, type: "post", data: { "pointList": jifen_obj, "aearPoint": form_jifen_data }, success: function (obj) { if (obj.status == 0) { layer.open({ title: "添加成功！", time: 1000 }); var fenpei_index = parent.layer.getFrameIndex(window.name); //获取窗口索引 parent.layer.close(fenpei_index); // 关闭layer window.parent.location.reload(); //刷新父页面 } else { layer.open({ title: "添加失败", time: 3000 }); } }, error: function (returndata) { alert(returndata); } }); }); }); </script> </body> </html>
越努力越幸运
