JenkinsTest/components/comment/comment.vue

<style lang="sass">
@import "./../../sass/page/comment.scss";
</style>

<template>
    <section class="comment-bd">
        <ul class="list-comment">
            <li class="item-comment" v-for="(filmComment,commentIndex) in filmComments" :key="commentIndex" v-if="commentIndex<5">
                <div class="item-fl">
                    <img :src='filmComment.user.head' v-if="filmComment.user">
                </div>
                <div class="item-fr">
                    <div class="info">
                        <div class="info-fl">
                            <h4 v-if="filmComment.user">{{filmComment.user.nick}}</h4>
                            <p>{{filmComment.createTime | parseTime}}</p>
                        </div>
                        <div class="info-fr">
                            <span class="icon-zan">{{filmComment.zanCount}}</span>
                            <span class="icon-comment">{{filmComment.replyCount}}</span>
                        </div>
                    </div>
                    <div class="cont">
                        <p>{{filmComment.extend.text}}</p>

                        <ul class="list-pic ext-list" v-if="filmComment.extend.pics.length==1">
                            <li v-for="(pic,picIndex) in filmComment.extend.pics" :key="picIndex" class="item-pic" :style="{backgroundImage : 'url('+pic+'?imageview/4/0/w/400/h/400/format/)'}" @click="previewImage(commentIndex,picIndex)"></li>
                        </ul>
                        <ul class="list-pic" v-else>
                            <li v-for="(pic,picIndex) in filmComment.extend.pics" :key="picIndex" class="item-pic" :style="{backgroundImage : 'url('+pic+'?imageview/4/0/w/400/h/400/format/)'}" @click="previewImage(commentIndex,picIndex)"></li>
                        </ul>

                        <ul class="list-post">
                            <li v-for="(replie,index) in filmComment.replies" :key="index"><span v-if="replie.user">{{replie.user.nick}}：</span>{{replie.content}}</li>
                        </ul>
                    </div>
                    <p class="tip" v-if="filmComment.commentaryTitle">评：{{filmComment.commentaryTitle}}</p>
                </div>
            </li>
        </ul>
        <div class="no-comment" v-if="filmComments.length==0">
            <p>暂无评论</p>
        </div>
        <a class="btn-more" :href="downloadUrl" v-if="filmComments.length>5">进入APP查看更多影评</a>
    </section>
</template>

<script>
    import lib from 'lib'
    import _ from 'underscore'

    export default {
        data() {
            return{
                downloadUrl : lib.downloadUrl,
                filmComments : [],
                isiOS : navigator.userAgent.match(/(iPhone|iPod|iPad);?/i) //ios终端
            }
        },
        props : ["type","id","hasPlayer"],//评论类型,id，是否属于播放页
        methods : {
            //电影影评列表
            getFilmCommentsByAid(){
                let self = this;
                let url = `${lib.apiUrl}/share/getFilmCommentsByAid.do`;
                let param = {
                    aid : self.id,
                    channel : "LuciferChannel",
                    ver : 1,
                    os : 1,
                    uid : 1,
                    token : "lucifer_test_token"
                }

                $.ajax({
                    type: "get",
                    url: url,
                    data: param,
                    dataType: "jsonp",

                    success: function (ret) {
                        var ret = lib.formatHttpProtocol(ret);

                        if (ret.result == 1){
                            let filmComments = ret.data.filmComments;

                            self.filmComments = filmComments ? filmComments : [];

                            setTimeout(function(){
                                $("#commentNum").text(self.filmComments.length)
                            },0)
                        } 
                    }
                });
            },
            //电影解说影评列表
            getFilmCommentsByCid(){
                let self = this;
                let url = `${lib.apiUrl}/share/getFilmCommentsByCid.do`;
                let param = {
                    cid : self.id,
                    channel : "LuciferChannel",
                    ver : 1,
                    os : 1,
                    uid : 1,
                    token : "lucifer_test_token"
                }

                $.ajax({
                    type: "get",
                    url: url,
                    data: param,
                    dataType: "jsonp",

                    success: function (ret) {
                        var ret = lib.formatHttpProtocol(ret);

                        if (ret.result == 1){
                            let filmComments = ret.data.filmComments;

                            self.filmComments = filmComments ? filmComments : [];
                        } 
                    }
                });
            },
            previewImage(commentIndex,picIndex){
                let self = this;
                let items = [],picList = [],arr = [];

                picList = self.filmComments[commentIndex].extend.pics;

                lib.setPreviewImage(picList,picIndex);
            }
        },
        filters : {
            parseTime(value){
                return lib.handleTime(value).substring(5,17)
            }
        },
        mounted(){
            let self = this

            switch(self.type) {
                case 1 :  //电影
                    self.getFilmCommentsByAid(self.id)
                    break;
                case 2 :  //解说视频
                    self.getFilmCommentsByCid(self.id)
                    break;
                default : 
                    break;
            }
        }
    }
</script>