星油企业版
This commit is contained in:
caolc
274
BagStation/pages/SeparateProcess/makeOrder.vue
Normal file
274
BagStation/pages/SeparateProcess/makeOrder.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<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 siteOliName">
|
||||
<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 siteOliJuli" @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" :isOther='true' :channelJuli="siteInfo.juli"></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 {
|
||||
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) {
|
||||
// console.log(option.siteId)
|
||||
if (this.tempScanSite) {
|
||||
this.siteInfo = this.tempScanSite
|
||||
} else {
|
||||
this.getSiteInfo(option.siteId)
|
||||
this.activeCur = option.activeCur
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
siteQrPay() {
|
||||
uni.navigateTo({
|
||||
url: '/BagStation/pages/stationDetail/stieQr'
|
||||
})
|
||||
},
|
||||
getSiteInfo(id) {
|
||||
let data2 = {
|
||||
...uni.getStorageSync('location'),
|
||||
siteId: id
|
||||
}
|
||||
oilSiteApi.getSiteDetails(data2).then(res => {
|
||||
console.log('这里是获取油站siteinfo 处',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() {
|
||||
uni.navigateBack({
|
||||
|
||||
})
|
||||
},
|
||||
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')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.siteOliName{
|
||||
flex: 0 0 auto;
|
||||
width: 70%;
|
||||
}
|
||||
.siteOliJuli{
|
||||
flex: 0 0 auto;
|
||||
width: 30%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user