zh-cashier-app/pages/index/index.vue

<template>
	<view class="index-box">
		<image src="@/static/img/box-bj.png" mode="scaleToFill"></image>
		<view class="box-border-box plr-28">
			<view class="save-box fs-42 fc-f text-align-center" @click="toList()">开始结账</view>
		</view>
	</view>
</template>

<script>
	import mqttClient from '@/common/js/mqtt.js'
	import ttsManager from '@/common/js/ttsManager.js';
	export default {
		data() {
			return {};
		},
		async onLoad() {
			// #ifdef APP-PLUS
			mqttClient.on('message', (data) => {
				// console.log('收到MQTT消息 (原始数据)', data); // 首先打印整个data
				try {
					// 假设 data 本身是 JSON 字符串，将其解析成对象
					const parsedData = JSON.parse(data);
					console.log('解析后的消息内容:', parsedData);
					if (parsedData.is_cancel) {
						return
					} else {
						uni.$emit('mqttEmit', parsedData.amount)
						uni.redirectTo({
							url: '/pages/index/success?amount=' + parsedData.amount
						})
					}
					// 收到消息后直接进行语音播报
					// ttsManager.speak(parsedData.msg);
				} catch (error) {
					console.error('解析MQTT消息失败，数据可能不是有效的JSON格式:', error);
					// console.log('原始消息内容:', data);
				}
			});
			// 连接服务器
			await this.connectToMQTT();
			// 检查连接状态
			await mqttClient.checkConnection();
			//#endif
		},
		methods: {
			toList() {
				uni.redirectTo({
					url: "/pages/index/order"
				})
			},
			connectToMQTT() {
				// 连接MQTT服务器
				console.log("连接MQTT服务器------");
				try {
					mqttClient.on('connected', () => {
						console.log('MQTT连接成功，开始订阅主题...');
						setTimeout(() => {
							this.subscribeToTopic(); // 在连接成功后自动订阅
						}, 1000)
					});
					// 发起连接
					mqttClient.connect({
						url: 'tcp://mqtt.jhcs888.com:21883',
						username: 'hjkj',
						password: 'ali2021',
						clientId: 'client_' + Math.random().toString(16).substr(2, 8),
						keepalive: 60, // 增加心跳间隔，单位秒
						clean: false, // 允许断线重连后恢复会话
						reconnectPeriod: 1000, // 断开后自动重连的间隔
						connectTimeout: 4000 // 连接超时时间（毫秒）
					});
					console.log('连接成功');
				} catch (error) {
					console.error('连接失败:', error);
				}
			},
			subscribeToTopic() {
				//  订阅主题
				try {
					mqttClient.subscribe('zsshop128');
					console.log('订阅指令已发送');
				} catch (error) {
					console.error('订阅失败:', error);
				}
			}
		},

	};
</script>


<style scoped lang="scss">
	.index-box {
		width: 100%;

		image {
			width: 100%;
			height: 1122rpx;
			margin-bottom: 45rpx;
		}

		.save-box {
			width: 100%;
			height: 83rpx;
			line-height: 83rpx;
			background: linear-gradient(270deg, #1778FD 0%, #4AB6FF 100%);
			box-shadow: 0rpx 0rpx 6rpx 0rpx #358AFD;
			border-radius: 69rpx;
		}
	}
</style>