佰川加油
This commit is contained in:
caolc
266
pages/tabbar/qrCenter/qrCenter.vue
Normal file
266
pages/tabbar/qrCenter/qrCenter.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<view class="page-content">
|
||||
<cu-custom class="bg-main-oil" bgColor="bg-main-oil">
|
||||
<block slot="content">佰川加油</block>
|
||||
</cu-custom>
|
||||
<view class="margin-top-lg">
|
||||
<swiper class="screen-swiper text-center square-dot" :indicator-dots="true"
|
||||
:circular="true" interval="3000" :autoplay="true" duration="500">
|
||||
<swiper-item v-for="(item,index) in imgs" :key="index">
|
||||
<image class="margin-center" :src="imgURL+item" mode="heightFix">
|
||||
</image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="content" :class="{'active':active}">
|
||||
|
||||
<!-- <image class="" :class="{'active':active}" :src="imgURL+'start-center.png'" mode="aspectFit"></image> -->
|
||||
<view class="tabbar-box-wrap">
|
||||
<view class="tabbar-box">
|
||||
<view class="tabbar-box-item" @tap="scan">
|
||||
<!-- <image class="box-image" src="../../../static/img/release.png" mode="aspectFit"></image> -->
|
||||
<text class="cuIcon-scan text-blue text-bold padding-right-xs"></text>
|
||||
<text class="explain">扫码加油</text>
|
||||
</view>
|
||||
<view class="tabbar-box-item" @tap="showThreeSites=true">
|
||||
<!-- <image class="box-image" src="../../../static/img/video.png" mode="aspectFit"></image> -->
|
||||
<text class="cuIcon-qr_code text-orange text-bold padding-right-xs"></text>
|
||||
<text class="explain">付款码</text>
|
||||
</view>
|
||||
<view class="tabbar-box-item" @click="goToPage('/BagAuth/pages/agreeMent/OperationGuide')">
|
||||
<!-- <image class="box-image" src="../../../static/img/qa.png" mode="aspectFit"></image> -->
|
||||
<text class="cuIcon-creative text-olive text-bold padding-right-xs"></text>
|
||||
<text class="explain">操作指南</text>
|
||||
</view>
|
||||
<!-- <view class="tabbar-box-item" @click="goToPage('/pages/tabbar-3-detial/tabbar-3-qa/tabbar-3-qa')">
|
||||
<image class="box-image" src="../../../static/img/qa.png" mode="aspectFit"></image>
|
||||
<text class="cuIcon-service text-bold padding-right-xs"></text>
|
||||
<text class="explain">客服</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<three-sites @hideOneModal="showThreeSites=false" :showThreeSites="showThreeSites"></three-sites>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import threeSites from '@/components/three-sites.vue'
|
||||
import oilSiteApi from '@/api/oil-site.js'
|
||||
export default {
|
||||
components: {
|
||||
threeSites
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
siteInfo: {
|
||||
|
||||
},
|
||||
imgs:['start-center.png ','center-3.png','center-2.png'],
|
||||
siteId: '',
|
||||
showThreeSites: false,
|
||||
active: false,
|
||||
imgURL: this.global.imgURL + 'other/',
|
||||
};
|
||||
},
|
||||
onTabItemTap(res){
|
||||
this.showThreeSites =false
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
// setTimeout(() => {
|
||||
this.active = true;
|
||||
// }, 500);
|
||||
},
|
||||
onHide() {
|
||||
this.active = false;
|
||||
},
|
||||
methods: {
|
||||
goToPage(url) {
|
||||
if (!url) return;
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
},
|
||||
|
||||
// 扫码逻辑开始
|
||||
getSiteInfo(id) {
|
||||
let data2 = {
|
||||
...uni.getStorageSync('location'),
|
||||
siteId: id
|
||||
}
|
||||
oilSiteApi.getSiteDetails(data2).then(res => {
|
||||
if (res.code == 20000) {
|
||||
this.siteInfo = res.data
|
||||
if (res.data.oilSiteChannelDetailsVos.length == 1 && res.data.oilSiteChannelDetailsVos[0]
|
||||
.activePay) {
|
||||
uni.setStorageSync('tempScanSite', this.siteInfo)
|
||||
this.makePay()
|
||||
} else {
|
||||
this.toDetail()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
toDetail() {
|
||||
uni.navigateTo({
|
||||
url: `/BagStation/pages/stationDetail/stationDetail?siteId=${this.siteId}`,
|
||||
fail: (err) => {
|
||||
// console.log(err)
|
||||
},
|
||||
success: () => {
|
||||
// console.log('err')
|
||||
}
|
||||
})
|
||||
},
|
||||
makePay() {
|
||||
uni.navigateTo({
|
||||
url: `/BagStation/pages/makeOrder/makeOrder?siteId=${this.siteId}`
|
||||
})
|
||||
},
|
||||
getScanRes(code) {
|
||||
let data2 = {
|
||||
qrCode: code
|
||||
}
|
||||
oilSiteApi.getScanRes(data2).then(res => {
|
||||
if (res.code == 20000) {
|
||||
this.siteId = res.data.siteId
|
||||
this.getSiteInfo(this.siteId)
|
||||
}
|
||||
})
|
||||
},
|
||||
scan1() {
|
||||
// 测试用
|
||||
this.getScanRes('fixed_1371293944539422720')
|
||||
},
|
||||
scan() {
|
||||
uni.scanCode({
|
||||
scanType: 'qrCode',
|
||||
onlyFromCamera: false,
|
||||
success: (res) => {
|
||||
console.log(res.result)
|
||||
this.getScanRes(res.result)
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: err
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
//结束
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - var(--window-bottom) - var(--window-top));
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
// height: 100vh;
|
||||
/* #endif */
|
||||
transition: opacity 0.3s;
|
||||
// background: #999;
|
||||
opacity: 0;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: relative;
|
||||
top: 300upx;
|
||||
width: 500upx;
|
||||
height: 500upx;
|
||||
// z-index: -1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabbar-box-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 50upx;
|
||||
box-sizing: border-box;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
.tabbar-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 15upx 20upx;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -16upx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
transform: rotate(45deg);
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 20upx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tabbar-box-item {
|
||||
// position: relative;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
margin: 10upx;
|
||||
color: $uni-color-subtitle;
|
||||
text-align: center;
|
||||
font-size: $uni-font-size-base;
|
||||
|
||||
.box-image {
|
||||
width: 100%;
|
||||
height: $uni-img-size-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .my-bg{
|
||||
// background-color: #F1F2DE;
|
||||
// }
|
||||
.page-content {
|
||||
min-height: 100vh;
|
||||
background-color: #F1F2DE;
|
||||
}
|
||||
|
||||
.margin-center {
|
||||
margin: auto !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user