xk_guohonglei
5 years ago
parent
9320a99366
commit
679c43a03e
10 changed files with 300 additions and 188 deletions
@ -1,96 +1,240 @@ |
|||||||
<template> |
<template> |
||||||
<view> |
<view class="page-content"> |
||||||
<view class="scan-view"> |
<cu-custom :isBack="true" class="main-topbar bg-main-oil" bgColor="bg-main-oil"> |
||||||
<view class='scan-border'> |
<block slot="content">扫描二维码</block> |
||||||
<camera class='scan-camera' mode="scanCode" binderror="cameraError" bindscancode='scancode' frame-size='large'> |
<block slot="backText">返回</block> |
||||||
<cover-image class='cover-corner cover-left-top' src='/images/left-top.png'></cover-image> |
</cu-custom> |
||||||
<cover-image class='cover-corner cover-right-top' src='/images/right-top.png'></cover-image> |
<camera class='scan-camera' :flash="flashValue" mode="scanCode" binderror="cameraError" bindscancode='scancode' |
||||||
<cover-image class='cover-corner cover-left-bottom' src='/images/left-bottom.png'></cover-image> |
@scancode="scancode" frame-size='large'> |
||||||
<cover-image class='cover-corner cover-right-bottom' src='/images/right-bottom.png'></cover-image> |
<cover-view class='scan-animation' :animation="animationData2"></cover-view> |
||||||
|
<cover-view class="cover-aquare"> |
||||||
<!-- <cover-view class='scan-animation' animation="{{animation}}"></cover-view> --> |
<cover-view class='cover-aquare-inner'></cover-view> |
||||||
</camera> |
<cover-view class='cover-corner cover-left-top'> |
||||||
<!-- 这里可以处理其他内容 --> |
<cover-view class="w-line"></cover-view> |
||||||
</view> |
<cover-view class="h-line"></cover-view> |
||||||
</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> |
</view> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
|
let diSrc = 'http://downsc.chinaz.net/Files/DownLoad/sound1/201711/9360.mp3' |
||||||
|
let innerAudioContext = wx.createInnerAudioContext() |
||||||
|
innerAudioContext.src = diSrc |
||||||
export default { |
export default { |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
|
once: false, |
||||||
|
lightOn: false, |
||||||
|
animationData2: {}, |
||||||
|
flashValue: 'auto' |
||||||
} |
} |
||||||
}, |
}, |
||||||
|
onShow() { |
||||||
|
this.donghua() |
||||||
|
setInterval(() => { |
||||||
|
this.donghua() |
||||||
|
}, 6000); |
||||||
|
}, |
||||||
|
// onShow() { |
||||||
|
// this.donghua() |
||||||
|
|
||||||
|
// }, |
||||||
methods: { |
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> |
</script> |
||||||
|
|
||||||
<style scoped> |
<style scoped> |
||||||
.scan-view { |
.page-content { |
||||||
width: 100%; |
overflow: hidden; |
||||||
height: 100%; |
} |
||||||
display: flex; |
|
||||||
flex-direction: column; |
.scan-camera { |
||||||
background-color: #B9BEC4; |
width: 750upx; |
||||||
position: fixed; |
height: 92vh; |
||||||
align-items: center; |
border-radius: 6rpx; |
||||||
justify-content: space-around; |
} |
||||||
} |
|
||||||
|
.cover-corner { |
||||||
.scan-border { |
position: absolute; |
||||||
width: 94%; |
z-index: 2; |
||||||
height: 94%; |
} |
||||||
border: 6rpx solid #08FDFE; |
|
||||||
border-radius: 10rpx; |
.cover-left-top { |
||||||
display: flex; |
left: 0upx; |
||||||
flex-direction: column; |
top: 0upx; |
||||||
align-items: center; |
|
||||||
} |
} |
||||||
|
|
||||||
.scan-camera { |
.cover-right-top { |
||||||
width: 500rpx; |
right: 0; |
||||||
height: 500rpx; |
top: 0; |
||||||
border-radius: 6rpx; |
|
||||||
margin: 30rpx; |
} |
||||||
} |
|
||||||
|
.cover-left-bottom { |
||||||
.cover-corner { |
left: 0; |
||||||
width: 80rpx; |
bottom: 0; |
||||||
height: 80rpx; |
|
||||||
position: absolute; |
} |
||||||
} |
|
||||||
|
.cover-right-bottom { |
||||||
.cover-left-top { |
right: 0; |
||||||
left: 0; |
bottom: 0; |
||||||
top: 0; |
|
||||||
} |
} |
||||||
|
|
||||||
.cover-right-top { |
.scan-animation { |
||||||
right: 0; |
position: absolute; |
||||||
top: 0; |
width: 480rpx; |
||||||
} |
height: 8rpx; |
||||||
|
top: 200upx; |
||||||
.cover-left-bottom { |
left: 135upx; |
||||||
left: 0; |
background-color: #FE0505; |
||||||
bottom: 0; |
border-radius: 50%; |
||||||
} |
box-shadow: 5upx 5upx 0 10upx #FE0505; |
||||||
|
} |
||||||
.cover-right-bottom { |
|
||||||
right: 0; |
.cover-aquare-inner { |
||||||
bottom: 0; |
position: absolute; |
||||||
} |
top: 0; |
||||||
|
left: 0; |
||||||
.scan-animation { |
right: 0; |
||||||
position: absolute; |
bottom: 0; |
||||||
top: -10rpx; |
border: 2upx solid #f1f3f7; |
||||||
left: 10rpx; |
} |
||||||
width: 480rpx; |
|
||||||
height: 8rpx; |
.cover-aquare { |
||||||
background-color: #08FDFE; |
position: absolute; |
||||||
border-radius: 50%; |
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> |
</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