xk_yangdeshi
4 years ago
parent
1335809f58
commit
1d7add295e
9 changed files with 565 additions and 126 deletions
@ -0,0 +1,267 @@ |
||||
<template> |
||||
<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" @scancode="scancode" @initdone="initdone" |
||||
@stop="openStop" @error="openFail" 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> |
||||
|
||||
<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' |
||||
} |
||||
}, |
||||
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) |
||||
}, |
||||
initdone(e) { |
||||
console.log('相机初始化完成时触发', e) |
||||
|
||||
}, |
||||
openStop(err) { |
||||
console.log('摄像头异常终止', err) |
||||
uni.showToast({ |
||||
title:'摄像头异常终止', |
||||
icon:'none' |
||||
}) |
||||
}, |
||||
openFail(err) { |
||||
console.log('用户不允许使用摄像头时触发', err) |
||||
uni.showToast({ |
||||
title:'用户不允许使用摄像头', |
||||
icon:'none' |
||||
}) |
||||
}, |
||||
scancode(e) { |
||||
if (!this.once) { |
||||
var scanUrl = '' |
||||
// 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 |
||||
let url = '' |
||||
const tag = res.substring(0, 2) |
||||
if (tag == "XM" || tag == "HT" || tag == "G7") { |
||||
url = '/pages/stationDetail/stationDetail' |
||||
} else { |
||||
url = '/pages/stationDetail/ZYSite' |
||||
} |
||||
console.log(tag) |
||||
uni.redirectTo({ |
||||
// url: `/pages/stationDetail/stationDetail`, |
||||
url: url, |
||||
fail: (err) => { |
||||
// console.log(err) |
||||
}, |
||||
success: (res) => { |
||||
// console.log('chengg', res) |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.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> |
||||
Loading…
Reference in new issue