完成评论区
parent
5907aebbce
commit
7b3ce853e9
|
|
@ -7,16 +7,70 @@
|
||||||
<text class="commentLabel">全部评论</text>
|
<text class="commentLabel">全部评论</text>
|
||||||
<text class="report">举报</text>
|
<text class="report">举报</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="no-comment">
|
<view v-if="!postList" class="no-comment">
|
||||||
<image class="no-comment-img" src="../../../static/images/icon/no_comment.png" mode=""></image>
|
<image class="no-comment-img" src="../../../static/images/icon/no_comment.png" mode=""></image>
|
||||||
<text class="no-comment-text">暂无评论，快去做评论第一人吧！</text>
|
<text class="no-comment-text">暂无评论，快去做评论第一人吧！</text>
|
||||||
<view class="no-comment-bt">
|
<view class="no-comment-bt">
|
||||||
<text class="no-comment-bt-text">快去抢沙发</text>
|
<text class="no-comment-bt-text">快去抢沙发</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<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>
|
||||||
|
<view class="flex flexColumn">
|
||||||
|
<text class="have-comment-uname">{{item.uname}}</text>
|
||||||
|
<text class="have-comment-address">{{item.address}}</text>
|
||||||
</view>
|
</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">
|
||||||
|
<text v-if="!item.isDeployment" class="deploymentAnswer-text" @click="deploymentAnswer(index)">---展开回复</text>
|
||||||
|
<view v-if="item.isDeployment" class="have-comment-answer" v-for="answer in item.answerCommentList" :key="answer">
|
||||||
|
<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>
|
||||||
|
<text class="have-comment-answer-uname">{{answer.uname}}</text>
|
||||||
|
<text v-if="answer.toUserName" class="have-comment-answer-uname">-></text>
|
||||||
|
<text v-if="answer.toUserName" class="have-comment-answer-uname">{{answer.toUserName}}</text>
|
||||||
|
</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>
|
||||||
|
<text v-if="item.isDeployment" class="deploymentAnswer-text" @click="putAnswer(index)">---收起</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 评论区输入框 -->
|
||||||
|
<up-popup :show="showInput" duration="0" @close="close" @open="open" class="comment-po">
|
||||||
|
<view class="flex justifyBetween comment-input" :style="{ paddingBottom: bottomVal + 'px' }">
|
||||||
|
<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>
|
||||||
|
<!-- 底部操作栏 -->
|
||||||
<up-tabbar
|
<up-tabbar
|
||||||
:fixed="true"
|
:fixed="true"
|
||||||
:placeholder="true"
|
:placeholder="true"
|
||||||
|
|
@ -24,7 +78,7 @@
|
||||||
>
|
>
|
||||||
<!-- <view class="flex justifyCenter"> -->
|
<!-- <view class="flex justifyCenter"> -->
|
||||||
<view class="flex alignCenter justifyCenter">
|
<view class="flex alignCenter justifyCenter">
|
||||||
<view class="flex justifyCenter alignCenter commentInput">
|
<view class="flex justifyCenter alignCenter commentInput" @click="toInput()">
|
||||||
<image class="commentInput-img" src="../../../static/logo.png" mode=""></image>
|
<image class="commentInput-img" src="../../../static/logo.png" mode=""></image>
|
||||||
<text class="commentInput-text">友好评论~</text>
|
<text class="commentInput-text">友好评论~</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -57,9 +111,55 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
|
import { ref, reactive, computed, onMounted, getCurrentInstance } from 'vue';
|
||||||
import PostView from "@/pages/common/postview/index.vue";
|
import PostView from "@/pages/common/postview/index.vue";
|
||||||
|
|
||||||
|
const bottomVal = ref(0);
|
||||||
|
|
||||||
|
// 监听键盘高度变化
|
||||||
|
uni.onKeyboardHeightChange(res => {
|
||||||
|
bottomVal.value = res.height - 20;
|
||||||
|
console.log(bottomVal.value)
|
||||||
|
});
|
||||||
|
|
||||||
|
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,
|
||||||
|
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://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
|
||||||
|
uname: '恋爱60秒',
|
||||||
|
createTime: '2024.05.04',
|
||||||
|
isOfficial: false,
|
||||||
|
isDeployment: false,
|
||||||
|
address: '理工大学',
|
||||||
|
content: '评论区上线了',
|
||||||
|
answerCommentList: []
|
||||||
|
}]);
|
||||||
|
|
||||||
const postValue = reactive(
|
const postValue = reactive(
|
||||||
{
|
{
|
||||||
avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
|
avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
|
||||||
|
|
@ -87,6 +187,38 @@
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
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 cancelCollection = () => {
|
const cancelCollection = () => {
|
||||||
postValue.likeCount -= 1;
|
postValue.likeCount -= 1;
|
||||||
postValue.isLike = !postValue.isLike;
|
postValue.isLike = !postValue.isLike;
|
||||||
|
|
@ -106,9 +238,17 @@
|
||||||
postValue.favoriteCount += 1;
|
postValue.favoriteCount += 1;
|
||||||
postValue.ifFavorite = !postValue.ifFavorite;
|
postValue.ifFavorite = !postValue.ifFavorite;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const deploymentAnswer = (index) => {
|
||||||
|
postList[index].isDeployment = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const putAnswer = (index) => {
|
||||||
|
postList[index].isDeployment = false;
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss">
|
||||||
.data-v-6fcabaad {
|
.data-v-6fcabaad {
|
||||||
border-radius: 20rpx 20rpx 20rpx 20rpx !important;
|
border-radius: 20rpx 20rpx 20rpx 20rpx !important;
|
||||||
/* width: 200rpx !important;
|
/* width: 200rpx !important;
|
||||||
|
|
@ -217,5 +357,152 @@
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #FFC729;
|
color: #FFC729;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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{
|
||||||
|
margin-left: 80rpx;
|
||||||
|
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;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue