{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;
}
.height150{
	height:150px;
}
.layui-form-label {
    width: 100px;
}
.display{ display:none}
</style>
<div class="if_wrap">
<div id="if_con">
     <div class="cus-con">
		<div class="set-top">

		</div>
<form class="layui-form layui-form-pane1" action="{:url('vip/Integral/index');}" method="post" id="addform" enctype="multipart/form-data">
  <div class="layui-form-item">
    <label class="layui-form-label">图片<br/></label>
   	<div class="layui-upload layui-form-label" style="padding-left:0;">
		<input type="file" name="image"  id="imginput" lay-verify="img"/><br/>
		<img src="<?php echo get_play_integral_image_path();?>/{$data.image}" id="imgbox" width="auto" height="200"
             <?php if(empty($data['image'])){?>
             class="display"
        <?php } ?>
        />
	</div>
  </div>
  <div class="layui-form-item height150">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary back">返回</button>
        <div class="layui-btn "><a href="{:url('vip/Integral/del');}">删除</a></div>
    </div>
  </div>
</form>


</div>
</div></div>
<script>
  $(document).ready(function(){
    $("#money").hide();
    $("#product").hide();
    $("#pass").hide();
  });

$(".back").on('click',function(){
	location.href="{:url('vip/Integral/index')}";
});
layui.use('form', function(){
  var form = layui.form;
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 2){
        return '标题也太短了吧';
      }
    },
    img:function(value){
      if(value.length <1){
        return '图片不能为空';
      }
    }
  });

  //事件监听
  form.on('radio', function(data){
  });
  
  //监听提交
  form.on('submit(*)', function(data){

	var formid = document.getElementById("addform");
	var sformData = new FormData(formid);
		$.ajax({
			type:'post',
			data:sformData,
			processData: false,  // 不处理数据
			contentType:false,
			success:function(s){
			if(s.code==200){
              layer.open({
                content: '恭喜您添加成功！',
                btn: ['确认'],
                yes: function(index, layero) {
                  window.location.href="{:url('vip/Integral/index')}";
                }
              });
			}else{
				layer.msg(s.msg, {
				    icon: 2
				});
			}
		}})

    return false;
  });
});

// 图片显示
$("#imginput").on('change',function(){
  $("#imgbox").removeClass("display");
	imgView(this);
});

// 图片显示处理函数
function imgView(filedom){
	console.log(filedom);
	// 判断是否支持fileReader
	if(window.FileReader){
		var reader = new FileReader();
		// 获取文件
		var file = filedom.files[0];
		var imagetype = /^image\//;
		// 判断是否是图片
		if(!imagetype.test(file.type)){
			layer.msg('请上传正确图片类型文件', {
			    icon: 2,
			});
			return;
		}
		// 读取完成
		reader.onload = function(e){
			// 获取图片dom
			var img = document.getElementById('imgbox');
			// 图片路径设置为读取的图片
			img.src = e.target.result;
		};
		reader.readAsDataURL(file);
	}
} 
</script>
</body>
</html>