APP/pages/common/qrcode/qrcode.vue

<template>
	<view class="pageContent">
		<!-- 初始状态 -->
		<view class="pause" v-if="!isConnecting">
			<image src="/static/images/svg.png" class="svg"></image>
			<view class="scanT">ID: {{ deviceId }}</view>
		</view>

		<!-- 连接中状态 -->
		<view class="connecting-container" v-else>
			<view class="device-info">
				<view>
					<image src="/static/images/bip.6.png" class="bip"></image>
				</view>
				<text class="device-name">设备名：CLI</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.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 == 0) {
							this.isConnectNo=false
							this.isSuccess =true
							uni.hideLoading()
							uni.showToast({
								title: res.data,
								icon: 'success'
							});
							this.isConnecting = true;
						} else {
							uni.showToast({
								title: res.msg,
							});
						}

					} catch (error) {}
				}
			},
		},
		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>