high-mini/pages/goods/refuel-details/refuel-details.vue

<template>
	<view>
		<image mode="widthFix" class="width100" src="../../../static/img/banner3.png" @click="showPopup"></image>
		<view class="height100p titlecon backcorfff">
			<view class="height60 paddtop25 width90">
				<view class="flleft width85">
					<view class="width100 text1 font18 fontwig6 fcor333">乌江能源加油站(大一型国企)</view>
					<view class="width100 font14 fcor666 mart5">贵州省贵阳市什么什么大道65号</view>
				</view>
				<view class="flright reimg fotct width15">
					<image mode="widthFix" src="../../../static/img/dhl.png"></image>
					<view class="fcor089">1.9km</view>
				</view>
			</view>
			<view class="fcor999 font14 width90">
				营业时间 : 00:00-23:59 <text class="relab">站内开票</text>
			</view>
		</view>
		<!-- 标价 -->
		<view class="width90 relbj">
			<view class="height60">
				<view class="flleft mart10 bjcss font16 fontwig6">
					92# <image mode="widthFix" src="../../../static/img/xiala.png"></image>
				</view>
				<view class="margle20 font15 fcoreb5 flleft mart20  borRit">
					<view class="fontspec fotct paddleft10">团购价</view>
					<view class="fontwig6 font20"><text class="font14">￥</text>6.38</view>
				</view>
				<view class="margle20 font15 fcor666 flleft mart20  borRit">
					<view class="fontspec fotct paddleft10">油站价</view>
					<view class="fontwig6 font20"><text class="font14">￥</text>6.88</view>
				</view>
				<view class="margle20 font15 fcor666 flleft mart20 ">
					<view class="fontspec fotct paddleft10">国标价</view>
					<view class="fontwig6 font20"><text class="font14">￥</text>6.88</view>
				</view>
			</view>
		</view>
		<view class="line10 mart15"></view>
		<!-- 我要加油 -->
		<view class="width90 mart15 font16 fcor666">我要加油</view>
		<view class="width90 relbj mart15">
			<view class="width50 flleft fotct">
				<view class="width100 fcor999 font14 mart10">选择油号</view>
				<view class="width100 mart10">
					<image mode="widthFix" style="width: 20px;" src="../../../static/img/yhl.png"></image>
					<text class="font20 fcor333 fontwig6 margle">92#</text>
					<image mode="widthFix" class="margle" style="width: 10px; " src="../../../static/img/xiala.png">
					</image>
				</view>
			</view>
			<view class="width50 flright fotct">
				<view class="width100 fcor999 font14 mart10">选择油枪</view>
				<view class="width100 mart10 ">
					<image mode="widthFix" style="width: 20px;" src="../../../static/img/yql.png"></image>
					<text class="font20 fcor333 fontwig6 margle">2号</text>
					<image mode="widthFix" class="margle" style="width: 10px; " src="../../../static/img/xiala.png">
					</image>
				</view>
			</view>
		</view>
		<view class="line10 mart15"></view>
		<!--加油金额-->
		<view class="width90 mart15 font16 fcor666">加油金额</view>
		<view class="width90 height40 mart10" style="border: 1px solid #f2f2f2;">
			<view class="width8 flleft">￥</view>
			<input type="number" class="font16 width70 flleft height40" placeholder="请输入金额" v-model="inputPhone" />
			<view class="width20 height40 flright font14 fcor999 fotct"
				style="border-left: 1px solid #f2f2f2;line-height: 40px;">
				约0.01L
			</view>
		</view>
		<view class="list width90">
			<view class="box" v-for="(amount,index) in amountList" :key="index" @click="select(amount)"
				:class="{'on':amount.id == inputAmount}">
				<view class="heTitle fcor333" :class="{'fcor089':amount.id == inputAmount}">{{amount.price}}元</view>
				<view class="mitext fcor999" :class="{'fcor089':amount.id == inputAmount}">最高优惠￥{{amount.realPrice}}
				</view>
			</view>
		</view>
		<view class="height60 width100"></view>
		<!-- 底部按钮 -->
		<view class="footer">
			<view class="width50 flleft fcor666 padleft15 font15">
				合计: ￥<text class="font24">0.00</text> 
			</view>
			<button class="reBtn flright">去支付</button>
		</view>
		<!-- 底部弹窗 -->
		<wybPopup ref="popup" type="bottom" height="600" width="500" radius="6" :showCloseIcon="true">
			<view class="fotct font18 fontwig6 fcor333 mart10 height30">选择油号</view>
			<view class="font15 fcor666 width90 mart10 height22">汽油油号</view>
			<view :class="swiper.value ==  detailsId?'activeRefuel':'refuel'" v-for="(swiper,index) in detailList"
				:key="index" @click="changeValue(swiper)">
				{{swiper.value}}
			</view>
		</wybPopup>
	</view>
