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

<template>
	<view class="box">
		<view class="tab">
			<view @click="tap" :data-index="0" :class="index==0?'active':''">
				<text>立即绑定</text>
			</view>
			<view @click="tap" :data-index="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"><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 barcode = null;
	export default {
		data() {
			return {

				erweima: '',
				value: '',
				index: 0
			}
		},
		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中的数据')
			},

			//立即绑定
			qued: function() {

				if (this.erweima == '' || this.value == '') {
					uni.showModal({
						title: '提示',
						content: '请完善设备码或车辆编号',
						showCancel: false
					})
				} else {
					uni.showLoading({
						title: '绑定中...',
					})
					let data = {
						bike_no: that.data.erweima,
						box_no: that.data.value
					}
					app.request('control/addBike', data, 'POST').then(res => {
						uni.hideLoading();
						if (res.statusCode == 200) {
							uni.showToast({
								title: '绑定成功',
								icon: 'none'
							})
						}
					})
				}
			},
			//解除绑定
			relieve: function() {
				//解除绑定


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

						}
					})
				}
			},
			//条形码
			tiaoxing: function() {
				//点击扫描条形码
				var that = this
				// this.value=99999
				uni.scanCode({

					success: function(res) {
						console.log(res, "99999")
						console.log(typeof(res.result))
						var arr = res.result.split('\n')

						var zk = arr[0]
						console.log(zk, "77777")
						var zk1 = zk.split(':')
						var IMEI = zk1[1]
						console.log(IMEI, "666666")

						console.log(that.value)

						if (typeof(IMEI) == 'string') {
							console.log(IMEI)
							if (IMEI.length == 9 || IMEI.length == 15) {
								that.value = zk1[1]


							} else {
								uni.showToast({
									title: '扫错了~',
									icon: 'none'
								})
							}
						}
					},
					fail: function(err) {
						console.log(err, "88888")
						uni.showToast({
							title: '扫码失败',
							icon: 'none'
						})
					}
				})
			},
	
			erwei: function() {
		
			
				//点击扫描二维码
				var that = this
				uni.scanCode({
					
					success: function(res) {
						console.log(res, "uuuuuuu")
						var code = decodeURIComponent(res.result);

						var code1 = code.lastIndexOf("=");

						var source = code.substring(code1 + 1, code.length);
						console.log(source, "99999")
						that.erweima = source
						
					},
					fail: function() {
						uni.showToast({
							title: '扫码失败',
							icon: 'none'
						})
					}
				})
			},
			tap: function(e) { //绑定解绑标签切换
				this.index = e.currentTarget.dataset.index,
					console.log(e, '这是绑定id')
			}
		}
	}
</script>

<style>
	.box {
		width: 100%;
		height: 100%;
		display: flex;
		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 {
		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;
	}
</style>