2024.05.02

- 优化财务明细页逻辑；

src/views/finance/list/index.vue

@@ -12,23 +12,33 @@
           <div style="font-size: 18px;font-weight: bold;">基本数据</div>
           <div style="display: flex;justify-content: space-around;align-items: center;text-align: center;">
             <div style="padding: 16px;">
-              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">{{ financialData.turnover || '0' }}</div>
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
+                {{ financialData.turnover || '0' }}
+              </div>
               <div style="font-size: 16px;color: #333333;">累计营业额（元）</div>
             </div>
             <div style="padding: 16px;">
-              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">{{ financialData.frozenMoney || '0' }}</div>
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
+                {{ financialData.frozenMoney || '0' }}
+              </div>
               <div style="font-size: 16px;color: #333333;">冻结金额（元）</div>
             </div>
             <div style="padding: 16px;">
-              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">{{ financialData.withdrawableMoney || '0' }}</div>
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
+                {{ financialData.withdrawableMoney || '0' }}
+              </div>
               <div style="font-size: 16px;color: #333333;">可提现金额（元）</div>
             </div>
             <div style="padding: 16px;">
-              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">{{ financialData.withdrawableStayMoney || '0' }}</div>
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
+                {{ financialData.withdrawableStayMoney || '0' }}
+              </div>
               <div style="font-size: 16px;color: #333333;">提现中（元）</div>
             </div>
             <div style="padding: 16px;">
-              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">{{ financialData.presenterVoucher || '0' }}</div>
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
+                {{ financialData.presenterVoucher || '0' }}
+              </div>
               <div style="font-size: 16px;color: #333333;">赠送代金券</div>
             </div>
           </div>
@@ -37,23 +47,33 @@
           <div style="font-size: 18px;font-weight: bold;">交易金相关</div>
           <div style="display: flex;justify-content: space-around;align-items: center;text-align: center;">
             <div style="padding: 16px;">
-              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">{{ financialData.beeTurnover || '0' }}</div>
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
+                {{ financialData.beeTurnover || '0' }}
+              </div>
               <div style="font-size: 16px;color: #333333;">营业额</div>
             </div>
             <div style="padding: 16px;">
-              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">{{ financialData.beeWithdrawal || '0' }}</div>
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
+                {{ financialData.beeWithdrawal || '0' }}
+              </div>
               <div style="font-size: 16px;color: #333333;">可提现</div>
             </div>
             <div style="padding: 16px;">
-              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">{{ financialData.beeFreeze || '0' }}</div>
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
+                {{ financialData.beeFreeze || '0' }}
+              </div>
               <div style="font-size: 16px;color: #333333;">待到账冻结</div>
             </div>
             <div style="padding: 16px;">
-              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">{{ financialData.withdrawn || '0' }}</div>
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
+                {{ financialData.withdrawn || '0' }}
+              </div>
               <div style="font-size: 16px;color: #333333;">已提现</div>
             </div>
             <div style="padding: 16px;">
-              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">{{ financialData.withdrawalIn || '0' }}</div>
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
+                {{ financialData.withdrawalIn || '0' }}
+              </div>
               <div style="font-size: 16px;color: #333333;">提现中</div>
             </div>
           </div>
@@ -65,12 +85,13 @@
       <div class="rightSearch">
         <el-date-picker
           v-model="formInline.time" type="month" placeholder="选择日期" value-format="yyyy-MM"
-          @change="changeDate"
+          @change="getList()"
         />
       </div>
-      <el-tabs v-model="formInline.condition" @tab-click="handleClick">
+      <el-tabs v-model="formInline.condition" @tab-click="getList()">
         <el-tab-pane label="日汇款" name="1" />
         <el-tab-pane label="月汇款" name="2" />
+        <!-- <el-tab-pane label="交易金流水" name="3" /> -->
       </el-tabs>
       <!-- 表格 -->
       <div class="tableBox">
@@ -95,15 +116,17 @@
     </div>
 
     <el-dialog title="提现" :visible.sync="isVisible" width="50%">
-      <el-form v-if="show" ref="form" :model="form" label-width="120px" size="small" :rules="rules">
+      <el-form v-if="show" ref="formData" :model="formData" label-width="120px" size="small" :rules="rules">
         <p class="text_tip">
