mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-05-08 20:10:16 +08:00
commit
This commit is contained in:
318
jsowell-ui/src/views/order/order/orderDetail.vue
Normal file
318
jsowell-ui/src/views/order/order/orderDetail.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 进度条-->
|
||||
<el-card class="cardStyle">
|
||||
<div style="margin: 30px">
|
||||
<div
|
||||
style="text-align: center; margin-bottom: 30px"
|
||||
v-if="
|
||||
orderDetail[0].orderStatus === '4' ||
|
||||
orderDetail[0].orderStatus === '6'
|
||||
"
|
||||
>
|
||||
停止理由：
|
||||
<span style="color: red">{{ orderDetail[0].stopReasonMsg }}</span>
|
||||
</div>
|
||||
<el-steps
|
||||
:active="orderDetail[0].orderStatus !== '6' ? 2 : 4"
|
||||
align-center
|
||||
finish-status="success"
|
||||
>
|
||||
<el-step
|
||||
title="客户下单"
|
||||
:description="orderDetail[0].createTime"
|
||||
></el-step>
|
||||
<el-step
|
||||
title="开始充电"
|
||||
:description="status(orderDetail[0].orderStatus)"
|
||||
></el-step>
|
||||
<el-step
|
||||
title="结束充电"
|
||||
:description="orderDetail[0].endTime"
|
||||
></el-step>
|
||||
<el-step title="完成充电" description="充电时长"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- 订单信息 -->
|
||||
<el-card class="cardStyle">
|
||||
<h3>订单信息</h3>
|
||||
<el-table style="width: 100%" :data="orderDetail" border>
|
||||
<el-table-column
|
||||
prop="orderCode"
|
||||
label="订单号"
|
||||
align="center"
|
||||
width="280"
|
||||
></el-table-column>
|
||||
<el-table-column prop="orderStatus" label="订单状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ status(scope.row.orderStatus) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column-->
|
||||
<!-- prop="orderAmount"-->
|
||||
<!-- label="订单金额"-->
|
||||
<!-- align="center"-->
|
||||
<!-- ></el-table-column>-->
|
||||
<el-table-column prop="createTime" label="创建时间" align="center"/>
|
||||
<el-table-column prop="startTime" label="开始时间" align="center"/>
|
||||
<el-table-column prop="endTime" label="结束时间" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.endTime === "" ? "一" : scope.row.endTime
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startSOC" label="起始SOC" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.startSOC === null ? "一" : scope.row.startSOC
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="endSOC" label="终止SOC" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.endSOC === null ? "一" : scope.row.endSOC
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="stopReasonMsg" label="订单停止原因" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.stopReasonMsg === null ? "一" : scope.row.stopReasonMsg
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="marginTop"></div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="cardStyle">
|
||||
<h3>实时订单数据</h3>
|
||||
<el-table style="width: 100%" :data="orderRealTimeInfo" border>
|
||||
<el-table-column prop="orderAmount" label="消费金额" align="center" width="280">
|
||||
<template slot-scope="scope">
|
||||
<span>￥{{
|
||||
scope.row.orderAmount === "0.0000" ? "0" : scope.row.orderAmount
|
||||
}} </span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- <el-table-column prop="totalElectricityAmount" label="总电费" align="center">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <span>{{-->
|
||||
<!-- scope.row.totalElectricityAmount === null ? "一" : scope.row.totalElectricityAmount-->
|
||||
<!-- }}</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
|
||||
<!-- <el-table-column prop="totalServiceAmount" label="总服务费" align="center">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <span>{{-->
|
||||
<!-- scope.row.totalServiceAmount === null ? "一" : scope.row.totalServicedAmount-->
|
||||
<!-- }}</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
|
||||
<el-table-column prop="chargedDegree" label="充电度数" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.chargedDegree === "0.0000" ? "0" : scope.row.chargedDegree
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="chargingTime" label="充电时长" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.chargingTime === null ? "一" : scope.row.chargingTime
|
||||
}} min</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="soc" label="当前soc" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.soc === null ? "一" : scope.row.soc
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column-->
|
||||
<!-- prop="startTime"-->
|
||||
<!-- label=""-->
|
||||
<!-- align="center"-->
|
||||
<!-- ></el-table-column>-->
|
||||
<!-- <el-table-column-->
|
||||
<!-- prop="endTime"-->
|
||||
<!-- label="结束时间"-->
|
||||
<!-- align="center"-->
|
||||
<!-- ></el-table-column>-->
|
||||
<!-- <el-table-column prop="startSOC" label="起始SOC" align="center">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <span>{{-->
|
||||
<!-- scope.row.startSOC === null ? "一" : scope.row.startSOC-->
|
||||
<!-- }}</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column prop="endSOC" label="终止SOC" align="center">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <span>{{-->
|
||||
<!-- scope.row.endSOC === null ? "一" : scope.row.endSOC-->
|
||||
<!-- }}</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column-->
|
||||
<!-- prop="stopReasonMsg"-->
|
||||
<!-- label="订单停止原因"-->
|
||||
<!-- align="center"-->
|
||||
<!-- ></el-table-column>-->
|
||||
</el-table>
|
||||
<div class="marginTop"></div>
|
||||
</el-card>
|
||||
|
||||
|
||||
|
||||
<!-- 支付信息-->
|
||||
<el-card class="cardStyle">
|
||||
<h3>支付信息</h3>
|
||||
<el-table style="width: 100%" :data="payDetail" border>
|
||||
<el-table-column prop="payAmount" label="支付金额" align="center"/>
|
||||
<el-table-column prop="payModeDesc" label="支付方式" align="center"/>
|
||||
<el-table-column prop="payStatus" label="支付状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.payStatus === "1" ? "支付完成" : "待支付"
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="payTime" label="支付时间" align="center"/>
|
||||
<el-table-column prop="outTradeNo" label="商务单号" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.outTradeNo === null ? "一" : scope.row.outTradeNo
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="marginTop"></div>
|
||||
</el-card>
|
||||
|
||||
<!-- -->
|
||||
<!-- <el-card class="cardStyle">
|
||||
<h3>消费信息</h3>
|
||||
<el-table style="width: 100%" :data="payDetail" border>
|
||||
<el-table-column prop="payAmount" label="支付金额" align="center"></el-table-column>
|
||||
<el-table-column prop="payModeDesc" label="支付方式" align="center"></el-table-column>
|
||||
<el-table-column prop="payStatus" label="支付状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.payStatus === '1' ? '支付完成' :'待支付'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="payTime" label="支付时间" align="center"></el-table-column>
|
||||
<el-table-column prop="outTradeNo" label="商务单号" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.outTradeNo === null ? '一' :scope.row.outTradeNo}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="marginTop"></div>
|
||||
</el-card> -->
|
||||
<!-- 设备信息 -->
|
||||
<el-card class="cardStyle">
|
||||
<h3>设备信息</h3>
|
||||
<el-table style="width: 100%" :data="pileIn" border>
|
||||
<el-table-column prop="merchantName" label="运营商名称" align="center"/>
|
||||
<el-table-column prop="pileSn" label="设备编号" align="center"/>
|
||||
<el-table-column prop="ratedCurrent" label="额定电流(A)" align="center"/>
|
||||
<el-table-column prop="ratedVoltage" label="额定电压(V)" align="center"/>
|
||||
<el-table-column prop="ratedPower" label="额定功率(KW)" align="center"/>
|
||||
</el-table>
|
||||
<div class="marginTop"></div>
|
||||
</el-card>
|
||||
<!-- 用户信息 -->
|
||||
<el-card class="cardStyle">
|
||||
<h3>用户信息</h3>
|
||||
<el-table style="width: 100%" :data="userInfo" border>
|
||||
<el-table-column prop="nickName" label="用户昵称" align="center"/>
|
||||
<el-table-column prop="mobileNumber" label="用户手机号" align="center"/>
|
||||
<el-table-column prop="principalBalance" label="本金金额" align="center"/>
|
||||
<el-table-column prop="giftBalance" label="赠送金额" align="center"/>
|
||||
<el-table-column prop="totalAccountAmount" label="总金额" align="center"/>
|
||||
</el-table>
|
||||
<div class="marginTop"></div>
|
||||
</el-card>
|
||||
<!-- 时间 描述-->
|
||||
<el-card
|
||||
class="cardStyle"
|
||||
v-if="
|
||||
orderDetail[0].orderStatus === '1' || orderDetail[0].orderStatus === '6'
|
||||
"
|
||||
>
|
||||
<div class="marginTop"></div>
|
||||
<order-echarts :obj="obj"></order-echarts>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getOrder } from "@/api/order/order";
|
||||
import OrderEcharts from "@/views/order/order/orderEcharts";
|
||||
|
||||
export default {
|
||||
name: "",
|
||||
components: { OrderEcharts },
|
||||
data() {
|
||||
return {
|
||||
orderList: this.$route.params.orderCode,
|
||||
orderDetail: [],
|
||||
payDetail: [],
|
||||
userInfo: [],
|
||||
obj: {},
|
||||
pileIn: [],
|
||||
orderRealTimeInfo: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getOrderDetail();
|
||||
},
|
||||
methods: {
|
||||
async getOrderDetail() {
|
||||
console.log("主页面传递过来的参数", this.orderList);
|
||||
// console.log(this.orderList.orderCode)
|
||||
const { data } = await getOrder(this.orderList);
|
||||
console.log("getOrder", data);
|
||||
this.obj = data;
|
||||
this.orderDetail = [data.orderInfo];
|
||||
console.log("this.orderDetail", this.orderDetail);
|
||||
this.payDetail = data.payRecordList;
|
||||
console.log("this.payDetail", this.payDetail);
|
||||
this.userInfo = [data.memberInfo];
|
||||
console.log("this.userInfo", this.userInfo);
|
||||
this.pileIn = [data.pileInfo];
|
||||
console.log("this.pileIn", this.pileIn);
|
||||
this.orderRealTimeInfo = [data.orderRealTimeInfo];
|
||||
},
|
||||
status(e) {
|
||||
let arr = [
|
||||
"未启动",
|
||||
"充电中",
|
||||
"待结算",
|
||||
"待补缴",
|
||||
"异常",
|
||||
"可疑",
|
||||
"订单完成",
|
||||
"超时关闭",
|
||||
];
|
||||
return e ? arr[e] : arr[0];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.cardStyle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.marginTop {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user