xiangqin/pages/index/talkInfo.vue

<template>
	<view style="padding: 0 30rpx;">
		<view class="" style="font-size: 40rpx;text-align: center;">
			{{info.title}}
		</view>
		<rich-text :nodes="info.content"></rich-text>
		<view class="comment">
			<view class="title u-flex u-row-between">
				<text>评论（{{total}}）</text>
				<text @click="towrite">写留言</text>
			</view>
			<view class="" style="text-align: center;font-size: 32rpx;color: #bbb;" v-if="commentList.length==0">
				暂无评论
			</view>
			<view class="commentItem" v-for="(item,index) in commentList" :key="index">
				<view class="user">
					<image :src="item.headimg" mode="" class="avatar"></image><text class="name">{{item.nickname}}</text>
				</view>
				<view class="content">
					<view class="word">
						{{item.content}}
					</view>
					<view class="contentBottom u-flex u-row-between">
						<text class="date">{{item.create_time}}</text>
						<text class="reply" @click="openpopup(item)">回复</text>
					</view>
					<!-- <view class="commentItem" v-for="(item,index) in 4" v-show="index<2">
						<view class="user">
							<image src="../../static/auth/2@2x.png" mode="" class="avatar"></image><text class="name">养乐多03y</text>
						</view>
						<view class="content">
							<view class="word">
								知识学多了就明白自己的利益是多么重要了知识学多了就明白自己的利益是多么重要了
							</view>
							<view class="contentBottom u-flex u-row-between">
								<text class="date">2023-03-21</text>
								<text class="reply">回复</text>
							</view>
						</view>
					</view> -->
					<view class="more u-flex u-row-center" v-if="item.count>0">
						<text @click="openpopup(item)">查看全部{{item.count}}条回复</text><u-icon name="arrow-right" color="#444444" size="14"></u-icon>
					</view>
				</view>
			</view>
			
		</view>
		<view class="submit u-flex u-row-between" v-show="isWrite">
			<input type="text" v-model="comment">
			<text @click="public(1)">发布</text>
		</view>
		<u-popup :show="show" mode="bottom" :round="10" @close="show=false">
			<view class="popup">
				<view class="popupTitle">
					评论回复
				</view>
				<view class="commentItem commentItem1" >
					<view class="user">
						<image :src="item.headimg" mode="" class="avatar"></image><text class="name">{{item.nickname}}</text>
					</view>
					<view class="content">
						<view class="word">
							{{item.content}}
						</view>
						<view class="contentBottom u-flex u-row-between">
							<text class="date">{{item.create_time}}</text>
							<!-- <text class="reply" @click="openpopup">回复</text> -->
						</view>
					</view>
				</view>
				<view class="evenyComment">
					<view class="evenyTitle">
						全部回复
					</view>
					<view class="commentItem " v-for="(item,index) in secondCommentList" :key="index">
						<view class="user">
							<image :src="item.headimg" mode="" class="avatar"></image><text class="name">{{item.nickname}}</text>
						</view>
						<view class="content">
							<view class="word">
								{{item.content}}
							</view>
							<view class="contentBottom u-flex u-row-between">
								<text class="date">{{item.create_time}}</text>
								<!-- <text class="reply" @click="openpopup">回复</text> -->
							</view>
							
						</view>
					</view>
				</view>
				<view class="submit u-flex u-row-between" >
					<input type="text" v-model="comment">
					<text @click="public(2)">发布</text>
				</view>
			</view>
				
			</u-popup>
	</view>
</template>

