收支统计渲染

src/router/index.js

@@ -359,6 +359,14 @@ const routes = [{
       breadcrumbParent: '收支统计' // 手动指定父级
     }
   },
+  {
+    path: '/agent/recharge',
+    name: '账号充值',
+    component: () => import( /* webpackChunkName: "statisticalDetails" */ '../views/agent/recharge.vue'),
+    meta: {
+      hideBreadcrumb: true // 一级页面不显示面包屑
+    }
+  },
 
 
   // -----------------分隔符-----------

src/views/agent/expenseStatistics.vue

@@ -135,7 +135,7 @@
                     </el-table-column>
                     <el-table-column prop="profit" label="利润" min-width="110px">
                         <template slot-scope="scope">
-                            <div class="flex">
+                            <div class="flex" :class="scope.row.profit<0?'red':''">
                                 {{ scope.row.profit ? scope.row.profit : '-' }}
                             </div>
                         </template>
@@ -401,6 +401,10 @@ export default {
 .loss-profit{
     color: #FF4D4F;
 }
+.red{
+  color: #FF4D4F;
+}
+
 .expense-wrap{
     .pagetitle {
         text-align: left;

src/views/agent/recharge.vue

@@ -0,0 +1,296 @@
+<template>
+    <div class="main-content12 expense-wrap">
+        <h3 class="pagetitle">余额管理</h3>
+        <div class="flex-common">
+            <div class="flex-between">
+                <el-tabs v-model="totalType" @tab-click="handleClick">
+                    <el-tab-pane label="余额充值" name="1"></el-tab-pane>
+                    <el-tab-pane label="充值记录" name="2"></el-tab-pane>
+                    <el-tab-pane label="退款记录" name="3"></el-tab-pane>
+                </el-tabs>
+                <div class="flex">
+                </div>
+            </div>
+            <div class="mt24">
+                <div class="flex-between w552 mt12">
+                    <div class="wallet-choose">充值选择</div>
+                    <div class="wallet-desc flex">设置通用余额提醒，防止余额不足，点此设置<img style="width: 14px" src="@/assets/input_ex_ic.png"/></div>
+                </div>
+
+                <div class="flex gap24">
+                    <div class="wallet-item wallet-item-active">
+                        <div class="wallet-name">通用钱包</div>
+                        <div class="wallet-num">当前余额<span class="wallet-price">4560</span>元</div>
+                    </div>
+                    <div class="wallet-item">
+                        <div class="wallet-name">通用钱包</div>
+                        <div class="wallet-num">当前余额<span class="wallet-price">4560</span>元</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+
+export default {
+    components: {
+
+    },
+    props: {
+        total_type: {
+            type: String,
+            default: '1'
+        },
+    },
+    data() {
+        return {
+            totalType:'1',
+            date: this.getNow(),
+            tableLoading:false,
+
+            walletList:[],
+
+
+            siteNum: 1,
+            tableKey: '',
+            monthList:[],
+            monthTotal:[],
+            payList:[],
+            nameList:[],
+            topList:[],
+        }
+    },
+    mounted() {
+        this.$nextTick(()=>{
+            this.totalType = this.total_type;
+
+            this.handleClick()
+        })
+    },
+    methods: {
+        handleClickDetail(id){
+            if(this.totalType == 2) this.$router.push(`/agent/statisticalDetails?uid=${id}&total_type=${this.totalType}&date=${this.date}`)
+            if(this.totalType == 3) this.$router.push(`/agent/statisticalDetails?chktype=${id}&total_type=${this.totalType}&date=${this.date}`)
+        },
+        handleClicksiteRank(id){
+            this.$router.push(`/agent/siteRank?id=${id}&total_type=${this.totalType}&date=`+this.date)
+        },
+        handleClickserviceRank(id){
+            this.$router.push(`/agent/serviceRank?id=${id}&total_type=${this.totalType}&date=`+this.date)
+        },
+        handleClick(){
+            this.monthList = []
+            this.payList = []
+            this.monthTotal = []
+            this.nameList = []
+            this.topList = []
+            this.tableKey = Math.random();
+            if(this.totalType == 1) this.getRechargeData()
+            if(this.totalType == 2) this.getSiteStats()
+            if(this.totalType == 3) this.getChktypeStats()
+        },
+        getRechargeData() {
+            try {
+                this.$http('POST', '/agentnew/ajax_get_recharge_data', {date: this.date}).then(response => {
+                    this.$nextTick(() => {
+                        this.walletList = response.data
+                        console.log(response)
+                    })
+                }).catch(error => {
+                    console.error(error, 'error')
+                })
+            } catch (error) {
+                console.error('数据加载失败:', error)
+            }
+        },
+        getSiteStats() {
+            this.tableLoading = true
+            try {
+                this.$http('POST', '/agentnew/ajax_get_site_stats', {date: this.date}).then(response => {
+                    this.tableLoading = false
+                    this.$nextTick(() => {
+                        this.monthList = response.data.list
+                        this.payList = response.data.pay_list
+                        this.monthTotal = response.data.total
+                        this.nameList = response.data.name_list
+                        this.topList = response.data.top_list
+                    })
+                }).catch(error => {
+                    console.error(error, 'error')
+                })
+            } catch (error) {
+                console.error('数据加载失败:', error)
+            } finally {
+                this.tableLoading = false
+            }
+        },
+        getChktypeStats() {
+            this.tableLoading = true
+            try {
+                this.$http('POST', '/agentnew/ajax_get_chktype_stats', {date: this.date}).then(response => {
+                    this.tableLoading = false
+                    this.$nextTick(() => {
+                        this.monthList = response.data.list
+                        this.payList = response.data.pay_list
+                        this.monthTotal = response.data.total
+                        this.nameList = response.data.name_list
+                        this.topList = response.data.top_list
+                    })
+                }).catch(error => {
+                    console.error(error, 'error')
+                })
+            } catch (error) {
+                console.error('数据加载失败:', error)
+            } finally {
+                this.tableLoading = false
+            }
+        },
+    }
+}
+
+</script>
+<style lang="scss" scoped>
+.w552{
+  width: 552px;
+  letter-spacing: 0.08em;
+}
+.wallet-choose{
+  font-size: 14px;
+  color: #1E2226;
+}
+.wallet-desc{
+  font-size: 12px;
+  color: #8A9099;
+}
+.wallet-item{
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    text-align: left;
+    padding: 16px 18px;
+    width: 264px;
+    letter-spacing: 0.08em;
+    border-radius: 8px;
+    background: #F2F7FF;
+
+    .wallet-name{
+      color: #006AFF;
+      font-size: 14px;
+      font-weight: bold;
+    }
+    .wallet-num{
+      font-size: 12px;
+      color: #626573;
+    }
+    .wallet-price{
+      font-size: 22px;
+      font-weight: bold;
+      color: #626573;
+    }
+}
+
+.wallet-item-active{
+  background: #F2F7FF;
+}
+
+.gap24 {
+  gap: 24px;
+  width: 100%;
+  align-items: stretch;
+}
+
+::v-deep .el-table__footer-wrapper tbody td.el-table__cell {
+  background-color: #E8F0FE; /* 背景色 */
+  color: #006AFF; /* 文字颜色 */
+  font-weight: 600;
+}
+
+.loss-profit{
+    color: #FF4D4F;
+}
+.red{
+  color: #FF4D4F;
+}
+
+.expense-wrap{
+    .pagetitle {
+        text-align: left;
+        font-size: 16px;
+        font-weight: bold;
+        line-height: normal;
+        letter-spacing: 0.08em;
+        color: #1E2226;
+        margin-top: 8px;
+    }
+    .monthTotal-wrap{
+        display: grid;
+        grid-gap: 12px;
+        grid-template-columns: repeat(auto-fit, 287px);
+    }
+
+    .loss-tip{
+        width: 50px;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        border-radius: 4px;
+        background: #FFF1F0;
+        box-sizing: border-box;
+        border: 1px solid #FFA39E;
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 20px;
+        text-align: center;
+        letter-spacing: 0.08em;
+        color: #FF4D4F;
+    }
+    .loss-tip-empty{
+        width: 50px;
+        height: 24px;
+        display: flex;
+    }
+    .total-item{
+        padding: 14px 16px;
+        font-size: 12px;
+        letter-spacing: 0.03em;
+        color: #23242B;
+        box-sizing: border-box;
+        border-radius: 4px;
+        background: #F2F7FF;
+        min-height: 153px;
+        .price{
+            text-align: left;
+            font-size: 12px;
+            font-weight: normal;
+            line-height: 15px;
+            letter-spacing: 0.08em;
+            color: #1E2226;
+            margin: 14px 0;
+            b{
+                font-size: 22px;
+                line-height: 20px;
+                letter-spacing: normal;
+            }
+        }
+        .total-bottom{
+            align-items: flex-start;
+        }
+    }
+    .loss{
+        background: #FFF1F0;
+        .top-left b{
+            color: #FF4D4F;
+        }
+    }
+    .gain{
+        background: #EFFFE0;
+        .top-left b{
+            color: #00C261;
+        }
+    }
+}
+</style>

src/views/agent/statisticalDetails.vue

@@ -296,6 +296,11 @@ export default {
 
 </script>
 <style lang="scss" scoped>
+::v-deep .el-table__footer-wrapper tbody td.el-table__cell {
+  background-color: #E8F0FE; /* 背景色 */
+  color: #006AFF; /* 文字颜色 */
+  font-weight: 600;
+}
 .el-form-item{
     margin-bottom: 0 !important;
 }