{extend name="public/base" /} {block name="body"}
<style>
.body-content{
    width: 96%;
    height:100%;
    display: flex;
    justify-content: center; 
    display:block;
    margin: 0 auto;
    padding-bottom: 50px;
}
.saixuan{
    width:100%;
    height: 40px;
    display: flex;
    margin-top: 20px;
}
.martop{
    margin-top: -20px;
}
.reds{
    color:red;
}
.xian{
    width:100%;
    border:1px solid #eee;
    margin-bottom: 10px;
}
.dialogFormVisibletitles{
    color: 000;
    font-size: 20px;
}
</style>


<div class="main-box clearfix" id="app">
<div class="body-content">

<div class="body-content-zhon demo-form-inline">
    <div class="saixuan">
        <div style="width:120px;margin-right:10px;">
            <el-input v-model="linkid" placeholder="推广链接ID"></el-input>
        </div>
        <el-button type="primary" @click="searchs">搜索</el-button>
        <el-radio-group v-model="tim" @change="refreshs" style="margin-left:20px">
          <el-radio-button label="今日"></el-radio-button>
          <el-radio-button label="昨日"></el-radio-button>
        </el-radio-group>
        
        <el-radio-group v-model="order" @change="refreshs" style="margin-left:20px">
          <el-radio-button label="latest">最新创建</el-radio-button>
          <el-radio-button label="money">充值金额</el-radio-button>
          <el-radio-button label="paynum">充值笔数</el-radio-button>
          <el-radio-button label="regnum">注册人数</el-radio-button>
          <el-radio-button label="moneytotal">总充值</el-radio-button>
        </el-radio-group> 
        
    </div>

    <el-table :data="tableData" border v-loading="loading" style="width: 100%;margin-top:25px;" header-cell-style="color:#484848;">

        <el-table-column prop="id" label="ID" width="66px">
        </el-table-column>

        <el-table-column label="渠道">
            <template slot-scope="scope">
                <span>{{scope.row.remark}}</span>
                <span>剧名：123</span>
            </template>
        </el-table-column>
        
        <el-table-column label="推广集数">
            <template slot-scope="scope">
                <span>第{{scope.row.chapter}}集</span>
            </template>
        </el-table-column>         
        
        <el-table-column label="小程序链接">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-document" size="mini">复制链接</el-button>
            </template>
        </el-table-column>        

        <el-table-column label="注册人数">
            <template slot-scope="scope">
               <el-tag type="success">{{scope.row.regnum}}</el-tag>
            </template>
        </el-table-column>
        
        <el-table-column label="充值笔数">
            <template slot-scope="scope">
               <el-tag type="success">{{scope.row.paynum}}</el-tag>
            </template>            
        </el-table-column>        
        
        <el-table-column label="充值金额">
            <template slot-scope="scope">
               <el-tag type="danger">{{scope.row.money}}</el-tag>
            </template>             
        </el-table-column>        
        
        <el-table-column prop="moneytotal" label="总充值">
            <template slot-scope="scope">
               <el-tag type="danger">{{scope.row.moneytotal}}</el-tag>
            </template>             
        </el-table-column>        
        
        <el-table-column prop="addtime" label="创建时间">
        </el-table-column>        

        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button  @click="moneyinfo(scope.row)" type="text" size="small">详情</el-button>
          </template>
        </el-table-column>
    </el-table>
    
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pagetotal"
      @current-change="handleCurrentChange"
      style="margin-top:20px">
    </el-pagination>
    
    <el-dialog title="" :visible.sync="dialogFormVisible" width="80%">
        <span Slot="title" class="dialogFormVisibletitles">
            {{dialogFormVisibletitle}}
            <el-date-picker
              v-model="linkid"
              type="date"
              placeholder="开始日期"
              size="mini">
            </el-date-picker>
            -
            <el-date-picker
              v-model="linkid"
              type="date"
              placeholder="结束日期"
              size="mini">
            </el-date-picker>
            <el-button  @click="" type="primary" size="mini">搜索</el-button>
        </span>
        <div class="martop" v-loading="loading2">
            <el-descriptions :column="5">
                <el-descriptions-item label="今日首充" content-class-name="reds">0</el-descriptions-item>
                <el-descriptions-item label="当天注册用户复充" content-class-name="reds">0</el-descriptions-item>
                <el-descriptions-item label="往日注册用户复充" content-class-name="reds">0</el-descriptions-item>
                <el-descriptions-item label="今日复充" content-class-name="reds">0</el-descriptions-item>
                <el-descriptions-item label="今日总充值" content-class-name="reds">0</el-descriptions-item>
                <el-descriptions-item label="总复充" content-class-name="reds">0</el-descriptions-item>
                <el-descriptions-item label="总充值" content-class-name="reds">0</el-descriptions-item>
            </el-descriptions>
            <div class="xian"></div>
            <el-descriptions :column="5">
                <el-descriptions-item label="今日首充笔数">0</el-descriptions-item>
                <el-descriptions-item label="今日复充笔数">0</el-descriptions-item>
                <el-descriptions-item label="总首充笔数">0</el-descriptions-item>
                <el-descriptions-item label="总复充笔数">0</el-descriptions-item>                
                <el-descriptions-item label="今日注册人数">0</el-descriptions-item>
                <el-descriptions-item label="总注册人数">0</el-descriptions-item>
            </el-descriptions>
            <div class="xian"></div>
            <el-descriptions :column="5">
                <el-descriptions-item label="1次复充" content-class-name="reds">0</el-descriptions-item>
                <el-descriptions-item label="2次复充" content-class-name="reds">0</el-descriptions-item>
                <el-descriptions-item label="3次复充" content-class-name="reds">0</el-descriptions-item>
                <el-descriptions-item label="4次复充" content-class-name="reds">0</el-descriptions-item>                
                <el-descriptions-item label="4次复充以上" content-class-name="reds">0</el-descriptions-item>
            </el-descriptions>
            <div class="xian"></div>
            <el-descriptions :column="5">
                <el-descriptions-item label="复充1次人数">0</el-descriptions-item>
                <el-descriptions-item label="复充2次人数">0</el-descriptions-item>
                <el-descriptions-item label="复充3次人数">0</el-descriptions-item>
                <el-descriptions-item label="复充4次人数">0</el-descriptions-item>                
                <el-descriptions-item label="复充4次以上人数">0</el-descriptions-item>
            </el-descriptions>            
        </div>
    </el-dialog>     
    
</div>
</div>
</div>

{/block} {block name="script"}
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        tableData: [],
        loading:false,
        loading2:false,
        page:1,
        pagetotal:0,
        linkid:'',
        tim:'今日',
        order:'latest',
        dialogFormVisible:false,
        dialogFormVisibletitle:'',
        },
        methods: {
           refreshs() {
                this.loading = true
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Spread/refreshs')}",
                    data: {page:that.page,linkid:that.linkid,order:that.order},
                    dataType: "json",
                    success: function(data) {
                        that.loading = false
                        if (data.status == 1) {
                            that.tableData = data.list
                            that.pagetotal = data.pagetotal
                        }
                    }
                });
            },
            handleCurrentChange(val) {
                this.page = val
                this.refreshs()
            },
            searchs(){
                this.order = 'latest'
                this.refreshs()
            },
            moneyinfo(info){
                this.dialogFormVisibletitle = info.remark
                this.dialogFormVisible = true
                this.loading2 = true
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Spread/moneyinfo')}",
                    data: {id:info.id},
                    dataType: "json",
                    success: function(data) {
                        that.loading2 = false
                        if (data.status == 1) {
 
                        }
                    }
                });                
            }
        },
        created: function() {
            this.refreshs()
        }
    })
</script>
{/block}