242 lines
9.8 KiB
Plaintext
242 lines
9.8 KiB
Plaintext
<!--pages/support/support.wxml-->
|
|
<view class="page-container">
|
|
<!-- 状态栏 -->
|
|
<view class="status-bar-area">
|
|
<view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
|
|
</view>
|
|
|
|
<!-- 顶部导航栏 -->
|
|
<view class="nav-header" style="top: {{statusBarHeight}}px;">
|
|
<view class="nav-content">
|
|
<!-- 返回按钮 -->
|
|
<view class="nav-back" bindtap="onBack">
|
|
<image src="/images/icon-back-arrow.png" class="back-icon" mode="aspectFit"></image>
|
|
<text class="back-text">返回</text>
|
|
</view>
|
|
|
|
<!-- 中间角色信息 -->
|
|
<view class="nav-center">
|
|
<view class="nav-avatar-wrap">
|
|
<image class="nav-avatar" src="/images/icon-headphones.png" mode="aspectFit"></image>
|
|
</view>
|
|
<text class="nav-name">在线客服</text>
|
|
<view class="online-dot"></view>
|
|
</view>
|
|
|
|
<!-- 右侧占位 -->
|
|
<view class="nav-right-placeholder"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 聊天内容区域 -->
|
|
<view class="chat-area-wrapper" style="top: {{navHeight + statusBarHeight}}px;" bindtap="onTapChatArea">
|
|
<scroll-view
|
|
scroll-y
|
|
class="chat-scroll"
|
|
scroll-into-view="{{scrollIntoView}}"
|
|
scroll-with-animation="{{true}}"
|
|
enhanced="{{true}}"
|
|
show-scrollbar="{{false}}"
|
|
scroll-top="{{scrollTop}}"
|
|
>
|
|
<!-- 咨询说明提示 -->
|
|
<view class="encrypt-hint">
|
|
<text>您正在与人工客服对话，我们将尽快回复</text>
|
|
</view>
|
|
|
|
<!-- 聊天消息列表 -->
|
|
<view class="chat-list">
|
|
<view
|
|
class="chat-item {{item.isMe ? 'me' : 'other'}}"
|
|
wx:for="{{messages}}"
|
|
wx:key="id"
|
|
id="msg-{{index}}"
|
|
>
|
|
<!-- 客服消息（左侧） -->
|
|
<block wx:if="{{!item.isMe}}">
|
|
<view class="avatar-wrap">
|
|
<image class="chat-avatar" src="/images/icon-headphones.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="message-content">
|
|
<!-- 文字消息 -->
|
|
<view class="chat-bubble other" wx:if="{{item.type === 'text'}}">
|
|
<text class="chat-text" decode="{{true}}">{{item.text}}</text>
|
|
</view>
|
|
<!-- 图片消息 -->
|
|
<view class="chat-bubble-image other" wx:elif="{{item.type === 'image'}}">
|
|
<image class="message-image" src="{{item.imageUrl}}" mode="widthFix" bindtap="onPreviewImage" data-url="{{item.imageUrl}}"></image>
|
|
</view>
|
|
<!-- 语音消息 -->
|
|
<view class="chat-bubble voice other {{playingVoiceId === item.id ? 'playing' : ''}}" wx:elif="{{item.type === 'voice'}}" bindtap="onPlayVoice" data-id="{{item.id}}" data-url="{{item.audioUrl}}">
|
|
<view class="voice-waves">
|
|
<view class="voice-wave-bar"></view>
|
|
<view class="voice-wave-bar"></view>
|
|
<view class="voice-wave-bar"></view>
|
|
</view>
|
|
<text class="voice-duration">{{item.duration || 1}}″</text>
|
|
</view>
|
|
<view class="message-actions">
|
|
<text class="message-time">{{item.time}}</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
<!-- 用户消息（右侧） -->
|
|
<block wx:else>
|
|
<view class="message-content me">
|
|
<!-- 文字消息 -->
|
|
<view class="chat-bubble me" wx:if="{{item.type === 'text'}}">
|
|
<text class="chat-text" decode="{{true}}">{{item.text}}</text>
|
|
</view>
|
|
<!-- 图片消息 -->
|
|
<view class="chat-bubble-image me" wx:elif="{{item.type === 'image'}}">
|
|
<image class="message-image" src="{{item.imageUrl}}" mode="widthFix" bindtap="onPreviewImage" data-url="{{item.imageUrl}}"></image>
|
|
</view>
|
|
<!-- 语音消息 -->
|
|
<view class="chat-bubble voice me {{playingVoiceId === item.id ? 'playing' : ''}}" wx:elif="{{item.type === 'voice'}}" bindtap="onPlayVoice" data-id="{{item.id}}" data-url="{{item.audioUrl}}">
|
|
<text class="voice-duration">{{item.duration || 1}}″</text>
|
|
<view class="voice-waves">
|
|
<view class="voice-wave-bar"></view>
|
|
<view class="voice-wave-bar"></view>
|
|
<view class="voice-wave-bar"></view>
|
|
</view>
|
|
</view>
|
|
<text class="message-time">{{item.time}}</text>
|
|
</view>
|
|
<view class="avatar-wrap user-avatar">
|
|
<image class="chat-avatar" src="{{myAvatar}}" mode="aspectFill" binderror="onAvatarError"></image>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
|
|
<!-- 正在输入提示 -->
|
|
<view class="chat-item other" wx:if="{{isTyping}}">
|
|
<view class="avatar-wrap">
|
|
<image class="chat-avatar" src="/images/icon-headphones.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="message-content">
|
|
<view class="chat-bubble other typing">
|
|
<view class="typing-dot"></view>
|
|
<view class="typing-dot"></view>
|
|
<view class="typing-dot"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="chat-bottom-space"></view>
|
|
<view id="chat-bottom-anchor"></view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 面板打开时的透明遮罩层 -->
|
|
<view class="panel-overlay" wx:if="{{showEmoji || showMorePanel}}" bindtap="onClosePanels"></view>
|
|
|
|
<!-- 底部输入区域 -->
|
|
<view class="bottom-input-area {{showEmoji || showMorePanel ? 'panel-open' : ''}}">
|
|
<view class="input-container figma-input-container">
|
|
<!-- 语音/键盘切换按钮 -->
|
|
<view class="figma-voice-btn" bindtap="onVoiceMode">
|
|
<image src="{{isVoiceMode ? '/images/icon-keyboard.png' : '/images/chat-input-voice.png'}}" class="figma-btn-icon" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<!-- 语音模式：按住说话按钮 -->
|
|
<view
|
|
wx:if="{{isVoiceMode}}"
|
|
class="voice-record-btn {{isRecording ? 'recording' : ''}}"
|
|
bindtouchstart="onVoiceTouchStart"
|
|
bindtouchmove="onVoiceTouchMove"
|
|
bindtouchend="onVoiceTouchEnd"
|
|
bindtouchcancel="onVoiceTouchCancel"
|
|
>
|
|
<text>{{isRecording ? (voiceCancelHint ? '松开 取消' : '松开 发送') : '按住 说话'}}</text>
|
|
</view>
|
|
|
|
<!-- 文字模式：输入框 -->
|
|
<view wx:else class="figma-input-wrap">
|
|
<input
|
|
class="figma-text-input"
|
|
placeholder="请输入您要咨询的问题..."
|
|
value="{{inputText}}"
|
|
bindinput="onInput"
|
|
confirm-type="send"
|
|
bindconfirm="onSend"
|
|
focus="{{inputFocus}}"
|
|
adjust-position="{{!showEmoji}}"
|
|
hold-keyboard="{{true}}"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 表情按钮 -->
|
|
<view class="figma-emoji-btn {{showEmoji ? 'active' : ''}}" bindtap="onEmojiToggle">
|
|
<image src="{{showEmoji ? '/images/icon-keyboard.png' : '/images/chat-input-emoji.png'}}" class="figma-btn-icon" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<!-- 发送/更多按钮 -->
|
|
<view class="figma-send-btn" wx:if="{{inputText.length > 0 && !isVoiceMode}}" bindtap="onSend">
|
|
<image src="/images/icon-send.png" class="figma-btn-icon" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="figma-add-btn {{showMorePanel ? 'active' : ''}}" wx:else bindtap="onAddMore">
|
|
<image src="/images/chat-input-plus.png" class="figma-btn-icon" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 表情面板 -->
|
|
<view class="emoji-panel" wx:if="{{showEmoji}}">
|
|
<scroll-view scroll-y class="emoji-scroll">
|
|
<view class="emoji-grid">
|
|
<view
|
|
class="emoji-item"
|
|
wx:for="{{emojis}}"
|
|
wx:key="*this"
|
|
data-emoji="{{item}}"
|
|
bindtap="onEmojiSelect"
|
|
>
|
|
<text class="emoji-text">{{item}}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 更多功能面板 -->
|
|
<view class="more-panel" wx:if="{{showMorePanel}}">
|
|
<view class="more-panel-content">
|
|
<view class="more-grid ai-chat-grid">
|
|
<!-- 照片 -->
|
|
<view class="more-item" bindtap="onChooseImage">
|
|
<view class="more-icon-wrap figma-style">
|
|
<image class="figma-action-icon" src="/images/chat-action-photo.png" mode="aspectFit"></image>
|
|
</view>
|
|
<text class="more-text">照片</text>
|
|
</view>
|
|
<!-- 拍摄 -->
|
|
<view class="more-item" bindtap="onTakePhoto">
|
|
<view class="more-icon-wrap figma-style">
|
|
<image class="figma-action-icon" src="/images/chat-action-camera.png" mode="aspectFit"></image>
|
|
</view>
|
|
<text class="more-text">拍摄</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 底部安全区域 -->
|
|
<view class="more-panel-safe"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 语音录制提示浮层 -->
|
|
<view class="voice-recording-mask" wx:if="{{isRecording}}">
|
|
<view class="voice-recording-popup {{voiceCancelHint ? 'cancel' : ''}}">
|
|
<view class="voice-wave" wx:if="{{!voiceCancelHint}}">
|
|
<view class="wave-bar"></view>
|
|
<view class="wave-bar"></view>
|
|
<view class="wave-bar"></view>
|
|
<view class="wave-bar"></view>
|
|
<view class="wave-bar"></view>
|
|
</view>
|
|
<image wx:else class="cancel-icon" src="/images/icon-close.png" mode="aspectFit"></image>
|
|
<text class="voice-tip">{{voiceCancelHint ? '松开手指，取消发送' : '手指上划，取消发送'}}</text>
|
|
<text class="voice-duration-tip" wx:if="{{!voiceCancelHint}}">{{recordingDuration}}″</text>
|
|
</view>
|
|
</view>
|
|
</view>
|