126 lines
4.4 KiB
Plaintext
126 lines
4.4 KiB
Plaintext
<!--
|
||
自定义底部导航栏 - 公众号客服交互模式
|
||
|
||
两种状态：
|
||
状态1（默认）： [首页] [设备] [任务] [⌨]
|
||
状态2（聊天模式）： [☰菜单] [🔊/⌨] [输入框........] [🎤] [😀] [↗/+]（自动根据当前页面判断）
|
||
|
||
交互：
|
||
点击⌨ → switchTab 跳到聊天页，tab-bar 自动进入状态2
|
||
点击☰ → switchTab 跳回首页，tab-bar 自动回到状态1
|
||
-->
|
||
<view class="tab-bar {{showChatPanel ? 'chat-mode' : ''}}" style="bottom: {{tabBarBottom}}px;">
|
||
|
||
<!-- ====== 状态1：普通导航模式（默认）====== -->
|
||
<block wx:if="{{!showChatPanel}}">
|
||
<!-- 左侧3个Tab -->
|
||
<view
|
||
wx:for="{{tabList}}"
|
||
wx:key="index"
|
||
class="tab-item {{currentTab === index ? 'active' : ''}}"
|
||
data-index="{{index}}"
|
||
data-path="{{item.pagePath}}"
|
||
bindtap="onSwitchTab"
|
||
>
|
||
<text class="tab-text">{{item.text}}</text>
|
||
</view>
|
||
|
||
<!-- 右侧键盘按钮：跳转到聊天页 -->
|
||
<view class="keyboard-btn" bindtap="goToChat">
|
||
<view class="kb-circle">
|
||
<text class="kb-icon">⌨</text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- ====== 状态2：聊天输入模式（点击键盘后）====== -->
|
||
<block wx:else>
|
||
<!-- 左侧：菜单按钮（跳回首页） -->
|
||
<view class="chat-tool-btn" bindtap="goHome">
|
||
<text class="tool-icon">☰</text>
|
||
</view>
|
||
|
||
<!-- 左侧2：语音/文字切换按钮 -->
|
||
<view class="chat-tool-btn" wx:if="{{!voiceMode}}" bindtap="switchToVoiceMode">
|
||
<text class="tool-icon">🔊</text>
|
||
</view>
|
||
<view class="chat-tool-btn" wx:else bindtap="switchToTextMode">
|
||
<text class="tool-icon">⌨</text>
|
||
</view>
|
||
|
||
<!-- 中间：文本输入框 / 语音录制按钮 -->
|
||
<input
|
||
class="chat-input"
|
||
type="text"
|
||
value="{{inputText}}"
|
||
placeholder="请输入您的问题..."
|
||
placeholder-class="placeholder-style"
|
||
confirm-type="send"
|
||
bindinput="onInputChange"
|
||
bindconfirm="sendTextMessage"
|
||
bindfocus="onInputFocus"
|
||
bindblur="onInputBlur"
|
||
bindkeyboardheightchange="onKeyboardHeightChange"
|
||
focus="{{inputFocus}}"
|
||
adjust-position="{{false}}"
|
||
wx:if="{{!voiceMode}}"
|
||
/>
|
||
|
||
<!-- 语音模式：按住说话 -->
|
||
<view
|
||
class="voice-btn {{isRecording ? 'recording' : ''}}"
|
||
bindtouchstart="startRecordVoice"
|
||
bindtouchend="stopRecordVoice"
|
||
bindtouchcancel="cancelRecordVoice"
|
||
wx:if="{{voiceMode}}"
|
||
>
|
||
<text class="voice-text">{{isRecording ? '松开发送' : '按住 说话'}}</text>
|
||
<view class="record-wave" wx:if="{{isRecording}}">
|
||
<view class="wave wave1"></view>
|
||
<view class="wave wave2"></view>
|
||
<view class="wave wave3"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 右侧1：语音转文字按钮（点击开始/停止识别） -->
|
||
<view
|
||
class="chat-tool-btn send-area {{isVoiceToText ? 'voice-active' : ''}}"
|
||
wx:if="{{!voiceMode}}"
|
||
bindtap="toggleVoiceToText"
|
||
>
|
||
<text class="tool-icon send-icon {{isVoiceToText ? 'send-icon-active' : 'send-icon'}}">🎤</text>
|
||
</view>
|
||
<view class="chat-tool-btn send-area disabled" wx:else>
|
||
<text class="tool-icon">🎤</text>
|
||
</view>
|
||
|
||
<!-- 右侧2：表情按钮 -->
|
||
<view class="chat-tool-btn" bindtap="onTapEmoji">
|
||
<text class="tool-icon">😀</text>
|
||
</view>
|
||
|
||
<!-- 右侧3：发送按钮（有内容时）或 更多按钮（无内容时） -->
|
||
<view
|
||
wx:if="{{hasInput}}"
|
||
style="width:96rpx;height:80rpx;display:flex;align-items:center;justify-content:center;"
|
||
bindtap="sendTextMessage"
|
||
>
|
||
<view style="width:88rpx;height:72rpx;background:linear-gradient(135deg,#1677FF,#0958D9);border-radius:16rpx;display:flex;align-items:center;justify-content:center;box-shadow:0 4rpx 14rpx rgba(22,119,255,0.3);">
|
||
<text style="font-size:38rpx;color:#ffffff;font-weight:bold;line-height:1;">↗</text>
|
||
</view>
|
||
</view>
|
||
<view wx:else class="chat-tool-btn" bindtap="onTapMore">
|
||
<text class="tool-icon">+</text>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<!-- ====== 语音播放中提示 ====== -->
|
||
<view class="voice-playing-toast" wx:if="{{isPlayingVoice}}">
|
||
<view class="playing-wave">
|
||
<view class="p-bar p1"></view><view class="p-bar p2"></view>
|
||
<view class="p-bar p3"></view><view class="p-bar p4"></view><view class="p-bar p5"></view>
|
||
</view>
|
||
<text class="playing-text">正在播放...</text>
|
||
</view>
|