mission_list.html 15.1 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>鹿鸣社_任务发布</title>
    <link href="__TMPL__Public/assets/css/reset.css" rel="stylesheet" type="text/css" />
    <link href="__TMPL__Public/assets/css/common.css" rel="stylesheet" type="text/css" />
    <link href="__TMPL__Public/assets/css/style.css" rel="stylesheet" type="text/css" />
    <link href="__TMPL__Public/assets/css/modal.css" rel="stylesheet" type="text/css" />
    <style>
        .img_box{
            width:100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index:1;
            background-color: #FFF;
            overflow: hidden;
            max-height: 100%;

        }
        .img_box img{
            width: auto;
        }
        .upload{
            z-index: 2;
        }
    </style>
</head>
<body>
<tc_include file="Public:header"/>
<tc_include file="Public:nav"/>
<div class="inbanner" style="background-image: url(__TMPL__Public/assets/images/banner/inbanner.jpg);">
    <!--分类-->
    <div class="catebox">
        <div class="in-catebox">
            <div class="in-cate-tit">鹿鸣社</div>
            <ul class="in-cate-nav">
                <li><a href="{:U('Will/explain')}">入会说明</a></li>
                <li><a href="#myModal" data-toggle="modal">入会申请</a></li>
                <li class="active"><a href="{:U('Will/mission_list')}">任务发布</a></li>
                <li><a href="{:U('Will/events_list')}">近期活动</a></li>
                <li><a href="{:U('Will/produce_list')}">双创项目</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="page-container">
    <div class="main">
        <ul class="task-list">
            <volist name="list" id="vo">
                <li class="pull-left" data-id="{$vo.id}">
                    <div class="task-listbox">
                        <div class="task-header">
                            <div class="task-title"><a href="{:U('Will/mission_detail', array('id'=>$vo['id']))}">{$vo.name}</a></div>
                            <div class="task-desc">投稿截止:2018-1-23</div>
                            <div class="task-status t-ing"><span>投稿中</span></div>
                        </div>
                        <div class="task-pic">
                            <a href="{:U('Will/mission_detail', array('id'=>$vo['id']))}" class="scale"><img src="{:sp_get_asset_upload_path($vo['thumb'])}"/></a>
                        </div>
                        <div class="task-footer">
                            <a href="#myModal1" data-toggle="modal" class="btn-contribute"><span>投稿</span></a>
                            <a href="{:U('Will/mission_detail', array('id'=>$vo['id']))}" class="t-link t-abs-link">活动详情></a>
                        </div>
                    </div>
                </li>
            </volist>
        </ul>
    </div>
</div>

<div id="myModal1" class="modal fade" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>任务发布投稿表</h4>
            </div>
            <div class="modal-body">
                <form action="" method="post" id="mission">
                    <input type="hidden" name="mid" value=""/>
                    <div class="row">
                        <div class="row-title">
                            <h5>投稿人姓名</h5>
                        </div>
                        <div class="row-con cf">
                            <div class="ipt-container lf">
                                <input type="text" name="name" placeholder="投稿人姓名">
                            </div>
                            <div class="slt-list lf" id="city">
                                <div class="slt-container lf">
                                    <select name="province" class="mm-select prov">
                                        <option value="天津"></option>
                                    </select>
                                </div>
                                <div class="slt-container lf">
                                    <select name="city" class="mm-select city"><option value="天津"></option></select>
                                </div>
                            </div>
                            <div class="ipt-container lf">
                                <input id="d11" type="text" name="birth" placeholder="出生年月" onClick="WdatePicker({skin:'twoer'})"/>
                            </div>
                            <div class="ipt-container lf">
                                <input type="text" name="school" placeholder="所在公司或高校">
                            </div>
                            <div class="radio-container lf">
                                <label>性别:</label>
                                <input type="radio" name="sex" value="1" checked>
                                <input type="radio" name="sex" value="2">
                            </div>
                            <div class="ipt-container lf">
                                <input type="text" name="major" placeholder="专业">
                            </div>
                            <div class="ipt-container lf">
                                <input type="text" name="mobile" placeholder="手机号">
                            </div>
                            <div class="slt-container lf">
                                <select name="classes" id="slt_0">
                                    <option selected>一年级</option>
                                    <option>二年级</option>
                                    <option>三年级</option>
                                </select>
                            </div>
                            <div class="ipt-container lf">
                                <input type="text" name="email" placeholder="邮箱">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="row-title">
                            <h5>专业经验</h5>
                        </div>
                        <div class="row-con">
                            <div class="textarea-container">
                                <textarea name="experience" placeholder="相关专业经验(绘画、设计、广告、文创、营销等)简要描述"></textarea>
                            </div>
                            <div class="textarea-container">
                                <textarea name="product" placeholder="相关创作或获奖作品简要描述"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="row-title">
                            <h5>作品描述</h5>
                        </div>
                        <div class="row-con">
                            <div class="file-container">
                                上传详细附件
                                <input type="file" name="att" id="att">
                            </div>
                            <div class="file-container" style="display:none;border:none;" id="att_file"></div>
                            <div class="textarea-container">
                                <textarea id="txt" name="product_description" placeholder="投稿作品创意概述"></textarea>
                                <p>
                                    <span id="txt_num">0</span>/500字
                                </p>
                            </div>
                            <div class="pic-container">
                                <div class="pic-title">
                                    <p>投稿作品图片,3~5张,jpg、png或jif格式。</p>
                                </div>
                                <div class="btn-list cf">
                                    <div class="btn-item lf">
                                        <div class="img_box">
                                        </div>
                                        <i class="icon"></i>
                                        <p>上传投稿作品图片</p>
                                        <input type="file" name="images[]" class="upload" id="id_photos">
                                    </div>
                                    <div class="btn-item lf">
                                        <div class="img_box">
                                        </div>
                                        <i class="icon"></i>
                                        <p>上传投稿作品图片</p>
                                        <input type="file" name="images[]" class="upload" id="id_photos1">
                                    </div>
                                    <div class="btn-item lf">
                                        <div class="img_box">
                                        </div>
                                        <i class="icon"></i>
                                        <p>上传投稿作品图片</p>
                                        <input type="file" name="images[]" class="upload" id="id_photos2">
                                    </div>
                                    <div class="btn-item lf">
                                        <div class="img_box">
                                        </div>
                                        <i class="icon"></i>
                                        <p>上传投稿作品图片</p>
                                        <input type="file" name="images[]" class="upload" id="id_photos3">
                                    </div>
                                    <div class="btn-item lf">
                                        <div class="img_box">
                                        </div>
                                        <i class="icon"></i>
                                        <p>上传投稿作品图片</p>
                                        <input type="file" name="images[]" class="upload" id="id_photos4">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="sub-container">
                            <input type="button" name="submit" value="确认提交">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<tc_include file="Portal/Will:apply"/>
