cf-platform/Application/Home/View/default/PromoteGrade/setting.html

<extend name="Public/promote_base"/>
<block name="css">
  <link href="__CSS__/20180207/account.css" rel="stylesheet" >
  <style>
    .add-rule {
      margin-top: 10px;
      margin-bottom: 15px;
      width: 80px;
      height: 36px;
      line-height: 36px;
      background: #409eff;
      color: #fff;
      border-radius: 4px;
      border: none;
      padding: 0;
      cursor: pointer;
    }
    .delete-rule {
      margin-left: 10px;
      width: 60px;
      height: 36px;
      line-height: 36px;
      background: rgb(249,104,104);
      color: #fff;
      border-radius: 4px;
      border: none;
      padding: 0;
      cursor: pointer;
    }
    .rule-list {
      margin-bottom: 20px;
    }
    .rule-list .rule-item {
      margin-bottom: 10px;
    }
    .rule-list .rule-item .select2 {
      margin-right:  5px;
    }
    .trunk-list .table2 .l {
      width: 140px;
    }
  </style>
</block>
<block name="body">
    <div class="page-list normal_list promote-add_chlid-form">
      <div class="trunk-title">
      	<div class="location">
			<div class="location-container">当前位置：<span>评级管理></span><span>评级设定</span></div>
		</div>
      	<img src="__IMG__/20180207/icon_normal_ziqudao.png">
      	<span class="title_main">评级设定</span>
      </div>
      <div class="trunk-content article">
        <div class="trunk-list list_normal">
          <form action="{:U('PromoteGrade/saveSetting')}" novalidate="novalidate" method="post" class="base_info" id="rule-form">
            <table class="table2">
              <input type="hidden" name="id" value="<?= $setting['id'] ?? 0 ?>">
              <tr>
                <td class="l">* 评级规则名称：</td>
                <td class="r">
                  <input type="text" class="name input-txt txt" name="name" value="<?= $setting['name'] ?? '' ?>" placeholder="请输入评级规则名称">
                </td>
              </tr>
              <tr>
                <td class="l">* 对应游戏：</td>
                <td class="r">
                  <select id="baseGameId" name="base_game_id" class="reselect select_gallery" style="width: 220px;" >
                    <option value="0">请选择游戏</option>
                    <?php foreach($baseGames as $baseGame):?>
                    <option value="<?= $baseGame['id'] ?>" <?php if($baseGame['id'] == $setting['base_game_id']):?>selected<?php endif;?>>
                      <?= $baseGame['name'] ?>
                    </option>
                    <?php endforeach;?>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="l">规则开始月份：</td>
                <td class="r">
                  <input type="text" class="txt month-date" name="month_begin" placeholder="规则开始月份" value="<?= $setting['month_begin'] == 0 ? '' : date('Y-m', strtotime($setting['month_begin'] . '01')) ?>" >
                  <span style="font-size: 12px; color: #F8AC59">仅可选月份</span>
                </td>
              </tr>
              <tr>
                <td class="l">规则截止月份：</td>
                <td class="r">
                  <input type="text" class="txt month-date" name="month_end" placeholder="规则截止月份" value="<?= $setting['month_end'] == 0 ? '' : date('Y-m', strtotime($setting['month_end'] . '01')) ?>" >
                  <span style="font-size: 12px; color: #F8AC59">仅可选月份,不选则表示截止时间为永久</span>
                </td>
              </tr>
              <?php $settingConfig = $setting ? $setting['config'] : null ?>
              <tr>
                <td class="l">* 玩家角色达标等级：</td>
                <td class="r">
                  <input type="text" class="name input-txt txt" name="level" value="<?= $settingConfig['reach_level'] ?? '' ?>" maxlength="4" minlength="1" placeholder="玩家角色达标等级">
                </td>
              </tr>
              <tr>
                <td class="l" style="vertical-align: top; padding-top: 15px;"><span class="req">*</span>等级设定：</td>
                <td class="r" style="padding-top: 15px;">
                  <div style="margin-bottom: 10px">
                    <input type="text" class="name input-txt txt" name="default_grade_name" id="default_grade_name" value="<?= $settingConfig['default_grade_name'] ?? '' ?>" placeholder="默认等级名称">
                    <span style="font-size: 12px; color: #F8AC59">默认等级名称</span>
                  </div>
                  <button id="add-rule" type="button" class="add-rule">添加等级</button>
                  <div id="rule-list" class="rule-list">
                    <?php if($setting):?>
                    <?php foreach($settingConfig['grades'] as $grade):?>
                    <div class="rule-item">
                      系数值：
                      <select class="symbol-item reselect select_gallery" style="width: 60px;" >
                        <option value="1" <?php if($grade['symbol'] == 1):?>selected<?php endif;?> >>=</option>
                        <option value="2" <?php if($grade['symbol'] == 2):?>selected<?php endif;?> >></option>
                      </select>
                      <input type="text" class="value-item name input-txt txt" value="<?=$grade['value']?>" maxlength="8" minlength="1" placeholder="系数值">
                      &nbsp;&nbsp;&nbsp;&nbsp;
                      等级名称：
                      <input type="text" class="name-item name input-txt txt" value="<?=$grade['name']?>" placeholder="等级名称">
                    </div>
                    <?php endforeach;?>
                    <?php endif;?>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="l"></td>
                <td class="r">
                  <input type="button" onclick="check()" class="tj btn" value="保存" title="" style="cursor: pointer;">
                  <a class="back_btn " alt="返回上一页" title="返回上一页" href="javascript:window.history.back();">返回</a>
                </td>
              </tr>
            </table>
          </form>
        </div>
      </div>
    </div>
