gree_leran/components/DiscussionsBox/DiscussionsBox.vue

178 lines
4.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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