408 lines
8.7 KiB
Vue
408 lines
8.7 KiB
Vue
<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 == "SP") {
|
||
url = '/pages/stationDetail/ZYSite?type=G7'
|
||
} 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;
|
||
}
|
||
// url = '/pages/stationDetail/openStationDetail'
|
||
// 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>
|