interface Message { id: string; type: 'ai' | 'user' | 'reply'; contentType: 'text' | 'image' | 'faq'; content: string; questions?: string[]; timestamp: number; } interface FAQItem { question: string; answer: string; } import { api_cozeAgent } from '../../api/login'; const FAQ_LIST: FAQItem[] = [ { question: '一个账号可以领取几次0元试用?', answer: '每个手机号可分别领取一次【老师端】和一次【学生端】的免费试用,每端试用期均为2天。' }, { question: '要如何安装软件呢?', answer: '老师端:无需安装,直接在电脑、一体机或希沃等白板的浏览器中访问 https://kt.colexiu.com 即可。推荐使用谷歌浏览器,以获得最佳体验。学生端:可通过手机或平板在应用市场搜索【音乐数字课堂】下载安装,或访问 https://kt.colexiu.com/classroom-app/#/download 获取安装包。' }, { question: '我想有定制化的需求,怎么办?', answer: '我们为会员提供一次定制化曲目服务。如您有需要,可添加专属客服微信:klx569569 进行咨询。' }, { question: '如何进行商务合作?', answer: '感谢您的关注!如有商务合作需求,欢迎添加专属客服微信 klx569569,我们会尽快与您沟通。' }, ]; Page({ data: { messages: [] as Message[], inputValue: '', scrollToMessage: '', userAvatar: '', isLoading: false, avatarError: false, keyboardHeight: 0, }, onLoad() { this.loadUserInfo(); this.initWelcomeMessages(); }, // 加载用户信息 loadUserInfo() { const userInfo = wx.getStorageSync('userInfo'); if (userInfo) { this.setData({ userAvatar: userInfo.avatarUrl || '' }); } }, // 初始化欢迎消息 initWelcomeMessages() { const messages: Message[] = []; // 第一条欢迎消息 messages.push({ id: this.generateId(), type: 'ai', contentType: 'text', content: '您好,欢迎来到音乐数字课堂!请问有什么可以帮您的吗?', timestamp: Date.now() }); // 第二条常见问题卡片 messages.push({ id: this.generateId(), type: 'ai', contentType: 'faq', content: '常见问题', questions: FAQ_LIST.map(item => item.question), timestamp: Date.now() + 1 }); this.setData({ messages }, () => { this.scrollToBottom(); }); }, // 生成唯一ID generateId(): string { return Date.now().toString(36) + Math.random().toString(36).substr(2); }, // 滚动到底部 scrollToBottom() { this.setData({ scrollToMessage: 'last-message' }); }, // 头像加载失败 onAvatarError() { this.setData({ avatarError: true }); }, // 输入框变化 onInput(e: WechatMiniprogram.Input) { this.setData({ inputValue: e.detail.value }); }, onKeyboardHeightChange(e: WechatMiniprogram.InputKeyboardHeightChange) { const keyboardHeight = e.detail.height || 0; if (keyboardHeight === this.data.keyboardHeight) return; this.setData({ keyboardHeight }, () => { this.scrollToBottom(); }); }, // 发送文字消息 sendTextMessage() { const { inputValue, isLoading } = this.data; if (!inputValue.trim() || isLoading) return; const content = inputValue.trim(); // 添加用户消息 this.addUserMessage('text', content); // 清空输入框 this.setData({ inputValue: '' }); // 发送到服务器 this.sendMessageToServer(content, 'text'); }, // 添加用户消息 addUserMessage(contentType: 'text' | 'image', content: string) { const { messages } = this.data; const newMessage: Message = { id: this.generateId(), type: 'user', contentType, content, timestamp: Date.now() }; this.setData({ messages: [...messages, newMessage] }, () => { this.scrollToBottom(); }); }, // 选择图片 chooseImage() { wx.chooseMedia({ count: 1, mediaType: ['image'], sourceType: ['album', 'camera'], success: (res) => { const tempFilePath = res.tempFiles[0].tempFilePath; this.uploadImage(tempFilePath); }, fail: (err) => { console.error('选择图片失败:', err); wx.showToast({ title: '选择图片失败', icon: 'none' }); } }); }, // 上传图片 uploadImage(filePath: string) { // 先显示本地图片 this.addUserMessage('image', filePath); // 获取全局配置 const app = getApp(); const baseUrl = app.globalData?.baseUrl || 'https://test.kt.colexiu.com'; // 上传图片到服务器 wx.uploadFile({ url: `${baseUrl}/edu-app/ai/chat/upload`, filePath: filePath, name: 'file', header: { 'Authorization': wx.getStorageSync('token') || '' }, success: (res) => { try { const data = JSON.parse(res.data); if (data.code === 200) { // 上传成功,发送图片URL到聊天 this.sendMessageToServer(data.data.url, 'image'); } else { throw new Error(data.msg || '上传失败'); } } catch (err) { console.error('解析上传响应失败:', err); this.addReplyMessage('图片上传失败,请重试'); } }, fail: (err) => { console.error('上传图片失败:', err); // 模拟成功,直接回复 setTimeout(() => { this.addReplyMessage('我已收到您的图片,请问有什么可以帮助您的吗?'); }, 1000); } }); }, // 发送消息到服务器 async sendMessageToServer(content: string, contentType: 'text' | 'image') { this.setData({ isLoading: true }); // 获取用户ID(优先使用openid,其次使用token中的用户ID) const userInfo = wx.getStorageSync('userInfo') || {}; const userId = userInfo.openId || userInfo.userId || wx.getStorageSync('openId'); // 构建消息内容(图片发送固定提示语) const messageContent = contentType === 'image' ? '我发送了一张图片' : content; try { // 调用客服消息接口 const {data}: any = await api_cozeAgent({ message: messageContent, userId: userId }); if (data.code === 200 && data.data) { // 使用接口返回的回复内容 const reply =data.data || '您好,我已经收到您的问题。'; this.addReplyMessage(reply); } else { // 接口返回错误,使用默认回复 this.handleDefaultReply(contentType); } } catch (err) { console.error('客服接口调用失败:', err); // 接口调用失败,使用默认回复 this.handleDefaultReply(contentType); } finally { this.setData({ isLoading: false }); } }, // 处理默认回复(当接口调用失败时使用) handleDefaultReply(contentType: 'text' | 'image') { let reply = ''; if (contentType === 'image') { reply = '我已收到您的图片,请问有什么可以帮助您的吗?'; } else { reply = '您好,我已经收到您的问题。我们的客服人员会尽快为您解答。如果您有其他问题,也可以继续提问。'; } this.addReplyMessage(reply); }, // 添加AI回复消息 addReplyMessage(content: string) { const { messages } = this.data; const replyMessage: Message = { id: this.generateId(), type: 'reply', contentType: 'text', content, timestamp: Date.now() }; this.setData({ messages: [...messages, replyMessage] }, () => { this.scrollToBottom(); }); }, // 点击常见问题 onFaqTap(e: WechatMiniprogram.Tap) { const index = e.currentTarget.dataset.index; const faq = FAQ_LIST[index]; if (faq) { // 添加用户选择的问题 this.addUserMessage('text', faq.question); // 直接回复固定内容 setTimeout(() => { this.addReplyMessage(faq.answer); }, 500); } }, // 点击图片预览 onImageTap(e: any) { const url = e.currentTarget.dataset.url; if (url) { wx.previewImage({ urls: [url], current: url }); } } });