high-mini-manage/pages/home/oderDetails/oderDetails.vue

<template>
	<view>
		<image class="headimg" src="../../../static/img/odrdes.png"></image>
		<view class="headsearch">
			<view class="heads">
				<view class="ordslef">已支付订单</view>
				<view class="ordsrig">{{oilorderdetails.payTime | timeFormat('yyyy-mm-dd hh:mm:ss')}}</view>
			</view>
			<view class="heads">
				<view class="prices">实际支付: <text style="font-size: 16px;margin-left: 5px;"> ¥{{oilorderdetails.payRealPrice}}</text></view>
			</view>
			<view class="line1con"></view>
			<view style="padding-top: 15px;">
				<view class="prices">优惠立减: <text style="font-size: 16px;margin-left: 5px;"> ¥{{oilorderdetails.deductionPrice}}</text></view>
			</view>
		</view>
		<view class="width92 height20 titles fcor333 font15 mart15 fontwig6">
			加油订单
		</view>
		<view class="width92 line1 mart10"></view>
		<view class="width92 height20 fcor333 font15 mart20">
			商家/订单信息
		</view>
		<view class="width92 fcor666 font14 mart20 alijusstart">
			<view class="width20">交易单号</view>
			<view class="width80p fotrt">{{oilorderdetails.orderNo}}</view>
		</view>
		<view class="width92 fcor666 font14 mart20 alijusstart">
			<view class="width20">下单时间</view>
			<view class="width80p fotrt">{{oilorderdetails.createTime | timeFormat('yyyy-mm-dd hh:mm:ss')}}</view>
		</view>
		<view class="width92 fcor666 font14 mart20 alijusstart">
			<view class="width20">油站名称</view>
			<view class="width80p fotrt">{{oilorderdetails.gasName}}</view>
		</view>
		<view class="width92 fcor666 font14 mart20 alijusstart">
			<view class="width20">地址</view>
			<view class="width80p fotrt">{{oilorderdetails.gasAddress}}</view>
		</view>
		<view class="width92 line1 mart15"></view>
		<view class="width92 height20 fcor333 font15 mart20">
			商品信息
		</view>
		<view class="width92 fcor666 font14 mart20 alijusstart">
			<view class="width20">油号/油枪</view>
			<view class="width80p fotrt">{{oilorderdetails.gasOilNo}}#/{{oilorderdetails.gasGunNo}}号枪</view>
		</view>
		<view class="width92 fcor666 font14 mart20 alijusstart">
			<view class="width20">油站价</view>
			<view class="width80p fotrt">¥{{oilorderdetails.gasPriceGun}}</view>
		</view>
		<view class="width92 fcor666 font14 mart20 alijusstart">
			<view class="width80p">加油升数<text class="fcor999 font13">实际升数以油站加油机为准</text></view>
			<view class="width20 fotrt">{{oilorderdetails.gasOilLiters}}升</view>
		</view>
		<view class="width92 fcor666 font14 mart20 alijusstart">
			<view class="width20">加油金额</view>
			<view class="width80p fotrt">¥{{oilorderdetails.totalPrice}}</view>
		</view>
		<view class="width92 line1 mart15"></view>
		<view class="width92 height20 fcor333 font15 mart20">
			优惠信息
		</view>
		<view class="width92 fcor666 font14 mart20 alijusstart">
			<view class="width20">加油折扣</view>
			<view class="width80p fotrt" v-if="oilorderdetails.gasDiscount">¥{{oilorderdetails.gasDiscount}}</view>
			<view class="width80p fotrt" v-else>0折</view>
		</view>
		<view class="width92 fcor666 font14 mart20 alijusstart">
			<view class="width20">加油补贴</view>
			<view class="width80p fotrt" v-if="oilorderdetails.gasOilSubsidy">¥{{oilorderdetails.gasOilSubsidy}}</view>
			<view class="width80p fotrt" v-else>¥0</view>
		</view>
		<view class="width92 fcor666 font14 mart20 alijusstart">
			<view class="width20">每升优惠</view>
			<view class="width80p fotrt" v-if="oilorderdetails.gasLitersPreferences">¥{{oilorderdetails.gasLitersPreferences}}</view>
			<view class="width80p fotrt" v-else>¥0</view>
		</view>
		<view class="width92 fcor666 font14 mart20 alijusstart">
			<view class="width20">优惠价格</view>
			<view class="width80p fotrt" v-if="oilorderdetails.gasPricePreferences">¥{{oilorderdetails.gasPricePreferences}}</view>
			<view class="width80p fotrt" v-else>¥0</view>
		</view>
		<view class="width92 line1 mart15"></view>
		<view class="width92 fcor666 font18 mart20 alijusstart">
			<view class="width50">加油实付金额</view>
			<view class="width50 fcor333 fontwig6  fotrt">¥{{oilorderdetails.payRealPrice}}</view>
		</view>
		<view class="width92 line1 mart15"></view>
		<view class="width92 fcor666 font16 mart20 alijusstart">
			<view class="width50" v-if="oilorderdetails.payType == 1">支付宝支付</view>
			<view class="width50" v-if="oilorderdetails.payType == 2">微信支付</view>
			<view class="width50" v-if="oilorderdetails.payType == 3">金币支付</view>
			<view class="width50" v-if="oilorderdetails.payType == 4">汇联通工会卡支付</view>
			<view class="width50" v-if="oilorderdetails.payType == 5">银联支付</view>
			<view class="width50" v-if="oilorderdetails.payType == 6">银联分期支付</view>
			<view class="width50 fotrt">¥{{oilorderdetails.payRealPrice}}</view>
		</view>
		<view class="height40p"></view>
	</view>
</template>

<script>
	import {
		getGasOrderDetail
	} from '../../../Utils/Api.js';
	export default {
		data() {
			return {
				orderNo: '', //订单号
				oilorderdetails: '' // 订单详情
			}
		},
		onLoad(options) {
			this.orderNo = options.ordesid;
			this.getGasOrderDetail();
		},
		methods: {
			getGasOrderDetail() {
				uni.showLoading({
					title: '加载中'
				})
				let datas = {
					orderNo: this.orderNo
				}
				getGasOrderDetail(datas).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.oilorderdetails = res.return_data;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.headimg {
		position: absolute;
		width: 100%;
		height: 180px;
	}

	.headsearch {
		position: relative;
		height: 180px;
	}

	.heads {
		padding-top: 40px;
	}

	.ordslef {
		width: 40%;
		margin-left: 5%;
		color: #FFFFFF;
		font-size: 15px;
		float: left;
	}

	.ordsrig {
		width: 50%;
		color: #FFFFFF;
		float: right;
		font-size: 15px;
	}

	.prices {
		color: #FFFFFF;
		margin-left: 5%;
		font-size: 14px;
	}

	.line1con {
		width: 100%;
		height: 1px;
		background-color: #f6f6f6;
		margin-top: 20px;
	}

	.titles {
		border-left: 4px solid #3981ed;
		padding-left: 10px;
	}
</style>