hongze_yb_xcx/pages/video/components/comment.vue

<template>
    <view class="video-comment-wrap">
        <view class="flex action-wrap">
            <view class="item" @click="handleSetLike(1)">
                <image :src="info.op_type===1?like_act_img:like_img" mode="aspectFill"/>
                <text>{{info.like_total>0?info.like_total:''}}</text>
            </view>
            <view class="item" @click="handleSetLike(2)" style="text-align:center">
                <image :src="info.op_type===2?tease_act_img:tease_img" mode="aspectFill"/>
                <text>{{info.tease_total>0?info.tease_total:''}}</text>
            </view>
            <view class="item" @click="showComment" style="text-align:right">
                <image :src="comment_img" mode="aspectFill"/>
                <text>{{info.comment_total>0?info.comment_total:''}}</text>
            </view>
        </view>
        <view class="list-commnet-box" v-if="info.comment_list.length>0">
            <template class="item" v-for="(item,index) in info.comment_list" >
                <image class="avatar" :src="item.qa_avatar_url" mode="aspectFill" lazy-load="false" :key="index"/>
				<text :key="index">{{item.comment}}</text>
            </template>
              
        </view>
          
        <!-- 评论弹窗 -->
        <van-action-sheet 
			:show="isShowComment" 
			title="视频评论"
			@close="closeCommentHandle"
			@clickOverlay="isShowComment=false"
		>
			<view class="comment-cont" @touchmove.stop>
			   <view class="commment-top">
				   <text class="title">{{comment_obj.title}} {{comment_obj.total}}</text>
				   <view class="comment-top-right">
					   <text :class="select_comment_type === 1 && 'act'" @click="changeCommentTypeHandle(1)">全部</text>
					   <text :class="select_comment_type === 2 && 'act'" @click="changeCommentTypeHandle(2)">我的</text>
				   </view>
			   </view>
				<scroll-view class="comment-list-cont" v-if="comment_obj.total" scroll-y>
                    <view class="comment-list-item" v-for="(item,index) in commentList" :key="item.community_question_comment_id">
                        <view class="flex comment">
                            <image class="avatar" :src="item.qa_avatar_url" mode="aspectFill" lazy-load="true"/>
                            <view style="display:flex;align-items:center">{{item.content}}</view>
                        </view>
                        <view class="del" v-if="select_comment_type === 2"  @click="delCommentHandle(item,index)">删除该评论</view>
                    </view>
				</scroll-view>
                <view class="nodata" v-else>
                    <image src="@/static/nodata.png"></image>
                    <view>暂无评论</view>
                </view>
				<view class="write-wrap" :style="{bottom: writeBottom+'px'}">
                    <textarea 
                        v-model="comment_cont" 
                        placeholder="发布一条友善的评论" 
                        auto-height
                        :adjust-position="false"
                        :show-confirm-bar="false"
                        :cursor-spacing="20"
                        class="write-ipt"
                        @blur="setWritePosition(50)"
                        @focus="checkNickHandle"
                    />
				    <view class="confirm-btn" @click="publishMessageHandle">发布</view>
				</view>
			</view>
		</van-action-sheet>
    </view>
</template>