<tc_include file="Public:footer"/>
<!-- js -->
<script src="__TMPL__Public/assets/js/jquery.min.js"></script>
<script src="__TMPL__Public/assets/js/common.js"></script>
<script src="__TMPL__Public/assets/js/modal.js"></script>
<script type="text/javascript" src="__TMPL__Public/assets/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="js/jquery.cityselect1.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/ajaxfileupload.js"></script>
<script>
    // $('#myModal').modal({

    // })
    $('#myModal').on('shown.bs.modal', function () {
        document.documentElement.style.overflow='hidden';
    })
    $('#myModal').on('hidden.bs.modal', function () {
        document.documentElement.style.overflow='auto';
    })
    $('#myModal1').on('shown.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var mid = button.parents('.pull-left').data('id')
        $('input[name=mid]').val(mid);
        document.documentElement.style.overflow='hidden';
    })
    $('#myModal1').on('hidden.bs.modal', function () {
        $('input[name=mid]').val('');
        document.documentElement.style.overflow='auto';
    })
</script>
<!--城市-->
<script type="text/javascript">
    $("#city").citySelect({nodata:"none",required:false});
</script>
<script>
    // 附件上传
    $('#att').on('change',function(){
        var fileId = $(this).attr('id');
        $.ajaxFileUpload({
            url: "{:U('personalUploadAtt')}",   //处理图片的脚本路径
            type: 'post',       //提交的方式
            secureuri: false,   //是否启用安全提交
            fileElementId: fileId,     //file控件ID
            dataType: 'json',  //服务器返回的数据类型
            success: function (data) {  //提交成功后自动执行的处理函数
                if(data.status) {
                    $('#att_file').show();
                    $('#att_file').append('<a target="_blank" href="'+data.file+'">我上传的附件</a><input type="hidden" name="att" value="'+data.data+'"/>');
                } else {
                    alert(data.msg);
                }
            },
            error: function (data, status, e) {   //提交失败自动执行的处理函数
                alert(e);
            }
        })
    });
    // 图片上传
    $('.upload').on('change',function(){
        var imgHidden = $(this).parent();
        var imgWarp = $(this).parent().find('.img_box');
        var fileId = $(this).attr('id');
        $.ajaxFileUpload({
            url: "{:U('personalUpload')}",   //处理图片的脚本路径
            type: 'post',       //提交的方式
            secureuri: false,   //是否启用安全提交
            fileElementId: fileId,     //file控件ID
            dataType: 'json',  //服务器返回的数据类型
            success: function (data) {  //提交成功后自动执行的处理函数
                if(data.status) {
                    imgWarp.append('<img src="'+ data.file +'" height="100%" />');
                    imgHidden.append('<input type="hidden" name="images[]" value="'+data.data+'"/>');
                } else {
                    alert(data.msg);
                }
            },
            error: function (data, status, e) {   //提交失败自动执行的处理函数
                alert(e);
            }
        })
    });
</script>
<script>
    $('input[name=submit]').click(function(){
        var btn = $(this);
        var text = btn.val();
        var form = $('#mission').serialize();
        $.ajax({
            url:"{:U('Will/submit_mission')}",
            type:"POST",
            data:form,
            dateType:"json",
            beforeSend: function () {
                // Handle the beforeSend event
                btn.val('提交中...').attr('disabled', true);
            },
            success:function (data) {
                if(data.status) {
                    alert(data.msg);
                    location.reload();
                } else {
                    alert(data.msg);
                }
            },
            error: function (data, status, e) {   //提交失败自动执行的处理函数
                alert(e);
            },
            complete: function () {
                // Handle the complete event
                btn.val(text).attr('disabled', false);
            }
        })
    })
    $('#txt').keyup(function() {
        var len=$(this).val().length;
        $('#txt_num').html(len);
    });
</script>
</body>
</html>