115 lines
2.2 KiB
Vue
115 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div style="width:100vw;height:100vh;display: flex;justify-content: center;">
|
||
|
|
<div class="divInfo">
|
||
|
|
<div class="divTitle">请输入车辆二维码下方6位编号开锁</div>
|
||
|
|
<div>
|
||
|
|
<image class="divImg" src="/static/userui/scan/bike.png" />
|
||
|
|
</div>
|
||
|
|
<div class="divData">
|
||
|
|
<input v-for="(item,index) in inputData" :key="index" :focus="index==focus" @input="(e)=>{changeInput(index,e)}"
|
||
|
|
adjust-position="false"
|
||
|
|
type="number" cursor-color="#61D246" maxlength="1"/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="divBottom">
|
||
|
|
<image style="width: 60px;height: 60px;" src="/static/userui/scan/light.png" />
|
||
|
|
<div style="font-size: 12px;color: gray;">轻触点亮</div>
|
||
|
|
<div :class="(btnDis?'divBtnDis ':'')+'divBtn'" @click="clickBtn">确认</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import {
|
||
|
|
ref,onMounted,getCurrentInstance
|
||
|
|
} from 'vue';
|
||
|
|
const len = 6;
|
||
|
|
const arrData = [];
|
||
|
|
for (let i = 0; i < 6; i++) {
|
||
|
|
arrData.push("")
|
||
|
|
}
|
||
|
|
const inputData = ref(arrData);
|
||
|
|
const focus=ref(0);
|
||
|
|
const btnDis=ref(true);
|
||
|
|
|
||
|
|
const instance = getCurrentInstance();
|
||
|
|
|
||
|
|
|
||
|
|
function changeInput(index,e){
|
||
|
|
// inputData.value[index]=e.detail.value;
|
||
|
|
console.log("555555555555555",instance)
|
||
|
|
debugger;
|
||
|
|
// if(index<len-1){
|
||
|
|
// focus.value=index+1;
|
||
|
|
// }
|
||
|
|
// else{
|
||
|
|
// btnDis.value=false;
|
||
|
|
// }
|
||
|
|
console.log("3333333333333333",e,index);
|
||
|
|
|
||
|
|
// focus.value=index;
|
||
|
|
// if(index==len-1){
|
||
|
|
// btnDis.value=false;
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
|
||
|
|
function clickBtn() {
|
||
|
|
console.log("555555555555555", inputData)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.divInfo {}
|
||
|
|
|
||
|
|
.divTitle {
|
||
|
|
margin-top: 60px;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #000;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.divImg {
|
||
|
|
width: 220px;
|
||
|
|
height: 100px;
|
||
|
|
margin: 20px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.divData {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-evenly;
|
||
|
|
}
|
||
|
|
|
||
|
|
.divData input {
|
||
|
|
width: 28px;
|
||
|
|
height: 40px;
|
||
|
|
border: 1px solid #80808038;
|
||
|
|
border-radius: 5px;
|
||
|
|
background: #f5f2f2b8;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.divBottom {
|
||
|
|
margin-top: 30px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.divBtnDis {
|
||
|
|
|
||
|
|
pointer-events: none;
|
||
|
|
background: #b9b7b7 !important;
|
||
|
|
opacity: 0.3;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.divBtn {
|
||
|
|
background: #61D246 ;
|
||
|
|
margin-top: 10px;
|
||
|
|
line-height: 35px;
|
||
|
|
border-radius: 5px;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
</style>
|