核心内容摘要
快递鸟物流API实战：3大核心功能深度解析与电商场景高效集成指南
1实现一个hooksimport { onMounted, onUnmounted, ref } from vue interface ScanOptions { threshold?: number minLength?: number onScanProgress?: (buffer: string) void onScanSuccess: (code: string) void } export function useScanGun(options: ScanOptions) { const { threshold 100, minLength 6, onScanProgress, onScanSuccess } options const codeBuffer ref() const lastScanned ref() let lastTime 0 let timer: ReturnTypetypeof setTimeout | null null const commit (preventDefaultEvent?: KeyboardEvent) { const value codeBuffer.value if (value.length minLength) { lastScanned.value value onScanSuccess(value) if (preventDefaultEvent) preventDefaultEvent.preventDefault() } codeBuffer.value lastTime 0 } const handleKeyDown (event: KeyboardEvent) { const currentTime Date.now() if (timer ! null) { clearTimeout(timer) timer null } if (event.metaKey || event.ctrlKey || event.altKey) return const limit event.key Enter ? threshold * 2 : threshold if (lastTime ! 0 currentTime - lastTime limit) { codeBuffer.value } if (event.key Enter) { commit(event) return } if (event.key.length
{ codeBuffer.value event.key onScanProgress?.(codeBuffer.value) } lastTime currentTime timer setTimeout(() { commit() }, threshold *
} onMounted(() { window.addEventListener(keydown, handleKeyDown, true) }) onUnmounted(() { if (timer ! null) { clearTimeout(timer) timer null } window.removeEventListener(keydown, handleKeyDown, true) }) return { codeBuffer, lastScanned } }2 在app.vue中全局监听扫码的结果script setup langts import zhCn from element-plus/es/locale/lang/zh-cn import { onMounted, ref } from vue import { recordProgress, signRegister } from /apis import { useScanGun } from /hooks/useScan const SCANNER_PREFIXES [A|, B|, C|, D|, E|, F|] as const type ScannerPrefix (typeof SCANNER_PREFIXES)[number] const parseScannerPayload (raw: string): { prefix: ScannerPrefix; payload: string } | null { const text String(raw ?? ).trim() if (!text) return null for (const prefix of SCANNER_PREFIXES) { if (text.startsWith(prefix)) return { prefix, payload: text.slice(prefix.length) } } return null } const code ref() useScanGun({ threshold: 200, onScanProgress: (buffer) { console.log(codeBuffer, buffer) }, onScanSuccess: (result) { console.log(app---扫码成功, result) const parsed parseScannerPayload(result) const rawPayload (parsed?.payload ?? result).trim() if (!rawPayload) return const rawParts rawPayload.split(-) const orderNo rawParts[0]?.trim() || const cardNo rawParts.length 2 ? rawParts.slice(
.join(-).trim() : const inputValue cardNo || rawPayload code.value inputValue window.dispatchEvent( new CustomEvent(global-scan, { detail: { raw: result, prefix: parsed?.prefix, rawPayload, orderNo, cardNo, payload: inputValue } }) ) const active document.activeElement if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement) { active.value inputValue active.dispatchEvent(new Event(input, { bubbles: true })) } //工位一扫码只得到客户邮寄的订单信息 if (parsed?.prefix A|) { signRegister({ logisticsNo: orderNo || rawPayload }) .then((res) console.log(signRegister success:, res)) .catch((err) console.error(signRegister error:, err)) return } //其他工位单独区分... if (parsed) { recordProgress({ orderNo: orderNo || rawPayload, cardNos: cardNo ? [cardNo] : [] }) .then((res) console.log(recordProgress success:, res)) .catch((err) console.error(recordProgress error:, err)) } } }) onMounted(() { console.log(扫码枪已就绪) }) /script template el-config-provider :localezhCn router-view/router-view /el-config-provider /template style scoped/style注意这里 const SCANNER_PREFIXES [A|, B|, C|, D|, E|, F|] as const的目的是为了区分不同的扫描枪。
扫描枪扫码以后得到的数据前会出现A|xxxx,B|xxxxx等。
这是通过scan123这个软件设置的。
比如扫描枪一设置返回的数据前缀为A|那么扫描枪1最后通过扫码的结果就是A|XXX,,扫描枪二同理...这时我们在代码里就可以区分不同的扫描枪。
让他们去做不同的业务逻辑const active document.activeElement if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement) { active.value inputValue active.dispatchEvent(new Event(input, { bubbles: true })) }这里的代码是当用户关闭定位在输入框时可以自动填充扫码枪的结果