APP/pages/common/qrcode/qrcode.vue

<template>
	<view class="pageContent">
		<!-- 初始状态 -->
		<view class="pause" v-if="!isConnecting">
			<image src="/static/images/common/svg.png" class="svg"></image>
			<view class="scanT">ID: {{ deviceId }}</view>
		</view>
		<!-- 连接中状态 -->
		<view class="connecting-container" v-else>
			<view class="device-info">
				<view class="">
					<image src="/static/images/common/svg.png" class="svg"></image>
				</view>

				<text class="device-name">设备名：{{deviceId}}</text>
				<text class="device-model1">ID:{{deviceId}}</text>
			</view>
			<view class="connecting-line" v-if="isConnectNo">连接中...</view>
			<view class="connecting-success" v-if="isSuccess">设备绑定成功</view>
		</view>
		<view class="btn-bottom">
			<button class="login-btn" @click="handleConnect">
				{{ isConnecting ? '确认' : '连接' }}
			</button>
		</view>
	</view>
</template>

<script>
	import {
		deviceBind
	} from "@/api/common/qrcode.js"
	export default {
		data() {
			return {
				deviceId: '',
				isConnecting: false, // 是否正在连接
				isConnected: false, // 是否连接成功
				isConnectNo: false,
				isSuccess: false
			}
		},
		methods: {
			async handleConnect() {
				if (this.isConnecting) {
					// 绑定成功,确认按钮跳转到首页并通知刷新数据
					uni.$emit('refreshDeviceList'); // 发出刷新事件
					// 绑定成功,确认按钮跳转到首页
					uni.switchTab({
						url: '/pages/common/index/index'
					})

				} else {
					// 开始连接逻辑
					uni.showLoading({
						mask: true,
						title: '加载中....'
					})
					this.isConnecting = true;
					this.isConnectNo = true
					try {
						// 调用绑定设备接口
						const res = await deviceBind({
							deviceImei: this.deviceId,
							deviceMac: '',
							communicationMode: '0', //0是4g,1是蓝牙
						})
						console.log(this.deviceId, 'deerer ere');
						if (res.code == 200) {
							
							this.isConnectNo = false
							this.isSuccess = true
							uni.hideLoading()
							uni.showToast({
								title: res.data,
								icon: 'success'
							});
							this.isConnecting = true;
						} else {
							this.isConnectNo = false
							uni.showToast({
								title: res.msg,
							});
						}

					} catch (error) {}
				}
			},
	},
	// 处理返回键
	onBackPress() {
		// 如果绑定成功了，返回时也要刷新首页
		if (this.isSuccess) {
			uni.$emit('refreshDeviceList');
		}
		return false; // 允许正常返回
	},
	// 页面卸载时处理
	onUnload() {
		// 如果绑定成功了，卸载时也要刷新首页
		if (this.isSuccess) {
			uni.$emit('refreshDeviceList');
		}
	},
	onLoad(options) {
		if (options.deviceId) {
			this.deviceId = decodeURIComponent(options.deviceId);
		} else {
			this.deviceId = '未获取到设备ID';
		}
	}
	}
</script>

<style scoped>
	.pageContent {
		height: 100vh;
		background-color: rgb(18, 18, 18);
		padding: 30rpx;
		position: relative;
	}

	.pause {
		text-align: center;
		transform: translate(-50%, -100%);
		position: absolute;
		left: 50%;
		top: 30%;
	}

	.scanT {
		color: rgba(255, 255, 255, 0.87);
		font-size: 38rpx;
		padding-top: 20rpx;
	}

	.svg {
		width: 120rpx;
		height: 120rpx;
	}

	.login-btn {
		background-color: rgb(187, 230, 0);
		color: rgb(35, 35, 35);
		border-radius: 50rpx;
		position: absolute;
		bottom: 200rpx;
		width: 90%;
		box-sizing: border-box;
	}

	/* 连接中状态样式 */
	.connecting-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		position: absolute;
		top: 20%;
		left: 0;
		right: 0;
	}

	.connecting-text {
		font-size: 36rpx;
		color: rgba(255, 255, 255, 0.87);
		margin-bottom: 40rpx;
		font-weight: bold;
	}

	.device-dimensions,
	.dimensions {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.6);
		margin-bottom: 20rpx;
	}

	.scanned-device {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.87);
		margin-bottom: 30rpx;
	}

	.device-info {
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;
	}

	.device-name {
		color: rgba(255, 255, 255, 0.87);
		font-size: 34rpx;
		margin-top: 10rpx;
	}

	.device-model1 {
		color: rgba(255, 255, 255, 0.6);
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.connecting-line {
		font-size: 30rpx;
		color: rgba(255, 255, 255, 0.6);
		margin-bottom: 40rpx;
	}

	.bip {
		width: 174rpx;
		height: 123rpx;
	}

	.connecting-success {
		color: rgb(187, 230, 0);
	}
</style>