You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
3.1 KiB
76 lines
3.1 KiB
<view class="container">
|
|
<!-- 头部导航栏 - 现代填充风格 -->
|
|
<view class="header-full">
|
|
<!-- 左侧返回按钮 -->
|
|
<view class="header-left">
|
|
<view class="header-btn back-btn" bindtap="onBack">
|
|
<text class="icon-back">‹</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 中间标题区域 -->
|
|
<view class="header-center">
|
|
<view class="title-large">消息</view>
|
|
</view>
|
|
|
|
<!-- 右侧操作按钮区域 -->
|
|
<view class="header-right">
|
|
<view class="header-btn action-btn" bindtap="onNavigationBarButtonTap" data-type="search">
|
|
<text class="icon-search">🔍</text>
|
|
</view>
|
|
<view class="header-btn action-btn" bindtap="onNavigationBarButtonTap" data-type="more">
|
|
<text class="icon-more">···</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 微信风格的消息类型切换 -->
|
|
<view class="tabs-wechat">
|
|
<view class="tab-item {{activeTab === 'all' ? 'active' : ''}}" bindtap="switchTab" data-tab="all">全部消息</view>
|
|
<view class="tab-item {{activeTab === 'unread' ? 'active' : ''}}" bindtap="switchTab" data-tab="unread">未读消息</view>
|
|
<view class="clear-unread" bindtap="clearAllUnreadStatus">清除未读</view>
|
|
</view>
|
|
|
|
<!-- 消息列表 - 微信风格 -->
|
|
<scroll-view class="message-list-wechat" scroll-y="true">
|
|
<!-- 提示消息 -->
|
|
<view class="message-tips" wx:if="{{messages.length > 0 && showOldMessageTips}}">
|
|
以下为3天前的消息，提示将弱化
|
|
</view>
|
|
|
|
<!-- 消息项 -->
|
|
<view class="message-item-wechat" wx:for="{{messages}}" wx:key="id" bindtap="navigateToChatDetail" data-user-id="{{item.id}}" data-user-name="{{item.name}}" data-conversation-id="{{item.conversationId || item.id}}">
|
|
<!-- 头像 -->
|
|
<view class="avatar-container-wechat">
|
|
<view class="avatar-wechat">
|
|
{{item.avatar || (item.name && item.name.charAt(0)) || '用'}}
|
|
</view>
|
|
<!-- 未读红点 -->
|
|
<view class="unread-dot" wx:if="{{!item.isRead && !item.unreadCount}}"></view>
|
|
<!-- 未读数字角标 -->
|
|
<view class="unread-badge-wechat" wx:if="{{item.unreadCount > 0}}">{{item.unreadCount > 99 ? '99+' : item.unreadCount}}</view>
|
|
</view>
|
|
|
|
<!-- 消息内容区域 -->
|
|
<view class="message-content-wechat">
|
|
<!-- 消息头部：名称和时间 -->
|
|
<view class="message-header-wechat">
|
|
<view class="name-wechat">{{item.name}}</view>
|
|
<view class="time-wechat">{{item.time}}</view>
|
|
</view>
|
|
<!-- 消息文本 -->
|
|
<view class="message-text-wechat">
|
|
<text wx:if="{{!item.isRead && !item.unreadCount}}" class="unread-dot-small">●</text>
|
|
<text class="message-content-text">{{item.content || '[图片]'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态提示 -->
|
|
<view class="empty-state-wechat" wx:if="{{messages.length === 0}}">
|
|
<view class="empty-icon-wechat">💬</view>
|
|
<view class="empty-text-wechat">暂无消息记录</view>
|
|
<view class="empty-subtext">您可以开始与客户或客服的对话</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|