279 lines
6.3 KiB
Vue
279 lines
6.3 KiB
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 } 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);
|
|
list = list.data;
|
|
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 = () => {
|
|
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>
|