<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/orderDevice/mineUsing").then(res =>{
					if(res.code == 200){
						if(res.data){
							uni.switchTab({
								url:'/pages/nearbystores/index'
							})
						}else{
							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>