|
|
@@ -0,0 +1,212 @@
|
|
|
+<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('/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.chargeOrderNo }}</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>
|