重构财务详情页面

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

@@ -1,27 +1,55 @@
 <template>
   <div class="wp">
     <div class="header">
-      <div class="text-gray">
+      <div
+        class="text-gray"
+        v-if="showAccountList"
+        v-for="(item, index) in settleAccountList"
+        :key="index"
+      >
         <h3>运营商信息</h3>
         <div>
           <p>运营商：</p>
-          <span>举视新能源</span>
+          <span>{{ merchant }}</span>
         </div>
         <div>
           <p>商家性质：</p>
-          <span>对私</span>
+          <span>{{ merchantNature === "1" ? "对公" : "对私" }}</span>
         </div>
         <div>
           <p>开户行名称：</p>
-          <span>中国银行</span>
+          <span>{{ cityBankCode(item.bankCode) }}</span>
         </div>
         <div>
           <p>收款卡号：</p>
-          <span>6217850800********2</span>
+          <span>{{ item.cardId }}</span>
         </div>
         <div>
           <p>预留手机号：</p>
-          <span>1522137****</span>
+          <span>{{ item.telNo }}</span>
+        </div>
+      </div>
+      <div class="text-gray" v-else>
+        <h3>运营商信息</h3>
+        <div>
+          <p>运营商：</p>
+          <span>{{ merchant }}</span>
+        </div>
+        <div>
+          <p>商家性质：</p>
+          <span>{{ merchantNature === "1" ? "对公" : "对私" }}</span>
+        </div>
+        <div>
+          <p>开户行名称：</p>
+          <span>{{ cityBankCode(adapayCorpMember.bankCode) }}</span>
+        </div>
+        <div>
+          <p>收款卡号：</p>
+          <span>{{ adapayCorpMember.cardNo }}</span>
+        </div>
+        <div>
+          <p>预留手机号：</p>
+          <span>{{ adapayCorpMember.legalMp }}</span>
         </div>
       </div>
       <div class="text-gray">
@@ -43,42 +71,192 @@
         <h3>金额信息</h3>
         <div>
           <p>电费金额：</p>
-          <span>¥ 0</span>
+          <span>¥ {{ merchantOrderReport.electricityAmount.toFixed(2) }}</span>
         </div>
         <div>
           <p>交易金额：</p>
-          <span>¥ 0</span>
+          <span>¥ {{ merchantOrderReport.tradeAmount.toFixed(2) }}</span>
         </div>
         <div>
           <p>虚拟金额：</p>
-          <span>¥ 0</span>
+          <span>¥ {{ merchantOrderReport.virtualAmount.toFixed(2) }}</span>
         </div>
         <div>
           <p>服务费金额：</p>
-          <span>¥ 0</span>
+          <span>¥ {{ merchantOrderReport.serviceAmount.toFixed(2) }}</span>
         </div>
         <div>
           <p>交易手续费：</p>
-          <span>¥ 0</span>
+          <span>¥ {{ merchantOrderReport.tradeFee.toFixed(2) }}</span>
         </div>
       </div>
       <div class="text-gray">
         <h3>提现信息</h3>
         <div>
           <p>总结算金额：</p>
-          <span>¥ 71</span>
+          <span>¥ {{ merchantOrderReport.totalAmount.toFixed(2) }}</span>
         </div>
         <div>
           <p>可提现金额：</p>
-          <span style="color: #2563eb">¥ 719.93</span>
+          <span style="color: #2563eb">¥ {{ adapayMember.avlBalance.toFixed(2) }}</span>
         </div>
         <div>
           <p>总提现金额：</p>
-          <span style="color: #16a34a">¥ 43,142.35</span>
+          <span style="color: #16a34a">
+            ¥ {{ adapayMember.totalWithdraw.toFixed(2) }}
+          </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-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-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
+            >搜索</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="container">
+      <!-- <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="aaa" />
+        <el-table-column label="实际到账金额（元）" align="center" prop="bbb" />
+        <el-table-column label="提现订单号" align="center" prop="withdrawCode" />
+        <el-table-column label="提现申请时间" align="center" prop="applicationTime" />
+        <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
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="reportTotal > 0"
+        :total="reportTotal"
+        :page.sync="reportQueryParams.pageNum"
+        :limit.sync="reportQueryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+    <!-- 订单流水 -->
+    <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="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"
+      />
+    </el-dialog>
+    <!-- 分润流水 -->
+    <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>
+        </el-form-item>
+        <el-form-item>
+          <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-form-item>
+      </el-form>
+      <el-table :data="orderList">
+        <el-table-column property="orderCode" label="订单编号" align="center" />
+        <el-table-column property="settleAmount" label="结算金额(元)" align="center" />
+        <el-table-column property="" label="分润类型" align="center" />
+        <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"
+      />
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -146,6 +324,24 @@ export default {
       },
       payoutInformation: [],
       getTotal: 0,
+      profitSharing: false,
+      temporary: [
+        {
+          tradeDate: "2025-02-18",
+          billStatus: "提现申请中",
+          receivableAmount: "313.92",
+          withdrawAbleAmount: "1371.99",
+          feeAmount: "1.83",
+          aaa: "1059.92",
+          bbb: "1059.92",
+          withdrawCode: "0021110738083352290123776",
+          applicationTime: "2025-02-19 08:31:00",
+        },
+      ],
+      sharingType: [
+        { label: "直接分润", value: "1" },
+        { label: "间接分润", value: "2" },
+      ],
     };
   },
   methods: {
@@ -314,6 +510,17 @@ export default {
         this.getTotal = response.data.total;
       });
     },
+    // 分润流水弹框
+    getProfitSharing(scope) {
+      console.log("点击分润流水", scope);
+      this.profitSharing = true;
+    },
+    // 关闭分润流水弹框
+    turnOffProfitSharing() {
+      this.profitSharing = false;
+			this.orderList = [];
+			
+    },
   },
   created() {
     this.defaultDate();
@@ -325,45 +532,67 @@ export default {
 
 <style lang="scss" scoped>
 .wp {
-  background: #f9fafb;
+  background: #f3f3f3;
   padding: 20px;
   min-height: 100vh;
 }
+
 .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   height: 240px;
+
   h3 {
     margin: 0px;
     margin-bottom: 10px;
   }
+
   .text-gray {
     width: 24.5%;
     height: 100%;
     background: #fff;
     border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     padding: 20px;
+
     div {
       height: 35px;
       display: flex;
       align-items: center;
       justify-content: space-between;
+
       p {
         color: #666;
         font-size: 15px;
       }
+
       span {
         display: block;
         color: #333;
-        font-size: 17px;
+        font-size: 16px;
       }
     }
+
     .concentrate {
       color: #666;
       font-size: 15px;
     }
   }
 }
+
+.inquire {
+  padding: 20px 20px 0 20px;
+  background: #fff;
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.container {
+  padding: 20px;
+  background: #fff;
+  margin-top: 20px;
+}
 </style>