<script>
	export default {
		onReachBottom() {
				if(this.commentList.length<this.total){
					this.page++
					this.getComment()
				}
				
		},
		onLoad(option) {
			this.getinfo(option.id)
			if (!uni.getStorageSync('token')) {
				this.is_login=false
			}else{
				this.is_login=true
			}
			if (uni.getStorageSync('userInfo')) {
				this.userinfo=JSON.parse(uni.getStorageSync('userInfo'))
			}
		},
		data() {
			return {
				userinfo:{},
				is_login:false,
				info:{},
				isWrite:false,
				comment:'',
				show:false,
				page:1,
				commentList:[],
				secondCommentList:[],
				total:0,
				item:{}
			}
		},
		methods: {
			toLogin(){
					uni.navigateTo({
						url:'/pages/profile/login'
					})
			},
			towrite(){
				if(!this.is_login){
					this.toLogin()
					return
				}
				if (this.userinfo.is_info == 0) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
				this.isWrite=!this.isWrite
			},
			openpopup(item){
				this.item={}
				this.item=item
				this.secondCommentList=[]
				let data={
					id:this.info.id,
					page_num:100,
					page:1,
					type:2,
					belong_id:item.id
				}
				uni.$u.http.post('/api/Index/comment_list',data).then(res => {
					if(res.code==1){
						this.secondCommentList=res.data.data
					}
				})
				this.show=true
			},
			public(type){
				if(!this.is_login){
					this.toLogin()
					return
				}
				if (this.userinfo.is_info == 0) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
					if(!this.comment){
						this.$u.toast('请输入评论内容')
						return
					}else{
						let data={
							type:type,
							articleid:this.info.id,
							content:this.comment,
							belong_id:type==2?this.item.id:''
						}
						uni.$u.http.post('/api/Index/comment',data).then(res => {
							console.log(121,res)
								
							if(res.code==1){
								this.$u.toast('发布成功，正在审核中')
								this.isWrite=false
								this.comment=''
								this.show=false
							}
						
						})
						
					}
			},
			getinfo(id){
				uni.$u.http.post('/api/index/articlederail',{id:id}).then(res => {
				this.info=res.data
				this.getComment()
				})
			},
			getComment(){
				let data={
					id:this.info.id,
					page_num:10,
					page:this.page,
					type:1
				}
				uni.$u.http.post('/api/Index/comment_list',data).then(res => {
					if(res.code==1){
						this.total=res.data.total
						if(this.page==1){
							this.commentList=res.data.data
						}else{
							this.commentList=[...this.commentList,...res.data.data]
						}
						
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.submit{
		align-items: flex-start;
		box-sizing: border-box;
		padding: 18rpx 30rpx 0;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(0,0,0,0.5);
		input{
			box-sizing: border-box;
			padding: 0 20rpx;
			width: 598rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: #F1F1F1;
			border-radius: 36rpx;
		}
		text{
			line-height: 72rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #222222;
			background: linear-gradient(180deg, #FFBAE7 0%, #9956FF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
.comment{
	margin-top: 22rpx;
	position: relative;
	padding-bottom:166rpx;
	
	.title{
		font-size: 34rpx;
		color: #131415;
		font-weight: bold;
		margin-bottom: 36rpx;
	}
	
}
.commentItem{
		margin-top: 30rpx;
		.user{
			.avatar{
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				vertical-align: middle;
				margin-right: 20rpx;
			}
			.name{
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.content{
			margin-left: 84rpx;
			.word{
				
				font-size: 32rpx;
				margin-bottom: 20rpx;
			}
			.contentBottom{
				.date{
					font-size: 24rpx;
					color: #89898A;
				}
				.reply{
					margin-right: 20rpx;
					font-size: 24rpx;
				}
			}
			.more{
				// padding-left: 10rpx;
				text-align: center;
				font-size: 20rpx;
				color: #444444;
				margin-top: 20rpx;
				// margin-left: 92rpx;
				width: 228rpx;
				height: 40rpx;
				line-height: 40rpx;
				background: #F1F1F1;
				border-radius: 20rpx;
				text{
					margin-right: 8rpx;
				}
			}
		}
	}
	
	.popup{
		height: 800rpx;
		overflow: scroll;
		padding: 36rpx 30rpx 166rpx;
		.popupTitle{
			text-align: center;
			margin-bottom: 40rpx;
			font-size: 36rpx;
			font-weight: bold;
		}
		.commentItem1 {
			border-bottom: 2rpx solid #EAEAEA;
			padding-bottom: 44rpx
		}
		.evenyComment{
			margin-top: 28rpx;
			.evenyTitle{
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 32rpx;
			}
		}
	}
</style>