联调接口

src/pages/deviceAuth/deviceAuth.vue

@@ -1,6 +1,6 @@
 <template>
 <view>
-    <view class="container" :style="{ height: `100vh` }">
+    <view class="container">
 		<view class="bg"></view>
         <view class="bg-con">
             <view :style="{height: navBarPaddingTop + 'px'}"></view>
@@ -46,24 +46,18 @@
                     <view class="login-form approval" style="padding:110rpx 55rpx 150rpx;">
                         <view class="approval-title">审核通过，请输入授权码</view>
                         <view class="auth-code">
-                            <input password type="number" v-model="num1" auto-complete="off" :focus="pass1"
-                                maxlength="1" @blur="handleBlur(1)" @input="handleInput($event,1)"
+                            <input v-for="(item, index) in codes" 
+                                password
+                                :key="index"
+                                v-model="codes[index]"
+                                type="number"
+                                maxlength="1"
+                                :ref="el => { if (el) inputRefs[index] = el }"
+                                @input="handleInput(index, $event)"
+                                @keydown.delete="handleDelete(index, $event)"
+                                :focus="activeIndex==index"
+                                @blur="handleBlur(index,codes[index])"
                             />
-                            <input password type="number" v-model="num2" auto-complete="off" :focus="pass2"
-                                maxlength="1" @blur="handleBlur(2)" @input="handleInput($event,2)"
-                            >
-                            <input password type="number" v-model="num3" auto-complete="off"  :focus="pass3"
-                                maxlength="1" @blur="handleBlur(3)" @input="handleInput($event,3)"
-                            >
-                            <input password type="number" v-model="num4" auto-complete="off"  :focus="pass4"
-                                maxlength="1" @blur="handleBlur(4)" @input="handleInput($event,4)"
-                            >
-                            <input password type="number" v-model="num5" auto-complete="off"  :focus="pass5"
-                                maxlength="1" @blur="handleBlur(5)" @input="handleInput($event,5)"
-                            >
-                            <input password type="number" v-model="num6" auto-complete="off"  :focus="pass6"
-                                maxlength="1" @blur="handleBlur(6)" @input="handleInput($event,6)"
-                            >
                         </view>
                     </view>
                     <button type="primary" class="btn-submit" @click="handleSubmit" :loading="subLoading" :disabled="subLoading">提交</button>
@@ -94,10 +88,19 @@ import { useUserStore } from '@/stores/user';
 const userStore = useUserStore();
 
 onLoad(async(opt) => {
-    console.log("onLoad");
+    console.log("deviceAuth=>onLoad");
     uni.setStorageSync('page_cache',true);
     // uni.preloadPage({url: "/pages/login/login"});
     // uni.preloadPage({url: "/pages/home/home"});
+
+    deviceId.value = uni.getStorageSync('app_device_id');// 本地设备ID
+    await selectBindStatus();
+    if(bindStatus.value==2){
+        // bindStatus=2-----到等待页面（定时任务查询 10秒查询一次）
+        timer = setInterval(()=>{  
+            refreshBindStatus() 
+        },1000*10)//10秒刷新一次
+    }
 })
 
 // 绑定状态（1=已提交、2=等待审核、3=审核通过、4=绑定成功、5=审核拒绝）
@@ -108,14 +111,6 @@ let timer = null;
 const navBarPaddingTop = ref(0);
 onMounted(async () => {
     navBarPaddingTop.value = getNavBarPaddingTop();
-    deviceId.value = uni.getStorageSync('app_device_id');// 本地设备ID
-    await selectBindStatus();
-    if(bindStatus.value==2){
-        // bindStatus=2-----到等待页面（定时任务查询 10秒查询一次）
-        timer = setInterval(()=>{  
-            refreshBindStatus() 
-        },1000*10)//10秒刷新一次
-    }
 })
 
 // 组件卸载时清除定时器
@@ -247,77 +242,44 @@ const handleRefresh = ()=>{
     selectBindStatus();
 }
 
-// 输入授权码内容
-let num1=ref(''),num2=ref(''),num3=ref(''),num4=ref(''),num5=ref(''),num6=ref('');
-let pass1=ref(false),pass2=ref(false),pass3=ref(false),pass4=ref(false),pass5=ref(false),pass6=ref(false);
-// 获取值
-const getValue=(num,value)=>{
-    let flag = false;
-    num = value.replace(/[^\d]/g, '');
-    if(num!=''){
-        flag=true
-    }
-    return {num,flag}
-}
-// input事件
-const handleInput=(e,type)=>{
-    let value = e.detail.value;
-    if(type==6){
-        return;
-    }
-
-    switch (type) {
-        case 1:
-            let obj = getValue(num1.value,value);
-            num1.value = obj.num;
-            nextTick(() => {
-                pass2.value = true;
-            })
-        break;
-        case 2:
-            let obj2 = getValue(num2.value,value);
-            num2.value = obj2.num;
-            nextTick(() => {
-                pass3.value = true;
-            })
-        break;
-        case 3:
-            let obj3 = getValue(num3.value,value);
-            num3.value = obj3.num;
-            nextTick(() => {
-                pass4.value = true;
-            })
-        break;
-        case 4:
-            let obj4 = getValue(num4.value,value);
-            num4.value = obj4.num;
-            nextTick(() => {
-                pass5.value = true;
-            })
-        break;
-        case 5:
-            let obj5 = getValue(num5.value,value);
-            num5.value = obj5.num;
-            nextTick(() => {
-                pass6.value = true;
-            })
-        break;
-        case 6:
-            let obj6 = getValue(num6.value,value);
-            num6.value = obj6.num;
-        break;
-    }
-}
-
+const codes = ref(Array(6).fill(''))
+const inputRefs = ref([]);
+const activeIndex = ref(0);//初始化焦点
 let authCode = ref('')
-const handleBlur = ()=>{
-    let pass1 = num1.value?num1.value:'';
-    let pass2 = num2.value?num2.value:'';
-    let pass3 = num3.value?num3.value:'';
-    let pass4 = num4.value?num4.value:'';
-    let pass5 = num5.value?num5.value:'';
-    let pass6 = num6.value?num6.value:'';
-    authCode.value = pass1+pass2+pass3+pass4+pass5+pass6;
+const handleInput = (index, event) => {
+    // 只允许数字输入
+    const value = event.detail.value.replace(/\D/g, '')
+    codes.value[index] = value
+    
+    // 自动跳转到下一个输入框
+    if (value && index < 5) {
+        nextTick(() => {
+            activeIndex.value = index+1;
+        })
+    }
+
+    // 输入最后一个框时获取值
+    // if (index === 5 && value) {
+    //     authCode.value =  codes.value.join('')
+    //     console.log('输入完成:', authCode.value)
+    // }
+}
+
+// 鼠标离开
+const handleBlur = (index,value)=>{
+    codes.value[index] = value;
+    authCode.value =  codes.value.join('');
+    // console.log('鼠标离开:', authCode.value)
+}
+
+const handleDelete = (index, event) => {
+    // 如果当前框为空且按下删除键，跳转到上一个输入框
+    if (!codes.value[index] && index > 0) {
+        event.preventDefault() // 阻止默认删除行为
+        nextTick(() => {
+            activeIndex.value = index-1;
+        })
+    }
 }
 
 // 执行设备绑定