95 lines
3.4 KiB
Plaintext
95 lines
3.4 KiB
Plaintext
<view class="message-container">
|
||
<!-- 搜索栏 -->
|
||
<view class="search-bar">
|
||
<view class="search-input">
|
||
<icon type="search" size="16" color="#999"></icon>
|
||
<input placeholder="搜索聊天记录" placeholder-class="placeholder-style"/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 消息列表 - 不按日期分组 -->
|
||
<scroll-view class="message-list" scroll-y>
|
||
<!-- 消息项1 - 个人聊天（有未读） -->
|
||
<view class="message-item" bindtap="goToChat">
|
||
<view class="avatar-container">
|
||
<image class="avatar" src="https://picsum.photos/id/64/200/200" mode="cover"></image>
|
||
<view class="unread-dot"></view>
|
||
</view>
|
||
<view class="message-content">
|
||
<view class="content-top">
|
||
<text class="username">王小明</text>
|
||
<text class="time">10:23</text>
|
||
</view>
|
||
<view class="content-bottom">
|
||
<text class="last-message">我们明天上午9点在公司楼下集合吧</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 消息项2 - 群聊 -->
|
||
<view class="message-item" bindtap="goToChat">
|
||
<view class="avatar-container">
|
||
<image class="avatar" src="https://picsum.photos/id/26/200/200" mode="cover"></image>
|
||
</view>
|
||
<view class="message-content">
|
||
<view class="content-top">
|
||
<text class="username">产品研发群</text>
|
||
<text class="time">昨天</text>
|
||
</view>
|
||
<view class="content-bottom">
|
||
<text class="last-message"><text class="sender">李设计</text>：新的UI稿已经上传到群文件了</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 消息项3 - 系统通知 -->
|
||
<view class="message-item" bindtap="goToChat">
|
||
<view class="avatar-container">
|
||
<image class="avatar" src="https://picsum.photos/id/91/200/200" mode="cover"></image>
|
||
<view class="unread-count">3</view>
|
||
</view>
|
||
<view class="message-content">
|
||
<view class="content-top">
|
||
<text class="username">系统通知</text>
|
||
<text class="time">周一</text>
|
||
</view>
|
||
<view class="content-bottom">
|
||
<text class="last-message">您有3条新的系统通知待查看</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 消息项4 - 个人聊天 -->
|
||
<view class="message-item" bindtap="goToChat">
|
||
<view class="avatar-container">
|
||
<image class="avatar" src="https://picsum.photos/id/65/200/200" mode="cover"></image>
|
||
</view>
|
||
<view class="message-content">
|
||
<view class="content-top">
|
||
<text class="username">张小红</text>
|
||
<text class="time">09-12</text>
|
||
</view>
|
||
<view class="content-bottom">
|
||
<text class="last-message">上次你说的那个电影资源能发我一下吗？</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 消息项5 - 服务号消息 -->
|
||
<view class="message-item" bindtap="goToChat">
|
||
<view class="avatar-container">
|
||
<image class="avatar" src="https://picsum.photos/id/62/200/200" mode="cover"></image>
|
||
</view>
|
||
<view class="message-content">
|
||
<view class="content-top">
|
||
<text class="username">生活服务号</text>
|
||
<text class="time">09-10</text>
|
||
</view>
|
||
<view class="content-bottom">
|
||
<text class="last-message">您订阅的服务已更新，点击查看详情</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|