feat(聊天历史): 添加聊天项操作菜单和删除功能
This commit is contained in:
parent
a6616427fd
commit
df685e91d9
|
|
@ -46,6 +46,7 @@
|
|||
<view
|
||||
v-for="(group, groupIndex) in chatHistoryList3"
|
||||
:key="'group-' + group.id + groupIndex"
|
||||
@click="closePopover"
|
||||
>
|
||||
<!-- 日期标题 -->
|
||||
<view class="chat-day">
|
||||
|
|
@ -61,11 +62,51 @@
|
|||
:class="{
|
||||
'chat-item-active': item.isActiveChat,
|
||||
}"
|
||||
@click="selectChatItem(groupIndex, index, item.id)"
|
||||
@click.stop="selectChatItem(groupIndex, index, item.id)"
|
||||
>
|
||||
<!-- currentActiveGroup === groupIndex &&
|
||||
currentActiveIndex === index, -->
|
||||
<text class="chat-text">{{ item.title }}</text>
|
||||
<view class="chat-item-content">
|
||||
<text class="chat-text u-line-1">{{ item.title }}</text>
|
||||
<view
|
||||
class="more-icon"
|
||||
v-if="item.isActiveChat"
|
||||
:id="'more-' + item.id"
|
||||
@click.stop="togglePopover(item.id)"
|
||||
>
|
||||
<image
|
||||
style="width: 40rpx; height: 40rpx"
|
||||
src="/static/common/images/icon-more-white.png"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Popover菜单 -->
|
||||
<view
|
||||
class="popover-menu"
|
||||
v-if="activePopoverId === item.id"
|
||||
@click.stop
|
||||
>
|
||||
<view
|
||||
class="popover-item"
|
||||
@click.stop="selectChatItem(groupIndex, index, item.id)"
|
||||
>
|
||||
<u-icon
|
||||
name="chat"
|
||||
color="#4f6aff"
|
||||
size="32"
|
||||
custom-style="margin-right: 12rpx"
|
||||
></u-icon>
|
||||
<text class="popover-text" style="color: #4f6aff">回复</text>
|
||||
</view>
|
||||
<view class="popover-item" @click="handleDelete(item)">
|
||||
<u-icon
|
||||
name="trash"
|
||||
color="#fa3534"
|
||||
size="32"
|
||||
custom-style="margin-right: 12rpx"
|
||||
></u-icon>
|
||||
<text class="popover-text" style="color: #fa3534">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -85,6 +126,17 @@
|
|||
<u-icon name="setting" size="40rpx" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 删除确认弹窗：使用 uView 的 u-modal 组件实现 -->
|
||||
<!-- <u-modal
|
||||
border-radius="20rpx"
|
||||
v-model="deleteConfirmShow"
|
||||
title="提示"
|
||||
content="删除后，该对话将不可恢复。确认删除吗？"
|
||||
:show-cancel-button="true"
|
||||
@confirm="confirmDelete"
|
||||
@cancel="cancelDelete"
|
||||
></u-modal> -->
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
|
@ -126,12 +178,20 @@ export default {
|
|||
},
|
||||
],
|
||||
currentTab: 0,
|
||||
activePopoverId: null, // 当前打开的popover对应的itemId
|
||||
// 删除确认弹窗的显示状态与目标项
|
||||
// deleteConfirmShow: false,
|
||||
// deleteTargetItem: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
this.showPopup = newVal;
|
||||
// 弹层每次打开时，收起右侧“回复/删除”浮窗
|
||||
if (newVal) {
|
||||
this.activePopoverId = null;
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
|
|
@ -139,6 +199,10 @@ export default {
|
|||
if (val !== this.show) {
|
||||
this.$emit("update:show", val);
|
||||
}
|
||||
// 兼容从内部改变显示状态的场景，打开时关闭浮窗
|
||||
if (val) {
|
||||
this.activePopoverId = null;
|
||||
}
|
||||
},
|
||||
// 监听聊天历史数据变化，找到激活项并滚动
|
||||
chatHistoryList3: {
|
||||
|
|
@ -164,6 +228,60 @@ export default {
|
|||
url: "/pages/home/userSetting/index",
|
||||
});
|
||||
},
|
||||
// 关闭Popover
|
||||
closePopover() {
|
||||
this.activePopoverId = null;
|
||||
},
|
||||
// 切换Popover显示状态
|
||||
togglePopover(itemId) {
|
||||
if (this.activePopoverId === itemId) {
|
||||
this.activePopoverId = null;
|
||||
return;
|
||||
}
|
||||
|
||||
this.activePopoverId = itemId;
|
||||
},
|
||||
// 处理回复(暂时无用)
|
||||
// handleReply(item) {
|
||||
// this.closePopover();
|
||||
// // 这里添加回复逻辑，比如跳转或弹窗
|
||||
// console.log("Reply to:", item);
|
||||
// this.$emit("reply-conversation", item);
|
||||
// },
|
||||
// 处理删除
|
||||
handleDelete(item) {
|
||||
// 关闭右侧浮窗，弹出确认弹窗
|
||||
this.closePopover();
|
||||
// this.deleteTargetItem = item;
|
||||
// this.deleteConfirmShow = true;
|
||||
|
||||
this.$u.api
|
||||
.DeleteDialogueManagement({
|
||||
id: item.id,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.succeed) {
|
||||
this.$u.toast("删除成功");
|
||||
// 刷新聊天历史数据
|
||||
this.$emit("refresh-chat-history");
|
||||
} else {
|
||||
this.$u.toast(res.msg || "删除失败");
|
||||
}
|
||||
});
|
||||
},
|
||||
// // 确认删除：确认后发出删除事件并重置状态
|
||||
// confirmDelete() {
|
||||
// if (this.deleteTargetItem) {
|
||||
// this.$emit("delete-conversation", this.deleteTargetItem);
|
||||
// }
|
||||
// this.deleteTargetItem = null;
|
||||
// this.deleteConfirmShow = false;
|
||||
// },
|
||||
// // 取消删除：仅关闭弹窗并清空目标
|
||||
// cancelDelete() {
|
||||
// this.deleteConfirmShow = false;
|
||||
// this.deleteTargetItem = null;
|
||||
// },
|
||||
// 滚动到激活的聊天项
|
||||
scrollToActiveItem() {
|
||||
// 查找激活的聊天项
|
||||
|
|
@ -267,16 +385,33 @@ export default {
|
|||
}
|
||||
|
||||
.chat-item {
|
||||
padding: 24rpx 30rpx;
|
||||
padding: 24rpx 24rpx 24rpx 30rpx;
|
||||
border-radius: 16rpx;
|
||||
// margin-bottom: 4rpx;
|
||||
margin-bottom: 4rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
// overflow: hidden; // 移除overflow hidden以便显示popover
|
||||
|
||||
.chat-item-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.more-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-text {
|
||||
font-size: 28rpx;
|
||||
color: #303030;
|
||||
font-family: PingFang SC;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
&-active {
|
||||
|
|
@ -287,11 +422,48 @@ export default {
|
|||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-menu {
|
||||
width: 200rpx;
|
||||
// 相对当前 chat-item 进行绝对定位，随 item 滚动
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
top: 80rpx;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(79, 106, 255, 0.02),
|
||||
rgba(215, 237, 237, 0.01)
|
||||
);
|
||||
box-shadow: 0px 2px 8px 0px rgba(91, 92, 94, 0.3);
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 10rpx 0;
|
||||
z-index: 10005;
|
||||
|
||||
.popover-item {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
|
||||
&:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.popover-text {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-space {
|
||||
height: 30rpx;
|
||||
// 增加底部留白，避免最底部项的浮层阴影被裁剪
|
||||
height: 200rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -236,6 +236,7 @@
|
|||
:user-name="vuex_user ? vuex_user.Name : ''"
|
||||
@select-conversation="handleSelectConversation"
|
||||
@create-conversation="handleCreateConversation"
|
||||
@refresh-chat-history="getChatHistoryList"
|
||||
></chat-history>
|
||||
|
||||
<!-- 完善信息弹出层 -->
|
||||
|
|
@ -405,7 +406,12 @@ export default {
|
|||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
handleLeftClick() {
|
||||
async handleLeftClick() {
|
||||
await this.getChatHistoryList();
|
||||
this.handlePopupShow();
|
||||
},
|
||||
|
||||
async getChatHistoryList() {
|
||||
this.$u.api.GetConversationPage().then((res) => {
|
||||
this.chatHistoryList3 = res.data;
|
||||
if (this.chatHistoryList3.length > 0) {
|
||||
|
|
@ -424,11 +430,13 @@ export default {
|
|||
});
|
||||
}
|
||||
console.log("this.chatHistoryList3", this.chatHistoryList3);
|
||||
|
||||
this.popupShow = true;
|
||||
});
|
||||
},
|
||||
|
||||
handlePopupShow() {
|
||||
this.popupShow = true;
|
||||
},
|
||||
|
||||
scrollToBottom() {
|
||||
// 如果正在加载更多，不执行滚动
|
||||
if (this.isLoadingMore) return;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Loading…
Reference in New Issue