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

jsowell-ui/src/views/order/order/orderDetail.vue

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