-          <span>提现至:</span>
-          <span v-if="Number(privacyTime) === 0">{{ hidden(getDetails.bankCard, 3, 4) }}</span>
-          <span v-else>{{ getDetails.bankCard }}</span>
-          <span style="margin-left: 40px;">{{ getDetails.bankName }}</span>
+          <span>提现至：</span>
+          <span v-if="Number(privacyTime) === 0">
+            {{ bankDetails.bankCard && bankDetails.bankCard.replace(/\s/g, '').replace(/(\d{4})\d+(\d{4})$/, "$1 **** **** $2") }}
+          </span>
+          <span v-else>{{ bankDetails.bankCard }}</span>
+          <span style="margin-left: 40px;">{{ bankDetails.bankName }}</span>
         </p>
         <el-form-item label="提现类型" prop="withdrawalType">
-          <el-radio-group v-model="form.withdrawalType">
+          <el-radio-group v-model="formData.withdrawalType">
             <el-radio :label="1">正常支付订单</el-radio>
             <el-radio :label="2">交易金</el-radio>
           </el-radio-group>
@@ -111,8 +134,8 @@
         <el-form-item label="提现金额" prop="withdrawalMoney">
           <el-col :span="16">
             <el-input
-              v-model="form.withdrawalMoney" maxlength="9"
-              :placeholder="`可提现金额：${form.withdrawalType === 1 ? financialData.withdrawableMoney : form.withdrawalType === 2 ? financialData.beeWithdrawal : '--'}`"
+              v-model="formData.withdrawalMoney" maxlength="9"
+              :placeholder="`可提现金额：${formData.withdrawalType === 1 ? financialData.withdrawableMoney : formData.withdrawalType === 2 ? financialData.beeWithdrawal : '--'}`"
             />
           </el-col>
           <el-col :span="6" style="text-align:center">
@@ -130,7 +153,7 @@
     <el-dialog title="账单详情" :visible.sync="moneydio" width="80%">
       <div class="content">
         <div class="toolbar">
-          <el-form :inline="true" :model="moneyForm">
+          <el-form inline :model="moneyForm">
             <el-form-item label="汇总日期时间">
               <el-date-picker v-model="moneyForm.time" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
             </el-form-item>
@@ -150,7 +173,7 @@
               </el-select>
             </el-form-item>
             <el-form-item label-width="0">
-              <el-button type="primary" plain @click="search">查询</el-button>
+              <el-button type="primary" plain @click="getInfo">查询</el-button>
             </el-form-item>
           </el-form>
         </div>
@@ -170,9 +193,10 @@
             </el-table>
             <div class="fenye">
               <el-pagination
-                :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
-                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
+                :current-page="moneyForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
+                layout="total, sizes, prev, pager, next, jumper" :total="total"
+                @size-change="(val) => ((moneyForm.pageSize = val) && getInfo())"
+                @current-change="(val) => ((moneyForm.page = val) && getInfo())"
               />
             </div>
           </div>
@@ -210,7 +234,7 @@ export default {
         withdrawn: 0,
         withdrawalIn: 0
       },
