92 lines
2.2 KiB
Plaintext
92 lines
2.2 KiB
Plaintext
===========================================
|
||
添加打电话按钮 - 代码补丁
|
||
===========================================
|
||
|
||
文件：xuniYou/pages/index/index.vue
|
||
位置：约第 302-318 行（聊天输入框区域）
|
||
|
||
===========================================
|
||
步骤 1：找到以下代码
|
||
===========================================
|
||
|
||
<!-- 底部输入框 -->
|
||
<view class="chat-input-bar">
|
||
<input
|
||
class="chat-message-input"
|
||
v-model="chatInputText"
|
||
placeholder="输入消息..."
|
||
confirm-type="send"
|
||
:adjust-position="true"
|
||
:hold-keyboard="false"
|
||
@confirm="sendChatMessage"
|
||
@blur="onInputBlur"
|
||
/>
|
||
<view class="chat-send-btn" @click="sendChatMessage">
|
||
<text>发送</text>
|
||
</view>
|
||
</view>
|
||
|
||
===========================================
|
||
步骤 2：替换为以下代码
|
||
===========================================
|
||
|
||
<!-- 底部输入框 -->
|
||
<view class="chat-input-bar">
|
||
<!-- 打电话按钮 -->
|
||
<view class="chat-phone-btn" @click="tophone">
|
||
<image class="chat-phone-icon" src="/static/images/phone_a1.png" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<input
|
||
class="chat-message-input"
|
||
v-model="chatInputText"
|
||
placeholder="输入消息..."
|
||
confirm-type="send"
|
||
:adjust-position="true"
|
||
:hold-keyboard="false"
|
||
@confirm="sendChatMessage"
|
||
@blur="onInputBlur"
|
||
/>
|
||
<view class="chat-send-btn" @click="sendChatMessage">
|
||
<text>发送</text>
|
||
</view>
|
||
</view>
|
||
|
||
===========================================
|
||
步骤 3：添加样式
|
||
===========================================
|
||
|
||
在 <style> 部分（约第 4916 行附近）的 .chat-input-bar 样式后面添加：
|
||
|
||
/* 打电话按钮 */
|
||
.chat-phone-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.chat-phone-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
===========================================
|
||
完成！
|
||
===========================================
|
||
|
||
保存文件后，重新编译前端项目。
|
||
|
||
测试步骤：
|
||
1. 打开应用
|
||
2. 进入聊天页面
|
||
3. 应该能看到输入框左侧有一个紫色的圆形按钮
|
||
4. 点击按钮进入语音通话页面
|
||
|
||
===========================================
|