shanxian-work-app/pages/index/bikeTest.vue

<template>
	<view class="bikeTest">
		<view class="testFind">
			<input placeholder="请输入车牌号" placeholder-class="place" type="number" v-model="bike_no" @input="bindKeyInput" @blur="bindKeyInput"></input>
			<text class="saomiao" @click="scanCode">扫描</text>
			<view class="find" @click="getBike_info">查找</view>
		</view>
		<view class="model" v-if="bikeBolear">
			<text>当前输入编号车辆</text>
			<text v-for="(item,index) in bikesArr" @click="getBike(item)">
				{{item}}
			</text>
		</view>
		<view class="beijing" v-if="bikeBolear" @click="bikesHidden" catchtouchmove="return"></view>
		<view class="testMess">
			<view class="messTitle">
				<view class="">
					车辆检测信息
				</view>
				<view class="flexC">
					<image src="http://resource.bike.hanyiyun.com/yunwei/bikeDe.png" style="width:45rpx;height:45rpx;" @click="skipDetail"></image>
				</view>
			</view>
			<view class="messList">
				<view class="listChid">
					车牌号：{{bikeDetail.bike_no}}
				</view>
				<view class="listChid">
					当前电量：{{bikeDetail.battery_power}}%
				</view>
				<view class="listChid"> 
					车辆状态：{{bikeDetail.tab_name}}
				</view>
				<view class="listChid">
					最后定位：{{bikeDetail.last_time}}
				</view>
			</view>
		</view>
		<view class="orderTest">
			<view class="orderTop">
				<view class="topLeft">
					车辆检测指令
				</view>
				<view class="topRight">
					只开启蓝牙操控
					<switch @change="switchChange" style="transform:scale(0.7)" v-if="checked==true" checked="checked" />
					<switch @change="switchChange" style="transform:scale(0.7)" v-if="checked==false" />
				</view>
			</view>
			<view class="orderDetail">
				<view class="children" @click="whistle">
					<image src="../../static/img/open-lock.png" mode=""></image>
					<view class="">
						鸣笛
					</view>
				</view>
				<view class="children" @click="unlock">
					<image src="../../static/img/open-lock.png" mode=""></image>
					<view class="">
						开电车锁
					</view>
				</view>
				<view class="children" @click="close_lock">
					<image src="../../static/img/close-lock.png" mode=""></image>
					<view class="">
						关电车锁
					</view>
				</view>
				<view class="children" @click="battery_load">
					<image src="../../static/img/battery-load.png" mode=""></image>
					<view class="">
						开电池锁
					</view>
				</view>
				<view class="children" @click="online">
					<image src="../../static/img/online.png" mode=""></image>
					<view class="">
						上线
					</view>
				</view>
				<view class="children" @click="more">
					<image src="../../static/img/more.png" mode=""></image>
					<view class="">
						更多
					</view>
				</view>
			</view>
			<view class="background" v-if="moreShow" @click="coverHidn(1)" catchtouchmove="true"></view>
			<view class="more" v-if="moreShow">
				<view @click="Offline">
					<image src="/static/img/offline.png" style="width:62upx;height:60upx;"></image>
					<view>下线</view>
				</view>
				<view @click="renewalPower">
					<image src="/static/img/renewalPower.png" style="width:62upx;height:60upx;"></image>
					<text>更新电量</text>
				</view>
				<view @click="renewalLocation">
					<image src="/static/img/renewalLocation.png" style="width:62upx;height:60upx;"></image>
					<text>更新位置</text>
				</view>
				<view @click="renewal">
					<image src="/static/img/renewal.png" style="width:62upx;height:60upx;"></image>
					<text>重启中控</text>
				</view>
				<view @click="recover">
					<image src="http://resource.weilaibike.com/bike_yunwei/park.png" style="width:50upx;height:50upx;"></image>
					<text>设为停车区</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import {
		BluetoothManager,
		BtErrorCode,
		CMD
	} from '../../static/js/bluWKM.js';
	const bluM = new BluetoothManager;
	export default {
		data() {
			return {
				bike_no: '', //车牌号
				box_no: '', //中控编号
				bikeDetail: [],
				bikeId: '',
				areaID: '',
				moreShow: false,
				checked: false, //是否只开启蓝牙操控
				bikeBolear:false,
				bikesArr:[]
			}
		},
		methods: {
			switchChange: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.target.value)
				this.checked = e.target.value;
			},
			getBike:function(e){
				console.log(e)
				// this.bike_no = e;
				this.bike_info(e)
				this.bikeBolear=false;
			},
			bikesHidden:function(){
				this.bikeBolear=false;
			},
			coverHidn: function(e) {
				this.moreShow = false
			},
			more: function() {
				this.moreShow = true;
			},
			skipDetail:function() {
			    if (!this.bike_no) {
			      wx.showToast({
			        title: '请先输入车牌号',
			        icon: 'none'
			      })
			    } else {
					uni.navigateTo({
						url: '../manage/bikeDetail?bike_no=' + this.bike_no + '&id=' + this.bikeDetail.id
					})
			    }
			  },
			scanCode: function() {
				var that = this;
				console.log('scanCode')
				uni.scanCode({
					success: function(res) {
						let index = res.result.lastIndexOf("\=");
						var code = res.result.substring(index + 1, res.result.length);
						that.bikeId = code;
						that.bike_info(code)
					},
					fail: function() {
						uni.showModal({
							title: '提示',
							content: '手动输入车辆标号',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/manualInp/manualInp',
									})
								}
							}
						})
					}
				})
			},
			bike_info:function(bikeId = false){
				uni.showLoading({
					title: '加载中...',
				})
				if (typeof bikeId === 'object') {
					bikeId = this.bikeId
				}
				console.log(bikeId, 'bikeId')
				this.bike_no = bikeId;
				app.request('bike/getBikeInfo?bike_no=' + this.bike_no, '', 'GET').then(res => {
					uni.hideLoading();
					console.log(res, '获取车辆信息')
					if (res.data.bike_info == '' || res.statusCode!=200) {
						uni.showToast({
							title: '暂无该车辆信息~',
						})
					} else {
						console.log(res.data, '车辆信息')
						this.bikeDetail = res.data.bike_info;
					}
					if (res.data.bike_info.tab_name == '中控离线') {
						console.log(1111)
						uni.openBluetoothAdapter({
							success(res) {
								console.log(res)
								that.checked = true;
							},
							fail(err) {
								console.log(err)
								uni.showModal({
									title: '提示',
									content: '当前车辆请开启蓝牙进行操作',
									showCancel: false
								})
								that.checked = false;
							}
						})
					}
				})
			},
			// 获取车辆信息
			getBike_info: function(bikeId = false) {
				uni.showLoading({
					title: '加载中...',
				})
				var that = this;
				if (typeof bikeId === 'object') {
					bikeId = this.bikeId
				}
				console.log(bikeId, 'bikeId')
				this.bike_no = bikeId;
				app.request('bike/searchBike?bike_no='+this.bike_no,'','GET').then(res=>{
					console.log(res)
					if(res.statusCode==200){
						uni.hideLoading()
						var bikes = Object.values(res.data.bikes)
						if(bikes.length>1){
						that.bikeBolear=true;
						that.bikesArr = bikes
						}else if(bikes.length==1){
							that.bike_info(bikes[0])
						}else{
							uni.showToast({
								title: '暂无该车辆信息~',
								icon:'none'
							})
						}
						
					}else{
						uni.showToast({
							title: '暂无该车辆信息~',
							icon:'none'
						})
					}
				})
			},
			//获取输入框的值
			bindKeyInput: function(e) {
				// console.log(e.detail.value, 11111)
				this.bikeId = e.detail.value;
			},
			// 鸣笛
			whistle: function() {
				var that = this;
				console.log(that.bikeDetail)
				if (this.checked) {
					bluM.connectDeivece(that.bikeDetail.box_no, CMD.bell)
				} else {
					uni.showLoading({
						title: '响铃中...'
					})
					app.request('bike/bikeBell?bike_id=' + that.bikeDetail.id, '', 'GET').then(res => {
						if (res.statusCode == 200) {
							uni.showToast({
								title: '响铃成功',
								icon: 'none'
							})
						}
					})
				}
			},
			//开锁
			unlock: function() {
				var that = this;
				if (this.checked) {
					bluM.connectDeivece(that.bikeDetail.box_no, CMD.unlock)
				} else {
					uni.showLoading({
						title: '开锁中...'
					})
					app.request('bike/openBikeLock?bike_id=' + that.bikeDetail.id, '', 'GET').then(res => {
						if (res.statusCode == 200) {
							uni.showToast({
								title: '开锁成功',
								icon: 'none'
							})
						}
					})
				}
			},
			//关锁
			close_lock: function() {
				var that = this;
				if (this.checked) {
					bluM.connectDeivece(that.bikeDetail.box_no, CMD.lock)
				} else {
					uni.showLoading({
						title: '关锁中...'
					})
					app.request('bike/closeBikeLock?bike_id=' + that.bikeDetail.id, '', 'GET').then(res => {
						if (res.statusCode == 200) {
							uni.showToast({
								title: '关锁成功',
								icon: 'none'
							})
						}
					})
				}
			},
			//开电池锁
			battery_load: function() {
				var that = this;
				if (this.checked) {
					bluM.connectDeivece(that.bikeDetail.box_no, CMD.batteryUnlock)
				} else {
					uni.showLoading({
						title: '开电池锁中...'
					})
					app.request('bike/openBatteryLock?bike_id=' + that.bikeDetail.id, '', 'GET').then(res => {
						if (res.statusCode == 200) {
							uni.showToast({
								title: '开电池锁成功',
								icon: 'none'
							})
						}
					})
				}
			},
			renewalPower: function() {
				//更新电量
				app.request('bike/newBikeBatteryMSG?bike_id=' + this.bikeDetail.id, '', 'GET').then(res => {
					// console.log(res)
					if (res.statusCode == 200) {
						uni.showToast({
							title: '更新电量成功',
							icon: 'none'
						})
					}
				})
			},
			renewalLocation: function() {
				//更新位置
				app.request('bike/newBikeLocation?bike_id=' + this.bikeDetail.id, '', 'GET').then(res => {
					if (res.statusCode == 200) {
						uni.showToast({
							title: '更新位置成功',
							icon: 'none'
						})
					}
				})
			},
			renewal: function() {
				//重启中控
				var that = this;
				app.request('bike/rebootBox?bike_id=' + that.bikeDetail.id, '', 'GET').then(res => {
					if (res.statusCode == 200) {
						uni.showToast({
							title: '重启中控成功',
							icon: 'none'
						})
					}
				})
			},
			// 设为停车区
			recover: function() {
				app.request('bike/repairInParking?bike_id=' + this.bikeDetail.id, '', 'GET').then(res => {
					// console.log(res)
					if (res.statusCode == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						})
					}
				})
			},
			//上线
			online: function() {
				app.request('bike/login?bike_id=' + this.bikeDetail.id, '', 'GET').then(res => {
					// console.log(res)
					if (res.statusCode == 200) {
			
						uni.showToast({
							title: '上线成功',
							icon: 'none'
						})
					}
				})
			},
			//下线
			Offline: function() {
				app.request('bike/logout?bike_id=' + this.bikeDetail.id, '', 'GET').then(res => {
					console.log(res)
					if (res.statusCode == 200) {
						uni.showToast({
							title: '下线成功',
							icon: 'none'
						})
					}
				})
			},
		},
		onLoad(options) {
			// console.log(app.request())
			console.log(uni.getStorageSync('allArea'), 'allArea')
			var that = this;
			let timer = setTimeout(function() {
				if (uni.getStorageSync('allArea')) {
					that.allArea = uni.getStorageSync('allArea');
					that.allStatus = uni.getStorageSync('allState');
				}
				console.log(that.allArea)
				let curVal = uni.getStorageSync('curVal')
				console.log(curVal, 'log_curVal')
				if (curVal) {
					that.area = curVal;
				}
				let areaID = uni.getStorageSync('curId')
				console.log(areaID, 'log_areaID')
				if (areaID) {
					that.areaID = areaID;
				} else {
					let id = that.allArea[0].areaID
					that.areaID = id
				}
			}, 500)
		},
	}
