xmhjc-applet/pages/components/comment.vue

<template>
    <view class="content">
        <!-- 评论组件 -->
        <view class="plbox">
            <view class="pl">{{num}}评论</view>
            <view class="subsection" >
                <view :class="curNow==0?'checksub':'nocheck'" @click="sectionChange(0)">最新</view>
                <view :class="curNow==1?'checksub':'nocheck'" @click="sectionChange(1)">热门</view>
                <!-- <u-subsection  
                :list="subsectionlist" :current="curNow" 
                @change="sectionChange"></u-subsection> -->
            </view>
        </view>
        <!-- 评论列表 -->
        <view class="comment" v-for="(item,index) in dataList" :key="index">
            <view class="photo">
                <u--image v-if="item.authorLogo" width="80rpx" height="80rpx" :src="item.authorLogo" ></u--image>
            </view>
            <view class="right_content">
                <view class="rc_1">{{item.authorName || '未知用户'}}</view>
                <view class="rc_2">{{item.createTime}}</view>
                <view class="rc_3" @click="openPopup(item)">{{item.content}}</view>

                <view class="rc_sub" v-for="(item2,index) in item.floorList" :key="index">
                    <!-- index 只显示3条 -->
                    <view v-if="index<2" @click="openPopup(item)" class="rc_sub_item">
                        {{item2.authorName}}:{{item2.content}}
                    </view>
                </view>

                <view class="rc_bottom">
                    <view class="rb_1">{{item.time}}</view>
                    <view @click="openPopup(item)" class="rb_2">
                        <u--image width="40rpx" height="40rpx" src="/static/index/iconm_message.png" ></u--image>
                        <view style="margin-left:8rpx">回复</view> 
                    </view>
                </view>

                <u-line margin='40rpx 0' color="#e4e7ed" />
            </view>
        </view>
        <view class="loadmore" @click="loadmore()" >
            {{jiazaitext}}
        </view>
        <!-- 对主题进行回复 -->
        <view class="w700 flex bfixed">
            <u-input class="commentInput" placeholder="点击输入评论" v-model="inputValue" :auto-height="true" type="text"  />
            <view class="btn">
                <u-button  shape="circle" size="medium" type="primary" 
                @click="submit1">提交</u-button>
            </view>
        </view>

        <!-- 点击评论弹出层 -->
        <u-popup :closeable='true' :round="10" :show="popupShow" @close="close" @open="open">
            <view class="popupView">
                <view class="scrollview">
                    <!-- 弹出层中意见详情 -->
                    <view class="comment">
                        <view class="photo">
                            <u--image width="80rpx" v-if="popupData.authorLogo" height="80rpx" :src="popupData.authorLogo" ></u--image>
                        </view>
                        <view class="right_content">
                            <view class="rc_1" @click="toReply(popupData,2)">{{popupData.authorName || '未知用户'}}</view>
                            <view class="rc_2">{{popupData.createTime}}</view>
                            <view class="rc_3" @click="toReply(popupData,2)">{{popupData.content}}</view>    
                        </view>
                    </view>
                    <u-line margin='30rpx 0' color="#e4e7ed" />
                    <view class="comment" v-for="(item2,index) in popupData.floorList" :key="index">
                        <view class="photo">
                            <u--image width="80rpx" height="80rpx" v-if="item2.authorLogo" :src="item2.authorLogo" ></u--image>
                        </view>
                        <view class="right_content">
                            <view class="rc_1" @click="toReply(item2,3)">{{item2.authorName || '未知用户'}}</view>
                            <view class="rc_2">{{item2.createTime}}</view>
                            <view class="rc_3" @click="toReply(item2,3)">
                                <text v-if="item2.citeAuthorName">{{ '@'+ item2.citeAuthorName + '回复：' }}</text>
                                {{item2.content}}
                            </view>    
                        </view>
                    </view>
                </view>
            </view>
            
            <u-line margin='20rpx 0' color="#e4e7ed" />
            <view class="w700 btnflex">
                <u-input class="commentInput" :placeholder="popupPlaceholder" v-model="inputValue2" :auto-height="true" type="text"  />
                <view class="btn">
                    <u-button  shape="circle" size="medium" type="primary" 
                    @click="submit2">提交</u-button>
                </view>
            </view>
		</u-popup>
    </view>
