Files
a_long/miniprogram/pages/xiaoxi/xiaoxi.wxml

88 lines
4.8 KiB
Plaintext

<view class="msg-page">
<!-- 顶部搜索 + 通知 -->
<view class="header">
<view class="search-bar">
<input class="search-input" placeholder="搜索订单/用户ID/昵称" bindinput="onSearchInput" value="{{searchKeyword}}" />
<text class="search-icon">🔍</text>
</view>
<view class="notify-switch" bindtap="toggleNotification">
<text class="notify-text">{{notificationMuted ? '静音' : '通知'}}</text>
</view>
</view>
<!-- 标签栏 -->
<view class="tab-row">
<view class="tab-item {{activeTab === 0 ? 'active' : ''}}" data-index="0" bindtap="switchTab">
<text class="tab-label">订单消息</text>
<text class="tab-badge" wx:if="{{tabUnread[0] > 0}}">{{tabUnread[0]}}</text>
</view>
<view class="tab-item {{activeTab === 1 ? 'active' : ''}}" data-index="1" bindtap="switchTab">
<text class="tab-label">用户消息</text>
<text class="tab-badge" wx:if="{{tabUnread[1] > 0}}">{{tabUnread[1]}}</text>
</view>
<view class="tab-item {{activeTab === 2 ? 'active' : ''}}" data-index="2" bindtap="switchTab">
<text class="tab-label">客服消息</text>
<text class="tab-badge" wx:if="{{tabUnread[2] > 0}}">{{tabUnread[2]}}</text>
</view>
</view>
<!-- 会话列表 (上拉加载更多) -->
<scroll-view class="conversation-list" scroll-y="true" bindscrolltolower="onScrollToLower" style="height: {{scrollHeight}}px">
<block wx:for="{{filteredConversations}}" wx:key="key" wx:for-index="i" wx:if="{{i < displayCount}}">
<view class="conversation-item {{item.unread > 0 ? 'has-unread' : ''}} {{item.type === 'group' ? 'order-group-item' : ''}}" data-conversation="{{item}}" bindtap="chat" bindlongpress="showAction">
<image class="avatar {{item.type === 'group' ? 'avatar-round' : ''}}" src="{{item.data.avatar}}" mode="aspectFill" />
<view class="info">
<view class="top-line">
<text class="name">{{item.data.name}}</text>
<text class="time">{{item.lastMessage.date}}</text>
</view>
<block wx:if="{{item.type === 'group'}}">
<view class="user-meta-row" wx:if="{{item.data.counterpartYonghuid}}">
<text class="user-meta">对方 {{item.data.counterpartYonghuid}} {{item.data.name}}</text>
</view>
<view class="user-meta-row" wx:if="{{item.data.dashouYonghuid}}">
<text class="user-meta sub">打手 {{item.data.dashouYonghuid}} {{item.data.dashouNicheng}}</text>
</view>
<view class="user-meta-row" wx:if="{{item.data.partnerYonghuid}}">
<text class="user-meta sub">{{item.data.partnerRoleLabel || '商家'}} {{item.data.partnerYonghuid}} {{item.data.partnerNicheng}}</text>
</view>
<view class="order-block" wx:if="{{item.data.orderId || item.data.orderDesc}}">
<text class="order-id" wx:if="{{item.data.orderId}}">单号 {{item.data.orderId}}</text>
<text class="order-desc" wx:if="{{item.data.orderDesc}}">{{item.data.orderDesc}}</text>
<text class="order-status" wx:if="{{item.data.orderZhuangtaiText}}">{{item.data.orderZhuangtaiText}}</text>
</view>
<view class="bottom-line">
<text class="last-msg">{{item.displayLastMsg || item.lastMessage.payload.text}}</text>
<view class="unread-dot" wx:if="{{item.unread > 0}}">{{item.unread > 99 ? '99+' : item.unread}}</view>
</view>
</block>
<view class="bottom-line" wx:else>
<text class="last-msg">{{item.lastMessage.type === 'text' ? item.lastMessage.payload.text : '[其他消息]'}}</text>
<view class="unread-dot" wx:if="{{item.unread > 0}}">{{item.unread > 99 ? '99+' : item.unread}}</view>
</view>
</view>
</view>
</block>
<!-- 客服标签页空状态时显示联系客服按钮 -->
<view class="kefu-entry" wx:if="{{activeTab === 2 && filteredConversations.length === 0}}">
<button class="kefu-btn" bindtap="chatKefu">联系客服</button>
</view>
<view class="load-tip" wx:if="{{filteredConversations.length > displayCount}}">上拉加载更多</view>
<view class="empty" wx:if="{{filteredConversations.length === 0 && activeTab !== 2}}">
<text>暂无相关消息</text>
</view>
</scroll-view>
<!-- 操作菜单 -->
<view class="action-mask" wx:if="{{actionPopup.visible}}" catchtap="closeMask">
<view class="action-sheet">
<view class="action-btn" bindtap="topConversation">{{actionPopup.conversation.top ? '取消置顶' : '置顶聊天'}}</view>
<view class="action-btn" bindtap="removeConversation">删除聊天</view>
<view class="action-btn cancel" catchtap="closeMask">取消</view>
</view>
</view>
<!-- 底部自定义TabBar -->
<custom-tab-bar />
</view>