From 0cc252c8ead5fca0dcf72fe8fe449da998a9d897 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E9=A3=9E=E6=B4=8B?= <15778543+xufeiyang6017@user.noreply.gitee.com> Date: Fri, 19 Dec 2025 15:45:14 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=B7=A6=E4=BE=A7=E8=81=8A?= =?UTF-8?q?=E5=A4=A9=E5=88=97=E8=A1=A8=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=8C=85?= =?UTF-8?q?=E6=8B=AC=E6=90=9C=E7=B4=A2=E3=80=81=E8=BF=87=E6=BB=A4=E5=92=8C?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/chat/index.js | 76 ++++++++++++++++++++++-- pages/chat/index.wxml | 56 +++++++++++++----- pages/chat/index.wxss | 132 +++++++++++++++++++++++++++++++----------- 3 files changed, 212 insertions(+), 52 deletions(-) diff --git a/pages/chat/index.js b/pages/chat/index.js index 9bd7c59..e53dc06 100644 --- a/pages/chat/index.js +++ b/pages/chat/index.js @@ -1,7 +1,9 @@ // pages/chat/index.js Page({ data: { - chatList: [] + chatList: [], + searchKeyword: '', + filteredChatList: [] }, onLoad: function (options) { @@ -26,19 +28,83 @@ Page({ content: '您好，有什么可以帮助您的吗？', time: '10分钟前', unread: false + }, + { + id: 3, + name: '供应商小李', + avatar: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', + content: '您的订单已经发货，请注意查收', + time: '1小时前', + unread: true + }, + { + id: 4, + name: '采购部门', + avatar: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', + content: '关于下个月的采购计划，请查收附件', + time: '昨天', + unread: false + }, + { + id: 5, + name: '技术支持', + avatar: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', + content: '系统升级已完成，新增了多项功能', + time: '2天前', + unread: true } ]; this.setData({ - chatList: chatList + chatList: chatList, + filteredChatList: chatList + }); + }, + + // 搜索功能 + onSearchInput: function (e) { + const keyword = e.detail.value; + this.setData({ + searchKeyword: keyword }); + this.filterChatList(keyword); }, + // 过滤聊天列表 + filterChatList: function (keyword) { + if (!keyword) { + this.setData({ + filteredChatList: this.data.chatList + }); + return; + } + + const filteredList = this.data.chatList.filter(item => { + return item.name.includes(keyword) || item.content.includes(keyword); + }); + + this.setData({ + filteredChatList: filteredList + }); + }, + + // 聊天项点击事件 onChatItemTap: function (e) { + const chatId = e.currentTarget.dataset.id; + // 跳转到聊天详情页 - wx.showToast({ - title: '聊天功能开发中', - icon: 'none' + wx.navigateTo({ + url: '/pages/chat-detail/index?id=' + chatId, + success: function () { + console.log('成功跳转到聊天详情页'); + }, + fail: function (error) { + console.error('跳转到聊天详情页失败:', error); + wx.showToast({ + title: '聊天功能开发中', + icon: 'none' + }); + } }); }, diff --git a/pages/chat/index.wxml b/pages/chat/index.wxml index fa11f59..f96a713 100644 --- a/pages/chat/index.wxml +++ b/pages/chat/index.wxml @@ -1,18 +1,48 @@ - - - 消息中心 - - + + - - - + + + + + + + + + + + + + + + + + + {{item.name}} + {{item.time}} + + + {{item.content}} + + - - 系统消息 - 欢迎使用消息中心功能 - 刚刚 + + + + 暂无聊天记录 - + \ No newline at end of file diff --git a/pages/chat/index.wxss b/pages/chat/index.wxss index 2cd34b0..99abb1f 100644 --- a/pages/chat/index.wxss +++ b/pages/chat/index.wxss @@ -1,72 +1,136 @@ -.container { +/* 聊天容器 */ +.chat-container { + width: 100%; + height: 100vh; + display: flex; background-color: #f5f5f5; - min-height: 100vh; } -.chat-header { - background-color: #fff; - padding: 20rpx; - border-bottom: 1rpx solid #e8e8e8; +/* 左侧聊天列表 */ +.chat-list { + width: 100%; + height: 100%; display: flex; - align-items: center; - justify-content: center; + flex-direction: column; +} + +/* 搜索框 */ +.search-bar { + padding: 10rpx 20rpx; + background-color: #fff; + border-bottom: 1rpx solid #e5e5e5; } -.chat-title { - font-size: 36rpx; - font-weight: bold; +.search-input { + width: 100%; + height: 60rpx; + background-color: #f5f5f5; + border-radius: 30rpx; + padding: 0 30rpx; + font-size: 28rpx; color: #333; } -.chat-list { - padding: 20rpx; +/* 聊天列表滚动区域 */ +.chat-scroll-view { + flex: 1; + overflow-y: auto; } +/* 聊天项 */ .chat-item { - background-color: #fff; - border-radius: 12rpx; - padding: 20rpx; display: flex; - align-items: center; - margin-bottom: 20rpx; - box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); + align-items: flex-start; + padding: 20rpx; + background-color: #fff; + border-bottom: 1rpx solid #f0f0f0; + transition: background-color 0.2s; +} + +.chat-item:active { + background-color: #f8f8f8; +} + +/* 头像容器 */ +.avatar-container { + position: relative; + margin-right: 20rpx; } +/* 头像 */ .avatar { width: 80rpx; height: 80rpx; border-radius: 50%; - margin-right: 20rpx; - overflow: hidden; + border: 2rpx solid #eee; } -.avatar image { - width: 100%; - height: 100%; +/* 未读消息提示 */ +.unread-dot { + position: absolute; + top: 0; + right: 0; + width: 24rpx; + height: 24rpx; + background-color: #ff4444; + border-radius: 50%; + border: 4rpx solid #fff; } +/* 聊天信息 */ .chat-info { flex: 1; - position: relative; + min-width: 0; } -.chat-name { +/* 聊天头部信息 */ +.chat-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8rpx; +} + +/* 名称 */ +.name { font-size: 32rpx; - font-weight: bold; + font-weight: 500; color: #333; - margin-bottom: 8rpx; } +/* 时间 */ +.time { + font-size: 24rpx; + color: #999; +} + +/* 聊天内容 */ .chat-content { + display: flex; + align-items: center; +} + +/* 最后一条消息 */ +.last-message { font-size: 28rpx; color: #666; - margin-bottom: 8rpx; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 100%; } -.chat-time { - font-size: 24rpx; +/* 空状态 */ +.empty-state { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + padding: 0 40rpx; +} + +.empty-text { + font-size: 28rpx; color: #999; - position: absolute; - top: 0; - right: 0; + text-align: center; } \ No newline at end of file