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

<template>
	<view>
		<image mode="widthFix" class="width100" :src="storeList.gasLogoSmall"></image>
		<view class="height100p titlecon backcorfff">
			<view class="height60 paddtop25 width90">
				<view class="flleft width80p">
					<view class="width100 text1 font18 fontwig6 fcor333">{{storeList.gasName}}</view>
					<view class="width100 font14 fcor666 mart5">{{storeList.gasAddress}}</view>
				</view>
				<view class="flright reimg fotct width20" @click="seeloaction">
					<image mode="widthFix" src="../../../static/img/dhl.png"></image>
					<view class="fcor089">{{storeList.distance}}km</view>
				</view>
			</view>
			<view class="fcor999 font14 width90 mart0">
				营业时间 : 00:00-23:59
			</view>
		</view>
		<!-- 标价 -->
		<view class="width90 relbj">
			<view class="height60">
				<view class="flleft mart10 bjcss font16 fontwig6" @click="showPopup(1)">
					{{oilNo}}
					<image mode="widthFix" src="../../../static/img/xiala.png"></image>
				</view>
				<view class="margle20 font15 fcoreb5 flleft mart20  borRit">
					<view class="fontspec fotct ">平台价</view>
					<view class="fontwig6 font20"><text class="font14">￥</text>{{priceVip}}</view>
				</view>
				<view class="margle20 font15 fcor666 flleft mart20  borRit">
					<view class="fontspec fotct ">油站价</view>
					<view class="fontwig6 font20"><text class="font14">￥</text>{{priceGun}}</view>
				</view>
				<view class="margle20 font15 fcor666 flleft mart20 ">
					<view class="fontspec fotct ">国标价</view>
					<view class="fontwig6 font20"><text class="font14">￥</text>{{priceOfficial}}</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" @click="showPopup(1)">
				<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">{{oilNo}}</text>
					<image mode="widthFix" class="margle" style="width: 10px; " src="../../../static/img/xiala.png">
					</image>
				</view>
			</view>
			<view class="width50 flright fotct" @click="showPopup(2)">
				<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">{{gunNo}}号</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 width60 flleft height40" placeholder="请输入金额" v-model="inputMoney"
				@blur="Listeningfocus" maxlength="5" />
			<view class="width30 height40 flright font14 fcor999 fotct"
				style="border-left: 1px solid #f2f2f2;line-height: 40px;">
				约{{litre}}L
			</view>
		</view>
		<view class="list width90">
			<view class="box" v-for="(amount,index) in amountList" :key="index" @click="select(amount)"
				:class="{'on':amount.price == inputMoney}">
				<view class="heTitle fcor333" :class="{'fcor089':amount.id == inputAmount}">{{amount.price}}元</view>
			</view>
		</view>
		<view class="height60 width100"></view>
		<!-- 底部按钮 -->
		<view class="footer">
			<view class="flleft padleft15 font15 fcoreb5">
				合计: ￥<text class="font24">{{totalPrice}}</text><text class="font12 fcor666">优惠:￥{{discountPrice}}</text>
			</view>

			<!-- #ifdef MP -->
			<button class="reBtn flright" open-type="getPhoneNumber" v-if="user.phone == null"
				@getphonenumber="getPhoneNumber">去支付</button>
			<button class="reBtn flright" v-else @click="toPay">去支付</button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<button class="reBtn flright" v-if="user.phone == null" @click="jumpH5Bding">去支付</button>
			<button class="reBtn flright" v-else @click="toPay">去支付</button>
			<!-- #endif -->

		</view>
		<!-- 底部弹窗 -->
		<wybPopup ref="popup" type="bottom" height="600" width="500" radius="6" :showCloseIcon="true">
			<view class="fotct font18 fontwig6 fcor333 mart10 height30" v-if="typeId == 1">选择油号</view>
			<view class="fotct font18 fontwig6 fcor333 mart10 height30" v-if="typeId == 2">选择油枪</view>
			<view class="font15 fcor666 width90 mart10 height22" v-if="typeId == 1">汽油油号</view>
			<view class="font15 fcor666 width90 mart10 height22" v-if="typeId == 2">汽油油枪</view>
			<view v-if="typeId == 1">
				<view :class="swiper.oilNoName ==  oilNo?'activeRefuel':'refuel'" v-for="(swiper,index) in detailList"
					:key="index" @click="changeValue(swiper)">
					{{swiper.oilNoName}}
				</view>
			</view>

			<view v-if="typeId == 2">
				<view :class="item.gunNo ==  gunNo?'activeRefuel':'refuel'" v-for="(item,index) in gunnumber"
					:key="index" @click="changeValue2(item)">
					{{item.gunNo}}
				</view>
			</view>
		</wybPopup>
	</view>
</template>

