170 lines
3.3 KiB
Vue
170 lines
3.3 KiB
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>
|