LSM_OIL_SITE/pages/stationDetail/stationDetail.vue

<template>
	<view class="page-content">
		<cu-custom class="main-topbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">中石化紫云路</block>
		</cu-custom>

		<view class="cu-list menu-avatar">
			<view class="cu-item  margin-sm margin-left margin-right radius">
				<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
				<view class="content money-container">
					<view class="text-pink">
						<view class="text-cut">莫甘娜</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">凯尔，你被自己的光芒变的盲目！</view>
					</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">余额</text>
						￥1599</view>
				</view>
			</view>

		</view>
		<view class="my-cell margin-left margin-right  padding-top  padding-bottom  radius">
			<view class="strong padding-bottom-xs">
				中国石化(紫云路)
			</view>
			<view class="font-12 color-999">
				<text class="padding-right">1.32km</text> | <text class="padding-left text-cut">紫云路与金寨南路交口向西200...</text>
			</view>
			<view class="navigation" @tap="openMap">
				<image class="icon-self" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=907966196,3433585328&fm=11&gp=0.jpg"
				 mode=""></image>
				导航
			</view>
		</view>
		<!--  -->
		<view class="padding-top-xs margin margin-top-xs margin-bottom-0 padding-bottom radius">
			<view class="bg-white padding">

				<view class="padding-bottom-sm">
					油号选择：
				</view>
				<view class="grid col-5 justify-start">

					<view class="padding-xs" v-for="(item,index) in ColorList" :key="index">
						<button class="cu-btn" :class="[active===index?'bg-red':'line-gray']">0#</button>
					</view>

				</view>
				<view class="padding-top-xs">
					<text class="strong padding-right font-16">
						0#柴油
					</text>
					<text class="s-rich">市场价￥6.5</text>
				</view>
				<view class="flex margin-top">
					<view class="flex-treble text-center oil-price" @tap="selectRadio">
						<view class="strong font-16 oil-main-color">
							￥5.81
						</view>
						<radio class="red" :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A"></radio>
						<view class="">
							星油油价
						</view>
					</view>
					<view class="flex-treble text-center  oil-price" @tap="selectRadio">
						<view class="strong font-16  oil-main-color">
							￥5.81
						</view>
						<radio class="red" :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A"></radio>
						<view class="">
							万金油价
						</view>
					</view>
					<view class="flex-treble  oil-price text-center" @tap="selectRadio">
						<!-- <view class="strong font-16  oil-main-color">
							￥5.81
						</view>
						<radio class="red" :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A"></radio>
						<view class="">
							老吕油价
						</view> -->
					</view>
				</view>
			</view>

			<view class="padding solid-top  bg-white">
				<view class="padding-bottom-sm">
					油枪选择：
				</view>
				<view class="grid col-5 justify-start">

					<view class="padding-xs" v-for="(item,index) in ColorList" :key="index">
						<button class="cu-btn" :class="[active===index?'bg-red':'line-gray']">{{index}}</button>
					</view>
				</view>
			</view>
			<view class="solid-top padding solid-top bg-white">
				<view class=" shadow-warp bg-white">
					<view class="cu-form-group">
						<view class="title">加油升数</view>
						<input placeholder="请输入加油升数" name="input"></input>
						<text>约￥0.00</text>
					</view>
					<view class="my-cell">
						<text class="font-12">星卡优惠金额</text><text class="fr">-￥0.00</text>
					</view>
					<view class="my-cell">
						<text class="font-12">实际支付金额</text><text class="oil-main-color fr">￥0.00</text>
					</view>
				</view>
			</view>
			<button class="margin  round bg-main-oil">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radio: 'B',
				active: 0,
				ColorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
			}
		},
		methods: {
			selectRadio() {
				this.radio === 'A' ? this.radio = '' : this.radio = 'A'
			},
			openMap() {
				let that = this
				uni.openLocation({
					latitude: 117,
					longitude: 21,
					name: '江西景德镇',
					address: '九龙路1188号',
					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()
			}
		}
	}
</script>

<style scoped>
	.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;
		display: block;
		border-radius: 0 0 0 100upx;
	}
</style>