<script>
	import {
		getGasDetailByStoreKey,
		addOrder
	} from '../../../Utils/Api.js';
	import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';
	let app = getApp();
	export default {
		components: {
			wybPopup
		},
		data() {
			return {
				detailList: [],
				gunnumber: [],
				user: '',
				amountList: [{
						id: '1',
						price: '200'
					},
					{
						id: '2',
						price: '300'
					},
					{
						id: '3',
						price: '400'
					},
					{
						id: '4',
						price: '500'
					}
				],
				inputAmount: '',
				store_key: '',
				storeList: '',
				oilNo: '',
				priceVip: '',
				priceOfficial: '',
				priceGun: '',
				gunNo: '',
				typeId: '',
				counId: '',
				inputMoney: '',
				gasOilNo: '',
				litre: '',
				totalPrice: '0.00',
				discountPrice : '0.00',
				gasGunList :[],
				oilType : ''
			}
		},
		onLoad(options) {
			this.store_key = options.id;
			this.counId = options.desId;
			this.getGasDetailByStoreKey();
		},
		onShow() {
			this.user = app.globalData.userInfo;
		},
		methods: {
			//前往导航
			seeloaction() {
				uni.openLocation({
					latitude: Number(this.storeList.gasAddressLatitude), //目的地的定位
					longitude: Number(this.storeList.gasAddressLongitude), //目的地的定位
					name: this.storeList.gasName,
					address: this.storeList.gasAddress
				})
			},
			//显示弹出
			showPopup(item) {
				this.typeId = item;
				this.$refs.popup.show();
			},
			//查询详情
			getGasDetailByStoreKey() {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					storeKey: this.store_key,
					latitude: app.globalData.latitude,
					longitude: app.globalData.longitude
				}
				getGasDetailByStoreKey(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.storeList = res.return_data;
						this.oilNo = res.return_data.oilPriceList[0].oilNoName;
						this.priceVip = res.return_data.oilPriceList[0].priceVip;
						this.priceGun = res.return_data.oilPriceList[0].priceGun;
						this.priceOfficial = res.return_data.oilPriceList[0].priceOfficial;
						this.detailList = res.return_data.oilPriceList;
						this.oilType = res.return_data.oilPriceList[0].oilType;
						this.gasGunList = res.return_data.gasGunList;
						for (var i = 0; i < res.return_data.gasGunList.length; i++) {
							if (this.oilNo == res.return_data.gasGunList[i].oilNoName) {
								this.gunnumber.push(res.return_data.gasGunList[i])
								this.gunNo = res.return_data.gasGunList[i].gunNo;
								this.gasOilNo = res.return_data.gasGunList[i].oilNo;
							}
						}

					}else{
						uni.showToast({
							title: res.return_msg,
							icon: "none",
							duration:2000,
							success() {
								setTimeout(() => {
									uni.navigateBack({
									})
								}, 2000)
							}
						});
					}
				})
			},

			//选择油号
			changeValue(item) {
				this.gunnumber = [];
				this.oilNo = item.oilNoName;
				for (var i = 0; i < this.gasGunList.length; i++) {
					if (this.oilNo == this.gasGunList[i].oilNoName) {
						this.gunnumber.push(this.gasGunList[i])
						this.gunNo = this.gasGunList[i].gunNo;
						this.gasOilNo = this.gasGunList[i].oilNo;
					}
				}
				this.oilType = item.oilType;
				this.gasOilNo = item.oilNo;
				this.priceVip = item.priceVip;
				this.priceOfficial = item.priceOfficial;
				this.priceGun = item.priceGun;
				this.$refs.popup.hide();
			},
			//选择油枪
			changeValue2(item) {
				this.gunNo = item.gunNo;
				this.$refs.popup.hide();
			},
			select(amount) {
				this.inputMoney = amount.price;
				this.litre = parseFloat(amount.price / this.priceGun).toFixed(2);
				this.totalPrice = parseFloat(amount.price / this.priceGun * this.priceVip).toFixed(2);
				 let gbprice =  parseFloat(this.litre * this.priceOfficial).toFixed(2);
				 this.discountPrice = parseFloat(gbprice - this.inputMoney).toFixed(2);
			},
			// 微信获取手机号
			getPhoneNumber(PhoneNumber) {
				let params = {
					openId: app.globalData.openId,
					iv: PhoneNumber.detail.iv,
					encryptedData: PhoneNumber.detail.encryptedData
				}
				GetPhoneNumber(params).then(res => {
					if (res.return_code == '000000') {
						app.globalData.userInfo = res.return_data
							.object
							.highUser;
						uni.setStorage({
							key: "user",
							data: res.return_data
								.object
								.highUser
						})
						let that = this;
						that.toPay();
					}
				});
			},
			// H5获取手机号
			jumpH5Bding() {
				uni.navigateTo({
					url: '/pages/login/register?id=2'
				})
			},
			//失去焦点算价格和油升
			Listeningfocus() {
				this.litre = parseFloat(this.inputMoney / this.priceGun).toFixed(2);
				this.totalPrice = parseFloat(this.inputMoney / this.priceGun * this.priceVip).toFixed(2);
				let gbprice =  parseFloat(this.litre * this.priceOfficial).toFixed(2);
				this.discountPrice = parseFloat(gbprice - this.inputMoney).toFixed(2);
			},
			toPay() {
				if (this.inputMoney == '' || this.inputMoney < 1) {
					uni.showToast({
						title: '请输入正确金额',
						icon: "none"
					});
					return false;
				}
				uni.showLoading({
					title: '提交订单中...'
				})
				let goods = {
					"highChildOrderList": [{
						"goodsType": 3,
						"goodsId": this.counId,
						"saleCount": 1,
						"goodsPrice": this.inputMoney,
						"gasGunNo": this.gunNo,
						"gasOilNo": this.gasOilNo,
						"gasOilType":this.oilType
					}]
				}
				addOrder(goods).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						uni.redirectTo({
							url: '/pages/goods/refuel-confirm/refuel-confirm?payprice=' + res.return_data.payPrice + '&orderId=' + res.return_data.id + '&couponId=' + this.counId+'&adres='+this.storeList.gasAddress
						})
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						});
					}
				})

			},
		}
	}
</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;
			line-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 {
			width: 100%;
			font-size: 16px;
		}

		.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: 90px;
			background-color: #089bf5;
			color: #FFFFFF;
			text-align: center;
			padding: 0;
			font-size: 16px;
			border-radius: 22px;
			height: 40px;
			line-height: 40px;
		}
	}
</style>