<script>
import {apiSetLike,apiHotComment,apiMyComment,apiPublishComment,apiDelComment} from '@/api/question'
export default {
    props:{
        videoInfo:null
    },
    data() {
        return {
            info:this.videoInfo,
            tease_img: require('@/static/question/tease.png'),
			tease_act_img: require('@/static/question/tease_act.png'),
			like_img: require('@/static/question/like.png'),
			like_act_img: require('@/static/question/like_act.png'),
			comment_img: require('@/static/question/comment.png'),

            isShowComment: false,
			comment_cont: '',
			writeBottom: 50,
			select_comment_type:1,//默认全部
			comment_obj: {
				title: '全部评论',
				total: 0
			},
			comment_total: 0,
			commentList: []
        }
    },
    methods: {
        /* 关闭评论弹窗 */
        closeCommentHandle() {
            this.isShowComment = false;
            this.comment_cont = '';
            this.select_comment_type = 1;//默认全部
        },

        /* 切换评论类型*/
        changeCommentTypeHandle(type) {
            if(type === this.select_comment_type) return
            this.commentList = [];
            this.select_comment_type = type;
            this.getComment();
        },

        showComment(){
            this.getComment()
            this.isShowComment=true
        },

        // 获取评论
        async getComment(flag){
            const params={
                community_question_id:this.info.community_video_id,
                curr_page: 1,
                page_size: 10000,
                source:2
            }
            const { code,data } = this.select_comment_type===1 ? await apiHotComment(params) : await apiMyComment(params);
            if(code !== 200) return
            this.commentList = data.list || [];
            this.comment_obj = {
                title: this.select_comment_type === 1 ? '全部评论' : '我的评论',
                total: data.paging.totals
            }

            // 如果flag='refresh' 则获取一次全部留言 更新到列表上面去
            if(flag==='refresh'){
                const res=await apiHotComment(params)
                const arr=res.data.list||[]
                this.info.comment_list=arr.map(item=>{
                    return {
                        comment:item.content,
                        qa_avatar_url:item.qa_avatar_url
                    }
                })
                this.info.comment_total=arr.length
            }
        },

        //删除我的评论
        delCommentHandle({community_question_comment_id},index){
            wx.showModal({
                title: "",
                content: "评论删除后不可恢复，确认删除吗？",
                confirmColor: "#EE3636",
                cancelColor: '#333',
                success:  async(res) => {
                    if( res.cancel) return
                    const { code } = await apiDelComment({ community_question_comment_id });
                    if( code !== 200 ) return
                    
                    this.commentList.splice(index,1)
                    this.comment_obj.total--
                                
                    wx.showToast({title: '删除成功'});
                    this.getComment('refresh')
                }
            })
        },

        setWritePosition(val=50) {
            console.log(val)
            this.writeBottom = val < 50 ? 50 : val-8;
        },

        checkNickHandle(e){
            this.setWritePosition(e.detail.height);
        },

        //发布留言
        async publishMessageHandle(){
            if(!this.comment_cont) return wx.showToast({title: '请输入留言内容',icon: 'none'})
            const { code } = await apiPublishComment({
                content: this.comment_cont,
                community_question_id: this.info.community_video_id,
                source:2,
            })
            if(code===200){
                wx.showToast({title: '发布成功'});
                this.comment_cont = '';
                this.getComment('refresh')
            }
        },

        //吐槽/点赞
        async handleSetLike(type){
            const res=await apiSetLike({
                community_question_id:this.info.community_video_id,
                op_type: type,
                enable: type === 1 ? Number(this.info.op_type!==1) : Number(this.info.op_type!==2),
                source:2
            })
            if(res.code===200){
                const { enabled,op_type,like_total,tease_total } = res.data;
                this.info.tease_total = tease_total;
                this.info.like_total = like_total;
                this.info.op_type = enabled === 0 ? 0 : op_type ;
                uni.showToast({
                    title: enabled === 0 ? '取消成功' : op_type=== 1 ? '点赞成功' : '吐槽成功'
                })
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.video-comment-wrap{
    .action-wrap{
        justify-content: space-between;
        padding: 0 56rpx;
        .item{
            min-width: 80rpx;
            image{
                width: 48rpx;
                height: 48rpx;
                vertical-align: middle;
            }
            text{
                font-size: 28rpx;
                color: #999;
                vertical-align: middle;
            }
        }
    }
}
.list-commnet-box{
    margin-top: 34rpx;
    background-color: #F9F9F9;
    padding: 20rpx;
    // .item{
        color: #666;
		font-size: 28rpx;
        .avatar{
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
			margin-right: 14rpx;
			vertical-align: middle;
		}
		text{
			vertical-align: middle;
			line-height: 56rpx;
			margin-right: 20rpx;
		}
    // }
}
.comment-cont {
	height: calc(100vh - 250rpx);
	border-top: 4rpx solid #F4F4F4;
    position: relative;
    padding: 24rpx 0;
    overflow: hidden;
   .commment-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 24rpx;
      .title {
         font-weight: bold;
         font-size: 30rpx;
         color: #000;
      }
      .comment-top-right {
         display: flex;
         align-items: center;
         background-color: #F6F6F6;
         border: 1px solid #F6F6F6;
         color: #666;
         border-radius: 48rpx;
         text {
            padding: 0 12rpx;
            height: 48rpx;
            line-height: 48rpx;
            &.act {
               background-color: #FFFFFF;
               color: #000;
               border-radius: 48rpx;
            }
         }
      }
   }
   .comment-list-cont {
      height: calc(100vh - 550rpx);
      overflow-y: auto;
      position: relative;
      padding: 30rpx 0;
      .comment-list-item {
			margin-bottom: 30rpx;
			padding: 0 24rpx;
			.comment { 
				color: #666; 
				.avatar{
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					flex-shrink: 0;
					margin-right: 20rpx;
				}
				view{
					flex: 1;
				}
			}
			.del { 
				color: #D80000;
				margin-top: 10rpx;
				margin-left: 76rpx;
				width: 200rpx; 
			}
      }
   }
   .write-wrap {
      padding: 0 24rpx;
      border-top: 4rpx solid #F4F4F4;
      position: absolute;
      // bottom: 50px;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      z-index: 99;
      background-color: #fff;
      padding-bottom: calc(5px + constant(safe-area-inset-bottom));
      padding-bottom: calc(5px + env(safe-area-inset-bottom));
      ::-webkit-scrollbar {
         display: none;
      }
      .write-ipt {
         padding: 30rpx 0;
         flex: 1;
      }
      .confirm-btn {
         width: 100rpx;
         margin-left: 20rpx;
         text-align: center;
         padding: 20rpx 0;
         color: #E3B377;
      }
   }
}
.nodata {
   text-align: center;
   color: #999;
}
</style>