xmhjc-applet/pages/home/exchangeDetails.vue

<template>
    <!-- 互动问答详情 -->
    <view class="bg">
        <view style="height: 10rpx;"></view>
        <!-- 顶部 问题发起人 -->
        <view class="wdbox">
            <view class="wdflex" style="align-items: center;">
                <view class="photo">
                    <u--image shape="circle" width="80rpx" height="80rpx" :src="QaDetail.authorLogo" ></u--image>
                </view>
                <view class="wen_name">{{ QaDetail.authorName }}</view>
                <view  class="follow" @click="setQacollect()">{{ QaDetail.isCollection == '1' ? '取消关注' : '关注问题' }}</view>
            </view>
            <view class="wdflex">
                <!-- <view class="wen" style="background: #ff8c33">答</view> -->
                <view class="wen_text">{{ QaDetail.content }}</view>
            </view>
            <view class="wdflex" style="justify-content: space-between;">
                <view class="wen_text2">{{ QaDetail.createTime }}</view>
                <view  class="wen_text2">{{ QaDetail.num  + '回复'}}</view>
            </view>
        </view>

        <!-- 问题回复列表 -->
        <view class="wdbox" v-for="item in newsList" :key="item.id">
            <view class="wdflex" style="align-items: center;">
                <view class="photo">
                    <u--image shape="circle" width="80rpx" height="80rpx" :src="item.authorLogo" ></u--image>
                </view>
                <view class="wen_name">{{ item.authorName }}</view>
            </view>

            <view class="wdflex">
                <view class="wen" style="background: #ff8c33">答</view>
                <view class="wen_text" style="font-weight: 700;color: #666666;">{{ item.content }}</view>
            </view>
            <view class="wdflex" style="justify-content: space-between;align-items: center;">
                <view class="wen_text2">{{ item.createTime }}</view>
                <view class="flex wen_text2" style="width: 200rpx;">
                    <view class="flex" style="align-items: center;" @click="openComment(item)">
                        <u--image shape="circle" width="48rpx" height="48rpx" src="/static/myinfo/icomx_message2.png" ></u--image>
                        <text style="margin-left: 8rpx;">{{ item.num }}</text>
                    </view>
                    <view class="flex" @click="setQalike(item)" style="align-items: center;">
                        <u--image v-if="item.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;">{{ item.likesCount }}</text>
                    </view>
                </view>
            </view>
        </view>
        <commentNew @initDatalist="'initDatalist'" :CommentData="CommentData" :showComment="showComment" @closeComment="closeComment"></commentNew>

        <view class="loadmore" @click="loadmore()" >
            {{jiazaitext}}
        </view>
        <view class="btnflex">
            <view class="commentInput"> 
                <u-input placeholder="评论" v-model="inputValue2"  type="text"  />
            </view>
            <view class="btn" @click="submit2">
                提交
            </view>
        </view>
        <view style="height:100rpx"></view>
    </view>
