From 74cecdc6d1fd56a346a0e79a6b463c9caa755dac Mon Sep 17 00:00:00 2001
From: woody <woody@163>
Date: Fri, 11 Jul 2025 10:17:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(onlinePayDetail):=20=E5=9C=A8=E7=BA=BF?=
 =?UTF-8?q?=E6=94=AF=E4=BB=98=E6=98=8E=E7=BB=86=E6=B7=BB=E5=8A=A0=E8=B4=A6?=
 =?UTF-8?q?=E6=88=B7=E9=87=91=E9=A2=9D=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../financial/onlinePayDetails/index.vue      | 426 ++++++++++--------
 1 file changed, 240 insertions(+), 186 deletions(-)

diff --git a/src/views/financial/onlinePayDetails/index.vue b/src/views/financial/onlinePayDetails/index.vue
index e294a73..cbbca37 100644
--- a/src/views/financial/onlinePayDetails/index.vue
+++ b/src/views/financial/onlinePayDetails/index.vue
@@ -6,228 +6,280 @@
 -->
 <template>
   <div class="page">
-    <topBar v-if="topList.length > 0"
-            :topList="topList"
-            :moren="moren"></topBar>
+    <topBar
+      v-if="topList.length > 0"
+      :top-list="topList"
+      :moren="moren"
+    />
     <div class="main">
-      <el-form ref="select"
-               :model="select"
-               style="background-color: #fff"
-               label-width="100px">
+      <el-form
+        ref="select"
+        :model="select"
+        style="background-color: #fff"
+        label-width="100px"
+      >
         <el-row>
           <!-- 一层 -->
           <el-col :span="4">
             <el-form-item :label="'会员编号'">
-              <el-input clearable
-                        v-model="select.memberCode"></el-input>
+              <el-input
+                v-model="select.memberCode"
+                clearable
+              />
             </el-form-item>
           </el-col>
           <el-col :span="4">
             <el-form-item :label="'会员姓名'">
-              <el-input clearable
-                        v-model="select.memberName"></el-input>
+              <el-input
+                v-model="select.memberName"
+                clearable
+              />
             </el-form-item>
           </el-col>
           <el-col :span="4">
             <el-form-item :label="'交易金额'">
-              <el-input clearable
-                        v-model="select.businessMoney"></el-input>
+              <el-input
+                v-model="select.businessMoney"
+                clearable
+              />
             </el-form-item>
           </el-col>
           <el-col :span="4">
             <el-form-item :label="'交易类型'">
-              <el-select clearable
-                         :placeholder="'请选择'"
-                         v-model="select.businessType">
-                <el-option v-for="item in tradeTypeList"
-                           :key="item.value"
-                           :label="item.label"
-                           :value="item.value"></el-option>
+              <el-select
+                v-model="select.businessType"
+                clearable
+                :placeholder="'请选择'"
+              >
+                <el-option
+                  v-for="item in tradeTypeList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="4">
             <el-form-item :label="'支付渠道'">
-              <el-select clearable
-                         :placeholder="'请选择'"
-                         v-model="select.payChannel">
-                <el-option v-for="item in channelList"
-                           :key="item.value"
-                           :label="item.label"
-                           :value="item.value"></el-option>
+              <el-select
+                v-model="select.payChannel"
+                clearable
+                :placeholder="'请选择'"
+              >
+                <el-option
+                  v-for="item in channelList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="4">
             <el-form-item :label="'支付方式'">
-              <el-select clearable
-                         :placeholder="'请选择'"
-                         v-model="select.payType">
-                <el-option v-for="item in peyTypeList"
-                           :key="item.value"
-                           :label="item.label"
-                           :value="item.value"></el-option>
+              <el-select
+                v-model="select.payType"
+                clearable
+                :placeholder="'请选择'"
+              >
+                <el-option
+                  v-for="item in peyTypeList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="4">
             <el-form-item :label="'支付状态'">
-              <el-select clearable
-                         :placeholder="'请选择'"
-                         v-model="select.payStatus">
-                <el-option v-for="item in statusList"
-                           :key="item.value"
-                           :label="item.label"
-                           :value="item.value"></el-option>
+              <el-select
+                v-model="select.payStatus"
+                clearable
+                :placeholder="'请选择'"
+              >
+                <el-option
+                  v-for="item in statusList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="4">
             <el-form-item :label="'单据编号'">
