余额管理

src/views/agent/recharge.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="main-content12 expense-wrap">
+    <div class="main-content12 recharge-wrap">
         <h3 class="pagetitle">余额管理</h3>
         <div class="flex-common">
             <div class="flex-between">
@@ -11,40 +11,112 @@
                 <div class="flex">
                 </div>
             </div>
-            <div class="mt24">
+            <div class="mt24" v-if="totalType == '1'">
                 <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 class="wallet-desc flex" v-if="prompt" @click="jumpLink(prompt_link)">{{prompt}}<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">
+                        <template v-for="item in walletList">
-                            <img src="@/assets/site/tem-active.svg" class="tem-active" alt="">
+                            <div :key="item.type" class="wallet-item" :class="walletType == item.type ? 'wallet-item-active' : ''" @click="walletClick(item.type)">
-                            <div class="wallet-name">通用钱包</div>
+                                <img src="@/assets/site/tem-active.svg" class="tem-active" alt="" v-if="walletType == item.type">
-                            <div class="wallet-num">当前余额<span class="wallet-price">4560</span>元</div>
+                                <div class="wallet-name">{{item.name}}</div>
-                        </div>
+                                <div class="wallet-num">当前余额<span class="wallet-price">{{item.remain_money}}</span>元</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>
+                        </template>
                     </div>
+
+                    <div class="buy-area">
                         <div class="flex-between w552 mt24">
                             <div class="wallet-choose">充值卡面值</div>
                         </div>
-
+                        <div class="flex-between buy-bonus w552 mt12" v-show="Object.keys(bonus).length>0">
-                    <div class="flex mt12">
+                            <img src="@/assets/site/recharge_bonus.png" alt="">
-                        <GuipRadio v-model="domain_type" :options="domain_types"/>
+                            <div class="buy-bonus-info">
+                                <div class="flex" v-for="(value, key) in bonus" :key="key">
+                                    <span>充<b>{{key}}</b>元</span><span>送<b class="red">{{value}}</b>元</span>
+                                </div>
+                            </div>
                         </div>
-                    <div class="buy-btn flex mt12">
+                        <div class="flex mt12" v-if="Object.keys(buy_price_types).length>0">
+                            <GuipRadio v-model="buy_price_type" :options="buy_price_types" @change="buyLinkClick()"/>
+                        </div>
+                        <div class="buy-btn flex mt12" v-if="buy_price_link" @click="jumpLink(buy_price_link)">
                             <img src="@/assets/site/tb_buy_btn.svg" alt="">跳转淘宝购买
                         </div>
-                    <div class="buy-desc flex mt12">
+                        <div class="buy-desc flex mt12" v-if="links_desc">{{links_desc}}</div>
-                        充值以本页跳转链接为准！淘宝交易服务费（0.6%）已由平台承担，暂时无需支付
+
+                        <hr class="buy-hr">
+
+                        <div class="buy-recharge flex gap12">
+                            <GuipInput ref="GuipInput" v-model="ordernum" class="w443" column="column" prop="age" placeholder="请输入淘宝订单号" />
+                            <GuipButton @click="doRecharge()">现在充值</GuipButton>
+                        </div>
+
+                        <div class="buy-info">
+                            <p class="red">充值流程：</p>
+                            <p>1.填写订单编号</p>
+                            <p>2.点击【现在充值】按钮</p>
+                            <p>3.到淘宝确认收货</p>
+                            <p>4.点击弹层中已【确认收货】按钮</p>
                         </div>
+                    </div>
+
                 </el-form>
             </div>
