kuailelunwen_new_houtai/src/views/agent/recharge.vue

<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">
                    <div class="wallet-choose">充值选择</div>
                    <div class="wallet-desc flex">设置通用余额提醒，防止余额不足，点此设置<img style="width: 14px" src="@/assets/input_ex_ic.png"/></div>
                </div>

                <el-form class="el-row demo-ruleForm" ref="formRef">
                    <div class="flex gap24 mt12">
                        <div class="wallet-item wallet-item-active">
                            <img src="@/assets/site/tem-active.svg" class="tem-active" alt="">
                            <div class="wallet-name">通用钱包</div>
                            <div class="wallet-num">当前余额<span class="wallet-price">4560</span>元</div>
                        </div>
                        <div class="wallet-item">
    <!--                        <img src="@/assets/site/tem-active.svg" class="tem-active" alt="">-->
                            <div class="wallet-name">通用钱包</div>
                            <div class="wallet-num">当前余额<span class="wallet-price">4560</span>元</div>
                        </div>
                    </div>
                    <div class="flex-between w552 mt24">
                        <div class="wallet-choose">充值卡面值</div>
                    </div>

                    <div class="flex mt12">
                        <GuipRadio v-model="domain_type" :options="domain_types"/>
                    </div>
                    <div class="buy-btn flex mt12">
                        <img src="@/assets/site/tb_buy_btn.svg" alt="">跳转淘宝购买
                    </div>
                    <div class="buy-desc flex mt12">
                        充值以本页跳转链接为准！淘宝交易服务费（0.6%）已由平台承担，暂时无需支付
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>


import GuipRadio from "@/components/GuipRadio.vue";

export default {
    components: {
        GuipRadio

    },
    props: {
        total_type: {
            type: String,
            default: '1'
        },
    },
    data() {
        return {
            totalType:'1',
            tableLoading:false,

            walletList:[],


            siteNum: 1,
            tableKey: '',
            monthList:[],
            monthTotal:[],
            payList:[],
            nameList:[],
            topList:[],

            domain_type: 1,
            domain_types: {1: "平台免费域名", 2: "我自己有域名"},
        }
    },
    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: #F6F7FA;
    box-sizing: border-box;

    .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{
  position: relative;
  background: #F2F7FF;
  .tem-active{
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
  }
}

.gap24 {
  gap: 24px;
  width: 100%;
  align-items: stretch;
}

.buy-btn{
  font-size: 12px;
  width: 139px;
  color: #006AFF;
  letter-spacing: 0.08em;
  padding: 9px 16px;
  gap: 6px;
  border-radius: 4px;
  border: 1px solid #006AFF;
  box-sizing: border-box;
}

.buy-desc{
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #006AFF;
}


::v-deep .el-form-item {
  margin: 0;
}
</style>