<extend name="Public/base" /> <block name="body"> <link rel="stylesheet" href="__CSS__/select2.min.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="__CSS__/admin_table.css" media="all"> <link href="__STATIC__/icons_alibaba/iconfont.css" rel="stylesheet"> <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script> <script type="text/javascript" src="__STATIC__/provincecityarea/AreaData_min.js"></script> <script src="__STATIC__/layer/layer.js"></script> <script type="text/javascript" src="__JS__/select2.min.js"></script> <style> .tabcon1711 input.time { width: 150px; } #form .txt_area { width: 300px; height: 150px; } .tabcon1711 .form_unit { margin-left: 2px; } .tabcon1711 .mustmark { margin-left:-7px; } .list-ratio { display: table; } .list-ratio .li-ratio { display: flex; margin-bottom: 20px; align-items: center; } .list-ratio .li-ratio .turnover, .list-ratio .li-ratio .turnover-ratio { position: relative; } .list-ratio .li-ratio .turnover span, .list-ratio .li-ratio .turnover-ratio .error-message { color: red; position: absolute; left: 0; top: 30px; white-space: nowrap; display: none; } .iconfont-btn { cursor: pointer; } .iconfont-style { font-size: 18px; color: #fff; border-radius: 4px; border: 0; padding: 5px; margin-left: 10px; } .iconfont-selected { background-color: #0A9AF2; } .iconfont-selected:hover { background-color: #03a9f4; } .iconfont-unselected { background-color: #999; } .iconfont-unselected:hover { background-color: #ababab; } input[type=number]{ padding: 4px 6px; font-size: 12px; line-height: 20px; color: #555; vertical-align: middle; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #fff; border: 1px solid #ccc; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -webkit-transition: border linear .2s, box-shadow linear .2s; -moz-transition: border linear .2s, box-shadow linear .2s; -o-transition: border linear .2s, box-shadow linear .2s; transition: border linear .2s, box-shadow linear .2s; } </style> <div class="cf main-place top_nav_list navtab_list"> <h3 class="page_title">特殊比例申请</h3> <!-- <p class="description_text">说明:此功是创建推广员时所需填写信息</p>--> </div> <!-- 标签页导航 --> <div class="tab-wrap"> <div class="tab-content tabcon1711"> <!-- 表单 --> <form id="form" action="{:U('addRatio')}" method="post" class="form-horizontal"> <!-- 基础文档模型 --> <div id="tab1" class="tab-pane in tab1"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="l"><i class="mustmark">*</i>推广公司:</td> <td class="r"> <select name="company_id" id="company_id" class="select_gallery"> <option value="">请选择公司</option> <volist name="companyList" id="vo"> <option value="{$vo.id}">{$vo.company_name}</option> </volist> </select> <span class="notice-text"></span> </td> </tr> <tr> <td class="l"><i class="mustmark">*</i>已申请游戏:</td> <td class="r promote_id"> <select name="relation_game_id" id="relation_game_id" class="select_gallery"> <option value="">请选择游戏</option> <volist name="gameList" id="vo"> <option value="{$vo.relation_game_id}" data-original="{$vo.original_package_name}">{$vo.relation_game_name}</option> </volist> </select> <span class="notice-text">因功能未完善,当前可选择全部游戏</span> </td> </tr> <tr> <td class="l">原包名:</td> <td class="r table_radio"> <span class="form_radio table_btn" id="original_package_name" style="color: red;">请先选择游戏</span> <span class="notice-text"></span> </td> </tr> <tr> <td class="l"><i class="mustmark">*</i>分成比例设定:</td> <td class="r table_radio"> <label>默认分成比例:</label> <input type="number" class="txt ratio" name="ratio" id="ratio" value="{$record.ratio|default='0.00'}" placeholder="" οninput="value=value.replace(/[^\w\.\/]/ig, '')" style="width: 60px;float: left;"> <span class="form_unit">%</span> <span class="notice-text"></span> </td> </tr> <tr><td style="height: 10px;"></td></tr> <tr> <td class="l"></td> <td class="r table_radio"> <div class="list-ratio"> <div class="li-ratio"> <label class="instanceof_text" style="margin-right: 10px;">流水分成设定:</label> <span class="iconfont-btn iconfont-btn-add" title="添加流水比例"><i class="iconfont-style iconfont-selected iconfont iconjiahao1"></i></span> <span class="iconfont-btn iconfont-btn-del" title="删除流水比例"><i class="iconfont-style iconfont-unselected iconfont iconjianhao"></i></span> </div> </div> <span class="notice-text" style="width: auto;"></span> </td> </tr> <tr> <td class="l"><i class="mustmark">*</i>生效期限:</td> <td class="r table_radio"> <div style="float: left;"> <input type="text" class="txt time" name="begin_time" id="begin_time" placeholder="开始时间" value=""> - <input type="text" class="txt time" name="end_time" id="end_time" placeholder="结束时间" value=""> </div> <span class="notice-text">结束时间不填则默认永久。</span> </td> </tr> <tr> <td class="l">备注:</td> <td class="r table_radio"> <textarea type="text" name="remark" id="remark" class="txt_area"></textarea> <span class="notice-text"></span> </td> </tr> </tbody> </table> </div> <div class="form-item cf"> <button class="submit_btn mlspacing" id="submit" type="submit" target-form="form-horizontal"> 保存 </button> <a class="submit_btn " alt="返回上一页" title="返回上一页" href="javascript:window.history.back();" > 返回 </a> </div> </form> </div> </div> </block> <block name="script"> <link href="__STATIC__/datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css"> <php>if(C('COLOR_STYLE')=='blue_color') echo '<link href="__STATIC__/datetimepicker/css/datetimepicker_blue.css" rel="stylesheet" type="text/css">';</php> <link href="__STATIC__/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script> <script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script> <script src="__STATIC__/czinputcheck.js?v=1.29" type="text/javascript"></script> <script type="text/javascript"> //导航高亮 highlight_subnav("{:U('index')}"); $(".select_gallery").select2(); $(function(){ $('.time').datetimepicker({ format: 'yyyy-mm-dd', language: "zh-CN", minView: 2, autoclose: true }); showTab(); var promoteGameRatioData = {}; promoteGameRatioData.ratio = '0.00'; promoteGameRatioData.begin_time = ''; promoteGameRatioData.end_time = ''; promoteGameRatioData.remark = ''; $('#relation_game_id').change(function (e) { var original_package_name = $('#relation_game_id option:selected').data("original"); if(original_package_name == ''){ original_package_name = '未配置原包名' } $("#original_package_name").html(original_package_name); }); $('#ratio, #begin_time, #end_time, #remark').change(function () { var val = $(this).val(); var elementIdName = $(this).attr('id'); promoteGameRatioData[elementIdName] = val; }); subevn(); function subevn(){ $('#submit').off("click"); $('#submit').click(function (e) { //查看是否报错 var flag = true; var obj = { "company_id":["required","推广公司不能为空","select"], "relation_game_id":["required","游戏不能为空","select"], "ratio":["number","默认比例必须是大于0的数字"], "begin_time":["date","开始时间不能为空"], "end_time":["nocheck"], "remark":["nocheck",'',"textarea"] } var cres = CIC.checkAddInput(obj); if(!cres){ return false; } if(cres.ratio > 100){ layer.msg("默认比例不能大于100", {icon: 2}); return false; } $(".error-message").each(function(index,elm){ var t = $(elm).css("display"); if(t == 'block' || t == 'inline'){ flag = false; layer.msg("请先处理错误的比例配置", {icon: 2}); return false; } }) $(".turnover_money").each(function(index,elm){ var t = $(elm).val(); if(t == ''){ flag = false; layer.msg("流水及比例不允许为空", {icon: 2}); return false; } }) if(!flag){ return false; } var target = $('form').get(0).action; var query = $('form').serialize(); var that = this; $(that).addClass('disabled').attr('autocomplete','off').prop('disabled',true); $.post(target,query).success(function(data){ if(layer) {layer.closeAll('loading');} if (data.code==1) { if (data.url) { updateAlert(data.msg + ' 页面即将自动跳转~'); }else{ updateAlert(data.msg); } setTimeout(function(){ $(that).removeClass('disabled').prop('disabled',false); if (data.url) { location.href=data.url; }else if( $(that).hasClass('no-refresh')){ $('#tip').find('.tipclose').click(); }else{ location.reload(); } },1500); }else{ $(that).removeClass('disabled').prop('disabled',false); layer.msg(data.msg,{icon: 2}); } }); }); } $('.iconfont-btn-add').click(function (e) { var delBtn = $('.iconfont-btn-del'); var html = ''; html += '<div class="li-ratio">'; html += '<label class="instanceof_text">月流水:</label>'; html += '<select name="instanceof[]" style="width: 50px;margin-right: 10px;">'; html += '<option value="1">≥</option>'; html += '<option value="2">></option>'; html += '</select>'; html += '<div class="turnover">'; html += '<input type="text" class="txt turnover_money" name="turnover[]" value="" placeholder="请输入金额" onKeyUp="value=value.replace(/[^\\w\\.\\/]/ig, \'\')" style="width: 100px;margin-right: 10px;">'; html += '<span class="error-message"></span>'; html += '</div>'; html += '<label>分成比例:</label>'; html += '<div class="turnover-ratio">'; html += '<input type="text" class="txt turnover_ratio" name="turnover_ratio[]" value="" placeholder="请输入比例" onKeyUp="value=value.replace(/[^\\w\\.\\/]/ig, \'\')" style="width: 60px;">'; html += '<span class="form_unit" style="margin-right: 10px;">%</span>'; html += '<span class="error-message"></span>'; html += '</div>'; html += '</div>'; $('.list-ratio').append(html); subevn(); if ($('.list-ratio').children().length > 1 && delBtn.children('i').hasClass('iconfont-unselected')) { delBtn.children('i').removeClass('iconfont-unselected'); delBtn.children('i').addClass('iconfont-selected'); } $('.list-ratio').children(':last-child').children('.turnover').children('input').change(function (e) { turnoverChangeHandle(); }); $('.list-ratio').children(':last-child').children('.turnover-ratio').children('input').change(function (e) { turnoverRatioChangeHandle(); }); }); $('.list-ratio').children('.li-ratio').children('.turnover').children('input').change(function (e) { turnoverChangeHandle(); }); $('.list-ratio').children('.li-ratio').children('.turnover-ratio').children('input').change(function (e) { turnoverRatioChangeHandle(); }); function turnoverChangeHandle() { $('.list-ratio').children('.li-ratio').children('.turnover').children('input').each(function () { var that = $(this); var thatLiRatio = that.parent().parent(); var thatLiRatioIndex = thatLiRatio.index(); var prevTurnover = 0; var prev = thatLiRatio.prev().children().children('input'); var thatTurnover = parseFloat(that.val()); if (thatLiRatioIndex > 0) { prevTurnover = parseFloat(prev.val()); prevTurnoverHandle(thatTurnover, prevTurnover, that); } }); } function turnoverRatioChangeHandle() { var ratio = parseFloat($('#ratio').val()); $('.list-ratio').children('.li-ratio').children('.turnover-ratio').children('input').each(function () { var that = $(this); var thatLiRatio = that.parent().parent(); var thatLiRatioIndex = thatLiRatio.index(); var thatTurnoverRatio = parseFloat(that.val()); if (thatLiRatioIndex === 1) { prevTurnoverRatio = ratio; prevTurnoverRatioHandle(thatTurnoverRatio, prevTurnoverRatio, that, true); } else { var prev = thatLiRatio.prev().children('.turnover-ratio').children('input'); var prevTurnoverRatio = parseFloat(prev.val()); prevTurnoverRatioHandle(thatTurnoverRatio, prevTurnoverRatio, that); } }); } function prevTurnoverHandle(thatTurnover, prevTurnover, that) { if (thatTurnover <= prevTurnover) { that.parent().children('span').text('月流水必须大于上一个月流水'); that.parent().children('span').show(); } else { that.parent().children('span').hide(); } return true; } function prevTurnoverRatioHandle(thatTurnoverRatio, prevTurnoverRatio, that, isDefault = false) { // if (thatTurnoverRatio <= prevTurnoverRatio) { // var msg = isDefault ? '月流水分成比例必须大于默认分成比例' : '月流水分成比例必须大于上一个月流水分成比例'; // that.parent().children('.error-message').text(msg); // that.parent().children('.error-message').show(); // } else { // that.parent().children('.error-message').hide(); // } return true; } $('.iconfont-btn-del').click(function (e) { var that = $(this); if ($('.list-ratio').children().length > 1) { $('.list-ratio').children(':last-child').remove(); if ($('.list-ratio').children().length === 1) { that.children('i').removeClass('iconfont-selected'); that.children('i').addClass('iconfont-unselected'); } } }); }); </script> </block>