mashangyoujiu/Application/Super/View/Question/create.html

<!DOCTYPE html>
<html>
<!--[1.1.96]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Question/question.css" />
    <script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
    <script type="text/javascript" src="__PUBLIC__/jquery/js/jquery.min.js"></script>
    <style type="text/css" media="screen">
        .layui-textarea{
            resize:none;
        }
    </style>
</head>
<body>
<div class="order-category order-page">
    <div class="page-head">
        提交工单
    </div>
    <div class="page-content">
        <div class="steps">
            <div class="item active">
                1.选择问题分类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div class="item active">
                2.创建工单
            </div>
            <div class="category">
                <a class="btn-category " href="javascript:;">
                    {$data_title['cname']}
                </a>
            </div>
        </div>
    </div>
    <form class="layui-form layui-form-pane" enctype="multipart/form-data">

        <div class="page-head">
            基本信息
        </div>

        <div class="content-l">

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="span-sign">*</span>应用名称</label>
                <div class="layui-input-block">
                    <select name="appid" lay-verify="required" id="appid">
                        <option value="4">码上有酒</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="span-sign">*</span>问题类型</label>
                <div class="layui-input-block">
                    <select name="type" lay-verify="required" id="sel2">
                        <option value=""></option>
                        <volist name="datatwo" id="val">
                            <option value="{$val['id']}">{$val['cname']}</option>
                        </volist>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="span-sign">*</span>问题标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" placeholder="写下您问题标题" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"><span class="span-sign">*</span>问题描述</label>
                <div class="layui-input-block">
                    <textarea placeholder="写下您问题的详细描述" class="layui-textarea" name="describe" id="texta1"></textarea>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"><span class="span-sign">*</span>操作描述</label>
                <div class="layui-input-block">
                    <textarea placeholder="请您详细描述在做什么操作时，出现了什么问题" class="layui-textarea" name="operation" id="texta2"></textarea>
                </div>
            </div>

            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <input class="layui-upload-file" type="file" accept="undefined" name="image">
                <input type="hidden" value="" id="image">
                <div class="layui-upload-list picture-frame">
                    <img class="layui-upload-img photo-size" id="demo1">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>

        <div class="page-head">
            加密信息<span>(此部分信息将做加密处理，为方便您的问题请填写正确的个人信息)</span>
        </div>

        <div class="content-l">

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="span-sign">*</span>站点网址</label>
                <div class="layui-input-block">
                    <input type="text" name="siteurl" required="" lay-verify="required" autocomplete="off" class="layui-input" value="{:$_SERVER['SERVER_NAME']}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="span-sign">*</span>用户账号</label>
                <div class="layui-input-block">
                    <input type="text" name="username" required="" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="span-sign">*</span>用户密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required="" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">远程IP</label>
                <div class="layui-input-block">
                    <input type="text" name="ip" placeholder="非必填项" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">FTP账号</label>
                <div class="layui-input-block">
                    <input type="text" name="ftpname" autocomplete="off"  placeholder="非必填项" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">FTP密码</label>
                <div class="layui-input-block">
                    <input type="password" name="ftppassword"  placeholder="非必填项" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="page-head">
            联系方式<span>(紧急情况时，工程师会与您QQ或电话联系， 请填写正确联系方式)</span>
        </div>

        <div class="content-l">

            <div class="layui-form-item">
                <label class="layui-form-label">联系QQ</label>
                <div class="layui-input-block">
                    <input type="text" name="qq" placeholder="非必填项" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="span-sign">*</span>手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" required="" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" pane="">
                <label class="layui-form-label"><span class="span-sign">*</span>短信提醒</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="call" title="状态更改提醒" lay-skin="primary" checked>
                </div>
            </div>

        </div>

        <div class="layui-form-item btn-box">
            <!-- <button class="layui-btn" lay-submit="" type="buttton" id="submit" lay-filter="formDemoPane">立即提交</button> -->
            <input type="button" id="button" class="layui-btn" value="立即提交" lay-filter="formDemoPane">
        </div>


    </form>
</div>

<script>

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

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });

    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: "{:U('/Super/Question/upload_img')}"
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                $('#image').val(res.name);
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });
    // 获取value值
    $('#button').click(function(){
        var appid = $('#appid').val();
        var type= $('#sel2').val();
        var title= $('input[name=title]').val();
        var describe= $('#texta1').val();
        var image = $('#image').val();
        var operation= $('#texta2').val();
        var siteurl= $('input[name=siteurl]').val();
        var username= $('input[name=username]').val();
        var password= $('input[name=password]').val();
        var ip= $('input[name=ip]').val();
        var ftpname= $('input[name=ftpname]').val();
        var ftppassword= $('input[name=ftppassword]').val();
        var qq= $('input[name=qq]').val();
        var phone= $('input[name=phone]').val();
        var call= $('input[name=call]').val();
        // 过滤
        if (!appid){
            layer.msg('请选择应用');
            return false;
        } else if(!type){
            layer.msg('请选择问题类型');
            return false;
        }else if(!title){
            layer.msg('请填写问题标题');
            return false;
        }else if(!describe){
            layer.msg('请填写问题描述');
            return false;
        }else if(!operation){
            layer.msg('请选择操作描述');
            return false;
        }else if(!siteurl){
            layer.msg('请填写站点网址');
            return false;
        }else if(!username){
            layer.msg('请填写用户账号');
            return false;
        }else if(!password){
            layer.msg('填写用户密码');
            return false;
        }else if(!phone){
            layer.msg('请填写手机号');
            return false;
        }

        if(title.length>50)
        {
            layer.alert("问题标题字数最多存储50个字符！" );
        }

// 验证联系人QQ
//         var reg = /^[1-9][0-9]{4,9}$/;
//         if (!reg.test(qq)) {
//             layer.alert('请输入正确格式的QQ号码');
//             return false;
//         }

// 验证联系人手机号
        var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|18[0-9]|14[57]|17[678])[0-9]{8}$/;
        if (!reg.test(phone)) {
            layer.alert('请输入正确格式的手机号码');
            return false;
        }

// 验证远程IP
//         var reg = /^([1-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])(\.([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])){3}$/gi;
//         if (!reg.test(ip)) {
//             layer.alert(' 请填写合法的IP地址');
//             return false;
//         }

// 验证站点网址
        // var reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9])+$/;
        // if (!reg.test(siteurl)) {
        //    layer.msg(' 请填写合法的站点网址，以http/https开头');
        //     return false;
        // }

        var data = {
            appid:appid,
            type:type,
            title:title,
            describe:describe,
            operation:operation,
            siteurl:siteurl,
            username:username,
            password:password,
            ip:ip,
            ftpname:ftpname,
            ftppassword:ftppassword,
            qq:qq,
            phone:phone,
            call:call,
            image:image,
        }
// 发送
        layer.confirm("确定提交工单???",function () {
            var msgIndex = layer.msg('正在提交中，请稍等', {icon: 16, time: 6000, shade: 0.4});
            $.ajax({
                url: "{:U('add')}",
                type: "POST",
                data: data,
                success: function (res) {
                    if (res.status == 0) {
                        top.layer.msg(res.msg, {time: 1000}, function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            // top.layer.closeAll();
                            // location.href = "{:U('Work/index')}"
                            // layer.close(msgIndex);
                        });
                    } else {
                        top.layer.msg(res.msg);
                        layer.close(msgIndex);
                    }
                }
            })
        })
    });
</script>
</body>
</html>