-              <el-input clearable
-                        v-model="select.businessCode"></el-input>
+              <el-input
+                v-model="select.businessCode"
+                clearable
+              />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item :label="'下单日期'">
-              <el-date-picker v-model="select.creationTime"
-                              value-format="yyyy-MM-dd"
-                              type="daterange"
-                              :range-separator="'至'"
-                              :start-placeholder="'开始日期'"
-                              :end-placeholder="'结束日期'">
-              </el-date-picker>
+              <el-date-picker
+                v-model="select.creationTime"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                :range-separator="'至'"
+                :start-placeholder="'开始日期'"
+                :end-placeholder="'结束日期'"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item :label="'支付日期'">
-              <el-date-picker v-model="select.payTime"
-                              @change="changeTime1"
-                              value-format="yyyy-MM-dd"
-                              type="daterange"
-                              :range-separator="'至'"
-                              :start-placeholder="'开始日期'"
-                              :end-placeholder="'结束日期'">
-              </el-date-picker>
+              <el-date-picker
+                v-model="select.payTime"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                :range-separator="'至'"
+                :start-placeholder="'开始日期'"
+                :end-placeholder="'结束日期'"
+                @change="changeTime1"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="4">
-            <el-button class="my_search"
-                       style="margin-left: 30px"
-                       @click="getDataList"> {{ '搜索' }}</el-button>
+            <el-button
+              class="my_search"
+              style="margin-left: 30px"
+              @click="getDataList"
+            > {{ '搜索' }}</el-button>
             <el-button class="my_reset" @click="reset"> {{ '重置' }}</el-button>
           </el-col>
         </el-row>
       </el-form>
       <div class="maintop">
         <div class="mainbtn">
-          <el-button size="small"
-                     @click="handleExport"
-                     v-has-buttons="['OnlinePayDetailsExport']"
-                     class="thebtn2"> {{ '导出' }}</el-button>
+          <el-button
+            v-has-buttons="['OnlinePayDetailsExport']"
+            size="small"
+            class="thebtn2"
+            @click="handleExport"
+          > {{ '导出' }}</el-button>
         </div>
       </div>
       <div class="maintable">
-        <el-table :data="tableData"
-                  height="640px"
-                  style="width: 100%"
-                  :header-cell-style="{ background: '#EEEEEE' }"
-                  :row-class-name="tableRowClassName"
-                  @selection-change="handleSelectionChange">
-          <el-table-column type="selection"
-                           width="55"> </el-table-column>
-<!--          <el-table-column align="center"-->
-<!--                           prop="title"-->
-<!--                           :label="'国家'">-->
-<!--            <template slot-scope="scope">-->
-<!--              <div class="tem">-->
-<!--                <img :src="scope.row.pkCountryIcon"-->
-<!--                     alt="" />-->
-<!--                &lt;!&ndash; <div>{{ scope.row.pkCountryName }}</div> &ndash;&gt;-->
-<!--              </div>-->
-<!--            </template>-->
-<!--          </el-table-column>-->
-          <el-table-column align="center"
-                           prop="memberCode"
-                           :label="'会员编号'"
-                           width="140">
-          </el-table-column>
-          <el-table-column align="center"
-                           prop="memberName"
-                           :label="'会员姓名'">
-          </el-table-column>
-          <el-table-column align="center"
-                           prop="phone"
-                           label="联系方式"
-                           width="140">
-          </el-table-column>
-          <el-table-column align="center"
-                           prop="businessTypeVal"
-                           :label="'交易类型'">
-          </el-table-column>
-          <el-table-column align="center"
-                           prop="businessMoney"
-                           :formatter="stateFormat"
-                            :label="'交易金额'+`(${isLocalSymbol()})`"
-                           width="150">
-          </el-table-column>
-          <el-table-column align="center"
-                           prop="payMoney"
-                           :formatter="stateFormat"
-                           label="实际支付金额(¥)"
-                           width="150">
-          </el-table-column>
-          <!-- <el-table-column align="center"
-                           prop="payMoney"
-                           :formatter="stateFormat"
-                            :label="'交易金额'+`(${isLocals()})`" width="150">
-          </el-table-column>
-          <el-table-column align="center"
-                           :formatter="stateFormat"
-                           prop="settleTradeBalance"
-                           label="实际支付金额($)" width="150">
-          </el-table-column>
-          <el-table-column align="center"
-                           prop="exchangeRate"
-                            :label="'汇率'">
-          </el-table-column> -->
+        <el-table
+          :data="tableData"
+          height="640px"
+          style="width: 100%"
+          :header-cell-style="{ background: '#EEEEEE' }"
+          :row-class-name="tableRowClassName"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column
+            type="selection"
+            width="55"
+          />
+          <!--          <el-table-column align="center"-->
+          <!--                           prop="title"-->
+          <!--                           :label="'国家'">-->
+          <!--            <template slot-scope="scope">-->
+          <!--              <div class="tem">-->
+          <!--                <img :src="scope.row.pkCountryIcon"-->
+          <!--                     alt="" />-->
+          <!--                &lt;!&ndash; <div>{{ scope.row.pkCountryName }}</div> &ndash;&gt;-->
+          <!--              </div>-->
+          <!--            </template>-->
+          <!--          </el-table-column>-->
+          <el-table-column
+            align="center"
+            prop="memberCode"
+            :label="'会员编号'"
+            width="140"
+          />
+          <el-table-column
+            align="center"
+            prop="memberName"
+            :label="'会员姓名'"
+          />
+          <el-table-column
+            align="center"
+            prop="phone"
+            label="联系方式"
+            width="140"
+          />
+          <el-table-column
+            align="center"
+            prop="businessTypeVal"
+            :label="'交易类型'"
+          />
+          <el-table-column
+            align="center"
+            prop="businessMoney"
+            :formatter="stateFormat"
+            :label="'交易金额'"
+            width="150"
+          />
+          <el-table-column
+            align="center"
+            prop="payMoney"
+            :formatter="stateFormat"
+            label="实际支付金额"
+            width="150"
+          />
 