</template>
<script>
import {topicDetail,replyPage,topicReply} from '@/http/api/common.js'
import * as util from '@/pages/util/util.js'
export default {
    options: { styleIsolation: 'shared' },
props: {
    topicId: {
        type: String,
        default: '',
    },
},
watch:{
    topicId: {
        immediate: true,
        handler(val) {
           console.log(val);
           if(val!=''){
                //获取评论列表
                this.getTopicReply()
           }
        },
    }
},
data() {
    return {
        popupShow:false,
        show:false,
        inputValue:'',
        inputValue2:'',
        num:999,
        popupData:{
            name:'',
            userimg:'',
            content:'',
            time:'',
            sublist:[]
        },
        dataList:[],
        subsectionlist: [
            {
                name: '热门'
            },
            {
                name: '最新'
            } 
        ],
        curNow:0,
        popupPlaceholder:'点击输入评论',
        pageNum:1,
        pageSize:2,//初始为2
        jiazaitext:'加载更多',
        replyType:2,//回复类型 1：回复主题 2：回复楼层 3：回复楼层内的评论
        replyId:''
    }
},
onReachBottom() {
    this.loadmore()
},
methods: {
    //加载更多
    loadmore(){
        console.log('下拉加载',this.jiazaitext);
        if (this.pageSize == 2) {
            this.pageSize = 10
            this.dataList = []
            this.jiazaitext="加载中..."
            this.getTopicReply()
        }else{
            if (this.jiazaitext=="加载更多") {
                this.pageNum=this.pageNum+1
                this.jiazaitext="加载中..."
                this.getTopicReply()
            }
        }
        
        
    },
    async getTopicReply(){
        let res = await topicDetail({
            pageNum:this.pageNum,
            pageSize:this.pageSize,
            sortType:this.curNow==1? '1' : '',//1=热门回答: 最新回答传空
        },this.topicId)
        if (res.data.code == 200) {

            let newrows = res.data.data.repliesPage.rows || []

            this.dataList.push(...newrows)
            this.num = res.data.data.repliesPage.total
            if(this.dataList.length!=res.data.data.repliesPage.total){
                this.jiazaitext="加载更多"
            }else{
                this.jiazaitext="已经到底"
            }
        }
    },
    sectionChange(index) {
        console.log(index);
        this.curNow = index;

        //每次切换页签初始化请求页签
        this.pageNum = 1
        this.dataList = []
        this.getTopicReply()
    },
    openPopup(item){
        // 打开弹出层 
        console.log(item);
        this.popupData = item
        this.popupShow = true
    },
    async submit1(){
        //对主题回复
        let res = await topicReply({
            content:this.inputValue,
            replyType:1, 
        },this.topicId)

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

            //初始化请求页签
            this.pageNum = 1
            this.dataList = []
            //获取评论列表
            this.getTopicReply()
        }
    },
    async submit2(){
        //对子级回复
        let res = await topicReply({
            floorId:this.popupData.id,
            content:this.inputValue2,
            replyId:this.replyId,
            replyType:this.replyType, //回复类型 1：回复主题 2：回复楼层 3：回复楼层内的评论
        },this.topicId)

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

            //初始化请求页签
            this.pageNum = 1
            this.dataList = []
            //获取评论列表
            this.getTopicReply()
            this.close()
        }
    },
    open() {
        // console.log('open');
    },
    close() {
        this.popupShow = false
        // console.log('close');
    },
    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;
    background-color: #FFFFFF;
    padding: 30rpx 0 30rpx 0;
    
}
.plbox{
    width: 700rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pl{
    width: 132rpx;
    height: 45rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    line-height: 36rpx;
}


.comment{
    display: flex;
    width: 700rpx;
    
    margin-top: 40rpx;
}
.photo{
    width: 80rpx;
    height: 80rpx;
    background: #EEEEEE;
    opacity: 1;
    background-image: url('@/static/btn_mine.png');
    background-position: center center;
    background-size: contain;
}
.right_content{
     width: 598rpx;
     margin-left: 26rpx;
}
.rc_1{
    width: 500rpx;
    height: 50rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
}
.rc_2{
    width: 500rpx;
    height: 50rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
}
.rc_3{
    width: 598rpx;
    height: 80rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    line-height: 40rpx;
    margin-bottom: 24rpx;
}
.rc_sub{
    /* width: 560rpx;
    min-height: 80rpx;
    background: #F1F1F1;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;
    padding: 20rpx; */
}
.rc_sub_item{
    width: 550rpx;
    height: 80rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    line-height: 40rpx;

    background: #F1F1F1;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;
    padding: 20rpx;
}
.rc_bottom{
    display: flex;
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
    justify-content: space-between;
    margin-top: 24rpx;
}
.rb_1{
    height: 33rpx;
}
.rb_2{
    display: flex;
}
.btn{
    width: 150rpx;
    margin-left: 20rpx;
}
.popupView{
    height: 1000rpx;
    display: flex;
    padding-top: 100rpx;
    flex-direction: column;
    align-items: center;
}
.scrollview{
    height: 850rpx;
    overflow: auto;
}
.btnflex{
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    bottom: 20rpx;
    left: 20rpx;
}
.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; 
}
.bfixed{
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    border: 20rpx solid #fff;
    left: 0px;
}
</style>