实现左侧聊天列表功能，包括搜索、过滤和点击事件

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({
+    wx.navigateTo({
-      title: '聊天功能开发中',
+      url: '/pages/chat-detail/index?id=' + chatId,
-      icon: 'none'
+      success: function () {
+        console.log('成功跳转到聊天详情页');
+      },
+      fail: function (error) {
+        console.error('跳转到聊天详情页失败:', error);
+        wx.showToast({
+          title: '聊天功能开发中',
+          icon: 'none'
+        });
+      }
     });
   },
 

pages/chat/index.wxml

@@ -1,18 +1,48 @@
-<view class="container">
+<view class="chat-container">
-  <view class="chat-header">
+  <!-- 左侧聊天列表 -->
-    <text class="chat-title">消息中心</text>
-  </view>
-  
   <view class="chat-list">
-    <view class="chat-item" bindtap="onChatItemTap">
+    <!-- 搜索框 -->
-      <view class="avatar">
+    <view class="search-bar">
-        <image src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0" mode="aspectFill"></image>
+      <input 
+        type="text" 
+        placeholder="搜索聊天" 
+        class="search-input" 
+        value="{{searchKeyword}}"
+        bindinput="onSearchInput"
+      />
+    </view>
+    
+    <!-- 聊天列表 -->
+    <scroll-view scroll-y="true" class="chat-scroll-view">
+      <view 
+        wx:for="{{filteredChatList}}" 
+        wx:key="id" 
+        class="chat-item" 
+        data-id="{{item.id}}"
+        bindtap="onChatItemTap"
+      >
+        <!-- 头像 -->
+        <view class="avatar-container">
+          <image src="{{item.avatar}}" class="avatar" mode="aspectFill" />
+          <view wx:if="{{item.unread}}" class="unread-dot"></view>
+        </view>
+        
+        <!-- 聊天信息 -->
+        <view class="chat-info">
+          <view class="chat-header">
+            <text class="name">{{item.name}}</text>
+            <text class="time">{{item.time}}</text>
+          </view>
+          <view class="chat-content">
+            <text class="last-message">{{item.content}}</text>
+          </view>
+        </view>
       </view>
-      <view class="chat-info">
+      
-        <view class="chat-name">系统消息</view>
+      <!-- 无聊天记录时显示 -->
-        <view class="chat-content">欢迎使用消息中心功能</view>
+      <view wx:if="{{chatList.length === 0}}" class="empty-state">
-        <view class="chat-time">刚刚</view>
+        <text class="empty-text">暂无聊天记录</text>
       </view>
-    </view>
+    </scroll-view>
   </view>
 </view>

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;
+.chat-list {
-  padding: 20rpx;
+  width: 100%;
-  border-bottom: 1rpx solid #e8e8e8;
+  height: 100%;
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  justify-content: center;
+}
+
+/* 搜索框 */
+.search-bar {
+  padding: 10rpx 20rpx;
+  background-color: #fff;
+  border-bottom: 1rpx solid #e5e5e5;
 }
 
-.chat-title {
+.search-input {
-  font-size: 36rpx;
+  width: 100%;
-  font-weight: bold;
+  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;
+  align-items: flex-start;
-  margin-bottom: 20rpx;
+  padding: 20rpx;
-  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  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;
+  border: 2rpx solid #eee;
-  overflow: hidden;
 }
 
-.avatar image {
+/* 未读消息提示 */
-  width: 100%;
+.unread-dot {
-  height: 100%;
+  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;
+  text-align: center;
-  top: 0;
-  right: 0;
 }