From 286fcc214290306a8d270eb48c343faca585f44f Mon Sep 17 00:00:00 2001
From: jinhhanhan <1683105490@qq.com>
Date: Tue, 13 Jan 2026 16:42:06 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E5=90=88=E5=B9=B6=E4=BA=86?=
 =?UTF-8?q?=E4=B9=8B=E5=89=8D=E6=99=BA=E8=83=BD=E5=AE=A2=E6=9C=8D=E7=9A=84?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/hover-nav/hover-nav.vue | 580 +++++++++++++----------------
 1 file changed, 262 insertions(+), 318 deletions(-)

diff --git a/components/hover-nav/hover-nav.vue b/components/hover-nav/hover-nav.vue
index e75fb19..3aaf9ed 100644
--- a/components/hover-nav/hover-nav.vue
+++ b/components/hover-nav/hover-nav.vue
@@ -1,341 +1,285 @@
 <template>
-	<!-- 悬浮按钮 -->
-	<view v-if="pageCount == 1 || need" class="fixed-box" 
-		:style="[{ height: fixBtnShow ? '400rpx' : '320rpx' }, customContainerStyle]">
-		<!-- 切换语言按钮 -->
-<button 
-  class="btn-item" 
-  v-if="fixBtnShow && isLanguageSwitchEnabled" 
-  @click="toggleLanguage()"
-  :style="[{ backgroundSize: '100% 100%' }, customButtonStyle]"
->
-  <text :style="customTextStyle">{{ currentLangDisplayName }}</text>
-</button>
+  <view v-if="pageCount == 1 || need" class="fixed-box"
+    :style="[{ height: fixBtnShow ? '400rpx' : '320rpx' }, customContainerStyle]">
 
-<!-- AI 智能助手 或 客服按钮（根据 enableAIChat 决定） -->
-<template v-if="fixBtnShow">
-  <!-- 优先显示 AI 助手（如果启用） -->
-  <view 
-    v-if="enableAIChat"
-    class="btn-item"
-    @click="openAIChat"
-    :style="{ backgroundImage: aiAgentimg ? `url(${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>
+
+    <!-- AI 智能助手（优先显示） -->
+    <view 
+      v-if="fixBtnShow && enableAIChat"
+      class="btn-item"
+      @click="openAIChat"
+      :style="{ backgroundImage: aiAgentimg ? `url(${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>
+
+    <!-- 普通客服（仅当未启用 AI 时显示） -->
+    <template v-else-if="fixBtnShow">
+      <!-- #ifdef MP-WEIXIN -->
+      <button 
+        class="btn-item" 
+        hoverClass="none" 
+        openType="contact"
+        sessionFrom="weapp"
+        showMessageCard="true"
+        :style="[{ backgroundImage: kefuimg ? `url(${kefuimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]"
+      >
+        <text class="icox icox-kefu" v-if="!kefuimg"></text>
+      </button>
+      <!-- #endif -->
+
+      <!-- #ifndef MP-WEIXIN -->
+      <button 
+        class="btn-item" 
+        hoverClass="none" 
+        @click="openKefuSelectPopup"
+        :style="[{ backgroundImage: kefuimg ? `url(${kefuimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]"
+      >
+        <text class="icox icox-kefu" v-if="!kefuimg"></text>
+      </button>
+      <!-- #endif -->
+    </template>
+
+    <!-- 电话按钮（始终显示） -->
+    <view 
+      v-if="fixBtnShow" 
+      class="btn-item" 
+      @click="call()"
+      :style="[{ backgroundImage: phoneimg ? `url(${phoneimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]"
+    >
+      <text class="iconfont icon-dianhua" v-if="!phoneimg"></text>
+    </view>
+
   </view>
-
-  <!-- 否则显示客服按钮 -->
-  <template v-else>
-    <!-- #ifdef MP-WEIXIN -->
-    <button 
-      class="btn-item" 
-      hoverClass="none" 
-      openType="contact" 
-      sessionFrom="weapp"
-      showMessageCard="true"
-      :style="[{ backgroundImage: kefuimg ? `url(${kefuimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]"
-    >
-      <text class="icox icox-kefu" v-if="!kefuimg"></text>
-    </button>
-    <!-- #endif -->
-
-    <!-- #ifndef MP-WEIXIN -->
-    <button 
-      class="btn-item" 
-      hoverClass="none" 
-      @click="openKefuSelectPopup"
-      :style="[{ backgroundImage: kefuimg ? `url(${kefuimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]"
-    >
-			<text class="icox icox-kefu" v-if="!kefuimg"></text>
-		<!-- 	<view>首页</view> -->
-		</button>
-		<!-- #endif -->
-		<view class="btn-item" v-if="fixBtnShow" @click="call()"
-			:style="[{ backgroundImage: 'url(' + (phoneimg ? phoneimg : '') + ')', backgroundSize: '100% 100%' }, customButtonStyle]">
-			<text class="iconfont icon-dianhua" v-if="!phoneimg"></text>
-		</view>
-
-		<!-- 	<view class="btn-item icon-xiala" v-if="fixBtnShow" @click="fixBtnShow ? (fixBtnShow = false) : (fixBtnShow = true)">
-			<text class="iconfont icon-unfold"></text>
-		</view>
-		<view class="btn-item switch" v-else :class="{ show: fixBtnShow }"
-			@click="fixBtnShow ? (fixBtnShow = false) : (fixBtnShow = true)">
-			<view class="">快捷</view>
-			<view>导航</view>
-		</view> -->
-	</view>
 </template>
 
 <script>
