kylx365
/
miaoguo_system_server


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>秒过学习</title>
    <link rel="stylesheet" href="../mg/common.css">
    <style type="text/css">

        .container {
            width:98%;
            margin: 0 20px 0 20px;
        }

        #app {
            margin: 0 auto;
            font-size: 18px;
        }

        .panelHead{
            font-size: 20px;
            font-weight: 500;
        }

        .panelTop{
            width:100%;
            height:50px;
            justify-content: flex-start;
        }

        .btn1{
            width:80px;
            height: 25px;
            border-radius: 2px;
            margin: 0px 10px 0px 10px;
            border: 1px solid #aaaaaa;
            text-align: center;

            background-color: #fff;
            color:#000;
            cursor:pointer;
        }
        .btn2{
            background-color: #19C575;
            color:#fff;
        }

        table {
            border-collapse: collapse;
            margin: 0 0 50px 0;
            width:100%;
        }

        .tdClass {
            background-color: #ddd;
            text-align: center;
        }

        .tdA{
            color:blue;
            text-decoration: underline;
            cursor:pointer;
        }

        td {
            border: 1px solid #aaaaaa;
            min-height: 30px;
            padding: 5px 10px 5px 10px;
            flex: 1;
        }
        .td1{
            text-align: center;
        }


        .td2{
            width: 250px;
        }
        .td3{
            justify-content: space-between;
        }
        .td2_1{
            background-color: #90CAF9;
        }
        .td2__1{
            border:4px groove #EF9A9A;
        }
        .td3__1{
            background-color: #C5E1A5;
        }

        .main {
            width: 100%;
        }

        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 10px;
        }

        button {
            margin: 0 3px;
        }

        select{
            font-size:18px;
        }

        .top{
            position: fixed;
            width: 50px;
            height:26px;
            bottom:10px;
            left:10px;
            z-index: 100;
            background-color: #19C575;
            color:#fff;
            border-radius: 5px;
            text-align: center;
        }

        .DateStart{
            margin: 0 0 10px 0;
        }

        .timg{
            margin-top: 50px;
            width:220px;
            height:145px;
        }

        .img{
            width:40px;
            height:40px;
            border-radius: 5px;
            margin-right: 10px;
        }

        .pDetail{
            justify-content: flex-start;
            padding-left: 20px;
        }

        .trDelete{
            text-decoration: line-through;
            background-color: #eee;
        }

        .hasRefund-1{
            background-color: #FFB8B3;
        }

        .spanWidth{
            margin-left: 20px;
        }

        .spanWidth2{
            height:20rpx;
        }

    </style>
    <script src="js/jquery-1.6.4.min.js"></script>
    <script src="js/vue.js"></script>
    <script>

        var vm;
        const Colors=["#EF9A9A","#90CAF9","#C5E1A5","#CE93D8","#80DEEA","#FFF59D","#BCAAA4","#9FA8DA","#FFCC80","#B0BEC5"]
        $(document).ready(function () {
            vm = new Vue({
                el: '#app',
                data: {
                    ListMain: [],
                    DateStart:"",
                    PayFinished:"0",
                },
                methods: {
                    getList: function (event,callback) {
                        $("#imgMain").css("display","block");
                        $.get("/api/GetStatisticsShareUserPay", function (data) {
                            var arr = [];
                            arr = data.result;
                            vm.ListMain = arr;
                            $("#imgMain").css("display","none");

                            if (callback)
                                callback();
                        });
                    },
                    build:function () {
                        $("#imgMain").css("display","block");
                        $.get("/api/BuildStatisticsShareUserPay", function (data) {
                            $("#imgMain").css("display","none");
                            alert("生成成功");
                            vm.getList();
                        });
                    },
                }
            });

            vm.getList();

        });

    </script>
</head>
<body class="container">
<div id="app">
    <div class="panelHead">推广用户树状图</div>
    <div class="panelTop FlexRow">
        <button class="" v-on:click="build">生成树</button>
        <div class="FlexRow" style="margin-left: 100px;">说明：
            <div class="spanWidth">大使：★★</div>
            <div class="spanWidth">直属：★</div>
            <div class="spanWidth FlexRow"><span>支付直属（30元）：</span><div class="spanWidth2 td2_1">&nbsp;&nbsp;&nbsp;&nbsp;</div></div>
            <div class="spanWidth FlexRow"><span>支付大使（15元）：</span><div class="spanWidth2 td2__1">&nbsp;&nbsp;&nbsp;&nbsp;</div></div>
            <div class="spanWidth FlexRow"><span>要115天不要30元：</span><div class="spanWidth2 td3__1">&nbsp;&nbsp;&nbsp;&nbsp;</div></div>
        </div>
    </div>

    <div class="main FlexColumn">
        <table>
            <thead>
            <tr>
                <td class="tdClass">编号</td>
                <td class="tdClass">用户ID</td>
                <td class="td2 tdClass">大使</td>
                <td class="td2 tdClass">直属</td>
                <td class="td2 tdClass">第二度</td>
                <td class="td2 tdClass">第三度</td>
                <td class="td2 tdClass">第四度</td>
                <td class="td2 tdClass">第五度</td>
            </tr>
            </thead>
            <tbody>
            <tr :id=" 'Tr_'+item.UserID " v-for="(item, index) in ListMain">
                <td class="td1">{{index+1}}</td>
                <td class="td1"><a :href="'webuserinfo?UserID=' + item.UserID " target="_blank">{{item.UserID}}</a></td>

                <td class="td2" v-for="(item2, index2) in item.Tree">
                    <template v-if="item2">
                        <div :class=" 'td2 '+'td2_'+item.IsRebate + ' td2__'+item.IsRebateAgent  + ' td3__'+item2.IsNeedTime ">
                            <img class="img" :src="item2.AvatarUrl" />{{item2.NickName}}
                        </div>
                    </template>
                </td>

            </tr>
            </tbody>
        </table>
        <img src="https://kylx365-1253256735.file.myqcloud.com/web/timg.gif" class="timg" id="imgMain"/>

    </div>

</div>
</body>
</html>