chore：实现后台控制哪个客服，H5可以正常切换客服

common/js/customer-service.js

@@ -2,10 +2,21 @@
  * 客服统一处理服务
  * 整合各种客服方式，提供统一的调用接口
  */
-
 export class CustomerService {
-    constructor(vueInstance) {
+    constructor(vueInstance, externalConfig = null) {
         this.vm = vueInstance;
+        this.externalConfig = externalConfig; // 外部传入的最新配置（优先级最高）
+        this.latestPlatformConfig = null;
+    }
+
+    /**
+     * 强制刷新配置（支持传入外部配置）
+     * @param {Object} externalConfig 外部最新配置
+     */
+    refreshConfig(externalConfig = null) {
+        this.externalConfig = externalConfig || this.externalConfig;
+        this.latestPlatformConfig = null;
+        return this.getPlatformConfig();
     }
 
     /**
@@ -13,23 +24,38 @@ export class CustomerService {
      * @returns {Object} 平台对应的客服配置
      */
     getPlatformConfig() {
-        const servicerConfig = this.vm.$store.state.servicerConfig;
+        if (this.latestPlatformConfig) {
-		console.log(`客服配置：`, servicerConfig)
+            return this.latestPlatformConfig;
-        if (!servicerConfig) return null;
+        }
 
+        // 优先级：外部传入的最新配置 > vuex配置 > 空对象
+        const servicerConfig = this.externalConfig || this.vm.$store.state.servicerConfig || {};
+        console.log(`【实时客服配置】`, servicerConfig);
+
+        let platformConfig = null;
         // #ifdef H5
-        return servicerConfig.h5;
+        platformConfig = servicerConfig.h5 ? (typeof servicerConfig.h5 === 'object' ? servicerConfig.h5 : null) : null;
         // #endif
 
         // #ifdef MP-WEIXIN
-        return servicerConfig.weapp;
+        platformConfig = servicerConfig.weapp ? (typeof servicerConfig.weapp === 'object' ? servicerConfig.weapp : null) : null;
         // #endif
 
         // #ifdef MP-ALIPAY
-        return servicerConfig.aliapp;
+        platformConfig = servicerConfig.aliapp ? (typeof servicerConfig.aliapp === 'object' ? servicerConfig.aliapp : null) : null;
         // #endif
 
-        return null;
+        // #ifdef PC
+        platformConfig = servicerConfig.pc ? (typeof servicerConfig.pc === 'object' ? servicerConfig.pc : null) : null;
+        // #endif
+
+        // 处理空数组情况（你的配置中pc/aliapp是空数组，转为null）
+        if (Array.isArray(platformConfig)) {
+            platformConfig = null;
+        }
+
+        this.latestPlatformConfig = platformConfig;
+        return platformConfig;
     }
 
     /**
@@ -37,7 +63,7 @@ export class CustomerService {
      * @returns {Object} 企业微信配置
      */
     getWxworkConfig() {
-        return this.vm.$store.state.wxworkConfig;
+        return this.vm.$store.state.wxworkConfig || {};
     }
 
     /**
@@ -69,12 +95,15 @@ export class CustomerService {
             return result;
         }
 
+        if (config.type === 'aikefu') {
+            return result;
+        }
+
         if (!config.type) {
             result.isValid = false;
             result.errors.push('客服类型未配置');
         }
 
-        // 验证企业微信配置
         if (config.type === 'wxwork') {
             if (!wxworkConfig) {
                 result.isValid = false;
@@ -93,24 +122,42 @@ export class CustomerService {
     }
 
     /**
-     * 获取客服类型
+     * 跳转到Dify客服页面
-     * @returns {string} 客服类型
      */
-    getServiceType() {
+    openDifyService() {
-        const config = this.getPlatformConfig();
+        try {
-        return config?.type || 'none';
+            if (this.vm.setAiUnreadCount) {
+                this.vm.setAiUnreadCount(0);
+            }
+            // 强制跳转，忽略框架层的封装
+            uni.redirectTo({
+                url: '/pages_tool/ai-chat/index',
+                fail: (err) => {
+                    // 兜底：使用window.location跳转（H5）
+                    // #ifdef H5
+                    window.location.href = '/pages_tool/ai-chat/index';
+                    // #endif
+                    console.error('跳转Dify客服失败:', err);
+                    uni.showToast({
+                        title: '跳转客服失败',
+                        icon: 'none'
+                    });
+                }
+            });
+        } catch (e) {
+            console.error('跳转Dify客服异常:', e);
+            uni.showToast({
+                title: '跳转客服失败',
+                icon: 'none'
+            });
+        }
     }
 
     /**
      * 处理客服点击事件
      * @param {Object} options 选项参数
-     * @param {Object} options.niushop 牛商客服参数
-     * @param {string} options.sendMessageTitle 消息标题
-     * @param {string} options.sendMessagePath 消息路径
-     * @param {string} options.sendMessageImg 消息图片
      */
     handleCustomerClick(options = {}) {
-        // 验证配置
         const validation = this.validateConfig();
         if (!validation.isValid) {
             console.error('客服配置验证失败:', validation.errors);
@@ -118,27 +165,23 @@ export class CustomerService {
             return;
         }
 
-        // 显示警告（如果有）
         if (validation.warnings.length > 0) {
             console.warn('客服配置警告:', validation.warnings);
         }
 
         const config = this.getPlatformConfig();
-        const {
+        const { niushop = {}, sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options;
-            niushop = {},
-            sendMessageTitle = '',
-            sendMessagePath = '',
-            sendMessageImg = ''
-        } = options;
 
-        // 检查是否为无客服类型
         if (config.type === 'none') {
             this.showNoServicePopup();
             return;
         }
 
-        // 根据类型处理客服
+        // 核心分支：根据最新的type处理
         switch (config.type) {
+            case 'aikefu':
+                this.openDifyService();
+                break;
             case 'wxwork':
                 this.openWxworkService(false, config, options);
                 break;
@@ -163,33 +206,25 @@ export class CustomerService {
      * 打开企业微信客服
      * @param {boolean} useOriginalService 是否使用原有客服方式
      * @param {Object} servicerConfig 客服配置
+     * @param {Object} options 选项参数
      */
     openWxworkService(useOriginalService = false, servicerConfig = null, options = {}) {
         const config = servicerConfig || this.getPlatformConfig();
         const wxworkConfig = this.getWxworkConfig();
-        
+        const { sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options;
-        const {
-            sendMessageTitle = '',
-            sendMessagePath = '',
-            sendMessageImg = ''
-        } = options;
 
         // #ifdef MP-WEIXIN
         if (wxworkConfig?.enable && wxworkConfig?.contact_url && !useOriginalService) {
-            // 使用活码链接跳转到企业微信
             wx.navigateToMiniProgram({
-                appId: 'wxeb490c6f9b154ef9', // 企业微信官方小程序AppID
+                appId: 'wxeb490c6f9b154ef9',
                 path: `pages/contacts/externalContactDetail?url=${encodeURIComponent(wxworkConfig.contact_url)}`,
-                success: () => {
+                success: () => console.log('跳转企业微信成功'),
-                    console.log('跳转企业微信成功');
-                },
                 fail: (err) => {
                     console.error('跳转企业微信失败:', err);
                     this.fallbackToOriginalService();
                 }
             });
         } else {
-            // 使用原有的客服会话方式
             wx.openCustomerServiceChat({
                 extInfo: { url: config.wxwork_url },
                 corpId: config.corpid,
@@ -204,8 +239,10 @@ export class CustomerService {
         // #ifdef H5
         if (wxworkConfig?.enable && wxworkConfig?.contact_url) {
             window.location.href = wxworkConfig.contact_url;
-        } else {
+        } else if (config.wxwork_url) {
             location.href = config.wxwork_url;
+        } else {
+            this.fallbackToPhoneCall();
         }
         // #endif
     }
@@ -216,7 +253,9 @@ export class CustomerService {
      */
     openThirdService(config) {
         if (config.third_url) {
-            location.href = config.third_url;
+            window.location.href = config.third_url;
+        } else {
+            this.fallbackToPhoneCall();
         }
     }
 
@@ -238,24 +277,12 @@ export class CustomerService {
      * @param {Object} options 选项参数
      */
     openWeappService(config, options = {}) {
-        // 如果是官方客服，由 open-type="contact" 自动处理
         if (!this.shouldUseCustomService(config)) {
             console.log('使用官方微信小程序客服');
             return;
         }
 
-        // 自定义客服处理
         console.log('使用自定义微信小程序客服');
-        
-        // 这里可以实现自定义的客服逻辑
-        // 例如：跳转到自定义客服页面、显示客服弹窗等
-        const {
-            sendMessageTitle = '',
-            sendMessagePath = '',
-            sendMessageImg = ''
-        } = options;
-
-        // 实现自定义客服逻辑
         this.handleCustomWeappService(config, options);
     }
 
@@ -265,18 +292,11 @@ export class CustomerService {
      * @param {Object} options 选项参数
      */
     handleCustomWeappService(config, options = {}) {
-        const {
+        const { sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options;
-            sendMessageTitle = '',
-            sendMessagePath = '',
-            sendMessageImg = ''
-        } = options;
 
-        // 优先级1: 如果有自定义客服页面URL，跳转到自定义页面
         if (config.customServiceUrl) {
-            // 构建带参数的URL
             let url = config.customServiceUrl;
             const params = [];
-            
             if (sendMessageTitle) params.push(`title=${encodeURIComponent(sendMessageTitle)}`);
             if (sendMessagePath) params.push(`path=${encodeURIComponent(sendMessagePath)}`);
             if (sendMessageImg) params.push(`img=${encodeURIComponent(sendMessageImg)}`);
@@ -295,7 +315,6 @@ export class CustomerService {
             return;
         }
 
-        // 优先级2: 尝试第三方客服
         this.tryThirdPartyService(config, options);
     }
 
@@ -305,14 +324,12 @@ export class CustomerService {
      * @param {Object} options 选项参数
      */
     tryThirdPartyService(config, options = {}) {
-        // 如果配置了第三方客服URL
         if (config.thirdPartyServiceUrl) {
             // #ifdef H5
             window.open(config.thirdPartyServiceUrl, '_blank');
             // #endif
             
             // #ifdef MP-WEIXIN
-            // 微信小程序可以使用web-view或者跳转到第三方小程序
             if (config.thirdPartyMiniAppId) {
                 wx.navigateToMiniProgram({
                     appId: config.thirdPartyMiniAppId,
@@ -323,7 +340,6 @@ export class CustomerService {
                     }
                 });
             } else {
-                // 设置到剪贴板，让用户手动访问
                 uni.setClipboardData({
                     data: config.thirdPartyServiceUrl,
                     success: () => {
@@ -339,7 +355,6 @@ export class CustomerService {
             return;
         }
 
-        // 降级到电话客服
         this.fallbackToPhoneCall();
     }
 
@@ -363,8 +378,18 @@ export class CustomerService {
      * @param {Object} config 客服配置
      */
     openAliappService(config) {
-        // 支付宝小程序客服会由 contact-button 组件自动处理
+        console.log('支付宝小程序客服', config);
-        console.log('支付宝小程序客服');
+        switch (config.type) {
+            case 'aikefu':
+                this.openDifyService();
+                break;
+            case 'third':
+                this.openThirdService(config);
+                break;
+            default:
+                console.log('使用支付宝官方客服');
+                break;
+        }
     }
 
     /**
@@ -378,7 +403,18 @@ export class CustomerService {
                     uni.makePhoneCall({
                         phoneNumber: res.data.mobile
                     });
+                } else {
+                    uni.showToast({
+                        title: '暂无客服电话',
+                        icon: 'none'
+                    });
                 }
+            },
+            fail: () => {
+                uni.showToast({
+                    title: '获取客服电话失败',
+                    icon: 'none'
+                });
             }
         });
     }
@@ -387,7 +423,7 @@ export class CustomerService {
      * 显示无客服弹窗
      */
     showNoServicePopup() {
-        const siteInfo = this.vm.$store.state.siteInfo;
+        const siteInfo = this.vm.$store.state.siteInfo || {};
         const message = siteInfo?.site_tel 
             ? `请联系客服，客服电话是${siteInfo.site_tel}` 
             : '抱歉，商家暂无客服，请线下联系';
@@ -421,7 +457,6 @@ export class CustomerService {
             content: '无法直接添加企业微信客服，是否使用其他方式联系客服？',
             success: (res) => {
                 if (res.confirm) {
-                    console.log('降级处理：使用原有客服方式');
                     this.openWxworkService(true);
                 }
             }
@@ -437,13 +472,9 @@ export class CustomerService {
         if (!config) return { openType: '' };
 
         let openType = '';
-        
         // #ifdef MP-WEIXIN
         if (config.type === 'weapp') {
-            // 检查是否使用官方客服
+            openType = config.useOfficial !== false ? 'contact' : '';
-            if (config.useOfficial !== false) { // 默认为true，使用官方客服
-                openType = 'contact';
-            }
         }
         // #endif
 
@@ -451,10 +482,7 @@ export class CustomerService {
         if (config.type === 'aliapp') openType = 'contact';
         // #endif
 
-        return {
+        return { ...config, openType };
-            ...config,
-            openType
-        };
     }
 
     /**
@@ -464,13 +492,10 @@ export class CustomerService {
      */
     shouldUseCustomService(config) {
         // #ifdef MP-WEIXIN
-        // 如果是微信小程序且type为weapp，检查useOfficial配置
         if (config?.type === 'weapp') {
-            return config.useOfficial === false; // 明确设置为false才使用自定义
+            return config.useOfficial === false;
         }
         // #endif
-
-        // 其他平台或类型都使用自定义处理
         return true;
     }
 }
@@ -478,8 +503,9 @@ export class CustomerService {
 /**
  * 创建客服服务实例
  * @param {Object} vueInstance Vue实例
+ * @param {Object} externalConfig 外部最新配置
  * @returns {CustomerService} 客服服务实例
  */
-export function createCustomerService(vueInstance) {
+export function createCustomerService(vueInstance, externalConfig = null) {
-    return new CustomerService(vueInstance);
+    return new CustomerService(vueInstance, externalConfig);
 }

components/hover-nav/hover-nav.vue

@@ -1,60 +1,49 @@
 <template>
-	<!-- 悬浮按钮 -->
+	<view v-if="pageCount == 1 || need" class="fixed-box" :style="{ height: fixBtnShow ? (isH5 ? '180rpx' : '330rpx') : '120rpx' }">
-	<view v-if="pageCount == 1 || need" class="fixed-box" :style="{ height: fixBtnShow ? '330rpx' : '120rpx' }">
-		<!-- 微信小程序：区分官方客服和自定义客服 -->
 		<!-- #ifdef MP-WEIXIN -->
-		<!-- 官方客服：使用open-type="contact" -->
+		<!-- 微信小程序：根据配置自动选择官方客服/自定义客服 -->
-		<button 
-			class="btn-item" 
-			v-if="fixBtnShow && useOfficialService" 
-			hoverClass="none" 
-			open-type="contact"
-			sessionFrom="weapp" 
-			showMessageCard="true"
-			:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }"
-		>
-			<text class="icox icox-kefu" v-if="!kefuimg"></text>
-		</button>
-		<!-- 自定义客服：点击触发contactServicer -->
-		<button 
-			class="btn-item" 
-			v-if="fixBtnShow && !useOfficialService" 
-			hoverClass="none" 
-			@click="contactServicer"
-			:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }"
-		>
-			<text class="icox icox-kefu" v-if="!kefuimg"></text>
-		</button>
-		<!-- #endif -->
-		
-		<!-- H5：自定义客服按钮 -->
-		<!-- #ifdef H5 -->
 		<button 
 			class="btn-item" 
 			v-if="fixBtnShow" 
 			hoverClass="none"
-			@click="contactServicer"
+			:open-type="weappOfficialService ? 'contact' : ''"
+			@click="weappOfficialService ? '' : handleWeappCustomerService"
 			:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }"
 		>
 			<text class="icox icox-kefu" v-if="!kefuimg"></text>
 		</button>
 		<!-- #endif -->
 		
-		<!-- AI智能助手 -->
+		<!-- #ifdef H5 -->
+		<!-- H5逻辑保持不变 -->
+		<button 
+			class="btn-item" 
+			v-if="fixBtnShow" 
+			hoverClass="none" 
+			@click="handleCustomerService"
+			:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }"
+		>
+			<text class="icox icox-kefu" v-if="!kefuimg"></text>
+			<view v-if="unreadCount > 0 && isDifyService" class="unread-badge">
+				<text class="badge-text">{{ unreadCount > 99 ? '99+' : unreadCount }}</text>
+			</view>
+		</button>
+		<!-- #endif -->
+
+		<!-- #ifndef H5 -->
 		<view 
 			class="btn-item" 
-			v-if="fixBtnShow && enableAIKefuButton" 
+			v-if="fixBtnShow && isDifyService" 
-			@click="openAIChat"
+			@click="handleCustomerService"
 			:style="{ backgroundImage: 'url(' + (aiAgentimg ? aiAgentimg : '') + ')', backgroundSize: '100% 100%' }"
 		>
 			<text class="ai-icon" v-if="!aiAgentimg">🤖</text>
-			<!-- 未读消息小红点 -->
 			<view v-if="unreadCount > 0" class="unread-badge">
 				<text class="badge-text">{{ unreadCount > 99 ? '99+' : unreadCount }}</text>
 			</view>
 		</view>
+		<!-- #endif -->
 
-		<!-- 电话 -->
 		<view 
 			class="btn-item" 
 			v-if="fixBtnShow" 
@@ -86,31 +75,36 @@ export default {
 			kefuimg: '',
 			phoneimg: '',
 			customerService: null,
-			buttonConfig: null
+			buttonConfig: null,
+			isH5: false,
+			platformConfig: null,
+			latestConfig: null,
+			weappOfficialService: false // 微信小程序是否使用官方客服
 		};
 	},
 	created() {
+		// 1. 判断平台类型
+		// #ifdef H5
+		this.isH5 = true;
+		// #endif
+		// #ifdef MP-WEIXIN
+		this.isH5 = false;
+		// #endif
+
+		// 2. 初始化资源
 		this.kefuimg = this.$util.getDefaultImage().kefu;
 		this.phoneimg = this.$util.getDefaultImage().phone;
 		this.pageCount = getCurrentPages().length;
 
-		this.customerService = createCustomerService(this);
+		// 3. 获取店铺电话
-		this.buttonConfig = this.customerService.getButtonConfig();
+		this.getShopTel();
 
-		console.log(`buttonConfig: `, this.buttonConfig);
+		// 4. 首次加载获取最新配置
-
+		this.getLatestConfig().then(config => {
-		const that = this;
+			this.latestConfig = config;
-		uni.getStorage({
+			this.initCustomerService(config);
-			key: 'shopInfo',
+			// 微信小程序：判断是否使用官方客服
-			success(e) {
+			this.initWeappServiceType();
-				// 校验手机号是否有效
-				if (e.data && e.data.mobile && /^1[3-9]\d{9}$/.test(e.data.mobile)) {
-					that.tel = e.data.mobile;
-				}
-			},
-			fail() {
-				console.warn('未获取到店铺信息');
-			}
 		});
 	},
 	computed: {
@@ -118,26 +112,15 @@ export default {
 			'globalAIKefuConfig',
 			'aiUnreadCount'
 		]),
-		enableAIKefuButton() {
+		isDifyService() {
-			return this.buttonConfig?.type === 'aikefu' && this.enableAIChat;
+			const serviceType = this.platformConfig?.type || '';
+			return serviceType === 'aikefu';
 		},
 		aiAgentimg() {
 			return this.globalAIKefuConfig?.icon || this.$util.getDefaultImage().aiAgent || '';
 		},
 		unreadCount() {
 			return this.aiUnreadCount;
-		},
-		enableAIChat() {
-			return this.globalAIKefuConfig?.enable || true;
-		},
-		useOfficialService() {
-			if (!this.buttonConfig) return true;
-			// #ifdef MP-WEIXIN
-			if (this.buttonConfig.type === 'weapp') {
-				return this.buttonConfig.useOfficial !== false;
-			}
-			// #endif
-			return false;
 		}
 	},
 	methods: {
@@ -145,154 +128,184 @@ export default {
 			'setAiUnreadCount'
 		]),
 		/**
-		 * 拨打电话逻辑：增加手机号校验和异常处理
+		 * 获取最新配置（H5禁用缓存，小程序保留默认）
 		 */
-		call() {
+		async getLatestConfig() {
-			// 1. 校验手机号是否存在且有效
+			return new Promise((resolve) => {
-			if (!this.tel || !/^1[3-9]\d{9}$/.test(this.tel)) {
+				// H5：强制请求最新配置；小程序：优先用vuex缓存
-				uni.showToast({
+				if (this.isH5) {
-					title: '暂无有效联系电话',
+					this.$api.sendRequest({
-					icon: 'none',
+						url: '/api/site/getServicerConfig',
-					duration: 2000
+						header: {
-				});
+							'Cache-Control': 'no-cache, no-store, must-revalidate',
-				return;
+							'Pragma': 'no-cache',
-			}
+							'Expires': '0'
-
+						},
-			// 2. 调用系统拨号API
+						data: { t: new Date().getTime() },
-			uni.makePhoneCall({
+						success: (res) => {
-				phoneNumber: this.tel,
+							const config = res.code === 0 ? res.data : this.$store.state.servicerConfig || {};
-				fail(err) {
+							this.$store.commit('UPDATE_SERVICER_CONFIG', config);
-					console.log('拨号操作失败：', err);
+							resolve(config);
-					// 非用户取消的情况，给出提示
+						},
-					if (err.errMsg !== 'makePhoneCall:fail cancel') {
+						fail: () => resolve(this.$store.state.servicerConfig || {})
-						uni.showToast({
+					});
-							title: '拨号失败，请稍后重试',
+				} else {
-							icon: 'none',
+					// 小程序：直接用vuex缓存（后台修改后需重启开发者工具）
-							duration: 2000
+					resolve(this.$store.state.servicerConfig || {});
-						});
+				}
+			});
+		},
+		/**
+		 * 初始化客服服务
+		 */
+		initCustomerService(config = null) {
+			this.customerService = createCustomerService(this, config || this.latestConfig);
+			this.platformConfig = this.customerService.refreshConfig(config || this.latestConfig);
+			this.buttonConfig = this.customerService.getButtonConfig();
+		},
+		/**
+		 * 微信小程序：初始化服务类型（官方/自定义）
+		 */
+		initWeappServiceType() {
+			// #ifdef MP-WEIXIN
+			// 从buttonConfig中获取官方客服标识
+			this.weappOfficialService = this.buttonConfig?.openType === 'contact';
+			// #endif
+		},
+		/**
+		 * 获取店铺电话
+		 */
+		getShopTel() {
+			uni.getStorage({
+				key: 'shopInfo',
+				success: (e) => {
+					if (e.data && e.data.mobile && /^1[3-9]\d{9}$/.test(e.data.mobile)) {
+						this.tel = e.data.mobile;
 					}
 				}
 			});
 		},
-		openAIChat() {
+		/**
-			if (this.enableAIChat) {
+		 * 拨打电话
-				this.setAiUnreadCount(0);
+		 */
+		call() {
+			if (!this.tel || !/^1[3-9]\d{9}$/.test(this.tel)) {
+				uni.showToast({ title: '暂无有效联系电话', icon: 'none' });
+				return;
 			}
-			this.$util.redirectTo('/pages_tool/ai-chat/index');
+			uni.makePhoneCall({
+				phoneNumber: this.tel,
+				fail: (err) => {
+					if (err.errMsg !== 'makePhoneCall:fail cancel') {
+						uni.showToast({ title: '拨号失败，请稍后重试', icon: 'none' });
+					}
+				}
+			});
 		},
 		/**
-		 * 处理客服点击：调用客服服务的统一处理方法
+		 * H5客服点击逻辑（保持不变）
 		 */
-		contactServicer() {
+		async handleCustomerService() {
-			// 移除错误的js路径跳转，直接调用客服服务的处理方法
+			if (this.isH5) {
-			this.customerService.handleCustomerClick({
+				uni.showLoading({ title: '加载中...', mask: true });
-				// 可传递自定义参数，例如牛商客服参数、消息卡片参数
+				try {
-				// niushop: { /* 牛商客服参数 */ },
+					const newConfig = await this.getLatestConfig();
-				// sendMessageTitle: '客服消息标题',
+					this.latestConfig = newConfig;
-				// sendMessagePath: '/pages/index/index',
+					this.initCustomerService(newConfig);
-				// sendMessageImg: 'https://example.com/img.png'
+					this.customerService.handleCustomerClick();
-			});
+				} catch (e) {
+					uni.showToast({ title: '操作失败', icon: 'none' });
+				} finally {
+					uni.hideLoading();
+				}
+			} else {
+				// 小程序：直接调用客服逻辑
+				this.customerService.handleCustomerClick();
+			}
+		},
+		/**
+		 * 微信小程序自定义客服点击逻辑
+		 */
+		handleWeappCustomerService() {
+			// #ifdef MP-WEIXIN
+			this.customerService.handleCustomerClick();
+			// #endif
 		}
 	}
 };
 </script>
 
-<style lang="scss">
+<style scoped>
-.container-box {
-	width: 100%;
-
-	.item-wrap {
-		border-radius: 10rpx;
-
-		.image-box {
-			border-radius: 10rpx;
-		}
-
-		image {
-			width: 100%;
-			height: auto;
-			border-radius: 10rpx;
-			will-change: transform;
-		}
-	}
-}
-
-//悬浮按钮
 .fixed-box {
 	position: fixed;
-	right: 0rpx;
+	right: 0;
 	bottom: 200rpx;
 	z-index: 10;
 	border-radius: 120rpx;
 	padding: 20rpx 0;
 	display: flex;
-	justify-content: center;
 	flex-direction: column;
+	justify-content: center;
+	align-items: center;
 	width: 100rpx;
 	box-sizing: border-box;
-	transition: 0.3s;
+}
-	overflow: hidden;
 
-	.btn-item {
+/* 核心修改：确保按钮背景是正圆 */
-		display: flex;
+.btn-item {
-		justify-content: center;
+	display: flex;
-		align-items: center;
+	justify-content: center;
-		text-align: center;
+	align-items: center;
-		flex-direction: column;
+	width: 80rpx;
-		line-height: 1;
+	height: 80rpx;
-		margin: 14rpx 0;
+	margin: 14rpx 0;
-		transition: 0.1s;
+	/* 强制正圆：使用远大于宽高的固定值，比50%更稳定 */
-		background: #fff;
+	border-radius: 100rpx;
-		border-radius: 50rpx;
+	/* 确保背景色是白色（即使图片加载失败也能看到正圆） */
-		width: 80rpx;
+	background-color: #ffffff;
-		height: 80rpx;
+	/* 防止边框/内边距影响宽高比 */
-		padding: 0;
+	box-sizing: border-box;
-		position: relative;
+	/* 移除默认边框（button标签可能有默认边框） */
+	border: none;
+	/* 清除默认内边距 */
+	padding: 0;
+	position: relative;
+	transition: all 0.1s ease;
+	/* 防止背景图片拉伸导致视觉上的非正圆 */
+	background-position: center;
+	background-repeat: no-repeat;
+}
 
-		text {
+/* 清除button标签的默认点击样式（微信小程序/浏览器） */
-			font-size: 36rpx;
+.btn-item::after {
-			font-weight: bold;
+	border: none !important;
-		}
+}
 
-		view {
+.unread-badge {
-			font-size: 26rpx;
+	position: absolute;
-			font-weight: bold;
+	top: -5rpx;
-		}
+	right: -5rpx;
+	background: #ff4544;
+	color: #fff;
+	border-radius: 20rpx;
+	min-width: 30rpx;
+	height: 30rpx;
+	line-height: 30rpx;
+	text-align: center;
+	font-size: 10rpx;
+	padding: 0 8rpx;
+	box-shadow: 0 2rpx 10rpx rgba(255, 73, 72, 0.3);
+	z-index: 1;
+}
 
-		// 未读消息小红点
+/* 微信小程序字体适配 */
-		.unread-badge {
+/* #ifdef MP-WEIXIN */
-			position: absolute;
+.unread-badge {
-			top: -5rpx;
+	font-size: 20rpx;
-			right: -5rpx;
+}
-			background-color: #ff4544;
+/* #endif */
-			color: white;
-			border-radius: 20rpx;
-			min-width: 30rpx;
-			height: 30rpx;
-			font-size: 10rpx;
-			line-height: 30rpx;
-			text-align: center;
-			padding: 0 8rpx;
-			z-index: 1;
-			box-shadow: 0 2rpx 10rpx rgba(255, 69, 68, 0.3);
 
-			.badge-text {
+.ai-icon {
-				font-size: 8rpx;
+	font-size: 40rpx;
-				// #ifdef MP-WEIXIN
-				font-size: 20rpx;
-				// #endif
-			}
-		}
-
-		// AI图标样式优化
-		.ai-icon {
-			font-size: 40rpx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 100%;
-			height: 100%;
-		}
-	}
 }
 </style>