lucky_shop/components/hover-nav/hover-nav.vue

<template>
	<!-- 悬浮按钮 -->
	<view v-if="pageCount == 1 || need" class="fixed-box" :style="{ height: fixBtnShow ? '330rpx' : '120rpx' }">
		<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>
		<!-- 自定义客服按钮 -->
		<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>
		<!-- AI智能助手 -->
		<view class="btn-item" v-if="fixBtnShow && enableAIChat" @click="openAIChat"
			: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>
		<!-- 电话（保留下方的这个） -->
		<view class="btn-item" v-if="fixBtnShow" @click="call()"
			:style="{ backgroundImage: 'url(' + (phoneimg ? phoneimg : '') + ')', backgroundSize: '100% 100%' }">
			<text class="iconfont icon-dianhua" v-if="!phoneimg"></text>
		</view>
	</view>
</template>

<script>
import { createCustomerService } from '@/common/js/ai-service.js';
import { mapGetters, mapMutations } from 'vuex';

export default {
	name: 'hover-nav',
	props: {
		need: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			pageCount: 0,
			fixBtnShow: true,
			tel: '',
			kefuimg: '',
			phoneimg: '',
			customerService: null,
			buttonConfig: null
		};
	},
	created() {
		this.kefuimg = this.$util.getDefaultImage().kefu;
		this.phoneimg = this.$util.getDefaultImage().phone;
		this.pageCount = getCurrentPages().length;

		this.customerService = createCustomerService(this);
		this.buttonConfig = this.customerService.getButtonConfig();

		const that = this;
		uni.getStorage({
			key: 'shopInfo',
			success(e) {
				// 校验手机号是否有效，避免空值或非手机号
				if (e.data && e.data.mobile && /^1[3-9]\d{9}$/.test(e.data.mobile)) {
					that.tel = e.data.mobile;
				}
			},
			// 补充storage读取失败的提示
			fail() {
				console.warn('未获取到店铺信息');
			}
		});
	},
	computed: {
		...mapGetters([
			'globalAIKefuConfig',
			'aiUnreadCount'
		]),
		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: {
		...mapMutations([
			'setAiUnreadCount'
		]),
		/**
		 * 拨打电话逻辑：增加手机号校验和异常处理
		 */
		call() {
			// 1. 校验手机号是否存在且有效
			if (!this.tel || !/^1[3-9]\d{9}$/.test(this.tel)) {
				uni.showToast({
					title: '暂无有效联系电话',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			// 2. 调用系统拨号API（自动弹出拨号对话框）
			uni.makePhoneCall({
				phoneNumber: this.tel,
				// 拨号失败的回调（如用户取消、设备不支持等）
				fail(err) {
					console.log('拨号操作失败：', err);
					// 非用户取消的情况，给出提示
					if (err.errMsg !== 'makePhoneCall:fail cancel') {
						uni.showToast({
							title: '拨号失败，请稍后重试',
							icon: 'none',
							duration: 2000
						});
					}
				}
			});
		},
		openAIChat() {
			if (this.enableAIChat) {
				this.setAiUnreadCount(0);
			}
			this.$util.redirectTo('/pages_tool/ai-chat/index');
		},
		contactServicer() {
			this.customerService.handleCustomerClick();
		}
	}
};
</script>

<style lang="scss">
.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;
	bottom: 200rpx;
	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;
		align-items: center;
		text-align: center;
		flex-direction: column;
		line-height: 1;
		margin: 14rpx 0;
		transition: 0.1s;
		background: #fff;
		border-radius: 50rpx;
		width: 80rpx;
		height: 80rpx;
		padding: 0;
		position: relative;

		text {
			font-size: 36rpx;
			font-weight: bold;
		}

		view {
			font-size: 26rpx;
			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: 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 {
				font-size: 8rpx;
				// #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>