-      form: {
+      formData: {
         withdrawalType: 1,
         withdrawalMoney: ''
       },
@@ -222,7 +246,6 @@ export default {
         pageSize: 10
       },
       total: 1,
-      currentPage: 1,
       rules: {
         withdrawalType: [ { required: true, message: '请选择提现类型', trigger: 'blur' } ],
         withdrawalMoney: [ { required: true, message: '请输入提现金额', trigger: 'blur' } ]
@@ -233,71 +256,48 @@ export default {
       },
       tableDatas: [],
       isVisible: false,
-      getDetails: [ {} ],
+      bankDetails: {},
       show: false,
       privacyTime: 0
     }
   },
   created() {
-    this.getAll(this.formInline)
-    this.getBankType()
     this.privacyTime = localStorage.getItem('privacyTime')
+    this.getList()
   },
   methods: {
-    handleSizeChange(val) {
-      this.moneyForm.pageSize = val
-      this.getAlls()
-    },
-    handleCurrentChange(val) {
-      this.moneyForm.page = val
-      this.getAlls()
-    },
-    handleClick(tab, event) {
-      console.log(tab, event)
-      this.formInline.type = tab.name
-      this.getAll(this.formInline)
-    },
-    changeDate() {
-      this.getAll(this.formInline)
-    },
-    search() {
-      this.total = 1
-      this.formInline.page = 1
-      this.getAlls()
-    },
-    // 查看
     seeMore(row) {
       this.moneydio = true
       this.moneyForm.time = row.time
       this.moneyForm.page = 1
-      this.tableDatas = []
       this.total = 1
-      this.getAlls()
+      this.tableDatas = []
+      this.getInfo()
     },
     // 提现
     async handleWithdrawal() {
       this.isVisible = true
-      this.form.withdrawalMoney = ''
+      this.formData.withdrawalMoney = ''
       // const res = await getWithdrawalDetails(this.formInline);
       const res = await getBank({})
       if (JSON.stringify(res.data) === '{}') {
         this.show = false
       } else {
         this.show = true
-        this.getDetails = res.data
+        this.bankDetails = res.data
       }
     },
     // 提现确定
     async handleConfirm() {
       if (this.show) {
-        if (this.form.withdrawalMoney <= 0) {
+        if (this.formData.withdrawalMoney <= 0) {
           this.$message({
             message: '请输入正确的提现金额',
             type: 'warning'
           })
           return false
         }
-        if (!this.form.withdrawalType) {
+        if (!this.formData.withdrawalType) {
           this.$message({
             message: '请选择提现类型',
             type: 'warning'
@@ -305,13 +305,13 @@ export default {
           return false
         }
         const res = await withdrawal({
-          shopName: this.getDetails.shopName, // 店铺名称
-          shopCode: this.getDetails.shopCode, // 店铺编码
-          bankName: this.getDetails.bankName, // 银行名称
-          bankCard: this.getDetails.bankCard, // 银行卡号
-          collectionName: this.getDetails.collectionName, // 收款人姓名
-          withdrawalType: this.form.withdrawalType, // 提现类型
-          withdrawalMoney: this.form.withdrawalMoney // 提现金额
+          shopName: this.bankDetails.shopName, // 店铺名称
+          shopCode: this.bankDetails.shopCode, // 店铺编码
+          bankName: this.bankDetails.bankName, // 银行名称
+          bankCard: this.bankDetails.bankCard, // 银行卡号
+          collectionName: this.bankDetails.collectionName, // 收款人姓名
+          withdrawalType: this.formData.withdrawalType, // 提现类型
+          withdrawalMoney: this.formData.withdrawalMoney // 提现金额
         })
         if (res.code === '') {
           this.$message({
@@ -329,44 +329,24 @@ export default {
     },
     // 全部提现
     getAllwithdrawalAmount() {
-      if (this.form.withdrawalType === 1) {
-        this.form.withdrawalMoney = this.financialData.withdrawableMoney || 0
-      } else if (this.form.withdrawalType === 2) {
-        this.form.withdrawalMoney = this.financialData.beeWithdrawal || 0
+      if (this.formData.withdrawalType === 1) {
+        this.formData.withdrawalMoney = this.financialData.withdrawableMoney || 0
+      } else if (this.formData.withdrawalType === 2) {
+        this.formData.withdrawalMoney = this.financialData.beeWithdrawal || 0
       }
     },
     // 初始化查询所有数据
-    async getAll(formInline) {
-      const res = await getFinanceCount(formInline)
-      if (res.code === '') {
-        this.financialData = res.data
-      }
+    async getList() {
+      const res = await getFinanceCount(this.formInline)
+      if (res.code === '') this.financialData = res.data
     },
     // 查询明细
-    async getAlls() {
+    async getInfo() {
       const res = await getDetails(this.moneyForm)
       if (res.code === '') {
         this.tableDatas = res.data.list
         this.total = res.data.total
       }
-    },
-    // 查询是否绑定银行卡
-    async getBankType() { },
-    // 中间部分
-    hidden(str, frontLen, endLen) {
-      let endLenData = 0
-      if (str.length !== 2) {
-        endLenData = endLen
-      }
-      const len = str.length - frontLen - endLenData
-      let xing = ''
-      for (let i = 0; i < len; i++) {
-        xing += '*'
-      }
-      return (
-        str.substring(0, frontLen) + xing + str.substring(str.length - endLenData)
-      )
-      // return str
     }
   }
 }