Compare commits

...

10 Commits

9 changed files with 1728 additions and 4264 deletions

View File

@@ -7,7 +7,7 @@ export default {
computed: { computed: {
// 是否是英文环境 // 是否是英文环境
isEnEnv() { isEnEnv() {
return this.$langConfig.getCurrentLocale() === 'en-us'; return uni.getStorageSync('lang') === 'en-us';
}, },
themeStyle() { themeStyle() {
return this.$store.state.themeStyle; return this.$store.state.themeStyle;
@@ -65,6 +65,10 @@ export default {
componentRefresh() { componentRefresh() {
return this.$store.state.componentRefresh; return this.$store.state.componentRefresh;
}, },
// AI客服配置
globalAIKefuConfig() {
return this.$store.state.globalAIKefuConfig;
},
// 客服配置 // 客服配置
servicerConfig() { servicerConfig() {
return this.$store.state.servicerConfig; return this.$store.state.servicerConfig;

View File

@@ -1,6 +1,5 @@
import { langConfig } from './config-external.js'; import { langConfig } from './config-external.js';
// 缓存已加载的语言包 // 缓存已加载的语言包
const loadedLangPacks = {}; const loadedLangPacks = {};
@@ -9,21 +8,15 @@ function processRoutePath(route) {
let routeParts = route.split("/"); let routeParts = route.split("/");
// ---- 处理页面目录映射 <begin> 分包造成的,需要根据实际目录结构进行映射---- // ---- 处理页面目录映射 <begin> 分包造成的,需要根据实际目录结构进行映射----
// 先处理特殊的分包路径
if (routeParts[0] === 'pages_tool') { if (routeParts[0] === 'pages_tool') {
// pages_tool 分包下的页面,直接使用子目录作为语言包路径
routeParts = [routeParts[1], ...routeParts.slice(2)]; routeParts = [routeParts[1], ...routeParts.slice(2)];
} else if (routeParts[0] === 'pages_goods') { } else if (routeParts[0] === 'pages_goods') {
// pages_goods 分包映射到 goods 目录
routeParts[0] = 'goods'; routeParts[0] = 'goods';
} else if (routeParts[0] === 'pages_member') { } else if (routeParts[0] === 'pages_member') {
// pages_member 分包映射到 member 目录
routeParts[0] = 'member'; routeParts[0] = 'member';
} else if (routeParts[0] === 'pages_order') { } else if (routeParts[0] === 'pages_order') {
// pages_order 分包映射到 order 目录
routeParts[0] = 'order'; routeParts[0] = 'order';
} else if (routeParts[0] === 'pages_promotion') { } else if (routeParts[0] === 'pages_promotion') {
// pages_promotion 分包特殊处理
const promotionModules = ['point', 'fenxiao', 'merch']; const promotionModules = ['point', 'fenxiao', 'merch'];
if (routeParts[1] && promotionModules.includes(routeParts[1])) { if (routeParts[1] && promotionModules.includes(routeParts[1])) {
routeParts = [routeParts[1], ...routeParts.slice(2)]; routeParts = [routeParts[1], ...routeParts.slice(2)];
@@ -31,7 +24,6 @@ function processRoutePath(route) {
} }
// ---- 处理页面目录映射 <end>---- // ---- 处理页面目录映射 <end>----
// 去掉pages目录,只保留子目录
if (routeParts[0] === 'pages') { if (routeParts[0] === 'pages') {
routeParts = routeParts.slice(1); routeParts = routeParts.slice(1);
} }
@@ -56,46 +48,30 @@ function loadLangPackSync(lang, path) {
export default { export default {
langList: langConfig.langList, langList: langConfig.langList,
/** /**
* 获得当前本地语言 * 解析多语言
* @returns
*/
getCurrentLocale() {
return uni.getStorageSync('lang') || "zh-cn";
},
/**
* * 解析多语言
* @param {Object} field
*/ */
lang(field) { lang(field) {
let _page = getCurrentPages()[getCurrentPages().length - 1]; let _this = getCurrentPages()[getCurrentPages().length - 1];
if (!_page) return; if (!_this) return;
const locale = this.getCurrentLocale(); // 获得当前本地语言 const locale = uni.getStorageSync('lang') || "zh-cn";
let value = ''; // 存放解析后的语言值 let value = '';
let langPath = ''; // 存放当前页面语言包路径 let langPath = '';
try { try {
//公共语言包(同步加载)
var lang = loadLangPackSync(locale, 'common'); var lang = loadLangPackSync(locale, 'common');
//当前页面语言包(同步加载) let route = _this.route;
let route = _page.route;
langPath = processRoutePath(route); langPath = processRoutePath(route);
// 加载当前页面语言包
let currentPageLang = loadLangPackSync(locale, langPath); let currentPageLang = loadLangPackSync(locale, langPath);
// 合并语言包
let mergedLang = { ...lang, ...currentPageLang }; let mergedLang = { ...lang, ...currentPageLang };
// 解析字段
var arr = field.split("."); var arr = field.split(".");
if (arr.length > 1) { if (arr.length > 1) {
// 处理嵌套属性,如 common.currencySymbol
let temp = mergedLang; let temp = mergedLang;
let found = true; let found = true;
for (let key of arr) { for (let key of arr) {
@@ -117,14 +93,12 @@ export default {
} }
if (arguments.length > 1) { if (arguments.length > 1) {
//有参数,需要替换
for (var i = 1; i < arguments.length; i++) { for (var i = 1; i < arguments.length; i++) {
value = value.replace("{" + (i - 1) + "}", arguments[i]); value = value.replace("{" + (i - 1) + "}", arguments[i]);
} }
} }
if (value == undefined || (value == 'title' && field == 'title')) value = ''; // field if (value == undefined || (value == 'title' && field == 'title')) value = '';
// 多语言调试,注释后可以关闭控制台输出
if (field == value) { if (field == value) {
console.warn(`警告: 字段 ${field} 在语言包 ${langPath} 中未找到对应值,使用默认值 ${field} 当前语言: ${locale}`); console.warn(`警告: 字段 ${field} 在语言包 ${langPath} 中未找到对应值,使用默认值 ${field} 当前语言: ${locale}`);
} }
@@ -132,23 +106,19 @@ export default {
return value; return value;
}, },
/** /**
* * 切换语言 * 切换语言
* @param {String} value 语言值
* @param {String} url 切换后跳转的页面url
*/ */
change(value, url = '/pages_tool/member/index') { change(value, url = '/pages_tool/member/index') {
let _page = getCurrentPages()[getCurrentPages().length - 1]; let _this = getCurrentPages()[getCurrentPages().length - 1];
if (!_page) return; if (!_this) return;
uni.setStorageSync("lang", value); uni.setStorageSync("lang", value);
const locale = this.getCurrentLocale(); const locale = uni.getStorageSync('lang') || "zh-cn";
// 清空已加载的语言包缓存 // ✅ 关键修复:清空所有语言包缓存(不再保留任何旧缓存)
for (let key in loadedLangPacks) { for (let key in loadedLangPacks) {
if (!key.startsWith(locale)) {
delete loadedLangPacks[key]; delete loadedLangPacks[key];
} }
}
this.refresh(); this.refresh();
@@ -158,39 +128,16 @@ export default {
}, },
//刷新标题、tabbar //刷新标题、tabbar
refresh() { refresh() {
let _page = getCurrentPages()[getCurrentPages().length - 1]; let _this = getCurrentPages()[getCurrentPages().length - 1];
if (!_page) return; if (!_this) return;
const locale = uni.getStorageSync('lang') || "zh-cn";
const locale = this.getCurrentLocale();
this.title(this.lang("title")); this.title(this.lang("title"));
//设置tabbar的文字语言
// uni.setTabBarItem({
// index: 0,
// text: this.lang("tabBar.home")
// });
// uni.setTabBarItem({
// index: 1,
// text: this.lang("tabBar.category")
// });
// uni.setTabBarItem({
// index: 2,
// text: this.lang("tabBar.cart")
// });
// uni.setTabBarItem({
// index: 3,
// text: this.lang("tabBar.member")
// });
}, },
title(str) { title(str) {
if (str) { if (str) {
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: str, title: str
success: function (res) {
},
fail: function (err) {
}
}); });
} }
}, },
@@ -198,7 +145,6 @@ export default {
list() { list() {
var list = []; var list = [];
try { try {
//公共语言包
for (var i = 0; i < langConfig.langList.length; i++) { for (var i = 0; i < langConfig.langList.length; i++) {
let langType = langConfig.langList[i]; let langType = langConfig.langList[i];
let item = loadLangPackSync(langType, 'common'); let item = loadLangPackSync(langType, 'common');

File diff suppressed because it is too large Load Diff

View File

@@ -104,7 +104,7 @@
}, },
"router" : { "router" : {
"mode" : "history", "mode" : "history",
"base" : "/hwappx/2811/" "base" : "/hwappx/common/"
}, },
"title" : "", "title" : "",
"devServer" : { "devServer" : {

View File

@@ -1,7 +1,11 @@
<template> <template>
<view class="ai-chat-container"> <view class="ai-chat-container">
<!-- 聊天消息列表 --> <!-- 聊天消息列表 -->
<scroll-view class="chat-messages" scroll-y :scroll-top="scrollTop" @scroll="onScroll" <scroll-view
class="chat-messages"
scroll-y
:scroll-top="scrollTop"
@scroll="onScroll"
:scroll-with-animation="false"> :scroll-with-animation="false">
<!-- 加载更多历史消息 --> <!-- 加载更多历史消息 -->
@@ -10,7 +14,11 @@
</view> </view>
<!-- 消息列表 --> <!-- 消息列表 -->
<view v-for="item in messagesWithKey" :key="item.__renderKey" class="message-item" :class="[item.role, { 'first-message': item.__index === 0 }]"> <view
v-for="(message, index) in messages"
:key="`msg-${message.id || message.timestamp}-${index}`"
class="message-item"
:class="[message.role, { 'first-message': index === 0 }]">
<!-- 用户消息 --> <!-- 用户消息 -->
<view v-if="message.role === 'user'" class="user-message"> <view v-if="message.role === 'user'" class="user-message">
@@ -77,12 +85,21 @@
<text class="audio-duration">{{ formatDuration(message.duration) }}</text> <text class="audio-duration">{{ formatDuration(message.duration) }}</text>
</view> </view>
<view class="audio-controls"> <view class="audio-controls">
<button class="play-btn" :class="{ playing: message.playing }" @click="toggleAudio(message)"> <button
class="play-btn"
:class="{ playing: message.playing }"
@click="toggleAudio(message)">
<text class="iconfont" :class="message.playing ? 'icon-pause' : 'icon-play'"></text> <text class="iconfont" :class="message.playing ? 'icon-pause' : 'icon-play'"></text>
</button> </button>
<slider class="audio-slider" :value="message.currentTime || 0" :max="message.duration || 0" <slider
@changing="onAudioSliderChange" @change="onAudioSliderChangeEnd" activeColor="#8a9fb8" class="audio-slider"
backgroundColor="#e8edf3" block-size="12" /> :value="message.currentTime || 0"
:max="message.duration || 0"
@changing="onAudioSliderChange"
@change="onAudioSliderChangeEnd"
activeColor="#8a9fb8"
backgroundColor="#e8edf3"
block-size="12" />
</view> </view>
</view> </view>
</view> </view>
@@ -90,8 +107,14 @@
<!-- 视频消息 --> <!-- 视频消息 -->
<view v-else-if="message.type === 'video'" class="video-content"> <view v-else-if="message.type === 'video'" class="video-content">
<view class="video-player"> <view class="video-player">
<video :src="message.url" :poster="message.cover" :controls="true" :autoplay="false" <video
class="video-element" @play="onVideoPlay(message)" @pause="onVideoPause(message)"> :src="message.url"
:poster="message.cover"
:controls="true"
:autoplay="false"
class="video-element"
@play="onVideoPlay(message)"
@pause="onVideoPause(message)">
</video> </video>
<view class="video-info"> <view class="video-info">
<text class="video-title">{{ message.title || '视频消息' }}</text> <text class="video-title">{{ message.title || '视频消息' }}</text>
@@ -140,8 +163,12 @@
<!-- 操作按钮 --> <!-- 操作按钮 -->
<view class="message-actions" v-if="message.actions && message.actions.length > 0"> <view class="message-actions" v-if="message.actions && message.actions.length > 0">
<button v-for="action in message.actions" :key="action.id" class="action-btn" <button
:class="[`iconfont`, action.icon, action.type]" @click="handleAction(action, message)"> v-for="action in message.actions"
:key="action.id"
class="action-btn"
:class="[`iconfont`, action.icon, action.type]"
@click="handleAction(action, message)">
{{ action.text }} {{ action.text }}
</button> </button>
</view> </view>
@@ -172,11 +199,21 @@
</view> </view>
<view class="input-container"> <view class="input-container">
<textarea v-model="inputText" class="message-input" placeholder="请输入您的问题..." :maxlength="500" <textarea
:auto-height="true" :show-confirm-bar="false" @confirm="sendMessage" @input="onInput" /> v-model="inputText"
class="message-input"
placeholder="请输入您的问题..."
:maxlength="500"
:auto-height="true"
:show-confirm-bar="false"
@confirm="sendMessage"
@input="onInput" />
<!-- 发送按钮 --> <!-- 发送按钮 -->
<button class="send-btn" :class="{ disabled: !inputText.trim() }" @click="sendMessage" <button
class="send-btn"
:class="{ disabled: !inputText.trim() }"
@click="sendMessage"
:disabled="!inputText.trim()"> :disabled="!inputText.trim()">
<text>发送</text> <text>发送</text>
</button> </button>
@@ -234,7 +271,11 @@
</view> </view>
<view class="voice-content"> <view class="voice-content">
<view class="voice-wave" :class="{ recording: voiceInputing }"> <view class="voice-wave" :class="{ recording: voiceInputing }">
<view v-for="i in 8" :key="i" class="wave-bar" :style="{ animationDelay: (i * 0.1) + 's' }"></view> <view
v-for="i in 8"
:key="i"
class="wave-bar"
:style="{ animationDelay: (i * 0.1) + 's' }"></view>
</view> </view>
<text class="voice-tip">{{ voiceInputing ? '正在录音,松开结束' : '点击开始录音' }}</text> <text class="voice-tip">{{ voiceInputing ? '正在录音,松开结束' : '点击开始录音' }}</text>
</view> </view>
@@ -290,15 +331,23 @@
</view> </view>
<view class="nickname-editor-content"> <view class="nickname-editor-content">
<view class="nickname-input-container"> <view class="nickname-input-container">
<input v-model="tempNickname" class="nickname-input" placeholder="请输入您的新昵称" :maxlength="12" type="text" /> <input
v-model="tempNickname"
class="nickname-input"
placeholder="请输入您的新昵称"
:maxlength="12"
type="text" />
</view> </view>
<view class="nickname-tip">昵称长度限制1-12个字符,仅自己可见</view> <view class="nickname-tip">昵称长度限制1-12个字符,仅自己可见</view>
<view class="nickname-editor-actions"> <view class="nickname-editor-actions">
<button class="nickname-action-btn cancel" @click="closeNicknameEditor"> <button class="nickname-action-btn cancel" @click="closeNicknameEditor">
<text>取消</text> <text>取消</text>
</button> </button>
<button class="nickname-action-btn confirm" :class="{ disabled: !tempNickname.trim() }" <button
:disabled="!tempNickname.trim()" @click="saveNickname"> class="nickname-action-btn confirm"
:class="{ disabled: !tempNickname.trim() }"
:disabled="!tempNickname.trim()"
@click="saveNickname">
<text>保存</text> <text>保存</text>
</button> </button>
</view> </view>
@@ -349,7 +398,7 @@ export default {
default: 20 default: 20
} }
}, },
data() { data(){
return { return {
messages: [], messages: [],
inputText: '', inputText: '',
@@ -391,20 +440,15 @@ export default {
isFetchingHistory: false isFetchingHistory: false
} }
}, },
computed: {
// 为每条消息生成兼容小程序的唯一 key
messagesWithKey() {
return this.messages.map((msg, idx) => {
const uniqueId = msg.id || msg.timestamp || idx;
return {
...msg,
__renderKey: `msg_${uniqueId}_${idx}`,
__index: idx // 保留原始索引,用于判断 first-message 等
};
});
}
},
onShow() { onShow() {
// 如果不是 AI 客服,立即退出并跳转
if (customerServiceType !== 'ai') {
uni.showToast({ title: '当前客服类型不支持此页面', icon: 'none' });
setTimeout(() => {
uni.navigateBack({ delta: 1 }); // 或 redirectTo 首页
}, 1000);
return; // ⚠️ 关键:阻止后续初始化
}
// 优先读取本地缓存的会话 ID // 优先读取本地缓存的会话 ID
const localConvId = this.getConversationIdFromLocal(); const localConvId = this.getConversationIdFromLocal();
if (localConvId) { if (localConvId) {
@@ -774,6 +818,7 @@ export default {
}, },
// 发送流式消息 // 发送流式消息
// 发送流式消息(自动适配 H5 / 微信小程序)
async sendStreamMessage(userMessage) { async sendStreamMessage(userMessage) {
// 创建流式消息对象 // 创建流式消息对象
const streamMessage = { const streamMessage = {
@@ -783,35 +828,36 @@ export default {
content: '', content: '',
timestamp: Date.now(), timestamp: Date.now(),
isStreaming: true isStreaming: true
} };
// 移除加载状态,添加流式消息 // 移除加载状态,添加流式消息
this.messages = this.messages.filter(msg => msg.type !== 'loading') this.messages = this.messages.filter(msg => msg.type !== 'loading');
this.shouldScrollToBottom = true this.shouldScrollToBottom = true;
this.messages.push(streamMessage) this.messages.push(streamMessage);
// 开始流式响应 try {
await aiService.sendStreamMessage( // #ifdef H5
// ===== H5: 使用 POST + 流式 (fetch readable stream) =====
await aiService.sendHttpStream(
userMessage, userMessage,
// 流式数据回调
(chunk) => { (chunk) => {
streamMessage.content += chunk // 实时更新内容
this.$forceUpdate() // 或 this.$nextTick() streamMessage.content += chunk;
this.$forceUpdate(); // 强制更新视图
}, },
// 完成回调:处理对象或字符串
(completeResult) => { (completeResult) => {
// 流结束回调
let finalContent = ''; let finalContent = '';
let convId = ''; let convId = '';
// 判断是对象还是字符串
if (typeof completeResult === 'string') { if (typeof completeResult === 'string') {
finalContent = completeResult; finalContent = completeResult;
} else { } else {
finalContent = completeResult.content || ''; finalContent = completeResult.content || '';
convId = completeResult.conversation_id || ''; // 👈 关键:提取 conversation_id convId = completeResult.conversation_id || '';
} }
// 更新消息状态 // 更新最终内容
streamMessage.isStreaming = false; streamMessage.isStreaming = false;
streamMessage.content = finalContent; streamMessage.content = finalContent;
@@ -821,17 +867,71 @@ export default {
{ id: 2, text: '没帮助', type: 'dislike' } { id: 2, text: '没帮助', type: 'dislike' }
]; ];
// 保存 conversation_id 到本地 // 保存会话 ID
if (convId) { if (convId) {
this.currentConversationId = convId;
aiService.setConversationId(convId); aiService.setConversationId(convId);
this.saveConversationIdToLocal(convId);
} }
// 触发事件 // 触发事件
this.$emit('ai-response', streamMessage); this.$emit('ai-response', streamMessage);
this.saveConversationIdToLocal(convId);
this.currentConversationId = convId;
} }
); );
// #endif
// #ifdef MP-WEIXIN
// ===== 微信小程序: 使用 WebSocket =====
await aiService.sendStreamMessage(
userMessage,
(chunk) => {
// 实时更新内容
streamMessage.content += chunk;
this.$forceUpdate();
},
(completeResult) => {
// 流结束回调
let finalContent = completeResult?.content || '';
let convId = completeResult?.conversation_id || '';
// 更新最终内容
streamMessage.isStreaming = false;
streamMessage.content = finalContent;
// 添加操作按钮
streamMessage.actions = [
{ id: 1, text: '有帮助', type: 'like' },
{ id: 2, text: '没帮助', type: 'dislike' }
];
// 保存会话 ID
if (convId) {
this.currentConversationId = convId;
aiService.setConversationId(convId);
this.saveConversationIdToLocal(convId);
}
// 触发事件
this.$emit('ai-response', streamMessage);
}
);
// #endif
} catch (error) {
console.error('流式请求失败:', error);
// 移除流式消息
this.messages = this.messages.filter(msg => msg.id !== streamMessage.id);
// 显示错误
const errorMsg = {
id: ++this.messageId,
role: 'ai',
type: 'text',
content: '抱歉,服务暂时不可用,请稍后重试。',
timestamp: Date.now(),
actions: [{ id: 1, text: '重试', type: 'retry' }]
};
this.messages.push(errorMsg);
this.$emit('ai-response', errorMsg);
}
}, },
generateAIResponse(userMessage) { generateAIResponse(userMessage) {
const responses = { const responses = {
@@ -1352,7 +1452,7 @@ $radius-lg: 36rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* 仅新增:科技感粉蓝渐变背景 + 流动动画 */ /* 仅新增:科技感粉蓝渐变背景 + 流动动画 */
background: linear-gradient(135deg, #fde6f7 0%, #f8b7e8 20%, #c4e0ff 50%, #8cb4ff 80%, #ffffff 100%); background: white; /* 白色 */
background-size: 200% 200%; background-size: 200% 200%;
animation: gradient-flow 15s ease infinite; animation: gradient-flow 15s ease infinite;
/* 原有样式保持不变 */ /* 原有样式保持不变 */
@@ -1366,8 +1466,7 @@ $radius-lg: 36rpx;
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
overflow-y: auto; overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
min-height: 0; min-height: 0; /* 重要:防止flex元素溢出 */
/* 重要:防止flex元素溢出 */
.load-more { .load-more {
text-align: center; text-align: center;
@@ -1382,8 +1481,7 @@ $radius-lg: 36rpx;
margin-top: 24rpx; margin-top: 24rpx;
} }
.user-message, .user-message, .ai-message {
.ai-message {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@@ -1414,25 +1512,7 @@ $radius-lg: 36rpx;
margin-left: 24rpx; margin-left: 24rpx;
max-width: calc(100% - 112rpx); max-width: calc(100% - 112rpx);
min-width: 0; min-width: 0;
width: 0; width: 0; /* 添加这个属性防止flex元素溢出 */
/* 添加这个属性防止flex元素溢出 */
.message-nickname {
font-size: 24rpx;
color: $color-text-light;
margin-bottom: 8rpx;
letter-spacing: 0.5rpx;
text-align: right;
}
// AI昵称专属样式 - 左移到气泡上方
.ai-nickname {
text-align: left;
margin-left: 0;
padding-left: 0;
align-self: flex-start;
margin-bottom: 4rpx;
}
.message-bubble { .message-bubble {
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
@@ -1853,6 +1933,28 @@ $radius-lg: 36rpx;
} }
} }
/* ========== 关键修复:拆分 .message-nickname 样式 ========== */
.message-nickname {
font-size: 24rpx;
color: $color-text-light;
margin-bottom: 8rpx;
letter-spacing: 0.5rpx;
}
/* 用户昵称:右对齐 */
.user-message .message-nickname {
text-align: right;
}
/* AI 昵称:使用 .ai-nickname 类控制 */
.ai-nickname {
text-align: left;
margin-left: 0;
padding-left: 0;
align-self: flex-start;
margin-bottom: 4rpx;
}
/* 用户消息特有样式 */ /* 用户消息特有样式 */
.user-message { .user-message {
flex-direction: row-reverse; flex-direction: row-reverse;
@@ -1863,27 +1965,20 @@ $radius-lg: 36rpx;
text-align: right; text-align: right;
.message-bubble { .message-bubble {
background: linear-gradient(135deg, #ffadd2, #f783ac) !important; background: #c4e0ff !important; /* 浅蓝色 */
/* 粉色渐变 */ color: black !important;
color: white !important; border-radius: 16rpx 16rpx 4rpx 16rpx; /* 右对齐气泡尖角适配 */
border-radius: 16rpx 16rpx 4rpx 16rpx; box-shadow: 0 8rpx 20rpx rgba(196, 224, 255, 0.3) !important;
/* 右对齐气泡尖角适配 */
box-shadow: 0 8rpx 20rpx rgba(247, 131, 172, 0.3) !important;
border: none !important; border: none !important;
/* ✅ 关键:允许内容撑开高度 */ /* ✅ 关键:允许内容撑开高度 */
min-height: auto; min-height: auto;
height: auto; height: auto;
padding: 24rpx 32rpx; padding: 24rpx 32rpx; /* 保留内边距 */
/* 保留内边距 */ display: inline-block; /* 让宽度也随内容收缩(可选) */
display: inline-block; max-width: 80%; /* 防止过宽 */
/* 让宽度也随内容收缩(可选) */
max-width: 80%;
/* 防止过宽 */
word-break: break-word; word-break: break-word;
white-space: pre-wrap; white-space: pre-wrap; /* 保留用户输入的换行符 */
/* 保留用户输入的换行符 */
line-height: 1.6; line-height: 1.6;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
@@ -1891,8 +1986,7 @@ $radius-lg: 36rpx;
right: -14rpx; right: -14rpx;
width: 24rpx; width: 24rpx;
height: 24rpx; height: 24rpx;
background: #ffffff !important; background: #ffffff !important; /* 菱形改为白色 */
/* 菱形改为白色 */
border-radius: 6rpx; border-radius: 6rpx;
transform: rotate(45deg); transform: rotate(45deg);
box-shadow: 4rpx -4rpx 4rpx rgba(0, 0, 0, 0.05); box-shadow: 4rpx -4rpx 4rpx rgba(0, 0, 0, 0.05);
@@ -1905,9 +1999,11 @@ $radius-lg: 36rpx;
left: -100%; left: -100%;
width: 50%; width: 50%;
height: 100%; height: 100%;
background: linear-gradient(to right, background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.15) 100%); rgba(255, 255, 255, 0.15) 100%
);
animation: shine 4s infinite linear; animation: shine 4s infinite linear;
} }
} }
@@ -1923,13 +2019,11 @@ $radius-lg: 36rpx;
align-items: flex-start; align-items: flex-start;
.message-bubble { .message-bubble {
background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important; background: white !important; /* 白色 */
/* 蓝色浅渐变 */ color: black !important;
color: #2c3e50 !important; border-radius: 16rpx 16rpx 16rpx 4rpx; /* 左对齐气泡尖角适配 */
border-radius: 16rpx 16rpx 16rpx 4rpx; box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1) !important;
/* 左对齐气泡尖角适配 */ border: 1rpx solid #e0e0e0 !important;
box-shadow: 0 8rpx 20rpx rgba(191, 219, 254, 0.4) !important;
border: 1rpx solid #dbeafe !important;
min-height: auto; min-height: auto;
height: auto; height: auto;
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
@@ -1938,7 +2032,6 @@ $radius-lg: 36rpx;
word-break: break-word; word-break: break-word;
white-space: pre-wrap; white-space: pre-wrap;
line-height: 1.6; line-height: 1.6;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
@@ -1946,8 +2039,7 @@ $radius-lg: 36rpx;
left: -14rpx; left: -14rpx;
width: 24rpx; width: 24rpx;
height: 24rpx; height: 24rpx;
background: #ffffff !important; background: #ffffff !important; /* 菱形改为白色 */
/* 菱形改为白色 */
border-radius: 6rpx; border-radius: 6rpx;
transform: rotate(45deg); transform: rotate(45deg);
box-shadow: -4rpx 4rpx 4rpx rgba(0, 0, 0, 0.05); box-shadow: -4rpx 4rpx 4rpx rgba(0, 0, 0, 0.05);
@@ -1963,7 +2055,7 @@ $radius-lg: 36rpx;
/* 输入区域 */ /* 输入区域 */
.input-area { .input-area {
background: linear-gradient(135deg, #fde6f7 0%, #f8b7e8 20%, #c4e0ff 50%, #8cb4ff 80%, #ffffff 100%); background: #c4e0ff; /* 浅蓝色 */
border-top: 2rpx solid #f0f4f8; border-top: 2rpx solid #f0f4f8;
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
/* 确保在微信小程序中紧贴底部 */ /* 确保在微信小程序中紧贴底部 */
@@ -2047,12 +2139,9 @@ $radius-lg: 36rpx;
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
border: none; border: none;
text-align: center; text-align: center; /* 兼容多端文字居中 */
/* 兼容多端文字居中 */ white-space: nowrap; /* 强制文字单行横向显示 */
white-space: nowrap; line-height: 1; /* 重置行高,避免文字垂直偏移 */
/* 强制文字单行横向显示 */
line-height: 1;
/* 重置行高,避免文字垂直偏移 */
top: -10px; top: -10px;
&.disabled { &.disabled {
@@ -2076,21 +2165,19 @@ $radius-lg: 36rpx;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
pointer-events: none; pointer-events: none; /* 让鼠标事件穿透容器,不影响主内容交互 */
/* 让鼠标事件穿透容器,不影响主内容交互 */ z-index: 999; /* 基础弹窗层级 */
z-index: 999;
/* 基础弹窗层级 */
/* 子弹窗需要开启 pointer-events,否则点击无效 */ /* 子弹窗需要开启 pointer-events,否则点击无效 */
>.tools-popup, > .tools-popup,
>.voice-popup, > .voice-popup,
>.avatar-selector-popup, > .avatar-selector-popup,
>.nickname-editor-popup { > .nickname-editor-popup {
pointer-events: auto; pointer-events: auto;
} }
/* 昵称编辑弹窗层级最高,避免被其他弹窗遮挡 */ /* 昵称编辑弹窗层级最高,避免被其他弹窗遮挡 */
>.nickname-editor-popup { > .nickname-editor-popup {
z-index: 1001; z-index: 1001;
} }
} }
@@ -2450,45 +2537,14 @@ $radius-lg: 36rpx;
border-radius: 4rpx; border-radius: 4rpx;
animation: none; animation: none;
&:nth-child(1) { &:nth-child(1) { height: 60rpx; animation-delay: 0s; }
height: 60rpx; &:nth-child(2) { height: 90rpx; animation-delay: 0.1s; }
animation-delay: 0s; &:nth-child(3) { height: 50rpx; animation-delay: 0.2s; }
} &:nth-child(4) { height: 120rpx; animation-delay: 0.3s; }
&:nth-child(5) { height: 70rpx; animation-delay: 0.4s; }
&:nth-child(2) { &:nth-child(6) { height: 100rpx; animation-delay: 0.5s; }
height: 90rpx; &:nth-child(7) { height: 80rpx; animation-delay: 0.6s; }
animation-delay: 0.1s; &:nth-child(8) { height: 40rpx; animation-delay: 0.7s; }
}
&:nth-child(3) {
height: 50rpx;
animation-delay: 0.2s;
}
&:nth-child(4) {
height: 120rpx;
animation-delay: 0.3s;
}
&:nth-child(5) {
height: 70rpx;
animation-delay: 0.4s;
}
&:nth-child(6) {
height: 100rpx;
animation-delay: 0.5s;
}
&:nth-child(7) {
height: 80rpx;
animation-delay: 0.6s;
}
&:nth-child(8) {
height: 40rpx;
animation-delay: 0.7s;
}
} }
} }
@@ -2656,13 +2712,10 @@ $radius-lg: 36rpx;
/* 动画定义 */ /* 动画定义 */
@keyframes dotPulse { @keyframes dotPulse {
0%, 100% {
0%,
100% {
opacity: 0.4; opacity: 0.4;
transform: scale(0.8); transform: scale(0.8);
} }
50% { 50% {
opacity: 1; opacity: 1;
transform: scale(1.2); transform: scale(1.2);
@@ -2670,13 +2723,10 @@ $radius-lg: 36rpx;
} }
@keyframes wave { @keyframes wave {
0%, 100% {
0%,
100% {
transform: scaleY(0.5); transform: scaleY(0.5);
opacity: 0.7; opacity: 0.7;
} }
50% { 50% {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
@@ -2687,7 +2737,6 @@ $radius-lg: 36rpx;
0% { 0% {
left: -100%; left: -100%;
} }
100% { 100% {
left: 200%; left: 200%;
} }
@@ -2697,11 +2746,9 @@ $radius-lg: 36rpx;
0% { 0% {
background-position: 0% 50%; background-position: 0% 50%;
} }
50% { 50% {
background-position: 100% 50%; background-position: 100% 50%;
} }
100% { 100% {
background-position: 0% 50%; background-position: 0% 50%;
} }
@@ -2738,8 +2785,7 @@ $radius-lg: 36rpx;
.message-item { .message-item {
margin-bottom: 24rpx; margin-bottom: 24rpx;
.user-message, .user-message, .ai-message {
.ai-message {
.avatar { .avatar {
width: 72rpx; width: 72rpx;
height: 72rpx; height: 72rpx;

View File

@@ -1,5 +1,5 @@
<template> <template>
<view class="ai-chat-page" :style="wrapperPageStyle"> <view class="container" :style="wrapperPageStyle">
<!--自定义导航头部 --> <!--自定义导航头部 -->
<view class="custom-navbar" ref="pageHeader" v-if="showCustomNavbar"> <view class="custom-navbar" ref="pageHeader" v-if="showCustomNavbar">
<view class="header-left"> <view class="header-left">
@@ -51,12 +51,11 @@
import { mapGetters, mapMutations } from 'vuex' import { mapGetters, mapMutations } from 'vuex'
import navigationHelper from '@/common/js/navigation'; import navigationHelper from '@/common/js/navigation';
import { EventSafety } from '@/common/js/event-safety'; import { EventSafety } from '@/common/js/event-safety';
import aiChatMessage from './ai-chat-message.vue'; import aiChatMessage from './ai-chat-message.vue';
export default { export default {
components: { components: {
aiChatMessage, aiChatMessage
}, },
data() { data() {
return { return {
@@ -86,11 +85,11 @@ export default {
// --- 聊天内容区域 --- // --- 聊天内容区域 ---
scrollViewHeight: '0px', scrollViewHeight: '0px',
// 事件处理器引用(用于清理) // 事件处理器引用(用于清理)
safeEventHandlers: new Map() safeEventHandlers: new Map()
} }
}, },
computed: { computed: {
...mapGetters([ ...mapGetters([
'globalAIKefuConfig' 'globalAIKefuConfig'
@@ -109,7 +108,7 @@ export default {
}, },
wrapperPageStyle() { wrapperPageStyle() {
// #ifdef H5 // #ifdef H5
return `top: ${this.navBarHeight + 'px'};` return `top: $ {this.navBarHeight + 'px'};`
// #endif // #endif
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
@@ -121,35 +120,42 @@ export default {
wrapperChatContentStyle() { wrapperChatContentStyle() {
return { return {
height: this.containerHeight, height: this.containerHeight,
paddingTop: this.showCustomNavbar ? '0' : (this.navHeight + 'px') paddingTop: this.showCustomNavbar ? '0' : (this.navBarHeight + 'px')
} }
} }
}, },
async onLoad(options) { async onLoad(options) {
await this.initPage(options) // ✅ 修改:取消权限校验,允许所有客服类型访问此页面
// const hasAccess = this.checkAccessPermission();
// if (!hasAccess) {
// // 如果校验失败,不继续初始化
// return;
// }
this. $langConfig.title('AI智能客服');
this.initChat();
}, },
async onReady() { async onReady() {
await this.initNavigation() await this.initNavigation();
}, },
onShow() { onShow() {
// 可在此补充逻辑(如刷新未读数)
}, },
onHide() { onHide() {
// 页面隐藏时可暂停音频等
}, },
onUnload() { onUnload() {
this.cleanup() this.cleanup();
}, },
methods: { methods: {
// ========== 安全事件处理 ========== // ========== 安全事件处理 ==========
setupSafeEventListeners() { setupSafeEventListeners() {
// 使用 EventSafety 包装事件处理器
const safeHandlers = { const safeHandlers = {
serviceRequest: EventSafety.wrapEventHandler( serviceRequest: EventSafety.wrapEventHandler(
this.handleServiceRequest.bind(this), this.handleServiceRequest.bind(this),
@@ -165,124 +171,100 @@ export default {
) )
} }
// 注册事件监听 this. $on('service.requestComponentInfo', safeHandlers.serviceRequest);
this.$on('service.requestComponentInfo', safeHandlers.serviceRequest) this. $on('navigation.requestInfo', safeHandlers.navigationRequest);
this.$on('navigation.requestInfo', safeHandlers.navigationRequest) this. $on('component.interaction', safeHandlers.componentInteraction);
this.$on('component.interaction', safeHandlers.componentInteraction)
// 保存处理器引用用于清理 this.safeEventHandlers.set('serviceRequest', safeHandlers.serviceRequest);
this.safeEventHandlers.set('serviceRequest', safeHandlers.serviceRequest) this.safeEventHandlers.set('navigationRequest', safeHandlers.navigationRequest);
this.safeEventHandlers.set('navigationRequest', safeHandlers.navigationRequest) this.safeEventHandlers.set('componentInteraction', safeHandlers.componentInteraction);
this.safeEventHandlers.set('componentInteraction', safeHandlers.componentInteraction)
}, },
setupNavigationEvents() { setupNavigationEvents() {
// 监听窗口大小变化
uni.onWindowResize((res) => { uni.onWindowResize((res) => {
console.log('窗口大小变化:', res.size) console.log('窗口大小变化:', res.size);
this.calculateScrollViewHeight() this.calculateScrollViewHeight();
}) });
}, },
// ========== 事件处理方法 ========== // ========== 事件处理方法 ==========
async handleServiceRequest(event) { async handleServiceRequest(event) {
console.log('处理服务请求:', EventSafety.extractEventData(event)) console.log('处理服务请求:', EventSafety.extractEventData(event));
// 安全地检查事件目标
if (event.matches('.service-component') || if (event.matches('.service-component') ||
event.detail?.componentType === 'service') { event.detail?.componentType === 'service') {
await this.processServiceRequest(event) await this.processServiceRequest(event);
} }
}, },
async handleNavigationRequest(event) { async handleNavigationRequest(event) {
console.log('处理导航请求:', event.type) console.log('处理导航请求:', event.type);
this.emitNavigationInfo(event);
// 提供导航信息
this.emitNavigationInfo(event)
}, },
handleComponentInteraction(event) { handleComponentInteraction(event) {
console.log('处理组件交互:', event.detail) console.log('处理组件交互:', event.detail);
this.processComponentInteraction(event);
// 安全地处理组件交互
this.processComponentInteraction(event)
}, },
handleEventError(error, event) { handleEventError(error, event) {
console.error('事件处理错误:', { console.error('事件处理错误:', {
error: error.message, error: error.message,
eventType: event?.type, eventType: event?.type,
component: this.$options.name component: this. $options.name
}) });
this.showError('操作失败,请重试') this.showError('操作失败,请重试');
}, },
// ========== 初始化页面 ========== // ========== 初始化页面 ==========
async initPage(options = {}) { initChat() {
this.$langConfig.title('AI智能客服'); console.log('AI聊天页面初始化');
this.initChat()
}, },
// 初始化导航栏相关配置
async initNavigation() { async initNavigation() {
try { try {
// 获取导航栏高度 this.navBarHeight = await navigationHelper.getNavigationHeight(this, {forceRefresh: false});
this.navBarHeight = await navigationHelper.getNavigationHeight(this, {forceRefresh: false}) this.statusBarHeight = navigationHelper.getStatusBarHeight();
this.calculateScrollViewHeight();
// 获取状态栏高度 this.setupNavigationEvents();
this.statusBarHeight = navigationHelper.getStatusBarHeight()
// 计算滚动视图高度
this.calculateScrollViewHeight()
// 注册导航相关事件
this.setupNavigationEvents()
} catch (error) { } catch (error) {
console.error('初始化导航栏失败:', error) console.error('初始化导航栏失败:', error);
this.setFallbackNavigationValues() this.setFallbackNavigationValues();
} }
}, },
// 计算滚动视图高度
calculateScrollViewHeight() { calculateScrollViewHeight() {
const safeArea = navigationHelper.getSafeAreaInsets() const safeArea = navigationHelper.getSafeAreaInsets();
const bottomInset = safeArea.bottom || 0 const bottomInset = safeArea.bottom || 0;
const inputHeight = 120 // 输入区域高度 const inputHeight = 120;
this.scrollViewHeight = `calc(100vh - $ {this.navBarHeight + this.statusBarHeight + inputHeight + bottomInset}px)`;
this.scrollViewHeight = `calc(100vh - ${this.navBarHeight + this.statusBarHeight + inputHeight + bottomInset}px)`
}, },
// 备用高度设置
setFallbackNavigationValues() { setFallbackNavigationValues() {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
this.navBarHeight = 44 this.navBarHeight = 44;
this.statusBarHeight = 20 this.statusBarHeight = 20;
// #endif // #endif
// #ifdef H5 // #ifdef H5
this.navBarHeight = 44 this.navBarHeight = 44;
this.statusBarHeight = 0 this.statusBarHeight = 0;
// #endif // #endif
// #ifdef APP-PLUS // #ifdef APP-PLUS
this.navBarHeight = 88 this.navBarHeight = 88;
this.statusBarHeight = 44 this.statusBarHeight = 44;
// #endif // #endif
}, },
cleanup() { cleanup() {
// 清理事件监听器
this.safeEventHandlers.forEach((handler, eventType) => { this.safeEventHandlers.forEach((handler, eventType) => {
this.$off(eventType, handler) this. $off(eventType, handler);
}) });
this.safeEventHandlers.clear() this.safeEventHandlers.clear();
console.log('组件清理完成');
console.log('组件清理完成')
}, },
showError(message) { showError(message) {
@@ -290,19 +272,12 @@ export default {
title: message, title: message,
icon: 'none', icon: 'none',
duration: 2000 duration: 2000
}) });
},
// 初始化聊天
initChat() {
// 可以在这里加载历史消息
console.log('AI聊天页面初始化')
}, },
// 返回上一页 // 返回上一页
goBack() { goBack() {
uni.navigateBack() uni.navigateBack();
}, },
// 显示菜单 // 显示菜单
@@ -312,59 +287,54 @@ export default {
success: (res) => { success: (res) => {
switch (res.tapIndex) { switch (res.tapIndex) {
case 0: case 0:
this.clearChat() this.clearChat();
break break;
case 1: case 1:
this.exportChat() this.exportChat();
break break;
case 2: case 2:
this.showSettings() this.showSettings();
break break;
case 3: case 3:
this.showHelp() this.showHelp();
break break;
} }
} }
}) });
}, },
// 清空聊天
clearChat() { clearChat() {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '确定要清空聊天记录吗?', content: '确定要清空聊天记录吗?',
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
this.$refs.chat.clearMessages() this. $refs.chat.clearMessages();
// 重新添加欢迎消息 this. $refs.chat.addMessage({
this.$refs.chat.addMessage({
id: Date.now(), id: Date.now(),
role: 'ai', role: 'ai',
type: 'text', type: 'text',
content: '聊天记录已清空,有什么可以帮助您的吗?', content: '聊天记录已清空,有什么可以帮助您的吗?',
timestamp: Date.now() timestamp: Date.now()
}) });
} }
} }
}) });
}, },
// 导出聊天记录
exportChat() { exportChat() {
uni.showToast({ uni.showToast({
title: '功能开发中', title: '功能开发中',
icon: 'none' icon: 'none'
}) });
}, },
// 显示设置
showSettings() { showSettings() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/settings/index' url: '/pages/settings/index'
}) });
}, },
// 显示帮助
showHelp() { showHelp() {
const helpMessage = { const helpMessage = {
id: Date.now(), id: Date.now(),
@@ -391,27 +361,18 @@ export default {
- **复制**: 长按消息可复制内容 - **复制**: 长按消息可复制内容
- **转发**: 支持消息转发功能`, - **转发**: 支持消息转发功能`,
timestamp: Date.now() timestamp: Date.now()
} };
this.$refs.chat.addMessage(helpMessage) this. $refs.chat.addMessage(helpMessage);
}, },
// 用户发送消息
onMessageSent(message) { onMessageSent(message) {
console.log('用户发送消息:', message) console.log('用户发送消息:', message);
// 使用AI服务获取回复
// AI聊天组件内部已经集成了AI服务,这里只需要监听事件
}, },
// AI回复消息
onAIResponse(message) { onAIResponse(message) {
console.log('AI回复消息:', message) console.log('AI回复消息:', message);
// 可以在这里处理AI回复后的逻辑
// 比如记录对话、更新状态等
}, },
// 生成AI回复
generateAIResponse(userMessage) { generateAIResponse(userMessage) {
const responses = [ const responses = [
'我理解您的需求,让我为您详细解答。', '我理解您的需求,让我为您详细解答。',
@@ -419,133 +380,142 @@ export default {
'根据您的问题,我建议您可以考虑以下几个方面:', '根据您的问题,我建议您可以考虑以下几个方面:',
'这个问题很常见,让我为您提供一些解决方案。', '这个问题很常见,让我为您提供一些解决方案。',
'我明白您的困惑,让我帮您分析一下。' '我明白您的困惑,让我帮您分析一下。'
] ];
const randomResponse = responses[Math.floor(Math.random() * responses.length)] const randomResponse = responses[Math.floor(Math.random() * responses.length)];
const aiMessage = { const aiMessage = {
id: Date.now(), id: Date.now(),
role: 'ai', role: 'ai',
type: 'text', type: 'text',
content: `${randomResponse}\n\n您的问题"${userMessage.content}"我已经收到,正在为您处理中...`, content: ` $ {randomResponse}\n\n您的问题" $ {userMessage.content}"我已经收到,正在为您处理中...`,
timestamp: Date.now(), timestamp: Date.now(),
actions: [ actions: [
{ type: 'like', count: 0 }, { type: 'like', count: 0 },
{ type: 'dislike', count: 0 } { type: 'dislike', count: 0 }
] ]
} };
this.$refs.chat.addMessage(aiMessage) this. $refs.chat.addMessage(aiMessage);
this.$emit('ai-response', aiMessage) this. $emit('ai-response', aiMessage);
}, },
// 操作按钮点击
onActionClick({ action, message }) { onActionClick({ action, message }) {
console.log('操作点击:', action, message)
switch (action.type) { switch (action.type) {
case 'like': case 'like':
uni.showToast({ uni.showToast({ title: '感谢您的反馈!', icon: 'success' });
title: '感谢您的反馈!', break;
icon: 'success'
})
break
case 'dislike': case 'dislike':
uni.showToast({ uni.showToast({ title: '我们会改进服务', icon: 'none' });
title: '我们会改进服务', break;
icon: 'none'
})
break
} }
}, },
// 历史消息加载完成
onHistoryLoaded(messages) { onHistoryLoaded(messages) {
console.log('历史消息加载完成:', messages.length) console.log('历史消息加载完成:', messages.length);
}, },
// 文件预览
onFilePreview(message) { onFilePreview(message) {
console.log('文件预览:', message) uni.showToast({ title: '打开文件: ' + message.fileName, icon: 'none' });
uni.showToast({
title: '打开文件: ' + message.fileName,
icon: 'none'
})
}, },
// 音频播放
onAudioPlay(message) { onAudioPlay(message) {
console.log('音频播放:', message) console.log('音频播放:', message);
}, },
// 音频暂停
onAudioPause(message) { onAudioPause(message) {
console.log('音频暂停:', message) console.log('音频暂停:', message);
}, },
// 视频播放
onVideoPlay(message) { onVideoPlay(message) {
console.log('视频播放:', message) console.log('视频播放:', message);
}, },
// 视频暂停
onVideoPause(message) { onVideoPause(message) {
console.log('视频暂停:', message) console.log('视频暂停:', message);
}, },
// 链接打开
onLinkOpen(message) { onLinkOpen(message) {
console.log('链接打开:', message)
uni.showModal({ uni.showModal({
title: '打开链接', title: '打开链接',
content: `确定要打开链接:${message.url} 吗?`, content: `确定要打开链接: $ {message.url} 吗?`,
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
// #ifdef H5 // #ifdef H5
window.open(message.url, '_blank') window.open(message.url, '_blank');
// #endif // #endif
// #ifdef APP-PLUS // #ifdef APP-PLUS
plus.runtime.openURL(message.url) plus.runtime.openURL(message.url);
// #endif // #endif
} }
} }
}) });
}, },
// 商品查看
onProductView(message) { onProductView(message) {
console.log('商品查看:', message) uni.showToast({ title: '查看商品: ' + message.title, icon: 'none' });
uni.showToast({
title: '查看商品: ' + message.title,
icon: 'none'
})
}, },
// 输入内容变化
onInputChange(value) { onInputChange(value) {
console.log('输入内容:', value) console.log('输入内容:', value);
},
// ✅ 新增:权限校验(核心修复)
checkAccessPermission() {
const servicerConfig = this. $store.state.servicerConfig;
// 如果配置未加载,延迟重试(最多3次,防白屏)
if (!servicerConfig) {
console.warn('【AI客服】servicerConfig 未加载,200ms后重试...');
setTimeout(() => {
this.checkAccessPermission();
}, 200);
return false;
}
let currentType = 'none';
// #ifdef MP-WEIXIN
currentType = servicerConfig?.weapp?.type || 'none';
// #endif
// #ifdef H5
currentType = servicerConfig?.h5?.type || 'none';
// #endif
if (currentType !== 'aikefu') {
uni.showToast({ title: '当前客服类型不支持此页面', icon: 'none' });
setTimeout(() => {
const pages = getCurrentPages();
if (pages.length > 1) {
uni.navigateBack();
} else {
// 回到首页(假设首页是 tab 页)
uni.switchTab({ url: '/pages/index/index' });
}
}, 1500);
return false;
}
return true;
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
/* 引入图标字体 */ /* 引入图标字体 */
@import url('@/common/css/iconfont.css'); @import url('/common/css/iconfont.css');
/* 页面样式 */ /* 页面样式 */
.ai-chat-page { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #f8f8f8; background-color: white; /* 白色 */
overflow: hidden; overflow: hidden;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
/* 自定义导航头部 */ /* 自定义导航头部 */
.custom-navbar { .custom-navbar {
@@ -553,7 +523,7 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
background-color: white; background-color: #c4e0ff; /* 浅蓝色 */
border-bottom: 2rpx solid #eeeeee; border-bottom: 2rpx solid #eeeeee;
.header-left { .header-left {
@@ -565,7 +535,7 @@ export default {
width: 60rpx; width: 60rpx;
height: 60rpx; height: 60rpx;
border-radius: 50%; border-radius: 50%;
background-color: #f8f8f8; background-color: #ffffff; /* 白色按钮 */
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -610,7 +580,7 @@ export default {
width: 60rpx; width: 60rpx;
height: 60rpx; height: 60rpx;
border-radius: 50%; border-radius: 50%;
background-color: #f8f8f8; background-color: #ffffff; /* 白色按钮 */
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -634,18 +604,11 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
} }
/* 底部tabBar占位样式 */ /* 底部tabBar占位样式 */
.page-bottom { .page-bottom {
width: 100%; width: 100%;
background-color: transparent; background-color: transparent;
} }
</style> </style>

View File

@@ -7,7 +7,7 @@
"setting": { "setting": {
"urlCheck": true, "urlCheck": true,
"es6": true, "es6": true,
"enhance": true, "enhance": false,
"postcss": true, "postcss": true,
"preloadBackgroundData": false, "preloadBackgroundData": false,
"minified": true, "minified": true,
@@ -39,27 +39,19 @@
"packNpmManually": false, "packNpmManually": false,
"packNpmRelationList": [], "packNpmRelationList": [],
"minifyWXSS": true, "minifyWXSS": true,
"condition": true, "compileWorklet": false,
"swc": false,
"disableSWC": true,
"minifyWXML": true, "minifyWXML": true,
"compileWorklet": true,
"localPlugins": false, "localPlugins": false,
"disableUseStrict": false, "disableUseStrict": false,
"useCompilerPlugins": false "useCompilerPlugins": false,
"condition": false,
"swc": false,
"disableSWC": true
}, },
"compileType": "miniprogram", "compileType": "miniprogram",
"libVersion": "2.16.1", "libVersion": "3.12.0",
"appid": "wx29215aa1bd97bbd6", "appid": "wx29215aa1bd97bbd6",
"projectname": "uniapp", "projectname": "uniapp",
"debugOptions": {
"hidedInDevtools": []
},
"scripts": {},
"staticServerOptions": {
"baseURL": "",
"servePath": ""
},
"isGameTourist": false, "isGameTourist": false,
"condition": { "condition": {
"search": { "search": {
@@ -80,5 +72,7 @@
"miniprogram": { "miniprogram": {
"list": [] "list": []
} }
} },
"simulatorPluginLibVersion": {},
"editorSetting": {}
} }

View File

@@ -1,4 +1,4 @@
module.exports = { module.exports = {
baseUrl: "https://xcx6.aigc-quickapp.com/",//修改域名 baseUrl: "https://dev.aigc-quickapp.com/",//修改域名
uniacid: 2811,//后台对应uniacid uniacid: 1,//后台对应uniacid
}; };

View File

@@ -65,6 +65,7 @@ const store = new Vuex.Store({
bottomNavHidden: false, // 底部导航是否隐藏,true:隐藏,false:显示 bottomNavHidden: false, // 底部导航是否隐藏,true:隐藏,false:显示
aiUnreadCount: 10, // AI未读消息数量 aiUnreadCount: 10, // AI未读消息数量
globalAIKefuConfig: null, // AI客服配置 globalAIKefuConfig: null, // AI客服配置
customerServiceType: 'ai',
globalStoreConfig: null, // 门店配置 globalStoreConfig: null, // 门店配置
globalStoreInfo: null, // 门店信息 globalStoreInfo: null, // 门店信息
defaultStoreInfo: null, // 默认门店 defaultStoreInfo: null, // 默认门店
@@ -159,6 +160,9 @@ const store = new Vuex.Store({
state.globalAIKefuConfig = value; state.globalAIKefuConfig = value;
uni.setStorageSync('globalAIKefuConfig', value); // 初始化数据调用 uni.setStorageSync('globalAIKefuConfig', value); // 初始化数据调用
}, },
setCustomerServiceType(state, type) {
state.customerServiceType = type;
},
setGlobalStoreConfig(state, value) { setGlobalStoreConfig(state, value) {
state.globalStoreConfig = value; state.globalStoreConfig = value;
uni.setStorageSync('globalStoreConfig', value); // 初始化数据调用 uni.setStorageSync('globalStoreConfig', value); // 初始化数据调用
@@ -412,7 +416,7 @@ const store = new Vuex.Store({
}, },
// 生成主题颜色CSS变量 // 生成主题颜色CSS变量
themeColorSet() { themeColorSet() {
// console.log('样式颜色设置...'); console.log('样式颜色设置...');
let theme = this.state.themeStyle; let theme = this.state.themeStyle;
if (!theme?.main_color || !theme?.aux_color) return; if (!theme?.main_color || !theme?.aux_color) return;
try { try {
@@ -436,7 +440,7 @@ const store = new Vuex.Store({
} catch (e) { } catch (e) {
console.error('设置主题颜色失败', e); console.error('设置主题颜色失败', e);
} }
// console.log('themeColor => ', this.state.themeColor); console.log('themeColor => ', this.state.themeColor);
} }
} }
}) })