2024.07.31

- 财务明细页增加代金券相关字段显示；

src/views/finance/list/index.vue

@@ -1,42 +1,48 @@
 <template>
-  <div class="finance_page">
+  <div class="app-container">
     <!-- 顶部卡片 -->
-    <div class="topCard">
-      <el-card class="topCard">
-        <div slot="header" class="clearfix">
-          <span class="leftText">财务数据</span>
-          <span class="leftTip">所有交易成功的金额，微信侧将收取6‰的交易手续费</span>
-          <el-button class="rightBtn" type="primary" @click="handleWithdrawal">提现</el-button>
+    <div>
+      <el-card>
+        <div slot="header">
+          <div style="display: flex;align-items: center;justify-content: space-between;">
+            <div>
+              <span style="font-size: 24px;font-weight: bold;color: #333333;">财务数据</span>
+              <span style="font-size: 14px;color: #999999;margin-left: 20px;">
+                所有交易成功的金额，微信侧将收取6‰的交易手续费
+              </span>
+            </div>
+            <el-button type="primary" @click="handleWithdrawal">提现</el-button>
+          </div>
         </div>
         <div>
           <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;">
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
                 {{ 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;">
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
                 {{ 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;">
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
                 {{ 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;">
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
                 {{ 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;">
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
                 {{ financialData.presenterVoucher || '0' }}
               </div>
               <div style="font-size: 16px;color: #333333;">赠送代金券</div>
@@ -51,62 +57,114 @@
                 消费金说明：<br />
                 消费金提现比例：{{ financialData.beeCoinRatio * 100 }}%<br />
                 可提现：客户已支付已核销订单的消费金可提现金额（按照提现比例折算）；<br />
-                待到账冻结：客户已支付未核销订单的消费金支付金额；<br /></div>
+                待到账冻结：客户已支付未核销订单的消费金支付金额；<br />
+              </div>
               <div class="icon">
                 <i class="el-icon-warning-outline" :size="34"></i>
               </div>
             </el-tooltip>
           </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;">
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
                 {{ 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;">
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
                 {{ 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;">
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
                 {{ 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;">
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
                 {{ 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;">
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
                 {{ financialData.withdrawalIn || '0' }}
               </div>
               <div style="font-size: 16px;color: #333333;">提现中</div>
             </div>
           </div>
         </div>
+        <div>
+          <div style="font-size: 18px;font-weight: bold;">代金券相关</div>
+          <div style="display: flex;justify-content: space-around;align-items: center;flex-wrap: wrap;text-align: center;">
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
+                {{ financialData.voucherTurnover || '0' }}
+              </div>
+              <div style="font-size: 16px;color: #333333;">营业额</div>
+            </div>
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
+                {{ financialData.voucherFreeze || '0' }}
+              </div>
+              <div style="font-size: 16px;color: #333333;">待到账冻结</div>
+            </div>
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
+                {{ financialData.voucherWithdrawn || '0' }}
+              </div>
+              <div style="font-size: 16px;color: #333333;">已提现</div>
+            </div>
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
+                {{ financialData.voucherWithdrawalIn || '0' }}
+              </div>
+              <div style="font-size: 16px;color: #333333;">提现中</div>
+            </div>
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
+                {{ financialData.presenterVoucherVoucher || '0' }}
+              </div>
+              <div style="font-size: 16px;color: #333333;">交易金赠送代金券</div>
+            </div>
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
+                {{ financialData.voucherWithdrawal || '0' }}
+              </div>
+              <div style="font-size: 16px;color: #333333;">可提现</div>
+            </div>
+            <div style="padding: 8px;">
+              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 6px;">
+                <span v-if="financialData.voucherCoinRatio">{{ financialData.voucherCoinRatio || '--' }}：1</span>
+                <span v-else>--</span>
+              </div>
+              <div style="font-size: 16px;color: #333333;">提现比例</div>
+            </div>
+          </div>
+        </div>
       </el-card>
     </div>
     <!-- 选项卡 -->
-    <div class="cardList">
+    <div>
       <div class="rightSearch">
-        <el-date-picker v-model="formInline.time" type="month" placeholder="选择日期" value-format="yyyy-MM"
-          @change="getList()" />
+        <el-date-picker
+          v-model="formInline.time" type="month" placeholder="选择日期" value-format="yyyy-MM"
+          @change="getList()"
+        />
       </div>
       <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">
-        <el-table ref="multipleTable" :data="financialData.finances" border
-          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%">
+      <div>
+        <el-table
+          ref="multipleTable" :data="financialData.finances" border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
+        >
           <el-table-column label="日期" width="220">
             <template slot-scope="scope">{{ scope.row.time }}</template>
           </el-table-column>
@@ -128,7 +186,9 @@
         <p class="text_tip">
           <span>提现至：</span>
           <span v-if="Number(privacyTime) === 0">
-            {{ bankDetails.bankCard && bankDetails.bankCard.replace(/\s/g, '').replace(/(\d{4})\d+(\d{4})$/, "$1 **** **** $2") }}
+            {{ 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>
@@ -141,11 +201,13 @@
         </el-form-item>
         <el-form-item label="提现金额" prop="withdrawalMoney">
           <el-col :span="16">
-            <el-input v-model="formData.withdrawalMoney" maxlength="9"
-              :placeholder="`可提现金额：${formData.withdrawalType === 1 ? financialData.withdrawableMoney : formData.withdrawalType === 2 ? financialData.beeWithdrawal : '--'}`" />
+            <el-input
+              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">
-            <span class="sub_text" @click="getAllwithdrawalAmount">全部提现</span>
+            <el-button type="warning" @click="getAllwithdrawalAmount">全部提现</el-button>
           </el-col>
         </el-form-item>
       </el-form>
@@ -185,8 +247,10 @@
         </div>
         <div class="content_table">
           <div class="table">
-            <el-table :data="tableDatas" border :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
-              style="width: 100%">
+            <el-table
+              :data="tableDatas" border :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
+              style="width: 100%"
+            >
               >
               <el-table-column prop="waterType" label="流水类型" />
               <el-table-column prop="orderFormid" label="订单ID" />
@@ -196,10 +260,12 @@
               <el-table-column prop="time" label="入账时间" />
             </el-table>
             <div class="fenye">
-              <el-pagination :current-page="moneyForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
+              <el-pagination
+                :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())" />
+                @current-change="(val) => ((moneyForm.page = val) && getInfo())"
+              />
             </div>
           </div>
         </div>
@@ -234,7 +300,15 @@ export default {
         beeWithdrawal: 0,
         beeFreeze: 0,
         withdrawn: 0,
-        withdrawalIn: 0
+        withdrawalIn: 0,
+        voucherTurnover: 0, // 代金券营业额
+        voucherFreeze: 0, // 代金券支付金额（待到账冻结）
+        voucherWithdrawn: 0, // 代金券支付金额（已提现）
+        voucherWithdrawalIn: 0, // 代金券支付金额（提现中）
+        presenterVoucherVoucher: 0, // 交易金赠送代金券
+        voucherCoinRatio: 0, // 商家代金券提现比例
+        voucherWithdrawal: 0, // 代金券支付金额（可提现）
+        ordersForVoucherWithdrawal: [] // 代金券支付金额（可提现）的相关订单
       },
       formData: {
         withdrawalType: 1,
@@ -249,8 +323,8 @@ export default {
       },
       total: 1,
       rules: {
-        withdrawalType: [{ required: true, message: '请选择提现类型', trigger: 'blur' }],
-        withdrawalMoney: [{ required: true, message: '请输入提现金额', trigger: 'blur' }]
+        withdrawalType: [ { required: true, message: '请选择提现类型', trigger: 'blur' } ],
+        withdrawalMoney: [ { required: true, message: '请输入提现金额', trigger: 'blur' } ]
       },
       formInline: {
         condition: '1', // 时间条件 1-日汇总 2-月汇总
@@ -354,67 +428,33 @@ export default {
 }
 </script>
 
-<style scoped lang='scss'>
-@import url("../../../styles/elDialog.scss");
-
-.finance_page {
-  width: 100%;
-  height: 100%;
-
-  .leftText {
-    font-size: 24px;
-    font-weight: bold;
-    color: #333333;
-  }
-
-  .leftTip {
-    font-size: 14px;
-    color: #999999;
-    margin-left: 20px;
-  }
-
-  .rightBtn {
-    width: 100px;
-    height: 48px;
-    background: #3a68f2;
-    border-radius: 4px;
-    color: #ffffff;
-    float: right;
-  }
-}
-
-.tableBox {
-  padding: 20px;
-}
-
-.cardList {
-  padding-left: 30px;
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
 }
 
 .rightSearch {
-  position: absolute;
-  right: 20px;
-  z-index: 999;
+	position: absolute;
+	right: 20px;
+	z-index: 999;
 }
 
 .text_tip {
-  margin-left: 50px;
-}
-
-.sub_text {
-  cursor: pointer;
+	margin-left: 50px;
 }
 
 .correlation {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 0px;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 10px 0px;
 
-  .icon {
-    color: rgb(255, 174, 17);
-    font-size: 24px;
-    cursor: pointer;
-  }
+	.icon {
+		color: rgb(255, 174, 17);
+		font-size: 24px;
+		cursor: pointer;
+	}
 }
 </style>