初始化
This commit is contained in:
237
pages/chat/chat.vue
Normal file
237
pages/chat/chat.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<view class="chat-container">
|
||||
<!-- 消息列表 -->
|
||||
<!-- :style="{ height: messageListHeight + 'px' }" -->
|
||||
<scroll-view scroll-y class="message-list">
|
||||
<block v-for="(item, index) in messages" :key="index">
|
||||
<view :class="['message-item', item.sender === 'user' ? 'user-message' : 'ai-message']">
|
||||
<image class="avatar" :src="item.avatar"></image>
|
||||
<view class="message-content">
|
||||
{{ item.content }}
|
||||
<view v-if="item.sender === 'ai'" class="ai-hint">
|
||||
<text class="quote-icon">▌▌引用来源：{{ item.source }}</text>
|
||||
<view class="ai-actions">
|
||||
<text class="ai-text">回答由AI生成</text>
|
||||
<view class="icon-group">
|
||||
<img src="/static/voice.svg" class="button-icon" />
|
||||
<img src="/static/good.svg" class="button-icon" />
|
||||
<img src="/static/tread.svg" class="button-icon" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 输入框和发送按钮 -->
|
||||
<view class="input-container">
|
||||
<input type="text" v-model="inputMessage" placeholder="输入消息..." @confirm="sendMessage"
|
||||
confirm-type="send" />
|
||||
<img src="/static/send.png" class="btn-icon" @click="sendMessage" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
inputMessage: '',
|
||||
messages: [],
|
||||
messageListHeight: 0 // 动态计算消息列表高度
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
// 修改这里：计算消息列表高度时减去输入框的高度（假设输入框高度为60px）
|
||||
this.messageListHeight = systemInfo.windowHeight - 60;
|
||||
this.initConversation();
|
||||
},
|
||||
methods: {
|
||||
initConversation() {
|
||||
// 初始化对话，添加第一条AI消息
|
||||
this.messages.push({
|
||||
sender: 'ai',
|
||||
avatar: '/static/AI.png',
|
||||
content: '你好！我是你的 AI 助手，有什么我可以帮你的吗？',
|
||||
isAI: true // 标记为 AI 回复
|
||||
});
|
||||
},
|
||||
sendMessage() {
|
||||
if (this.inputMessage.trim() === '') return;
|
||||
|
||||
// 添加用户消息
|
||||
this.messages.push({
|
||||
sender: 'user',
|
||||
avatar: '/static/yonghu.png',
|
||||
content: this.inputMessage
|
||||
});
|
||||
|
||||
// 清空输入框
|
||||
this.inputMessage = '';
|
||||
|
||||
// 模拟AI回复
|
||||
setTimeout(() => {
|
||||
this.messages.push({
|
||||
sender: 'ai',
|
||||
avatar: '/static/AI.png',
|
||||
content: '根据最新数据显示，消费市场正在逐步恢复，线上零售增长显著。特别是在数字化服务、智能设备和健康产品领域，消费需求持续上升。建议关注这些领域的投资机会。',
|
||||
source: '123123123'
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
handleVoiceClick() {
|
||||
// 实现语音功能的逻辑
|
||||
},
|
||||
handleThumbUpClick() {
|
||||
// 实现点赞功能的逻辑
|
||||
},
|
||||
handleThumbDownClick() {
|
||||
// 实现踩功能的逻辑
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
height: 90vh;
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* height: 95vh; */
|
||||
}
|
||||
|
||||
.user-message {
|
||||
flex-direction: row-reverse;
|
||||
/* 反转子元素的排列顺序 */
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.ai-message {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-left: 10px;
|
||||
/* 调整头像与消息内容的间距 */
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 70%;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.user-message .message-content {
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
/* 添加左侧间距 */
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
|
||||
position: fixed;
|
||||
width: 95%;
|
||||
height: 40px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* AI 提示语样式 */
|
||||
.ai-hint {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.source-quote {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quote-icon {
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.ai-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* 文字靠左，图标靠右 */
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.ai-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-right: 10px;
|
||||
/* 文字和图标之间留点空隙 */
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: 8px;
|
||||
/* 图标之间的小间距 */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user