<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(); //当前时间
var app = getApp()
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>