</script>

<style>
	.orderTest {
		/* height: 100%; */
		margin-top: 30upx;
		padding: 20upx;
		border-radius: 12upx;
		background-color: #FFFFFF;
	}

	.orderTop {
		display: flex;
		font-size: 30upx;
	}

	.topLeft {
		flex: 1;

	}

	.topRight {
		flex: 1;

	}

	.orderDetail {
		text-align: center;
		border-top: solid 1upx #f2f2f2;
		display: flex;
		flex-direction: row;

		flex-wrap: wrap;
	}

	.children {
		flex: 0 0 33%;
		margin-top: 30upx;
	}

	.children view {
		margin-top: 10upx;
		font-size: 28upx;
	}

	.children image {
		height: 58upx;
		width: 58upx;
	}

	.topRight view {
		display: inline-block;
		vertical-align: top;
	}

	.topRight switch {
		display: inline-block;
		vertical-align: top;
	}

	.testMess {
		margin-top: 30upx;
		padding: 20upx;
		border-radius: 12upx;
		background-color: #FFFFFF;
	}

	.messTitle {
		padding-bottom: 20upx;
		font-size: 32upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.messTitle {
		border-bottom: solid 1upx #f2f2f2;
	}

	.listChid {
		padding: 20upx;
		font-size: 30upx;
		color: #a6a6a6;
	}

	.bikeTest {
		padding: 30upx;
		background-color: #f3f3f3;
	}

	.testFind {
		padding: 30upx 50upx;
		background-color: #FFFFFF;
		border-radius: 12upx;

	}

	.testFind input {
		width: 70%;
		font-size: 28upx;
		padding: 0 0 5upx 5upx;
		display: inline-block;
		border-bottom: 2upx solid #0b0b0b;
	}

	.saomiao {
		display: inline-block;
		background-color: #18D3B8;
		vertical-align: bottom;
		padding: 5upx 30upx;
		border-radius: 15upx;
		color: #FFFFFF;
		margin-left: 50upx;
		font-size: 30upx;

	}

	.find {
		margin-top: 30upx;
		display: block;
		width: 70%;
		margin-left: 15%;
		padding: 10upx;
		border-radius: 15upx;
		background-color: #18D3B8;
		color: #FFFFFF;
		text-align: center;
	}

	.background {
		background: #282828;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0upx;
		left: 0upx;
		z-index: 8888;
		opacity: 0.5;
	}

	.more {
		display: flex;
		flex-wrap: wrap;
		position: fixed;
		top: 41%;
		left: 28%;
		background: white;
		z-index: 9999;
		width: 392upx;
		height: 392upx;
		background: rgba(229, 229, 229, 1);
		border-radius: 10upx;
	}

	.more view {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26upx;
		width: 50%;
		justify-content: center;
	}
	.flexC {
  display: flex;
  justify-content: center;
  align-items: center;
}
.beijing{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 888;
	background: #333333;
	opacity: .5;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
.model{
	width: 400upx;
	height: auto;
	padding: 30upx 0upx;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: fixed;
	z-index: 999;
	background: white;
	border-radius: 10upx;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-height: 600upx;
	overflow:scroll ;
}
.model text{
	padding: 15upx 0upx;
	font-size: 30upx;
}
</style>