CarRental/page_user/QrBind.vue

<template>
	<view class="page">
		<u-navbar title="扫码绑定" :border-bottom="false" :background="background" title-color='#000' title-size='36'
			height='45' back-icon-color='#000'></u-navbar>
		<!-- <image src="https://lxnapi.ccttiot.com/bike/img/static/uCCHcZsflexApimAoHRS" mode=""></image> -->
		<image class="addimg" src="https://lxnapi.ccttiot.com/bike/img/static/up10OC0DC0TdgLlHFLjB"
			mode="scaleToFill" />
		<view class="tips" style="width: 100%;">
			<view class="yuan">

			</view>
			当前暂无租赁车辆
		</view>
		<view class="addbtn" @click="qecodelock()" >
			<image src="https://lxnapi.ccttiot.com/bike/img/static/uuvkaXhhzU8rYPkctEPR" mode="" class="qrimg"></image>
			扫码用车

		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: {
				backgroundColor: " ",
			},
			sn:''
		}
	},
	methods: {
		qecodelock() {
			uni.scanCode({
				onlyFromCamera: true,
				scanType: ['qrCode'],
				success: res => {
		
					let sn = null;
					let queryParams = res.result.split('?')[1];
					if (queryParams) {
						let params = queryParams.split('&');
						params.forEach(param => {
							let [key, value] = param.split('=');
							if (key === 'sn') {
								sn = value;
							}
						});
					}
		
					this.sn = sn
					if (this.sn != '') {
						let data = {
							sn: this.sn
						}
						this.$u.get(`/appVerify/getDeviceBySn?`, data).then((res) => {
							if (res.code === 200) {
								if (res.data.status == 1) {
									uni.navigateTo({
										url: `/page_user/ordder?sn=${this.sn}`
									});
								} else {
									uni.showToast({
										title: '设备租赁中',
										icon: 'none'
									})
									return;
								}
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
							}
						});
					}
		
				},
				fail: err => {
					console.error('扫描失败：', err);
					uni.showToast({
						title: '扫描失败',
						icon: 'none'
					});
				}
			});
		},
	}
}
</script>

<style lang="scss">
page {
	overflow-y: auto;
	background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uYRs7Cv2Pbp95w3KjGO3');
	background-size: cover;
	/* 背景图片等比缩放以覆盖整个容器 */
	background-position: center;
	/* 背景图片居中显示 */
	background-repeat: no-repeat;
	/* 防止背景图片重复 */
	min-height: 100vh;
	/* 确保页面至少有 100% 的视窗高度，避免高度不足导致无法滚动 */

}

.page {
	image {
		width: 750rpx;
		height: 1994rpx;
	}

	.addimg {
		margin-left: 170rpx;
		margin-top: 100rpx;
		width: 562rpx;
		height: 596rpx;
	}

	.addbtn {
		margin: 0 auto;
		margin-top: 122rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 614rpx;
		height: 92rpx;
		background: #4297F3;
		box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: 600;
		font-size: 40rpx;
		color: #FFFFFF;

		.qrimg {
			margin-right: 20rpx;
			width: 34rpx;
			height: 34rpx;
		}
	}

	.tips {
		margin-top: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #3D3D3D;

		.yuan {
			margin-right: 14rpx;
			border-radius: 50%;
			width: 16rpx;
			height: 16rpx;
			background: #FF8282;
		}
	}
}
</style>