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.
307 lines
7.0 KiB
307 lines
7.0 KiB
<template> |
|
<view class="content bg-white position-re"> |
|
<!-- <cu-custom class="bg-main-oil" isBack bgColor="bg-main-oil"> |
|
<block slot="content">中石化紫云路</block> |
|
<block slot="backText">返回</block> |
|
</cu-custom> --> |
|
<view class="bg-img fixed-top flex align-end margin-bottom-lg " |
|
:style="'background-image: url('+imgURL+'site-bg.png '+');width: 750upx;height: 326rpx;background-size:cover'"> |
|
<image @tap="goBack" :src="imgURL+'site-back.png'" width="20upx" mode="widthFix" |
|
class="position-ab site-back"> |
|
</image> |
|
<view class="flex-sub"> |
|
<view class="cu-list menu margin padding-sm radius my-shadow bg-white yu-card-xuan"> |
|
<view class="cu-item "> |
|
<view class="content"> |
|
<view class="strong padding-bottom-xs"> |
|
{{siteInfo.siteName?siteInfo.siteName:'油站名称'}} |
|
</view> |
|
<view class="font-12 color-999 site-label text-cut"> |
|
{{siteInfo.address?siteInfo.siteName:'油站地址'}} |
|
</view> |
|
</view> |
|
<view class="action " @tap="openMap"> |
|
<view class="oil-main-color"> |
|
<my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon> |
|
{{siteInfo.juli|distanceFilter}} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="bg-img placeholder-hidden flex align-end margin-bottom-lg " |
|
:style="'background-image: url('+imgURL+'site-bg.png '+');width: 750upx;height: 326rpx;background-size:cover'"> |
|
<image @tap="goBack" :src="imgURL+'site-back.png'" width="20upx" mode="widthFix" |
|
class="position-ab site-back"> |
|
</image> |
|
<view class="flex-sub"> |
|
<view class="cu-list menu margin padding-sm radius my-shadow bg-white yu-card-xuan"> |
|
<view class="cu-item "> |
|
<view class="content"> |
|
<view class="strong padding-bottom-xs"> |
|
{{siteInfo.siteName?siteInfo.siteName:'油站名称'}} |
|
</view> |
|
<view class="font-12 color-999 site-label text-cut"> |
|
{{siteInfo.address?siteInfo.siteName:'油站地址'}} |
|
</view> |
|
</view> |
|
<view class="action " @tap="openMap"> |
|
<view class="oil-main-color"> |
|
<my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon> |
|
{{siteInfo.juli|distanceFilter}} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="placeholder margin-bottom"> |
|
|
|
</view> |
|
|
|
<!-- 价格 --> |
|
<price-select-tab @onChangePayQr="onChangePayQr" @onChangePay="onChangePay" :active-cur="activeCur" |
|
:site-name="siteInfo.siteName" :channel-list="siteInfo.oilSiteChannelDetailsVos" |
|
:channelJuli="siteInfo.juli" :siteId="siteId"></price-select-tab> |
|
|
|
|
|
</view> |
|
</template> |
|
|
|
<script> |
|
import oilSiteApi from '@/api/oil-site.js' |
|
import priceSelectTab from '../components/price-select-tab' |
|
export default { |
|
components: { |
|
priceSelectTab |
|
}, |
|
data() { |
|
return { |
|
isBackPrev: true, |
|
siteId:'', |
|
radio: 'B', |
|
mainURL: this.global.mainURL, |
|
imgURL: this.global.imgURL, |
|
active: 0, |
|
ColorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], |
|
siteInfo: { |
|
|
|
}, |
|
activeCur: 0, |
|
activePay: null, |
|
qrcodePay: null, |
|
|
|
tempScanSite: uni.getStorageSync('tempScanSite') |
|
} |
|
}, |
|
onUnload() { |
|
if (this.tempScanSite) { |
|
uni.setStorageSync('tempScanSite', null) |
|
} |
|
}, |
|
onLoad(option) { |
|
if (option.q) { |
|
try { |
|
let originLink = decodeURIComponent(option.q) |
|
let target = this.obtainUrlPathParameterTarget(originLink) |
|
let authorization = uni.getStorageSync('Authorization') |
|
if (authorization && target.siteId) { |
|
// 扫码进入 返回按钮点击回到首页 |
|
this.isBackPrev = false |
|
this.siteId = target.siteId |
|
this.getSiteInfo(target.siteId) |
|
} |
|
} catch (e) {} |
|
return |
|
} |
|
// console.log(option.siteId) |
|
if (this.tempScanSite) { |
|
this.siteInfo = this.tempScanSite |
|
} else { |
|
this.getSiteInfo(option.siteId) |
|
this.activeCur = option.activeCur |
|
} |
|
}, |
|
methods: { |
|
obtainUrlPathParameterTarget(url) { |
|
let target = {} |
|
if (url.includes('?')) { |
|
let paramsText = url.split("?")[1] |
|
let paramsArr = paramsText.split("&") |
|
paramsArr.forEach(item => { |
|
target[item.split('=')[0]] = item.split('=')[1] |
|
}) |
|
} |
|
return target |
|
}, |
|
siteQrPay() { |
|
uni.navigateTo({ |
|
url: '/BagStation/pages/stationDetail/stieQr' |
|
}) |
|
}, |
|
getSiteInfo(id) { |
|
let location = uni.getStorageSync('location') || {} |
|
let data2 = { |
|
...location, |
|
siteId: id |
|
} |
|
oilSiteApi.getSiteDetailsByKA(data2).then(res => { |
|
if (res.code == 20000) { |
|
this.siteInfo = res.data |
|
} |
|
}) |
|
}, |
|
onChangePayQr(val) { |
|
this.activePay = val |
|
}, |
|
onChangePay(val) { |
|
this.qrcodePay = val |
|
}, |
|
openPlugin() { |
|
const key = this.qqKey; //使用在腾讯位置服务申请的key |
|
const referer = '星油云'; //调用插件的app的名称 |
|
const endPoint = JSON.stringify({ |
|
name: '油站', |
|
latitude: 39.89631551, |
|
longitude: 116.323459711 |
|
}); |
|
|
|
wx.navigateTo({ |
|
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint |
|
}) |
|
|
|
}, |
|
goBack() { |
|
this.isBackPrev ? uni.navigateBack() : uni.navigateBack({ |
|
url: '../../../pages/tabbar/home/home' |
|
}) |
|
|
|
}, |
|
selectRadio() { |
|
this.radio === 'A' ? this.radio = '' : this.radio = 'A' |
|
}, |
|
openMap() { |
|
let that = this |
|
uni.openLocation({ |
|
latitude: this.siteInfo.latitude, |
|
longitude: this.siteInfo.longitude, |
|
name: this.siteInfo.siteName, |
|
address: this.siteInfo.address, |
|
scale: 12, |
|
success: function() { |
|
// console.log('success') |
|
}, |
|
fail: (error) => { |
|
// console.log('error') |
|
// console.log(error) |
|
}, |
|
complete: () => { |
|
// console.log('made') |
|
}, |
|
|
|
}) |
|
|
|
var map = uni.createMapContext('map') |
|
map.moveToLocation() |
|
} |
|
}, |
|
filters: { |
|
distanceFilter(value) { |
|
if (value) { |
|
return value > 1000 ? ((value / 1000).toFixed(2) + 'km') : (value + 'm') |
|
} |
|
} |
|
}, |
|
onHide() { |
|
// console.log('这里是hiden') |
|
// this.innerAudioContext.stop() |
|
}, |
|
onUnload() { |
|
// console.log('这里是卸载页面') |
|
// this.innerAudioContext.stop() |
|
}, |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
.content { |
|
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; |
|
} |
|
|
|
|
|
|
|
.yu-card-xuan { |
|
position: relative; |
|
top: 60rpx |
|
} |
|
|
|
.site-label { |
|
max-width: 500upx; |
|
} |
|
|
|
.cu-btn.sm { |
|
width: 80%; |
|
} |
|
|
|
.site-back { |
|
width: 2rem; |
|
top: 2.8rem; |
|
left: 1rem; |
|
z-index: 1; |
|
} |
|
|
|
.site-icon { |
|
width: 1.5rem; |
|
vertical-align: middle; |
|
} |
|
|
|
.my-tag { |
|
padding: 0 12rpx; |
|
} |
|
|
|
.fixed-bottom { |
|
width: 690upx !important; |
|
} |
|
</style>
|
|
|