mashangyoujiu/Application/Super/View/Template/addtemplate.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>OEM零售模板</title>
    <link href="/Public/logo.ico" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/paper/css/index.css"/>
    <link rel="stylesheet" href="__PUBLIC__/paper/layui/css/layui.css" />
    <script src="__PUBLIC__/paper/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/paper/layui/layui.js"></script>
    <style>
        body,html{
            width:100%;
            height: 100%;
            overflow-x: hidden;
        }
        .layui-word-aux{
            margin-left: 110px;
        }
        .default_img{
            width:150px;
            border: 1px solid #ddd;
        }
        .default_img_box{
            padding: 10px 0px;
        }
        .container{
            width:80%;
            padding: 20px;
            margin: 0 auto;
            box-sizing: border-box;
        }
        .layui-form-item{
            max-width: 800px;
        }
        .bar {
            height: 8px;
            background: green;
        }
        .checkvideo{
            width:120px;
            position: relative;
            display: inline-block;
        }
        .videofile{
            display: block;
            opacity: 0;
            width:120px;
            height:38px;
            position: absolute;
            top:0;
            left:0;
        }
        .videofile:hover{
            opacity: 0!important;
        }
        .layui-btn {
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="container">
    <div class='content'>
        <input type="hidden" id="infoindex" value="{$infoindex}">
        <form class="layui-form" action="{:U('uploadzip')}" id="saveform">
            <input type="hidden" name="id" value="{$templateinfo['id']}">
            <div class="layui-form-item">
                <label class="layui-form-label">模板文件夹名称</label>
                <div class="layui-input-block">
                    <input type="text" name="templatename" value="{$templateinfo['templatename']}"  autocomplete="off" placeholder="模板文件夹名称" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">填写模板文件夹名称</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">模板名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" value="{$templateinfo['name']}"  autocomplete="off" placeholder="模板名称" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">填写模板名称</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">广告图片</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="test2">
                        <i class="layui-icon">&#xe67c;</i>上传缩略图
                    </button>
                </div>
                <div class="layui-input-block">
                    <div class="default_img_box">
                        <img src="{$templateinfo['img']}" onerror="this.onerror=null;this.src='/public/paper/images/wx_add.png'" alt="" class="default_img" id="head_img">
                    </div>
                    <input type="hidden" name="img" id="head_url" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="submitbtn">立即提交</button>
                </div>
            </div>
        </form>
        <br>
        <br>
        <br>
    </div>
</div>
</body>
<script src="__PUBLIC__/paper/fileupdate/js/jquery.ui.widget.js"></script>
<script src="__PUBLIC__/paper/fileupdate/js/jquery.iframe-transport.js"></script>
<script src="__PUBLIC__/paper/fileupdate/js/jquery.fileupload.js"></script>
<script>
    layui.use(['form','upload','layer','laydate'],function () {
        var form = layui.form;
        var upload = layui.upload;
        var layer = layui.layer;
        var laydate = layui.laydate;
        //日期选择器
        laydate.render({
            elem: '#tests'
            ,position: 'fixed'
            //,type: 'date' //默认，可不填
        });
        $('#dotoshowurl').click(function () {
            $('#video_img').attr('src',$('#inputurl').val());
        })
        upload.render({
            elem: '#test2' //绑定元素
            ,url: "{:U('upload')}" //上传接口
            ,done: function(res){
                //上传完毕回调
                if(res.status==1){
                    $('#head_img').attr('src',res.path);
                    $('#head_url').val(res.path);
                }else{
                    layer.msg(res.msg,{time:1500});
                }
            }
            ,error: function(){
                //请求异常回调
            }
        });
        $('#submitbtn').click(function () {
            layer.confirm('确定提交保存吗？',function () {
                $.ajax({
                    url:"{:U('addact')}",
                    data:$('#saveform').serialize(),
                    type:'post',
                    success:function (res) {
                        console.log(res);
                        if(res.status==1){
                            layer.msg(res.msg,{time:1500},function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            })
                        }else{
                            layer.msg(res.msg,{time:1500})
                        }
                    },
                    error:function (error) {
                        console.log(error);
                    }
                })
            })
        })
    })

</script>
</html>