更新代码

src/api/repair/orderinfo/index.js

@@ -61,3 +61,10 @@ export function toPay(params) {
     params
   })
 }
+
+export function getOrderCensus(){
+  return request({
+    url: "/repair/order-info/census",
+    method: "get"
+  })
+}

src/views/repair/orderinfo/index.vue

@@ -6,10 +6,12 @@
         <el-input v-model="queryParams.orderNo" placeholder="请输入订单号" clearable @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item label="服务名称" prop="goodsTitle">
-        <el-input v-model="queryParams.goodsTitle" placeholder="请输入服务名称" clearable @keyup.enter.native="handleQuery"/>
+        <el-input v-model="queryParams.goodsTitle" placeholder="请输入服务名称" clearable
+                  @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item label="客户姓名" prop="cusName">
-        <el-input v-model="queryParams.cusName" placeholder="请输入服务名称" clearable @keyup.enter.native="handleQuery"/>
+        <el-input v-model="queryParams.cusName" placeholder="请输入服务名称" clearable
+                  @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item label="支付方式" prop="payType">
         <el-select v-model="queryParams.payType" placeholder="请选择支付方式">
@@ -37,7 +39,13 @@
     <el-row :gutter="10" class="mb8">
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"/>
     </el-row>
-
+    <div class="census">
+      <span class="credited">已入账&nbsp;:&nbsp;{{ census?.credited || 0 }}元</span>
+      <span class="notCredited">待入账&nbsp;:&nbsp;{{ census?.notCredited || 0 }}元</span>
+      <span class="onlinePay">线上支付&nbsp;:&nbsp;{{ census?.onlinePay || 0 }}元</span>
+      <span class="cashPay">线下支付&nbsp;:&nbsp;{{ census?.cashPay || 0 }}元</span>
+      <span class="signedPay">签单/挂账&nbsp;:&nbsp;{{ census?.signedPay || 0 }}元</span>
+    </div>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
       <el-table-column label="订单号" align="center" prop="orderNo"/>
       <el-table-column label="服务名称" align="center" prop="goodsTitle"/>
@@ -75,7 +83,8 @@
       </el-table-column>
       <el-table-column label="操作" width="150" align="center" class-name="small-padding fixed-width">
         <template v-slot="scope">
-          <el-button v-if="scope.row.orderStatus === '0'" size="mini" type="text" icon="el-icon-edit" @click="toPay(scope.row)"
+          <el-button v-if="scope.row.orderStatus === '0'" size="mini" type="text" icon="el-icon-edit"
+                     @click="toPay(scope.row)"
                      v-hasPermi="['repair:order-info:update']">支付
           </el-button>
           <!--          <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"-->
@@ -104,6 +113,8 @@
 import * as OrderInfoApi from '@/api/repair/orderinfo';
 import OrderInfoForm from './OrderInfoForm.vue';
 import QrcodeVue from 'qrcode.vue'
+import {getOrderCensus} from "@/api/repair/orderinfo";
+
 export default {
   name: "OrderInfo",
   components: {
@@ -151,10 +162,18 @@ export default {
         payType: null,
         orderStatus: null
       },
+      census: {
+        credited: null,
+        notCredited: null,
+        onlinePay: null,
+        cashPay: null,
+        signedPay: null
+      }
     };
   },
   created() {
     this.getList();
+    this.getCensus()
   },
   methods: {
     /** 查询列表 */
@@ -228,6 +247,44 @@ export default {
         this.exportLoading = false;
       }
     },
+    async getCensus() {
+      const res = await getOrderCensus()
+      console.log(res.data)
+      this.census = res.data
+    },
   }
 };
 </script>
+<style scoped lang="scss">
+.census {
+  display: flex;
+  justify-content: right;
+  font-weight: bold;
+  font-size: 16px;
+  margin: 1rem 1rem 1rem 0;
+}
+
+.census > span {
+  padding-left: 3rem;
+}
+
+.credited {
+  color: green;
+}
+
+.notCredited {
+  color: gray;
+}
+
+.onlinePay {
+  color: blue;
+}
+
+.cashPay {
+  color: goldenrod;
+}
+
+.signedPay {
+  color: orange;
+}
+</style>