talk_appAmin/pages/post/postInfo/postInfo.vue

681 lines
19 KiB
Vue
Raw Normal View History

2024-06-05 19:48:15 +08:00
<template>
<view>
<PostView :postValue="postValue" :postViewIndex="1" :postViewType="1"></PostView>
<view class="center-content-focus-line"></view>
<view class="comment">
<view class="flex justifyBetween alignCenter commentTop">
<text class="commentLabel">全部评论4</text>
2024-06-05 19:48:15 +08:00
<text class="report">举报</text>
</view>
2024-06-06 19:36:53 +08:00
<view v-if="!postList" class="no-comment">
2024-06-05 19:48:15 +08:00
<image class="no-comment-img" src="../../../static/images/icon/no_comment.png" mode=""></image>
<text class="no-comment-text">暂无评论快去做评论第一人吧</text>
<view class="no-comment-bt">
<text class="no-comment-bt-text">快去抢沙发</text>
</view>
</view>
2024-06-06 19:36:53 +08:00
<view v-else class="have-comment" v-for="(item, index) in postList" :key="index">
<view class="flex alignCenter">
<!-- 头像 -->
<view class="have-comment-avatar-container">
<u-avatar class="have-comment-avatar-1" size="60rpx" :src="item.avatar"></u-avatar>
<image v-if="item.isOfficial" class="have-comment-official-1" src="../../../static/images/icon/tu3-6.png"></image>
</view>
<view class="flex flexColumn">
<text class="have-comment-uname">{{item.uname}}</text>
<text class="have-comment-address">{{item.address}}</text>
</view>
</view>
<view class="have-comment-content">
<text class="have-comment-content-text-1">{{item.content}}</text>
<view class="have-comment-content-text-2">
<text>{{item.createTime}}</text>
<text class="have-comment-content-text-2-hf" @click="toAnswer(item.uname)"></text>
</view>
</view>
<view class="" v-if="item.answerCommentList.length != 0">
<view v-if="item.isDeployment" class="have-comment-answer" v-for="answer in item.answerCommentList.slice(0,item.answerCommentDisplayCount)" :key="answer">
2024-06-06 19:36:53 +08:00
<view class="flex alignCenter">
<!-- 头像 -->
<view class="have-comment-answer-avatar-container">
<u-avatar class="have-comment-answer-avatar-1" size="48rpx" :src="answer.avatar"></u-avatar>
<image v-if="answer.isOfficial" class="have-comment-answer-official-1" src="../../../static/images/icon/tu3-6.png"></image>
</view>
<view class="flex alignCenter justifyBetween">
<text class="have-comment-answer-uname">{{answer.uname}}</text>
<!-- <text v-if="answer.toUserName" class="have-comment-answer-uname">-></text> -->
<image v-if="answer.toUserName" class="have-comment-answer-uname-img" src="../../../static/images/icon/ring-1.png"></image>
<text v-if="answer.toUserName" class="have-comment-answer-uname">{{answer.toUserName}}</text>
</view>
2024-06-06 19:36:53 +08:00
</view>
<view class="have-comment-answer-content">
<text class="have-comment-answer-content-text-1">{{answer.content}}</text>
<view class="have-comment-answer-content-text-2">
<text>{{answer.createTime}}</text>
<text class="have-comment-answer-content-text-2-hf" @click="toAnswer(answer.uname)"></text>
</view>
</view>
</view>
<view class="have-comment-answer-deploy flex alignCenter">
<up-line class="have-comment-answer-line" length="40rpx"></up-line>
<view class="have-comment-answer-deploy-1 flex alignCenter" @click="deploymentAnswer(index)" v-if="!item.isDeployment">
<text class="deploymentAnswer-text">展开{{item.answerCommentAllCount}}条回复</text>
<image class="have-comment-answer-img-1" src="../../../static/images/icon/deployment-1.png" mode=""></image>
</view>
<view class="have-comment-answer-deploy-1 flex alignCenter" @click="loadMoreAnswers(index)" v-if="item.isDeployment && item.answerCommentDisplayCount < item.answerCommentAllCount">
<text class="deploymentAnswer-text">展开回复</text>
<image class="have-comment-answer-img-1" src="../../../static/images/icon/deployment-1.png" mode=""></image>
</view>
<view class="have-comment-answer-deploy-1 flex alignCenter" v-if="item.isDeployment" @click="putAnswer(index)">
<text class="deploymentAnswer-text">收起</text>
<image class="have-comment-answer-img-2" src="../../../static/images/icon/deployment-1.png" mode=""></image>
</view>
</view>
2024-06-06 19:36:53 +08:00
</view>
<view class="have-comment-line">
</view>
2024-06-06 19:36:53 +08:00
</view>
2024-06-05 19:48:15 +08:00
</view>
</view>
2024-06-06 19:36:53 +08:00
<!-- 评论区输入框 -->
<up-popup :show="showInput" duration="0" @close="close" @open="open" class="comment-po">
2024-06-08 18:57:20 +08:00
<view class="flex justifyBetween comment-input" :style="{ marginBottom: bottomVal + 26 + 'px' }">
2024-06-06 19:36:53 +08:00
<view class="input-in flex alignCenter justifyCenter">
<input class="input-in-text" v-if="showInputText" focus="true" maxlength="55" :placeholder="placeholderInput" :adjust-position="false" />
</view>
<view class="input-bt flex alignCenter justifyCenter">
<text class="input-bt-text">发送</text>
</view>
</view>
</up-popup>
<!-- 底部操作栏 -->
2024-06-05 20:03:51 +08:00
<up-tabbar
:fixed="true"
:placeholder="true"
:safeAreaInsetBottom="true"
>
<!-- <view class="flex justifyCenter"> -->
<view class="flex alignCenter justifyCenter">
2024-06-06 19:36:53 +08:00
<view class="flex justifyCenter alignCenter commentInput" @click="toInput()">
<image class="commentInput-img-1" src="../../../static/images/icon/write-1.png" mode=""></image>
2024-06-05 20:03:51 +08:00
<text class="commentInput-text">友好评论~</text>
</view>
</view>
<view v-if="postValue.like" @click.stop="cancelCollection(postValue.id)" class="flex alignCenter justifyCenter flexColumn">
2024-06-05 20:03:51 +08:00
<image class="commentInput-img" src="../../../static/images/icon/tu3-8.png" mode=""></image>
<text class="commentInput-txt-like">{{postValue.likeCount}}</text>
</view>
<view v-if="!postValue.like" @click.stop="addCollection(postValue.id)" class="flex alignCenter justifyCenter flexColumn">
2024-06-05 20:03:51 +08:00
<image class="commentInput-img" src="../../../static/images/icon/tu3-7.png" mode=""></image>
<text class="commentInput-txt">{{postValue.likeCount}}</text>
</view>
<view v-if="postValue.favorite" @click.stop="cancelFavorite(postValue.id)" class="flex flexColumn alignCenter justifyCenter ">
2024-06-05 20:03:51 +08:00
<image class="commentInput-img" src="../../../static/images/icon/tu3-2.png" mode=""></image>
<text class="commentInput-txt-favorite">{{postValue.favoriteCount}}</text>
</view>
<view v-if="!postValue.favorite" @click.stop="addFavorite(postValue.id)" class="flex flexColumn alignCenter justifyCenter ">
2024-06-05 20:03:51 +08:00
<image class="commentInput-img" src="../../../static/images/icon/tu3-1.png" mode=""></image>
<text class="commentInput-txt">{{postValue.favoriteCount}}</text>
</view>
<view class="flex alignCenter justifyCenter flexColumn">
<image class="commentInput-img" src="../../../static/images/icon/tu2-9.png" mode=""></image>
<text class="commentInput-txt">转发</text>
</view>
<!-- </view> -->
</up-tabbar>
2024-06-05 19:48:15 +08:00
</template>
<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
import {onReachBottom,onLoad,onPageScroll} from "@dcloudio/uni-app";
2024-06-05 19:48:15 +08:00
import PostView from "@/pages/common/postview/index.vue";
import { listFollowUser, getFollowUser, delFollowUserByFollowUser, addFollowUser, updateFollowUser } from "@/api/followUser/followUser";
import { delLikeByPostLike, addLike } from "@/api/like/like";
import { delPostFavoriteByPostFavorite, addPostFavorite } from "@/api/postFavorite/postFavorite";
import { Value } from 'sass';
2024-06-05 19:48:15 +08:00
2024-06-06 19:36:53 +08:00
const bottomVal = ref(0);
const postValue = reactive(uni.getStorageSync('postInfo'));
// const postValue = reactive(
// {
// avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
// uname: '爱吃饭的小张',
// createTime: '11分钟前',
// address: '南开大学',
// isFocus: false,
// isOfficial: true,
// title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法?',
// content: '八年前,学弟在工地上杀了一个工友,上杀了一个工友,杀人前,他给警察打了电话,预告杀人的时间和地点,和地点,并......',
// type: '1',
// media: [
// 'https://img1.baidu.com/it/u=1179199327,1946315836&fm=253&fmt=auto&app=138&f=JPEG?w=1364&h=800',
// 'https://www4.bing.com//th?id=OHR.CopenhagenBicycles_ZH-CN3047958346_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=360&h=202',
// 'https://www4.bing.com//th?id=OHR.CarnavalTenerife_ZH-CN1559136778_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=360&h=202',
// 'https://www4.bing.com//th?id=OHR.StJamesPool_ZH-CN5930624359_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=360&h=202',
// ],
// tab: ['学术讨论组', '校园风景'],
// transmitCount: 136,
// like: true,
// likeCount: 999,
// commentCount: 136,
// favorite: true,
// favoriteCount: 136
// }
// );
2024-06-06 19:36:53 +08:00
// 监听键盘高度变化
onLoad(() => {
uni.pageScrollTo({
scrollTop: 0,
duration: 0
});
// if (!data.value) {
uni.onKeyboardHeightChange(res => {
if(res.height == 0) {
bottomVal.value = 0;
return;
}
bottomVal.value = res.height - 20;
console.log(bottomVal.value)
});
// }
})
onBeforeUnmount(async () => {
uni.offKeyboardHeightChange();
});
2024-06-06 19:36:53 +08:00
const postList = reactive([{
avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
uname: '爱吃饭的小张',
address: '南开大学',
content: '大家来评论',
createTime: '7分钟前',
isOfficial: true,
isDeployment: false,
answerCommentAllCount: 4,
answerCommentPage: 0,
answerCommentDisplayCount: 0,
2024-06-06 19:36:53 +08:00
answerCommentList: [{
avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
uname: '恋爱60秒',
createTime: '2024.05.04',
isOfficial: false,
address: '理工大学',
content: '来了',
},
{
avatar: 'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
uname: '喜欢你没道理',
createTime: '2024.05.04',
isOfficial: false,
address: '理工大学',
content: '你干嘛~',
toUserName: '恋爱60秒',
},
{
avatar: 'https://www.tboxn.com/wp-content/uploads/2022/11/%E5%A4%B4%E5%83%8F.png',
uname: '神奇宝贝',
createTime: '2024.05.04',
isOfficial: false,
address: '理工大学',
content: '哎呦~',
toUserName: '喜欢你没道理',
},
{
avatar: 'https://files.codelife.cc/wallhaven/full/wq/wallhaven-wqkw2r.jpg?x-oss-process=image/resize,limit_0,m_fill,w_307,h_158/quality,Q_92/format,webp',
uname: '皮卡丘',
createTime: '2024.05.04',
isOfficial: true,
address: '理工大学',
content: '要再点一下才能看到我',
toUserName: '喜欢你没道理',
},
2024-06-06 19:36:53 +08:00
]
},
{
avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
uname: '恋爱60秒',
createTime: '2024.05.04',
isOfficial: false,
isDeployment: false,
address: '理工大学',
content: '评论区上线了',
answerCommentList: []
}]);
const placeholderInput = ref('')
// 创建响应式数据
const showInput = ref(false);
const showInputText = ref(false)
// 定义方法
function open() {
// 打开逻辑,比如设置 show 为 true
showInput.value = true;
setTimeout(() => {
showInputText.value = true;
}, 50);
// console.log('open');
}
function close() {
// 关闭逻辑,设置 show 为 false
showInput.value = false;
showInputText.value = false;
// console.log('close');
}
const toInput = () => {
placeholderInput.value = '发布评论'
open();
}
const toAnswer = (toUser) => {
placeholderInput.value = '回复:' + toUser;
open();
}
const postListStorage = ref(uni.getStorageSync('postList'));
const upPostListStorage = () => {
postListStorage.value.forEach(item => {
if (item.id === postValue.id) {
console.log('当前post', postValue);
Object.assign(item, postValue);
}
});
uni.setStorageSync('postList', postListStorage.value);
}
// 点赞操作
const cancelCollection = (postId) => {
const postLike = reactive({
likeId: postId,
})
delLikeByPostLike(postLike).then(res => {
console.log('取消点赞',postValue)
postValue.likeCount -= 1;
postValue.like = !postValue.like;
upPostListStorage();
})
2024-06-05 19:48:15 +08:00
};
const addCollection = (postId) => {
const postLike = reactive({
likeId: postId,
})
addLike(postLike).then(res => {
console.log('取消点赞',postValue)
postValue.likeCount += 1;
postValue.like = !postValue.like;
upPostListStorage();
})
2024-06-05 19:48:15 +08:00
};
// 收藏操作
const cancelFavorite = (postId) => {
const postFavorite = reactive({
favoriteId: postId,
})
delPostFavoriteByPostFavorite(postFavorite).then(res => {
postValue.favoriteCount -= 1;
postValue.favorite = !postValue.favorite;
upPostListStorage();
})
2024-06-05 19:48:15 +08:00
};
const addFavorite = (postId) => {
const postFavorite = reactive({
favoriteId: postId,
})
addPostFavorite(postFavorite).then(res => {
postValue.favoriteCount += 1;
postValue.favorite = !postValue.favorite;
upPostListStorage();
})
2024-06-05 19:48:15 +08:00
};
2024-06-06 19:36:53 +08:00
const deploymentAnswer = (index) => {
postList[index].isDeployment = true;
loadMoreAnswers(index);
2024-06-06 19:36:53 +08:00
};
const putAnswer = (index) => {
postList[index].isDeployment = false;
postList[index].answerCommentDisplayCount = 0;
postList[index].answerCommentPage = 0;
};
const loadMoreAnswers = (index) => {
const increment = 3; // 每次加载的评论数量
const comment = postList[index];
if (comment.answerCommentDisplayCount + increment <= comment.answerCommentAllCount) {
comment.answerCommentDisplayCount += increment;
} else {
comment.answerCommentDisplayCount = comment.answerCommentAllCount; // 显示所有剩余的评论
}
2024-06-06 19:36:53 +08:00
};
2024-06-05 19:48:15 +08:00
</script>
2024-06-06 19:36:53 +08:00
<style lang="scss">
2024-06-08 18:42:51 +08:00
page{
background-color: #ffffff;
}
2024-06-05 19:48:15 +08:00
.data-v-6fcabaad {
border-radius: 20rpx 20rpx 20rpx 20rpx !important;
/* width: 200rpx !important;
height: 200rpx !important; */
}
.center-content-focus-line{
height: 8rpx;
background: #f4f5f6;
}
.comment{
padding: 32rpx;
}
.commentLabel{
font-weight: 400;
/* width: 265rpx; */
/* height: 38rpx; */
font-size: 36rpx;
/* text-align: left; */
color: #000000;
}
.report{
font-weight: 400;
/* width: 52rpx; */
/* height: 26rpx; */
font-size: 26rpx;
/* text-align: left; */
color: #999999;
}
.no-comment {
display: flex;
flex-direction: column;
align-items: center; /* 水平居中 */
justify-content: center; /* 垂直居中 */
}
.no-comment-img{
margin-top: 44rpx;
width: 200rpx;
height: 145rpx;
}
.no-comment-text{
margin-top: 8rpx;
font-weight: 400;
font-size: 26rpx;
color: #999999;
}
.no-comment-bt{
margin-top: 36rpx;
width: 308rpx;
height: 82rpx;
border-radius: 40rpx 40rpx 40rpx 40rpx;
border-width: 2rpx;
border-color: #C9F6F5;
background: #ffffff;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.no-comment-bt-text{
font-weight: 400;
font-size: 32rpx;
color: #CBF6F5;
}
.commentInput{
width: 364rpx;
height: 80rpx;
border-radius: 40rpx 40rpx 40rpx 40rpx;
background: #f7f8fa;
}
.commentInput-img{
width: 36rpx;
height: 36rpx;
// margin-right: 12rpx;
}
.commentInput-img-1{
width: 36rpx;
height: 36rpx;
margin-right: 12rpx;
2024-06-05 19:48:15 +08:00
}
.commentInput-text{
font-weight: 400;
font-size: 30rpx;
color: #999999;
}
.commentInput-txt{
font-weight: 400;
font-size: 28rpx;
color: #787878;
}
.commentInput-txt-like{
font-weight: 400;
font-size: 28rpx;
color: #FA3939;
}
.commentInput-txt-favorite{
font-weight: 400;
font-size: 28rpx;
color: #FFC729;
}
2024-06-06 19:36:53 +08:00
.have-comment{
margin-top: 30rpx;
}
.have-comment-avatar-container {
position: relative;
width: 60rpx;
margin-right: 20rpx;
}
.have-comment-avatar-1 {
position: relative;
}
.have-comment-official-1 {
position: absolute;
width: 24rpx;
height: 24rpx;
bottom: 0;
right: 0;
}
.have-comment-uname{
font-weight: 400;
font-size: 26rpx;
color: #999999;
}
.have-comment-address{
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
.have-comment-content{
margin-left: 80rpx;
margin-top: 10rpx;
}
.have-comment-content-text-1 {
font-weight: 400;
font-size: 30rpx;
color: #333333;
}
.have-comment-content-text-2 {
font-weight: 400;
font-size: 24rpx;
color: #999999;
margin-top: 12rpx;
}
.have-comment-content-text-2-hf {
margin-left: 32rpx;
}
.have-comment-answer{
margin-top: 24rpx;
margin-left: 80rpx;
}
.have-comment-answer-avatar-container {
position: relative;
width: 48rpx;
margin-right: 20rpx;
}
.have-comment-answer-avatar-1 {
position: relative;
}
.have-comment-answer-official-1 {
position: absolute;
width: 16rpx;
height: 16rpx;
bottom: 0;
right: 0;
}
.have-comment-answer-uname{
font-weight: 400;
font-size: 26rpx;
color: #999999;
}
.have-comment-answer-content{
margin-left: 80rpx;
margin-top: 10rpx;
}
.have-comment-answer-content-text-1 {
font-weight: 400;
font-size: 30rpx;
color: #333333;
}
.have-comment-answer-content-text-2 {
font-weight: 400;
font-size: 24rpx;
color: #999999;
margin-top: 12rpx;
}
.have-comment-answer-content-text-2-hf {
margin-left: 32rpx;
}
.deploymentAnswer-text{
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
.input-in{
width: 560rpx;
height: 70rpx;
border-radius: 37rpx 37rpx 37rpx 37rpx;
background: #f7f8fa;
}
.input-in-text{
width: 520rpx;
}
.input-bt{
width: 120rpx;
height: 74rpx;
border-radius: 37rpx 37rpx 37rpx 37rpx;
background: #3477fc;
}
.input-text{
font-weight: 400;
font-size: 30rpx;
color: #FFFFFF;
}
.comment-input{
padding: 24rpx;
// margin-bottom: 800rpx;
}
.comment-po{
// height: 500rpx;
}
2024-06-08 18:57:20 +08:00
.input-bt-text{
font-weight: 400;
font-size: 28rpx;
color: #FFFFFF;
}
.have-comment-answer-deploy{
margin-top: 30rpx;
margin-left: 80rpx;
}
.have-comment-answer-line{
}
.have-comment-answer-img-1{
width: 26rpx;
height: 14rpx;
margin-left: 12rpx;
}
.have-comment-answer-img-2{
width: 26rpx;
height: 14rpx;
margin-left: 12rpx;
transform: scaleY(-1);
}
.have-comment-answer-deploy-1{
margin-left: 12rpx;
margin-right: 130rpx;
}
.have-comment-answer-uname-img{
width: 14rpx;
height: 24rpx;
margin: 0 8rpx;
}
.have-comment-line{
width: 686rpx;
height: 2rpx;
border-radius: 1rpx 1rpx 1rpx 1rpx;
background: #f4f5f6;
margin: 36rpx 0;
}
2024-06-05 19:48:15 +08:00
</style>