autumn/jsowell-charger-web
1
0
Fork 0
mirror of https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git synced 2026-06-21 23:59:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

订单详情页新增重试退款按钮

Browse Source
This commit is contained in:
autumn.g@foxmail.com
2023-08-17 16:37:03 +08:00
parent f25b51f739
commit 3b1e984042
1 changed files with 91 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
jsowell-ui/src/views/order/order/orderDetail.vue
View File

@@ -10,7 +10,7 @@
title="提示" title="提示"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="35%" width="35%"
> >
<span>平台收到充电桩传来的最后一次实时监测数据<br/></span> <span>平台收到充电桩传来的最后一次实时监测数据<br/></span>
<el-table style="width: 100%" :data="monitorDataList" border> <el-table style="width: 100%" :data="monitorDataList" border>
@@ -24,10 +24,12 @@
<div style="display:flex;justify-content:center;"> <div style="display:flex;justify-content:center;">
<el-form :model="manualSettlementParam"> <el-form :model="manualSettlementParam">
<el-form-item label="消费金额:" prop="chargingAmount" label-width="80px"> <el-form-item label="消费金额:" prop="chargingAmount" label-width="80px">
<el-input-number v-model.number="manualSettlementParam.chargingAmount" :precision="2" :controls="false" style="width: 50%"/> <el-input-number v-model.number="manualSettlementParam.chargingAmount" :precision="2" :controls="false"
style="width: 50%"/>
</el-form-item> </el-form-item>
<el-form-item label="充电度数:" prop="chargingDegree" label-width="80px"> <el-form-item label="充电度数:" prop="chargingDegree" label-width="80px">
<el-input-number v-model.number="manualSettlementParam.chargingDegree" :precision="2" :controls="false" style="width: 50%"/> <el-input-number v-model.number="manualSettlementParam.chargingDegree" :precision="2" :controls="false"
style="width: 50%"/>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
@@ -71,6 +73,7 @@
</el-steps> </el-steps>
</div> </div>
</el-card> </el-card>
<!-- 订单信息 --> <!-- 订单信息 -->
<el-card class="cardStyle"> <el-card class="cardStyle">
<h3>订单信息</h3> <h3>订单信息</h3>
@@ -90,43 +93,43 @@
</el-card> </el-card>
<!-- 收费明细 --> <!-- 收费明细 -->
<!-- <el-card class="cardStyle"> <!-- <el-card class="cardStyle">
<h3>收费明细</h3> <h3>收费明细</h3>
<el-table style="width: 100%" :data="orderDetail" border> <el-table style="width: 100%" :data="orderDetail" border>
<el-table-column prop="totalUsedElectricity" label="总用电量" align="center"/> <el-table-column prop="totalUsedElectricity" label="总用电量" align="center"/>
<el-table-column prop="totalOrderAmount" label="订单总金额" align="center"/> <el-table-column prop="totalOrderAmount" label="订单总金额" align="center"/>
<el-table-column prop="totalElectricityAmount" label="电费总金额" align="center"/> <el-table-column prop="totalElectricityAmount" label="电费总金额" align="center"/>
<el-table-column prop="totalServiceAmount" label="服务费总金额" align="center"/> <el-table-column prop="totalServiceAmount" label="服务费总金额" align="center"/>
<el-table-column prop="sharpUsedElectricity" label="尖时段用电量" align="center"/> <el-table-column prop="sharpUsedElectricity" label="尖时段用电量" align="center"/>
<el-table-column prop="sharpElectricityPrice" label="尖时段电费单价" align="center"/> <el-table-column prop="sharpElectricityPrice" label="尖时段电费单价" align="center"/>
<el-table-column prop="sharpServicePrice" label="尖时段服务费单价" align="center"/> <el-table-column prop="sharpServicePrice" label="尖时段服务费单价" align="center"/>
<el-table-column prop="peakUsedElectricity" label="峰时段用电量" align="center"/> <el-table-column prop="peakUsedElectricity" label="峰时段用电量" align="center"/>
<el-table-column prop="peakElectricityPrice" label="峰时段电费单价" align="center"/> <el-table-column prop="peakElectricityPrice" label="峰时段电费单价" align="center"/>
<el-table-column prop="peakServicePrice" label="峰时段服务费单价" align="center"/> <el-table-column prop="peakServicePrice" label="峰时段服务费单价" align="center"/>
<el-table-column prop="flatUsedElectricity" label="平时段用电量" align="center"/> <el-table-column prop="flatUsedElectricity" label="平时段用电量" align="center"/>
<el-table-column prop="flatElectricityPrice" label="平时段电费单价" align="center"/> <el-table-column prop="flatElectricityPrice" label="平时段电费单价" align="center"/>
<el-table-column prop="flatServicePrice" label="平时段服务费单价" align="center"/> <el-table-column prop="flatServicePrice" label="平时段服务费单价" align="center"/>
<el-table-column prop="valleyUsedElectricity" label="谷时段用电量" align="center"/> <el-table-column prop="valleyUsedElectricity" label="谷时段用电量" align="center"/>
<el-table-column prop="valleyElectricityPrice" label="谷时段电费单价" align="center"/> <el-table-column prop="valleyElectricityPrice" label="谷时段电费单价" align="center"/>
<el-table-column prop="valleyServicePrice" label="谷时段服务费单价" align="center"/> <el-table-column prop="valleyServicePrice" label="谷时段服务费单价" align="center"/>
</el-table> </el-table>
<div class="marginTop"></div> <div class="marginTop"></div>
</el-card>--> </el-card>-->
<el-card class="cardStyle"> <el-card class="cardStyle">
<h3>收费明细</h3> <h3>收费明细</h3>
<el-table :data="tableData" border show-summary :summary-method="getSummaries"> <el-table :data="tableData" border show-summary :summary-method="getSummaries">
<el-table-column prop="periodType" label="时段类型" width="180" align="center"/> <el-table-column prop="periodType" label="时段类型" width="180" align="center"/>
<el-table-column prop="electricityPrice" label="电费单价(元/千瓦时)" align="center"/> <el-table-column prop="electricityPrice" label="电费单价(元/千瓦时)" align="center"/>
<el-table-column prop="servicePrice" label="服务费单价(元/千瓦时)" align="center"/> <el-table-column prop="servicePrice" label="服务费单价(元/千瓦时)" align="center"/>
<el-table-column prop="usedElectricity" label="用电量(千瓦时)" align="center"/> <el-table-column prop="usedElectricity" label="用电量(千瓦时)" align="center"/>
<el-table-column prop="electricityAmount" label="电费金额(元)" align="center"/> <el-table-column prop="electricityAmount" label="电费金额(元)" align="center"/>
<el-table-column prop="serviceAmount" label="服务费金额(元)" align="center"/> <el-table-column prop="serviceAmount" label="服务费金额(元)" align="center"/>
</el-table> </el-table>
<div class="marginTop"></div> <div class="marginTop"></div>
</el-card> </el-card>
@@ -163,8 +166,8 @@
<el-table-column prop="payStatus" label="支付状态" align="center"> <el-table-column prop="payStatus" label="支付状态" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ <span>{{
scope.row.payStatus === "1" ? "支付完成" : "待支付" scope.row.payStatus === "1" ? "支付完成" : "待支付"
}}</span> }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="payTime" label="支付时间" align="center"/> <el-table-column prop="payTime" label="支付时间" align="center"/>
@@ -176,7 +179,17 @@
<!-- 退款信息 --> <!-- 退款信息 -->
<el-card class="cardStyle"> <el-card class="cardStyle">
<h3>退款信息</h3> <div style="margin: 12px 0">
<span>退款信息</span>
<el-button icon="el-icon-refresh-right"
style="float: right; padding: 3px 0"
type="text"
@click="retryRefundOrder"
v-if="retryRefundFlag"
>
重试退款
</el-button>
</div>
<el-table style="width: 100%" :data="orderRefundInfoList" border> <el-table style="width: 100%" :data="orderRefundInfoList" border>
<el-table-column prop="paymentId" label="支付流水号" align="center"/> <el-table-column prop="paymentId" label="支付流水号" align="center"/>
<el-table-column prop="reverseId" label="退款流水号" align="center"/> <el-table-column prop="reverseId" label="退款流水号" align="center"/>
@@ -204,19 +217,19 @@
<el-card class="cardStyle"> <el-card class="cardStyle">
<h3>用户信息</h3> <h3>用户信息</h3>
<el-table style="width: 100%" :data="userInfo" border> <el-table style="width: 100%" :data="userInfo" border>
<el-table-column prop="nickName" label="用户昵称" align="center"> <el-table-column prop="nickName" label="用户昵称" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<router-link <router-link
:to="'/member/detail/index/'+scope.row.memberId" :to="'/member/detail/index/'+scope.row.memberId"
class="link-type" class="link-type"
> >
<span>{{ scope.row.nickName }}</span> <span>{{ scope.row.nickName }}</span>
</router-link> </router-link>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="mobileNumber" label="用户手机号" align="center"/> <el-table-column prop="mobileNumber" label="用户手机号" align="center"/>
<el-table-column prop="principalBalance" label="本金金额" align="center"/> <el-table-column prop="principalBalance" label="本金金额" align="center"/>
<!-- <el-table-column prop="giftBalance" label="赠送金额" align="center"/>--> <!-- <el-table-column prop="giftBalance" label="赠送金额" align="center"/>-->
<el-table-column prop="totalAccountAmount" label="总金额" align="center"/> <el-table-column prop="totalAccountAmount" label="总金额" align="center"/>
</el-table> </el-table>
<div class="marginTop"></div> <div class="marginTop"></div>
@@ -239,16 +252,19 @@ import OrderEcharts from "@/views/order/order/orderEcharts";
export default { export default {
name: "", name: "",
components: { OrderEcharts }, components: {OrderEcharts},
data() { data() {
return { return {
orderList: this.$route.params.orderCode, orderList: this.$route.params.orderCode,
orderInfo: [], orderInfo: [],
payDetail: [], payDetail: [],
// 订单退款列表
orderRefundInfoList: [], orderRefundInfoList: [],
// 重试退款按钮
retryRefundFlag: false,
userInfo: [], userInfo: [],
obj: {}, obj: {},
orderDetail:[], orderDetail: [],
pileIn: [], pileIn: [],
orderRealTimeInfo: null, orderRealTimeInfo: null,
// 手动结算对话框Visible // 手动结算对话框Visible
@@ -270,7 +286,7 @@ export default {
}, },
methods: { methods: {
getSummaries(param) { getSummaries(param) {
const { columns, data } = param; const {columns, data} = param;
const sums = []; const sums = [];
columns.forEach((column, index) => { columns.forEach((column, index) => {
if (index === 0) { if (index === 0) {
@@ -278,7 +294,7 @@ export default {
return; return;
} }
const values = data.map(item => Number(item[column.property])); const values = data.map(item => Number(item[column.property]));
if (column.property === 'usedElectricity' ||column.property ==='electricityAmount' || column.property==='serviceAmount' ) { if (column.property === 'usedElectricity' || column.property === 'electricityAmount' || column.property === 'serviceAmount') {
sums[index] = values.reduce((prev, curr) => { sums[index] = values.reduce((prev, curr) => {
const value = Number(curr); const value = Number(curr);
if (!isNaN(value)) { if (!isNaN(value)) {
@@ -294,6 +310,11 @@ export default {
clickManualSettlement() { clickManualSettlement() {
this.dialogVisible = true; this.dialogVisible = true;
}, },
// 重试退款方法
retryRefundOrder() {
console.log("点击重试退款按钮");
},
confirmManualSettlement() { confirmManualSettlement() {
if (this.manualSettlementParam.chargingAmount == null) { if (this.manualSettlementParam.chargingAmount == null) {
return false; return false;
@@ -309,38 +330,44 @@ export default {
}) })
}, },
async getOrderDetail() { async getOrderDetail() {
console.log("主页面传递过来的参数", this.orderList); // console.log("主页面传递过来的参数", this.orderList);
// console.log(this.orderList.orderCode) // console.log(this.orderList.orderCode)
const { data } = await getOrder(this.orderList); const {data} = await getOrder(this.orderList);
console.log("getOrder", data); // console.log("getOrder", data);
this.obj = data; this.obj = data;
this.orderInfo = [data.orderInfo]; this.orderInfo = [data.orderInfo];
console.log("this.orderInfo", this.orderDetail); // console.log("this.orderInfo", this.orderDetail);
this.payDetail = data.payRecordList; this.payDetail = data.payRecordList;
console.log("this.payDetail", this.payDetail); // console.log("this.payDetail", this.payDetail);
this.orderRefundInfoList = data.orderRefundInfoList; this.orderRefundInfoList = data.orderRefundInfoList;
this.userInfo = [data.memberInfo]; this.userInfo = [data.memberInfo];
console.log("this.userInfo", this.userInfo); // console.log("this.userInfo", this.userInfo);
this.pileIn = [data.pileInfo]; this.pileIn = [data.pileInfo];
console.log("this.pileIn", this.pileIn); // console.log("this.pileIn", this.pileIn);
this.orderRealTimeInfo = [data.orderRealTimeInfo]; this.orderRealTimeInfo = [data.orderRealTimeInfo];
this.orderDetail = [data.billingDetails]; this.orderDetail = [data.billingDetails];
this.tableData = data.chargeDetails; this.tableData = data.chargeDetails;
this.lastMonitorData = data.lastMonitorData; this.lastMonitorData = data.lastMonitorData;
// 是否显示重试退款按钮
if (data.orderInfo.orderStatus === '6' && data.payRecordList[0].payMode === '4' && data.orderRefundInfoList.length === 0) {
this.retryRefundFlag = true;
}
}, },
}, },
computed: { computed: {
// 一个计算属性的 getter // 一个计算属性的 getter
monitorDataList() { monitorDataList() {
return [this.lastMonitorData]; return [this.lastMonitorData];
} },
} }
}; };
</script> </script>
<style> <style>
.cardStyle { .cardStyle {
margin-bottom: 10px; margin-bottom: 10px;
} }
.marginTop { .marginTop {
margin-top: 10px; margin-top: 10px;
} }