charge_miniapp/subPackages/order/order-detail/order-detail.vue

<template>
	<ax-body>
		<view class="page-background">
			<image src="@/static/img/order-detail-bg.png" mode="widthFix"></image>
		</view>
		<view class="body">
			<view style="height: 220rpx;"></view>
			<!-- 基础信息 -->
			<view class="base-info">
				<view class="content">
					<view class="name">
						<image src="@/static/img/order-detail-icon.png" class="icon" mode="widthFix"></image>
						<text>充电度数</text>
					</view>
					<view class="val"><text class="value">{{ orderInfo.totalCharge || 0 }}</text><text
							class="unit">度电</text></view>
				</view>
				<!-- <image src="@/static/img/order-detail-bg.png" class="bg" mode="widthFix"></image> -->
			</view>
			<!-- 单元格 -->
			<view class="cell-group multi-line">
				<view class="cell">
					<view class="lable">起始时间</view>
					<view class="contet">{{ orderInfo.startTime || '未知' }}</view>
				</view>
				<view class="cell">
					<view class="lable">终止时间</view>
					<view class="contet">{{ orderInfo.endTime || '未知' }}</view>
				</view>
				<view class="cell">
					<view class="lable">终止方式</view>
					<view class="contet">{{ getStopType() }}</view>
				</view>
			</view>
			<view class="cell-group" v-if="orderInfo.maspStatus != 0">
				<template v-if="orderInfo.maspStatus === 1">
					<view class="cell">
						<view class="load-payment">待补缴</view>
						<view class="load-payment-btn" @click="$app.url.goto('/subPackages/coupon/coupon-buy/coupon-buy')">去补缴</view>
					</view>
					<view class="cell">
						<view class="lable">超充金额</view>
						<view class="flow-money">{{ (orderInfo.maspAmount + orderInfo.maspRealAmount).toFixed(2) || '0'
						}}元
						</view>
					</view>
				</template>
				<template v-else-if="orderInfo.maspStatus === 2">
					<view class="finish-payment">已补缴</view>
					<view class="cell">
						<view class="lable">超充金额</view>
						<view class="contet">{{ (orderInfo.maspAmount + orderInfo.maspRealAmount).toFixed(2) }}</view>
					</view>
					<view class="cell">
						<view class="lable">补缴时间</view>
						<view class="contet">{{ orderInfo.maspTime }}</view>
					</view>
				</template>
			</view>
			<!-- 单元格 -->
			<view class="cell-group">
				<view class="cell">
					<view class="lable">订单状态</view>
					<view class="contet">{{ getOrderStatus(orderInfo.status) }}</view>
				</view>
				<view class="cell">
					<view class="lable">订单编号</view>
					<view class="contet">{{ orderInfo.chargeOrderNo }}</view>
				</view>
				<view class="cell">
					<view class="lable">车牌号</view>
					<view class="contet">{{ orderInfo.plateNum||'--' }}</view>
				</view>
				<view class="cell">
					<view class="lable">充电时长</view>
					<view class="contet">{{ formatDuration(orderInfo.chargeTime) || '--' }}</view>
				</view>
				<view class="cell">
					<view class="lable">充电电站</view>
					<view class="contet">{{ orderInfo.stationName }}</view>
				</view>
				<view class="cell">
					<view class="lable">终端名称</view>
					<view class="contet">{{ orderInfo.connectorName }}</view>
				</view>
				<view class="cell">
					<view class="lable">终端编号</view>
					<view class="contet">{{ orderInfo.connectorId }}</view>
				</view>
				<view class="hr"></view>
				<view class="cell">
					<view class="lable">订单金额</view>
					<view class="contet sum">
						{{ orderInfo.realCost }}元
					</view>
				</view>
				<view class="cell" v-if="orderInfo.discountMoney">
					<view class="lable">{{ orderInfo.discountDes }}</view>
					<view class="contet sum">-{{ orderInfo.discountMoney ? orderInfo.discountMoney.toFixed(4) : "0.00"
					}}元
					</view>
				</view>
				<view class="cell" v-if="orderInfo.firmPrice">
					<view class="lable">企业专享价减</view>
					<view class="contet sum">-{{ orderInfo.firmPrice ? orderInfo.firmPrice.toFixed(4) : "0.00" }}元
					</view>
				</view>
				<view class="cell" v-if="orderInfo.couponPrice">
					<view class="lable">优惠券减</view>
					<view class="contet sum">-{{ orderInfo.couponPrice ? orderInfo.couponPrice.toFixed(4) : "0.00" }}元
					</view>
				</view>
				<view class="cell">
					<view class="lable">实际付款</view>
					<view class="contet sum">{{ orderInfo.realCost || "0.00" }}元</view>
				</view>
			</view>
			<view class="tips">
				<image src="@/static/img/warn.svg" class="icon"></image>
				<text>本次充电费用已从您的“充电抵扣券”中抵扣结算</text>
			</view>
		</view>
	</ax-body>
</template>

<script>
export default {
	onLoad(opts) {
		console.log("启动充值页面的参数：", opts)
		this.getOrderInfo(opts.chargeOrderNo);
	},
	data() {
		return {
			orderInfo: {
				id: 1
			}, //订单信息
			deviceInfo: {}, //充电桩详情
		}
	},
	methods: {
		getStopType() {
			var str = "用户主动终止";
			if (this.orderInfo.stopType) {
				if (this.orderInfo.stopType == 1) {
					str = "用户主动终止";
				} else if (this.orderInfo.stopType == 2) {
					str = "充电桩主动终止";
				}
			}
			return str;
		},
		clcaServicePrice() {
			var serivp = this.orderInfo.realCost - this.orderInfo.thirdPartyElecfee;
			if (this.orderInfo.discountMoney) {
				//有优惠价，服务费显示把优惠价加回去
				serivp = serivp + this.orderInfo.discountMoney;
			}
			return serivp ? serivp.toFixed(4) : "0.0000"
		},
		//查询订单详情
		getOrderInfo(chargeOrderNo) {
			this.$api.base("get", `/applet/v1/charge/queryOrder/${chargeOrderNo}`, {}, {}).then(res => {
				console.log("订单详情：", res)
				this.orderInfo = res.data;
				// this.deviceInfo = res.obj.deviceInfo;
			})
		},
		//拆解时间
		splitTime(time, index) {
			if (!time) {
				return;
			}
			return time.split(" ")[index];
		},
		formatDuration(seconds) {
			if (!seconds || seconds < 0) {
				return "0分钟";
			}
			const h = Math.floor(seconds / 3600);
			const m = Math.floor((seconds % 3600) / 60);

			if (h > 0) {
				return `${h}小时${m}分钟`;
			} else {
				return `${m}分钟`;
			}
		},
		getOrderStatus(status) {
			var str = "";
			//状态0待启动 1 充电中 2 结算中 3 已完成, 5未成功充电
			switch (status) {
				case 0:
					str = "待启动";
					break;
				case 1:
					str = "充电中";
					break;
				case 2:
					str = "结算中";
					break;
				case 3:
					str = "已完成";
					break;
				case 5:
					str = "未成功充电";
					break;
			}
			return str;
		}
	}
}
</script>

<style scoped>
@import url("order-detail.css");
</style>