JiXinHui
/
YingXingAI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:留言板组件封装

This commit is contained in:
JiXinHui 2025-07-10 09:09:05 +08:00
parent be14015565
commit 0f23391c74
1 changed files with 56 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
components/MessageItem.vue
View File

@ -1,67 +1,65 @@
<template>
<view class="message-wrapper">
<u-swipe-action>
<u-swipe-action-item
:options="swipeOptions"
:show="item.show"
:index="itemIndex"
@click="handleSwipeClick"
@open="(e) => handleSwipeOpen(e)"
@close="(e) => handleSwipeClose(e)"
@content-click="closeSwipe"
:btn-width="80"
:disabled="false"
>
<view class="message-item">
<view class="message-header">
<view class="user-info">
<image class="avatar" :src="item.avatar || defaultAvatar"></image>
<text class="username">{{ item.username }}</text>
</view>
<view class="message-time">{{ item.time }}</view>
<u-swipe-action
:index="itemIndex"
:show="item.show"
:options="swipeOptions"
@click="handleSwipeClick"
@open="handleSwipeOpen"
@close="handleSwipeClose"
@content-click="closeSwipe"
:btn-width="80"
:disabled="false"
>
<view class="message-item">
<view class="message-header">
<view class="user-info">
<image class="avatar" :src="item.avatar || defaultAvatar"></image>
<text class="username">{{ item.username }}</text>
</view>
<view class="message-time">{{ item.time }}</view>
</view>
<view class="message-content">
<view class="question">
<view class="question-icon">问</view>
<view class="question-text">{{ item.question }}</view>
</view>
<view class="message-content">
<view class="question">
<view class="question-icon">问</view>
<view class="question-text">{{ item.question }}</view>
</view>
<view class="reply-button" @click.stop="onReply" v-if="!item.reply">
<u-icon name="chat" color="#4a6cf7" size="16"></u-icon>
<text>回复</text>
</view>
<view class="reply-button" @click.stop="onReply" v-if="!item.reply">
<u-icon name="chat" color="#4a6cf7" size="16"></u-icon>
<text>回复</text>
</view>
<view class="reply-content" v-if="item.reply">
<view class="reply-header">
<view class="reply-icon">答</view>
<view class="reply-info">
<text>{{ item.replyUser }}</text>
</view>
</view>
<view class="reply-text" :class="{ expanded: item.expanded }">{{
item.reply
}}</view>
<view
class="expand-button"
v-if="item.reply.length > 100"
@click.stop="toggleExpand"
>
{{ item.expanded ? "收起" : "展开" }}
<u-icon
:name="item.expanded ? 'arrow-up' : 'arrow-down'"
size="12"
></u-icon>
<view class="reply-content" v-if="item.reply">
<view class="reply-header">
<view class="reply-icon">答</view>
<view class="reply-info">
<text>{{ item.replyUser }}</text>
</view>
</view>
<view class="reply-button" @click.stop="onReply" v-if="item.reply">
<u-icon name="chat" color="#4a6cf7" size="16"></u-icon>
<text>回复</text>
<view class="reply-text" :class="{ expanded: item.expanded }">{{
item.reply
}}</view>
<view
class="expand-button"
v-if="item.reply.length > 100"
@click.stop="toggleExpand"
>
{{ item.expanded ? "收起" : "展开" }}
<u-icon
:name="item.expanded ? 'arrow-up' : 'arrow-down'"
size="12"
></u-icon>
</view>
</view>
</view></u-swipe-action-item
>
<view class="reply-button" @click.stop="onReply" v-if="item.reply">
<u-icon name="chat" color="#4a6cf7" size="16"></u-icon>
<text>回复</text>
</view>
</view>
</view>
</u-swipe-action>
</view>
</template>
@ -100,15 +98,18 @@ export default {
methods: {
handleSwipeClick(e) {
const { index } = e; // 点击的按钮索引
if (index === 0) {
// 删除按钮
this.$emit("delete", this.itemIndex);
}
},
handleSwipeOpen(e) {
// uView 1.x的事件参数格式与2.x不同
this.$emit("open-swipe", this.itemIndex);
},
handleSwipeClose(e) {
// uView 1.x的事件参数格式与2.x不同
this.item.show = false;
},
closeSwipe() {