重构财务详情页面

jsowell-ui/src/views/financial/financeDetail.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="wp">
     <div class="header">
-      <div
-        class="text-gray"
-        v-if="showAccountList"
-        v-for="(item, index) in settleAccountList"
-        :key="index"
-      >
+      <div class="text-gray" v-if="showAccountList" v-for="(item, index) in settleAccountList" :key="index"  >
         <h3>运营商信息</h3>
         <div>
           <p>运营商：</p>
@@ -71,69 +66,56 @@
         <h3>金额信息</h3>
         <div>
           <p>电费金额：</p>
-          <span>¥ {{ merchantOrderReport.electricityAmount.toFixed(2) }}</span>
+          <span>¥ {{ merchantOrderReport.electricityAmount ? merchantOrderReport.electricityAmount.toFixed(2) : '0.00'}}</span>
         </div>
         <div>
           <p>交易金额：</p>
-          <span>¥ {{ merchantOrderReport.tradeAmount.toFixed(2) }}</span>
+          <span>¥ {{ merchantOrderReport.tradeAmount? merchantOrderReport.tradeAmount.toFixed(2) : '0.00'}}</span>
         </div>
         <div>
           <p>虚拟金额：</p>
-          <span>¥ {{ merchantOrderReport.virtualAmount.toFixed(2) }}</span>
+          <span>¥ {{merchantOrderReport.virtualAmount? merchantOrderReport.virtualAmount.toFixed(2): '0.00' }}</span>
         </div>
         <div>
           <p>服务费金额：</p>
-          <span>¥ {{ merchantOrderReport.serviceAmount.toFixed(2) }}</span>
+          <span>¥ {{ merchantOrderReport.serviceAmount?merchantOrderReport.serviceAmount.toFixed(2) : '0.00'}}</span>
         </div>
         <div>
           <p>交易手续费：</p>
-          <span>¥ {{ merchantOrderReport.tradeFee.toFixed(2) }}</span>
+          <span>¥ {{merchantOrderReport.tradeFee? merchantOrderReport.tradeFee.toFixed(2): '0.00' }}</span>
         </div>
       </div>
       <div class="text-gray">
         <h3>提现信息</h3>
         <div>
           <p>总结算金额：</p>
-          <span>¥ {{ merchantOrderReport.totalAmount.toFixed(2) }}</span>
+          <span>¥ {{ merchantOrderReport.totalAmount?merchantOrderReport.totalAmount.toFixed(2): '0.00' }}</span>
         </div>
         <div>
           <p>可提现金额：</p>
-          <span style="color: #2563eb">¥ {{ adapayMember.avlBalance.toFixed(2) }}</span>
+          <span style="color: #2563eb">¥ {{ adapayMember.avlBalance?adapayMember.avlBalance.toFixed(2) : '0.00'}}</span>
         </div>
         <div>
           <p>总提现金额：</p>
           <span style="color: #16a34a">
-            ¥ {{ adapayMember.totalWithdraw.toFixed(2) }}
+            ¥ {{ adapayMember.totalWithdraw?adapayMember.totalWithdraw.toFixed(2) : '0.00'}}
           </span>
         </div>
         <p class="concentrate">已成功提现到绑定银行卡的金额</p>
       </div>
     </div>
     <div class="inquire">
-      <el-form
-        :model="queryParams"
-        ref="queryForm"
-        size="small"
-        inline
-        label-width="68px"
-      >
+      <el-form  :model="queryParams" ref="queryForm" size="small" inline  label-width="68px" >
         <el-form-item label="日期" prop="tradeDate">
-          <el-date-picker
-            v-model="createTimeRange"
-            style="width: 240px"
-            value-format="yyyy-MM-dd"
-            :default-time="['00:00:00', '23:59:59']"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            :clearable="false"
-          ></el-date-picker>
+          <el-date-picker v-model="createTimeRange" style="width: 240px" value-format="yyyy-MM-dd" :default-time="['00:00:00', '23:59:59']" type="daterange" range-separator="至" start-placeholder="开始日期"  end-placeholder="结束日期" :clearable="false" ></el-date-picker>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
-            >搜索</el-button
-          >
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        </el-form-item>
+      </el-form>
+      <el-form>
+        <el-form-item>
+          <el-button style="height: 40px" type="success" icon="el-icon-s-claim" @click="already">提现记录</el-button  >
         </el-form-item>
       </el-form>
     </div>
@@ -141,19 +123,14 @@
       <!-- <el-table :data="reportList"> -->
       <el-table :data="temporary">
         <el-table-column label="日期" align="center" prop="tradeDate" />
-
         <el-table-column label="账单状态" align="center" prop="billStatus">
           <template slot-scope="scope">
             <dict-tag :options="dict.type.bill_status" :value="scope.row.billStatus" />
           </template>
         </el-table-column>
         <el-table-column label="应收金额（元）" align="center" prop="receivableAmount" />
-        <el-table-column
-          label="可提现金额（元）"
-          align="center"
-          prop="withdrawAbleAmount"
-        />
-        <el-table-column label="交易手续费（元）" align="center" prop="feeAmount" />
+        <el-table-column label="可提现金额（元）" align="center" prop="withdrawAbleAmount" />
+        <el-table-column label="交易手续费（元）" align="center" prop="feeAmount"/>
         <el-table-column label="分润金额（元）" align="center" prop="aaa" />
         <el-table-column label="实际到账金额（元）" align="center" prop="bbb" />
         <el-table-column label="提现订单号" align="center" prop="withdrawCode" />
