第一次迭代优化
This commit is contained in:
andy
@@ -1,63 +1,141 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { nextTick, onBeforeUnmount, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showToast } from 'vant'
|
||||
import { Keyboard, QrCode, ScanLine } from 'lucide-vue-next'
|
||||
import { fetchOrderDetail } from '@/api/orders'
|
||||
import { QrCode, X } from 'lucide-vue-next'
|
||||
import { parseWriteOffCode, type WriteOffCodePayload } from '@/utils/writeOffCode'
|
||||
|
||||
const router = useRouter()
|
||||
const orderId = ref('')
|
||||
const videoRef = ref<HTMLVideoElement | null>(null)
|
||||
const loading = ref(false)
|
||||
const scanning = ref(false)
|
||||
const scanError = ref('')
|
||||
|
||||
const queryOrder = async () => {
|
||||
if (!orderId.value.trim()) {
|
||||
showToast('请输入订单号')
|
||||
let stream: MediaStream | null = null
|
||||
let detector: { detect: (source: HTMLVideoElement) => Promise<Array<{ rawValue: string }>> } | null = null
|
||||
let frameId = 0
|
||||
|
||||
const getBarcodeDetector = () => {
|
||||
return (window as unknown as {
|
||||
BarcodeDetector?: new (options: { formats: string[] }) => {
|
||||
detect: (source: HTMLVideoElement) => Promise<Array<{ rawValue: string }>>
|
||||
}
|
||||
}).BarcodeDetector
|
||||
}
|
||||
|
||||
const stopScan = () => {
|
||||
scanning.value = false
|
||||
if (frameId) {
|
||||
window.cancelAnimationFrame(frameId)
|
||||
frameId = 0
|
||||
}
|
||||
if (stream) {
|
||||
stream.getTracks().forEach((track) => track.stop())
|
||||
stream = null
|
||||
}
|
||||
if (videoRef.value) {
|
||||
videoRef.value.srcObject = null
|
||||
}
|
||||
}
|
||||
|
||||
const goConfirm = (payload: WriteOffCodePayload) => {
|
||||
router.push({
|
||||
path: '/verify/confirm',
|
||||
query: {
|
||||
orderId: payload.orderId,
|
||||
...(payload.packageName ? { packageName: payload.packageName } : {})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleCodeValue = (rawValue: string) => {
|
||||
const payload = parseWriteOffCode(rawValue)
|
||||
stopScan()
|
||||
goConfirm(payload)
|
||||
}
|
||||
|
||||
const detectLoop = async () => {
|
||||
if (!scanning.value || !videoRef.value || !detector) return
|
||||
const video = videoRef.value
|
||||
|
||||
try {
|
||||
if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
|
||||
const results = await detector.detect(video)
|
||||
const value = results[0]?.rawValue
|
||||
if (value) {
|
||||
handleCodeValue(value)
|
||||
return
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
scanError.value = '扫码识别失败，请调整距离或光线后重试'
|
||||
}
|
||||
|
||||
if (scanning.value) {
|
||||
frameId = window.requestAnimationFrame(detectLoop)
|
||||
}
|
||||
}
|
||||
|
||||
const startScan = async () => {
|
||||
if (scanning.value || loading.value) return
|
||||
const BarcodeDetector = getBarcodeDetector()
|
||||
if (!BarcodeDetector) {
|
||||
scanError.value = '当前浏览器不支持摄像头扫码'
|
||||
showToast('当前浏览器不支持摄像头扫码')
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
scanError.value = ''
|
||||
try {
|
||||
const detail = await fetchOrderDetail(orderId.value.trim())
|
||||
router.push({
|
||||
path: '/verify/confirm',
|
||||
query: {
|
||||
orderId: detail.orderId,
|
||||
packageName: detail.commodityName
|
||||
detector = new BarcodeDetector({ formats: ['qr_code'] })
|
||||
stream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: false,
|
||||
video: {
|
||||
facingMode: { ideal: 'environment' }
|
||||
}
|
||||
})
|
||||
scanning.value = true
|
||||
await nextTick()
|
||||
if (!videoRef.value) return
|
||||
videoRef.value.srcObject = stream
|
||||
await videoRef.value.play()
|
||||
frameId = window.requestAnimationFrame(detectLoop)
|
||||
} catch (error) {
|
||||
stopScan()
|
||||
scanError.value = error instanceof Error && error.name === 'NotAllowedError'
|
||||
? '未获得摄像头权限，请允许后重试'
|
||||
: '无法打开摄像头，请检查浏览器权限'
|
||||
showToast(scanError.value)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const scanPlaceholder = () => {
|
||||
showToast('当前先按订单号核销，扫码入口已预留')
|
||||
}
|
||||
onBeforeUnmount(stopScan)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<header class="page-header">
|
||||
<p class="page-kicker">商品核销</p>
|
||||
<h1 class="page-title">核销订单</h1>
|
||||
<p class="page-subtitle">输入订单号后核对商品与联系人信息，再确认核销。</p>
|
||||
<h1 class="page-title">扫码核销</h1>
|
||||
<p class="page-subtitle">扫描客人二维码，核对订单信息后再确认核销。</p>
|
||||
</header>
|
||||
|
||||
<section class="scan-panel panel">
|
||||
<button class="scan-button" type="button" @click="scanPlaceholder">
|
||||
<div v-if="scanning" class="scanner-live">
|
||||
<video ref="videoRef" muted playsinline />
|
||||
<div class="scan-frame" />
|
||||
<button class="stop-button" type="button" aria-label="停止扫码" @click="stopScan">
|
||||
<X :size="18" />
|
||||
</button>
|
||||
</div>
|
||||
<button v-else class="scan-button" type="button" :disabled="loading" @click="startScan">
|
||||
<QrCode :size="54" />
|
||||
<span>扫码核销</span>
|
||||
<span>{{ loading ? '正在打开摄像头' : '点击进行扫码' }}</span>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section class="panel form-panel">
|
||||
<h2 class="section-title">手动核销</h2>
|
||||
<van-field v-model="orderId" label="订单号" placeholder="请输入订单号" clearable>
|
||||
<template #left-icon><Keyboard :size="17" /></template>
|
||||
</van-field>
|
||||
<van-button block type="primary" :loading="loading" @click="queryOrder">
|
||||
<template #icon><ScanLine :size="18" /></template>
|
||||
查询订单
|
||||
</van-button>
|
||||
<p v-if="scanError" class="scan-error">{{ scanError }}</p>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
@@ -70,6 +148,57 @@ const scanPlaceholder = () => {
|
||||
var(--surface);
|
||||
}
|
||||
|
||||
.scanner-live {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 260px;
|
||||
border-radius: var(--radius);
|
||||
background: #111827;
|
||||
}
|
||||
|
||||
.scanner-live video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.scan-frame {
|
||||
position: absolute;
|
||||
inset: 50% auto auto 50%;
|
||||
width: min(68vw, 230px);
|
||||
height: min(68vw, 230px);
|
||||
border: 2px solid rgba(255, 255, 255, 0.92);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.22);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.scan-frame::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 14px;
|
||||
left: 14px;
|
||||
height: 2px;
|
||||
background: var(--primary);
|
||||
box-shadow: 0 0 16px rgba(15, 139, 114, 0.9);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.stop-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
display: grid;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: rgba(17, 24, 39, 0.68);
|
||||
color: #fff;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.scan-button {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
@@ -79,21 +208,18 @@ const scanPlaceholder = () => {
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
color: var(--primary-deep);
|
||||
font-weight: 750;
|
||||
gap: 10px;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.scan-button span {
|
||||
margin-top: 10px;
|
||||
.scan-button:disabled {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.form-panel {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.form-panel :deep(.van-cell) {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
.scan-error {
|
||||
margin: 10px 0 0;
|
||||
color: var(--rose);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user