You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
405 lines
8.6 KiB
405 lines
8.6 KiB
<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>
|
|
|