charge_miniapp/pages/order-detail/order-detail.vue

<template>
	<ax-body>
		<view class="page-background">
			<image src="@/static/img/my-bg.svg" mode="widthFix"></image>
		</view>

		<view class="body">
			<!-- 基础信息 -->
			<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('/pages/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.id}}</view>
				</view>
				<view class="cell">
					<view class="lable">订单时间</view>
					<view class="contet">{{orderInfo.createTime}}</view>
				</view>
				<view class="cell">
					<view class="lable">充电电站</view>
					<view class="contet">{{deviceInfo.thirdPartyStationName}}</view>
				</view>
				<view class="cell">
					<view class="lable">终端名称</view>
					<view class="contet">{{deviceInfo.deviceName}}</view>
				</view>
				<view class="cell">
					<view class="lable">终端编号</view>
					<view class="contet">{{deviceInfo.deviceNo}}</view>
				</view>
				<view class="cell">
					<view class="lable">车位编号</view>
					<view class="contet">{{deviceInfo.parkNo ? deviceInfo.parkNo : "无"}}</view>
				</view>
				<!-- <view class="cell"><view class="lable">电费</view><view class="contet">{{orderInfo.thirdPartyElecfee?orderInfo.thirdPartyElecfee.toFixed(4):"0.0000"}}元</view></view>
				<view class="cell"><view class="lable">服务费</view><view class="contet">{{clcaServicePrice(orderInfo)}}元</view></view> -->
				<view class="hr"></view>
				<view class="cell">
					<view class="lable">订单金额</view>
					<view class="contet sum">{{(orderInfo.discountMoney+orderInfo.firmPrice+orderInfo.couponPrice+orderInfo.realCost).toFixed(4)||"0.0000"}}元</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.0000"}}元
					</view>
				</view>
				<view class="cell" v-if="orderInfo.firmPrice">
					<view class="lable">企业专享价减</view>
					<view class="contet sum">-{{orderInfo.firmPrice?orderInfo.firmPrice.toFixed(4):"0.0000"}}元</view>
				</view>
				<view class="cell" v-if="orderInfo.couponPrice">
					<view class="lable">优惠券减</view>
					<view class="contet sum">-{{orderInfo.couponPrice?orderInfo.couponPrice.toFixed(4):"0.0000"}}元</view>
				</view>
				<view class="cell">
					<view class="lable">实际付款</view>
					<view class="contet sum">{{orderInfo.realCost?orderInfo.realCost.toFixed(4):"0.0000"}}元</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.orderId);
		},
		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(orderId) {
				this.$api.base("post", "/chargeApi/queryIsSuccessStop", {
					"id": orderId
				}, {}).then(res => {
					console.log("订单详情：", res)
					this.orderInfo = res.obj.orderInfo;
					this.deviceInfo = res.obj.deviceInfo;
				})
			},
			//拆解时间
			splitTime(time, index) {
				if (!time) {
					return;
				}
				return time.split(" ")[index];
			},
			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>