af-mobile-client-vue3 1.0.91 → 1.0.93

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

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { Icon as VanIcon } from 'vant'
+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

@@ -0,0 +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
+  }
+}

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

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Icon as VanIcon } from 'vant'
+
+defineEmits(['close'])
+
+const isScanning = ref(true)
+</script>
+
+<template>
+  <div class="vpn-recognition">
+    <div class="scanner-container">
+      <div class="scanner-bg">
+        <div class="scan-circle">
+          <VanIcon name="idcard" size="60" color="rgb(59,130,246)"/>
+        </div>
+        <div class="scan-ripple" v-if="isScanning" />
+        <div class="scan-tip">
+          准备读取NFC
+        </div>
+      </div>
+      <div class="scan-subtitle">
+        请将手机靠近NFC标签进行读取
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.vpn-recognition {
+  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;
+      position: relative;
+    }
+
+    .scan-circle {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      background-color: rgba(25, 137, 250, 0.1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 20px;
+      position: relative;
+      z-index: 2;
+    }
+
+    .scan-ripple {
+      position: absolute;
+      top: 35%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 120px;
+      height: 120px;
+      background-color: rgba(25, 137, 250, 0.2);
+      border-radius: 50%;
+      animation: ripple 3s infinite;
+      z-index: 1;
+    }
+
+    .scan-tip {
+      color: #666;
+      font-size: 16px;
+      text-align: center;
+      margin-top: 30px;
+      margin-bottom: 8px;
+      width: 100%;
+      font-weight: normal;
+    }
+
+    .scan-subtitle {
+      font-size: 14px;
+      color: #969799;
+      text-align: center;
+      width: 100%;
+      font-weight: bold;
+      margin-top: 7%;
+    }
+  }
+}
+
+@keyframes ripple {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(2);
+    opacity: 0;
+  }
+}
+</style>