xiaoben-as2-php/protected/views/feedback/reply.php

<style>
    /* 弹层样式 */
    .need-pop{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
    }
    .need-pop-con{
        background: #fff;
        width: 510px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .need-pop-top{
        line-height: 30px;
        font-size: 20px;
        font-weight: bold;
        padding: 6px 12px;
    }
    .npt-close{
        font-size: 30px;
        cursor: pointer;
        line-height: 28px;
    }
    .need-pop-list{
        margin: 10px 0;
        line-height: 30px;
    }
    .need-pop-menu{
        width: 110px;
        text-align: right;
        margin-right: 4px;
    }
    .need-pop-menu b{
        color: red;
        font-weight: bold;
    }
    .gray-bg{
        background: #F0F0F0;
    }
    .need-pop-detail{
        width: 370px;
        line-height: 26px;
    }
    .need-pop-detail input,.need-pop-detail textarea{
        border: 1px solid #ccc;
        width: 100%;
    }
    .need-pop-detail input{
        height: 26px;
    }
    .prev-class{
        position: relative;
    }
    .inp-text {
        position: relative;
        text-indent: 10px;
        width: 100%;
        height: 100%;
        line-height: 30px;
        border: 1px solid #D8D8D8;
        cursor: pointer;
    }
    .select-con {
        display: none;
        border: 1px solid #ccc;
        border-top: none;
        position: absolute;
        background: #fff;
        z-index: 10;
        width: 100%;
        text-indent: 10px;
        line-height: 28px;
    }
    .select-con li {
        list-style: none;
    }
    .select-con li:hover{background: #2977ff;color: #fff;cursor: pointer;}
    .inp-text:after {
        content: '';
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #676767;
        position: absolute;
        right: 10px;
        bottom: 12px;
    }

    .list-half{
        width: 49%;
    }
    .list-half .need-pop-detail{
        width: 120px;
    }
    .need-pop-sub{
        display: block;
        margin: 20px auto 30px;
        color: #fff;
        background: #2977ff;
        padding: 2px 24px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .gray-font{
        color: rgb(153, 153, 153);
    }
    .need-warn-con{
        font-size: 12px;
        padding-left: 20px;
    }
    .add-file{
        cursor: pointer;
        font-size: 14px;
    }
    .vtm{
        vertical-align: middle;
    }


    /* 回复样式 */
    .title-detail{
        background: #EFF5FB;
        padding: 20px;
        margin: 20px 30px;
        color: #000;
    }
    .title-msg{
        font-weight: bold;
        margin-bottom: 10px;
    }
    .tar{
        text-align: right;
    }
    .flex{
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
    }
    .flex-one{
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        -o-flex: 1;
        flex: 1;
    }
    .flex-two{
        -webkit-flex: 2;
        -moz-flex: 2;
        -ms-flex: 2;
        -o-flex: 2;
        flex: 2;
    }
    .flex-three{
        -webkit-flex: 3;
        -moz-flex: 3;
        -ms-flex: 3;
        -o-flex: 3;
        flex: 3;
    }
    .great-num{
        margin-left: 10px;
    }
    .need-list{
        border-bottom: 1px solid #ccc;
        padding: 4px;
        line-height: 22px;
        min-height: 44px;
    }
    .need-list:last-child{
        border: none;
    }
    .need-detail{
        margin: 0 30px 20px;
    }
    .need-list-menu{
        width: 110px;
        align-self: center;
    }
    .need-list-main{
        align-self: center;
    }
    .download-file{
        color: #2977ff;
        cursor: pointer;
    }
    .great-opt-con{
        width: 80px;
        text-align: right;
        cursor: pointer;
    }
    .title-msg-con{
        position: relative;
        padding-right: 16px;
        margin-left: 8px;
    }
    .title-msg-con:after{
        content: '';
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 6px solid #676767;
        position: absolute;
        right: 0px;
        top: 8px;
    }
    .need-list-top{
        margin-bottom: 10px;
    }
    .great-list-name{
        display: inline-block;
        overflow: hidden;
        width: 36px;
        height: 36px;
        background: #2977ff;
        color: #fff;
        border-radius: 50%;
        font-size: 12px;
        text-align: center;
        line-height: 36px;
        margin: 6px 6px 0 0;
    }
    .menu-icon{
        width: 18px;
        height: auto;
    }
    .message-name{
        font-size: 16px;
        font-weight: bold;
        margin-right: 20px;
    }
    .message-list{
        margin-bottom: 12px;
    }
    .message-inp{
        width: 100%;
        padding: 10px;
    }
    .reply-btn{
        color: #fff;
        background: #2977ff;
        padding: 2px 24px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 10px;
    }
    .great-hook.hide{
        display: none;
    }

    .search-propose-man{
        background: #2977ff;
        color: #fff;
        width: 80px;
        height: 24px;
        text-align: center;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        margin-right: 10px;
        margin-top:15px;
    }
    .message-msg{
        word-wrap:break-word
    }
</style>
<section class="need-detail">
    <section class="need-detail search-propose-man" onclick="history.back(-1);">返回列表</section>
<article class="title-detail">
    <p class="title-msg"><?php echo $data['title']?></p>
    <div class="flex">
        <div class="flex-two gray-font">来源：<?php echo $data['origin']?></div>
        <div class="flex-two gray-font">类型：
            <?php
            if(isset($data['type'])){
                switch ($data['type']){
                    case 0:
                        echo '个人建议';
                        break;
                    case 1:
                        echo '市场反馈';
                        break;
                    case 2:
                        echo '公司决策';
                        break;
                }
            }

            ?></div>
        <div class="flex-three gray-font">提出日期：<?php echo $data['createTime']?></div>
        <div class="flex-three gray-font">期待上线时间：<?php if(isset($data['releaseTime'])){echo $data['releaseTime'];}?></div>
        <div class="great-num gray-font tar likesNum">点赞数：<?php echo $data['likesNum']?></div>
    </div>
</article>
<section class="need-detail">
    <div class="flex need-list">
        <div class="need-list-menu gray-font">问题</div>
        <div class="need-list-main flex-one">
            <?php if(isset($data['question'])) echo $data['question'];?>
        </div>
    </div>
    <div class="flex need-list">
        <div class="need-list-menu gray-font">建议</div>
        <div class="need-list-main flex-one">
            <?php if(isset($data['target'])) echo $data['target'];?>
        </div>
    </div>
    <div class="flex need-list">
        <div class="need-list-menu gray-font">📎附件</div>
        <div class="need-list-main flex-one">
            <?php
            if(isset($data['urlList']) && $data['urlList']){
            ?>
                <span class="download-file"><a href="<?php echo $data['urlList'][0]?>">下载附件</a></span>
            <?php
            }
            ?>

        </div>
    </div>
    <div class="flex need-list">
        <div class="need-list-main flex-one">
            <div class="need-list-top">
                <img src="/images/zan.png" alt="" class="vtm menu-icon">
                <span class="vtm title-msg-con">点赞&nbsp;<span class="praise_num"><?php echo $data['likesNum']?></span></span>
            </div>
            <div class="great-list like">
                <?php
                if($data['likesPeople']){
                    foreach ($data['likesPeople'] as $val){
                        if(Yii::app()->session['coachInfo']['coach_name']==$val){
                            echo '<span class="great-list-name js_add">'.$val.'</span>';
                        }else{
                            echo '<span class="great-list-name">'.$val.'</span>';
                        }

                    }
                }
                ?>
            </div>
        </div>
        <div class="great-opt-con">
            <div class="great-hook praise <?php if(isset($is_like) && $is_like==1){ echo 'hide';}?>">
                <span class="vtm">点赞</span>
                <img src="/images/zan.png" alt="" class="vtm">
            </div>
            <div class="great-hook  cancel-praise <?php if(isset($is_like) && $is_like==0){ echo 'hide';}?>">
                <span class="vtm">取消点赞</span>
                <img src="/images/zan2.png" alt="" class="vtm">
            </div>
        </div>
    </div>
    <div class="need-list">
        <div class="need-list-top">
            <img src="/images/human.png" alt="" class="vtm menu-icon">
            <span class="vtm title-msg-con">已读&nbsp;<?php echo $data['readNum']?></span>
        </div>
        <div class="great-list">
            <?php
            if($data['readPeople']){
                foreach ($data['readPeople'] as $val){
                    echo '<span class="great-list-name">'.$val.'</span>';
                }
            }
            ?>
        </div>
    </div>
    <div class="need-list">
        <div class="need-list-top">
            <img src="/images/dialog.png" alt="" class="vtm menu-icon">
            <span class="vtm">&nbsp;&nbsp;回复&nbsp;</span>
        </div>

        <?php
        if(isset($reply)){
            foreach ($reply as $item){
    ?>
            <div class="message-list">
                <div class="message-top">
                    <span class="message-name"><?php echo $item['replyPeople']?></span>
                    <span class="message-date"><?php echo $item['replyTime']?></span>
                </div>
                <div class="message-msg gray-font"><?php echo $item['content']?></div>
            </div>
        <?php
            }
        }
        ?>
        <input type="hidden" id="add_element">
        <textarea name="msg" id="msg" class="message-inp" placeholder=""></textarea>
        <input type="button" value="回复" class="reply-btn">
        <input type="hidden" name="id" value="<?php echo $data['id']?>" >
    </div>
</section>
    <script>
        $('.reply-btn').click(function () {

            var id=$('input[name=id]').val();
            var msg=$('#msg').val();
           if(msg.length>100){
               layer.msg('回复内容不能超过100个字符')
               return false;
           }
            if(id=='' || msg==''){
                return false;
            }

            $.ajax({
                url:'<?php echo $this->createUrl('feedback/sendreply')?>',
                type:'POST',
                dataType:'json',
                data:{'id':id,'msg':msg},
                success:function(res){
                    if(res.status==1){
                        var html='<div class="message-list">';
                            html+='<div class="message-top">';
                                html+='<span class="message-name">'+res.data['username']+'</span>';
                                html+='<span class="message-name">'+res.data['time']+'</span>';
                            html+='</div>';
                            html+='<div class="message-msg gray-font">'+msg+'</div>';
                        html+='</div>';
                        $('#add_element').before(html);
                        $('#msg').val('');
                    }
                }
            });
        });
        $('.praise').click(function(){

            var id=$('input[name=id]').val();
            var num=parseInt($('.praise_num').html());
            $.ajax({
                url:'<?php echo $this->createUrl('feedback/praise')?>',
                type:'POST',
                dataType:'json',
                data:{'id':id},
                success:function(res){
                    if(res.status==1){
                        num++;
                        $('.praise').addClass('hide');
                        $('.cancel-praise').removeClass('hide');
                        $('.praise_num').html(num);
                        $('.likesNum').html('点赞数：'+num);

                        html='<span class="great-list-name js_add">'+res.likePeople+'</span>';
                        $('.like').append(html);
                    }
                }
            });
        });
        $('.cancel-praise').click(function(){
            var id=$('input[name=id]').val();
            var num=parseInt($('.praise_num').html());
            $.ajax({
                url:'<?php echo $this->createUrl('feedback/cancelpraise')?>',
                type:'POST',
                dataType:'json',
                data:{'id':id},
                success:function(res){
                    if(res.status==1){
                        num--;
                        if(num<0){
                            num=0;
                        }
                        $('.praise').removeClass('hide');
                        $('.cancel-praise').addClass('hide');

                        $('.praise_num').html(num);
                        $('.likesNum').html('点赞数：'+num);
                        $('.js_add').remove();
                    }
                }
            });
        });
        $('.download-file').click(function(){
            var id=$('input[name=id]').val();

            $.ajax({
                url:'<?php echo $this->createUrl('feedback/download')?>',
                type:'POST',
                dataType:'json',
                data:{'id':id},
                success:function(res){
                    if(res.status==1){

                    }
                }
            });
        });
    </script>