提交
This commit is contained in:
Ling53666
85
甲情_甲意/miniprogram/pages/zixunmeijiashi/zixunmeijiashi.acss
Normal file
85
甲情_甲意/miniprogram/pages/zixunmeijiashi/zixunmeijiashi.acss
Normal file
@ -0,0 +1,85 @@
|
||||
.chat-message {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-message.user {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.chat-message.bot {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.chat-message.user .message-content {
|
||||
flex-direction: row-reverse; /* 头像和气泡反向排列 */
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
max-width: 70%;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: #e0e0e0;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.chat-message.user .bubble {
|
||||
background-color: #1cbbb4;
|
||||
color: #fff;
|
||||
}
|
||||
.chat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.chat-box {
|
||||
flex: flex;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.input-box {
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
padding: 5px;
|
||||
background-color: #f9f9f9;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
flex: 1; /* 使输入框占据剩余空间 */
|
||||
height: 35px; /* 设置输入框的高度 */
|
||||
padding: 8px; /* 设置输入框内边距 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
border: 1px solid #ccc; /* 设置边框 */
|
||||
border-radius: 4px; /* 设置边框圆角 */
|
||||
box-sizing: border-box; /* 使内边距和边框包含在宽度和高度内 */
|
||||
margin-right: 10px; /* 设置输入框和按钮之间的间距 */
|
||||
}
|
||||
|
||||
.send-button {
|
||||
display: flex; /* 使用 flexbox 布局 */
|
||||
justify-content: center; /* 水平居中对齐 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
background-color: #62adf9; /* 设置按钮背景色 */
|
||||
border: none; /* 去掉按钮边框 */
|
||||
padding: 15px 10px; /* 设置按钮内边距 */
|
||||
color: #fff; /* 设置按钮文字颜色 */
|
||||
border-radius: 4px; /* 设置按钮圆角 */
|
||||
cursor: pointer; /* 设置鼠标指针为手型 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
44
甲情_甲意/miniprogram/pages/zixunmeijiashi/zixunmeijiashi.axml
Normal file
44
甲情_甲意/miniprogram/pages/zixunmeijiashi/zixunmeijiashi.axml
Normal file
@ -0,0 +1,44 @@
|
||||
<view class="chat-container">
|
||||
<block
|
||||
a:for="{{typeList}}"
|
||||
a:for-index="index"
|
||||
a:for-item="item"
|
||||
>
|
||||
<ant-notice
|
||||
type="{{item}}"
|
||||
style="margin-bottom: 8px"
|
||||
enableMarquee="{{true}}"
|
||||
onTap="handleTapLink"
|
||||
mode="link"
|
||||
>
|
||||
有问题找客服！
|
||||
</ant-notice>
|
||||
</block>
|
||||
<scroll-view class="chat-box" scroll-y="true" scroll-into-view="{{scrollToView}}" scroll-top="{{scrollTop}}">
|
||||
<view a:for="{{chatMessages}}" a:key="index" class="chat-message {{item.type}}">
|
||||
<view class="message-content">
|
||||
<image class="avatar" src="{{item.avatar}}" mode="aspectFit" />
|
||||
<view class="bubble">
|
||||
{{item.content}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
<form onSubmit="onSubmit" class="input-box">
|
||||
<input
|
||||
value="{{message}}"
|
||||
name="message"
|
||||
onInput="onMessageInput"
|
||||
onConfirm="onKeyUp"
|
||||
placeholder="你的美顾问"
|
||||
class="box1"
|
||||
required
|
||||
/>
|
||||
<view style="margin: 16px;">
|
||||
<button onTap="onSubmit" class="send-button" onConfirm="onSubmit">发送</button>
|
||||
</view>
|
||||
</form>
|
||||
|
||||
</view>
|
||||
111
甲情_甲意/miniprogram/pages/zixunmeijiashi/zixunmeijiashi.js
Normal file
111
甲情_甲意/miniprogram/pages/zixunmeijiashi/zixunmeijiashi.js
Normal file
@ -0,0 +1,111 @@
|
||||
Page({
|
||||
data: {
|
||||
message: '',
|
||||
chatMessages: [],
|
||||
typeList: ['primary'],
|
||||
scrollToView: '', // 用于 scroll-into-view 的 id
|
||||
scrollTop: 0, // 用于 scroll-top 的值
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
// 在页面加载时，添加AI机器人的初始消息
|
||||
let botAvatar = 'https://bpic.588ku.com/element_origin_min_pic/19/04/27/578456f43714d36fffc68ecc6f8c46e5.jpg'; // 机器人头像URL
|
||||
let initialMessage = { type: 'bot', content: '请问有什么可以帮到您？', avatar: botAvatar };
|
||||
|
||||
this.setData({
|
||||
chatMessages: [initialMessage]
|
||||
});
|
||||
my.getStorage({
|
||||
key: 'userInfo',
|
||||
success: (res) => {
|
||||
const userInfo = res.data;
|
||||
this.setData({
|
||||
id: userInfo.id, // 获取 id
|
||||
avatarUrl:userInfo.avatarUrl
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onMessageInput(e) {
|
||||
this.setData({
|
||||
message: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
onKeyUp(e) {
|
||||
this.onSubmit();
|
||||
},
|
||||
|
||||
onSubmit() {
|
||||
let that = this;
|
||||
let currentMessage = this.data.message;
|
||||
let userAvatar = this.data.avatarUrl; // 用户头像URL
|
||||
let botAvatar = 'https://bpic.588ku.com/element_origin_min_pic/19/04/27/578456f43714d36fffc68ecc6f8c46e5.jpg'; // 机器人头像URL
|
||||
|
||||
if (!currentMessage.trim()) return; // 防止发送空消息
|
||||
|
||||
// 添加用户消息到 chatMessages
|
||||
this.setData({
|
||||
chatMessages: [...this.data.chatMessages, { type: 'user', content: currentMessage, avatar: userAvatar }],
|
||||
message: '',
|
||||
scrollToView: `user-${Date.now()}` // 滚动到用户消息
|
||||
});
|
||||
|
||||
// 添加“加载中”消息
|
||||
let loadingMessage = { type: 'bot', content: '加载中...', avatar: botAvatar, id: `loading-${Date.now()}` };
|
||||
this.setData({
|
||||
chatMessages: [...this.data.chatMessages, loadingMessage]
|
||||
});
|
||||
|
||||
// 模拟API请求获取机器人回复
|
||||
my.getStorage({
|
||||
key: 'openId',
|
||||
success: (res) => {
|
||||
my.request({
|
||||
url: 'http://localhost:5657/chat',
|
||||
method: 'POST',
|
||||
data: {
|
||||
openId: res.data.openId,
|
||||
requestBody: currentMessage
|
||||
},
|
||||
headers: {
|
||||
'content-type': 'application/json'
|
||||
},
|
||||
success: function (res) {
|
||||
let count = res.data.count; // 假设后端返回的 count 字段
|
||||
let responseMessage = count >= 10
|
||||
? { type: 'bot', content: '免费次数已用完', avatar: botAvatar, id: `response-${Date.now()}` }
|
||||
: { type: 'bot', content: res.data.data, avatar: botAvatar, id: `response-${Date.now()}` };
|
||||
|
||||
// 替换“加载中”消息为机器人回复
|
||||
that.setData({
|
||||
chatMessages: that.data.chatMessages.map(msg =>
|
||||
msg.id === loadingMessage.id ? responseMessage : msg
|
||||
),
|
||||
scrollToView: responseMessage.id // 滚动到最新回复
|
||||
});
|
||||
},
|
||||
fail: function (error) {
|
||||
console.error('fail: ', JSON.stringify(error));
|
||||
// 如果请求失败，替换“加载中”消息为错误消息
|
||||
that.setData({
|
||||
chatMessages: that.data.chatMessages.map(msg =>
|
||||
msg.id === loadingMessage.id ? { type: 'bot', content: '请求失败，请稍后再试', avatar: botAvatar, id: `response-${Date.now()}` } : msg
|
||||
),
|
||||
scrollToView: `response-${Date.now()}` // 滚动到最新错误消息
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleTapLink() {
|
||||
my.alert({
|
||||
title: '提示', // 可选，弹窗标题
|
||||
content: '别点了，再点也是10次', // 主要内容
|
||||
buttonText: '确定', // 可选，按钮文字
|
||||
});
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"defaultTitle": "咨询",
|
||||
"usingComponents": {
|
||||
"ant-notice": "antd-mini/es/NoticeBar/index"
|
||||
},
|
||||
"styleIsolation": "apply-shared"
|
||||
}
|
||||
Reference in New Issue
Block a user