</block>
<block name="script">
<link rel="stylesheet" href="__STATIC__/flatpickr/flatpickr.min.css">
<script src="__STATIC__/flatpickr/flatpickr.min.js"></script>
<script src="__STATIC__/flatpickr/l10n/zh.js"></script>
<script type="text/javascript" src="__JS__/20170831/select2.min.js"></script>
<script type="text/javascript">
  $(".select_gallery").select2();
  var defaultDate = $('.month-date').val()
  $('.month-date').flatpickr({
    locale: 'zh',
    dateFormat: "Y-m",
    defaultDate: defaultDate,
  })
  $('#add-rule').on({
    click: function () {
      var html = '<div class="rule-item">'
        + '系数值：' + "\n"
        + '<select class="symbol-item reselect select_gallery" style="width: 60px;" >'
          + '<option value="1">>=</option>'
          + '<option value="2">></option>'
        + '</select>' + "\n"
        + '<input type="text" class="value-item name input-txt txt" maxlength="4" minlength="1" placeholder="系数值">' + "\n"
        + '&nbsp;&nbsp;&nbsp;&nbsp;' + "\n"
        + '等级名称：' + "\n"
        + '<input type="text" class="name-item name input-txt txt" placeholder="等级名称">'
        + '<button type="button" class="delete-rule">删除</button>'
      + '</div>';
      $('#rule-list').append(html)
      $(".select_gallery").select2();
    }
  })

  function check() {
      if (!validation()) {
        return
      }
      var form = $('#rule-form');
      var id = form.find('input[name=id]').val()
      var name = form.find('input[name=name]').val()
      var level = form.find('input[name=level]').val()
      var baseGameId = $('#baseGameId').val()
      var monthBegin = form.find('input[name=month_begin]').val()
      var monthEnd = form.find('input[name=month_end]').val()
      var defaultGradeName = form.find('input[name=default_grade_name]').val()

      $.ajax({
        type:"POST",
        url:"{:U('saveSetting')}",
        data:{
          id: id,
          name: name,
          level: level,
          default_grade_name: defaultGradeName,
          grades: getGrades(),
          month_begin: monthBegin,
          month_end: monthEnd,
          base_game_id: baseGameId
        },
        success:function(res){
            if(res.status == 1){
                layer.msg(res.info);
                setTimeout(function(){
                  window.location.href="{:U('settings')}";
                },1000);
            }else{
                layer.msg(res.info);
            }
        }
      });
      // $('#form_reg').submit();
  }

  $('#rule-list').on('click', '.delete-rule', function() {
    $(this).parents('.rule-item').eq(0).remove()
  })

  function getGrades() {
    var grades = []
    $('#rule-list').children('.rule-item').each(function(index, elem) {
      var item = $(elem)
      var symbol = item.find('.symbol-item').val()
      var value = item.find('.value-item').val()
      var name = item.find('.name-item').val()
      grades.push({
        name: name,
        value: value,
        symbol: symbol
      })
    })
    return grades
  }

  function validation() {
    var form = $('#rule-form');
    var name = form.find('input[name=name]').val()
    var level = form.find('input[name=level]').val()
    var defaultGradeName = form.find('input[name=default_grade_name]').val()
    if (name == '') {
      layer.msg('请输入评级规则名称');
      return false;
    }

    if (level == '') {
      layer.msg('玩家角色达标等级');
      return false;
    }
    var levelReg = /^\d+$/;

    if(!levelReg.test(level)){
      layer.msg('玩家角色达标等级必须为数字');
      return false;
    }
    if (level > 10000) {
      layer.msg('玩家角色达标等级不能超过10000');
      return false;
    }
    if (level < 0) {
      layer.msg('玩家角色不能小于0');
      return false;
    }
    if (defaultGradeName == '') {
      layer.msg('默认等级名称不能为空');
      return false;
    }

    var grades = getGrades()
    for(var i in grades) {
      if (grades[i].name == '') {
        layer.msg('请输入等级名称');
        return false;
      }
      if (grades[i].value == '') {
        layer.msg('请输入系数值');
        return false;
      }
      if (grades[i].value < 0) {
        layer.msg('系数值不能小于0');
        return false;
      }

      /* var numReg = /([+]\d+[.]\d+|[-]\d+[.]\d+|\d+[.]\d+|[+]\d+|[-]\d+|\d+)/ig;
      if(!numReg.test(grades[i].value)){
        layer.msg('系数值必须为整数或浮点数');
        return false;
      } */
    }

    return true;
  }
</script>

</block>