178 lines
4.8 KiB
Vue
178 lines
4.8 KiB
Vue
<template>
|
||
<view class="u-page">
|
||
<view class="u-page0-top">
|
||
</view>
|
||
<view class="u-demo-block">
|
||
<view class="reply-button" @click="handleReply">
|
||
<up-text
|
||
text="回复"
|
||
type="primary"
|
||
size="14"
|
||
></up-text>
|
||
</view>
|
||
<view class="u-demo-block__content">
|
||
<view class="album">
|
||
<view class="album__avatar">
|
||
<image
|
||
:src="props.data.userAvatar"
|
||
mode=""
|
||
style="width:32px;height:32px;"
|
||
></image>
|
||
</view>
|
||
<view class="album__content">
|
||
<up-text
|
||
:text="props.data.userName"
|
||
type="primary"
|
||
bold
|
||
size="17"
|
||
></up-text>
|
||
<up-text
|
||
margin="0 0 8px 0"
|
||
:text="props.data.content"
|
||
></up-text>
|
||
<!-- <up-album
|
||
:urls="urls1"
|
||
keyName="src2"
|
||
></up-album> -->
|
||
<!-- 子列表展示 -->
|
||
<view class="sub-discussions">
|
||
<view class="sub-discussion-item" v-for="(item, index) in displayedSubDiscussions" :key="index" >
|
||
<view class="">
|
||
<up-text
|
||
:text="item.userName+'：'"
|
||
type="secondary"
|
||
size="15"
|
||
></up-text>
|
||
</view>
|
||
<view class="sub-discussion-text">
|
||
<up-text
|
||
:text="item.content"
|
||
size="14"
|
||
></up-text>
|
||
</view>
|
||
</view>
|
||
<view v-if="props.data.children.length > 2" class="toggle-btn" @click="toggleExpand">
|
||
<up-text
|
||
:text="isExpanded ? '收起' : '展开更多'"
|
||
type="primary"
|
||
size="14"
|
||
></up-text>
|
||
</view>
|
||
</view>
|
||
<!-- 回复按钮 -->
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, defineProps } from 'vue';
|
||
const emit=defineEmits(['clickHf'])
|
||
// 定义属性
|
||
const props = defineProps({
|
||
data: {
|
||
type: Object,
|
||
default: () => ({
|
||
id: 1,
|
||
children: [],
|
||
content: "内容",
|
||
createTime: "2024-06-05T11:32:09.000+08:00",
|
||
parentId: -1,
|
||
userAvatar: null,
|
||
userId: 1,
|
||
userName: "123",
|
||
})
|
||
}
|
||
});
|
||
|
||
// 初始化响应式变量
|
||
const urls1 = ref([]); // 示例图片数据
|
||
const isExpanded = ref(false);
|
||
|
||
// 计算属性：显示的子讨论列表
|
||
const displayedSubDiscussions = computed(() => {
|
||
if(props.data.children==null){
|
||
props.data.children=[];
|
||
}
|
||
return isExpanded.value ? props.data.children: props.data.children.slice(0, 2);
|
||
});
|
||
|
||
// 切换展开状态的方法
|
||
const toggleExpand = () => {
|
||
isExpanded.value = !isExpanded.value;
|
||
};
|
||
|
||
// 处理回复按钮点击事件的方法
|
||
const handleReply = () => {
|
||
// 实现回复功能的逻辑
|
||
// alert("点击了回复按钮");
|
||
emit('clickHf',props.data.id);
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.u-page {
|
||
width: 100%;
|
||
}
|
||
|
||
.u-page0-top {
|
||
height: 20rpx;
|
||
width: 98%;
|
||
margin: 10rpx auto;
|
||
background-color: #A8E6CF;
|
||
}
|
||
.sub-discussion-item{
|
||
display: flex;
|
||
}
|
||
.sub-discussion-text{
|
||
margin-left: 20rpx;
|
||
}
|
||
.reply-button{
|
||
float:right;
|
||
}
|
||
.album {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
|
||
&__avatar {
|
||
background-color: #f5f5f5;
|
||
padding: 5px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
&__content {
|
||
margin-left: 10px;
|
||
flex: 1;
|
||
position: relative;
|
||
|
||
.reply-button {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
cursor: pointer;
|
||
background-color: #f5f5f5;
|
||
padding: 5px 10px;
|
||
border-radius: 3px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.sub-discussions {
|
||
margin-top: 10px;
|
||
|
||
.sub-discussion-item {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.toggle-btn {
|
||
cursor: pointer;
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|