星油云站
This commit is contained in:
caolc
267
pages/station-info/scan-camera/scan-camera - 副本.vue
Normal file
267
pages/station-info/scan-camera/scan-camera - 副本.vue
Normal file
@@ -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">扫描二维码123</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>
|
||||
405
pages/station-info/scan-camera/scan-camera.vue
Normal file
405
pages/station-info/scan-camera/scan-camera.vue
Normal file
@@ -0,0 +1,405 @@
|
||||
<template>
|
||||
<view class="page-content">
|
||||
<view>
|
||||
<cu-custom class="main-topbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content bg-white"> </block>
|
||||
</cu-custom>
|
||||
<view class="cu-list menu-avatar">
|
||||
<view class="cu-item margin-sm margin-left margin-right radius">
|
||||
<view class="cu-avatar bg-gray round lg"></view>
|
||||
<view class="content money-container">
|
||||
<view class="">
|
||||
<view class="text-cut bg-gray"></view>
|
||||
</view>
|
||||
<view class="text-gray text-sm flex">
|
||||
<view class="text-cut bg-gray"></view> <text class="text-xs bg-gray"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="text-white money-position padding-left-lg padding-xs bg-main-oil text-lg">
|
||||
<text class="text-xs bg-gray"></text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-form-group margin margin-top-0 radius">
|
||||
<view class="title mini-label bg-gray"></view>
|
||||
<view class="title bg-gray"></view>
|
||||
<text class="cuIcon-write text-orange"></text>
|
||||
</view>
|
||||
<view class="my-cell margin-left margin-right padding-top padding-bottom radius">
|
||||
<view class="strong bg-gray padding-bottom-xs"></view>
|
||||
<view class="font-12 bg-gray">
|
||||
<text class="text-cut"></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- -->
|
||||
<view class="padding-top-xs margin margin-top-xs margin-bottom-0 padding-bottom radius">
|
||||
<view class="bg-white padding padding-bottom-sm">
|
||||
<view class="padding-bottom-sm text-lg bg-gray"></view>
|
||||
<view class="padding-top-xs">
|
||||
<text class="strong padding-right-xs bg-gray font-16"></text>
|
||||
<text class="padding-right-xs bg-gray">
|
||||
|
||||
<text class="text-blod bg-gray oil-main-color"></text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="grid col-5 padding-top justify-start">
|
||||
<view class="padding-xs" v-for="(item,index) in 4" :key="index">
|
||||
<view class="bg-gray"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding solid-top padding-bottom-0 padding-top-xs bg-white">
|
||||
<view class="padding-bottom-sm text-lg bg-gray"></view>
|
||||
<view class="grid col-5 justify-start">
|
||||
<view class="padding-xs" v-for="(item,index) in 5" :key="index">
|
||||
<view class="bg-gray"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="solid-top padding solid-top bg-white">
|
||||
<view class="shadow-warp ">
|
||||
<view class="cu-form-group">
|
||||
<view class="title"></view>
|
||||
<view class="bg-gray"></view>
|
||||
<view class="bg-gray"></view>
|
||||
</view>
|
||||
<view class="my-cell">
|
||||
<view class="bg-gray"></view>
|
||||
<view class="bg-gray"></view>
|
||||
</view>
|
||||
<view class="my-cell">
|
||||
<view class="text-gray"></view>
|
||||
<view class="text-gray"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="red-circle">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</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',
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
uni.scanCode({
|
||||
scanType: 'qrCode',
|
||||
onlyFromCamera: false,
|
||||
success: (resResult) => {
|
||||
console.log('%c 扫码结果↓','color:red;font-size:30px')
|
||||
console.log(resResult)
|
||||
// innerAudioContext.play()
|
||||
console.log('play滴~')
|
||||
let res = resResult.result
|
||||
console.log(res)
|
||||
uni.setStorageSync('qrCode', res)
|
||||
this.once = true
|
||||
let url = ''
|
||||
// console.log('这里是顺丰测试',res.substring(0,7))
|
||||
const tag = res.substring(0, 2);
|
||||
// 老星油 XM ， HT G7 ， 则一 ZEYI ， 新星油 XOIL new则一 XINGYOU
|
||||
if (res.indexOf('fykc') != -1 ){
|
||||
url = '/pages/stationDetail/ZYSite?type=fykc'
|
||||
console.log('这里是测试福佑' ,res.substring(0,7))
|
||||
}else if (tag == "XM" || tag == "HT" || tag == "G7") {
|
||||
url = '/pages/stationDetail/stationDetail?type=G7'
|
||||
} else if (res.indexOf('ZEYI') != -1 ){
|
||||
console.log('这里是测试则一sss' ,res.substring(0,7))
|
||||
url = '/pages/stationDetail/ZYSite?type=ZEYI'
|
||||
} else if (res.substring(0, 4) == 'XING' || res.substring(0, 4) == 'XOIL' ) {
|
||||
console.log('这里是测试XING' ,res.substring(0,7))
|
||||
url = '/pages/stationDetail/ZYSite?type=xoli'
|
||||
} else if (res.substring(0,8) == 'SHUNFENG') {
|
||||
console.log('这里是顺丰')
|
||||
url = '/pages/stationDetail/ZYSite?type=shunfeng'
|
||||
} else if (res.substring(0, 4) == 'RIRI'){
|
||||
url = '/pages/stationDetail/ZYSite?type=RIRISHUN'
|
||||
} else if (res.indexOf('OP') != -1 ){
|
||||
url = '/pages/stationDetail/openStationDetail'
|
||||
}else{
|
||||
uni.showToast({
|
||||
title: '未知二维码',
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
})
|
||||
}, 800)
|
||||
return false;
|
||||
}
|
||||
console.log(tag)
|
||||
uni.redirectTo({
|
||||
// url: `/pages/stationDetail/stationDetail`,
|
||||
url: url,
|
||||
fail: (err) => {
|
||||
// console.log(err)
|
||||
},
|
||||
success: (res) => {
|
||||
// console.log('chengg', res)
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.navigateBack({
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
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)
|
||||
console.log(tag)
|
||||
if (tag == "XM" || tag == "HT" || tag == "G7") {
|
||||
url = '/pages/stationDetail/stationDetail'
|
||||
} else if (res.substring(0, 4) == 'ZEYI') {
|
||||
url = '/pages/stationDetail/ZYSite'
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '未知二维码',
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
|
||||
})
|
||||
}, 800)
|
||||
return false;
|
||||
}
|
||||
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;
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.cu-avatar [class*="cuIcon-"] {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background-color: #f1f2f7;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.icon-self {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.oil-price {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.oil-price radio {
|
||||
position: absolute;
|
||||
left: 0rem;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.qr-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.pay-desc {
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.bottom-pay {
|
||||
min-height: 100rpx;
|
||||
width: 750upx;
|
||||
}
|
||||
|
||||
.pay-bar {
|
||||
width: 750upx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.money-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.money-position {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
min-height: 1rem;
|
||||
min-width: 3rem;
|
||||
display: block;
|
||||
border-radius: 0 0 0 100upx;
|
||||
}
|
||||
|
||||
.bg-gray {
|
||||
min-height: 1rem;
|
||||
min-width: 3rem;
|
||||
}
|
||||
|
||||
.red-circle {
|
||||
height: 200upx;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user