chuangte_bike_newxcx/page_fenbao/index.vue

<template>
	<view class="page">
		<u-navbar title="编号开锁" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>
		<view class="title">
			车辆编号开锁
		</view>
		<view class="shuom">
			请输入二维码下方的车辆编号
		</view>
        <view class="img">
        	<image src="https://api.ccttiot.com/smartmeter/img/static/uX29DoZzt2iTzWzASa8v" mode=""></image>
        </view>
		<view class="shuru">
			<input type="text" v-model="sn" placeholder="请输入二维码下方的车辆编号"/>
		</view>
		<view class="anniu" @click="btnkaisuo">
			确认开锁
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "",
				},
                sn:''

			}
		},
		methods: {
            // 确认开锁
			btnkaisuo(){
				this.$u.get("/app/device/availableDetail?sn=" + this.sn).then((res) => {
					if (res.code == 200) {
						if(res.data){
							uni.navigateTo({
								url:'/page_fenbao/storedlist/trueorder?modelId=' + res.data.modelId + '&sn=' + this.sn
							})
						}else{
							uni.showToast({
								title:'当前车辆不可用',
								icon: 'none',
								duration:2000
							})
						}
					}else if(res.code == 401){
							uni.showModal({
								title: '提示',
								content: '您当前未登录，是否前去登录？',
								showCancel: true,
								success: function (res) {
									if (res.confirm) {
										uni.reLaunch({
											url:'/pages/login/login'
										})
									} else if (res.cancel) {
										
									}
								}
							})
						} else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration:2000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.anniu{
		width: 658rpx;
		height: 86rpx;
		background: #4297F3;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		margin: auto;
		margin-top: 82rpx;
		line-height: 86rpx;
	}
	.shuru{
		margin: auto;
		width: 658rpx;
		height: 80rpx;
		background: #F3F3F3;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid rgba(187,187,187,0.5);
		text-align: center;
		margin-top: 48rpx;
		input{
			width: 658rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
		}
	}
	.img{
		width: 658rpx;
		height: 224rpx;
		margin: auto;
		margin-top: 36rpx;
		image{
			width: 658rpx;
			height: 224rpx;
		}
	}
	.shuom{
		width: 100%;
		text-align: center;
		font-size: 36rpx;
		color: #3D3D3D;
		margin-top: 36rpx;
	}
    .title{
		width: 100%;
		text-align: center;
		font-weight: 600;
		font-size: 48rpx;
		color: #3D3D3D;
		margin-top: 48rpx;
	}
	
</style>