+            <el-form class="mt24" v-else>
+                <GuipTable :tableData="tableList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1">
+                    <template v-if="totalType == '2'">
+                        <el-table-column prop="tid" label="订单号"></el-table-column>
+                        <el-table-column prop="money">
+                            <template slot="header">
+                                充值金额
+                                <span class="money-header" v-if="total_money>0"> 总计 {{ total_money }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="pay_date" label="充值时间"></el-table-column>
+                        <el-table-column prop="remain_money" label="充值前账号余额"></el-table-column>
+                        <el-table-column prop="type_desc" label="类型"></el-table-column>
+                        <el-table-column prop="opt" label="操作">
+                            <template slot-scope="scope">
+                                <GuipButton v-if="scope.row.confirm" type="ignore" class="mr-16" :btnstyle="confirmBtnStyle">确认收货</GuipButton>
+                                <div v-else>----</div>
+                            </template>
+                        </el-table-column>
+                    </template>
+                    <template v-else>
+                        <el-table-column prop="tid" label="订单号"></el-table-column>
+                        <el-table-column prop="tid" label="退回成本"></el-table-column>
+                        <el-table-column prop="tid" label="时间"></el-table-column>
+                        <el-table-column prop="tid" label="充值前账号余额"></el-table-column>
+                        <el-table-column prop="tid" label="检测类型"></el-table-column>
+                        <el-table-column prop="tid" label="退款前论文状态"></el-table-column>
+                        <el-table-column prop="tid" label="订单金额"></el-table-column>
+                        <!--                    <el-table-column prop="tid" label="退款金额"></el-table-column>-->
+                        <!--                    <el-table-column prop="tid" label="退款方式"></el-table-column>-->
+                        <!--                    <el-table-column prop="tid" label="退款时间"></el-table-column>-->
+                        <!--                    <el-table-column prop="tid" label="退款理由"></el-table-column>-->
+                        <el-table-column prop="tid" label="退款详情"></el-table-column>
+                    </template>
+
+
+                    <!--                    <el-table-column prop="date1" label="站点名称" min-width="130px" v-if="totalType == '2'">-->
+                    <!--                        <template slot-scope="scope">-->
+                    <!--                            <div class="flex">-->
+                    <!--                                {{ nameList[scope.row.id] }}-->
+                    <!--                            </div>-->
+                    <!--                        </template>-->
+                    <!--                    </el-table-column>-->
+
+
+                </GuipTable>
+                <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
+                               :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
+                               :total="parseInt(total)">
+                </el-pagination>
+            </el-form>
         </div>
     </div>
 </template>
@@ -52,9 +124,15 @@
 
 
 import GuipRadio from "@/components/GuipRadio.vue";
+import GuipInput from "@/components/GuipInput.vue";
+import GuipButton from "@/components/GuipButton.vue";
+import GuipTable from "@/components/GuipTable.vue";
 
 export default {
     components: {
+        GuipTable,
+        GuipButton,
+        GuipInput,
         GuipRadio
 
     },
@@ -69,48 +147,75 @@ export default {
             totalType:'1',
             tableLoading:false,
 
+            walletType: '',
             walletList:[],
 
+            prompt:'',
+            prompt_link:'',
+            bonus:[],
+            buy_price_type: '',
+            buy_price_types: {},
+            buy_price_link: '',
+            buy_price_links: {},
+            links_desc: '',
+
+            ordernum:'',
 
-            siteNum: 1,
             tableKey: '',
-            monthList:[],
+            tableList:[],
-            monthTotal:[],
+            currentPage: 1,    //当前页
-            payList:[],
+            pageSize: 20,   //每页的容量
-            nameList:[],
+            total: 0,   //列表总数
-            topList:[],
+            total_money: 0,   //列表总数
 
-            domain_type: 1,
+            confirmBtnStyle: {
-            domain_types: {1: "平台免费域名", 2: "我自己有域名"},
+                'background':'#FF4D4F',
+                'color':'#FFFFFF',
+                'border':'1px solid #FF4D4F',
+                'border-radius':'4px',
+                'width': '88px',
+                'height': '33px',
+                'font-size': '12px',
+            }
         }
     },
     mounted() {
         this.$nextTick(()=>{
             this.totalType = this.total_type;
-
             this.handleClick()
         })
     },
     methods: {
-        handleClickDetail(id){
+        walletClick(type){
-            if(this.totalType == 2) this.$router.push(`/agent/statisticalDetails?uid=${id}&total_type=${this.totalType}&date=${this.date}`)
+            this.walletType = type
-            if(this.totalType == 3) this.$router.push(`/agent/statisticalDetails?chktype=${id}&total_type=${this.totalType}&date=${this.date}`)
+            this.walletList.forEach(item => {
+                if(item.type === type){
+                    this.prompt = item.prompt
+                    this.prompt_link = item.prompt_link
+                    this.bonus = item.bonus
+
+                    item.links.forEach((v,idx) => {
+                        this.buy_price_types[idx] = v.face_val+'元'
+                        this.buy_price_links[idx] = v.url
+                    })
+
+                    this.buy_price_type = '0'
+                    this.buy_price_link = this.buy_price_links[this.buy_price_type]
+                    this.links_desc = item.links_desc
+                }
+            })
         },
-        handleClicksiteRank(id){
+        jumpLink(link){
-            this.$router.push(`/agent/siteRank?id=${id}&total_type=${this.totalType}&date=`+this.date)
+            window.open(link, '_blank');
         },
-        handleClickserviceRank(id){
+        buyLinkClick(){
-            this.$router.push(`/agent/serviceRank?id=${id}&total_type=${this.totalType}&date=`+this.date)
+            this.buy_price_link = this.buy_price_links[this.buy_price_type];
         },
         handleClick(){
-            this.monthList = []
+            this.tableList = []
-            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 == 2) this.getRechargeList()
             if(this.totalType == 3) this.getChktypeStats()
         },
         getRechargeData() {
@@ -118,7 +223,7 @@ export default {
                 this.$http('POST', '/agentnew/ajax_get_recharge_data', {date: this.date}).then(response => {
                     this.$nextTick(() => {
                         this.walletList = response.data
-                        console.log(response)
+                        if(this.walletType == '') this.walletClick(response.data[0].type)
                     })
                 }).catch(error => {
                     console.error(error, 'error')
@@ -127,17 +232,20 @@ export default {
                 console.error('数据加载失败:', error)
             }
         },
-        getSiteStats() {
+        getRechargeList() {
             this.tableLoading = true
             try {
-                this.$http('POST', '/agentnew/ajax_get_site_stats', {date: this.date}).then(response => {
+                this.$http('POST', '/agentnew/ajax_get_recharge_list', {
+                    type: this.walletType,
+                    cur_page: this.currentPage,
+                    page_size: this.pageSize
+                }).then(response => {
                     this.tableLoading = false
                     this.$nextTick(() => {
-                        this.monthList = response.data.list
+                        this.tableList = response.data.list
-                        this.payList = response.data.pay_list
+                        this.total = response.data.total
-                        this.monthTotal = response.data.total
+                        this.total_money = response.data.total_money
-                        this.nameList = response.data.name_list
+                        console.log(this.total_money)
-                        this.topList = response.data.top_list
                     })
                 }).catch(error => {
                     console.error(error, 'error')
@@ -154,11 +262,7 @@ export default {
                 this.$http('POST', '/agentnew/ajax_get_chktype_stats', {date: this.date}).then(response => {
                     this.tableLoading = false
                     this.$nextTick(() => {
-                        this.monthList = response.data.list
+                        this.tableList = 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')
@@ -169,15 +273,52 @@ export default {
                 this.tableLoading = false
             }
         },
+        doRecharge(){
+            try {
+                this.$http('POST', '/agentnew/ajax_do_recharge', {orderId: this.ordernum,type: this.walletType}).then(response => {
+                    if (response.status) {
+                        this.$message.success('充值成功');
+                        return true;
+                    }
+                    this.$message.error(response.info);
+                }).catch(error => {
+                    console.error(error, 'error')
+                })
+            } catch (error) {
+                console.error('数据加载失败:', error)
+            }
+        },
+        handleSizeChange(val) {
+            this.pageSize = val
+            this.getRechargeList()
+        },
+        handleCurrentChange(val) {
+            this.currentPage = val
+            this.getRechargeList()
+        },
     }
 }
 
 </script>
 <style lang="scss" scoped>
+.recharge-wrap{
+  .pagetitle {
+    text-align: left;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: normal;
+    letter-spacing: 0.08em;
+    color: #1E2226;
+    margin-top: 8px;
+  }
   .w552{
     width: 552px;
     letter-spacing: 0.08em;
   }
+  .w443{
+    width: 443px;
+    letter-spacing: 0.08em;
+  }
   .wallet-choose{
     font-size: 14px;
     color: #1E2226;
@@ -185,6 +326,7 @@ export default {
   .wallet-desc{
     font-size: 12px;
     color: #8A9099;
+    cursor: pointer;
   }
   .wallet-item{
     display: flex;
@@ -199,13 +341,14 @@ export default {
     box-sizing: border-box;
 
     .wallet-name{
-      color: #006AFF;
+      color: #1E2226;;
       font-size: 14px;
       font-weight: bold;
     }
     .wallet-num{
       font-size: 12px;
       color: #626573;
+      padding: 0 2px;
     }
     .wallet-price{
       font-size: 22px;
@@ -224,6 +367,9 @@ export default {
       width: 30px;
       height: 30px;
     }
+    .wallet-name{
+      color: #006AFF;
+    }
   }
 
   .gap24 {
@@ -232,6 +378,7 @@ export default {
     align-items: stretch;
   }
 
+  .buy-area{
     .buy-btn{
       font-size: 12px;
       width: 139px;
@@ -244,12 +391,69 @@ export default {
       box-sizing: border-box;
     }
 
+    .buy-bonus{
+      position: relative;
+      .buy-bonus-info{
+        display: flex;
+        flex-wrap: wrap;
+        position: absolute;
+        top:54px;
+        left: 22px;
+        width: 510px;
+        gap: 3px;
+        color: #626573;
+        div{
+          width: calc(50% - 15px);
+          gap: 7px;
+          b{
+            padding: 0 4px;
+          }
+          .red{
+            background: linear-gradient(180deg, #DB4CBB 0%, #EB202C 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-fill-color: transparent;
+          }
+        }
+      }
+    }
+
     .buy-desc{
       font-size: 12px;
       letter-spacing: 0.08em;
       color: #006AFF;
     }
 
+    .buy-hr{
+      border: 1px dashed #BABDC2;
+      margin: 32px 0;
+    }
+
+    .buy-info{
+      width: 552px;
+      color: #8A9099;
+      font-size: 12px;
+      letter-spacing: 0.08em;
+      background: #F6F7FA;
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      text-align: left;
+      box-sizing: border-box;
+      margin-top: 24px;
+      .red{
+        color: #FF4D4F;
+      }
+    }
+  }
+}
+
+.money-header{
+  color: #626573;
+  margin-left: 8px;
+}
 
 ::v-deep .el-form-item {
   margin: 0;