</template>
<script>
import {topicQaDetail,Qareplybyid,QareplyPage,Qalike,Qacollect} from '@/http/api/common.js'
import commentNew from './base/commentNew.vue'
import * as util from '@/pages/util/util.js'
export default {
    components: {
        commentNew
    },
    
data() {
return {
    newsList:[],
    pageNum:1,
    num:0,
    topicId:'',
    inputValue2:'',
    jiazaitext:'加载更多',
    loadingType:false,
    showComment:false,
    QaDetail:{
        authorLogo:'',
        name:'张三',
        title:'我们睡着了，身体都在忙些什么呢？',
        follow:'关注问题',
        time:'2024-5-20 16:54 提问',
        num:'4',
        isCollection:'1',
    },
    CommentData:null
}
},
onReachBottom() {
    this.loadmore()
},
onLoad(e) {
   this.topicId = e.id
   this.initData()
},
methods: {
    async setQacollect(){
        let res = await Qacollect(this.QaDetail.id)
        this.QaDetail.isCollection = this.QaDetail.isCollection == '1'? '2' : '1'
    },
    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 submit2(){
        //对主题回复
        let res = await Qareplybyid({
            floorId:'',
            content:this.inputValue2,
            replyId:'',
            replyType:1, //回复类型 1：回复主题 2：回复楼层 3：回复楼层内的评论
        },this.topicId)

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

            //初始化请求页签
            this.pageNum = 1
            this.CommentData = []
            //获取评论列表
            this.getTopicReply()
            this.close()
        }
    },
    async openComment(item){
        //把选中的子项回复赋值
        console.log(item);
        let res = await QareplyPage({
            pageNum:1,
            pageSize:100,
            floorId:item.id,
            topicId:item.topicId,
        })
        
        this.CommentData = {
            ...item,
            floorList:res.data.data.rows || []
        },
        this.showComment = true
    },
    closeComment(){
        this.showComment = false
    },
    openAskingQuestions(e){
        uni.navigateTo({ 
            url: '/pages/home/AskingQuestions'
        })
    },
    async initDatalist(){
      
        //每次切换页签初始化请求页签
        this.pageNum = 1
        this.newsList = []

        await this.initData()
    },
     async initData(){

        let data = {
            pageNum:this.pageNum,
            pageSize:10
        }
        let res = await topicQaDetail(data,this.topicId)
        if (res.data.code == 200 ) {
            this.QaDetail = res.data.data

            let newrows = this.QaDetail.repliesPage.rows || []

            this.newsList.push(...newrows)
            this.num = this.QaDetail.repliesPage.total
            if(this.newsList.length!=this.QaDetail.repliesPage.total){
                this.jiazaitext="加载更多"
            }else{
                this.jiazaitext="已经到底"
            }
        }
    },
    //加载更多
    loadmore(){
        console.log('下拉加载',this.jiazaitext);
        if (this.jiazaitext=="加载更多") {
            this.pageNum=this.pageNum+1
            this.jiazaitext="加载中..."
            this.initData()
        }
    },
}
}
</script>

<style lang="less" scoped>
.bg{
    background-color: #F6F6F6;
    width: 100vw;
    min-height: 100vh;
}

.loadmore{
    height:200rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 400;
    color: #999;
    padding-top: 24rpx;
}
.wdbox{
    width: 660rpx;
    min-height: 240rpx;
    background: #ffffff;
    margin: 26rpx;
    padding: 20rpx;
    border-radius: 16rpx;
}
.wen{
    width: 40rpx;
    height: 40rpx;
    background: #0084ff;
    border-radius: 8rpx;
    font-size: 28rpx;
    text-align: center;
    line-height: 40rpx;
    color: #fff;
}
.wen_text{
    margin-left: 16rpx;
    width: 590rpx;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    text-align: left;
    color: #333333;

    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}
.wen_name{
    margin-left: 16rpx;
    width: 400rpx;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    text-align: left;
    color: #666666;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
}
.wen_num{
    margin-left: 56rpx;
    width: 590rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #0084ff;
}
.wen_text2{
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #999999;
}
.wdflex{
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    margin-top: 24rpx;
}
.submitbtn{
    width: 700rpx;
    height: 80rpx;
    background: #46a6ff;
    border-radius: 40rpx;

    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    color: #ffffff;
    line-height: 80rpx;

    position: fixed;
    bottom: 10rpx;
    left: 26rpx;
}
.follow{
    width: 160rpx;
    height: 64rpx;
    background: #deeefc;
    border-radius: 4px;

    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: center;
    color: #0084ff;
    line-height: 64rpx;
}
.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;
}
.btn{
    width: 150rpx;
    height: 70rpx;
    margin-left: 20rpx;
    border-radius: 40rpx;
    background: #46a6ff;
    text-align: center;
    line-height: 70rpx;
    font-size: 28rpx;
    color: #fff;
}
/deep/.u-input{
    border: 0px;
}
</style>