</template>

<script>
	import wybPopup from '../../../components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			wybPopup
		},
		data() {
			return {
				detailList: [{
					'title': '不限',
					'value': '不限'
				}, {
					'title': '89#',
					'value': '89#'
				}, {
					'title': '92#',
					'value': '92#'
				}, {
					'title': '95#',
					'value': '95#'
				}, {
					'title': '98#',
					'value': '98#'
				}],
				gunnumber: [{
					'title': '1号',
					'value': '1号'
				}, {
					'title': '2号',
					'value': '2号'
				}, {
					'title': '3号',
					'value': '3号'
				}, {
					'title': '4号',
					'value': '4号'
				}, {
					'title': '5号',
					'value': '5号'
				}],
				amountList: [{
						id: '1',
						price: '200',
						realPrice: '13.08'
					},
					{
						id: '2',
						price: '300',
						realPrice: '23.08'
					},
					{
						id: '3',
						price: '400',
						realPrice: '33.08'
					},
					{
						id: '4',
						price: '500',
						realPrice: '43.08'
					}
				],
				detailsId: '',
				inputAmount: ''
			}
		},
		methods: {
			//显示弹出
			showPopup() {
				this.$refs.popup.show();
			},

			//选择规格
			changeValue(item) {
				this.detailsId = item.value;
				this.$refs.popup.hide();
			},

			select(amount) {
				this.inputAmount = amount.id;
			},
		}
	}
</script>

<style lang="less">
	.titlecon {
		border-radius: 10px 10px 0 0;
		position: relative;
		top: -30px;
	}

	.refuel {
		padding: 6px 15px;
		border-radius: 5px;
		background-color: #f6f6f6;
		color: #666666;
		margin-right: 10px;
		margin-left: 15px;
		margin-top: 15px;
		display: inline-block;
		font-size: 16px;
		width: 10%;
		text-align: center;
	}

	.activeRefuel {
		padding: 6px 15px;
		border-radius: 5px;
		border: 1px solid #089bf5;
		color: #089bf5;
		margin-right: 10px;
		margin-left: 15px;
		margin-top: 15px;
		display: inline-block;
		font-size: 16px;
		width: 10%;
		text-align: center;
	}

	.reimg {
		image {
			width: 20px;
		}
	}

	.relab {
		padding: 5px;
		border-radius: 5px;
		margin-left: 10px;
		color: #089bf5;
		background-color: #e5f2fe;
	}

	.relbj {
		height: 80px;
		box-shadow: 0 0 8px 2px #f6f6f6;
		border-radius: 5px;

	}

	.bjcss {
		line-height: 60px;
		margin-left: 10px;

		image {
			width: 10px;
			margin-left: 10px;
		}
	}

	.borRit {
		padding-right: 10px;
		border-right: 1px solid #f4f4f4;
	}

	.list {
		display: flow-root;
		justify-content: space-between;
		padding: 20upx 0;

		.box {
			width: 30%;
			margin-right: 2%;
			margin-top: 20upx;
			float: left;
			height: 120upx;
			// display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			border-radius: 10upx;
			box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.05);
			font-size: 36upx;
			color: #666666;
			border: 1px solid #f2f2f2;

			&.on {
				// background-color: #089bf5;
				border: 1px solid #089bf5;
			}
		}

		.heTitle {
			margin-top: 15upx;
			width: 100%;
			font-size: 15px;
		}

		.mitext {
			margin-top: 10upx;
			width: 100%;
			font-size: 12px;
		}
	}
	
	.footer {
		position: fixed;
		bottom: 0upx;
		width: 100%;
		height: 99upx;
		color: #FFFFFF;
		border-top: solid 1upx #eee;
		background-color: #FFFFFF;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.reBtn{
			width: 100px;
			background-color: #089bf5;
			color: #FFFFFF;
			text-align: center;
			padding: 0;
			font-size: 16px;
			border-radius: 22px;
			height: 40px;
			line-height: 40px;
		}
	}
	
</style>