庄锐波
6 months ago
4 changed files with 413 additions and 7 deletions
@ -1,11 +1,393 @@ |
|||
<script setup> |
|||
<template> |
|||
<div class="home app_content"> |
|||
<!-- 中间 --> |
|||
<div class="warp_body"> |
|||
<div class="white-body"> |
|||
<div class="boutique_box"> |
|||
<div class="boutique_body"> |
|||
<div class="box-qr-code" @click="toScanPageView"> |
|||
</div> |
|||
</div> |
|||
<div class="scan-note">扫一扫企业二维码，即可查看企业信息</div> |
|||
<div class="nocode" @click="showSearchPopup()">手动登记，请输入关键字搜索企业 >></div> |
|||
</div> |
|||
|
|||
</script> |
|||
<div class="record"> |
|||
如遇网络异常、设备故障无法登录系统的情况，<a @click="toSign">补录 >></a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<template> |
|||
<!-- html5-qrcode 扫码弹层（仅 dev 环境） --> |
|||
<van-overlay :show="showScanner" @click="closeScannerOverlay" z-index="9999"> |
|||
<div class="scanner-wrapper" @click.stop> |
|||
<div class="scanner-header"> |
|||
<span class="scanner-title">扫描二维码</span> |
|||
<van-icon name="cross" class="scanner-close" @click="closeScanner" /> |
|||
</div> |
|||
<div id="qr-reader" class="qr-reader-box"></div> |
|||
<div class="scanner-tip">请将二维码置于框内，自动识别</div> |
|||
</div> |
|||
</van-overlay> |
|||
|
|||
<!-- 隐藏的文件选择（摄像头不可用时的后备方案：上传二维码图片识别） --> |
|||
<input |
|||
ref="fileInputRef" |
|||
type="file" |
|||
accept="image/*" |
|||
style="display: none;" |
|||
@change="onFileSelected" |
|||
/> |
|||
<!-- html5-qrcode scanFile 需要的隐藏容器 --> |
|||
<div id="qr-reader-file-scan" style="display: none;"></div> |
|||
|
|||
<!-- 手动搜索弹窗 placeholder --> |
|||
<!-- <popup :visible="popupVisible" @close="closePopup" /> --> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
<script setup name="ScanEntQRCode"> |
|||
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'; |
|||
import { useRouter } from 'vue-router'; |
|||
import { showFailToast, showSuccessToast, showToast, showConfirmDialog } from 'vant'; |
|||
import { baseUrl, appEnv } from '@/config/env.js'; |
|||
import wx from 'weixin-js-sdk'; |
|||
|
|||
const router = useRouter(); |
|||
|
|||
// ========== 扫码相关 ========== |
|||
const showScanner = ref(false); |
|||
const fileInputRef = ref(null); |
|||
let html5QrCode = null; |
|||
|
|||
/** |
|||
* 点击扫码入口 |
|||
*/ |
|||
const toScanPageView = () => { |
|||
if (appEnv === 'dev') { |
|||
openHtml5QrcodeScanner(); |
|||
} else { |
|||
openWxScan(); |
|||
} |
|||
}; |
|||
|
|||
// ---------- dev 环境：html5-qrcode ---------- |
|||
|
|||
const openHtml5QrcodeScanner = async () => { |
|||
showScanner.value = true; |
|||
await nextTick(); |
|||
|
|||
const { Html5Qrcode } = await import('html5-qrcode'); |
|||
html5QrCode = new Html5Qrcode('qr-reader'); |
|||
|
|||
try { |
|||
await html5QrCode.start( |
|||
{ facingMode: 'environment' }, |
|||
{ |
|||
fps: 10, |
|||
qrbox: { width: 250, height: 250 }, |
|||
}, |
|||
onScanSuccess, |
|||
onScanFailure |
|||
); |
|||
} catch (err) { |
|||
console.error('摄像头启动失败', err); |
|||
showScanner.value = false; |
|||
// 摄像头不可用时，提供上传二维码图片的后备方案 |
|||
showConfirmDialog({ |
|||
title: '摄像头不可用', |
|||
message: '无法启动摄像头，是否选择一张二维码图片进行识别？', |
|||
confirmButtonText: '选择图片', |
|||
cancelButtonText: '取消', |
|||
}).then(() => { |
|||
fileInputRef.value?.click(); |
|||
}).catch(() => { |
|||
// 用户取消 |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
const onScanSuccess = (decodedText, decodedResult) => { |
|||
console.log('扫码结果:', decodedText); |
|||
closeScanner(); |
|||
handleScanResult(decodedText); |
|||
}; |
|||
|
|||
const onScanFailure = (error) => { |
|||
// 扫描中，忽略连续失败的回调 |
|||
}; |
|||
|
|||
const closeScanner = async () => { |
|||
if (html5QrCode) { |
|||
try { |
|||
await html5QrCode.stop(); |
|||
} catch (e) { |
|||
console.warn('停止扫码器异常', e); |
|||
} |
|||
html5QrCode = null; |
|||
} |
|||
showScanner.value = false; |
|||
}; |
|||
|
|||
const closeScannerOverlay = () => { |
|||
closeScanner(); |
|||
}; |
|||
|
|||
// ---------- 后备方案：上传二维码图片识别 ---------- |
|||
|
|||
const onFileSelected = async (event) => { |
|||
const file = event.target.files?.[0]; |
|||
if (!file) return; |
|||
|
|||
try { |
|||
const { Html5Qrcode } = await import('html5-qrcode'); |
|||
const html5Qr = new Html5Qrcode('qr-reader-file-scan'); |
|||
const decodedText = await html5Qr.scanFile(file, /* showImage= */ false); |
|||
console.log('图片识别结果:', decodedText); |
|||
handleScanResult(decodedText); |
|||
} catch (err) { |
|||
console.error('图片二维码识别失败', err); |
|||
showFailToast('无法从图片中识别二维码，请确认图片包含有效的二维码'); |
|||
} finally { |
|||
// 重置 input，允许重复选择同一文件 |
|||
if (fileInputRef.value) { |
|||
fileInputRef.value.value = ''; |
|||
} |
|||
} |
|||
}; |
|||
|
|||
// ---------- prod 环境：wx.scanQRCode ---------- |
|||
|
|||
const openWxScan = () => { |
|||
// TODO: 对接实际微信 JSSDK token 接口后启用 |
|||
// 当前仅预留调用骨架，需配合服务端 szyptGetToken 接口获取签名 |
|||
const fullUrl = window.location.href; |
|||
const paramUrl = fullUrl.split('#')[0]; |
|||
|
|||
showToast('正在调起微信扫码...'); |
|||
|
|||
// 以下为 wx.config + wx.scanQRCode 的标准流程 |
|||
// 实际使用时需先调用服务端接口获取 config 参数 |
|||
/* |
|||
szyptGetToken({ url: paramUrl }, (res) => { |
|||
const data = res.data; |
|||
wx.config({ |
|||
debug: false, |
|||
appId: data.corpid, |
|||
timestamp: data.timestamp, |
|||
nonceStr: data.nonceStr, |
|||
signature: data.signature, |
|||
jsApiList: ['scanQRCode'], |
|||
}); |
|||
wx.ready(() => { |
|||
wxClickScan(); |
|||
}); |
|||
wx.error((err) => { |
|||
console.error('wx.config 失败', err); |
|||
showFailToast('微信配置失败，请重试'); |
|||
}); |
|||
}); |
|||
*/ |
|||
|
|||
// 开发阶段直接尝试调用（在微信浏览器内有效） |
|||
wxClickScan(); |
|||
}; |
|||
|
|||
const wxClickScan = () => { |
|||
wx.scanQRCode({ |
|||
needResult: 1, |
|||
scanType: ['qrCode', 'barCode'], |
|||
success: (res) => { |
|||
console.log('wx 扫码返回:', res); |
|||
handleScanResult(res.resultStr); |
|||
}, |
|||
error: (res) => { |
|||
console.error('wx 扫码错误:', res); |
|||
if (res.errMsg && res.errMsg.indexOf('function_not_exist') > 0) { |
|||
showFailToast('版本过低请升级'); |
|||
} |
|||
}, |
|||
cancel: () => { |
|||
console.log('用户取消扫码'); |
|||
}, |
|||
}); |
|||
}; |
|||
|
|||
// ========== 扫码结果处理 ========== |
|||
|
|||
const handleScanResult = (resultStr) => { |
|||
console.log('========== 扫码结果处理 =========='); |
|||
console.log('原始内容:', resultStr); |
|||
|
|||
if (isHttpLink(resultStr)) { |
|||
// HTTP 链接类型（市监二维码） |
|||
// TODO: 对接服务端 getEnterpriseInfoBySj 接口 |
|||
console.log('识别到 HTTP 链接，待对接服务端接口:', resultStr); |
|||
showToast('识别到企业链接，服务端接口待对接'); |
|||
} else { |
|||
// JSON 类型（执法码二维码） |
|||
try { |
|||
const scanObj = JSON.parse(resultStr); |
|||
console.log('解析到 JSON 二维码:', scanObj); |
|||
// TODO: 对接服务端 checkIsState 接口 |
|||
// checkIsState(scanObj.salt, scanObj.codeId, (res) => { ... }); |
|||
showToast('识别到执法码二维码，服务端接口待对接'); |
|||
} catch (e) { |
|||
console.warn('非 JSON 格式，原始内容:', resultStr); |
|||
showFailToast('无法识别该二维码'); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
const isHttpLink = (url) => { |
|||
return url.indexOf('http://') === 0 || url.indexOf('https://') === 0; |
|||
}; |
|||
|
|||
// ========== 页面跳转 ========== |
|||
|
|||
const toSign = () => { |
|||
router.push({ |
|||
path: '/sign', |
|||
query: { |
|||
reason: '补录', |
|||
checkCss: 9, |
|||
isNoScan: true, |
|||
}, |
|||
}); |
|||
}; |
|||
|
|||
const showSearchPopup = () => { |
|||
// TODO: 对接手动搜索企业弹窗 |
|||
showToast('手动搜索企业功能待对接'); |
|||
}; |
|||
|
|||
// ========== 生命周期 ========== |
|||
|
|||
onBeforeUnmount(() => { |
|||
// 页面销毁时确保关闭摄像头 |
|||
if (html5QrCode) { |
|||
html5QrCode.stop().catch(() => {}); |
|||
html5QrCode = null; |
|||
} |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.home { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
background-color: #ebf3fb; |
|||
|
|||
.warp_body { |
|||
position: relative; |
|||
background-image: linear-gradient(to bottom, #ebf3fb, transparent); |
|||
} |
|||
|
|||
.boutique_box { |
|||
position: relative; |
|||
top: 25%; |
|||
z-index: 100; |
|||
width: 100%; |
|||
|
|||
.boutique_body { |
|||
padding: 0 0 0.27rem 0; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.box-qr-code { |
|||
width: 52%; |
|||
text-align: right; |
|||
height: 6rem; |
|||
background: url("../../assets/images/scan-btn.jpg") no-repeat center center; |
|||
background-size: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.white-body { |
|||
position: relative; |
|||
margin: 0 3%; |
|||
width: 94%; |
|||
height: 99%; |
|||
background-color: #fff; |
|||
border-radius: 0.27rem; |
|||
} |
|||
|
|||
.scan-note { |
|||
width: 100%; |
|||
color: #d3d0d0; |
|||
font-size: 0.35rem; |
|||
text-align: center; |
|||
line-height: 2; |
|||
} |
|||
|
|||
.nocode { |
|||
margin: 15% 0 0; |
|||
width: 100%; |
|||
color: #fb7905; |
|||
font-size: 0.42rem; |
|||
text-align: center; |
|||
line-height: 5; |
|||
} |
|||
|
|||
.record { |
|||
position: absolute; |
|||
bottom: 2rem; |
|||
color: #bbbaba; |
|||
font-size: 0.35rem; |
|||
width: 100%; |
|||
text-align: center; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.record a { |
|||
color: #287eef; |
|||
} |
|||
|
|||
/* ========== html5-qrcode 扫码弹层样式 ========== */ |
|||
.scanner-wrapper { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
width: 90%; |
|||
max-width: 500px; |
|||
background: #fff; |
|||
border-radius: 0.27rem; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.scanner-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0.3rem 0.4rem; |
|||
background: #1367fe; |
|||
color: #fff; |
|||
} |
|||
|
|||
.scanner-title { |
|||
font-size: 0.42rem; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.scanner-close { |
|||
font-size: 0.5rem; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.qr-reader-box { |
|||
width: 100%; |
|||
min-height: 300px; |
|||
} |
|||
|
|||
.scanner-tip { |
|||
padding: 0.25rem 0; |
|||
text-align: center; |
|||
font-size: 0.32rem; |
|||
color: #999; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue