donate-parent/donate-console/src/main/webapp/resources/view/activity/activity_launch.html

<style>
    body{
        font-family: "Microsoft Yahei", "微软雅黑";
        box-sizing: border-box;
    }
    .clearfix {
        clear: both;
    }
    .content-header{
        padding-left: 22px;
    }
    .content .box-show{
        position: relative;
        margin-top: 4px;
        padding-left: 22px;
        border-radius: 3px;
        background: #ffffff;
        margin-bottom: 20px;
        width: 100%;
        height: 1700px;
        border: 1px solid #dcdcdc;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    }
    .content-setting{
        margin-top: 24px;
    }
    .content-setting .form-group{
        margin-bottom: 14px;
        height: 30px;
        line-height: 30px;
    }
    .content-setting .form-group label{
        margin: 0 22px 0 14px;
        font-family: 'SimHei'!important;
        width: 60px;
        font-size: 14px;
        font-weight: normal;
        color: #8da8b8;
    }
    .content-setting .form-group input{
        margin-right: 15px;
        width: 435px;
        height: 30px;
        font-size: 14px;
        color: #323232;
        border-radius: 0;
    }
    /*活动发起*/
    .content-setting .form-group .active-time{
        overflow: hidden;
    }
    .content-setting .form-group .active-time input.date-choose{
        width: 200px;
        height: 30px;
        font-size: 14px;
        color: #323232;
        border-radius: 0;
    }
    .content-setting .form-group .active-time span{
        margin: 0 10px 0 -5px;
        font-size: 14px;
        color: #323232;
    }
    .content-setting .form-group .prise{

    }
    .content-setting .form-group .prise .prise-detail{
        position: relative ;
        margin-bottom: 14px;
        width: 435px;
        height: 30px;
    }
    .content-setting .form-group .prise .prise-detail .award{
        padding-left: 43px;
        width: 435px;
        height: 30px;
        border: 1px solid #dcdcdc;
    }
    .content-setting .form-group .prise .prise-detail span{
        position: absolute;
        top: 1px;
        left: 1px;
        width:28px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        font-size: 14px;
        color: #323232;
        background: #eeeeee;
    }
    .content-setting .form-group .prise .prise-detail a{
        position: absolute;
        top: 0;
        right: -43px;
        font-size: 14px;
        font-family: 'SimHei'!important;
        color: #1b71c9;
    }
    .content-setting .form-group .prise .award-detail{
        margin-bottom: 14px;
        height: 30px;
        line-height: 30px;
    }
    .content-setting .form-group .prise .award-detail span{
        width: 60px;
        margin-right: 20px;
        font-size: 14px;
        color: #969696;
    }
    .content-setting .form-group .prise .award-detail input{
        width: 230px;
        height: 30px;
    }
    .content-setting .form-group .prise .award-detail select{
        width: 230px;
        height: 30px;
        border-radius: 0;
        padding: 0 12px;
    }
    .content-setting .form-group .prise .award-detail .edit-template{
        margin-left: 20px;
        width: 84px;
        height: 28px;
        line-height: 28px;
        font-family: 'SimHei'!important;
        font-size: 14px;
        text-align: center;
        color: #fff;
        background: #3c8dbc;
        border-radius: 3px;
        cursor: pointer ;
    }
    .content-setting .form-group .prise .uploadImg {
        position: relative;
        margin: 20px 0 36px 0;
        width: 90px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        font-size: 14px;
        color: #6d6d6d;
        background: -webkit-linear-gradient(top, #fff 0%,#dadada 100%);
        background: -o-linear-gradient(top, #fff 0%,#dadada 100%);
        background: -ms-linear-gradient(top, #fff 0%,#dadada 100%);
        background: linear-gradient(to bottom, #fff 0%,#dadada 100%);
        border: 1px solid #dcdcdc;
        border-radius: 3px;
    }
    .content-setting .form-group .prise .uploadImg input{
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        outline: none;
    }
    .content-setting .form-group .prise .add-price{
        margin: -16px 0 36px 0;
        font-family: 'SimHei'!important;
        font-size: 14px;
        color: #1b71c9;
        cursor: pointer;
    }
    .content-setting .form-group .project .activity-project span{
        display: inline-block;
        margin-right: 18px;
        padding: 0 14px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #323232;
        background: #ebf1f4;
        border-radius: 3px;
    }
    .content-setting .form-group .project .add-project{
        margin: 22px 0 44px 0;
        font-family: 'SimHei'!important;
        font-size: 14px;
        color: #1b71c9;
        cursor: pointer;
    }
    .content-setting .form-group .project .button a{
        display: inline-block ;
        width: 140px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        font-size: 16px;
        font-family: 'SimHei'!important;
        border-radius: 3px;
    }
    .content-setting .form-group .project .button a.launch {
        color: #fff;
        background: #3c8dbc;
    }
    .content-setting .form-group .project .button a.draft {
        margin: 0 30px 0 26px;
        color: #787878;
        background: #fff;
        border: 1px solid #dcdcdc;
    }
    .content-setting .form-group .project .button span.clear{
        font-family: 'SimHei'!important;
        font-size: 14px;
        color: #323232;
        cursor: pointer;
    }
    .introduce {
        margin-bottom: 22px;
        width: 780px;
        height: 380px;
    }
    .introduce .intro-header {
        /*position: relative;*/
        width: 100%;
        height: 54px;
        line-height: 54px;
        background: -webkit-linear-gradient(top, #fff 0%,#dadada 100%);
        background: -o-linear-gradient(top, #fff 0%,#dadada 100%);
        background: -ms-linear-gradient(top, #fff 0%,#dadada 100%);
        background: linear-gradient(to bottom, #fff 0%,#dadada 100%);
        border: 1px solid #ccc;
        border-bottom: none;
    }
    .introduce .intro-header span{
        font-size: 16px;
        color: #323232;
    }
    .introduce .intro-header span img{
        margin-left: 30px;
    }
    .introduce .intro-header span em{
        margin-left: 8px;
        font-size: 16px;
        color: #323232;
        font-style: normal;
    }
    .introduce .intro-header span input{
        position: absolute;
        top: 119px;
        left: 338px;
        width: 65px;
        outline: none;
        opacity: 0;
    }
    .introduce textarea{
        width: 780px;
        height: 325px;
        border: 1px solid #ccc;
        border-top: none;
        border-radius: 0;
    }
    /*定时发送弹出框*/
    .modal-open .modal {
        width: 100%;
        height: 100%;
    }
    .modal-open .modal .modal-dialog{
        width: 590px;
        height: 590px;
    }
    .modal-open .modal .modal-dialog .modal-content{
        width: 590px;
        height: 590px;
    }
    .setting .header{
        padding: 0 20px;
        width: 100%;
        height: 44px;
        line-height: 44px;
        background: #eeeeee;
    }
    .setting .header p{
        font-size: 16px;
        color: #323232;
    }
    .setting .header .close{
        font-size: 38px;
    }
    .setting .body{
        width: 100%;
        height: 480px;
        padding: 0 20px;
        text-align: left;
    }
    .setting .body .chooseUser{
        width: 100%;
        height: 100%;
    }
    .setting .body .chooseUser .search{
        margin: 16px 0 22px 0;
        width: 429px;
        height: 30px;
        line-height: 30px;
        position: relative;
    }
    .setting .body .chooseUser .search input{
        width: 490px;
        height: 30px;
        border-radius: 0;
    }
    .setting .body .chooseUser .search button{
        position: absolute;
        top: 0;
        right: -105px;
        margin-left: 13px;
        font-size: 14px;
        color: #1b71c9;
        border: none;
        background: none;
    }
    .setting .body .chooseUser .choose-body {
        overflow: hidden;
    }
    .setting .body .chooseUser .choose-body .item{
        width: 230px;
        height: 400px;
        border: 1px solid #dcdcdc;
    }
    .setting .body .chooseUser .choose-body .item .top{
        width: 100%;
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 14px;
        color: #8da8b8;
        background: #f5f5f5;
    }
    .setting .body .chooseUser .choose-body .item .bottom{
        padding: 20px 0 0 15px;
        width: 100%;
        height: 365px;
        overflow-y: auto;
    }
    .setting .body .chooseUser .choose-body .item .bottom .item-list{
        margin-bottom: 19px;
        overflow: hidden ;
    }
    .setting .body .chooseUser .choose-body .item .bottom .item-list input{
        float: left;
        margin-right: 14px;
        width: 14px;
        height: 14px;
    }
    .setting .body .chooseUser .choose-body .item .bottom .item-list label{
        float: left;
        width: 165px;
        overflow: hidden;
        text-overflow: ellipsis ;
        white-space: nowrap;
        font-size: 14px;
        font-weight: normal;
        color: #323232;
    }
    .setting .body .chooseUser .choose-body .center{
        margin-top: 160px;
        width: 85px;
        text-align: center;
    }
    .setting .body .chooseUser .choose-body .center .choice{
        margin-bottom: 18px;
    }
    .setting .body .chooseUser .choose-body .center button{
        width: 68px;
        height: 28px;
        line-height: 28px;
        border: 1px solid #dcdcdc;
        font-size: 14px;
        color: #323232;
        background: -webkit-linear-gradient(top, #fff 0%,#dadada 100%);
        background: -o-linear-gradient(top, #fff 0%,#dadada 100%);
        background: -ms-linear-gradient(top, #fff 0%,#dadada 100%);
        background: linear-gradient(to bottom, #fff 0%,#dadada 100%);
        border-radius: 3px;
    }
    .setting .body .chooseUser .choose-body .center button i{
        font-size: 18px;
        color: #323232;
    }
    .setting .footer{
        padding-top: 10px;
        width: 100%;
        height: 50px;
        background: #f4f4f4;
    }
    .setting .footer a{
        display: inline-block;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        text-align: center;
        border-radius: 3px;
        letter-spacing: 10px;
    }
    .setting .footer a:first-child{
        margin-right: 10px;
        width: 120px;
        color: #fff;
        background: #3c8dbc;
    }
    .setting .footer a:last-child{
        width: 80px;
        color: #959595;
        background: #fff;
        border: 1px solid #dcdcdc;
    }
    /*短息编辑弹出框*/
    .modal-open .redact .modal-dialog{
        width: 590px;
        height: 420px;
    }
    .modal-open .redact .modal-dialog .modal-content{
        width: 590px;
        height: 420px;
    }
    .redact .body{
        margin-top: 20px;
        height: 325px;
    }
    .redact .body .form-group{
        margin-bottom: 14px;
        height: 30px;
        line-height: 30px;
    }
    .redact .body .form-group label{
        margin-right: 30px;
        width: 60px;
        font-family: 'SimHei'!important;
        font-weight: normal;
        font-size: 14px;
        color: #8da8b8;
    }
    .redact .body .form-group textarea {
        margin-bottom: 14px;
        width: 456px;
        height: 190px;
        font-size: 14px;
        color: #323232;
        border-radius: 0;
    }
    .redact .body .form-group select{
        padding: 0 12px;
        width: 456px;
        height: 30px;
        font-size: 14px;
        color: #323232;
        border-radius: 0;
    }
    .redact .body .form-group span{
        font-size: 14px;
        color: #b4b4b4;
    }
    /*封面图片Banner*/
    .content-setting .form-group .uploadImage{
        position: relative;
    }
    .content-setting .form-group .uploadImage div{
        height: 28px;
        line-height: 28px;
    }
    .content-setting .form-group .uploadImage div button{
        width: 90px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        font-size: 14px;
        color: #6d6d6d;
        background: -webkit-linear-gradient(top, #fff 0%,#dadada 100%);
        background: -o-linear-gradient(top, #fff 0%,#dadada 100%);
        background: -ms-linear-gradient(top, #fff 0%,#dadada 100%);
        background: linear-gradient(to bottom, #fff 0%,#dadada 100%);
        border: 1px solid #dcdcdc;
        border-radius: 3px;
    }
    .content-setting .form-group .uploadImage div span{
        margin-left: 20px;
        font-size: 12px;
        color: #969696;
    }
    .content-setting .form-group .uploadImage input{
        position: absolute;
        top: 0;
        left: 0;
        width: 90px;
        height: 28px;
        opacity: 0;
        outline: none;
    }
    .content-setting .form-group .uploadImage .img-show {
        margin: 15px 0 25px;
        width: 160px;
        height: 160px;
        line-height: 160px;
        text-align: center;
    }
    .content-setting .form-group .uploadImage .img-show img{
        width: 100%;
        height: 100%;
    }
    .content-setting .form-group .uploadImage .img-shows {
        margin: 15px 0 30px;
        width: 480px;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }

    /*  */
    button.disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
</style>
<div class="content-wrapper" style="min-height: 924px;; z-index: 50;">
    <section class="content-header clearfix">
        <h1>活动发起</h1>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="box-show">
            <form class="form-horizontal" name="activityForm">
                <div class="content-setting">
                    <div class="form-group clearfix">
                        <label for="" class="control-label fl">活动标题</label>
                        <input type="text" class="form-control fl" ng-model="activity.name"/>
                    </div>
                    <div class="form-group clearfix">
                        <label for="" class="control-label fl">活动时间</label>
                        <div class="active-time fl">
                            <input type="text" ng-model="activity.startTime" readonly style="float:left"
                                   class="date-choose f1 form-control" placeholder="开始时间"
                                   datepicker-popup="yyyy-MM-dd" is-open="activity.$startTimeOpened"
                                   ng-required="true" max-date="activity.endTime"
                                   current-text="今天" clear-text="清除" close-text="关闭"
                                   datepicker-options="{formatDayTitle: 'yyyy年M月', formatMonth: 'M月', showWeeks: false}"
                                   ng-click="openDatePicker($event, activity, '$startTimeOpened')">
                            <span class="fl">至</span>
                            <input type="text" ng-model="activity.endTime" readonly
                                   class="date-choose f1 form-control" placeholder="结束时间"
                                   datepicker-popup="yyyy-MM-dd" is-open="activity.$endTimeOpened" min-date="activity.startTime"
                                   ng-required="true"
                                   current-text="今天" clear-text="清除" close-text="关闭"
                                   datepicker-options="{formatDayTitle: 'yyyy年M月', formatMonth: 'M月', showWeeks: false}"
                                   ng-click="openDatePicker($event, activity, '$endTimeOpened')">
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label for="" class="control-label fl">兑奖时间</label>
                        <div class="active-time fl">
                            <input type="text" ng-model="activity.receiveStartTime" readonly style="float:left"
                                   class="date-choose f1 form-control" placeholder="开始兑奖时间"
                                   datepicker-popup="yyyy-MM-dd" is-open="activity.$receiveStartTimeOpened"
                                   ng-required="true" min-date="activity.startTime" max-date="activity.endTime"
                                   current-text="今天" clear-text="清除" close-text="关闭"
                                   datepicker-options="{formatDayTitle: 'yyyy年M月', formatMonth: 'M月', showWeeks: false}"
                                   ng-click="openDatePicker($event, activity, '$receiveStartTimeOpened')">
                            <span class="fl">至</span>
                            <input type="text" ng-model="activity.receiveEndTime" readonly
                                   class="date-choose f1 form-control" placeholder="截止兑奖时间"
                                   datepicker-popup="yyyy-MM-dd" is-open="activity.$receiveEndTimeOpened"
                                   ng-required="true" min-date="activity.receiveStartTime" max-date="activity.endTime"
                                   current-text="今天" clear-text="清除" close-text="关闭"
                                   datepicker-options="{formatDayTitle: 'yyyy年M月', formatMonth: 'M月', showWeeks: false}"
                                   ng-click="openDatePicker($event, activity, '$receiveEndTimeOpened')">
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="control-label fl">活动介绍</label>
                        <div class="fl introduce">
                            <summernote lang="zh-CN" ng-model="activity.summary" height="300px">
                            </summernote>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="control-label fl">封面图片</label>
                        <div class="fl uploadImage">
                            <div><button>上传图片</button><span>(160*160)</span></div>
                            <input type="file" ng-multiple="false" onchange='angular.element(this).scope().fileChanged(this, 0)'>
                            <div class="img-show">
                                <img src="static/images/reward.png" alt="预览" title="预览"/>
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label for="" class="control-label fl">Banner</label>
                        <div class="fl uploadImage">
                            <div><button>上传图片</button><span>(1140*140)</span></div>
                            <input type="file" ng-multiple="false" onchange='angular.element(this).scope().fileChanged(this, 0)'>
                            <div class="img-show img-shows">
                                <img src="static/images/active01.png" alt=""/>
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label for="" class="control-label fl">活动奖品</label>
                            <div class="prise-list" ng-repeat="award in activity.awards">
                                <div class="prise-detail">
                                    <div class="award"> <input type="text" ng-model="award.name"></div>
                                    <span>{{$index + 1}}</span>
                                    <a ng-click="deleteAward($index)">删除</a>
                                </div>
                                <div class="award-detail clearfix">
                                    <span class="fl">数量</span>
                                    <input type="text" ng-model="award.amount" class="fl form-control">
                                </div>
                                <div class="award-detail clearfix">
                                    <span class="fl">奖品等级</span>
                                    <input type="text" ng-model="award.awardLevel" class="fl form-control">
                                </div>
                                <div class="award-detail clearfix">
                                    <span class="fl">赠送方式</span>
                                    <select name="" ng-model="award.way" class="form-control fl">
                                        <option ng-value="1">短信通知</option>
                                        <option ng-value="2">快递配送</option>
                                    </select>
                                    <!--<a class="edit-template fl" data-target="#redact" data-toggle="modal">编辑模板</a>-->
                                </div>
                                <div class="uploadImg">
                                    上传图片
                                    <input type="file" ng-multiple="false" onchange='angular.element(this).scope().fileChanged(this, $index + 2)'>
                                </div>
                            </div>
                            <div class="add-price">
                                <span ng-click="addAward()">+添加奖品</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="control-label fl">活动项目</label>
                        <div class="project fl">
                            <div class="activity-project">
                            <span ng-repeat="relatedProject in selectedProjects">
                                {{relatedProject.name}}
                            </span>
                            </div>
                            <div class="add-project" data-target="#setting" data-toggle="modal">
                                <span>+选择项目</span>
                            </div>
                            <div class="button">
                                <a ng-click="submit(true)" class="launch">发布</a>
                                <a ng-click="submit(false)" class="draft">存为草稿</a>
                                <span class="clear" ng-click="refresh()">清空内容</span>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
</div>
<!--选择关联项目弹出框-->
<div class="modal setting" role="dialog" id="setting" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header header">
                <p class="fl">选择关联项目</p>
                <div class="close fr" data-dismiss="modal" ng-click="cancelSelected()">&times;</div>
            </div>
            <div class="modal-body body">
                <div class="chooseUser">
                    <div class="search">
                        <input type="text" ng-model="keyword" ng-change="onSearch()" placeholder="请输入关键字" class="form-control">
                        <button ng-click="onSearch()">搜索</button>
                    </div>
                    <div class="choose-body">
                        <div class="item fl">
                            <div class="top">全部项目</div>
                            <div class="bottom">
                                <div class="item-list" ng-repeat="project in projects">
                                    <input ng-model="project.checked" ng-click="checkSelected(project)" type="checkbox"/>
                                    <label>{{project.name}}</label>
                                </div>
                            </div>
                        </div>
                        <div class="center fl">
                            <div class="choice"><button ng-click="addSelected()" ng-disabled="projects.length == 0" ng-class="{'disabled': projects.length == 0}">选择&nbsp;&nbsp;<i class="fa fa-angle-right"></i></button></div>
                            <div class="delete"><button ng-click="deleteSelected()" ng-disabled="selectedProjects.length ==0" ng-class="{'disabled': selectedProjects.length == 0}"><i class="fa fa-angle-left"></i>&nbsp;&nbsp;删除</button></div>
                        </div>
                        <div class="item fr">
                            <div class="top">已选项目</div>
                            <div class="bottom">
                                <div class="item-list" ng-repeat="project in selectedProjects">
                                    <input ng-model="project.checked" type="checkbox"/>
                                    <label>{{project.name}}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer footer text-right">
                <a href="" data-dismiss="modal">保存</a>
                <a href="" ng-click="cancelSelected()" data-dismiss="modal">取消</a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        var btn = document.getElementsByClassName('dropdown-toggle');
        console.log(btn.length);
        for (var i = 0; i < btn.length; i++) {
            console.log(btn);
            var sib = btn[i].nextElementSibling;
            var flag = true;
            console.log(btn[i].nextElementSibling);
            btn[i].onclick = function () {
                if (flag) {
                    sib.style.display = 'none';
                    flag = false
                } else {
                    sib.style.display = 'block';
                    flag = true
                }
            }
        }
    });
</script>