kylx365
/
miaoguo_system_server


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478
							<!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;
        }

        .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: #eeeeee;
            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;
        }

        .main {
            width: 100%;
        }

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

        button {
            margin: 0 3px;
        }

        .BtnOn{
            background: #D8D8D8;
            border: 1px solid #979797;
        }

        .BtnOff{
            background: #F44336;
            border: 1px solid #979797;
            color:#fff;
        }

        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;
        }

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

        var vm;
        $(document).ready(function () {
            vm = new Vue({
                el: '#app',
                data: {
                    ListMain: [],
                    ClassList: [],
                    ClassListNew:[],
                    ClassID:"All",
                    DateStart:"",
                },
                methods: {
                    getList: function (event) {
                        $("#imgMain").css("display","block");
                        $.get("/api/GetClassList?Sort=desc", function (data) {
                            var arr = [];
                            arr = data.result;
                            vm.ClassList = arr;
                            var arrTemp=[];
                            for(var i=arr.length-1;i>=0;i--){
                                if (arr[i].Flag==0)
                                    arrTemp.push(arr[i]);
                            }
                            vm.ClassListNew=arrTemp;
                            $.get("/api/GetApprovalUserList", function (data) {
                                var arr = [];
                                arr = data.result;
                                for(var i=0;i<arr.length;i++){
                                    arr[i].Index=i+1;
                                    arr[i].CssDisplay="";
                                    if (arr[i].IsTryOut=="1") {
                                        arr[i].CssBg = "background-color: #e2ffd3;";
                                    }
                                }
                                vm.ListMain = arr;

                                vm.getButtonStatus();

                                $("#imgMain").css("display","none");
                                //console.log(arr);
                            });
                        });

                    },
                    btnSelectChange: function (event) {
                        var str = event.currentTarget.id;

                        var strArr = str.split("_");
                        console.log(strArr);
                        var selectedIndex = $("#Selected_" + strArr[1]+"_"+strArr[2])[0].selectedIndex;
                        var selectedValue=0;
                        if (selectedIndex>0) {
                            selectedValue = $("#Selected_" + strArr[1]+"_"+strArr[2]).val();
                        }
                        //console.log(selectedValue);

                        $.get("/api/UpdateUserMemberInfo?UserID="+strArr[1]+"&WSUUserID="+strArr[2]+"&ClassID="+selectedValue, function (data) {

                        });

                    },
                    btnClickOn: function (event) {
                        var str = event.currentTarget.id;

                        var strArr = str.split("_");
                        console.log(strArr);
                        var selectedIndex = $("#Selected_" + strArr[2]+"_"+strArr[3])[0].selectedIndex;
                        var selectedValue=0;
                        if (selectedIndex>0){
                            //selectedValue = vm.ClassList[selectedIndex-1].ClassID;
                            selectedValue = $("#Selected_" + strArr[2]+"_"+strArr[3]).val();
                        }
                        console.log(selectedValue);
                        var IsMember=0;
                        if (strArr[1]=="On")
                            IsMember=1;

                        $.get("/api/UpdateUserMemberInfo?UserID="+strArr[2]+"&WSUUserID="+strArr[3]+"&IsMember="+IsMember+"&ClassID="+selectedValue, function (data) {


                            for (var i = 0; i < vm.ListMain.length; i++) {
                                vm.ListMain[i].IsMember=IsMember;
                                //vm.ListMain[i].ButtonOn=IsMember;
                            }

                            setTimeout(function () {
                                if (IsMember==1){
                                    $("#Btn_Off_"+strArr[2]+"_"+strArr[3]+"_TryOut").prop("disabled",true);
                                    $("#Btn_On_"+strArr[2]+"_"+strArr[3]).css("display","none");
                                    $("#Btn_Off_"+strArr[2]+"_"+strArr[3]).css("display","");
                                }
                                else{
                                    $("#Btn_Off_"+strArr[2]+"_"+strArr[3]+"_TryOut").prop("disabled",false);
                                    $("#Btn_On_"+strArr[2]+"_"+strArr[3]).css("display","");
                                    $("#Btn_Off_"+strArr[2]+"_"+strArr[3]).css("display","none");
                                }
                            },200);

                        });

                    },
                    btnTryOutClickOn: function (event) {
                        var str = event.currentTarget.id;

                        var strArr = str.split("_");
                        console.log(strArr);
                        var selectedIndex = $("#Selected_" + strArr[2]+"_"+strArr[3])[0].selectedIndex;
                        var selectedValue=0;
                        if (selectedIndex>0){
                            //selectedValue = vm.ClassList[selectedIndex-1].ClassID;
                            selectedValue = $("#Selected_" + strArr[2]+"_"+strArr[3]).val();
                        }
                        //console.log(selectedValue);
                        var IsTryOut=-1;
                        if (strArr[1]=="On")
                            IsTryOut=1;

                        $.get("/api/UpdateUserMemberInfo?UserID="+strArr[2]+"&WSUUserID="+strArr[3]+"&IsTryOut="+IsTryOut+"&ClassID="+selectedValue, function (data) {
                            if (IsTryOut==-1)
                                IsTryOut=0;
                            for (var i = 0; i < vm.ListMain.length; i++) {
                                vm.ListMain[i].IsTryOut=IsTryOut;
                            }

                            setTimeout(function () {
                                if (IsTryOut==1){
                                    $("#Btn_On_"+strArr[2]+"_"+strArr[3]+"_TryOut").css("display","none");
                                    $("#Btn_Off_"+strArr[2]+"_"+strArr[3]+"_TryOut").css("display","");
                                    $("#Tr_"+strArr[2]+"_"+strArr[3]).css("background-color","#e2ffd3");
                                }
                                else{
                                    $("#Btn_On_"+strArr[2]+"_"+strArr[3]+"_TryOut").css("display","");
                                    $("#Btn_Off_"+strArr[2]+"_"+strArr[3]+"_TryOut").css("display","none");
                                    $("#Tr_"+strArr[2]+"_"+strArr[3]).css("background-color","#ffffff");
                                }
                            },200);
                        });

                    },
                    btnFilter:function(event) {
                        var classID=null;
                        var str = event.currentTarget.id;
                        var obj = $("#ClassSelected"); //定位id
                        if (str.indexOf("btnClass") >= 0) {
                            $(".btn1").attr("class", "btn1");
                            $("#" + str).attr("class", "btn2 btn1");
                            classID=str.replace("btnClass", "");
                            if (classID)
                                vm.ClassID = classID;
                            obj.find("option[value='0']").attr("selected",true);
                        }
                        else {

                            var index = obj[0].selectedIndex; // 选中索引
                            if (index>0) {
                                $(".btn1").attr("class", "btn1");
                                $("#ClassSelected").attr("class", "btn2 btn1");
                                classID=obj[0].options[index].value;
                                if(classID)
                                    vm.ClassID = classID;
                            }
                        }

                        if (classID){
                            vm.ListMain=[];
                            vm.DateStart = "";
                            $("#imgMain").css("display","block");
                            $.get("/api/GetApprovalUserList?ClassID=" + classID, function (data) {
                                var arr = [];
                                arr = data.result;
                                for (var i = 0; i < arr.length; i++) {
                                    arr[i].Index = i + 1;
                                    arr[i].CssDisplay = "";
                                    if (arr[i].IsTryOut == "1")
                                        arr[i].CssBg = "background-color: #e2ffd3;"
                                }
                                vm.ListMain = arr;
                                //console.log(arr);


                                for (var i = 0; i < vm.ClassList.length; i++) {
                                    if (i<vm.ClassList.length-1 && vm.ClassList[i].ClassID == Number(classID))
                                        vm.DateStart = vm.ClassList[i].StartDate;
                                }

                                vm.getButtonStatus();

                                $("#imgMain").css("display","none");

                                setTimeout(function () {
                                    vm.btnSort({currentTarget:{id:"ProbationPayTime_DESC"}});
                                },200)
                            });
                        }

                    },
                    btnSort: function (event) {
                        var str = event.currentTarget.id;

                        var strArr = str.split("_");
                        //console.log(strArr);

                        //sort(vm.ListMain,strArr[1],strArr[0],"String");
                        vm.ListMain.sort(compare(strArr[0],strArr[1],strArr[2]));

                        var index=0
                        for(var i=0;i<vm.ListMain.length;i++){
                            var item=vm.ListMain[i];
                            item.Index=++index;
                        }

                        vm.getButtonStatus();

                    },
                    getButtonStatus:function () {
                        setTimeout(function(){
                            for(var i=0;i<vm.ListMain.length;i++){
                                if (!vm.ListMain[i].UserID)
                                    $("#Btn_On_"+vm.ListMain[i].UserID+"_"+vm.ListMain[i].WSUUserID+"_TryOut").prop("disabled",true);

                                if (!vm.ListMain[i].UserID)
                                    $("#Btn_On_"+vm.ListMain[i].UserID+"_"+vm.ListMain[i].WSUUserID).prop("disabled",false);

                                if (vm.ListMain[i].IsMember=="1") {
                                    $("#Btn_On_"+vm.ListMain[i].UserID+"_"+vm.ListMain[i].WSUUserID).css("display","none");
                                    $("#Btn_Off_"+vm.ListMain[i].UserID+"_"+vm.ListMain[i].WSUUserID).css("display","");
                                }
                                else{
                                    $("#Btn_On_"+vm.ListMain[i].UserID+"_"+vm.ListMain[i].WSUUserID).css("display","");
                                    $("#Btn_Off_"+vm.ListMain[i].UserID+"_"+vm.ListMain[i].WSUUserID).css("display","none");
                                }

                                if (vm.ListMain[i].IsTryOut=="1") {
                                    $("#Btn_On_"+vm.ListMain[i].UserID+"_"+vm.ListMain[i].WSUUserID+"_TryOut").css("display","none");
                                    $("#Btn_Off_"+vm.ListMain[i].UserID+"_"+vm.ListMain[i].WSUUserID+"_TryOut").css("display","");
                                }
                                else{
                                    $("#Btn_On_"+vm.ListMain[i].UserID+"_"+vm.ListMain[i].WSUUserID+"_TryOut").css("display","");
                                    $("#Btn_Off_"+vm.ListMain[i].UserID+"_"+vm.ListMain[i].WSUUserID+"_TryOut").css("display","none");
                                }
                            }

                        },200);
                    }
                }
            });

            vm.getList();

            $(".top").click(function(){
                document.body.scrollTop = document.documentElement.scrollTop = 0;
            })

        });

        function compare(column,sort,objType){
            if (sort=="DESC"){
                return function (b, a) {
                    if (objType=="Number")
                        return a[column]-b[column];
                    else {
                        return a[column].localeCompare(b[column]);
                    }
                }
            }
            else {
                return function (a, b) {
                    if (objType=="Number")
                        return a[column]-b[column];
                    else {
                        return a[column].localeCompare(b[column]);
                    }
                }
            }
        }

    </script>
