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. 点击按钮进入语音通话页面
|
|||
|
|
|
|||
|
|
===========================================
|