af-mobile-client-vue3 1.3.12 → 1.3.13

package/src/components/data/XCellListFilter/QrScanner/index.vue

@@ -1,207 +1,207 @@
-<script setup lang="ts">
-import { Icon as VanIcon } from 'vant'
-import { nextTick, onMounted, onUnmounted, ref } from 'vue'
-import { startScanAnimation, stopScanAnimation } from './startScanAnimation'
-
-// 扫码框的引用
-const scannerRef = ref<HTMLDivElement>()
-// 扫码动画的引用
-const scanLineRef = ref<HTMLDivElement>()
-// 闪光灯状态
-const isLightOn = ref(false)
-
-// 初始化扫描动画
-async function initScanAnimation() {
-  // 确保元素已渲染完成
-  await nextTick()
-  // 添加延迟确保元素尺寸已计算完成
-  setTimeout(() => {
-    if (scannerRef.value && scanLineRef.value) {
-      // 设置初始位置
-      scanLineRef.value.style.top = '0px'
-      startScanAnimation(scanLineRef, scannerRef)
-    }
-  }, 300)
-}
-
-// 切换闪光灯
-function toggleLight() {
-  isLightOn.value = !isLightOn.value
-}
-
-onMounted(() => {
-  initScanAnimation()
-})
-
-onUnmounted(() => {
-  stopScanAnimation()
-})
-</script>
-
-<template>
-  <div class="qr-scanner">
-    <div class="scanner-container">
-      <div class="scanner-bg">
-        <div ref="scannerRef" class="scanner-box">
-          <div class="corner-lt" />
-          <div class="corner-rt" />
-          <div class="corner-lb" />
-          <div class="corner-rb" />
-          <div ref="scanLineRef" class="scan-line" />
-          <div class="light-btn" @click="toggleLight">
-            <VanIcon :name="isLightOn ? 'bulb-o' : 'bulb'" class="light-icon" />
-          </div>
-        </div>
-        <div class="scanner-tip">
-          将二维码放入框内，即可自动扫描
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="less">
-.qr-scanner {
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-  display: flex;
-  flex-direction: column;
-  border-radius: 8px;
-  overflow: hidden;
-
-  .scanner-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    background-color: #fff;
-
-    .scanner-bg {
-      width: 320px;
-      height: 320px;
-      background-color: #f0f0f0;
-      border-radius: 8px;
-      padding: 20px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: flex-start;
-      padding-top: 40px;
-    }
-
-    .scanner-box {
-      width: 200px;
-      height: 200px;
-      position: relative;
-      background-color: transparent;
-      border: 1px solid #1989fa;
-      border-radius: 0;
-      box-sizing: border-box;
-      margin: 0;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border: none;
-        z-index: 1;
-      }
-
-      .corner-lt,
-      .corner-rt,
-      .corner-lb,
-      .corner-rb {
-        position: absolute;
-        width: 24px;
-        height: 24px;
-        border-color: #1989fa;
-        border-style: solid;
-        z-index: 2;
-        margin: 0;
-      }
-
-      .corner-lt {
-        top: -3px;
-        left: -3px;
-        border-width: 3px 0 0 3px;
-        border-radius: 0;
-        margin: -8px 0 0 -8px;
-      }
-
-      .corner-rt {
-        top: -3px;
-        right: -3px;
-        border-width: 3px 3px 0 0;
-        border-radius: 0;
-        margin: -8px -8px 0 0;
-      }
-
-      .corner-lb {
-        bottom: -3px;
-        left: -3px;
-        border-width: 0 0 3px 3px;
-        border-radius: 0;
-        margin: 0 0 -8px -8px;
-      }
-
-      .corner-rb {
-        bottom: -3px;
-        right: -3px;
-        border-width: 0 3px 3px 0;
-        border-radius: 0;
-        margin: 0 -8px -8px 0;
-      }
-
-      .scan-line {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 2px;
-        background: linear-gradient(to right, transparent, #1989fa, transparent);
-        box-shadow: 0 0 4px #1989fa;
-        z-index: 3;
-      }
-
-      .light-btn {
-        position: absolute;
-        right: -20px;
-        bottom: -20px;
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        background-color: rgba(44, 44, 44, 0.5);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        z-index: 3;
-
-        .light-icon {
-          font-size: 20px;
-          color: #fff;
-        }
-
-        &:active {
-          opacity: 0.8;
-        }
-      }
-    }
-
-    .scanner-tip {
-      color: #666;
-      font-size: 14px;
-      text-align: center;
-      margin-top: 30px;
-      margin-bottom: 0;
-      width: 100%;
-    }
-  }
-}
-</style>
+<script setup lang="ts">
+import { Icon as VanIcon } from 'vant'
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { startScanAnimation, stopScanAnimation } from './startScanAnimation'
+
+// 扫码框的引用
+const scannerRef = ref<HTMLDivElement>()
+// 扫码动画的引用
+const scanLineRef = ref<HTMLDivElement>()
+// 闪光灯状态
+const isLightOn = ref(false)
+
+// 初始化扫描动画
+async function initScanAnimation() {
+  // 确保元素已渲染完成
+  await nextTick()
+  // 添加延迟确保元素尺寸已计算完成
+  setTimeout(() => {
+    if (scannerRef.value && scanLineRef.value) {
+      // 设置初始位置
+      scanLineRef.value.style.top = '0px'
+      startScanAnimation(scanLineRef, scannerRef)
+    }
+  }, 300)
+}
+
+// 切换闪光灯
+function toggleLight() {
+  isLightOn.value = !isLightOn.value
+}
+
+onMounted(() => {
+  initScanAnimation()
+})
+
+onUnmounted(() => {
+  stopScanAnimation()
+})
+</script>
+
+<template>
+  <div class="qr-scanner">
+    <div class="scanner-container">
+      <div class="scanner-bg">
+        <div ref="scannerRef" class="scanner-box">
+          <div class="corner-lt" />
+          <div class="corner-rt" />
+          <div class="corner-lb" />
+          <div class="corner-rb" />
+          <div ref="scanLineRef" class="scan-line" />
+          <div class="light-btn" @click="toggleLight">
+            <VanIcon :name="isLightOn ? 'bulb-o' : 'bulb'" class="light-icon" />
+          </div>
+        </div>
+        <div class="scanner-tip">
+          将二维码放入框内，即可自动扫描
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.qr-scanner {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+
+  .scanner-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    background-color: #fff;
+
+    .scanner-bg {
+      width: 320px;
+      height: 320px;
+      background-color: #f0f0f0;
+      border-radius: 8px;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      padding-top: 40px;
+    }
+
+    .scanner-box {
+      width: 200px;
+      height: 200px;
+      position: relative;
+      background-color: transparent;
+      border: 1px solid #1989fa;
+      border-radius: 0;
+      box-sizing: border-box;
+      margin: 0;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border: none;
+        z-index: 1;
+      }
+
+      .corner-lt,
+      .corner-rt,
+      .corner-lb,
+      .corner-rb {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        border-color: #1989fa;
+        border-style: solid;
+        z-index: 2;
+        margin: 0;
+      }
+
+      .corner-lt {
+        top: -3px;
+        left: -3px;
+        border-width: 3px 0 0 3px;
+        border-radius: 0;
+        margin: -8px 0 0 -8px;
+      }
+
+      .corner-rt {
+        top: -3px;
+        right: -3px;
+        border-width: 3px 3px 0 0;
+        border-radius: 0;
+        margin: -8px -8px 0 0;
+      }
+
+      .corner-lb {
+        bottom: -3px;
+        left: -3px;
+        border-width: 0 0 3px 3px;
+        border-radius: 0;
+        margin: 0 0 -8px -8px;
+      }
+
+      .corner-rb {
+        bottom: -3px;
+        right: -3px;
+        border-width: 0 3px 3px 0;
+        border-radius: 0;
+        margin: 0 -8px -8px 0;
+      }
+
+      .scan-line {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 2px;
+        background: linear-gradient(to right, transparent, #1989fa, transparent);
+        box-shadow: 0 0 4px #1989fa;
+        z-index: 3;
+      }
+
+      .light-btn {
+        position: absolute;
+        right: -20px;
+        bottom: -20px;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background-color: rgba(44, 44, 44, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        z-index: 3;
+
+        .light-icon {
+          font-size: 20px;
+          color: #fff;
+        }
+
+        &:active {
+          opacity: 0.8;
+        }
+      }
+    }
+
+    .scanner-tip {
+      color: #666;
+      font-size: 14px;
+      text-align: center;
+      margin-top: 30px;
+      margin-bottom: 0;
+      width: 100%;
+    }
+  }
+}
+</style>

