Compare commits
55 Commits
047cf765da
...
release/v1
| Author | SHA1 | Date | |
|---|---|---|---|
| 4e480d35df | |||
| bc6d243362 | |||
| a285706112 | |||
| 9c04c031ab | |||
| 0ce929f8a1 | |||
| 61ab9f11bd | |||
| 2747cb49ae | |||
| 9c8ebf8d74 | |||
| e19fef785f | |||
| 92ae114c5c | |||
| b25c366a5b | |||
| 4ad93ceace | |||
| 294856d9ef | |||
| ba2c7d6d64 | |||
| ec9e76fda7 | |||
| 5dba8071e4 | |||
| 19a53ef414 | |||
| e943b11c8f | |||
| e9db54980e | |||
| 3ddcc665b8 | |||
| a981c02baf | |||
| 1c3f759b35 | |||
| bb58866192 | |||
| 069b3c2c07 | |||
| c6fd13956a | |||
| a489e24988 | |||
| 6897fc631b | |||
| 6d23a64aef | |||
| f34533b0c7 | |||
| 72c74f44f0 | |||
| 7f3d9c0f10 | |||
| 37f95e7267 | |||
| d3c630e860 | |||
| c5b57cedeb | |||
| bf24746a7c | |||
| 5ff2925ba1 | |||
| 3dc81e7f53 | |||
| 0417c5c5ed | |||
| b23c21d05b | |||
| 65a24f25bb | |||
| db26a85c8b | |||
| 54c39259a7 | |||
| 15361211b1 | |||
| e301ddc6ec | |||
| a560ad4a5d | |||
| 7f7a18803f | |||
| 42563d7184 | |||
| 14a903f42a | |||
| c9f8614927 | |||
| fe9303bf4c | |||
| e4dfd0ae11 | |||
| 7037d0b083 | |||
| e8a79bd245 | |||
| 2a0935b581 | |||
| b31197a8b4 |
@@ -41,7 +41,13 @@ const localDevConfig = ({
|
|||||||
'local-2': { // 测试平台
|
'local-2': { // 测试平台
|
||||||
uniacid: 2,
|
uniacid: 2,
|
||||||
domain: 'http://localhost:8050/',
|
domain: 'http://localhost:8050/',
|
||||||
|
'47': { // 修改弹窗
|
||||||
|
uniacid: 47,
|
||||||
|
domain: 'https://5g.aigc-quickapp.com/',
|
||||||
},
|
},
|
||||||
})['1']; // 选择要使用的环境配置
|
'2075': { //
|
||||||
|
uniacid: 2075,
|
||||||
|
domain: 'https://xcx.aigc-quickapp.com/',
|
||||||
|
},
|
||||||
|
})['47']; // 选择要使用的环境配置
|
||||||
export default localDevConfig;
|
export default localDevConfig;
|
||||||
@@ -76,6 +76,15 @@ export class CustomerService {
|
|||||||
return config && typeof config === 'object' && config.type;
|
return config && typeof config === 'object' && config.type;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检查是否有有效的客服配置(用于判断是否显示客服按钮)
|
||||||
|
* @returns {Boolean}
|
||||||
|
*/
|
||||||
|
hasValidKefuConfig() {
|
||||||
|
const config = this.getPlatformConfig();
|
||||||
|
return config && typeof config === 'object' && config.type && config.type !== 'none';
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 验证客服配置完整性
|
* 验证客服配置完整性
|
||||||
* @returns {Object} 验证结果
|
* @returns {Object} 验证结果
|
||||||
@@ -453,6 +462,235 @@ export class CustomerService {
|
|||||||
|
|
||||||
return { ...config, openType };
|
return { ...config, openType };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取客服按钮图标
|
||||||
|
* @returns {String} 图标URL
|
||||||
|
*/
|
||||||
|
getKefuButtonIcon() {
|
||||||
|
const shopInfo = this.vm.shopInfo || {};
|
||||||
|
const config = this.getPlatformConfig();
|
||||||
|
|
||||||
|
if (config?.type === 'aikefu') {
|
||||||
|
return shopInfo.aiAgentimg || '';
|
||||||
|
} else if (config?.type === 'wxwork' || config?.type === 'qyweixin') {
|
||||||
|
return shopInfo.aiAgentimg || '';
|
||||||
|
} else if (config?.type === 'third') {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
return shopInfo.kefuimg || this.vm.$util?.getDefaultImage()?.kefu || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 判断是否为微信官方客服
|
||||||
|
* @returns {Boolean}
|
||||||
|
*/
|
||||||
|
isWeappOfficialKefu() {
|
||||||
|
const config = this.getPlatformConfig();
|
||||||
|
return config?.type === 'weapp';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 判断是否为智能客服
|
||||||
|
* @returns {Boolean}
|
||||||
|
*/
|
||||||
|
isAIKefu() {
|
||||||
|
const config = this.getPlatformConfig();
|
||||||
|
return config?.type === 'aikefu';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 判断是否为企业微信客服
|
||||||
|
* @returns {Boolean}
|
||||||
|
*/
|
||||||
|
isWxworkKefu() {
|
||||||
|
const config = this.getPlatformConfig();
|
||||||
|
return config?.type === 'wxwork' || config?.type === 'qyweixin';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 判断是否为第三方客服
|
||||||
|
* @returns {Boolean}
|
||||||
|
*/
|
||||||
|
isThirdKefu() {
|
||||||
|
const config = this.getPlatformConfig();
|
||||||
|
return config?.type === 'third';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 判断是否需要同时显示小程序系统客服
|
||||||
|
* @returns {Boolean}
|
||||||
|
*/
|
||||||
|
shouldShowExtraWeappSystemKefu() {
|
||||||
|
const config = this.getPlatformConfig();
|
||||||
|
return (config?.show_system_service === true || config?.show_system_service === '1') && config?.type !== 'weapp';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 计算容器高度
|
||||||
|
* @param {Boolean} isLanguageSwitchEnabled 是否启用语言切换
|
||||||
|
* @param {Boolean} showWeappSystemKefu 是否显示小程序系统客服
|
||||||
|
* @param {Boolean} fixBtnShow 是否显示按钮
|
||||||
|
* @returns {String} 高度值(px)
|
||||||
|
*/
|
||||||
|
getContainerHeight(isLanguageSwitchEnabled, showWeappSystemKefu, fixBtnShow) {
|
||||||
|
if (!fixBtnShow) return '160px';
|
||||||
|
|
||||||
|
let buttonCount = 1;
|
||||||
|
if (isLanguageSwitchEnabled) buttonCount++;
|
||||||
|
if (showWeappSystemKefu) buttonCount++;
|
||||||
|
|
||||||
|
const totalRpx = 94 * buttonCount - 14;
|
||||||
|
const pxValue = Math.round(totalRpx * 0.5);
|
||||||
|
|
||||||
|
return `${pxValue}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取未读消息数量
|
||||||
|
* @returns {Number}
|
||||||
|
*/
|
||||||
|
getUnreadCount() {
|
||||||
|
return this.vm.$store?.state?.aiUnreadCount || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 拨打电话联系客服
|
||||||
|
* @param {String} phoneNumber 电话号码
|
||||||
|
*/
|
||||||
|
makePhoneCallByNumber(phoneNumber) {
|
||||||
|
if (phoneNumber) {
|
||||||
|
uni.makePhoneCall({ phoneNumber });
|
||||||
|
} else {
|
||||||
|
this.makePhoneCall();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 打开 AI 智能助手
|
||||||
|
*/
|
||||||
|
openAIChat() {
|
||||||
|
try {
|
||||||
|
if (typeof this.vm.setAiUnreadCount === 'function') {
|
||||||
|
this.vm.setAiUnreadCount(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
const aiChatUrl = '/pages_tool/ai-chat/index';
|
||||||
|
|
||||||
|
uni.navigateTo({
|
||||||
|
url: aiChatUrl,
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('跳转 AI 客服失败:', err);
|
||||||
|
// #ifdef H5
|
||||||
|
window.location.href = aiChatUrl;
|
||||||
|
// #endif
|
||||||
|
uni.showToast({ title: '打开客服失败', icon: 'none' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error('跳转 AI 客服异常:', e);
|
||||||
|
uni.showToast({ title: '打开客服失败', icon: 'none' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 打开客服选择对话框(预留方法)
|
||||||
|
*/
|
||||||
|
openCustomerSelectPopupDialog() {
|
||||||
|
uni.showToast({ title: '客服选择功能开发中', icon: 'none' });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 打开客服选择弹出层(ActionSheet)
|
||||||
|
* @param {Array} kefuList 客服列表
|
||||||
|
*/
|
||||||
|
openKefuSelectPopup(kefuList) {
|
||||||
|
const kefuNames = kefuList.map(item => item.name);
|
||||||
|
uni.showActionSheet({
|
||||||
|
itemList: kefuNames,
|
||||||
|
success: (res) => {
|
||||||
|
const selectedKefu = kefuList[res.tapIndex];
|
||||||
|
const cs = createCustomerService(this.vm, selectedKefu);
|
||||||
|
|
||||||
|
if (selectedKefu.isOfficial) {
|
||||||
|
uni.openCustomerServiceConversation({
|
||||||
|
sessionFrom: 'weapp',
|
||||||
|
showMessageCard: true
|
||||||
|
});
|
||||||
|
} else if (selectedKefu.id === 'qyweixin-kefu') {
|
||||||
|
if (uni.getSystemInfoSync().platform === 'wechat') {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages_tool/qyweixin-kefu/index'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const qyweixinUrl = this.vm.shopInfo?.qyweixinUrl;
|
||||||
|
if (qyweixinUrl) {
|
||||||
|
window.location.href = qyweixinUrl;
|
||||||
|
} else {
|
||||||
|
uni.showToast({ title: '企业微信客服未配置', icon: 'none' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
cs.handleCustomerClick();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 核心方法:统一客服入口(带验证和配置检查)
|
||||||
|
* @param {Object} options 选项参数
|
||||||
|
*/
|
||||||
|
handleUnifiedKefuClick(options = {}) {
|
||||||
|
const validation = this.validateConfig();
|
||||||
|
|
||||||
|
console.log('【客服配置验证】', validation);
|
||||||
|
|
||||||
|
if (!validation.isValid) {
|
||||||
|
console.error('客服配置无效:', validation.errors);
|
||||||
|
uni.showToast({ title: '客服暂不可用', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (validation.warnings.length > 0) {
|
||||||
|
console.warn('客服配置警告:', validation.warnings);
|
||||||
|
}
|
||||||
|
|
||||||
|
const platformConfig = this.getPlatformConfig();
|
||||||
|
console.log('【当前客服配置】', platformConfig);
|
||||||
|
|
||||||
|
// 检查企业微信配置
|
||||||
|
if (platformConfig.type === 'wxwork') {
|
||||||
|
const wxworkConfig = this.getWxworkConfig();
|
||||||
|
console.log('【企业微信配置】', wxworkConfig);
|
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
if (!wxworkConfig?.enable || !wxworkConfig?.contact_url) {
|
||||||
|
console.warn('企业微信配置不完整,使用原生客服');
|
||||||
|
uni.showToast({ title: '企业微信配置不完整', icon: 'none' });
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
|
if (!wxworkConfig?.contact_url && !platformConfig.wxwork_url) {
|
||||||
|
console.error('企业微信链接未配置');
|
||||||
|
uni.showToast({ title: '企业微信链接未配置', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
|
||||||
|
// 直接调用统一处理方法,由 CustomerService 内部根据配置路由
|
||||||
|
try {
|
||||||
|
this.handleCustomerClick({
|
||||||
|
sendMessageTitle: options.sendMessageTitle || '来自悬浮按钮的咨询',
|
||||||
|
sendMessagePath: options.sendMessagePath || '/pages/index/index'
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('客服处理失败:', error);
|
||||||
|
uni.showToast({ title: '打开客服失败', icon: 'none' });
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -54,6 +54,14 @@ function loadLangPackSync(lang, path) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获得当前本地语言
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
function getCurrentLocale() {
|
||||||
|
return uni.getStorageSync('lang') || "zh-cn";
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
langList: langConfig.langList,
|
langList: langConfig.langList,
|
||||||
|
|
||||||
@@ -61,9 +69,7 @@ export default {
|
|||||||
* 获得当前本地语言
|
* 获得当前本地语言
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
getCurrentLocale() {
|
getCurrentLocale,
|
||||||
return uni.getStorageSync('lang') || "zh-cn";
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* * 解析多语言
|
* * 解析多语言
|
||||||
@@ -73,7 +79,7 @@ export default {
|
|||||||
let _page = getCurrentPages()[getCurrentPages().length - 1];
|
let _page = getCurrentPages()[getCurrentPages().length - 1];
|
||||||
if (!_page) return;
|
if (!_page) return;
|
||||||
|
|
||||||
const locale = this.getCurrentLocale(); // 获得当前本地语言
|
const locale = getCurrentLocale(); // 获得当前本地语言
|
||||||
|
|
||||||
let value = ''; // 存放解析后的语言值
|
let value = ''; // 存放解析后的语言值
|
||||||
let langPath = ''; // 存放当前页面语言包路径
|
let langPath = ''; // 存放当前页面语言包路径
|
||||||
@@ -141,7 +147,7 @@ export default {
|
|||||||
if (!_page) return;
|
if (!_page) return;
|
||||||
|
|
||||||
uni.setStorageSync("lang", value);
|
uni.setStorageSync("lang", value);
|
||||||
const locale = this.getCurrentLocale();
|
const locale = getCurrentLocale();
|
||||||
|
|
||||||
// 清空已加载的语言包缓存
|
// 清空已加载的语言包缓存
|
||||||
for (let key in loadedLangPacks) {
|
for (let key in loadedLangPacks) {
|
||||||
@@ -161,7 +167,7 @@ export default {
|
|||||||
let _page = getCurrentPages()[getCurrentPages().length - 1];
|
let _page = getCurrentPages()[getCurrentPages().length - 1];
|
||||||
if (!_page) return;
|
if (!_page) return;
|
||||||
|
|
||||||
const locale = this.getCurrentLocale();
|
const locale = getCurrentLocale();
|
||||||
|
|
||||||
this.title(this.lang("title"));
|
this.title(this.lang("title"));
|
||||||
|
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="video-info">
|
<view class="video-info">
|
||||||
<!-- 视频标题,支持多行显示控制 -->
|
<!-- 视频标题,支持多行显示控制 -->
|
||||||
<view class="video-title" :style="{ '--title-line-clamp': titleLineClamp }">{{ value.videoTitle }}
|
<view class="video-title" :style="[{ '--title-line-clamp': titleLineClamp }]">{{ value.videoTitle }}
|
||||||
</view>
|
</view>
|
||||||
<!-- 视频统计信息 -->
|
<!-- 视频统计信息 -->
|
||||||
<view class="video-stats" v-if="showViewCount && value.showViewCount">{{ value.viewCount }}次观看</view>
|
<view class="video-stats" v-if="showViewCount && value.showViewCount">{{ value.viewCount }}次观看</view>
|
||||||
@@ -34,7 +34,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="video-info">
|
<view class="video-info">
|
||||||
<!-- 视频标题,支持多行显示控制 -->
|
<!-- 视频标题,支持多行显示控制 -->
|
||||||
<view class="video-title" :style="{ '--title-line-clamp': titleLineClamp }">{{ value.videoTitle }}
|
<view class="video-title" :style="[{ '--title-line-clamp': titleLineClamp }]">{{ value.videoTitle }}
|
||||||
</view>
|
</view>
|
||||||
<!-- 视频统计信息,非列表模式下显示 -->
|
<!-- 视频统计信息,非列表模式下显示 -->
|
||||||
<view class="video-stats" v-if="showViewCount && value.showViewCount && !listMode">{{ value.viewCount }}次观看</view>
|
<view class="video-stats" v-if="showViewCount && value.showViewCount && !listMode">{{ value.viewCount }}次观看</view>
|
||||||
|
|||||||
@@ -317,7 +317,12 @@ export default {
|
|||||||
this.diyGlobalData.value.forEach((item, index) => {
|
this.diyGlobalData.value.forEach((item, index) => {
|
||||||
item.pageStyle = '';
|
item.pageStyle = '';
|
||||||
// 给每个组件增加位置属性,用于定位,搜索、分类导航等定位
|
// 给每个组件增加位置属性,用于定位,搜索、分类导航等定位
|
||||||
|
// 如果是Tab组件内部的子组件,添加tabIndex前缀避免moduleIndex冲突
|
||||||
|
if (this.diyData.tabIndex !== undefined) {
|
||||||
|
item.moduleIndex = `${this.diyData.tabIndex}-${index + 1}`;
|
||||||
|
} else {
|
||||||
item.moduleIndex = index + 1;
|
item.moduleIndex = index + 1;
|
||||||
|
}
|
||||||
|
|
||||||
// 特殊处理搜索框 当显示位置为滚动至顶部固定时,只设置背景颜色
|
// 特殊处理搜索框 当显示位置为滚动至顶部固定时,只设置背景颜色
|
||||||
if (item.componentName == 'Search' && item.positionWay == 'fixed') {
|
if (item.componentName == 'Search' && item.positionWay == 'fixed') {
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,41 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<view v-if="pageCount == 1 || need" class="fixed-box"
|
<view v-if="pageCount === 1 || need" class="fixed-box"
|
||||||
:style="[customContainerStyle, {
|
:style="[customContainerStyle, {
|
||||||
height: containerHeight,
|
height: containerHeight,
|
||||||
backgroundImage: bgUrl ? `url(${bgUrl})` : '',
|
backgroundImage: bgUrl ? `url(${bgUrl})` : '',
|
||||||
backgroundSize: 'cover'
|
backgroundSize: 'cover'
|
||||||
}]">
|
}]">
|
||||||
|
|
||||||
<!-- ✅ 统一客服入口(根据后台配置自动适配 AI / 企业微信 / 第三方等) -->
|
|
||||||
<!-- 微信官方客服需要使用 button open-type="contact" -->
|
|
||||||
<button
|
|
||||||
v-if="fixBtnShow && isWeappOfficialKefu"
|
|
||||||
class="btn-item common-bg"
|
|
||||||
open-type="contact"
|
|
||||||
:style="{ backgroundImage: currentKefuImg ? `url( $ {currentKefuImg})` : '', backgroundSize: '100% 100%' }"
|
|
||||||
>
|
|
||||||
<text class="ai-icon" v-if="!currentKefuImg">🤖</text>
|
|
||||||
</button>
|
|
||||||
<!-- 其他类型客服使用普通 view -->
|
|
||||||
<view
|
|
||||||
v-else-if="fixBtnShow"
|
|
||||||
class="btn-item common-bg"
|
|
||||||
@click="handleUnifiedKefuClick"
|
|
||||||
:style="{ backgroundImage: currentKefuImg ? `url( $ {currentKefuImg})` : '', backgroundSize: '100% 100%' }"
|
|
||||||
>
|
|
||||||
<text class="ai-icon" v-if="!currentKefuImg">🤖</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- ✅ 新增:小程序系统客服按钮(当附加设置开启时显示) -->
|
|
||||||
<button
|
|
||||||
v-if="fixBtnShow && showWeappSystemKefu"
|
|
||||||
class="btn-item common-bg"
|
|
||||||
open-type="contact"
|
|
||||||
:style="{ backgroundImage: currentKefuImg ? `url( $ {currentKefuImg})` : '', backgroundSize: '100% 100%' }"
|
|
||||||
>
|
|
||||||
<text class="ai-icon" v-if="!currentKefuImg">💬</text>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- 中英文切换按钮 -->
|
<!-- 中英文切换按钮 -->
|
||||||
<view
|
<view
|
||||||
v-if="isLanguageSwitchEnabled && fixBtnShow"
|
v-if="isLanguageSwitchEnabled && fixBtnShow"
|
||||||
@@ -44,12 +13,57 @@
|
|||||||
>
|
>
|
||||||
<text>{{ currentLangDisplayName }}</text>
|
<text>{{ currentLangDisplayName }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 微信官方客服按钮-->
|
||||||
|
<button
|
||||||
|
v-if="fixBtnShow && hasValidKefuConfig && isWeappOfficialKefu"
|
||||||
|
class="btn-item common-bg"
|
||||||
|
open-type="contact"
|
||||||
|
:style="{ backgroundImage: currentKefuImg ? `url(${currentKefuImg})` : '', backgroundSize: '100% 100%' }"
|
||||||
|
>
|
||||||
|
<text class="icox icox-kefu" v-if="!kefuimg"></text>
|
||||||
|
</button>
|
||||||
|
|
||||||
<!-- 电话按钮(始终显示) -->
|
<!-- 其他类型客服按钮(智能客服、企业微信等)-->
|
||||||
|
<view
|
||||||
|
v-if="fixBtnShow && hasValidKefuConfig && !isWeappOfficialKefu && !showWeappSystemKefu"
|
||||||
|
class="btn-item common-bg"
|
||||||
|
@click="handleUnifiedKefuClick"
|
||||||
|
:style="{ backgroundImage: currentKefuImg ? `url(${currentKefuImg})` : '', backgroundSize: '100% 100%' }"
|
||||||
|
>
|
||||||
|
<text class="ai-icon" v-if="isAIKefu && !currentKefuImg">🤖</text>
|
||||||
|
<text class="ai-icon" v-if="isWxworkKefu && !currentKefuImg">💬</text>
|
||||||
|
<text class="ai-icon" v-if="!isAIKefu && !isWxworkKefu && !currentKefuImg">👤</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 智能客服按钮(当同时显示小程序系统客服时)-->
|
||||||
|
<view
|
||||||
|
v-if="fixBtnShow && hasValidKefuConfig && !isWeappOfficialKefu && showWeappSystemKefu"
|
||||||
|
class="btn-item common-bg"
|
||||||
|
@click="handleUnifiedKefuClick"
|
||||||
|
:style="{ backgroundImage: currentKefuImg ? `url(${currentKefuImg})` : '', backgroundSize: '100% 100%' }"
|
||||||
|
>
|
||||||
|
<text class="ai-icon" v-if="isAIKefu && !currentKefuImg">🤖</text>
|
||||||
|
<text class="ai-icon" v-if="isWxworkKefu && !currentKefuImg">💬</text>
|
||||||
|
<text class="ai-icon" v-if="!isAIKefu && !isWxworkKefu && !currentKefuImg">👤</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 小程序系统客服按钮 -->
|
||||||
|
<button
|
||||||
|
v-if="fixBtnShow && hasValidKefuConfig && showWeappSystemKefu"
|
||||||
|
class="btn-item common-bg"
|
||||||
|
open-type="contact"
|
||||||
|
:style="{ backgroundImage: currentKefuImg ? `url(${currentKefuImg})` : '', backgroundSize: '100% 100%' }"
|
||||||
|
>
|
||||||
|
<text class="icox icox-kefu" v-if="!kefuimg"></text>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 电话按钮 -->
|
||||||
<view
|
<view
|
||||||
v-if="fixBtnShow"
|
v-if="fixBtnShow"
|
||||||
class="btn-item common-bg"
|
class="btn-item common-bg"
|
||||||
@click="call()"
|
@click="call"
|
||||||
:style="[{ backgroundImage: phoneimg ? `url(${phoneimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]"
|
:style="[{ backgroundImage: phoneimg ? `url(${phoneimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]"
|
||||||
>
|
>
|
||||||
<text class="iconfont icon-dianhua" v-if="!phoneimg"></text>
|
<text class="iconfont icon-dianhua" v-if="!phoneimg"></text>
|
||||||
@@ -73,12 +87,7 @@ export default {
|
|||||||
shopInfo: null,
|
shopInfo: null,
|
||||||
currentLangIndex: 0,
|
currentLangIndex: 0,
|
||||||
langIndexMap: {},
|
langIndexMap: {},
|
||||||
kefuList: [
|
customerService: null,
|
||||||
{ id: 'weixin-official', name: '微信官方客服', isOfficial: true, type: 'weapp' },
|
|
||||||
{ id: 'custom-kefu', name: '自定义在线客服', isOfficial: false, type: 'custom' },
|
|
||||||
{ id: 'qyweixin-kefu', name: '企业微信客服', isOfficial: false, type: 'qyweixin' }
|
|
||||||
],
|
|
||||||
selectedKefu: null,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -111,39 +120,36 @@ export default {
|
|||||||
return this.shopInfo?.floatingButton?.button || {};
|
return this.shopInfo?.floatingButton?.button || {};
|
||||||
},
|
},
|
||||||
unreadCount() {
|
unreadCount() {
|
||||||
return this. $store.state.aiUnreadCount || 0;
|
const customerService = createCustomerService(this);
|
||||||
|
return customerService.getUnreadCount();
|
||||||
},
|
},
|
||||||
|
|
||||||
// ✅ 新增:根据当前客服类型动态返回图标
|
|
||||||
currentKefuImg() {
|
currentKefuImg() {
|
||||||
if (!this.shopInfo) return '';
|
|
||||||
|
|
||||||
const customerService = createCustomerService(this);
|
const customerService = createCustomerService(this);
|
||||||
const config = customerService.getPlatformConfig();
|
return customerService.getKefuButtonIcon();
|
||||||
|
|
||||||
if (config?.type === 'aikefu') {
|
|
||||||
return this.aiAgentimg;
|
|
||||||
} else if (config?.type === 'wxwork' || config?.type === 'qyweixin') {
|
|
||||||
// 企业微信客服专用图标
|
|
||||||
return this.aiAgentimg;
|
|
||||||
}
|
|
||||||
// 默认客服图标
|
|
||||||
return this.kefuimg;
|
|
||||||
},
|
},
|
||||||
// ✅ 新增:判断是否为微信官方客服
|
|
||||||
isWeappOfficialKefu() {
|
isWeappOfficialKefu() {
|
||||||
if (!this.shopInfo) return false;
|
|
||||||
const customerService = createCustomerService(this);
|
const customerService = createCustomerService(this);
|
||||||
const config = customerService.getPlatformConfig();
|
return customerService.isWeappOfficialKefu();
|
||||||
return config?.type === 'weapp';
|
|
||||||
},
|
},
|
||||||
// ✅ 新增:判断是否需要同时显示小程序系统客服
|
isAIKefu() {
|
||||||
showWeappSystemKefu() {
|
|
||||||
if (!this.shopInfo) return false;
|
|
||||||
const customerService = createCustomerService(this);
|
const customerService = createCustomerService(this);
|
||||||
const config = customerService.getPlatformConfig();
|
return customerService.isAIKefu();
|
||||||
// 检查附加设置是否开启了同时显示小程序系统客服,且当前客服类型不是小程序系统客服
|
},
|
||||||
return (config?.show_system_service === true || config?.show_system_service === '1') && config?.type !== 'weapp';
|
isWxworkKefu() {
|
||||||
|
const customerService = createCustomerService(this);
|
||||||
|
return customerService.isWxworkKefu();
|
||||||
|
},
|
||||||
|
isThirdKefu() {
|
||||||
|
const customerService = createCustomerService(this);
|
||||||
|
return customerService.isThirdKefu();
|
||||||
|
},
|
||||||
|
showWeappSystemKefu() {
|
||||||
|
const customerService = createCustomerService(this);
|
||||||
|
return customerService.shouldShowExtraWeappSystemKefu();
|
||||||
|
},
|
||||||
|
hasValidKefuConfig() {
|
||||||
|
const customerService = createCustomerService(this);
|
||||||
|
return customerService.hasValidKefuConfig();
|
||||||
},
|
},
|
||||||
//根据显示的按钮数量动态计算容器高度
|
//根据显示的按钮数量动态计算容器高度
|
||||||
containerHeight() {
|
containerHeight() {
|
||||||
@@ -162,7 +168,6 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
shopInfo: {
|
shopInfo: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
// 可在此添加额外逻辑(如埋点、通知等),当前无需操作
|
|
||||||
},
|
},
|
||||||
immediate: true
|
immediate: true
|
||||||
}
|
}
|
||||||
@@ -170,7 +175,6 @@ export default {
|
|||||||
created() {
|
created() {
|
||||||
this.initLanguage();
|
this.initLanguage();
|
||||||
this.pageCount = getCurrentPages().length;
|
this.pageCount = getCurrentPages().length;
|
||||||
|
|
||||||
uni.getStorage({
|
uni.getStorage({
|
||||||
key: 'shopInfo',
|
key: 'shopInfo',
|
||||||
success: (e) => {
|
success: (e) => {
|
||||||
@@ -181,6 +185,8 @@ export default {
|
|||||||
console.warn('未获取到 shopInfo,使用默认设置');
|
console.warn('未获取到 shopInfo,使用默认设置');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
// 初始化 customerService 实例
|
||||||
|
this.customerService = createCustomerService(this);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initLanguage() {
|
initLanguage() {
|
||||||
@@ -189,7 +195,7 @@ export default {
|
|||||||
for (let i = 0; i < this.langList.length; i++) {
|
for (let i = 0; i < this.langList.length; i++) {
|
||||||
this.langIndexMap[i] = this.langList[i].value;
|
this.langIndexMap[i] = this.langList[i].value;
|
||||||
}
|
}
|
||||||
const savedLang = uni.getStorageSync('lang');
|
const savedLang = this.$langConfig.getCurrentLocale();
|
||||||
if (savedLang) {
|
if (savedLang) {
|
||||||
for (let i = 0; i < this.langList.length; i++) {
|
for (let i = 0; i < this.langList.length; i++) {
|
||||||
if (this.langList[i].value === savedLang) {
|
if (this.langList[i].value === savedLang) {
|
||||||
@@ -201,118 +207,37 @@ export default {
|
|||||||
this.currentLangIndex = 0;
|
this.currentLangIndex = 0;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
call() {
|
call() {
|
||||||
if (this.tel) {
|
this.customerService.makePhoneCallByNumber(this.tel);
|
||||||
uni.makePhoneCall({ phoneNumber: this.tel + '' });
|
|
||||||
} else {
|
|
||||||
uni.showToast({ title: '暂无联系电话', icon: 'none' });
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleLanguage() {
|
toggleLanguage() {
|
||||||
this.currentLangIndex = this.currentLangIndex === 0 ? 1 : 0;
|
this.currentLangIndex = this.currentLangIndex === 0 ? 1 : 0;
|
||||||
const targetLang = this.langIndexMap[this.currentLangIndex];
|
const targetLang = this.langIndexMap[this.currentLangIndex];
|
||||||
this. $langConfig.change(targetLang);
|
|
||||||
|
|
||||||
if (uni.getSystemInfoSync().platform === 'browser') {
|
uni.setStorageSync("lang", targetLang);
|
||||||
setTimeout(() => {
|
|
||||||
window.location.reload();
|
const pages = getCurrentPages();
|
||||||
}, 100);
|
const currentPage = pages[pages.length - 1];
|
||||||
}
|
const currentRoute = currentPage.route;
|
||||||
|
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/' + currentRoute
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
// ✅ 核心方法:统一客服入口
|
|
||||||
handleUnifiedKefuClick() {
|
handleUnifiedKefuClick() {
|
||||||
const customerService = createCustomerService(this);
|
this.customerService.handleUnifiedKefuClick({
|
||||||
const validation = customerService.validateConfig();
|
|
||||||
|
|
||||||
console.log('【客服配置验证】', validation);
|
|
||||||
|
|
||||||
if (!validation.isValid) {
|
|
||||||
console.error('客服配置无效:', validation.errors);
|
|
||||||
uni.showToast({ title: '客服暂不可用', icon: 'none' });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (validation.warnings.length > 0) {
|
|
||||||
console.warn('客服配置警告:', validation.warnings);
|
|
||||||
}
|
|
||||||
|
|
||||||
const platformConfig = customerService.getPlatformConfig();
|
|
||||||
console.log('【当前客服配置】', platformConfig);
|
|
||||||
|
|
||||||
// 检查企业微信配置
|
|
||||||
if (platformConfig.type === 'wxwork') {
|
|
||||||
const wxworkConfig = customerService.getWxworkConfig();
|
|
||||||
console.log('【企业微信配置】', wxworkConfig);
|
|
||||||
|
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
if (!wxworkConfig?.enable || !wxworkConfig?.contact_url) {
|
|
||||||
console.warn('企业微信配置不完整,使用原生客服');
|
|
||||||
uni.showToast({ title: '企业微信配置不完整', icon: 'none' });
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef H5
|
|
||||||
if (!wxworkConfig?.contact_url && !platformConfig.wxwork_url) {
|
|
||||||
console.error('企业微信链接未配置');
|
|
||||||
uni.showToast({ title: '企业微信链接未配置', icon: 'none' });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
|
|
||||||
// 直接调用统一处理方法,由 CustomerService 内部根据配置路由
|
|
||||||
try {
|
|
||||||
customerService.handleCustomerClick({
|
|
||||||
sendMessageTitle: '来自悬浮按钮的咨询',
|
sendMessageTitle: '来自悬浮按钮的咨询',
|
||||||
sendMessagePath: '/pages/index/index'
|
sendMessagePath: '/pages/index/index'
|
||||||
});
|
});
|
||||||
} catch (error) {
|
|
||||||
console.error('客服处理失败:', error);
|
|
||||||
uni.showToast({ title: '打开客服失败', icon: 'none' });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 以下方法保留用于 actionSheet(如仍需手动选择)
|
|
||||||
openKefuSelectPopup() {
|
|
||||||
const kefuNames = this.kefuList.map(item => item.name);
|
|
||||||
uni.showActionSheet({
|
|
||||||
itemList: kefuNames,
|
|
||||||
success: (res) => {
|
|
||||||
this.selectedKefu = this.kefuList[res.tapIndex];
|
|
||||||
const cs = createCustomerService(this, this.selectedKefu);
|
|
||||||
if (this.selectedKefu.isOfficial) {
|
|
||||||
uni.openCustomerServiceConversation({
|
|
||||||
sessionFrom: 'weapp',
|
|
||||||
showMessageCard: true
|
|
||||||
});
|
|
||||||
} else if (this.selectedKefu.id === 'qyweixin-kefu') {
|
|
||||||
// 处理企业微信客服
|
|
||||||
if (uni.getSystemInfoSync().platform === 'wechat') {
|
|
||||||
// 小程序端:跳转到企业微信客服
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages_tool/qyweixin-kefu/index'
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// H5端:跳转到企业微信链接
|
|
||||||
const qyweixinUrl = this.shopInfo.qyweixinUrl; // 后端返回的企业微信链接
|
|
||||||
if (qyweixinUrl) {
|
|
||||||
window.location.href = qyweixinUrl;
|
|
||||||
} else {
|
|
||||||
uni.showToast({ title: '企业微信客服未配置', icon: 'none' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
cs.handleCustomerClick();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss" scoped>
|
||||||
.fixed-box {
|
.fixed-box {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0rpx;
|
right: 0rpx;
|
||||||
@@ -333,16 +258,25 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-item {
|
.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: 50%;
|
||||||
width: 80rpx;
|
width: 80rpx;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
background: #fff;
|
padding: 0;
|
||||||
border-radius: 50%;
|
overflow: hidden;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 14rpx 0;
|
|
||||||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.common-bg {
|
||||||
|
background-color: var(--hover-nav-bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
.btn-item text {
|
.btn-item text {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
}
|
}
|
||||||
@@ -357,7 +291,6 @@ export default {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 14rpx 0;
|
margin: 14rpx 0;
|
||||||
background: #fff;
|
|
||||||
border-radius: 50rpx;
|
border-radius: 50rpx;
|
||||||
width: 80rpx;
|
width: 80rpx;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
@@ -371,22 +304,6 @@ export default {
|
|||||||
font-weight: bold;
|
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 {
|
.ai-icon {
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -158,22 +158,48 @@ export default {
|
|||||||
success: (res) => {
|
success: (res) => {
|
||||||
// console.log(res)
|
// console.log(res)
|
||||||
if (res.needAuthorization) {
|
if (res.needAuthorization) {
|
||||||
|
// 检查本地存储中是否已经同意过隐私政策
|
||||||
|
const privacyAgreed = uni.getStorageSync('privacyAgreed');
|
||||||
|
if (!privacyAgreed) {
|
||||||
this.popUp()
|
this.popUp()
|
||||||
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
|
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
|
||||||
this.closeOtherPagePopUp(this.disPopUp)
|
this.closeOtherPagePopUp(this.disPopUp)
|
||||||
} else {
|
} else {
|
||||||
this.$emit('agree')
|
this.$emit('agree')
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
this.$emit('agree')
|
||||||
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.$emit('agree')
|
// 检查本地存储中是否已经同意过隐私政策
|
||||||
|
const privacyAgreed = uni.getStorageSync('privacyAgreed');
|
||||||
|
if (privacyAgreed) {
|
||||||
|
this.$emit('agree');
|
||||||
|
} else {
|
||||||
|
this.popUp()
|
||||||
|
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
|
||||||
|
this.closeOtherPagePopUp(this.disPopUp)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
// #ifdef QUICKAPP-WEBVIEW
|
// #ifdef QUICKAPP-WEBVIEW
|
||||||
this.getPrivacySettingByQuickApp();
|
this.getPrivacySettingByQuickApp();
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef H5 || WEB
|
||||||
|
// 检查本地存储中是否已经同意过隐私政策
|
||||||
|
const privacyAgreed = uni.getStorageSync('privacyAgreed');
|
||||||
|
if (privacyAgreed) {
|
||||||
|
this.$emit('agree');
|
||||||
|
} else {
|
||||||
|
this.popUp()
|
||||||
|
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
|
||||||
|
this.closeOtherPagePopUp(this.disPopUp)
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
},
|
},
|
||||||
//初始化监听程序
|
//初始化监听程序
|
||||||
curPageShow() {
|
curPageShow() {
|
||||||
@@ -261,6 +287,8 @@ export default {
|
|||||||
this.privacyResolves.clear()
|
this.privacyResolves.clear()
|
||||||
//关闭弹窗
|
//关闭弹窗
|
||||||
this.disPopUp()
|
this.disPopUp()
|
||||||
|
// 保存用户授权状态到本地存储,无论同意还是不同意,都不再重复弹出
|
||||||
|
uni.setStorageSync('privacyAgreed', true);
|
||||||
//退出小程序
|
//退出小程序
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
content: '未同意隐私协议,无法使用相关功能',
|
content: '未同意隐私协议,无法使用相关功能',
|
||||||
@@ -281,10 +309,8 @@ export default {
|
|||||||
//关闭弹窗
|
//关闭弹窗
|
||||||
this.disPopUp()
|
this.disPopUp()
|
||||||
|
|
||||||
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB
|
// 保存用户授权状态到本地存储,用于所有环境
|
||||||
// 保存用户授权状态到本地存储,用于快应用Webview组件中的H5方式处理
|
|
||||||
uni.setStorageSync('privacyAgreed', true);
|
uni.setStorageSync('privacyAgreed', true);
|
||||||
// #endif
|
|
||||||
this.$emit('agree')
|
this.$emit('agree')
|
||||||
},
|
},
|
||||||
//打开弹窗
|
//打开弹窗
|
||||||
|
|||||||
@@ -104,7 +104,7 @@
|
|||||||
},
|
},
|
||||||
"router" : {
|
"router" : {
|
||||||
"mode" : "history",
|
"mode" : "history",
|
||||||
"base" : "/hwappx/2811/"
|
"base" : "/hwappx/common/"
|
||||||
},
|
},
|
||||||
"title" : "",
|
"title" : "",
|
||||||
"devServer" : {
|
"devServer" : {
|
||||||
|
|||||||
12
pages.json
12
pages.json
@@ -321,6 +321,12 @@
|
|||||||
"navigationBarTitleText": "AI 客服"
|
"navigationBarTitleText": "AI 客服"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "agreement/contenr",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": ""
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "vr/index",
|
"path": "vr/index",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -919,6 +925,12 @@
|
|||||||
// #endif
|
// #endif
|
||||||
"navigationBarTitleText": "查看文件"
|
"navigationBarTitleText": "查看文件"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "file-preview/file-preview",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "文件预览"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
}}</view>
|
}}</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="safeBgUrl"
|
<diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="bgUrl"
|
||||||
:scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page">
|
:scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page">
|
||||||
<template v-slot:components>
|
<template v-slot:components>
|
||||||
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"
|
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"
|
||||||
@@ -29,7 +29,7 @@
|
|||||||
</diy-index-page>
|
</diy-index-page>
|
||||||
|
|
||||||
<view v-else class="bg-index"
|
<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"
|
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"
|
||||||
:followOfficialAccount="followOfficialAccount" />
|
:followOfficialAccount="followOfficialAccount" />
|
||||||
<ns-copyright v-show="isShowCopyRight" />
|
<ns-copyright v-show="isShowCopyRight" />
|
||||||
@@ -46,7 +46,7 @@
|
|||||||
:src="$util.img(item.imageUrl)" width="100%"></image>
|
:src="$util.img(item.imageUrl)" width="100%"></image>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</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>
|
<i class="iconfont icon-round-close" style="color:#fff"></i>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -114,7 +114,27 @@
|
|||||||
</view>
|
</view>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<hover-nav :need="true"></hover-nav>
|
<hover-nav :need="true"></hover-nav>
|
||||||
|
|
||||||
|
<!-- 隐私协议弹窗 UI (新增) -->
|
||||||
|
<view v-if="showPrivacyModal" class="privacy-modal-mask" @touchmove.prevent>
|
||||||
|
<view class="privacy-modal-container">
|
||||||
|
<view class="modal-header">用户隐私保护提示</view>
|
||||||
|
<view class="modal-body">
|
||||||
|
<text>感谢您使用本应用,在使用前您应当阅读并同意</text>
|
||||||
|
<text class="link" @click="viewPrivacy('privacy')">《隐私条款》</text>
|
||||||
|
<text class="link" @click="viewPrivacy('agreement')">《用户服务协议》</text>
|
||||||
|
<text>,当点击同意并继续时,即表示您已理解并同意该条款内容,该条款将对您产生法律约束力;如您不同意,将无法继续使用相关功能。</text>
|
||||||
|
</view>
|
||||||
|
<view class="modal-footer">
|
||||||
|
<view class="btn btn-disagree" @click="handleDisagree">不同意</view>
|
||||||
|
<view class="btn btn-agree" @click="handleAgree">同意并继续</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 隐私协议组件 (原有) -->
|
||||||
<privacy-popup ref="privacyPopup"></privacy-popup>
|
<privacy-popup ref="privacyPopup"></privacy-popup>
|
||||||
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
|
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
|
||||||
<ns-login ref="login"></ns-login>
|
<ns-login ref="login"></ns-login>
|
||||||
@@ -129,37 +149,124 @@ import indexJs from './public/js/index.js';
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [diyJs, scroll, indexJs],
|
mixins: [diyJs, scroll, indexJs],
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
diyData: { global: {}, value: null },
|
minScrollTop: 100,
|
||||||
followOfficialAccount: {},
|
|
||||||
wechatQrcode: '',
|
wechatQrcode: '',
|
||||||
adv: { advshow: -1, list: [] },
|
diyRoute: '/pages/index/index',
|
||||||
// ❌ 不要定义 siteInfo、bgUrl,除非你明确知道它们不会冲突
|
showPrivacyModal: false // 新增:控制隐私弹窗显示
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
onLoad(option) {
|
||||||
computed: {
|
// #ifdef H5
|
||||||
// ✅ 安全获取 bgUrl(用于 diy-index-page 的 prop)
|
if (option.module && option.module == 'locationPicker') {
|
||||||
safeBgUrl() {
|
option.name = '';
|
||||||
// 优先取全局配置中的 bgUrl,没有则用组件自己的 bgUrl(如有),否则为空
|
}
|
||||||
return this.diyData?.global?.bgUrl || this.bgUrl || '';
|
// #endif
|
||||||
|
this.name = option.name || 'DIY_VIEW_INDEX';
|
||||||
},
|
},
|
||||||
|
onShow() {
|
||||||
// ✅ 安全生成 background-image 样式字符串(用于 fallback 区域)
|
this.getFollowQrcode();
|
||||||
backgroundUrlStyle() {
|
// 页面显示时检查隐私设置
|
||||||
const url = this.diyData?.global?.bgUrl || this.bgUrl || '';
|
this.checkPrivacySetting();
|
||||||
return url ? `url(${url})` : 'none';
|
},
|
||||||
|
mounted() {
|
||||||
|
this.unsubscribe = this.$eventBus?.onMany([
|
||||||
|
'rubik-cube-tap',
|
||||||
|
'picture-tap',
|
||||||
|
'text-tap',
|
||||||
|
'goods-list-tap',
|
||||||
|
'presale-tap',
|
||||||
|
'notes-tap',
|
||||||
|
'merch-list-tap',
|
||||||
|
'map-tap',
|
||||||
|
'img-ads-tap',
|
||||||
|
'many-goods-list-tap',
|
||||||
|
'search-tap',
|
||||||
|
], this._handleDiyGroupInteractionEvent);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (this.unsubscribe) this.unsubscribe();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 检查隐私弹窗逻辑
|
||||||
|
checkPrivacySetting() {
|
||||||
|
// 模拟检查本地存储,看用户是否已经同意过
|
||||||
|
// 实际项目中请替换为你真实的存储逻辑
|
||||||
|
const hasAgreed = uni.getStorageSync('HAS_AGREED_PRIVACY');
|
||||||
|
if (!hasAgreed) {
|
||||||
|
// 延迟显示,防止遮挡页面渲染
|
||||||
|
setTimeout(() => {
|
||||||
|
this.showPrivacyModal = true;
|
||||||
|
}, 500);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 如果你的 mixin 中已经处理了数据加载,这里可以留空
|
// 用户点击同意
|
||||||
// 否则建议在 created/mounted 中初始化默认值或请求数据
|
handleAgree() {
|
||||||
created() {
|
// 保存同意状态
|
||||||
// 可选:如果 mixin 没有初始化 diyData,这里再兜底一次
|
uni.setStorageSync('HAS_AGREED_PRIVACY', true);
|
||||||
if (!this.diyData) {
|
this.showPrivacyModal = false;
|
||||||
this.diyData = { global: {}, value: null };
|
},
|
||||||
|
|
||||||
|
// 用户点击不同意
|
||||||
|
handleDisagree() {
|
||||||
|
// 微信小程序环境下,不同意通常退出小程序
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
uni.exitMiniProgram();
|
||||||
|
// #endif
|
||||||
|
// H5 或 App 下可以提示或直接不显示内容
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
uni.showToast({
|
||||||
|
title: '您已拒绝协议,无法使用',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
// 这里可以选择关闭页面或保持弹窗
|
||||||
|
// this.showPrivacyModal = false;
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
// 查看具体条款(可选功能)
|
||||||
|
viewPrivacy(type) {
|
||||||
|
// 这里可以跳转到具体的条款页面,或者使用你现有的 privacy-popup 组件
|
||||||
|
// 假设你有现成的组件逻辑:
|
||||||
|
if (this.$refs.privacyPopup) {
|
||||||
|
// 假设 privacy-popup 组件有一个 show 方法
|
||||||
|
// this.$refs.privacyPopup.show(type);
|
||||||
|
}
|
||||||
|
uni.showToast({
|
||||||
|
title: '请在此处实现查看条款逻辑',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
getFollowQrcode() {
|
||||||
|
if (!this.$util.isWeiXin()) return;
|
||||||
|
this.$api.sendRequest({
|
||||||
|
url: '/wechat/api/wechat/followqrcode',
|
||||||
|
success: res => {
|
||||||
|
if (res.code >= 0 && res.data) {
|
||||||
|
this.wechatQrcode = res.data.qrcode;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
officialAccountsOpen() {
|
||||||
|
this.$refs.officialAccountsPopup.open();
|
||||||
|
},
|
||||||
|
officialAccountsClose() {
|
||||||
|
this.$refs.officialAccountsPopup.close();
|
||||||
|
},
|
||||||
|
_handleDiyGroupInteractionEvent(payload) {
|
||||||
|
// #ifdef H5
|
||||||
|
return true;
|
||||||
|
// #endif
|
||||||
|
if (this.storeToken) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
this.$refs.login?.open();
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -207,10 +314,77 @@ export default {
|
|||||||
.small-bot-close i {
|
.small-bot-close i {
|
||||||
font-size: 60rpx;
|
font-size: 60rpx;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
|
||||||
|
/* 新增:隐私弹窗样式 */
|
||||||
|
.privacy-modal-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.6); // 半透明背景
|
||||||
|
z-index: 9999; // 确保层级最高
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.privacy-modal-container {
|
||||||
|
width: 80%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 40rpx 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.6;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
color: #007aff; // 蓝色链接
|
||||||
|
margin: 0 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-disagree {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-agree {
|
||||||
|
background-color: #07c160; // 微信绿
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.swiper /deep/ .uni-swiper-dots-horizontal {
|
.swiper ::v-deep .uni-swiper-dots-horizontal {
|
||||||
left: 40%;
|
left: 40%;
|
||||||
bottom: 40px
|
bottom: 40px
|
||||||
}
|
}
|
||||||
@@ -223,26 +397,26 @@ export default {
|
|||||||
width: 80%;
|
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;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .placeholder {
|
::v-deep .placeholder {
|
||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/::-webkit-scrollbar {
|
::v-deep ::-webkit-scrollbar {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
display: none;
|
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;
|
max-height: unset !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .mescroll-totop {
|
::v-deep .mescroll-totop {
|
||||||
/* #ifdef H5 */
|
/* #ifdef H5 */
|
||||||
right: 28rpx !important;
|
right: 28rpx !important;
|
||||||
bottom: 200rpx !important;
|
bottom: 200rpx !important;
|
||||||
|
|||||||
@@ -2,55 +2,68 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
minScrollTop: 100, // 设置回到顶端按钮显示要求,最小页面滚动距离
|
minScrollTop: 100, // 设置回到顶端按钮显示要求,最小页面滚动距离
|
||||||
wechatQrcode: '', // 公众号二维码
|
wechatQrcode: "", // 公众号二维码
|
||||||
diyRoute: '/pages/index/index'
|
diyRoute: "/pages/index/index",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad(option) {
|
onLoad(option) {
|
||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
// H5地图选择位置回调数据
|
// H5地图选择位置回调数据
|
||||||
if (option.module && option.module == 'locationPicker') {
|
if (option.module && option.module == "locationPicker") {
|
||||||
option.name = ''; // 清空地址
|
option.name = ""; // 清空地址
|
||||||
}
|
}
|
||||||
// #endif
|
// #endif
|
||||||
this.name = option.name || 'DIY_VIEW_INDEX'; // 根据店铺运营模式,打开平台(shop)或者连锁门店(stroe)页面,接口会自行判断
|
this.name = option.name || "DIY_VIEW_INDEX"; // 根据店铺运营模式,打开平台(shop)或者连锁门店(stroe)页面,接口会自行判断
|
||||||
|
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
// 获取关注公众号二维码
|
// 获取关注公众号二维码
|
||||||
this.getFollowQrcode();
|
this.getFollowQrcode();
|
||||||
|
// 检查隐私设置并显示弹窗
|
||||||
|
this.checkPrivacySetting();
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// 监听图片、文字、商品列表等组件的点击事件
|
// 监听图片、文字、商品列表等组件的点击事件
|
||||||
this.unsubscribe = this.$eventBus?.onMany([
|
this.unsubscribe = this.$eventBus?.onMany(
|
||||||
'rubik-cube-tap',
|
[
|
||||||
'picture-tap',
|
"rubik-cube-tap",
|
||||||
'text-tap',
|
"picture-tap",
|
||||||
'goods-list-tap',
|
"text-tap",
|
||||||
'presale-tap',
|
"goods-list-tap",
|
||||||
'notes-tap',
|
"presale-tap",
|
||||||
'merch-list-tap',
|
"notes-tap",
|
||||||
'map-tap',
|
"merch-list-tap",
|
||||||
'img-ads-tap',
|
"map-tap",
|
||||||
'many-goods-list-tap',
|
"img-ads-tap",
|
||||||
'search-tap',
|
"many-goods-list-tap",
|
||||||
], this._handleDiyGroupInteractionEvent);
|
"search-tap",
|
||||||
|
],
|
||||||
|
this._handleDiyGroupInteractionEvent,
|
||||||
|
);
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
// 移除图片点击事件监听
|
// 移除图片点击事件监听
|
||||||
if (this.unsubscribe) this.unsubscribe();
|
if (this.unsubscribe) this.unsubscribe();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 检查隐私设置
|
||||||
|
checkPrivacySetting() {
|
||||||
|
// 延迟执行,确保组件已经挂载
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.$refs.privacyPopup) {
|
||||||
|
this.$refs.privacyPopup.proactive();
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
},
|
||||||
// 关注公众号
|
// 关注公众号
|
||||||
getFollowQrcode() {
|
getFollowQrcode() {
|
||||||
if (!this.$util.isWeiXin()) return;
|
if (!this.$util.isWeiXin()) return;
|
||||||
this.$api.sendRequest({
|
this.$api.sendRequest({
|
||||||
url: '/wechat/api/wechat/followqrcode',
|
url: "/wechat/api/wechat/followqrcode",
|
||||||
success: res => {
|
success: (res) => {
|
||||||
if (res.code >= 0 && res.data) {
|
if (res.code >= 0 && res.data) {
|
||||||
this.wechatQrcode = res.data.qrcode;
|
this.wechatQrcode = res.data.qrcode;
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
officialAccountsOpen() {
|
officialAccountsOpen() {
|
||||||
@@ -77,6 +90,6 @@ export default {
|
|||||||
|
|
||||||
// 阻止事件继续传播
|
// 阻止事件继续传播
|
||||||
return false;
|
return false;
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
|
|||||||
@@ -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">
|
||||||
@@ -30,8 +38,8 @@
|
|||||||
<!-- AI消息 -->
|
<!-- AI消息 -->
|
||||||
<view v-else class="ai-message">
|
<view v-else class="ai-message">
|
||||||
<view class="avatar">
|
<view class="avatar">
|
||||||
<!-- 直接使用内部固定的AI头像 -->
|
<!-- AI头像使用🤖 -->
|
||||||
<image :src="aiAvatar" mode="aspectFill" />
|
<text>🤖</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="message-content">
|
<view class="message-content">
|
||||||
<!-- AI昵称固定,不可修改 - 左移到气泡上方 -->
|
<!-- AI昵称固定,不可修改 - 左移到气泡上方 -->
|
||||||
@@ -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>
|
||||||
@@ -156,27 +183,29 @@
|
|||||||
<view class="input-area">
|
<view class="input-area">
|
||||||
<view class="input-tools">
|
<view class="input-tools">
|
||||||
<button class="tool-btn" @click="showMoreTools">
|
<button class="tool-btn" @click="showMoreTools">
|
||||||
<text class="iconfont icon-plus">📌</text>
|
<text class="iconfont icon-plus">...</text>
|
||||||
</button>
|
</button>
|
||||||
<button class="tool-btn" @click="toggleVoiceInput">
|
<button class="tool-btn" @click="toggleVoiceInput">
|
||||||
<text class="iconfont" :class="voiceInputing ? 'icon-stop' : 'icon-voice'">🎤</text>
|
<text class="iconfont" :class="voiceInputing ? 'icon-stop' : 'icon-voice'">🎤</text>
|
||||||
</button>
|
</button>
|
||||||
<!-- 更换用户头像按钮 -->
|
|
||||||
<button class="tool-btn" @click="openAvatarSelector">
|
|
||||||
<text class="iconfont icon-user">📷</text>
|
|
||||||
</button>
|
|
||||||
<!-- 新增:更换用户昵称按钮 -->
|
|
||||||
<button class="tool-btn" @click="openNicknameEditor">
|
|
||||||
<text class="iconfont icon-edit">✏️</text>
|
|
||||||
</button>
|
|
||||||
</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 +263,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 +323,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>
|
||||||
@@ -391,20 +432,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 +810,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
// 发送流式消息
|
// 发送流式消息
|
||||||
|
// 发送流式消息(自动适配 H5 / 微信小程序)
|
||||||
async sendStreamMessage(userMessage) {
|
async sendStreamMessage(userMessage) {
|
||||||
// 创建流式消息对象
|
// 创建流式消息对象
|
||||||
const streamMessage = {
|
const streamMessage = {
|
||||||
@@ -783,35 +820,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 +859,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 +1444,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 +1458,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 +1473,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;
|
||||||
|
|
||||||
@@ -1397,6 +1487,9 @@ $radius-lg: 36rpx;
|
|||||||
background-color: $bg-card;
|
background-color: $bg-card;
|
||||||
border: 2rpx solid #f0f4f8;
|
border: 2rpx solid #f0f4f8;
|
||||||
transition: transform 0.2s ease;
|
transition: transform 0.2s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.03);
|
transform: scale(1.03);
|
||||||
@@ -1407,6 +1500,11 @@ $radius-lg: 36rpx;
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 56rpx;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-content {
|
.message-content {
|
||||||
@@ -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;
|
||||||
/* 确保在微信小程序中紧贴底部 */
|
/* 确保在微信小程序中紧贴底部 */
|
||||||
@@ -1978,6 +2070,7 @@ $radius-lg: 36rpx;
|
|||||||
.input-tools {
|
.input-tools {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 16rpx;
|
margin-bottom: 16rpx;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
.tool-btn {
|
.tool-btn {
|
||||||
width: 64rpx;
|
width: 64rpx;
|
||||||
@@ -1985,6 +2078,7 @@ $radius-lg: 36rpx;
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: $bg-main;
|
background-color: $bg-main;
|
||||||
margin-right: 16rpx;
|
margin-right: 16rpx;
|
||||||
|
margin-top: -8rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -2047,12 +2141,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,10 +2167,8 @@ $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,
|
||||||
@@ -2450,45 +2539,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 +2714,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 +2725,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 +2739,6 @@ $radius-lg: 36rpx;
|
|||||||
0% {
|
0% {
|
||||||
left: -100%;
|
left: -100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
left: 200%;
|
left: 200%;
|
||||||
}
|
}
|
||||||
@@ -2697,11 +2748,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 +2787,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;
|
||||||
|
|||||||
@@ -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">
|
||||||
@@ -14,7 +14,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="header-right">
|
<view class="header-right">
|
||||||
<button class="menu-btn" v-show="showMenuButton" @click="showMenu">
|
<button class="menu-btn" v-show="showMenuButton" @click="showMenu">
|
||||||
<text class="iconfont icon-ellipsis"></text>
|
<text>⚙️</text>
|
||||||
</button>
|
</button>
|
||||||
<!-- 占位元素,确保布局平衡 -->
|
<!-- 占位元素,确保布局平衡 -->
|
||||||
<view v-show="!showMenuButton" class="placeholder"></view>
|
<view v-show="!showMenuButton" class="placeholder"></view>
|
||||||
@@ -44,6 +44,41 @@
|
|||||||
@product-view="onProductView"
|
@product-view="onProductView"
|
||||||
@input-change="onInputChange" />
|
@input-change="onInputChange" />
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 设置面板 -->
|
||||||
|
<view v-if="showSettingsPanel" class="settings-popup">
|
||||||
|
<view class="settings-mask" @click="hideSettings"></view>
|
||||||
|
<view class="settings-panel">
|
||||||
|
<view class="settings-header">
|
||||||
|
<text class="settings-title">设置</text>
|
||||||
|
<view class="close-btn" @click="hideSettings">
|
||||||
|
<text>✕</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="settings-content">
|
||||||
|
<view class="setting-item" @click="openAvatarSelector">
|
||||||
|
<view class="setting-icon">
|
||||||
|
<text class="iconfont icon-user">📷</text>
|
||||||
|
</view>
|
||||||
|
<view class="setting-info">
|
||||||
|
<text class="setting-label">更换头像</text>
|
||||||
|
<text class="setting-desc">自定义您的聊天头像</text>
|
||||||
|
</view>
|
||||||
|
<text class="iconfont icon-right">›</text>
|
||||||
|
</view>
|
||||||
|
<view class="setting-item" @click="openNicknameEditor">
|
||||||
|
<view class="setting-icon">
|
||||||
|
<text class="iconfont icon-edit">✏️</text>
|
||||||
|
</view>
|
||||||
|
<view class="setting-info">
|
||||||
|
<text class="setting-label">更换昵称</text>
|
||||||
|
<text class="setting-desc">自定义您的昵称</text>
|
||||||
|
</view>
|
||||||
|
<text class="iconfont icon-right">›</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -51,12 +86,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 {
|
||||||
@@ -82,15 +116,16 @@ export default {
|
|||||||
showCustomNavbar: true, // 是否显示自定义导航栏
|
showCustomNavbar: true, // 是否显示自定义导航栏
|
||||||
showBackButton: false, // 是否显示返回按钮
|
showBackButton: false, // 是否显示返回按钮
|
||||||
showMenuButton: true, // 是否显示设置菜单按钮
|
showMenuButton: true, // 是否显示设置菜单按钮
|
||||||
|
showSettingsPanel: false, // 是否显示设置面板
|
||||||
|
|
||||||
// --- 聊天内容区域 ---
|
// --- 聊天内容区域 ---
|
||||||
scrollViewHeight: '0px',
|
scrollViewHeight: '0px',
|
||||||
|
|
||||||
|
|
||||||
// 事件处理器引用(用于清理)
|
// 事件处理器引用(用于清理)
|
||||||
safeEventHandlers: new Map()
|
safeEventHandlers: new Map()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters([
|
...mapGetters([
|
||||||
'globalAIKefuConfig'
|
'globalAIKefuConfig'
|
||||||
@@ -121,35 +156,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,49 +207,41 @@ 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) {
|
||||||
@@ -215,74 +249,58 @@ export default {
|
|||||||
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 +308,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 +323,66 @@ 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({
|
this.showSettingsPanel = true;
|
||||||
url: '/pages/settings/index'
|
},
|
||||||
})
|
|
||||||
|
hideSettings() {
|
||||||
|
this.showSettingsPanel = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
openAvatarSelector() {
|
||||||
|
this.hideSettings();
|
||||||
|
this.$refs.chat.openAvatarSelector();
|
||||||
|
},
|
||||||
|
|
||||||
|
openNicknameEditor() {
|
||||||
|
this.hideSettings();
|
||||||
|
this.$refs.chat.openNicknameEditor();
|
||||||
},
|
},
|
||||||
|
|
||||||
// 显示帮助
|
|
||||||
showHelp() {
|
showHelp() {
|
||||||
const helpMessage = {
|
const helpMessage = {
|
||||||
id: Date.now(),
|
id: Date.now(),
|
||||||
@@ -391,27 +409,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,9 +428,9 @@ 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(),
|
||||||
@@ -433,115 +442,124 @@ export default {
|
|||||||
{ 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: 48px;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@@ -553,7 +571,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 +583,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 +628,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 +652,135 @@ 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 设置面板 */
|
||||||
|
.settings-popup {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
|
||||||
|
.settings-mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
backdrop-filter: blur(6rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-panel {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
padding: 32rpx;
|
||||||
|
width: calc(100% - 80rpx);
|
||||||
|
max-width: 520rpx;
|
||||||
|
box-shadow: 0 8rpx 36rpx rgba(0, 0, 0, 0.15);
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.settings-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
border-bottom: 2rpx solid #f0f4f8;
|
||||||
|
padding-bottom: 16rpx;
|
||||||
|
|
||||||
|
.settings-title {
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
width: 56rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #f8fafc;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #999;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #e9edf2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16rpx;
|
||||||
|
|
||||||
|
.setting-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 24rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
background-color: #f8fafc;
|
||||||
|
border: 2rpx solid #f0f4f8;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #e9edf2;
|
||||||
|
border-color: #d9e3ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-icon {
|
||||||
|
width: 72rpx;
|
||||||
|
height: 72rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #c4e0ff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-info {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4rpx;
|
||||||
|
|
||||||
|
.setting-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-desc {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont.icon-right {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #ccc;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
4
site.js
4
site.js
@@ -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
|
||||||
};
|
};
|
||||||
@@ -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); // 初始化数据调用
|
||||||
|
|||||||
Reference in New Issue
Block a user