Browse Source

fix: 固定选中区域的位置

chenzhen2 2 năm trước cách đây
mục cha
commit
430e09d29a
2 tập tin đã thay đổi với 64 bổ sung5 xóa
  1. 28 3
      src/views/choiceSpace/choiceSpace.vue
  2. 36 2
      src/views/home/index.vue

+ 28 - 3
src/views/choiceSpace/choiceSpace.vue

@@ -30,6 +30,7 @@
       <template v-if="showSpace">
         <div
           class="space-box"
+          :id="'space' + index"
           v-for="(item, index) in spaceData"
           :key="'space' + index"
         >
@@ -298,7 +299,7 @@ export default defineComponent({
       getDefaultLocation() {
         let params: any = {
           macAddress: proxyData.userInfo.mac,
-          "spaceId":proxyData.spaceId
+          spaceId: proxyData.spaceId,
           // projectId: store.state.user.projectId,
         };
         let paramsStr: any = setQueryConfig(params);
@@ -457,10 +458,29 @@ export default defineComponent({
           } else {
             proxyData.showSpace = false;
           }
+          // 设置页面默认的位置
+          nextTick(() => {
+            proxyData.setPageScroolTop();
+          });
         });
       },
       // 设置当前页面选中的位置
-      setPageScroolTop() {},
+      setPageScroolTop() {
+        let idIndex: any = 0;
+        // debugger;
+        for (let i = 0; i < proxyData.spaceData.length; i++) {
+          if (proxyData.spaceData[i].checked) {
+            idIndex = i;
+            break;
+          }
+        }
+        let spaceEl: any = document.querySelector("#" + "space" + idIndex);
+        let spaceContetEl: any = document.querySelector(".choice-space");
+        let top: any = spaceEl ? spaceEl.offsetTop : 0;
+        if (spaceContetEl) {
+          spaceContetEl.scrollTop = top;
+        }
+      },
       searchSpace() {
         let query: any = {
           floorId: proxyData.checkPositon.floorId,
@@ -492,6 +512,9 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import "~@/styles/comMedia.scss";
 .choice-space {
+  width: 100%;
+  height: 100%;
+  overflow: scroll;
   .search {
     position: fixed;
     width: 100%;
@@ -573,13 +596,15 @@ export default defineComponent({
     }
   }
   .space-content {
-    // display: flex;
+    display: block;
     width: 100%;
+    height: 100%;
     padding-top: $headerHeightPading;
     padding-right: 20px;
     padding-left: 4px;
     padding-bottom: 70px;
     // justify-content: space-between;
+    // overflow: scroll;
     .space-box {
       // display: i;
       display: inline-block;

+ 36 - 2
src/views/home/index.vue

@@ -22,8 +22,13 @@
             />
             <div class="qrcode-model" v-if="codeStatus.status">
               <span v-if="codeStatus.status === 1">已扫描</span>
-              <span v-if="codeStatus.status === 2">已确认</span>
-              <span v-if="codeStatus.status === 3">已失效</span>
+              <!-- <span v-if="codeStatus.status === 2">已确认</span> -->
+              <van-icon
+                v-if="codeStatus.status === 2 || codeStatus.status === 3"
+                class="code-replay"
+                @click="refreshCode"
+                name="replay"
+              />
             </div>
           </div>
           <div class="qrcode-text">
@@ -113,6 +118,14 @@ export default defineComponent({
         } else {
           proxyData.type = 1;
         }
+        if (proxyData.type === 1) {
+          proxyData.getPadQrCodeStatus();
+        } else {
+          if (proxyData.timer) {
+            clearTimeout(proxyData.timer);
+            proxyData.timer = null;
+          }
+        }
       },
       username: "",
       password: "",
@@ -144,6 +157,19 @@ export default defineComponent({
         proxyData.qrCodeId = qrCodeId;
         proxyData.codeValue = `${proxyData.codeValue}?type=ipad&id=${qrCodeId}&mac=${mac}`;
       },
+      //  定时器清楚
+      clearTimer() {
+        if (proxyData.timer) {
+          clearTimeout(proxyData.timer);
+          proxyData.timer = null;
+        }
+      },
+      // 二维码刷新
+      refreshCode() {
+        proxyData.setCodeUrl();
+        proxyData.clearTimer();
+        proxyData.getPadQrCodeStatus();
+      },
       /**
        *
        *获取二维码状态
@@ -300,6 +326,14 @@ export default defineComponent({
           font-size: 12px;
           color: #4d5262;
         }
+        .code-replay {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          font-size: 32px;
+          color: #fff;
+        }
       }
       .qrcode-text {
         padding-top: 25px;