gree_leran/pages/newsInfo/newsInfo.vue

<template>
	<view class="case-info-box">
		<view class="case-info">
			<view class="user-info">
				<up-avatar :src="info.iamge" size="70"></up-avatar>
				<!-- <up-text :text="info.name"></up-text>1 -->
				<view class="user-info-box">
					<view class="user-name">
						<up-text text="作者名" size="33rpx" :bold="true"></up-text>
					</view>
					<view class="user-data">
						<up-text :text="'发布于-'+info.createTime"></up-text>
					</view>
				</view>
			</view>
			<view class="title-info">
				<view class="title-info-main">
					<up-text :text="info.title" bold="true" size="47rpx"></up-text>
				</view>
				<view class="title-info-fu">
					<up-text :text="info.content" color="#8f8f8f"></up-text>
				</view>
			</view>
			<view class="body-info">
				<up-text :text="info.description" size="40rpx"></up-text>
				<img :src="info.imageUrl" alt="" />
			</view>
		</view>
		<view class="comment-info">
			<view class="comment-titls">
				评论留言
			</view>
			<view class="comment-titls-list">
				<CommentsBox @addComment="addComment" v-for="(item, index) in commentList" :key="item.id" :data="item">
				</CommentsBox>
			</view>
		</view>
		<InputBox v-if="inputVisible" @submit="submitNote" @blurCom="blurCom"></InputBox>
		<view class="input-di">
			<view class="input-di-ico" style="width: 30vw;">
				<up-icon @click="clickLike" v-if="info.isLike" name="heart-fill" color="red" size="28"></up-icon>
				<up-icon @click="clickLike" v-else name="heart" color="#000" size="28"></up-icon>
				<up-icon @click="clickCollection" v-if="info.isCollection" name="star-fill" color="#ffe135" size="28"></up-icon>
				<up-icon @click="clickCollection" v-else name="star" color="#000" size="28"></up-icon>
			</view>
			<view class="input-di-button" @click="addComment()">评论</view>
		</view>
		<view class="di"></view>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		getCastInfo
	} from '@/apis/cast.js'
	import{getImageById}from '@/apis/user.js'
	import {
		getCommentsByRelatedPostId,
		addComments
	} from '@/apis/comments.js'
	//点赞列表
	import {addLike} from '@/apis/likes.js'
	//收藏列表
	import {addCollections} from "@/apis/collections.js"
	const id = ref(null);
	const value = ref('');
	const src = ref('path/to/avatar'); // 替换为实际头像路径
	const inputVisible = ref(false);
	const inputContent = ref('');
	const inputHeight = ref('40px');
	const info = reactive({
		caseId: null,
		title: null,
		content: null,
		description: null,
		imageUrl: null,
		userId: null,
		name: null,
		createTime:null,
		isLike:false,
		isCollection:false,
		iamge:null,
	})
	const commentList = ref([]);
	const currParentCommentId = ref(null);
	const currReplyUseId = ref(null);
	const getInfo = async (id) => {
		let res = await getCastInfo(id);
		if (res.code == 200) {
			console.log("详细数据", res.data);
			return res;
		}
		return null;
	}

	const addComment = (data) => {
		if(data!=undefined){
			currParentCommentId.value = data.parentCommentId | null;
			currReplyUseId.value = data.replyUseId | null;
		}else{
			currParentCommentId.value=null;
			currReplyUseId.value=null;
		}
		showInputBox();
		// 点击写笔记，唤起软件盘
	}
	const submitNote = (text) => {
		inputContent.value = text;
		submitComment();
		inputContent.value = null;
	}
	const blurCom = () => {
		// this.focus = false
		inputVisible.value = false;
	}
	const showInputBox = () => {
		inputVisible.value = true;
		uni.nextTick(() => {
			// this.focus = true
		})
		// inputVisible.value = false;
	}
	const hideInputBox = () => {}
	const adjustHeight = (event) => {
		inputHeight.value = event.target.scrollHeight + 'px';
	}
	const submitComment = async () => {
		console.log("提交评论", currParentCommentId.value,currReplyUseId.value);
		let res = await addComments({
			relatedPostId: info.caseId,
			commentContent: inputContent.value,
			parentCommentId: currParentCommentId.value,
			replyUseId: currReplyUseId.value,
		})
		currParentCommentId.value = null;
		currReplyUseId.value = null;
		console.log("保存评论", res);
		// 提交评论的逻辑
		inputContent.value = '';
		getData(id.value);
	}
	const getData = async () => {
		let com = await getInfo(id.value);
		com = com.data;
		let list = await getCommentsByRelatedPostId(id.value);
		let image= await getImageById(com.userId);
		list = list.data;
		console.log("接口", com, list);
		commentList.value = list;
		info.iamge=image.msg;
		info.caseId = com.caseId
		info.title = com.title;
		info.content = com.content;
		info.description = com.description
		info.imageUrl = com.imageUrl
		info.userId = com.userId
		info.createTime=com.createTime;
		info.isLike=com.extField4=="1";
		info.isCollection=com.extField5=="1";
	}
	const clickLike=()=>{
		// console.log("点赞",info)
		info.isLike=!info.isLike;
		let bo="0";
		if(info.isLike){
			bo="1"
		}
		addLike({
			contentType:0,
			contentId:info.caseId,
			extField1:bo,
		})
	}
	const clickCollection=()=>{
		// console.log("点赞",info)
		info.isCollection=!info.isCollection;
		let bo="0";
		if(info.isCollection){
			bo="1"
		}
		addCollections({
			contentType:0,
			contentId:info.caseId,
			extField1:bo,
		})
		
	}
	onLoad((e) => {
		console.log("进入", e)
		id.value = e.id;
		getData();
		
	})
</script>
<style lang="scss">
	.case-info-box{
		// background-color: #E8E8E8;
	}
	.case-info{
		width: 97%;
		box-sizing: border-box;
		padding: 20rpx;
		margin: 10rpx auto;
		border-radius: 10rpx;
		background-color: #fff;
		.user-info{
			display: flex;
			align-items:end;
			.user-data{
				margin-top:40rpx;
				height: 30%;
				margin-left: 20rpx;
			}
			.user-name{
				margin-left: 20rpx;
				display: flex;
				flex-flow: column;
			}
		}
		.title-info{
			margin-top: 20rpx;
		}
		.body-info{
			margin-top:40rpx;
		}
	}
	.comment-titls{
		font-size: 37rpx;
		height: 50rpx;
		display: flex;
		justify-content: left;
		align-items: center;
		width: 95%;
		margin:20rpx auto;
		background-color: #A8E6CF;
	}
	.input-di {
		display: flex;
		position: fixed;
		justify-content: space-between;
		align-items: center;
		bottom: 0;
		height: 10vh;
		width: 100%;
		background-color: #A8E6CF;
		border-radius: 20rpx 20rpx 10rpx 10rpx;
	}

	.di {
		height: 10vh;
		width: 100%;
	}

	.input-di-ico {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30%;
	}

	.input-di-button {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50%;
		width: 30%;
		margin-right: 20rpx;
		// margin-left: auto;
		background-color: #000;
		color: #fff;
		border-radius: 40rpx;
	}
	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}
</style>