自定义扫码界面
This commit is contained in:
xk_guohonglei
@@ -1,96 +1,240 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="scan-view">
|
||||
<view class='scan-border'>
|
||||
<camera class='scan-camera' mode="scanCode" binderror="cameraError" bindscancode='scancode' frame-size='large'>
|
||||
<cover-image class='cover-corner cover-left-top' src='/images/left-top.png'></cover-image>
|
||||
<cover-image class='cover-corner cover-right-top' src='/images/right-top.png'></cover-image>
|
||||
<cover-image class='cover-corner cover-left-bottom' src='/images/left-bottom.png'></cover-image>
|
||||
<cover-image class='cover-corner cover-right-bottom' src='/images/right-bottom.png'></cover-image>
|
||||
<view class="page-content">
|
||||
<cu-custom :isBack="true" class="main-topbar bg-main-oil" bgColor="bg-main-oil">
|
||||
<block slot="content">扫描二维码</block>
|
||||
<block slot="backText">返回</block>
|
||||
</cu-custom>
|
||||
<camera class='scan-camera' :flash="flashValue" mode="scanCode" binderror="cameraError" bindscancode='scancode'
|
||||
@scancode="scancode" frame-size='large'>
|
||||
<cover-view class='scan-animation' :animation="animationData2"></cover-view>
|
||||
<cover-view class="cover-aquare">
|
||||
<cover-view class='cover-aquare-inner'></cover-view>
|
||||
<cover-view class='cover-corner cover-left-top'>
|
||||
<cover-view class="w-line"></cover-view>
|
||||
<cover-view class="h-line"></cover-view>
|
||||
</cover-view>
|
||||
<cover-view class='cover-corner cover-right-top'>
|
||||
<cover-view class="w-line w1-line"></cover-view>
|
||||
<cover-view class="h-line h1-line"></cover-view>
|
||||
</cover-view>
|
||||
<cover-view class='cover-corner cover-left-bottom'>
|
||||
<cover-view class="h-line"></cover-view>
|
||||
<cover-view class="w-line"></cover-view>
|
||||
</cover-view>
|
||||
<cover-view class='cover-corner cover-right-bottom'>
|
||||
<cover-view class="h-line h3-line"></cover-view>
|
||||
<cover-view class="w-line w3-line"></cover-view>
|
||||
</cover-view>
|
||||
|
||||
<!-- <cover-view class='scan-animation' animation="{{animation}}"></cover-view> -->
|
||||
</camera>
|
||||
<!-- 这里可以处理其他内容 -->
|
||||
</view>
|
||||
</view>
|
||||
</cover-view>
|
||||
|
||||
<cover-view class="flash text-center">
|
||||
<cover-view @tap="touchFlash" class=" text-white lg" v-show="flashValue!='on'">
|
||||
打开手电筒
|
||||
</cover-view>
|
||||
<cover-view @tap="touchFlash" class=" text-white lg" v-show="flashValue=='on'">
|
||||
关闭手电筒
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
|
||||
|
||||
</camera>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let diSrc = 'http://downsc.chinaz.net/Files/DownLoad/sound1/201711/9360.mp3'
|
||||
let innerAudioContext = wx.createInnerAudioContext()
|
||||
innerAudioContext.src = diSrc
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
once: false,
|
||||
lightOn: false,
|
||||
animationData2: {},
|
||||
flashValue: 'auto'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onShow() {
|
||||
this.donghua()
|
||||
setInterval(() => {
|
||||
this.donghua()
|
||||
}, 6000);
|
||||
},
|
||||
// onShow() {
|
||||
// this.donghua()
|
||||
|
||||
// },
|
||||
methods: {
|
||||
touchFlash() {
|
||||
if (this.flashValue != 'on') {
|
||||
this.flashValue = 'on'
|
||||
} else if (this.flashValue == 'on') {
|
||||
this.flashValue = 'off'
|
||||
}
|
||||
},
|
||||
donghua() {
|
||||
var animation2 = uni.createAnimation({
|
||||
duration: 1000,
|
||||
timingFunction: 'linear',
|
||||
})
|
||||
|
||||
this.animation2 = animation2
|
||||
|
||||
animation2.translateY(235).step({
|
||||
duration: 3000
|
||||
})
|
||||
|
||||
this.animationData2 = animation2.export()
|
||||
|
||||
setTimeout(() => {
|
||||
animation2.translateY(0).step({
|
||||
duration: 3000
|
||||
})
|
||||
this.animationData2 = animation2.export()
|
||||
|
||||
}, 3000)
|
||||
},
|
||||
scancode(e) {
|
||||
if (!this.once) {
|
||||
var scanUrl = '/pages/stationDetail/stationDetail'
|
||||
// uni.getStorageSync('scanUrl')
|
||||
// 提示音
|
||||
innerAudioContext.play()
|
||||
console.log('play滴~')
|
||||
// 校验扫描结果，并处理
|
||||
let res = e.detail.result
|
||||
console.log(res)
|
||||
console.log(e)
|
||||
uni.setStorageSync('qrCode', res)
|
||||
this.once = true
|
||||
uni.redirectTo({
|
||||
url: scanUrl,
|
||||
fail: (err) => {
|
||||
console.log(err)
|
||||
},
|
||||
success: (res) => {
|
||||
console.log('chengg', res)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.scan-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #B9BEC4;
|
||||
position: fixed;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.scan-border {
|
||||
width: 94%;
|
||||
height: 94%;
|
||||
border: 6rpx solid #08FDFE;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.scan-camera {
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
border-radius: 6rpx;
|
||||
margin: 30rpx;
|
||||
}
|
||||
|
||||
.cover-corner {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cover-left-top {
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.cover-right-top {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.cover-left-bottom {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.cover-right-bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.scan-animation {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
left: 10rpx;
|
||||
width: 480rpx;
|
||||
height: 8rpx;
|
||||
background-color: #08FDFE;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.page-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scan-camera {
|
||||
width: 750upx;
|
||||
height: 92vh;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.cover-corner {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.cover-left-top {
|
||||
left: 0upx;
|
||||
top: 0upx;
|
||||
|
||||
}
|
||||
|
||||
.cover-right-top {
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
|
||||
.cover-left-bottom {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.cover-right-bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.scan-animation {
|
||||
position: absolute;
|
||||
width: 480rpx;
|
||||
height: 8rpx;
|
||||
top: 200upx;
|
||||
left: 135upx;
|
||||
background-color: #FE0505;
|
||||
border-radius: 50%;
|
||||
box-shadow: 5upx 5upx 0 10upx #FE0505;
|
||||
}
|
||||
|
||||
.cover-aquare-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 2upx solid #f1f3f7;
|
||||
}
|
||||
|
||||
.cover-aquare {
|
||||
position: absolute;
|
||||
width: 500upx;
|
||||
height: 500upx;
|
||||
overflow: inherit;
|
||||
top: 200upx;
|
||||
left: 125upx;
|
||||
/* border: 1px solid #FE0505; */
|
||||
}
|
||||
|
||||
.h-line {
|
||||
width: 10upx;
|
||||
height: 20upx;
|
||||
background-color: #FE0505;
|
||||
}
|
||||
|
||||
.w-line {
|
||||
width: 30upx;
|
||||
height: 10upx;
|
||||
background-color: #FE0505;
|
||||
}
|
||||
|
||||
.h1-line {
|
||||
width: 10upx;
|
||||
float: right;
|
||||
height: 20upx;
|
||||
}
|
||||
|
||||
.w1-line {
|
||||
width: 30upx;
|
||||
height: 10upx;
|
||||
}
|
||||
|
||||
.h3-line {
|
||||
right: -21upx;
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.flash {
|
||||
position: absolute;
|
||||
width: 750upx;
|
||||
top: 800upx;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.cu-avatar {
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.cu-avatar [class*="cuIcon-"] {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user