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">
				<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" 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"><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>