<template>
<view class="custom-scan">
<!-- 扫码区域 -->
<camera
mode="scanCode"
frame-size="large"
class="scan-view"
@scancode="scancode"
>
<view class="scan-container-box">
<view class="scan-wrap">
<view class="scan-line"></view>
</view>
</view>
<view class="scan-container-main">
<slot></slot>
</view>
</camera>
</view>
</template>
<script>
// const innerAudioContext = wx.createInnerAudioContext(); // 提示音
// innerAudioContext.src = "https://qdstorage.okii.com/retail-app/common/beep.mp3";
export default {
data() {
return {
isTf: false,
};
},
methods: {
// 扫码
scancode(event) {
if (this.isTf) return;
this.isTf = true;
setTimeout(() => {
// 3秒扫描一次
this.isTf = false;
return;
}, 3000);
wx.vibrateShort(); // 触发手机振动
// innerAudioContext.play(); // 提示音
const { result } = event.detail; // 获取校验扫描结果
console.log("result", result);
wx.showToast({ title: `扫描结果:${result}`, icon: "none" });
},
},
};
</script>
<style lang="scss" scoped>
.custom-scan {
width: 100vw;
height: 100vh;
.scan-view {
width: 100%;
height: 100%;
}
.scan-container-main {
display: flex;
width: 100%;
height: 60vh;
position: fixed;
bottom: 0;
background: #fff;
}
.scan-container-box {
width: 100vw;
height: 40vh;
display: flex;
justify-content: center;
align-items: center;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
.scan-wrap {
position: relative;
width: 400rpx;
height: 300rpx;
.scan-line {
position: absolute;
width: 100%;
height: 1rpx;
background-color: #0f0;
box-shadow: 0px -0px 10px 1px #0f0;
top: 0;
left: 0;
animation: scan 2s infinite linear;
}
}
}
@keyframes scan {
0% {
transform: translateY(0);
opacity: 1;
}
80% {
opacity: 1;
box-shadow: 0px -0px 10px 1px #0f0;
}
100% {
transform: translateY(20vh);
opacity: 0;
}
}
}
</style>
小程序开发二维码扫描自定义页面 自定义扫码页面 扫一扫
最新推荐文章于 2024-07-02 20:45:32 发布