CarRental/page_user/SnBind.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>
			请输入二维码下方SN码
		</view>
		<view class="inputbox">
			<u-input v-model="sn" placeholder-style="font-size: 32rpx;color: #3D3D3D;" placeholder="请输入SN码"
				class="input" />
		</view>
		<view class="addbtn" @click="addsn">
			确认
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: {
				backgroundColor: " ",
			},
			sn: ''
		}
	},
	methods: {
		addsn() {
			// else if (!/^\d{7}$/.test(this.sn)) {  // 添加正则验证
			// 	uni.showToast({
			// 		title: '无效的sn码',
			// 		icon: 'none'
			// 	})
			// 	return;
			// }
			if (this.sn == '') {
				uni.showToast({
					title: '请输入SN码',
					icon: 'none'
				})
				return;
			} else {
				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
						});
					}
				});
			}

		}
	}
}
</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;
	}

	.inputbox {
		margin: 0 auto;
		margin-top: 122rpx;
		width: 688rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		display: flex;
		// align-items: center;
		// justify-content: center;
		padding: 20rpx;

		.input {

			width: 100%;
			height: 90rpx;
			font-size: 32rpx;
		}
	}

	.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>