{layout name="layout" /}
<style>
a ,a:hover{
    color: #fff;
    text-decoration: none;
}
.set_con {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    min-width: 1130px;
    overflow: auto;
    box-sizing: border-box;
    padding-left: 50px;
}
.layui-form-item {
    /* margin-bottom: 15px; */
    clear: both;
    width: 1130px;
    margin: 10px 0;
    float: left;
}
.layui-input, .layui-textarea {
    width: 190px;
}
#if_con {
    overflow: auto;
  background:#fff;
}
.layui-form-label {
    width: 100px;
}
.display{ display:none}
.layui-form-checked{margin-top: 10px;}
.layui-form-checkbox{margin-top: 10px;}
</style>
<div class="if_wrap">
<div id="if_con">
<div class="cus-con">
<div class="set-top">
    {$topmenu}
    {notempty name="$shareuseradd"}
      <div class="layui-btn layui-btn-warm mactive" ><a href="{$shareuseradd}"><i class="layui-icon">&#xe654;</i>添加新帐号</a></div>
    {/notempty}
</div>
<form class="layui-form layui-form-pane1" action="" method="post" id="addform" enctype="multipart/form-data">
  <div class="layui-form-item">
    <label class="layui-form-label">帐号名称</label>
    <div class="layui-input-block">
      <input type="text" name="username" id="username" class="layui-input" lay-verify="required|username" required placeholder="请输入帐号" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">帐号密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" id="password" class="layui-input" lay-verify="required|password" required placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">额度</label>
    <div class="layui-input-block">
      <input type="text" name="amount" id="amount" class="layui-input" lay-verify="required|amount" required placeholder="请输入额度" onkeyup='this.value=this.value.replace(/\D/gi,"")' autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">卡包</label>
    <div class="layui-input-inline">
      <select name="bag" id="b_id" lay-search="" lay-verify="required|b_id">
        <option value="">--请选择--</option>
          {volist name="bagdata" id="vv"}
            <option value="{$vv['id']}">{$vv['name']}</option>
          {/volist}
      </select>
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">排序</label>
    <div class="layui-input-block">
      <input type="text" name="sort" class="layui-input" id="sort" lay-verify="required|title" required placeholder="" value="100" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item" style="height:100px">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="*" id="">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div>
</div>
</div>
<script>

layui.use('form', function(){
  var form = layui.form;

  //自定义验证规则
  form.verify({
    username: function(value){
      if(value.length < 2){
        return '帐号也太短了吧';
      }
    },
    password: function(value){
      if(value.length < 6){
        return '密码最少6位数最大12位';
      }
      if(value.length > 12){
        return '密码最少6位数最大12位';
      }
    },
    amount: function(value){

    }
  });
  //监听提交
  form.on('submit(*)', function(data){
    var username = $("#username").val();
    var password = $("#password").val();
    var amount   = $("#amount").val();
    var sort     = $("#sort").val();
    var b_id     = $("#b_id").val();
    $.ajax({
      type:'post',
      url:'{:url("recommendusername/add")}',
      data:{'username':username,'password':password,'amount':amount,'sort':sort,'b_id':b_id},
      success:function(s){
        if(s.code==200){
          layer.open({
            content: '恭喜您添加成功！',
            btn: ['确认'],
            yes: function(index, layero) {
              window.location.href="{:url('vip/recommendusername/index')}";
            }
          });
        }else{
          layer.msg(s.msg, {
            icon: 2
          });
        }
      }});
    return false;
  });
});

</script>
</body>
</html>