chenrui
2 years ago
5 changed files with 609 additions and 157 deletions
@ -0,0 +1,548 @@ |
|||
<!-- 跳转企业二维码load页面 --> |
|||
<template> |
|||
<div class="home app_content"> |
|||
<!-- 中间 --> |
|||
<div class="warp_body"> |
|||
<div class="white-body"> |
|||
<div class="boutique_box"> |
|||
<div class="box-qr-title">执法监督码</div> |
|||
<div class="boutique_body"> |
|||
<div class="box-qr-code"> |
|||
<img class="box-qr-code-img" :src="data.qrCodeImg" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="Home"> |
|||
import Vconsole from "vconsole"; |
|||
import {showFailToast,showToast} from 'vant'; |
|||
import {checkIsState,getEnterpriseInfoBySj} from '@/api/enforce'; |
|||
import {szyptGetToken} from "@/api/Home"; |
|||
import { baseUrl } from "../../config/env"; |
|||
import wx from "weixin-js-sdk"; |
|||
|
|||
const {useCommon} = $globalStore; |
|||
const router = useRouter(); |
|||
//路由参数 |
|||
const route = useRoute(); |
|||
const intervalId = ref(null); |
|||
const data = reactive({ |
|||
showNoScanPicker: ref(false), |
|||
qrCodeImg: baseUrl + "/profile/upload/2024/11/29/03043b8531b8e1aad5a0f72d2fc605f0.jpg", |
|||
}); |
|||
const indexSens = ref(3); |
|||
const butText = ref("点击跳转企业画像....,"+indexSens.value+"秒后自动跳转"); |
|||
|
|||
|
|||
const openScan = () => { |
|||
let fullUrl = window.location.href; |
|||
let code = fullUrl.substring(fullUrl.indexOf('code=') + 5, fullUrl.indexOf('&state=')); |
|||
let paramUrl = window.location.href.split("#")[0]; |
|||
let param = {code: code, url: paramUrl}; |
|||
console.log(paramUrl); |
|||
szyptGetToken(param, success => { |
|||
let resMsg = success.data; |
|||
console.log(resMsg); |
|||
wx.config({ |
|||
// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 |
|||
debug: false, |
|||
// 必填，公众号的唯一标识 |
|||
appId: resMsg.corpid, |
|||
// 必填，生成签名的时间戳 |
|||
timestamp: resMsg.timestamp, |
|||
// 必填，生成签名的随机串 |
|||
nonceStr: resMsg.nonceStr, |
|||
// 必填，签名，见附录1 |
|||
signature: resMsg.signature, |
|||
// 必填，需要使用的JS接口列表，所有JS接口列表见附录2 |
|||
jsApiList: ["scanQRCode"], |
|||
}); |
|||
wx.ready(() => { |
|||
//微信扫一扫请求操作 |
|||
ClickScan() |
|||
}); |
|||
wx.error((res) => { |
|||
console.log("获取失败"); |
|||
}); |
|||
}, error => { |
|||
}); |
|||
}; |
|||
const ClickScan = () => { |
|||
wx.scanQRCode({ |
|||
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果， |
|||
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有 |
|||
success: (res) => { |
|||
// 页面跳转 |
|||
console.log("=========== 扫码返回 ===========") |
|||
console.log(res) |
|||
//TODO 判断是否是市监 |
|||
if(isHttpLink(res.resultStr)){ |
|||
//判断地址是否存在cid统一信用代码 |
|||
getEnterpriseInfoBySj({"url":res.resultStr},success =>{ |
|||
if (success.success) { |
|||
var element = success.data; |
|||
//TODO 添加延时弹出监督码 |
|||
showToast({ |
|||
duration: 3000, |
|||
message:"企业监督码", |
|||
icon: baseUrl + element.qrCodeGenerateHistory.qrCodeUrl, |
|||
iconSize:"100px", |
|||
onClose: openEnterpriseView(element.enterpriseNumber) |
|||
}) |
|||
|
|||
} else { |
|||
showFailToast(success.message); |
|||
router.push({ |
|||
path: "/enforce/scanQrCode", |
|||
}) |
|||
} |
|||
},error =>{}) |
|||
}else{ |
|||
const scanObj = JSON.parse(res.resultStr); |
|||
// 判断二维码是否过期, 如果已过期则跳转提示页 |
|||
checkIsState(scanObj.salt, scanObj.codeId, success => { |
|||
console.log(success) |
|||
if (success.data) { |
|||
router.push({ |
|||
path: "/enterpriseScanPreview", |
|||
query: { |
|||
enterpriseNumber: scanObj.salt, |
|||
isNoScan: false |
|||
} |
|||
}) |
|||
} else { |
|||
showFailToast(success.message); |
|||
router.push({ |
|||
path: "/enforce/scanQrCode", |
|||
}) |
|||
} |
|||
}, error => { |
|||
showFailToast("该二维码不正确"); |
|||
}) |
|||
} |
|||
}, |
|||
error: function(res) { |
|||
console.log("错误回调",res) |
|||
if (res.errMsg.indexOf('function_not_exist') > 0) { |
|||
showFailToast('版本过低请升级') |
|||
} |
|||
}, |
|||
cancel: (res) => { |
|||
console.log('err', res); |
|||
}, |
|||
|
|||
}); |
|||
}; |
|||
|
|||
const toScanPageView = async () => { |
|||
openScan(); |
|||
}; |
|||
onMounted(() => { |
|||
// new Vconsole(); |
|||
startTimer(route?.query?.enterpriseNumber); |
|||
console.log("企业统一信用代码：",route?.query?.enterpriseNumber) |
|||
console.log("企业二维码地址：",route?.query?.qrCodeUrl) |
|||
}) |
|||
//定时器 |
|||
const startTimer = (enterpriseNumber) => { |
|||
// 假设我们每隔1秒钟执行一些操作 |
|||
intervalId.value = setInterval(() => { |
|||
console.log('定时器执行中...'); |
|||
// 执行一些定时器相关的操作 |
|||
indexSens.value--; |
|||
if(indexSens.value >= 0){ |
|||
console.log("加减",indexSens.value) |
|||
butText.value = "点击跳转企业画像....,"+indexSens.value+"秒后自动跳转"; |
|||
}else{ |
|||
console.log("清除定时器") |
|||
console.log("清除定时器",enterpriseNumber) |
|||
clearInterval(intervalId.value); |
|||
router.push({ |
|||
path: "/enterpriseScanPreview", |
|||
query: { |
|||
enterpriseNumber: enterpriseNumber, |
|||
isNoScan: false |
|||
} |
|||
}) |
|||
} |
|||
}, 1000); |
|||
}; |
|||
|
|||
// 返回 |
|||
const goBack = () => { |
|||
router.go(-1); |
|||
}; |
|||
|
|||
const isHttpLink = (url) =>{ |
|||
return url.indexOf("http://") === 0 || url.indexOf("https://") === 0; |
|||
} |
|||
const openEnterpriseView = (enterpriseNumber) =>{ |
|||
console.log("外层获取企业统一信用代码",enterpriseNumber); |
|||
setTimeout(() =>{ |
|||
console.log("定时内获取企业统一信用代码",enterpriseNumber); |
|||
router.push({ |
|||
path: "/enterpriseScanPreview", |
|||
query: { |
|||
enterpriseNumber: enterpriseNumber, |
|||
isNoScan: false |
|||
} |
|||
}) |
|||
}, 3000); |
|||
} |
|||
onUnmounted(() => { |
|||
// 清除定时器 |
|||
if (intervalId.value) { |
|||
clearInterval(intervalId.value); |
|||
} |
|||
}); |
|||
</script> |
|||
<script> |
|||
//不扫码企业筛选弹窗 |
|||
import Popup from '@/views/enforce/noScanFilter.vue'; |
|||
import { baseUrl } from "../../config/env"; |
|||
|
|||
export default { |
|||
components: { |
|||
Popup |
|||
}, |
|||
data() { |
|||
return { |
|||
popupVisible: false, |
|||
popupContent: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
showPopup() { |
|||
this.popupVisible = true; |
|||
}, |
|||
closePopup() { |
|||
this.popupVisible = false; |
|||
} |
|||
} |
|||
} |
|||
</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); |
|||
|
|||
.carousel_box { |
|||
position: relative; |
|||
top: 2%; |
|||
height: 4rem; |
|||
width: 100%; |
|||
background: url("/src/assets/images/scan-mean.jpg") no-repeat center center; |
|||
background-size: 60%; |
|||
opacity: 0.75; |
|||
|
|||
.box-scan-one, .box-scan-two { |
|||
position: absolute; |
|||
top: 30%; |
|||
left: 15%; |
|||
height: 2.67rem; |
|||
width: 30%; |
|||
font-size: 0.4rem; |
|||
color: #999; |
|||
|
|||
.box-scan-text { |
|||
margin-top: 70%; |
|||
display: block; |
|||
width: 100%; |
|||
text-align: center |
|||
} |
|||
} |
|||
|
|||
.box-scan-two { |
|||
left: auto; |
|||
right: 12.5%; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.boutique_box { |
|||
position: relative; |
|||
top: 5%; |
|||
z-index: 100; |
|||
width: 100%; |
|||
|
|||
.boutique_body { |
|||
padding: 0 0 0.27rem 0; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
; |
|||
|
|||
.box-qr-code { |
|||
width: 80%; |
|||
text-align: right; |
|||
height: 7rem; |
|||
//background-color: var(--van-primary-color); |
|||
// background: url("../../assets/images/qrCode.jpg") no-repeat center center; |
|||
background-size: 100%; |
|||
// border-radius: 0.27rem; |
|||
// background-size: cover; |
|||
// border-radius: 50%; |
|||
// background-image: url("@/assets/images/scan.png"); |
|||
.box-qr-code-text { |
|||
margin-right: 25%; |
|||
margin-top: 70%; |
|||
display: block; |
|||
font-size: 0.45rem; |
|||
} |
|||
.box-qr-code-img{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
// img { |
|||
// position: absolute; |
|||
// top: 0%; |
|||
// left: 34%; |
|||
// } |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
.white-body { |
|||
position: relative; |
|||
margin: 0 3%; |
|||
width: 94%; |
|||
height: 99%; |
|||
background-color: #fff; |
|||
border-radius: 0.27rem; |
|||
} |
|||
.box-qr-title{ |
|||
margin: 3% 0 0; |
|||
width: 90%; |
|||
font-size: 0.42rem; |
|||
text-align: center; |
|||
transform: translate(5%, 5%); |
|||
line-height: 3; |
|||
} |
|||
|
|||
.nocode { |
|||
margin: 3% 0 0; |
|||
width: 90%; |
|||
font-size: 0.42rem; |
|||
text-align: center; |
|||
line-height: 3; |
|||
background-color: #619cd9; |
|||
transform: translate(5%, 5%); |
|||
border-radius: 6px; |
|||
} |
|||
|
|||
.scan-note { |
|||
width: 100%; |
|||
font-size: 0.45rem; |
|||
text-align: center; |
|||
line-height: 2; |
|||
margin-top: 2%; |
|||
} |
|||
|
|||
.popup { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: rgba(0, 0, 0, 0.35); |
|||
} |
|||
|
|||
.popup-content { |
|||
position: fixed; |
|||
z-index: 999; |
|||
bottom: 0; |
|||
left: 0; |
|||
padding: 0 3%; |
|||
width: 94%; |
|||
height: 35vh; |
|||
background: #fff; |
|||
overflow-y: auto; |
|||
font-size: 0.37rem; |
|||
} |
|||
|
|||
.subtitle { |
|||
margin: 5% 2% 2%; |
|||
width: 96%; |
|||
/*font-size: 0.4rem; |
|||
font-weight: 600;*/ |
|||
border-bottom: 1px solid #f4f4f4; |
|||
line-height: 2; |
|||
} |
|||
|
|||
.item-btn { |
|||
float: left; |
|||
margin: 0.3rem 0.2rem; |
|||
padding: 0.2rem 0.3rem; |
|||
background-color: #f2f3f4; |
|||
color: #999; |
|||
border-radius: 1rem; |
|||
font-size: 0.35rem; |
|||
} |
|||
|
|||
.item-btn.active { |
|||
background-color: #e9f2fb; |
|||
color: #1367fe; |
|||
} |
|||
|
|||
.btnbox { |
|||
display: flex; |
|||
justify-content: center; |
|||
position: absolute; |
|||
bottom: 1rem; |
|||
left: 5%; |
|||
width: 90%; |
|||
height: 1rem; |
|||
} |
|||
|
|||
.btn-reset { |
|||
display: inline-block; |
|||
margin: 0 2%; |
|||
padding: 0; |
|||
width: 60%; |
|||
color: #fff; |
|||
font-size: 0.35rem; |
|||
border-radius: 1rem; |
|||
background: #1367fe; |
|||
border: 1px solid #1367fe; |
|||
text-align: center; |
|||
} |
|||
|
|||
.btn-search { |
|||
display: inline-block; |
|||
margin: 3% 7%; |
|||
padding: 0; |
|||
width: 70%; |
|||
color: #fff; |
|||
font-size: 0.35rem; |
|||
border-radius: 1rem; |
|||
background: #1367fe; |
|||
border: 1px solid #1367fe; |
|||
text-align: center; |
|||
height: 90%; |
|||
} |
|||
|
|||
.btn-reset { |
|||
width: 35%; |
|||
background-color: #fff; |
|||
border-color: rgba(19, 103, 254, .7); |
|||
color: #1367fe; |
|||
} |
|||
|
|||
.close-button { |
|||
position: absolute; |
|||
top: 0.15rem; |
|||
right: 0.1rem; |
|||
width: 0.8rem; |
|||
height: 0.8rem; |
|||
background-color: rgba(255, 255, 255, .5); |
|||
border: 0.05rem solid rgba(255, 255, 255, .7); |
|||
border-radius: 50%; |
|||
transform: rotate(45deg); |
|||
} |
|||
|
|||
.close-button:before, |
|||
.close-button:after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
background: #333; |
|||
border-radius: 50%; |
|||
transform: translate(-50%, -50%); |
|||
height: 0.4rem; |
|||
width: 0.02rem; |
|||
} |
|||
|
|||
.close-button:after { |
|||
height: 0.02rem; |
|||
width: 0.4rem; |
|||
} |
|||
|
|||
.nav-div { |
|||
display: flex; |
|||
margin: 15% 2% 0; |
|||
width: 96%; |
|||
color: #287eef; |
|||
font-size: 0.4rem; |
|||
line-height: 2; |
|||
text-align: center; |
|||
} |
|||
|
|||
.nav-div > div { |
|||
margin: 2% 3%; |
|||
width: 45%; |
|||
} |
|||
|
|||
.nav-div div span{ |
|||
display: block; |
|||
} |
|||
|
|||
.nav-div div i { |
|||
margin: 0.35rem; |
|||
width: 1.5rem; |
|||
height: 1.5rem; |
|||
font-size: 0.8rem; |
|||
background: #e6eff7; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
line-height: 1.85; |
|||
} |
|||
|
|||
.nav-div .act-note { |
|||
margin: 10% 0 0; |
|||
width: 100%; |
|||
font-size: 0.3rem; |
|||
color: #d3d0d0; |
|||
line-height: 1.5; |
|||
text-align: left; |
|||
} |
|||
|
|||
.addinfo { |
|||
position: absolute; |
|||
bottom: 2rem; |
|||
right: 2%; |
|||
z-index: 999; |
|||
width: 1.5rem; |
|||
height: 1.5rem; |
|||
background-color: #e0e9f9; |
|||
border-radius: 50%; |
|||
box-shadow: 0 0 0.27rem #90b6f9; |
|||
color: #0240f7; |
|||
font-size: 0.4rem; |
|||
text-align: center; |
|||
vertical-align: middle; |
|||
padding-top: 0.45rem; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.record { |
|||
position: absolute; |
|||
bottom: 2rem; |
|||
color: #bbbaba; |
|||
font-size: 0.35rem; |
|||
width: 100%; |
|||
text-align: center; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.record a { |
|||
color: #287eef; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -1,135 +0,0 @@ |
|||
<style scoped> |
|||
.scan-area { |
|||
width: 100%; |
|||
height: 18.15rem; |
|||
} |
|||
</style> |
|||
|
|||
<template> |
|||
<div class="scan-area"> |
|||
<qrcode-stream @click="handleClick" :paused="scanPause" :track="paintOutLineAndCenterText" @error="handleError" @camera-on="onCameraOn"> |
|||
<div v-if="!cameraReady"> |
|||
loading... |
|||
</div> |
|||
</qrcode-stream> |
|||
<!-- <audio ref="audioRef" src="/src/assets/Di.mp3"></audio> --> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
// import Vconsole from "vconsole"; |
|||
import { QrcodeStream } from "vue-qrcode-reader"; |
|||
import {ref} from 'vue' |
|||
const audioRef = ref(null); |
|||
const errorInfo = ref(''); |
|||
const cameraReady = ref(false); |
|||
const scanPause = ref(false); |
|||
const reactAngles = ref<any>([]); |
|||
const onCameraOn = function () { |
|||
cameraReady.value = true; |
|||
// new Vconsole(); |
|||
} |
|||
const handleError = function (err) { |
|||
errorInfo.value = `[${err.name}]: ` |
|||
if (err.name === 'NotAllowedError') { |
|||
errorInfo.value += '您需要授予相机访问权限' |
|||
} else if (err.name === 'NotFoundError') { |
|||
errorInfo.value = '此设备上没有检测到摄像头'; |
|||
} else if (err.name === 'NotReadableError') { |
|||
errorInfo.value = '相机被占用' |
|||
} else if (err.name === 'NotSupportedError') { |
|||
errorInfo.value = 'secure context required (HTTPS, localhost)' |
|||
} else if (err.name === 'OverconstrainedError') { |
|||
errorInfo.value += '' |
|||
} else if (err.name === 'StreamApiNotSupportedError') { |
|||
errorInfo.value += 'Stream API is not supported in this browser' |
|||
} else if (err.name === 'InsecureContextError') { |
|||
errorInfo.value += 'Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.' |
|||
} else { |
|||
errorInfo.value += err.message |
|||
} |
|||
console.log(errorInfo.value); |
|||
errorInfo.value = ''; |
|||
} |
|||
|
|||
const paintOutLineAndCenterText = (detectedCodes, ctx) => { |
|||
// 暂停页面 |
|||
scanPause.value = true; |
|||
// 播放语音 |
|||
// audioRef.value.play(); |
|||
// 画边框和文本 |
|||
reactAngles.value.splice(); |
|||
for (const detectedCode of detectedCodes) { |
|||
// 画边框 |
|||
ctx.lineWidth = 1; |
|||
const [firstPoint, ...otherPoints] = detectedCode.cornerPoints |
|||
ctx.strokeStyle = 'red' |
|||
ctx.beginPath() |
|||
ctx.moveTo(firstPoint.x, firstPoint.y) |
|||
for (const { x, y } of otherPoints) { |
|||
ctx.lineTo(x, y) |
|||
} |
|||
ctx.lineTo(firstPoint.x, firstPoint.y) |
|||
ctx.closePath(); |
|||
ctx.stroke(); |
|||
// 画文字 |
|||
const { boundingBox, rawValue } = detectedCode |
|||
const centerX = boundingBox.x + boundingBox.width / 2 |
|||
const centerY = boundingBox.y + boundingBox.height / 2 |
|||
const fontSize = Math.max(12, (50 * boundingBox.width) / ctx.canvas.width) |
|||
console.log(boundingBox.width, ctx.canvas.width) |
|||
ctx.lineWidth = 2; |
|||
ctx.font = `${fontSize}px sans-serif` |
|||
ctx.textAlign = 'center' |
|||
ctx.strokeStyle = '#35e5a7' |
|||
ctx.strokeText('>', centerX, centerY) |
|||
// 配置矩形内容 |
|||
if (detectedCode.cornerPoints.length==4) { |
|||
reactAngles.value.push({ |
|||
leftTop: {x: firstPoint.x, y:firstPoint.y}, |
|||
rightTop: {x: otherPoints[0].x, y:otherPoints[0].y}, |
|||
rightBottom: {x: otherPoints[1].x, y:otherPoints[1].y}, |
|||
leftBottom: {x: otherPoints[2].x, y:otherPoints[2].y}, |
|||
text: detectedCode.rawValue |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
// 获取事件的发生位置 |
|||
const getEventPosition = (ev) => { |
|||
var x, y; |
|||
if (ev.layerX || ev.layerX == 0) { |
|||
x = ev.layerX; |
|||
y = ev.layerY; |
|||
} else if (ev.offsetX || ev.offsetX == 0) { // Opera |
|||
x = ev.offsetX; |
|||
y = ev.offsetY; |
|||
} |
|||
return {x: x, y: y}; |
|||
}; |
|||
|
|||
const handleClick = function (event) { |
|||
// 1. 获取点击点的位置 |
|||
var eventPosition = getEventPosition(event); |
|||
// 2. 判断在不在已有的矩形内部，在的话获取二维码解析的结果，并进行业务处理 |
|||
var resolveText = handleClickRectAngle(eventPosition); |
|||
if (resolveText != undefined) { |
|||
alert(resolveText); |
|||
} |
|||
// 3. 业务处理完，如果决定跳转就跳转，不决定跳转的话就关闭暂停 |
|||
scanPause.value = false; |
|||
} |
|||
|
|||
// 判断一个点在不在某个矩形内部的算法，后面可以采取凸包算法，优化判断的实现，不过这里已经能实现了，没必要深究 |
|||
const handleClickRectAngle = function (eventPosition) { |
|||
for (let i = 0; i < reactAngles.value.length; i++) { |
|||
let reactAngle = reactAngles.value[i]; |
|||
if ( ((eventPosition.x >= Math.min(reactAngle.leftTop.x, reactAngle.leftBottom.x)) && (eventPosition.x <= Math.max(reactAngle.rightTop.x, reactAngle.rightBottom.x))) |
|||
&& ((eventPosition.y >= Math.min(reactAngle.leftTop.y, reactAngle.rightTop.y)) && (eventPosition.y <= Math.max(reactAngle.leftBottom.y, reactAngle.rightBottom.y))) |
|||
) { |
|||
return reactAngle.text; |
|||
} |
|||
} |
|||
return undefined; |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue