126 lines
4.2 KiB
Plaintext
126 lines
4.2 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">
|
|
<text class="chat-text" decode="{{true}}">{{item.text}}</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">
|
|
<text class="chat-text" decode="{{true}}">{{item.text}}</text>
|
|
</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="bottom-input-area">
|
|
<view class="input-container figma-input-container">
|
|
<view class="figma-input-wrap">
|
|
<input
|
|
class="figma-text-input"
|
|
placeholder="请输入您要咨询的问题..."
|
|
value="{{inputText}}"
|
|
bindinput="onInput"
|
|
confirm-type="send"
|
|
bindconfirm="onSend"
|
|
focus="{{inputFocus}}"
|
|
hold-keyboard="{{true}}"
|
|
/>
|
|
</view>
|
|
|
|
<view class="figma-send-btn" wx:if="{{inputText.length > 0}}" bindtap="onSend">
|
|
<image src="/images/icon-send.png" class="figma-btn-icon" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|