package/src/components/data/XCellListFilter/QrScanner/startScanAnimation.ts

@@ -1,53 +1,53 @@
-import type { Ref } from 'vue'
-
-let animationTimer: ReturnType<typeof setInterval> | null = null
-
-// 开始扫码动画
-export function startScanAnimation(scanLineRef: Ref<HTMLDivElement | undefined>, scannerRef: Ref<HTMLDivElement | undefined>) {
-  // 先停止之前的动画
-  stopScanAnimation()
-
-  if (!scanLineRef.value || !scannerRef.value)
-    return
-
-  // 确保扫描线初始位置正确
-  scanLineRef.value.style.top = '0px'
-
-  let direction = 'down'
-  let position = 0
-  const speed = 2
-  const maxPosition = scannerRef.value.offsetHeight || 200
-
-  // 确保maxPosition不为0
-  if (maxPosition <= 10) {
-    // 如果容器高度获取失败,使用一个默认延迟后再尝试
-    setTimeout(() => {
-      startScanAnimation(scanLineRef, scannerRef)
-    }, 500)
-    return
-  }
-
-  animationTimer = setInterval(() => {
-    if (direction === 'down') {
-      position += speed
-      if (position >= maxPosition - 2)
-        direction = 'up'
-    }
-    else {
-      position -= speed
-      if (position <= 0)
-        direction = 'down'
-    }
-    if (scanLineRef.value)
-      scanLineRef.value.style.top = `${position}px`
-  }, 20)
-
-  return animationTimer
-}
-
-export function stopScanAnimation() {
-  if (animationTimer) {
-    clearInterval(animationTimer)
-    animationTimer = null
-  }
-}
+import type { Ref } from 'vue'
+
+let animationTimer: ReturnType<typeof setInterval> | null = null
+
+// 开始扫码动画
+export function startScanAnimation(scanLineRef: Ref<HTMLDivElement | undefined>, scannerRef: Ref<HTMLDivElement | undefined>) {
+  // 先停止之前的动画
+  stopScanAnimation()
+
+  if (!scanLineRef.value || !scannerRef.value)
+    return
+
+  // 确保扫描线初始位置正确
+  scanLineRef.value.style.top = '0px'
+
+  let direction = 'down'
+  let position = 0
+  const speed = 2
+  const maxPosition = scannerRef.value.offsetHeight || 200
+
+  // 确保maxPosition不为0
+  if (maxPosition <= 10) {
+    // 如果容器高度获取失败,使用一个默认延迟后再尝试
+    setTimeout(() => {
+      startScanAnimation(scanLineRef, scannerRef)
+    }, 500)
+    return
+  }
+
+  animationTimer = setInterval(() => {
+    if (direction === 'down') {
+      position += speed
+      if (position >= maxPosition - 2)
+        direction = 'up'
+    }
+    else {
+      position -= speed
+      if (position <= 0)
+        direction = 'down'
+    }
+    if (scanLineRef.value)
+      scanLineRef.value.style.top = `${position}px`
+  }, 20)
+
+  return animationTimer
+}
+
+export function stopScanAnimation() {
+  if (animationTimer) {
+    clearInterval(animationTimer)
+    animationTimer = null
+  }
+}