徐飞洋
3 months ago
3 changed files with 212 additions and 52 deletions
@ -1,18 +1,48 @@ |
|||
<view class="container"> |
|||
<view class="chat-header"> |
|||
<text class="chat-title">消息中心</text> |
|||
</view> |
|||
|
|||
<view class="chat-container"> |
|||
<!-- 左侧聊天列表 --> |
|||
<view class="chat-list"> |
|||
<view class="chat-item" bindtap="onChatItemTap"> |
|||
<view class="avatar"> |
|||
<image src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0" mode="aspectFill"></image> |
|||
<!-- 搜索框 --> |
|||
<view class="search-bar"> |
|||
<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 class="chat-time">刚刚</view> |
|||
|
|||
<!-- 无聊天记录时显示 --> |
|||
<view wx:if="{{chatList.length === 0}}" class="empty-state"> |
|||
<text class="empty-text">暂无聊天记录</text> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
@ -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; |
|||
} |
|||
Loading…
Reference in new issue