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>
|