99 lines
5.4 KiB
Plaintext
99 lines
5.4 KiB
Plaintext
<view class="chat-page">
|
||
<view class="order-status-bar" wx:if="{{orderId}}">
|
||
<view class="order-status-main">
|
||
<text class="order-status-id">订单 {{orderId}}</text>
|
||
<text class="order-status-tag" wx:if="{{orderZhuangtaiText}}">{{orderZhuangtaiText}}</text>
|
||
</view>
|
||
<text class="order-status-desc" wx:if="{{orderJieshao}}">{{orderJieshao}}</text>
|
||
</view>
|
||
<scroll-view class="msg-list" scroll-y="true"
|
||
scroll-into-view="{{scrollToView}}"
|
||
refresher-enabled="{{true}}"
|
||
refresher-triggered="{{isRefreshing}}"
|
||
bindrefresherrefresh="onPullDownRefresh"
|
||
style="top: 20rpx; bottom: calc({{bottomSafeHeight}}rpx + {{keyboardHeight}}px + env(safe-area-inset-bottom) + 20rpx);">
|
||
<view class="loading-more" wx:if="{{loadingHistory}}">加载更早消息...</view>
|
||
<block wx:for="{{messages}}" wx:key="messageId">
|
||
<view class="msg-wrapper" data-messageid="{{item.messageId}}" bindlongpress="showAction">
|
||
<view class="time-tag" wx:if="{{item.showTime}}">{{item.formattedTime}}</view>
|
||
<view class="msg-row {{item.senderId === currentUser.id ? 'right' : 'left'}}">
|
||
<!-- 对方头像及昵称 -->
|
||
<view wx:if="{{item.senderId !== currentUser.id}}" class="sender-info">
|
||
<image class="avatar" src="{{item.senderData.avatar || '/images/default-avatar.png'}}" mode="aspectFill" />
|
||
<text class="sender-name">{{item.senderData.name || item.senderId}}</text>
|
||
</view>
|
||
<view class="bubble {{item.senderId === currentUser.id ? 'bubble-right' : 'bubble-left'}} {{item.type === 'image' ? 'bubble-image' : ''}}"
|
||
data-messageid="{{item.messageId}}"
|
||
data-text="{{item.type==='text' ? item.payload.text : ''}}"
|
||
bindtap="{{item.type==='text' ? 'onBubbleTap' : ''}}">
|
||
<text wx:if="{{item.type === 'text'}}" class="msg-text">{{item.payload.text}}</text>
|
||
<image wx:elif="{{item.type === 'image'}}" class="msg-image" src="{{item.imageUrl || item.payload.url}}" mode="widthFix" catchtap="previewImage" data-url="{{item.imageUrl || item.payload.url}}" />
|
||
<view wx:elif="{{item.type === 'order'}}" class="order-bubble" data-payload="{{item.payload}}" bindtap="viewOrderDetail">
|
||
<text class="order-label">[订单]</text>
|
||
<text class="order-info">ID: {{item.payload.orderId}}</text>
|
||
<text class="order-info order-status-inline" wx:if="{{item.payload.zhuangtaiText || item.payload.zhuangtai}}">状态: {{item.payload.zhuangtaiText || item.payload.zhuangtai}}</text>
|
||
<text class="order-info">内容: {{item.payload.jieshao}}</text>
|
||
<text class="order-info">金额: ¥{{item.payload.jine}}</text>
|
||
<view class="order-detail-link">点击查看详情</view>
|
||
</view>
|
||
</view>
|
||
<!-- 自己的头像 -->
|
||
<image wx:if="{{item.senderId === currentUser.id}}" class="avatar" src="{{currentUser.avatar}}" mode="aspectFill" />
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<view id="msg-bottom" style="height:20rpx;"></view>
|
||
</scroll-view>
|
||
|
||
<view class="input-area" style="bottom: {{keyboardHeight}}px; padding-bottom: calc(10rpx + env(safe-area-inset-bottom));">
|
||
<view class="plus-panel {{showPlusPanel ? 'show' : ''}}" catchtap="closePlusPanel">
|
||
<view class="plus-grid">
|
||
<view class="plus-item" catchtap="openEmojiFromPlus">
|
||
<text class="plus-icon">😀</text>
|
||
<text class="plus-label">表情</text>
|
||
</view>
|
||
<view class="plus-item" catchtap="chooseImage">
|
||
<text class="plus-icon">📷</text>
|
||
<text class="plus-label">图片</text>
|
||
</view>
|
||
<view class="plus-item" catchtap="openOrderSender">
|
||
<text class="plus-icon">📋</text>
|
||
<text class="plus-label">订单</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="emoji-mask" wx:if="{{showEmojiPanel}}" catchtap="closeEmojiPanel"></view>
|
||
<view class="emoji-panel {{showEmojiPanel ? 'show' : ''}}">
|
||
<scroll-view scroll-y="true" class="emoji-scroll">
|
||
<view class="emoji-grid">
|
||
<block wx:for="{{emojiList}}" wx:key="*this">
|
||
<view class="emoji-item" data-emoji="{{item}}" catchtap="insertEmoji">{{item}}</view>
|
||
</block>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view class="pending-image" wx:if="{{pendingImage}}">
|
||
<image class="pending-thumb" src="{{pendingImage}}" mode="aspectFill" />
|
||
<view class="pending-remove" catchtap="clearPendingImage">✕</view>
|
||
</view>
|
||
|
||
<view class="write-row">
|
||
<input class="text-input" placeholder="发送消息" value="{{inputText}}" bindinput="onInput" adjust-position="{{false}}" bindkeyboardheightchange="onKeyboardHeightChange" cursor-spacing="10"/>
|
||
<view class="send-btn" bindtap="sendMessage">发送</view>
|
||
<view class="plus-btn" bindtap="togglePlusPanel">
|
||
<text class="plus-icon-single">➕</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="detail-modal" wx:if="{{showDetailModal}}" catchtap="hideDetail">
|
||
<view class="detail-content" catchtap="noop">
|
||
<text class="detail-text" user-select="true">{{detailText}}</text>
|
||
<button class="copy-btn" bindtap="copyDetail">复制</button>
|
||
</view>
|
||
</view>
|
||
|
||
<order-sender visible="{{showOrderSender}}" bind:send="onSendOrder" bind:close="closeOrderSender" />
|
||
</view> |