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="isConnecting && !isConnected">连接中...</view>
			<view class="connecting-success" v-if="isConnected">设备绑定成功</view>
		</view>
		<view class="btn-bottom">
			<button class="login-btn" @click="handleConnect">
				{{ isConnecting ? '确认' : '连接' }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceId: '',
				isConnecting: false, // 是否正在连接
				isConnected: false // 是否连接成功
			}
		},
		methods: {
			handleConnect() {
				if (this.isConnecting) {

				} else {
					console.log('这里了么');
					// 开始连接逻辑
					uni.showLoading({
						mask: true,
						title: '加载中....'
					})
					this.isConnecting = true;
					//这里可以添加实际的连接操作
					setTimeout(() => {
						this.connectSuccess();
					}, 2000);
				}
			},
			connectSuccess() {
				uni.hideLoading()
				// 连接成功后的处理
				uni.showToast({
					title: '连接成功',
					icon: 'success'
				});

			}
		},
		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>