Compare commits
12 Commits
047cf765da
...
dev/1.0
| Author | SHA1 | Date | |
|---|---|---|---|
| 54c39259a7 | |||
| 15361211b1 | |||
| e301ddc6ec | |||
| a560ad4a5d | |||
| 7f7a18803f | |||
| 42563d7184 | |||
| 14a903f42a | |||
| c9f8614927 | |||
| fe9303bf4c | |||
| e4dfd0ae11 | |||
| 7037d0b083 | |||
| e8a79bd245 |
@@ -65,6 +65,10 @@ export default {
|
||||
componentRefresh() {
|
||||
return this.$store.state.componentRefresh;
|
||||
},
|
||||
// AI客服配置
|
||||
globalAIKefuConfig() {
|
||||
return this.$store.state.globalAIKefuConfig;
|
||||
},
|
||||
// 客服配置
|
||||
servicerConfig() {
|
||||
return this.$store.state.servicerConfig;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -183,13 +183,17 @@ export default {
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 初始化多语言配置
|
||||
*/
|
||||
initLanguage() {
|
||||
this.langList = this.$langConfig.list();
|
||||
this.langIndexMap = {};
|
||||
for (let i = 0; i < this.langList.length; i++) {
|
||||
this.langIndexMap[i] = this.langList[i].value;
|
||||
}
|
||||
const savedLang = uni.getStorageSync('lang');
|
||||
const savedLang = this.$langConfig.getCurrentLocale();
|
||||
if (savedLang) {
|
||||
for (let i = 0; i < this.langList.length; i++) {
|
||||
if (this.langList[i].value === savedLang) {
|
||||
@@ -201,23 +205,37 @@ export default {
|
||||
this.currentLangIndex = 0;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 电话联系客服
|
||||
*/
|
||||
call() {
|
||||
if (this.tel) {
|
||||
uni.makePhoneCall({ phoneNumber: this.tel + '' });
|
||||
} else {
|
||||
uni.showToast({ title: '暂无联系电话', icon: 'none' });
|
||||
}
|
||||
this.customerService.makePhoneCall(this.tel);
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换中英文语言,并刷新当前页面(保留所有参数)
|
||||
*/
|
||||
toggleLanguage() {
|
||||
this.currentLangIndex = this.currentLangIndex === 0 ? 1 : 0;
|
||||
const targetLang = this.langIndexMap[this.currentLangIndex];
|
||||
this. $langConfig.change(targetLang);
|
||||
|
||||
if (uni.getSystemInfoSync().platform === 'browser') {
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 100);
|
||||
}
|
||||
// 调用语言切换逻辑(设置 storage + 清空缓存)
|
||||
this.$langConfig.change(targetLang);
|
||||
},
|
||||
|
||||
/**
|
||||
* 打开 AI 智能助手
|
||||
*/
|
||||
openAIChat() {
|
||||
this.$util.redirectTo(this.$util.AI_CHAT_PAGE_URL);
|
||||
},
|
||||
|
||||
/**
|
||||
* 打开客服选择对话框
|
||||
*/
|
||||
openCustomerSelectPopup() {
|
||||
this.customerService.openCustomerSelectPopupDialog();
|
||||
},
|
||||
|
||||
// ✅ 核心方法:统一客服入口
|
||||
@@ -312,7 +330,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.fixed-box {
|
||||
position: fixed;
|
||||
right: 0rpx;
|
||||
@@ -333,16 +351,27 @@ export default {
|
||||
}
|
||||
|
||||
.btn-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
line-height: 1;
|
||||
margin: 14rpx 0;
|
||||
transition: 0.1s;
|
||||
color: var(--hover-nav-text-color);
|
||||
border-radius: 40rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 14rpx 0;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 定义共同的背景颜色 */
|
||||
.common-bg {
|
||||
background-color: var(--hover-nav-bg-color);
|
||||
/* 使用变量以保持一致性 */
|
||||
}
|
||||
|
||||
.btn-item text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
@@ -357,7 +386,6 @@ export default {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 14rpx 0;
|
||||
background: #fff;
|
||||
border-radius: 50rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
@@ -371,21 +399,7 @@ export default {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.unread-badge {
|
||||
position: absolute;
|
||||
top: -5rpx;
|
||||
right: -5rpx;
|
||||
background-color: #ff4544;
|
||||
color: white;
|
||||
border-radius: 20rpx;
|
||||
min-width: 30rpx;
|
||||
height: 30rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
padding: 0 8rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(255, 69, 68, 0.3);
|
||||
}
|
||||
|
||||
|
||||
.ai-icon {
|
||||
font-size: 40rpx;
|
||||
|
||||
@@ -104,7 +104,7 @@
|
||||
},
|
||||
"router" : {
|
||||
"mode" : "history",
|
||||
"base" : "/hwappx/2811/"
|
||||
"base" : "/hwappx/common/"
|
||||
},
|
||||
"title" : "",
|
||||
"devServer" : {
|
||||
|
||||
12
pages.json
12
pages.json
@@ -321,6 +321,12 @@
|
||||
"navigationBarTitleText": "AI 客服"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "agreement/contenr",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "vr/index",
|
||||
"style": {
|
||||
@@ -919,6 +925,12 @@
|
||||
// #endif
|
||||
"navigationBarTitleText": "查看文件"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "file-preview/file-preview",
|
||||
"style": {
|
||||
"navigationBarTitleText": "文件预览"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -17,7 +17,11 @@
|
||||
}}</view>
|
||||
</view>
|
||||
|
||||
<diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="safeBgUrl"
|
||||
<!-- <view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch" :style="{ backgroundImage: bgImg }">
|
||||
<ns-navbar :title-color="textNavColor" :data="diyData.global" :scrollTop="scrollTop" :isBack="false"/>
|
||||
</view> -->
|
||||
|
||||
<diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="bgUrl"
|
||||
:scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page">
|
||||
<template v-slot:components>
|
||||
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"
|
||||
@@ -29,7 +33,7 @@
|
||||
</diy-index-page>
|
||||
|
||||
<view v-else class="bg-index"
|
||||
:style="{ backgroundImage: backgroundUrlStyle, paddingTop: paddingTop, marginTop: marginTop }">
|
||||
:style="{ backgroundImage: backgroundUrl, paddingTop: paddingTop, marginTop: marginTop }">
|
||||
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"
|
||||
:followOfficialAccount="followOfficialAccount" />
|
||||
<ns-copyright v-show="isShowCopyRight" />
|
||||
@@ -39,17 +43,35 @@
|
||||
<view @touchmove.prevent.stop>
|
||||
<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
|
||||
<view class="small-bot">
|
||||
<!-- <view class="adver-time" wx:if="{{startadv.params.style=='default'&&startadv.params.canclose==1}}">
|
||||
<view bindtap="adverclose">跳过</view>
|
||||
<view class="time">{{clock}}s</view>
|
||||
</view>
|
||||
<view class="adver-time" wx:if="{{startadv.params.style=='default'&&startadv.params.canclose==0}}">
|
||||
<view class="time" style="line-height: 64rpx;">{{clock}}s</view>
|
||||
</view> -->
|
||||
<swiper autoplay="true" :circular="true" indicator-active-color="#fff"
|
||||
indicator-color="rgba(255,255,255,0.6)" :indicator-dots="true" interval="3000">
|
||||
<swiper-item v-for="(item, index) in adv.list" :key="index">
|
||||
<image class="slide-image" @click="$util.diyRedirectTo(item.link)" height="100%"
|
||||
:src="$util.img(item.imageUrl)" width="100%"></image>
|
||||
<!-- <image bindtap="adverclose" class="slide-image" height="100%" src="{{item.imgurl}}" width="100%" wx:if="{{item.click==1}}"></image> -->
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="small-bot-close" @click="closePopupWindow">
|
||||
<view bindtap="adverclose" class="small-bot-close" @click="closePopupWindow">
|
||||
<i class="iconfont icon-round-close" style="color:#fff"></i>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="image-wrap">
|
||||
<swiper class="swiper" style="width:100%;height: 1200rpx;" :autoplay="true" interval="3000" circular="true" :indicator-dots="true" indicator-color="#000" indicator-active-color="red">
|
||||
<swiper-item class="swiper-item" v-for="(item, index) in adv.list" :key="index" v-if="item.imageUrl" @click="$util.diyRedirectTo(item.link)">
|
||||
<view class="item">
|
||||
<image :src="$util.img(item.imageUrl)" mode="aspectFit" :show-menu-by-longpress="true"/>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<text class="iconfont icon-round-close" @click="closePopupWindow"></text> -->
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
@@ -79,7 +101,7 @@
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 选择门店弹出框 -->
|
||||
<!-- 选择门店弹出框,定位当前位置,展示最近的一个门店 -->
|
||||
<view @touchmove.prevent.stop class="choose-store">
|
||||
<uni-popup ref="chooseStorePopup" type="center" :maskClick="false" class="choose-store">
|
||||
<view class="choose-store-popup">
|
||||
@@ -115,6 +137,7 @@
|
||||
</uni-popup>
|
||||
</view>
|
||||
<hover-nav :need="true"></hover-nav>
|
||||
<!-- 隐私协议 -->
|
||||
<privacy-popup ref="privacyPopup"></privacy-popup>
|
||||
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
|
||||
<ns-login ref="login"></ns-login>
|
||||
@@ -123,45 +146,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import diyJs from '@/common/js/diy.js';
|
||||
import scroll from '@/common/js/scroll-view.js';
|
||||
import indexJs from './public/js/index.js';
|
||||
|
||||
export default {
|
||||
mixins: [diyJs, scroll, indexJs],
|
||||
|
||||
data() {
|
||||
return {
|
||||
diyData: { global: {}, value: null },
|
||||
followOfficialAccount: {},
|
||||
wechatQrcode: '',
|
||||
adv: { advshow: -1, list: [] },
|
||||
// ❌ 不要定义 siteInfo、bgUrl,除非你明确知道它们不会冲突
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
// ✅ 安全获取 bgUrl(用于 diy-index-page 的 prop)
|
||||
safeBgUrl() {
|
||||
// 优先取全局配置中的 bgUrl,没有则用组件自己的 bgUrl(如有),否则为空
|
||||
return this.diyData?.global?.bgUrl || this.bgUrl || '';
|
||||
},
|
||||
|
||||
// ✅ 安全生成 background-image 样式字符串(用于 fallback 区域)
|
||||
backgroundUrlStyle() {
|
||||
const url = this.diyData?.global?.bgUrl || this.bgUrl || '';
|
||||
return url ? `url(${url})` : 'none';
|
||||
}
|
||||
},
|
||||
|
||||
// 如果你的 mixin 中已经处理了数据加载,这里可以留空
|
||||
// 否则建议在 created/mounted 中初始化默认值或请求数据
|
||||
created() {
|
||||
// 可选:如果 mixin 没有初始化 diyData,这里再兜底一次
|
||||
if (!this.diyData) {
|
||||
this.diyData = { global: {}, value: null };
|
||||
}
|
||||
}
|
||||
mixins: [diyJs, scroll, indexJs]
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -208,9 +200,8 @@ export default {
|
||||
font-size: 60rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.swiper /deep/ .uni-swiper-dots-horizontal {
|
||||
.swiper ::v-deep .uni-swiper-dots-horizontal {
|
||||
left: 40%;
|
||||
bottom: 40px
|
||||
}
|
||||
@@ -223,26 +214,26 @@ export default {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/deep/.diy-index-page .uni-popup .uni-popup__wrapper-box {
|
||||
::v-deep .diy-index-page .uni-popup .uni-popup__wrapper-box {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/deep/ .placeholder {
|
||||
::v-deep .placeholder {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/deep/::-webkit-scrollbar {
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||
::v-deep .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||
max-height: unset !important;
|
||||
}
|
||||
|
||||
/deep/ .mescroll-totop {
|
||||
::v-deep .mescroll-totop {
|
||||
/* #ifdef H5 */
|
||||
right: 28rpx !important;
|
||||
bottom: 200rpx !important;
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<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">
|
||||
|
||||
<!-- 加载更多历史消息 -->
|
||||
@@ -10,7 +14,11 @@
|
||||
</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">
|
||||
@@ -77,12 +85,21 @@
|
||||
<text class="audio-duration">{{ formatDuration(message.duration) }}</text>
|
||||
</view>
|
||||
<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>
|
||||
</button>
|
||||
<slider class="audio-slider" :value="message.currentTime || 0" :max="message.duration || 0"
|
||||
@changing="onAudioSliderChange" @change="onAudioSliderChangeEnd" activeColor="#8a9fb8"
|
||||
backgroundColor="#e8edf3" block-size="12" />
|
||||
<slider
|
||||
class="audio-slider"
|
||||
:value="message.currentTime || 0"
|
||||
:max="message.duration || 0"
|
||||
@changing="onAudioSliderChange"
|
||||
@change="onAudioSliderChangeEnd"
|
||||
activeColor="#8a9fb8"
|
||||
backgroundColor="#e8edf3"
|
||||
block-size="12" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -90,8 +107,14 @@
|
||||
<!-- 视频消息 -->
|
||||
<view v-else-if="message.type === 'video'" class="video-content">
|
||||
<view class="video-player">
|
||||
<video :src="message.url" :poster="message.cover" :controls="true" :autoplay="false"
|
||||
class="video-element" @play="onVideoPlay(message)" @pause="onVideoPause(message)">
|
||||
<video
|
||||
:src="message.url"
|
||||
:poster="message.cover"
|
||||
:controls="true"
|
||||
:autoplay="false"
|
||||
class="video-element"
|
||||
@play="onVideoPlay(message)"
|
||||
@pause="onVideoPause(message)">
|
||||
</video>
|
||||
<view class="video-info">
|
||||
<text class="video-title">{{ message.title || '视频消息' }}</text>
|
||||
@@ -140,8 +163,12 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<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"
|
||||
:class="[`iconfont`, action.icon, action.type]" @click="handleAction(action, message)">
|
||||
<button
|
||||
v-for="action in message.actions"
|
||||
:key="action.id"
|
||||
class="action-btn"
|
||||
:class="[`iconfont`, action.icon, action.type]"
|
||||
@click="handleAction(action, message)">
|
||||
{{ action.text }}
|
||||
</button>
|
||||
</view>
|
||||
@@ -172,11 +199,21 @@
|
||||
</view>
|
||||
|
||||
<view class="input-container">
|
||||
<textarea v-model="inputText" class="message-input" placeholder="请输入您的问题..." :maxlength="500"
|
||||
:auto-height="true" :show-confirm-bar="false" @confirm="sendMessage" @input="onInput" />
|
||||
<textarea
|
||||
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()">
|
||||
<text>发送</text>
|
||||
</button>
|
||||
@@ -234,7 +271,11 @@
|
||||
</view>
|
||||
<view class="voice-content">
|
||||
<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>
|
||||
<text class="voice-tip">{{ voiceInputing ? '正在录音,松开结束' : '点击开始录音' }}</text>
|
||||
</view>
|
||||
@@ -290,15 +331,23 @@
|
||||
</view>
|
||||
<view class="nickname-editor-content">
|
||||
<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 class="nickname-tip">昵称长度限制1-12个字符,仅自己可见</view>
|
||||
<view class="nickname-editor-actions">
|
||||
<button class="nickname-action-btn cancel" @click="closeNicknameEditor">
|
||||
<text>取消</text>
|
||||
</button>
|
||||
<button class="nickname-action-btn confirm" :class="{ disabled: !tempNickname.trim() }"
|
||||
:disabled="!tempNickname.trim()" @click="saveNickname">
|
||||
<button
|
||||
class="nickname-action-btn confirm"
|
||||
:class="{ disabled: !tempNickname.trim() }"
|
||||
:disabled="!tempNickname.trim()"
|
||||
@click="saveNickname">
|
||||
<text>保存</text>
|
||||
</button>
|
||||
</view>
|
||||
@@ -391,20 +440,15 @@ export default {
|
||||
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() {
|
||||
// 如果不是 AI 客服,立即退出并跳转
|
||||
if (customerServiceType !== 'ai') {
|
||||
uni.showToast({ title: '当前客服类型不支持此页面', icon: 'none' });
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({ delta: 1 }); // 或 redirectTo 首页
|
||||
}, 1000);
|
||||
return; // ⚠️ 关键:阻止后续初始化
|
||||
}
|
||||
// 优先读取本地缓存的会话 ID
|
||||
const localConvId = this.getConversationIdFromLocal();
|
||||
if (localConvId) {
|
||||
@@ -774,6 +818,7 @@ export default {
|
||||
},
|
||||
|
||||
// 发送流式消息
|
||||
// 发送流式消息(自动适配 H5 / 微信小程序)
|
||||
async sendStreamMessage(userMessage) {
|
||||
// 创建流式消息对象
|
||||
const streamMessage = {
|
||||
@@ -783,35 +828,36 @@ export default {
|
||||
content: '',
|
||||
timestamp: Date.now(),
|
||||
isStreaming: true
|
||||
}
|
||||
};
|
||||
|
||||
// 移除加载状态,添加流式消息
|
||||
this.messages = this.messages.filter(msg => msg.type !== 'loading')
|
||||
this.shouldScrollToBottom = true
|
||||
this.messages.push(streamMessage)
|
||||
this.messages = this.messages.filter(msg => msg.type !== 'loading');
|
||||
this.shouldScrollToBottom = true;
|
||||
this.messages.push(streamMessage);
|
||||
|
||||
// 开始流式响应
|
||||
await aiService.sendStreamMessage(
|
||||
try {
|
||||
// #ifdef H5
|
||||
// ===== H5: 使用 POST + 流式 (fetch readable stream) =====
|
||||
await aiService.sendHttpStream(
|
||||
userMessage,
|
||||
// 流式数据回调
|
||||
(chunk) => {
|
||||
streamMessage.content += chunk
|
||||
this.$forceUpdate() // 或 this.$nextTick()
|
||||
// 实时更新内容
|
||||
streamMessage.content += chunk;
|
||||
this.$forceUpdate(); // 强制更新视图
|
||||
},
|
||||
// 完成回调:处理对象或字符串
|
||||
(completeResult) => {
|
||||
// 流结束回调
|
||||
let finalContent = '';
|
||||
let convId = '';
|
||||
|
||||
// 判断是对象还是字符串
|
||||
if (typeof completeResult === 'string') {
|
||||
finalContent = completeResult;
|
||||
} else {
|
||||
finalContent = completeResult.content || '';
|
||||
convId = completeResult.conversation_id || ''; // 👈 关键:提取 conversation_id
|
||||
convId = completeResult.conversation_id || '';
|
||||
}
|
||||
|
||||
// 更新消息状态
|
||||
// 更新最终内容
|
||||
streamMessage.isStreaming = false;
|
||||
streamMessage.content = finalContent;
|
||||
|
||||
@@ -821,17 +867,71 @@ export default {
|
||||
{ id: 2, text: '没帮助', type: 'dislike' }
|
||||
];
|
||||
|
||||
// 保存 conversation_id 到本地
|
||||
// 保存会话 ID
|
||||
if (convId) {
|
||||
this.currentConversationId = convId;
|
||||
aiService.setConversationId(convId);
|
||||
this.saveConversationIdToLocal(convId);
|
||||
}
|
||||
|
||||
// 触发事件
|
||||
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) {
|
||||
const responses = {
|
||||
@@ -1352,7 +1452,7 @@ $radius-lg: 36rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 仅新增:科技感粉蓝渐变背景 + 流动动画 */
|
||||
background: linear-gradient(135deg, #fde6f7 0%, #f8b7e8 20%, #c4e0ff 50%, #8cb4ff 80%, #ffffff 100%);
|
||||
background: white; /* 白色 */
|
||||
background-size: 200% 200%;
|
||||
animation: gradient-flow 15s ease infinite;
|
||||
/* 原有样式保持不变 */
|
||||
@@ -1366,8 +1466,7 @@ $radius-lg: 36rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
min-height: 0;
|
||||
/* 重要:防止flex元素溢出 */
|
||||
min-height: 0; /* 重要:防止flex元素溢出 */
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
@@ -1382,8 +1481,7 @@ $radius-lg: 36rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.user-message,
|
||||
.ai-message {
|
||||
.user-message, .ai-message {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
@@ -1414,25 +1512,7 @@ $radius-lg: 36rpx;
|
||||
margin-left: 24rpx;
|
||||
max-width: calc(100% - 112rpx);
|
||||
min-width: 0;
|
||||
width: 0;
|
||||
/* 添加这个属性防止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;
|
||||
}
|
||||
width: 0; /* 添加这个属性防止flex元素溢出 */
|
||||
|
||||
.message-bubble {
|
||||
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 {
|
||||
flex-direction: row-reverse;
|
||||
@@ -1863,27 +1965,20 @@ $radius-lg: 36rpx;
|
||||
text-align: right;
|
||||
|
||||
.message-bubble {
|
||||
background: linear-gradient(135deg, #ffadd2, #f783ac) !important;
|
||||
/* 粉色渐变 */
|
||||
color: white !important;
|
||||
border-radius: 16rpx 16rpx 4rpx 16rpx;
|
||||
/* 右对齐气泡尖角适配 */
|
||||
box-shadow: 0 8rpx 20rpx rgba(247, 131, 172, 0.3) !important;
|
||||
background: #c4e0ff !important; /* 浅蓝色 */
|
||||
color: black !important;
|
||||
border-radius: 16rpx 16rpx 4rpx 16rpx; /* 右对齐气泡尖角适配 */
|
||||
box-shadow: 0 8rpx 20rpx rgba(196, 224, 255, 0.3) !important;
|
||||
border: none !important;
|
||||
/* ✅ 关键:允许内容撑开高度 */
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
padding: 24rpx 32rpx;
|
||||
/* 保留内边距 */
|
||||
display: inline-block;
|
||||
/* 让宽度也随内容收缩(可选) */
|
||||
max-width: 80%;
|
||||
/* 防止过宽 */
|
||||
padding: 24rpx 32rpx; /* 保留内边距 */
|
||||
display: inline-block; /* 让宽度也随内容收缩(可选) */
|
||||
max-width: 80%; /* 防止过宽 */
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
/* 保留用户输入的换行符 */
|
||||
white-space: pre-wrap; /* 保留用户输入的换行符 */
|
||||
line-height: 1.6;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -1891,8 +1986,7 @@ $radius-lg: 36rpx;
|
||||
right: -14rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background: #ffffff !important;
|
||||
/* 菱形改为白色 */
|
||||
background: #ffffff !important; /* 菱形改为白色 */
|
||||
border-radius: 6rpx;
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 4rpx -4rpx 4rpx rgba(0, 0, 0, 0.05);
|
||||
@@ -1905,9 +1999,11 @@ $radius-lg: 36rpx;
|
||||
left: -100%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right,
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -1923,13 +2019,11 @@ $radius-lg: 36rpx;
|
||||
align-items: flex-start;
|
||||
|
||||
.message-bubble {
|
||||
background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
|
||||
/* 蓝色浅渐变 */
|
||||
color: #2c3e50 !important;
|
||||
border-radius: 16rpx 16rpx 16rpx 4rpx;
|
||||
/* 左对齐气泡尖角适配 */
|
||||
box-shadow: 0 8rpx 20rpx rgba(191, 219, 254, 0.4) !important;
|
||||
border: 1rpx solid #dbeafe !important;
|
||||
background: white !important; /* 白色 */
|
||||
color: black !important;
|
||||
border-radius: 16rpx 16rpx 16rpx 4rpx; /* 左对齐气泡尖角适配 */
|
||||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1) !important;
|
||||
border: 1rpx solid #e0e0e0 !important;
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
padding: 24rpx 32rpx;
|
||||
@@ -1938,7 +2032,6 @@ $radius-lg: 36rpx;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.6;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -1946,8 +2039,7 @@ $radius-lg: 36rpx;
|
||||
left: -14rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background: #ffffff !important;
|
||||
/* 菱形改为白色 */
|
||||
background: #ffffff !important; /* 菱形改为白色 */
|
||||
border-radius: 6rpx;
|
||||
transform: rotate(45deg);
|
||||
box-shadow: -4rpx 4rpx 4rpx rgba(0, 0, 0, 0.05);
|
||||
@@ -1963,7 +2055,7 @@ $radius-lg: 36rpx;
|
||||
|
||||
/* 输入区域 */
|
||||
.input-area {
|
||||
background: linear-gradient(135deg, #fde6f7 0%, #f8b7e8 20%, #c4e0ff 50%, #8cb4ff 80%, #ffffff 100%);
|
||||
background: #c4e0ff; /* 浅蓝色 */
|
||||
border-top: 2rpx solid #f0f4f8;
|
||||
padding: 24rpx 32rpx;
|
||||
/* 确保在微信小程序中紧贴底部 */
|
||||
@@ -2047,12 +2139,9 @@ $radius-lg: 36rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
text-align: center;
|
||||
/* 兼容多端文字居中 */
|
||||
white-space: nowrap;
|
||||
/* 强制文字单行横向显示 */
|
||||
line-height: 1;
|
||||
/* 重置行高,避免文字垂直偏移 */
|
||||
text-align: center; /* 兼容多端文字居中 */
|
||||
white-space: nowrap; /* 强制文字单行横向显示 */
|
||||
line-height: 1; /* 重置行高,避免文字垂直偏移 */
|
||||
top: -10px;
|
||||
|
||||
&.disabled {
|
||||
@@ -2076,10 +2165,8 @@ $radius-lg: 36rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
/* 让鼠标事件穿透容器,不影响主内容交互 */
|
||||
z-index: 999;
|
||||
/* 基础弹窗层级 */
|
||||
pointer-events: none; /* 让鼠标事件穿透容器,不影响主内容交互 */
|
||||
z-index: 999; /* 基础弹窗层级 */
|
||||
|
||||
/* 子弹窗需要开启 pointer-events,否则点击无效 */
|
||||
> .tools-popup,
|
||||
@@ -2450,45 +2537,14 @@ $radius-lg: 36rpx;
|
||||
border-radius: 4rpx;
|
||||
animation: none;
|
||||
|
||||
&:nth-child(1) {
|
||||
height: 60rpx;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
height: 90rpx;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
&:nth-child(1) { height: 60rpx; animation-delay: 0s; }
|
||||
&:nth-child(2) { height: 90rpx; animation-delay: 0.1s; }
|
||||
&: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 {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
0%, 100% {
|
||||
opacity: 0.4;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
@@ -2670,13 +2723,10 @@ $radius-lg: 36rpx;
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
0%, 100% {
|
||||
transform: scaleY(0.5);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
@@ -2687,7 +2737,6 @@ $radius-lg: 36rpx;
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 200%;
|
||||
}
|
||||
@@ -2697,11 +2746,9 @@ $radius-lg: 36rpx;
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
@@ -2738,8 +2785,7 @@ $radius-lg: 36rpx;
|
||||
.message-item {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.user-message,
|
||||
.ai-message {
|
||||
.user-message, .ai-message {
|
||||
.avatar {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="ai-chat-page" :style="wrapperPageStyle">
|
||||
<view class="container" :style="wrapperPageStyle">
|
||||
<!--自定义导航头部 -->
|
||||
<view class="custom-navbar" ref="pageHeader" v-if="showCustomNavbar">
|
||||
<view class="header-left">
|
||||
@@ -51,12 +51,11 @@
|
||||
import { mapGetters, mapMutations } from 'vuex'
|
||||
import navigationHelper from '@/common/js/navigation';
|
||||
import { EventSafety } from '@/common/js/event-safety';
|
||||
|
||||
import aiChatMessage from './ai-chat-message.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
aiChatMessage,
|
||||
aiChatMessage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -86,11 +85,11 @@ export default {
|
||||
// --- 聊天内容区域 ---
|
||||
scrollViewHeight: '0px',
|
||||
|
||||
|
||||
// 事件处理器引用(用于清理)
|
||||
safeEventHandlers: new Map()
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'globalAIKefuConfig'
|
||||
@@ -121,35 +120,42 @@ export default {
|
||||
wrapperChatContentStyle() {
|
||||
return {
|
||||
height: this.containerHeight,
|
||||
paddingTop: this.showCustomNavbar ? '0' : (this.navHeight + 'px')
|
||||
paddingTop: this.showCustomNavbar ? '0' : (this.navBarHeight + 'px')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async onLoad(options) {
|
||||
await this.initPage(options)
|
||||
// ✅ 修改:取消权限校验,允许所有客服类型访问此页面
|
||||
// const hasAccess = this.checkAccessPermission();
|
||||
// if (!hasAccess) {
|
||||
// // 如果校验失败,不继续初始化
|
||||
// return;
|
||||
// }
|
||||
|
||||
this. $langConfig.title('AI智能客服');
|
||||
this.initChat();
|
||||
},
|
||||
|
||||
async onReady() {
|
||||
await this.initNavigation()
|
||||
await this.initNavigation();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
|
||||
// 可在此补充逻辑(如刷新未读数)
|
||||
},
|
||||
|
||||
onHide() {
|
||||
|
||||
// 页面隐藏时可暂停音频等
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
this.cleanup()
|
||||
this.cleanup();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// ========== 安全事件处理 ==========
|
||||
setupSafeEventListeners() {
|
||||
// 使用 EventSafety 包装事件处理器
|
||||
const safeHandlers = {
|
||||
serviceRequest: EventSafety.wrapEventHandler(
|
||||
this.handleServiceRequest.bind(this),
|
||||
@@ -165,49 +171,41 @@ export default {
|
||||
)
|
||||
}
|
||||
|
||||
// 注册事件监听
|
||||
this.$on('service.requestComponentInfo', safeHandlers.serviceRequest)
|
||||
this.$on('navigation.requestInfo', safeHandlers.navigationRequest)
|
||||
this.$on('component.interaction', safeHandlers.componentInteraction)
|
||||
this. $on('service.requestComponentInfo', safeHandlers.serviceRequest);
|
||||
this. $on('navigation.requestInfo', safeHandlers.navigationRequest);
|
||||
this. $on('component.interaction', safeHandlers.componentInteraction);
|
||||
|
||||
// 保存处理器引用用于清理
|
||||
this.safeEventHandlers.set('serviceRequest', safeHandlers.serviceRequest)
|
||||
this.safeEventHandlers.set('navigationRequest', safeHandlers.navigationRequest)
|
||||
this.safeEventHandlers.set('componentInteraction', safeHandlers.componentInteraction)
|
||||
this.safeEventHandlers.set('serviceRequest', safeHandlers.serviceRequest);
|
||||
this.safeEventHandlers.set('navigationRequest', safeHandlers.navigationRequest);
|
||||
this.safeEventHandlers.set('componentInteraction', safeHandlers.componentInteraction);
|
||||
},
|
||||
|
||||
setupNavigationEvents() {
|
||||
// 监听窗口大小变化
|
||||
uni.onWindowResize((res) => {
|
||||
console.log('窗口大小变化:', res.size)
|
||||
this.calculateScrollViewHeight()
|
||||
})
|
||||
console.log('窗口大小变化:', res.size);
|
||||
this.calculateScrollViewHeight();
|
||||
});
|
||||
},
|
||||
|
||||
// ========== 事件处理方法 ==========
|
||||
|
||||
async handleServiceRequest(event) {
|
||||
console.log('处理服务请求:', EventSafety.extractEventData(event))
|
||||
console.log('处理服务请求:', EventSafety.extractEventData(event));
|
||||
|
||||
// 安全地检查事件目标
|
||||
if (event.matches('.service-component') ||
|
||||
event.detail?.componentType === 'service') {
|
||||
await this.processServiceRequest(event)
|
||||
await this.processServiceRequest(event);
|
||||
}
|
||||
},
|
||||
|
||||
async handleNavigationRequest(event) {
|
||||
console.log('处理导航请求:', event.type)
|
||||
|
||||
// 提供导航信息
|
||||
this.emitNavigationInfo(event)
|
||||
console.log('处理导航请求:', event.type);
|
||||
this.emitNavigationInfo(event);
|
||||
},
|
||||
|
||||
handleComponentInteraction(event) {
|
||||
console.log('处理组件交互:', event.detail)
|
||||
|
||||
// 安全地处理组件交互
|
||||
this.processComponentInteraction(event)
|
||||
console.log('处理组件交互:', event.detail);
|
||||
this.processComponentInteraction(event);
|
||||
},
|
||||
|
||||
handleEventError(error, event) {
|
||||
@@ -215,74 +213,58 @@ export default {
|
||||
error: error.message,
|
||||
eventType: event?.type,
|
||||
component: this. $options.name
|
||||
})
|
||||
});
|
||||
|
||||
this.showError('操作失败,请重试')
|
||||
this.showError('操作失败,请重试');
|
||||
},
|
||||
|
||||
// ========== 初始化页面 ==========
|
||||
async initPage(options = {}) {
|
||||
this.$langConfig.title('AI智能客服');
|
||||
this.initChat()
|
||||
initChat() {
|
||||
console.log('AI聊天页面初始化');
|
||||
},
|
||||
|
||||
|
||||
// 初始化导航栏相关配置
|
||||
async initNavigation() {
|
||||
try {
|
||||
// 获取导航栏高度
|
||||
this.navBarHeight = await navigationHelper.getNavigationHeight(this, {forceRefresh: false})
|
||||
|
||||
// 获取状态栏高度
|
||||
this.statusBarHeight = navigationHelper.getStatusBarHeight()
|
||||
|
||||
// 计算滚动视图高度
|
||||
this.calculateScrollViewHeight()
|
||||
|
||||
// 注册导航相关事件
|
||||
this.setupNavigationEvents()
|
||||
|
||||
this.navBarHeight = await navigationHelper.getNavigationHeight(this, {forceRefresh: false});
|
||||
this.statusBarHeight = navigationHelper.getStatusBarHeight();
|
||||
this.calculateScrollViewHeight();
|
||||
this.setupNavigationEvents();
|
||||
} catch (error) {
|
||||
console.error('初始化导航栏失败:', error)
|
||||
this.setFallbackNavigationValues()
|
||||
console.error('初始化导航栏失败:', error);
|
||||
this.setFallbackNavigationValues();
|
||||
}
|
||||
},
|
||||
|
||||
// 计算滚动视图高度
|
||||
calculateScrollViewHeight() {
|
||||
const safeArea = navigationHelper.getSafeAreaInsets()
|
||||
const bottomInset = safeArea.bottom || 0
|
||||
const inputHeight = 120 // 输入区域高度
|
||||
|
||||
this.scrollViewHeight = `calc(100vh - ${this.navBarHeight + this.statusBarHeight + inputHeight + bottomInset}px)`
|
||||
const safeArea = navigationHelper.getSafeAreaInsets();
|
||||
const bottomInset = safeArea.bottom || 0;
|
||||
const inputHeight = 120;
|
||||
this.scrollViewHeight = `calc(100vh - $ {this.navBarHeight + this.statusBarHeight + inputHeight + bottomInset}px)`;
|
||||
},
|
||||
|
||||
// 备用高度设置
|
||||
setFallbackNavigationValues() {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.navBarHeight = 44
|
||||
this.statusBarHeight = 20
|
||||
this.navBarHeight = 44;
|
||||
this.statusBarHeight = 20;
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
this.navBarHeight = 44
|
||||
this.statusBarHeight = 0
|
||||
this.navBarHeight = 44;
|
||||
this.statusBarHeight = 0;
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
this.navBarHeight = 88
|
||||
this.statusBarHeight = 44
|
||||
this.navBarHeight = 88;
|
||||
this.statusBarHeight = 44;
|
||||
// #endif
|
||||
},
|
||||
|
||||
cleanup() {
|
||||
// 清理事件监听器
|
||||
this.safeEventHandlers.forEach((handler, eventType) => {
|
||||
this.$off(eventType, handler)
|
||||
})
|
||||
this.safeEventHandlers.clear()
|
||||
|
||||
console.log('组件清理完成')
|
||||
this. $off(eventType, handler);
|
||||
});
|
||||
this.safeEventHandlers.clear();
|
||||
console.log('组件清理完成');
|
||||
},
|
||||
|
||||
showError(message) {
|
||||
@@ -290,19 +272,12 @@ export default {
|
||||
title: message,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// 初始化聊天
|
||||
initChat() {
|
||||
// 可以在这里加载历史消息
|
||||
console.log('AI聊天页面初始化')
|
||||
});
|
||||
},
|
||||
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
uni.navigateBack()
|
||||
uni.navigateBack();
|
||||
},
|
||||
|
||||
// 显示菜单
|
||||
@@ -312,59 +287,54 @@ export default {
|
||||
success: (res) => {
|
||||
switch (res.tapIndex) {
|
||||
case 0:
|
||||
this.clearChat()
|
||||
break
|
||||
this.clearChat();
|
||||
break;
|
||||
case 1:
|
||||
this.exportChat()
|
||||
break
|
||||
this.exportChat();
|
||||
break;
|
||||
case 2:
|
||||
this.showSettings()
|
||||
break
|
||||
this.showSettings();
|
||||
break;
|
||||
case 3:
|
||||
this.showHelp()
|
||||
break
|
||||
this.showHelp();
|
||||
break;
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
// 清空聊天
|
||||
clearChat() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要清空聊天记录吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.$refs.chat.clearMessages()
|
||||
// 重新添加欢迎消息
|
||||
this. $refs.chat.clearMessages();
|
||||
this. $refs.chat.addMessage({
|
||||
id: Date.now(),
|
||||
role: 'ai',
|
||||
type: 'text',
|
||||
content: '聊天记录已清空,有什么可以帮助您的吗?',
|
||||
timestamp: Date.now()
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
// 导出聊天记录
|
||||
exportChat() {
|
||||
uni.showToast({
|
||||
title: '功能开发中',
|
||||
icon: 'none'
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
// 显示设置
|
||||
showSettings() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/settings/index'
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
// 显示帮助
|
||||
showHelp() {
|
||||
const helpMessage = {
|
||||
id: Date.now(),
|
||||
@@ -391,27 +361,18 @@ export default {
|
||||
- **复制**: 长按消息可复制内容
|
||||
- **转发**: 支持消息转发功能`,
|
||||
timestamp: Date.now()
|
||||
}
|
||||
this.$refs.chat.addMessage(helpMessage)
|
||||
};
|
||||
this. $refs.chat.addMessage(helpMessage);
|
||||
},
|
||||
|
||||
// 用户发送消息
|
||||
onMessageSent(message) {
|
||||
console.log('用户发送消息:', message)
|
||||
|
||||
// 使用AI服务获取回复
|
||||
// AI聊天组件内部已经集成了AI服务,这里只需要监听事件
|
||||
console.log('用户发送消息:', message);
|
||||
},
|
||||
|
||||
// AI回复消息
|
||||
onAIResponse(message) {
|
||||
console.log('AI回复消息:', message)
|
||||
|
||||
// 可以在这里处理AI回复后的逻辑
|
||||
// 比如记录对话、更新状态等
|
||||
console.log('AI回复消息:', message);
|
||||
},
|
||||
|
||||
// 生成AI回复
|
||||
generateAIResponse(userMessage) {
|
||||
const responses = [
|
||||
'我理解您的需求,让我为您详细解答。',
|
||||
@@ -419,9 +380,9 @@ export default {
|
||||
'根据您的问题,我建议您可以考虑以下几个方面:',
|
||||
'这个问题很常见,让我为您提供一些解决方案。',
|
||||
'我明白您的困惑,让我帮您分析一下。'
|
||||
]
|
||||
];
|
||||
|
||||
const randomResponse = responses[Math.floor(Math.random() * responses.length)]
|
||||
const randomResponse = responses[Math.floor(Math.random() * responses.length)];
|
||||
|
||||
const aiMessage = {
|
||||
id: Date.now(),
|
||||
@@ -433,112 +394,121 @@ export default {
|
||||
{ type: 'like', count: 0 },
|
||||
{ type: 'dislike', count: 0 }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
this.$refs.chat.addMessage(aiMessage)
|
||||
this.$emit('ai-response', aiMessage)
|
||||
this. $refs.chat.addMessage(aiMessage);
|
||||
this. $emit('ai-response', aiMessage);
|
||||
},
|
||||
|
||||
// 操作按钮点击
|
||||
onActionClick({ action, message }) {
|
||||
console.log('操作点击:', action, message)
|
||||
|
||||
switch (action.type) {
|
||||
case 'like':
|
||||
uni.showToast({
|
||||
title: '感谢您的反馈!',
|
||||
icon: 'success'
|
||||
})
|
||||
break
|
||||
uni.showToast({ title: '感谢您的反馈!', icon: 'success' });
|
||||
break;
|
||||
case 'dislike':
|
||||
uni.showToast({
|
||||
title: '我们会改进服务',
|
||||
icon: 'none'
|
||||
})
|
||||
break
|
||||
uni.showToast({ title: '我们会改进服务', icon: 'none' });
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
// 历史消息加载完成
|
||||
onHistoryLoaded(messages) {
|
||||
console.log('历史消息加载完成:', messages.length)
|
||||
console.log('历史消息加载完成:', messages.length);
|
||||
},
|
||||
|
||||
// 文件预览
|
||||
onFilePreview(message) {
|
||||
console.log('文件预览:', message)
|
||||
uni.showToast({
|
||||
title: '打开文件: ' + message.fileName,
|
||||
icon: 'none'
|
||||
})
|
||||
uni.showToast({ title: '打开文件: ' + message.fileName, icon: 'none' });
|
||||
},
|
||||
|
||||
// 音频播放
|
||||
onAudioPlay(message) {
|
||||
console.log('音频播放:', message)
|
||||
console.log('音频播放:', message);
|
||||
},
|
||||
|
||||
// 音频暂停
|
||||
onAudioPause(message) {
|
||||
console.log('音频暂停:', message)
|
||||
console.log('音频暂停:', message);
|
||||
},
|
||||
|
||||
// 视频播放
|
||||
onVideoPlay(message) {
|
||||
console.log('视频播放:', message)
|
||||
console.log('视频播放:', message);
|
||||
},
|
||||
|
||||
// 视频暂停
|
||||
onVideoPause(message) {
|
||||
console.log('视频暂停:', message)
|
||||
console.log('视频暂停:', message);
|
||||
},
|
||||
|
||||
// 链接打开
|
||||
onLinkOpen(message) {
|
||||
console.log('链接打开:', message)
|
||||
uni.showModal({
|
||||
title: '打开链接',
|
||||
content: `确定要打开链接: $ {message.url} 吗?`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// #ifdef H5
|
||||
window.open(message.url, '_blank')
|
||||
window.open(message.url, '_blank');
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
plus.runtime.openURL(message.url)
|
||||
plus.runtime.openURL(message.url);
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
// 商品查看
|
||||
onProductView(message) {
|
||||
console.log('商品查看:', message)
|
||||
uni.showToast({
|
||||
title: '查看商品: ' + message.title,
|
||||
icon: 'none'
|
||||
})
|
||||
uni.showToast({ title: '查看商品: ' + message.title, icon: 'none' });
|
||||
},
|
||||
|
||||
// 输入内容变化
|
||||
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>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
/* 引入图标字体 */
|
||||
@import url('@/common/css/iconfont.css');
|
||||
@import url('/common/css/iconfont.css');
|
||||
|
||||
/* 页面样式 */
|
||||
.ai-chat-page {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #f8f8f8;
|
||||
background-color: white; /* 白色 */
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -553,7 +523,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: white;
|
||||
background-color: #c4e0ff; /* 浅蓝色 */
|
||||
border-bottom: 2rpx solid #eeeeee;
|
||||
|
||||
.header-left {
|
||||
@@ -565,7 +535,7 @@ export default {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #f8f8f8;
|
||||
background-color: #ffffff; /* 白色按钮 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -610,7 +580,7 @@ export default {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #f8f8f8;
|
||||
background-color: #ffffff; /* 白色按钮 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -634,18 +604,11 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 底部tabBar占位样式 */
|
||||
.page-bottom {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
</style>
|
||||
4
site.js
4
site.js
@@ -1,4 +1,4 @@
|
||||
module.exports = {
|
||||
baseUrl: "https://xcx6.aigc-quickapp.com/",//修改域名
|
||||
uniacid: 2811,//后台对应uniacid
|
||||
baseUrl: "https://dev.aigc-quickapp.com/",//修改域名
|
||||
uniacid: 1,//后台对应uniacid
|
||||
};
|
||||
@@ -65,6 +65,7 @@ const store = new Vuex.Store({
|
||||
bottomNavHidden: false, // 底部导航是否隐藏,true:隐藏,false:显示
|
||||
aiUnreadCount: 10, // AI未读消息数量
|
||||
globalAIKefuConfig: null, // AI客服配置
|
||||
customerServiceType: 'ai',
|
||||
globalStoreConfig: null, // 门店配置
|
||||
globalStoreInfo: null, // 门店信息
|
||||
defaultStoreInfo: null, // 默认门店
|
||||
@@ -159,6 +160,9 @@ const store = new Vuex.Store({
|
||||
state.globalAIKefuConfig = value;
|
||||
uni.setStorageSync('globalAIKefuConfig', value); // 初始化数据调用
|
||||
},
|
||||
setCustomerServiceType(state, type) {
|
||||
state.customerServiceType = type;
|
||||
},
|
||||
setGlobalStoreConfig(state, value) {
|
||||
state.globalStoreConfig = value;
|
||||
uni.setStorageSync('globalStoreConfig', value); // 初始化数据调用
|
||||
|
||||
Reference in New Issue
Block a user