xmhjc-applet/pages/home/base/commentNew.vue

<template>
    <view class="content">
        <!-- 点击评论弹出层 -->
        <u-popup :closeable='true' :round="10" :show="popupShow" @close="close" @open="open">
            <view class="popupTitle">回复评论</view>
            <view class="popupView">
                <view class="scrollview">
                    <!-- 弹出层中意见详情 -->
                    <view class="one_comment_box">
                        <view class="comment">
                            <view class="photo">
                                <u--image shape="circle" width="48rpx" height="48rpx" :src="popupData.authorLogo" ></u--image>
                            </view>
                            <view class="rc_1" >{{popupData.authorName || '未知用户'}}</view>
                        </view>
                        <view class="comment">
                            <view class="rc_3" >{{popupData.content}}</view>    
                        </view>
                        <view class="comment_foot">
                            <view class="rc_2" @click="toReply(popupData,2)">{{popupData.createTime + ' 回复 '}}</view>
                        </view>
                    </view>
                    
                    <u-line margin='10rpx 0' color="#e4e7ed" />
                    <view v-for="(item2,index) in popupData.floorList" :key="index">
                        <view :class="item2.citeAuthorName?'one_recomment_box':'one_comment_box'">
                            <view class="comment">
                                <view class="photo">
                                    <u--image shape="circle" width="48rpx" height="48rpx" :src="item2.authorLogo" ></u--image>
                                </view>
                                <view class="rc_1">{{item2.authorName || '未知用户'}}</view>
                            </view>
                            <view class="comment">
                                <view class="rc_3" >
                                    <text v-if="item2.citeAuthorName">{{ '@'+ item2.citeAuthorName + '回复：' }}</text>
                                    {{item2.content}}
                                </view>  
                            </view>
                            <view class="comment_foot">
                                <view class="rc_2" @click="toReply(item2,3)">{{item2.createTime  + ' 回复 '}}</view>
                                <view class="flex" @click="setQalike(item2)" style="align-items: center;">
                                    <u--image v-if="item2.isLike == '1'" shape="circle" width="48rpx" height="48rpx" src="/static/myinfo/icomx_dianzan1.png" ></u--image>
                                    <u--image v-else shape="circle" width="48rpx" height="48rpx" src="/static/myinfo/icomx_dianzan.png" ></u--image>
                                    <text  style="margin-left: 8rpx;color: #666666;">{{ item2.likesCount }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            
            <view class="btnflex">
                <view  class="commentInput" >
                    <u-input :placeholder="popupPlaceholder" v-model="inputValue2" :auto-height="true" type="text"  />
                </view>
                <view class="btn" @click="submit2">
                    提交
                </view>
            </view>
		</u-popup>
    </view>
</template>
<script>
import {Qalike,QareplyPage,Qareplybyid} from '@/http/api/common.js'
import * as util from '@/pages/util/util.js'
export default {
    options: { styleIsolation: 'shared' },
props: {
    showComment: {
        type: Boolean,
        default: false,
    },
    CommentData: {
        type: Object,
        default: null,
    },
    
},
watch:{
    showComment: {
        immediate: true,
        handler(val) {
            //是否展示意见弹窗
           this.popupShow = val
        },
    },
    CommentData: {
        immediate: true,
        handler(val) {
           //意见列表数据
           this.popupData = val
        },
    },
},
data() {
    return {
        popupShow:false,
        show:false,
        inputValue:'',
        inputValue2:'',
        num:999,
        popupData:{
            authorName:'',
            createTime:'',
            content:'',
            authorLogo:'',
            floorList:[]
        },
        dataList:[],
        curNow:0,
        popupPlaceholder:'点击输入评论',
        pageNum:1,
        pageSize:2,//初始为2
        jiazaitext:'加载更多',
        replyType:2,//回复类型 1：回复主题 2：回复楼层 3：回复楼层内的评论
        replyId:''
    }
},
onReachBottom() {
},
methods: {
    async setQalike(item){
        let res = await Qalike(item.id)
        if (item.isLike == '1') {
            item.isLike = '2'
            item.likesCount = item.likesCount - 1
        }else{
            item.isLike = '1'
            item.likesCount = item.likesCount + 1
        }
    },
    async getTopicReply(){
        let res = await QareplyPage({
            pageNum:1,
            pageSize:100,
            floorId:item.id,
            topicId:item.topicId,
        })
        
        this.CommentData = {
            ...item,
            floorList:res.data.data.rows || []
        }
    },
    async submit2(){
        //对子级回复
        let res = await Qareplybyid({
            floorId:this.popupData.id,
            content:this.inputValue2,
            replyId:this.replyId,
            replyType:this.replyType, //回复类型 1：回复主题 2：回复楼层 3：回复楼层内的评论
        },this.popupData.topicId)

        if (res.data.code == 200) {
            util.toastFunc('回复成功')
            this.inputValue2 = ''

            //初始化请求页签
            this.pageNum = 1
            this.dataList = []
            //获取评论列表
            this.getTopicReply()
            this.$emit('initDatalist')
        }
    },
    open() {
        // console.log('open');
    },
    close() {
        // this.popupShow = false
        this.$emit('closeComment')
    },
    toReply(item,type){
        //获取对谁回复
        console.log(item);
        this.replyType = type
        if (type == 3) {
            this.replyId = item.id
        }else{
            this.replyId = ''
        }
        this.popupPlaceholder = `对${item.authorName}回复`
    }
}
}
</script>

<style lang="scss" scoped>
.content{
    width: 750rpx;

    position: fixed;
    bottom: 0;
    z-index: 100;
}
.comment{
    display: flex;
    width: 700rpx;
    
    margin-top: 10rpx;
}
.right_content{
     width: 598rpx;
     margin-left: 26rpx;
}
.rc_1{
    width: 500rpx;
    height: 50rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 50rpx;
    margin-left: 16rpx;
}
.rc_2{
    width: 500rpx;
    height: 50rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
}
.rc_3{
    max-width: 660rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    line-height: 48rpx;
    margin-bottom: 24rpx;
}
.btn{
    width: 150rpx;
    height: 70rpx;
    margin-left: 20rpx;
    border-radius: 40rpx;
    background: #46a6ff;
    text-align: center;
    line-height: 70rpx;
    font-size: 28rpx;
    color: #fff;
}
.popupTitle{
    width: 140rpx;
    height: 45rpx;
    line-height: 45rpx;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    text-align: left;
    color: #333333;
    margin: 30rpx;
}
.popupView{
    height: 1000rpx;
    display: flex;
    padding-top: 10rpx;
    flex-direction: column;
    align-items: center;
}
.scrollview{
    height: 900rpx;
    overflow: auto;
}
.btnflex{
    display: flex;
    flex-direction: row;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;

    width: 750rpx;
    height: 100rpx;
    background: #ffffff;
}
.commentInput{
    width: 520rpx;
    background: #EEEEEE;
    border-radius: 40rpx 40rpx 40rpx 40rpx; 
    margin-left: 30rpx;
}
.loadmore{
    height:200rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 400;
    color: #999;
    padding-top: 24rpx;
}
.commentInput{
    background: #EEEEEE;
    border-radius: 40rpx 40rpx 40rpx 40rpx; 
}
.one_recomment_box{
    width: 660rpx;
    background: #f6f6f6;
    margin: 0 auto;
    padding: 20rpx;
}
.one_comment_box{
    margin: 0 auto;
    padding: 10rpx;
}
.comment_foot{
    display: flex;
    justify-content: space-between;
}
</style>