@@ -161,85 +138,47 @@
         <el-table-column label="操作" align="center">
           <template slot-scope="scope">
             <span class="link-type" @click="goTradeDate(scope)">订单流水</span>
-            <span
-              class="link-type"
-              style="margin-left: 10px"
-              @click="getProfitSharing(scope)"
-              >分润流水</span
-            >
+            <span class="link-type" style="margin-left: 10px" @click="getProfitSharing(scope)">分润流水</span>
           </template>
         </el-table-column>
       </el-table>
-      <pagination
-        v-show="reportTotal > 0"
-        :total="reportTotal"
-        :page.sync="reportQueryParams.pageNum"
-        :limit.sync="reportQueryParams.pageSize"
-        @pagination="getList"
-      />
+      <pagination v-show="reportTotal > 0" :total="reportTotal" :page.sync="reportQueryParams.pageNum" :limit.sync="reportQueryParams.pageSize"
+        @pagination="getList" />
     </div>
+    <!-- 提现记录 -->
+    <el-dialog title="提现记录" :visible.sync="recordDialog">
+      <el-table :data="payoutInformation" style="width: 100%">
+        <el-table-column label="申请时间" align="center" property="applicationTime" />
+        <el-table-column label="提现编号" align="center" property="withdrawCode" />
+        <el-table-column label="状态" align="center" property="statusDesc" />
+        <el-table-column label="金额" align="center" property="cashAmt" />
+      </el-table>
+      <pagination v-show="getTotal > 0" :total="getTotal" :page.sync="getWithdrawnParameters.pageNum" :limit.sync="getWithdrawnParameters.pageSize"  @pagination="getHistory"/>
+    </el-dialog>
     <!-- 订单流水 -->
-    <el-dialog
-      title="订单流水"
-      :visible.sync="dialogTableVisible"
-      :before-close="orderClose"
-    >
+    <el-dialog title="订单流水" :visible.sync="dialogTableVisible" :before-close="orderClose" >
       <el-table :data="orderList" v-loading="orderLoading">
         <el-table-column property="orderCode" label="订单编号" align="center" />
         <el-table-column property="settleAmount" label="结算金额(元)" align="center" />
         <el-table-column property="clearingStatus" label="清分状态" align="center" />
-        <el-table-column
-          property="clearingBillCode"
-          label="清分账单编号"
-          align="center"
-        />
+        <el-table-column property="clearingBillCode" label="清分账单编号" align="center"/>
         <el-table-column property="withdrawStatus" label="提现状态" align="center" />
         <el-table-column property="withdrawCode" label="提现编号" align="center" />
       </el-table>
-      <pagination
-        v-show="orderTotal > 0"
-        :total="orderTotal"
-        :page.sync="getOrderParams.pageNum"
-        :limit.sync="getOrderParams.pageSize"
-        @pagination="getOrderList"
-      />
+      <pagination v-show="orderTotal > 0" :total="orderTotal" :page.sync="getOrderParams.pageNum" :limit.sync="getOrderParams.pageSize" @pagination="getOrderList"/>
     </el-dialog>
     <!-- 分润流水 -->
-    <el-dialog
-      title="分润流水"
-      :visible.sync="profitSharing"
-      :before-close="turnOffProfitSharing"
-    >
-      <el-form
-        :model="queryParams"
-        ref="queryForm"
-        size="small"
-        inline
-        label-width="68px"
-      >
+    <el-dialog  title="分润流水" :visible.sync="profitSharing" :before-close="turnOffProfitSharing" >
+      <el-form :model="queryParams" ref="queryForm" size="small" inline label-width="68px">
         <el-form-item label="分润类型" prop="tradeDate">
-          <el-select
-            v-model="queryParams.orderStatus"
-            placeholder="请选择分润类型"
-            clearable
-            style="width: 180px"
-          >
-            <el-option
-              v-for="item1 in sharingType"
-              :key="item1.value"
-              :label="item1.label"
-              :value="item1.value"
-            />
+          <el-select v-model="queryParams.orderStatus" placeholder="请选择分润类型" clearable style="width: 180px"  >
+            <el-option  v-for="item1 in sharingType" :key="item1.value" :label="item1.label" :value="item1.value"/>
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
-            >搜索</el-button
-          >
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="">重置</el-button>
-          <el-button type="warning" plain icon="el-icon-download" size="mini" @click=""
-            >导出</el-button
-          >
+          <el-button type="warning" plain icon="el-icon-download" size="mini" @click=" ">导出</el-button>
         </el-form-item>
       </el-form>
       <el-table :data="orderList">
@@ -249,13 +188,7 @@
         <el-table-column property="" label="分润比例" align="center" />
         <el-table-column property="" label="分润金额(元)" align="center" />
       </el-table>
-      <pagination
-        v-show="orderTotal > 0"
-        :total="orderTotal"
-        :page.sync="getOrderParams.pageNum"
-        :limit.sync="getOrderParams.pageSize"
-        @pagination="getOrderList"
-      />
+      <pagination v-show="orderTotal > 0" :total="orderTotal" :page.sync="getOrderParams.pageNum" :limit.sync="getOrderParams.pageSize" @pagination="getOrderList" />
     </el-dialog>
   </div>
 </template>
@@ -518,8 +451,7 @@ export default {
     // 关闭分润流水弹框
     turnOffProfitSharing() {
       this.profitSharing = false;
-			this.orderList = [];
-			
+      this.orderList = [];
     },
   },
   created() {
@@ -554,7 +486,7 @@ export default {
     height: 100%;
     background: #fff;
     border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.15);
     padding: 20px;
 
     div {
@@ -588,6 +520,7 @@ export default {
   margin-top: 20px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
 }
 
 .container {