-          <el-table-column align="center"
-                           prop="payChannelVal"
-                           :label="'支付渠道'">
-          </el-table-column>
-          <el-table-column align="center"
-                           prop="payTypeVal"
-                           :label="'支付方式'">
-          </el-table-column>
-          <el-table-column align="center"
-                           prop="payStatusVal"
-                           :label="'支付状态'">
-          </el-table-column>
-          <el-table-column align="center"
-                           prop="creationTime"
-                           :label="'下单日期'"
-                           width="180">
-          </el-table-column>
-          <el-table-column align="center"
-                           prop="payTime"
-                           :label="'支付日期'"
-                           width="180">
-          </el-table-column>
-          <el-table-column align="center"
-                           prop="businessCode"
-                           min-width="180px"
-                           :label="'单据编号'">
-          </el-table-column>
-          <el-table-column align="center"
-                           prop="time"
-                           :label="'操作'"
-                           fixed="right">
+          <el-table-column
+            align="center"
+            prop="payChannelVal"
+            :label="'支付渠道'"
+          />
+          <el-table-column
+            align="center"
+            prop="payTypeVal"
+            :label="'支付方式'"
+          />
+          <el-table-column
+            align="center"
+            prop="payStatusVal"
+            :label="'支付状态'"
+          />
+          <el-table-column
+            align="center"
+            prop="creationTime"
+            :label="'下单日期'"
+            width="180"
+          />
+          <el-table-column
+            align="center"
+            prop="payTime"
+            :label="'支付日期'"
+            width="180"
+          />
+          <el-table-column
+            align="center"
+            prop="businessCode"
+            min-width="180px"
+            :label="'单据编号'"
+          />
+          <el-table-column
+            align="center"
+            prop="mainAccountMoney"
+            label="主账户金额"
+            width="150"
+          />
+          <el-table-column
+            align="center"
+            prop="subAccountMoney"
+            label="子账户金额"
+            width="150"
+          />
+          <el-table-column
+            align="center"
+            prop="time"
+            :label="'操作'"
+            fixed="right"
+          >
             <template slot-scope="scope">
-              <el-button @click="toFixed(scope.row.pkId)"
-                         style="color: #ffad41"
-                         type="text"
-                         size="small">
+              <el-button
+                style="color: #ffad41"
+                type="text"
+                size="small"
+                @click="toFixed(scope.row.pkId)"
+              >
                 {{ '导出' }}
               </el-button>
             </template>
@@ -235,11 +287,13 @@
         </el-table>
       </div>
     </div>
-    <pagination v-show="total>0"
-                :total="total"
-                :page.sync="queryParams.pageNum"
-                :limit.sync="queryParams.pageSize"
-                @pagination="getDataList" />
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getDataList"
+    />
   </div>
 </template>
 
@@ -251,16 +305,16 @@ import { userCountryList } from '@/api/user'
 export default {
   name: 'Bzpz',
   components: {
-    topBar,
+    topBar
   },
   filters: {
-     isAgree(val) {
+    isAgree(val) {
       if (!val) {
-        return '允许';
+        return '允许'
       } else {
-        return '禁止';
+        return '禁止'
       }
-    },
+    }
   },
   data() {
     return {
@@ -269,7 +323,7 @@ export default {
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 50,
+        pageSize: 50
       },
       total: 0,
       dialogVisible: false,
@@ -280,26 +334,26 @@ export default {
       peyTypeList: [
         {
           value: '1',
-          label: '支付宝',
+          label: '支付宝'
         },
         {
           value: '2',
-          label: '微信',
+          label: '微信'
         },
         {
           value: '3',
-          label: '银行卡',
-        },
+          label: '银行卡'
+        }
       ],
       tradeTypeList: [],
       moren: 'onlinePayDetails',
       topList: [
         {
           name: '在线支付明细',
-          path: 'onlinePayDetails',
-        },
+          path: 'onlinePayDetails'
+        }
       ],
-      countryList: [],
+      countryList: []
     }
   },
   mounted() {
@@ -329,7 +383,7 @@ export default {
       // this.select.startDate = val[0]
       // this.select.endDate = val[1]
     },
-    reset(){
+    reset() {
       this.select = {}
       this.getDataList()
     },
@@ -359,10 +413,10 @@ export default {
     handleSelectionChange(val) {},
     /** 导出按钮操作 */
     handleExport() {
-      this.$confirm( '是否确认导出所有数据项?', '警告', {
+      this.$confirm('是否确认导出所有数据项?', '警告', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        type: 'warning',
+        type: 'warning'
       }).then((_) => {
         this.download(
           '/pay/manage/online-payment/export',
@@ -378,8 +432,8 @@ export default {
         return 'success-row'
       }
       return ''
-    },
-  },
+    }
+  }
 }
 </script>
 <style scoped lang="scss">