shanxian-work-app/pages/mine/control2.vue

<template>


	<view class="box">
		<view class="tab">
			<view @click="tap(0)"  :class="index==0?'active':''">
				<text>立即绑定测试</text>
			</view>
			<view @click="tap(1)" :class="index==1?'active':''">
				<text>解除绑定</text>
			</view>
		</view>
		<block v-if="index==0">
			<view class='ma'>
				<view class="view">
					<input placeholder="请输入车辆编码" placeholder-style="color:#B6B6B6;" @input='input1' :value='erweima'></input>
					<view class="btn" @click="erwei"><text>扫描</text></view>
				</view>
				<view class="view">
					<input @input='input2' :value='value' placeholder="中控设备号" placeholder-style="color:#B6B6B6;"></input>
					<view class="btn" @click="tiaoxing"><text>扫描</text></view>
				</view>
			</view>
			<view class='btm' @click="qued">
				<text>立即绑定</text>
			</view>
		</block>
		<!-- 解除绑定 -->
		<block v-if="index==1">
			<view class='ma'>
				<view class="view">
					<input :value='value' @input='input2' placeholder="中控设备号" placeholder-style="color:#B6B6B6;"></input>
					<view class="btn" @click="tiaoxing(3)"><text>扫描</text></view>
				</view>
			</view>
			<view class='btm' @click='relieve'>
				<text>解除绑定 </text>
			</view>
		</block>
		<!-- <view class="scanCode" bindtap="scanCode">
		    <text>扫一扫</text>
		  </view> -->
		<!-- <view class="logo">
		    <image src="http://resource.weilaibike.com/yunwei/logo.png" style="width:70rpx;height:70rpx;border-radius:50%;"></image>
		    <text style="padding-top:16rpx;">闪现出行方便大学生出行</text>
		  </view> -->
		<!-- 扫码页面 -->
	</view>



</template>

<script>
	var myDate = new Date();
	var hour = myDate.getHours(); //当前时间
	export default {
		data() {
			return {
				isShow: false,
				erweima: '',
				value: '',
				index: 0,
				barcode: null,
				flash: false,
				data: '',

				tip: '将二维码放入框中，即可自动扫描',
			}
		},
		onShow() {
			// var orderList=JSON.parse(data)



			// console.log(data)
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1]; // 当前页的实例
			let shuju = currPage.$vm.data
			var list = JSON.parse(shuju)
			// this.value=shuju
			console.log(typeof(list), "shuju")
			if (list.id == 1) {
				if (list.shuju.length !== 11) {
					uni.showToast({
						title: '扫错了~',
						icon: 'none'
					})
					this.erweima = ""
					// this.value=""
				} else {
					this.erweima = list.shuju

				}

			} else if (list.id == 2) {
				if (list.shuju.length !== 15) {
					uni.showToast({
						title: '扫错了~',
						icon: 'none'
					})
					this.value = ""
				} else {
					this.value = list.shuju
				}

			}


		},
		onLoad(options) {
			console.log(options)
		},
		mounted() {

		},

		methods: {


			input1: function(e) {
				this.erweima = e.detail.value
				console.log(e.detail.value, '这是input中的数据')
			},
			input2: function(e) {
				this.value = e.detail.value
				console.log(e.detail.value, '这是input中的数据')
			},
			//车辆二维码
			erwei: function() {
				let id = 1
				uni.navigateTo({
					url: './test?id=' + id

				})
			},
			//中控二维码
			tiaoxing: function(e) {
				let id = 2
				uni.navigateTo({
					url: './test?id=' + id
				})
			},
			//立即绑定
			qued: function() {
				var that = this;
				if (this.erweima == '' || this.value == '') {
					uni.showModal({
						title: '提示',
						content: '请完善设备码或车辆编号',
						showCancel: false
					})
				} else {
					uni.showLoading({
						title: '绑定中...',
					})
					let data = {
						bike_no: that.erweima,
						box_no: that.value
					}
					console.log()
					app.request('control/addBike', data, 'POST').then(res => {
						uni.hideLoading();
						if (res.statusCode == 200) {
							uni.showToast({
								title: '绑定成功',
								icon: 'none'
							})
						}
					})
				}
			},
			//解除绑定
			relieve: function() {
				//解除绑定

				var that = this;
				if (this.value == '') {
					uni.showModal({
						title: '提示',
						content: '请完善中控设备号',
						showCancel: false
					})
				} else {
					uni.showLoading({
						title: '解绑中...',
					})
					let data = {
						box_no: that.value
					}
					app.request('control/unbindingBike', data, 'POST').then(res => {
						uni.hideLoading();
						if (res.statusCode == 200) {
							uni.showToast({
								title: '解除成功',
								icon: 'none'
							})

						}
					})
				}
			},
			tap: function(e) { //绑定解绑标签切换
				this.index = e
					console.log(e, '这是绑定id')
			}


		}
	}
</script>

<style scoped>
	.box {
		width: 100%;
		height: 100%;
		display: flex;
		/* background-color: #cfe4ff; */
		flex-direction: column;
		align-items: center;
	}

	.tab {
		width: 85%;
		display: flex;
		justify-content: space-between;
		height: 75rpx;
		margin-top: 20rpx;
		border-radius: 30rpx;
		overflow: hidden;
	}

	.tab view {
		width: 49.9%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #ccc;
		color: white;
		font-size: 28rpx;
	}

	.box .tab .active {
		background: #18D5B9;
		color: #FFFFFF !important;
	}

	.box .ma {
		width: 90%;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		padding-top: 80rpx;
	}

	.box .ma .view {
		width: 690rpx;
		height: 90rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 4rpx 0px rgba(222, 222, 222, 1);
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 35rpx;
	}

	.box .ma .view .btn {
		width: 90rpx;
		height: 47rpx;
		background: rgba(229, 229, 229, 1);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		color: rgba(136, 136, 136, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box .ma input {
		width: 70%;
		border-bottom: 1rpx solid gray;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
	}

	.btm {
		/* position: absolute;
		z-index: 3000;
		bottom: 0; */
		width: 420rpx;
		height: 88rpx;
		background: rgba(24, 213, 185, 1);
		box-shadow: 0px 8rpx 13rpx 0px rgba(100, 239, 218, 1);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: white;
		margin-top: 200rpx;
	}

	.logo {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		font-size: 22rpx;
		bottom: 30rpx;
		color: #999;
	}

	.scanCode {
		width: 420rpx;
		height: 88rpx;
		background: linear-gradient(163deg, rgba(255, 139, 102, 1) 0%, rgba(254, 87, 34, 1) 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: white;
		margin-top: 150rpx;
	}

	.wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>