</head>
<body class="container">
<div id="app">
    <div class="panelTop FlexRow">
        <div id="btnClassAll" class="btn1" v-on:click="btnFilter">全部</div>
        <div id="btnClass0" class="btn2 btn1" v-on:click="btnFilter">未分班</div>
        <div id="btnClass-2" class="btn1" v-on:click="btnFilter">临时</div>
        <div id="btnClass-1" class="btn1" v-on:click="btnFilter">待确认</div>
        <select class="btn1" class="select" id="ClassSelected" v-model="ClassID" @change='btnFilter'>
                <option value="0" key="请选择">请选择</option>
                <option v-for="(drpName, drpIndex) in ClassList" :id="drpName.ClassID" :value="drpName.ClassID" :key="drpName.Name" v-if=" drpName.Flag==2 ">{{drpName.Name}}</option>
        </select>
        <div :id="'btnClass'+item.ClassID" class="btn1" v-on:click="btnFilter" v-for="(item, index) in ClassListNew">{{item.Name}}</div>
    </div>
    <div class="DateStart" v-if="DateStart">开班日期：<b>{{DateStart}}</b></div>
    <div class="main FlexColumn">
        <table>
            <thead>
            <tr>
                <td class="tdClass"></td>
                <td class="tdA tdClass" v-on:click="btnSort" id="UserID_DESC_Number">秒过ID</td>
                <td class="tdClass">秒过</td>
                <td class="tdA tdClass" v-on:click="btnSort" id="WSUUserID_DESC_Number">服务号ID</td>
                <td class="tdClass">服务号</td>
                <td class="tdA tdClass" v-on:click="btnSort" id="NickName_ASC">昵称</td>
                <td class="tdA tdClass" v-on:click="btnSort" id="CreateTime_DESC">创建</td>
                <td class="tdA tdClass" v-on:click="btnSort" id="LastLoginTime_DESC">最末</td>
                <td class="tdA tdClass" v-on:click="btnSort" id="Subscribe_DESC">关注</td>
                <td class="tdA tdClass" v-on:click="btnSort" id="ProbationPayTime_DESC">新手包</td>
                <td class="tdClass">分班</td>
                <td class="tdClass">状态</td>
                <td class="tdA tdClass" v-on:click="btnSort" id="PayTime_DESC">年费</td>
                <td class="tdClass">小组</td>
                <td class="tdClass">介绍人</td>
            </tr>
            </thead>
            <tbody>
            <tr :id=" 'Tr_'+item.UserID+'_'+item.WSUUserID " v-for="(item, index) in ListMain" :style="item.CssBg + item.CssDisplay">
                <td class="td1">{{item.Index}}</td>
                <td class="td1"><a :href="'webuserinfo?UserID=' + item.UserID " target="_blank">{{item.UserID}}</a></td>
                <td class="td1"><img class="avatar" :src="item.AvatarUrl" v-if="item.AvatarUrl"/></td>
                <td class="td1">{{item.WSUUserID}}</td>
                <td class="td1"><img class="avatar" :src="item.WSUAvatarUrl"  v-if="item.WSUAvatarUrl"/></td>
                <td>{{item.NickName}}</td>
                <td>{{item.CreateTime}}</td>
                <td>{{item.LastLoginTime}}</td>
                <td>{{item.Subscribe}}</td>
                <td>{{item.ProbationPayTime}}</td>
                <td class="td1"><select class="select" :id=" 'Selected_'+item.UserID+'_'+item.WSUUserID " v-model="item.ClassID" @change='btnSelectChange'>
                    <option id="0" value="0" key="未分班">未分班</option>
                    <option id="0" value="-1" key="待确认">待确认</option>
                    <option id="0" value="-2" key="临时">临时</option>
                    <option v-for="(drpName, drpIndex) in ClassList" :id="drpName.ClassID" :value="drpName.ClassID" :key="drpName.Name" v-if="drpName.ClassID>0">{{drpName.Name}}</option>
                </select>
                </td>
                <td class="td1">
                    <button class="BtnOn" :id="'Btn_On_'+item.UserID+'_'+item.WSUUserID+'_TryOut'" v-on:click="btnTryOutClickOn">试用</button>
                    <button class="BtnOn" :disabled="item.ButtonOn" :id="'Btn_Off_'+item.UserID+'_'+item.WSUUserID+'_TryOut'" v-on:click="btnTryOutClickOn">关闭</button>
                    <button class="BtnOn" :disabled="!item.IsTryOut" :id="'Btn_On_'+item.UserID+'_'+item.WSUUserID" v-on:click="btnClickOn">开班</button>
                    <button class="BtnOff" :id="'Btn_Off_'+item.UserID+'_'+item.WSUUserID" v-on:click="btnClickOn">关闭</button>
                </td>
                <td>{{item.PayTime}}</td>
                <td>{{item.GroupID}}</td>
                <td>{{item.Introducer}}</td>
            </tr>
            </tbody>
        </table>
        <img src="https://kylx365-1253256735.file.myqcloud.com/web/timg.gif" class="timg" id="imgMain"/>

    </div>

</div>

<div class="top">top</div>
</body>
</html>