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>
        <view class="user-info-box">
          <view class="user-name">
            <up-text :text="info.name" 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="Image" class="info-image" />
      </view>
    </view>
    <view class="comment-info">
      <view class="comment-title">评论留言</view>
      <view class="comment-list">
        <CommentsBox
          @addComment="addComment"
          v-for="(item, index) in commentList"
          :key="item.id"
          :data="item"
        />
      </view>
    </view>
    <InputBox v-if="inputVisible" @submit="submitNote" @blurCom="blurCom"></InputBox>
    <view class="input-di">
      <view class="input-di-ico">
        <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 ,getUserNameById} 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 inputVisible = ref(false);
const inputContent = ref('');
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) {
    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 = () => {
  inputVisible.value = false;
};

const showInputBox = () => {
  inputVisible.value = true;
};

const submitComment = async () => {
  let res = await addComments({
    relatedPostId: info.caseId,
    commentContent: inputContent.value,
    parentCommentId: currParentCommentId.value,
    replyUseId: currReplyUseId.value,
  });
  currParentCommentId.value = null;
  currReplyUseId.value = null;
  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);
  let userName=await getUserNameById(com.userId)
  list = list.data;
  commentList.value = list;
  info.name=userName.msg;
  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 = () => {
  info.isLike = !info.isLike;
  let bo = info.isLike ? "1" : "0";
  addLike({ contentType: 0, contentId: info.caseId, extField1: bo });
};

const clickCollection = () => {
  info.isCollection = !info.isCollection;
  let bo = info.isCollection ? "1" : "0";
  addCollections({ contentType: 0, contentId: info.caseId, extField1: bo });
};

onLoad((e) => {
  id.value = e.id;
  getData();
});
</script>
<style scoped lang="scss">
.case-info-box {
  padding: 20rpx;
  min-height: 90vh;
  background-color:#F5F5F5;
}

.case-info {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
  margin: 10rpx auto;
  border-radius: 20rpx;
  background-color: #ffffff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  align-items: center;

  .user-info-box {
    margin-left: 20rpx;

    .user-name {
      margin-bottom: 5rpx;
    }

    .user-data {
      font-size: 30rpx;
      color: #888888;
    }
  }
}

.title-info {
  margin-top: 20rpx;

  .title-info-main {
    margin-bottom: 10rpx;
  }

  .title-info-fu {
    color: #8f8f8f;
    font-size: 35rpx;
  }
}

.body-info {
  margin-top: 20rpx;

  .info-image {
    width: 100%;
    border-radius: 10rpx;
    margin-top: 10rpx;
  }
}

.comment-info {
  margin-top: 30rpx;

  .comment-title {
    font-size: 37rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 10rpx;
  }

  .comment-list {
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 10rpx;
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
  }
}

.input-di {
		display: flex;
		position: fixed;
		justify-content: space-between;
		align-items: center;
		bottom: 0;
		left: 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-left: auto;
		background-color: #000;
		color: #fff;
		border-radius: 40rpx;
		margin: auto;
		margin-right: 60rpx;
	}
</style>