MP-XiaoXing/BagStation/pages/makeOrder/makeOrder.vue

<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"></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 => {
					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')
				}
			}
		}
		,
		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>