-import { mapGetters } from 'vuex' // 去掉mapMutations，直接用$store.commit
 import { createCustomerService } from '@/common/js/customer-service.js';
+
 export default {
-	name: 'hover-nav',
-	props: {
-		need: {
-			type: Boolean,
-			default: false
-		}
-	},
-	data() {
-		return {
-			pageCount: 0,
-			fixBtnShow: true,
-			tel: '',
-			kefuimg: '',
-			phoneimg: '',
-			shopInfo: null, // 店铺信息对象
+  name: 'hover-nav',
+  props: {
+    need: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      pageCount: 0,
+      fixBtnShow: true,
+      tel: '',
+      kefuimg: '',
+      phoneimg: '',
+      shopInfo: null,
+      enableAIChat: false,
+      aiAgentimg: '',
+      // 从 Vuex 获取未读数
+      // 注意：这里不要在 data 里定义 unreadCount，用 computed 更好
+      currentLangIndex: 0,
+      langIndexMap: {},
+      isLanguageSwitchEnabled: false,
+      kefuList: [
+        { 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,
+      customerService: null,
+      buttonConfig: null
+    };
+  },
+  created() {
+    this.initLanguage();
+    this.kefuimg = this.$util.getDefaultImage().kefu;
+    this.phoneimg = this.$util.getDefaultImage().phone;
+    this.pageCount = getCurrentPages().length;
 
-			// --- 语言切换相关 ---
-			currentLangIndex: 0,  // 当前选中的语言索引
-			langIndexMap: {},     // 语言索引到语言值的映射
-			isLanguageSwitchEnabled: false,  // 是否启用语言切换
+    uni.getStorage({
+      key: 'shopInfo',
+      success: (e) => {
+        this.shopInfo = e.data;
+        this.tel = e.data.mobile;
+        this.isLanguageSwitchEnabled = !!e.data.ischina;
+        this.enableAIChat = !!e.data.enableAIChat;
+        this.aiAgentimg = e.data.aiAgentimg || '';
+      }
+    });
+  },
+  computed: {
+    currentLangDisplayName() {
+      const lang = this.langIndexMap[this.currentLangIndex];
+      return lang === 'zh-cn' ? 'EN' : 'CN';
+    },
+    customContainerStyle() {
+      return this.shopInfo?.floatingButton?.container || {};
+    },
+    customButtonStyle() {
+      return this.shopInfo?.floatingButton?.button || {};
+    },
+    customTextStyle() {
+      return this.shopInfo?.floatingButton?.text || {};
+    },
+    // 👇 关键：从 Vuex 读取未读消息数
+    unreadCount() {
+      return this.$store.state.aiUnreadCount || 0;
+    }
+  },
+  methods: {
+    initLanguage() {
+      this.langList = this.$langConfig.list();
+      this.langIndexMap = {};
+      for (let i = 0; i < this.langList.length; i++) {
+        this.langIndexMap[i] = this.langList[i].value;
+      }
+      const savedLang = uni.getStorageSync('lang');
+      if (savedLang) {
+        for (let i = 0; i < this.langList.length; i++) {
+          if (this.langList[i].value === savedLang) {
+            this.currentLangIndex = i;
+            break;
+          }
+        }
+      } else {
+        this.currentLangIndex = 0;
+      }
+    },
+    call() {
+      uni.makePhoneCall({ phoneNumber: this.tel + '' });
+    },
+    toggleLanguage() {
+      this.currentLangIndex = this.currentLangIndex === 0 ? 1 : 0;
+      const targetLang = this.langIndexMap[this.currentLangIndex];
+      let currentRoute = this.$util.getCurrentRoute().path;
+      this.$langConfig.change(targetLang, currentRoute);
+    },
+    openKefuSelectPopup() {
+      const kefuNames = this.kefuList.map(item => item.name);
+      uni.showActionSheet({
+        itemList: kefuNames,
+        success: (res) => {
+          this.selectedKefu = this.kefuList[res.tapIndex];
+          this.reinitCustomerService(this.selectedKefu);
+          this.handleSelectedKefu();
+        }
+      });
+    },
+    reinitCustomerService(kefu) {
+      this.customerService = createCustomerService(this, kefu);
+      this.buttonConfig = this.customerService.getButtonConfig();
+    },
+    handleSelectedKefu() {
+      const kefu = this.selectedKefu;
+      if (!kefu) return;
 
-			// --- 其他 ---
-		};
-	},
-	created() {
-		// 初始化语言设置
-		this.initLanguage();
-
-		this.kefuimg = this.$util.getDefaultImage().kefu
-		this.phoneimg = this.$util.getDefaultImage().phone
-		this.pageCount = getCurrentPages().length;
-		
-		// 从店铺信息中获取相关信息
-		uni.getStorage({
-			key: 'shopInfo',
-			success: (e) => {
-				console.log(`获取到的shopInfo:${JSON.stringify(e.data)}`)
-				this.shopInfo = e.data;
-
-				// 从店铺信息中获取手机号
-				this.tel = e.data.mobile
-				// 从店铺信息中获取是否启用语言切换
-				this.isLanguageSwitchEnabled = e.data.ischina;
-			}
-		})			
-	},
-	computed: {
-		currentLangDisplayName() {
-			// 语言切换按钮显示名称，当前语言为中文时显示EN，否则显示CN
-			// 根据 langIndexMap 获取当前语言值
-			const lang = this.langIndexMap[this.currentLangIndex];
-			return lang == 'zh-cn' ? 'EN' : 'CN';
-		},
-			};
-		// 获取容器的自定义样式
-		customContainerStyle() {
-			// 只返回非空的样式属性，确保不覆盖原有的默认样式
-			return this.shopInfo?.floatingButton?.container || {};
-data() {
-			return {
-				pageCount: 0,
-				fixBtnShow: true,
-				tel: '',
-				kefuimg: '',
-				phoneimg: '',
-				customerService: null,
-				buttonConfig: null,
-				kefuList: [
-					{ 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
-			};		},
-
-		// 获取按钮的自定义样式
-		customButtonStyle() {
-			// 只返回非空的样式属性，确保不覆盖原有的默认样式
-			return this.shopInfo?.floatingButton?.button || {};
-		},
-
-		// 获取文本的自定义样式
-		customTextStyle() {
-			// 只返回非空的样式属性，确保不覆盖原有的默认样式
-			return this.shopInfo?.floatingButton?.text || {};
-		}
-	},
-	methods: {
-		initLanguage() {
-			// 初始化语言列表
-			this.langList = this.$langConfig.list();
-
-			// 初始化语言索引映射
-			for (let i = 0; i < this.langList.length; i++) {
-				this.langIndexMap[i] = this.langList[i].value;
-			}
-
-			// 获取存储的语言设置
-			const savedLang = uni.getStorageSync('lang');
-			if (savedLang) {
-				for (let i = 0; i < this.langList.length; i++) {
-					if (this.langList[i].value == savedLang) {
-						this.currentLangIndex = i;
-						break;
-					}
-				}
-			} else {
-				this.currentLangIndex = 0;
-			}
-		},
-		//拨打电话
-		call() {
-			uni.makePhoneCall({
-				phoneNumber: this.tel + ''
-			})
-		},
-		toggleLanguage() {
-			// 切换语言索引
-			this.currentLangIndex = this.currentLangIndex == 0 ? 1 : 0;
-			const targetLang = this.langIndexMap[this.currentLangIndex];
-
-			// 获取当前页面路由
-			let currentRoute = this.$util.getCurrentRoute().path;
-			// 切换语言并重新加载当前页面
-			this.$langConfig.change(targetLang, currentRoute);
-
-		}
-	}
+      if (kefu.isOfficial) {
+        uni.openCustomerServiceConversation({
+          sessionFrom: 'weapp',
+          showMessageCard: true
+        });
+      } else if (kefu.id === 'custom-kefu') {
+        this.customerService.handleCustomerClick();
+      } else if (kefu.id === 'qyweixin-kefu') {
+        this.customerService.handleQyWeixinKefuClick();
+      }
+    },
+    openAIChat() {
+      if (this.enableAIChat) {
+        this.$store.commit('setAiUnreadCount', 0);
+      }
+      this.$util.redirectTo('/pages_tool/ai-chat/index');
+    }
+  }
 };
 </script>
 
-			// 打开客服选择弹窗
-			openKefuSelectPopup() {
-				const kefuNames = this.kefuList.map(item => item.name);
-				wx.showActionSheet({
-					itemList: kefuNames,
-					success: (res) => {
-						this.selectedKefu = this.kefuList[res.tapIndex];
-						this.reinitCustomerService(this.selectedKefu);
-						this.handleSelectedKefu();
-					}
-				});
-			},
-
-			// 重新初始化客服实例
-			reinitCustomerService(kefu) {
-				this.customerService = createCustomerService(this, kefu);
-				this.buttonConfig = this.customerService.getButtonConfig();
-			},
-		}
-
-			// 执行选中的客服逻辑
-			handleSelectedKefu() {
-				const kefu = this.selectedKefu;
-				if (!kefu) return;
-
-				if (kefu.isOfficial) {
-					wx.openCustomerServiceConversation({ sessionFrom: 'weapp', showMessageCard: true });
-				} else if (kefu.id === 'custom-kefu') {
-					this.customerService.handleCustomerClick();
-				} else if (kefu.id === 'qyweixin-kefu') {
-					this.customerService.handleQyWeixinKefuClick();
-				}
-			},
-
-			// 打开AI聊天（修复setAiUnreadCount的核心）
-			openAIChat() {
-				if (this.enableAIChat) {
-					// 直接用$store.commit调用Vuex mutation，绕过映射问题
-					this.$store.commit('setAiUnreadCount', 0);
-				}
-				this.$util.redirectTo('/pages_tool/ai-chat/index')
-			}
-		}
-	};
-</script>
+<style scoped>
+.fixed-box {
+  position: fixed;
+  right: 0rpx;
+  bottom: 240rpx;
+  /* #ifdef H5 */
+  bottom: 320rpx;
+  /* #endif */
+  z-index: 10;
+  border-radius: 120rpx;
+  padding: 20rpx 0;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  width: 100rpx;
+  box-sizing: border-box;
+  transition: 0.3s;
+  overflow: hidden;
 }
 
