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