wui-components-v2 1.1.69 → 1.1.71

package/components/scan-input/scan-input.vue

@@ -1,406 +1,406 @@
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
-
-defineOptions({
-  name: 'ScanInput',
-})
-
-// ---- 类型 ----
-type Html5QrcodeInstance = {
-  start: (config: object, opts: object, onSuccess: (text: string) => void, onFailure: () => void) => Promise<void>
-  stop: () => Promise<void>
-  clear: () => Promise<void>
-  isScanning?: boolean
-}
-
-// ---- Props ----
-const props = withDefaults(defineProps<{
-  /** v-model 绑定值 */
-  modelValue?: string
-  /** 自动启动扫码 */
-  autoStart?: boolean
-  /** 占位文本 */
-  placeholder?: string
-  /** 是否禁用 */
-  disabled?: boolean
-  /** 扫码成功后自动关闭弹窗 (H5) */
-  autoCloseOnSuccess?: boolean
-  /** 扫码成功后是否展示 toast 提示 */
-  showSuccessToast?: boolean
-}>(), {
-  modelValue: '',
-  autoStart: false,
-  placeholder: '请输入或扫描二维码/条形码',
-  disabled: false,
-  autoCloseOnSuccess: true,
-  showSuccessToast: true,
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', val: string): void
-  (e: 'scan', data: string): void
-  (e: 'input', data: string): void
-  (e: 'error', error: string): void
-}>()
-
-// ---- 状态 ----
-const inputValue = ref(props.modelValue)
-const isScanning = ref(false)
-const showScanModal = ref(false)
-const isLoading = ref(false)
-let html5QrcodeScanner: Html5QrcodeInstance | null = null
-let scanLocked = false
-
-// v-model 同步
-watch(() => props.modelValue, (val) => { inputValue.value = val })
-watch(inputValue, (val) => { emit('update:modelValue', val); emit('input', val) })
-
-/** 外部可调用的方法 */
-function clear() { inputValue.value = '' }
-function focus() { /* wd-input 聚焦可通过 ref 实现 */ }
-
-defineExpose({ clear, focus, startScan: handleStartScan, stopScan })
-
-// ======================== H5 平台扫码 ========================
-// #ifdef H5
-import { Html5Qrcode } from 'html5-qrcode'
-
-/** 环境检测 */
-function checkCameraEnvironment(): { ok: boolean; reason?: string } {
-  const hostname = window.location.hostname
-  if (hostname === 'localhost' || hostname === '127.0.0.1') return { ok: true }
-  if (window.location.protocol !== 'https:') {
-    return { ok: false, reason: '当前非HTTPS环境，请在 https 下使用扫码功能' }
-  }
-  return { ok: true }
-}
-
-async function startScan() {
-  if (isScanning.value || scanLocked) return
-  const envCheck = checkCameraEnvironment()
-  if (!envCheck.ok) {
-    uni.showToast({ title: envCheck.reason || '环境不支持', icon: 'none' })
-    return
-  }
-
-  isLoading.value = true
-  isScanning.value = true
-  showScanModal.value = true
-  scanLocked = false
-
-  try {
-    await nextTick()
-    await new Promise(r => setTimeout(r, 200))
-
-    const container = document.getElementById('h5-scan-reader')
-    if (!container) throw new Error('扫码容器未找到')
-
-    html5QrcodeScanner = new Html5Qrcode('h5-scan-reader') as unknown as Html5QrcodeInstance
-
-    await html5QrcodeScanner.start(
-      { facingMode: 'environment' },
-      { fps: 5 },
-      (decodedText: string) => {
-        if (scanLocked || !isScanning.value) return
-        scanLocked = true // 加锁防止重复触发
-
-        console.log('[ScanInput] 扫码成功:', decodedText)
-        inputValue.value = decodedText
-        emit('scan', decodedText)
-        if (props.showSuccessToast) uni.showToast({ title: '扫描成功', icon: 'success' })
-        if (props.autoCloseOnSuccess) stopScan()
-      },
-      () => {}, // 忽略中间帧未识别错误
-    )
-
-    // JS 强制全屏 video（html5-qrcode 库会覆盖 CSS，需运行时修正）
-    const videoEl = document.querySelector('#h5-scan-reader video') as HTMLVideoElement | null
-    if (videoEl) {
-      Object.assign(videoEl.style, {
-        width: '100%',
-        height: '100vh',
-        objectFit: 'cover',
-        objectPosition: 'center',
-      })
-    }
-  }
-  catch (error: unknown) {
-    console.error('[ScanInput] 启动失败:', error)
-    const errMsg = error instanceof Error ? error.message : String(error)
-    let msg = '摄像头访问失败'
-    if (/Permission|NotAllowed/i.test(errMsg)) msg = '请允许浏览器使用摄像头'
-    else if (/NotFound|not found/i.test(errMsg)) msg = '未检测到摄像头设备'
-    else if (/secure origin|insecure/i.test(errMsg)) msg = '需要HTTPS环境才能使用摄像头'
-
-    emit('error', msg)
-    isScanning.value = false
-    showScanModal.value = false
-    uni.showModal({ title: '提示', content: msg, showCancel: false })
-  }
-  finally {
-    isLoading.value = false
-  }
-}
-
-async function stopScan() {
-  isScanning.value = false
-  showScanModal.value = false
-  scanLocked = false
-  if (html5QrcodeScanner) {
-    try {
-      if (html5QrcodeScanner.isScanning) await html5QrcodeScanner.stop()
-      await html5QrcodeScanner.clear()
-    }
-    catch { /* ignore cleanup error */ }
-    html5QrcodeScanner = null
-  }
-}
-// #endif
-
-// ======================== 非 H5 平台扫码 ========================
-function startUniScanCode() {
-  // #ifndef H5
-  uni.scanCode({
-    success(res: UniApp.ScanCodeSuccessRes) {
-      inputValue.value = res.result
-      emit('scan', res.result)
-      uni.showToast({ title: '扫描成功', icon: 'success' })
-    },
-    fail() { emit('error', '扫描已取消') },
-  })
-  // #endif
-}
-
-// ======================== 公共方法 ========================
-function handleStartScan() {
-  if (props.disabled) return
-  // #ifdef H5
-  isScanning.value ? stopScan() : startScan()
-  // #endif
-  // #ifndef H5
-  startUniScanCode()
-  // #endif
-}
-
-/** 点击遮罩层关闭 (仅 H5) */
-function handleModalMaskClick() {
-  // #ifdef H5
-  stopScan()
-  // #endif
-}
-
-function handleConfirm() {
-  const val = inputValue.value.trim()
-  if (val) emit('scan', val)
-}
-
-// ---- 生命周期 ----
-onMounted(() => { if (props.autoStart && !props.disabled) handleStartScan() })
-onUnmounted(() => {
-  // #ifdef H5
-  stopScan()
-  // #endif
-})
-</script>
-
-<template>
-  <view class="si-wrap">
-    <!-- 输入框 -->
-    <wd-input
-      v-model="inputValue"
-      class="!pr-3"
-      :placeholder="placeholder"
-      type="text"
-      confirm-type="search"
-      clearable
-      no-border
-      :disabled="disabled"
-      custom-class="si-wd-input"
-      @confirm="handleConfirm"
-      suffix-icon="scan"
-      @clicksuffixicon="handleStartScan"
-    />
-
-    <!-- #ifdef H5 -->
-    <!-- 全屏扫码弹窗 -->
-    <view
-      v-if="showScanModal"
-      class="si-modal"
-      catchtouchmove
-      @click="handleModalMaskClick"
-    >
-      <!-- 摄像头区域 -->
-      <view class="si-camera-area" @click.stop>
-        <!-- 加载中 -->
-        <view v-if="isLoading" class="si-loading-mask">
-          <view class="si-loading-box">
-            <text class="si-loading-text">正在启动摄像头...</text>
-          </view>
-        </view>
-
-        <!-- 渲染容器 + 扫描线 -->
-        <view class="si-reader-wrap  overflow-hidden">
-          <div id="h5-scan-reader" class="si-reader" />
-          <view v-show="isScanning && !isLoading" class="si-scan-frame">
-            <view class="si-scan-line" />
-          </view>
-        </view>
-      </view>
-            <!-- 底部提示栏 -->
-      <view class="si-modal-footer" @click.stop>
-        <text class="si-tip">将二维码 / 条形码放入框内即可自动识别</text>
-        <text class="si-close-text" @click="stopScan">关闭</text>
-      </view>s
-    </view>
-    <!-- #endif -->
-  </view>
-</template>
-
-<!-- 全局样式：html5-qrcode 内部元素 -->
-<style lang="scss">
-#h5-scan-reader {
-  width: 100% !important;
-  height: 100vh !important;
-
-  video {
-    width: 100% !important;
-    height: 100vh !important;
-    object-fit: cover !important;
-    object-position: center !important;
-  }
-
-  #qr-shaded-region,
-  #html5-qrcode-anchor-scan-region {
-    border-radius: inherit;
-  }
-}
-</style>
-
-<style scoped lang="scss">
-.si-wrap {
-  width: 100%;
-  box-sizing: border-box;
-
-  // ---- 输入框容器 ----
-  :deep(.si-wd-input) {
-    background: transparent;
-    border-radius: 10rpx;
-    border: none;
-    padding-right: 4rpx;
-
-    &.is-disabled {
-      opacity: 0.6;
-    }
-  }
-
-  // ---- 全屏扫码弹窗 ----
-  .si-modal {
-    position: fixed;
-    inset: 0;
-    z-index: 999;
-    background: #000;
-  }
-
-  .si-camera-area {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-
-    // 摄像头包装容器（全屏）
-    .si-reader-wrap {
-      position: absolute;
-      inset: 0;
-      overflow: hidden;
-    }
-
-    // 摄像头渲染容器
-    .si-reader {
-      width: 100%;
-      height: 100%;
-    }
-
-    // 扫描动画线（全屏时收缩在视频可视区域中间）
-    .si-scan-frame {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right:0;
-      pointer-events: none;
-      z-index: 5;
-      overflow: hidden;
-      width:100vw;
-      height: 100vh;
-
-      .si-scan-line {
-        position: absolute;
-        top: 2%;
-        left: 10rpx;
-        right: 10rpx;
-        height: 6rpx;
-        background: #07c160;
-        border-radius: 3rpx;
-        box-shadow: 0 0 20rpx 4rpx rgba(7, 193, 96, 0.7);
-        animation: si-sweep 2.5s ease-in-out infinite;
-      }
-    }
-
-    // 加载中遮罩
-    .si-loading-mask {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 10;
-      background: rgba(0, 0, 0, 0.5);
-
-      .si-loading-box {
-        background: rgba(0, 0, 0, 0.75);
-        padding: 30rpx 48rpx;
-        border-radius: 16rpx;
-
-        .si-loading-text {
-          color: #fff;
-          font-size: 28rpx;
-        }
-      }
-    }
-  }
-
-  // 底部提示栏（绝对定位在弹窗底部）
-  .si-modal-footer {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 10;
-    padding: 40rpx 32rpx calc(80rpx + env(safe-area-inset-bottom, 0));
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 24rpx;
-
-    .si-tip {
-      color: rgba(255, 255, 255, 0.65);
-      font-size: 26rpx;
-      letter-spacing: 2rpx;
-    }
-
-    .si-close-text {
-      color: rgba(255, 255, 255, 0.85);
-      font-size: 30rpx;
-      padding: 12rpx 48rpx;
-      border: 2rpx solid rgba(255, 255, 255, 0.3);
-      border-radius: 40rpx;
-    }
-  }
-}
-
-@keyframes si-sweep {
-  0% { top:30%; opacity: 1; }
-  50% { opacity: 1; }
-  100% { top: 70%; opacity: 0.3; }
-}
-</style>
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
+
+defineOptions({
+  name: 'ScanInput',
+})
+
+// ---- 类型 ----
+type Html5QrcodeInstance = {
+  start: (config: object, opts: object, onSuccess: (text: string) => void, onFailure: () => void) => Promise<void>
+  stop: () => Promise<void>
+  clear: () => Promise<void>
+  isScanning?: boolean
+}
+
+// ---- Props ----
+const props = withDefaults(defineProps<{
+  /** v-model 绑定值 */
+  modelValue?: string
+  /** 自动启动扫码 */
+  autoStart?: boolean
+  /** 占位文本 */
+  placeholder?: string
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 扫码成功后自动关闭弹窗 (H5) */
+  autoCloseOnSuccess?: boolean
+  /** 扫码成功后是否展示 toast 提示 */
+  showSuccessToast?: boolean
+}>(), {
+  modelValue: '',
+  autoStart: false,
+  placeholder: '请输入或扫描二维码/条形码',
+  disabled: false,
+  autoCloseOnSuccess: true,
+  showSuccessToast: true,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string): void
+  (e: 'scan', data: string): void
+  (e: 'input', data: string): void
+  (e: 'error', error: string): void
+}>()
+
+// ---- 状态 ----
+const inputValue = ref(props.modelValue)
+const isScanning = ref(false)
+const showScanModal = ref(false)
+const isLoading = ref(false)
+let html5QrcodeScanner: Html5QrcodeInstance | null = null
+let scanLocked = false
+
+// v-model 同步
+watch(() => props.modelValue, (val) => { inputValue.value = val })
+watch(inputValue, (val) => { emit('update:modelValue', val); emit('input', val) })
+
+/** 外部可调用的方法 */
+function clear() { inputValue.value = '' }
+function focus() { /* wd-input 聚焦可通过 ref 实现 */ }
+
+defineExpose({ clear, focus, startScan: handleStartScan, stopScan })
+
+// ======================== H5 平台扫码 ========================
+// #ifdef H5
+import { Html5Qrcode } from 'html5-qrcode'
+
+/** 环境检测 */
+function checkCameraEnvironment(): { ok: boolean; reason?: string } {
+  const hostname = window.location.hostname
+  if (hostname === 'localhost' || hostname === '127.0.0.1') return { ok: true }
+  if (window.location.protocol !== 'https:') {
+    return { ok: false, reason: '当前非HTTPS环境，请在 https 下使用扫码功能' }
+  }
+  return { ok: true }
+}
+
+async function startScan() {
+  if (isScanning.value || scanLocked) return
+  const envCheck = checkCameraEnvironment()
+  if (!envCheck.ok) {
+    uni.showToast({ title: envCheck.reason || '环境不支持', icon: 'none' })
+    return
+  }
+
+  isLoading.value = true
+  isScanning.value = true
+  showScanModal.value = true
+  scanLocked = false
+
+  try {
+    await nextTick()
+    await new Promise(r => setTimeout(r, 200))
+
+    const container = document.getElementById('h5-scan-reader')
+    if (!container) throw new Error('扫码容器未找到')
+
+    html5QrcodeScanner = new Html5Qrcode('h5-scan-reader') as unknown as Html5QrcodeInstance
+
+    await html5QrcodeScanner.start(
+      { facingMode: 'environment' },
+      { fps: 5 },
+      (decodedText: string) => {
+        if (scanLocked || !isScanning.value) return
+        scanLocked = true // 加锁防止重复触发
+
+        console.log('[ScanInput] 扫码成功:', decodedText)
+        inputValue.value = decodedText
+        emit('scan', decodedText)
+        if (props.showSuccessToast) uni.showToast({ title: '扫描成功', icon: 'success' })
+        if (props.autoCloseOnSuccess) stopScan()
+      },
+      () => {}, // 忽略中间帧未识别错误
+    )
+
+    // JS 强制全屏 video（html5-qrcode 库会覆盖 CSS，需运行时修正）
+    const videoEl = document.querySelector('#h5-scan-reader video') as HTMLVideoElement | null
+    if (videoEl) {
+      Object.assign(videoEl.style, {
+        width: '100%',
+        height: '100vh',
+        objectFit: 'cover',
+        objectPosition: 'center',
+      })
+    }
+  }
+  catch (error: unknown) {
+    console.error('[ScanInput] 启动失败:', error)
+    const errMsg = error instanceof Error ? error.message : String(error)
+    let msg = '摄像头访问失败'
+    if (/Permission|NotAllowed/i.test(errMsg)) msg = '请允许浏览器使用摄像头'
+    else if (/NotFound|not found/i.test(errMsg)) msg = '未检测到摄像头设备'
+    else if (/secure origin|insecure/i.test(errMsg)) msg = '需要HTTPS环境才能使用摄像头'
+
+    emit('error', msg)
+    isScanning.value = false
+    showScanModal.value = false
+    uni.showModal({ title: '提示', content: msg, showCancel: false })
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+async function stopScan() {
+  isScanning.value = false
+  showScanModal.value = false
+  scanLocked = false
+  if (html5QrcodeScanner) {
+    try {
+      if (html5QrcodeScanner.isScanning) await html5QrcodeScanner.stop()
+      await html5QrcodeScanner.clear()
+    }
+    catch { /* ignore cleanup error */ }
+    html5QrcodeScanner = null
+  }
+}
+// #endif
+
+// ======================== 非 H5 平台扫码 ========================
+function startUniScanCode() {
+  // #ifndef H5
+  uni.scanCode({
+    success(res: UniApp.ScanCodeSuccessRes) {
+      inputValue.value = res.result
+      emit('scan', res.result)
+      uni.showToast({ title: '扫描成功', icon: 'success' })
+    },
+    fail() { emit('error', '扫描已取消') },
+  })
+  // #endif
+}
+
+// ======================== 公共方法 ========================
+function handleStartScan() {
+  if (props.disabled) return
+  // #ifdef H5
+  isScanning.value ? stopScan() : startScan()
+  // #endif
+  // #ifndef H5
+  startUniScanCode()
+  // #endif
+}
+
+/** 点击遮罩层关闭 (仅 H5) */
+function handleModalMaskClick() {
+  // #ifdef H5
+  stopScan()
+  // #endif
+}
+
+function handleConfirm() {
+  const val = inputValue.value.trim()
+  if (val) emit('scan', val)
+}
+
+// ---- 生命周期 ----
+onMounted(() => { if (props.autoStart && !props.disabled) handleStartScan() })
+onUnmounted(() => {
+  // #ifdef H5
+  stopScan()
+  // #endif
+})
+</script>
+
+<template>
+  <view class="si-wrap">
+    <!-- 输入框 -->
+    <wd-input
+      v-model="inputValue"
+      class="!pr-3"
+      :placeholder="placeholder"
+      type="text"
+      confirm-type="search"
+      clearable
+      no-border
+      :disabled="disabled"
+      custom-class="si-wd-input"
+      @confirm="handleConfirm"
+      suffix-icon="scan"
+      @clicksuffixicon="handleStartScan"
+    />
+
+    <!-- #ifdef H5 -->
+    <!-- 全屏扫码弹窗 -->
+    <view
+      v-if="showScanModal"
+      class="si-modal"
+      catchtouchmove
+      @click="handleModalMaskClick"
+    >
+      <!-- 摄像头区域 -->
+      <view class="si-camera-area" @click.stop>
+        <!-- 加载中 -->
+        <view v-if="isLoading" class="si-loading-mask">
+          <view class="si-loading-box">
+            <text class="si-loading-text">正在启动摄像头...</text>
+          </view>
+        </view>
+
+        <!-- 渲染容器 + 扫描线 -->
+        <view class="si-reader-wrap  overflow-hidden">
+          <div id="h5-scan-reader" class="si-reader" />
+          <view v-show="isScanning && !isLoading" class="si-scan-frame">
+            <view class="si-scan-line" />
+          </view>
+        </view>
+      </view>
+            <!-- 底部提示栏 -->
+      <view class="si-modal-footer" @click.stop>
+        <text class="si-tip">将二维码 / 条形码放入框内即可自动识别</text>
+        <text class="si-close-text" @click="stopScan">关闭</text>
+      </view>s
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<!-- 全局样式：html5-qrcode 内部元素 -->
+<style lang="scss">
+#h5-scan-reader {
+  width: 100% !important;
+  height: 100vh !important;
+
+  video {
+    width: 100% !important;
+    height: 100vh !important;
+    object-fit: cover !important;
+    object-position: center !important;
+  }
+
+  #qr-shaded-region,
+  #html5-qrcode-anchor-scan-region {
+    border-radius: inherit;
+  }
+}
+</style>
+
+<style scoped lang="scss">
+.si-wrap {
+  width: 100%;
+  box-sizing: border-box;
+
+  // ---- 输入框容器 ----
+  :deep(.si-wd-input) {
+    background: transparent;
+    border-radius: 10rpx;
+    border: none;
+    padding-right: 4rpx;
+
+    &.is-disabled {
+      opacity: 0.6;
+    }
+  }
+
+  // ---- 全屏扫码弹窗 ----
+  .si-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 999;
+    background: #000;
+  }
+
+  .si-camera-area {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+
+    // 摄像头包装容器（全屏）
+    .si-reader-wrap {
+      position: absolute;
+      inset: 0;
+      overflow: hidden;
+    }
+
+    // 摄像头渲染容器
+    .si-reader {
+      width: 100%;
+      height: 100%;
+    }
+
+    // 扫描动画线（全屏时收缩在视频可视区域中间）
+    .si-scan-frame {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right:0;
+      pointer-events: none;
+      z-index: 5;
+      overflow: hidden;
+      width:100vw;
+      height: 100vh;
+
+      .si-scan-line {
+        position: absolute;
+        top: 2%;
+        left: 10rpx;
+        right: 10rpx;
+        height: 6rpx;
+        background: #07c160;
+        border-radius: 3rpx;
+        box-shadow: 0 0 20rpx 4rpx rgba(7, 193, 96, 0.7);
+        animation: si-sweep 2.5s ease-in-out infinite;
+      }
+    }
+
+    // 加载中遮罩
+    .si-loading-mask {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+      background: rgba(0, 0, 0, 0.5);
+
+      .si-loading-box {
+        background: rgba(0, 0, 0, 0.75);
+        padding: 30rpx 48rpx;
+        border-radius: 16rpx;
+
+        .si-loading-text {
+          color: #fff;
+          font-size: 28rpx;
+        }
+      }
+    }
+  }
+
+  // 底部提示栏（绝对定位在弹窗底部）
+  .si-modal-footer {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    padding: 40rpx 32rpx calc(80rpx + env(safe-area-inset-bottom, 0));
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24rpx;
+
+    .si-tip {
+      color: rgba(255, 255, 255, 0.65);
+      font-size: 26rpx;
+      letter-spacing: 2rpx;
+    }
+
+    .si-close-text {
+      color: rgba(255, 255, 255, 0.85);
+      font-size: 30rpx;
+      padding: 12rpx 48rpx;
+      border: 2rpx solid rgba(255, 255, 255, 0.3);
+      border-radius: 40rpx;
+    }
+  }
+}
+
+@keyframes si-sweep {
+  0% { top:30%; opacity: 1; }
+  50% { opacity: 1; }
+  100% { top: 70%; opacity: 0.3; }
+}
+</style>