-//悬浮按钮
-.fixed-box {
-	position: fixed;
-	right: 0rpx;
-	bottom: 240rpx;
-	// #ifdef H5
-	bottom: 320rpx;
-	// #endif
-	z-index: 10;
-	border-radius: 120rpx;
-	padding: 20rpx 0;
-	display: flex;
-	justify-content: center;
-	flex-direction: column;
-	width: 100rpx;
-	box-sizing: border-box;
-	transition: 0.3s;
-	overflow: hidden;
+.btn-item {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  flex-direction: column;
+  line-height: 1;
+  margin: 14rpx 0;
+  transition: 0.1s;
+  background: var(--hover-nav-bg-color);
+  color: var(--hover-nav-text-color);
+  border-radius: 40rpx;
+  width: 80rpx;
+  height: 80rpx;
+  padding: 0;
+  overflow: hidden;
+}
 
-	.btn-item {
-		display: flex;
-		justify-content: center;
-		text-align: center;
-		flex-direction: column;
-		line-height: 1;
-		margin: 14rpx 0;
-		transition: 0.1s;
-		background: var(--hover-nav-bg-color);
-		color: var(--hover-nav-text-color);
-		border-radius: 40rpx;
-		width: 80rpx;
-		height: 80rpx;
-		padding: 0;
-		overflow: hidden;
+.btn-item text {
+  font-size: 28rpx;
+}
 
-		text {
-			font-size: 28rpx;
-		}
-		.iconfont,
-		.icox {
-			font-size: 36rpx;
-			font-weight: bold;
-			width: 100%;
-			height: 100%;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			margin: 14rpx 0;
-			background: #fff;
-			border-radius: 50rpx;
-			width: 80rpx;
-			height: 80rpx;
-			padding: 0;
-			position: relative;
+.iconfont,
+.icox {
+  font-size: 36rpx;
+  font-weight: bold;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 14rpx 0;
+  background: #fff;
+  border-radius: 50rpx;
+  width: 80rpx;
+  height: 80rpx;
+  padding: 0;
+  position: relative;
+}
 
-			text {
-				font-size: 36rpx;
-				font-weight: bold;
-			}
+.iconfont text,
+.icox text {
+  font-size: 36rpx;
+  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);
-			}
+.unread-badge {
+  position: absolute;
+  top: -5rpx;
+  right: -5rpx;
+  background-color: #ff4544;
+  color: white;
+  border-radius: 20rpx;
+  min-width: 30rpx;
+  height: 30rpx;
+  font-size: 20rpx;
+  line-height: 30rpx;
+  text-align: center;
+  padding: 0 8rpx;
+  box-shadow: 0 2rpx 10rpx rgba(255, 69, 68, 0.3);
+}
 
-			.ai-icon {
-				font-size: 40rpx;
-				width: 100%;
-				height: 100%;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-		}
-	}
+.ai-icon {
+  font-size: 40rpx;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 </style>
\ No newline at end of file