xk_guohonglei
4 years ago
parent
9320a99366
commit
679c43a03e
10 changed files with 300 additions and 188 deletions
@ -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> |
||||
|
||||
<!-- <cover-view class='scan-animation' animation="{{animation}}"></cover-view> --> |
||||
</camera> |
||||
<!-- 这里可以处理其他内容 --> |
||||
</view> |
||||
</view> |
||||
<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> |
||||
|
||||
<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) |
||||
}, |
||||
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> |
||||
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
Loading…
Reference in new issue