juipnet/Host/Views/User/MyAccounts.cshtml

@using Hncore.Infrastructure.Data
@using Hncore.Pass.Vpn.Domain
@using Hncore.Infrastructure.Extension
@using ViewComponents
@model List<ProductAccountEntity>
@{
    Layout = "_UserLayout";
}
    <script>
    $(function () {

        

    $('#myTabs a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    });

    //$(".edit").click(function () {
    //    $(".editList").show();
    //});
    $(".quxiao").click(function () {
        $(".editList").hide();
    });

    $(".laozhanghao").click(function () {
        $(".zhanghaoCon").show();
    });
    $(".btnClose").click(function () {
        $(".zhanghaoCon").hide();
    })
            
})
    </script>
    <style>
        .zhanghaoCon {
            position: fixed;
            width: 400px;
            height: 455px;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -220px;
            z-index: 3;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0px 6px 8px 6px #ccc;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            padding: 30px;
            display: none;
        }

        .online {
            position: fixed;
            left: 300px;
            width: 950px;
            height: 700px;
            top: 100px;
            z-index: 3;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0px 6px 8px 6px #ccc;
            padding: 30px;
            overflow-y: auto;
        }

        .editList {
            position: fixed;
            width: 400px;
            height: 240px;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -120px;
            z-index: 3;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0px 6px 8px 6px #ccc;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            padding: 30px;
            display: none;
        }

            .editList form, .zhanghaoCon form, .tab-content {
                width: 100%;
            }

        .activetit {
            border-bottom: 1px solid #3157ad !important;
        }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
            border: none;
        }

        .btnClose {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .btnOnlineClose {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        form .row {
            height: 60px;
            line-height: 60px;
        }

            form .row input {
                height: 35px;
            }

            form .row select {
                width: 160px;
                height: 35px;
            }

        .btnClose {
            cursor: pointer;
        }

        input[type=checkbox] {
            width: 17px;
            height: 17px;
        }

        .blueT{
            cursor:pointer;
        }
        [v-cloak] {
            display: none;
        }
    </style>
<div id="app">
    <div class="zhanghaoCon">
        <img src="~/img/close.png" class="btnClose" />
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist" style="margin-top:20px;border-bottom:none;">
            <li role="presentation" class="activetit"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">单个认证</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">批量认证</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content" style="margin-top:40px;">
            <div role="tabpanel" class="tab-pane active" id="home">
                <form>
                    <div class="row">
                        <div class="col-lg-3">选择产品:</div>
                        <div class="col-lg-9">
                            <select v-model="oneAuthModel.ProductId">
                                <option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-3">输入账号:</div>
                        <div class="col-lg-9">
                            <input type="text" v-model="oneAuthModel.Account" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-3">验证密码:</div>
                        <div class="col-lg-9">
                            <input type="text" v-model="oneAuthModel.Pwd" />
                        </div>
                    </div>
                    <p v-if="oneAuthLoading" class="text-center" style="margin:8px;color:red;">认证中,请耐心等待...</p>
                    <p class="text-center" style="margin-top:20px"><button type="button" class="btn btn-primary" v-on:click="accountOneAuth">认证账号</button></p>
                </form>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <form>
                    <div class="row">
                        <div class="col-lg-3">选择产品:</div>
                        <div class="col-lg-9">
                            <select v-model="mutilAuthModel.ProductId">
                                <option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-3">账号前缀:</div>
                        <div class="col-lg-9">
                            <input type="text" v-model="mutilAuthModel.Account" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-3">开始数:</div>
                        <div class="col-lg-9">
                            <input type="number" v-model="mutilAuthModel.StartNum" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-3">认证个数:</div>
                        <div class="col-lg-9">
                            <input type="number" v-model="mutilAuthModel.Count" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-3">验证密码:</div>
                        <div class="col-lg-9">
                            <input type="text" v-model="mutilAuthModel.Pwd" />
                        </div>
                    </div>
                    <p v-if="mutilAuthLoading" class="text-center" style="margin:8px;color:red;">认证中,请耐心等待...</p>
                    <p class="text-center" style="margin-top:20px"><button type="button" class="btn btn-primary" v-on:click="accountMutilAuth">认证账号</button></p>
                </form>
            </div>
        </div>
    </div>
    <div class="online" v-cloak v-if="showOnline">
        <img src="~/img/close.png" class="btnOnlineClose" v-on:click="closeOnline()" />        
        <div class="tab-content" style="margin-top:40px;">            
            <table class="table table-striped table_person">
                <tr>
                    <th>序号</th>
                    <th>账号</th>
                    <th>登录时间</th>
                    <th>在线时间</th>
                    <th>服务器Ip</th>
                    <th>登录ip</th>
                    <th>上行</th>
                    <th>下行</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in onLineData">
                    <td>#{{index+1}}</td>
                    <td>{{item.Account}}</td>
                    <td>{{item.LoginTime}}</td>
                    <td>{{item.OnlineTime}}</td>
                    <td>{{item.ServerIP}}</td>
                    <td>{{item.LoginIP}}</td>
                    <td>{{item.UpStream}}</td>
                    <td>{{item.DownStream}}</td>
                    <td class="blueT" @@click="killout(item)"> 强制离线</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="editList">
        <form>
            <div class="form-group">
                <label>账户：</label>
                <input type="text" class="form-control" placeholder="" v-model="UpdateAccountModel.Account">
            </div>
            <div class="form-group">
                <label>新密码：</label>
                <input type="text" class="form-control" placeholder="" v-model="UpdateAccountModel.Pwd">
            </div>
            <p class="text-center"><button type="button" class="btn btn-primary" v-on:click="UpdateAccountPwd">提交</button><button type="reset" class="btn btn-danger quxiao" style="margin-left:20px;">取消</button></p>
        </form>
    </div>
    <p class="wanshan"><img src="~/img/smile.png"> 为了给您带来更好的服务体验，请完善qq号和微信号。<a class="edit" asp-action="index" asp-controller="user" asp-route-e="1">立即完善》</a></p>
    <div class="toolsBar">
        <div class="item">
            <div class="btn-group">
                <select v-model="searchModel.ExpiredDay" style="height:35px;">
                    <option>剩余时间</option>
                    <option :value="-1">全部</option>
                    <option :value="0">过期</option>
                    <option :value="1">1天</option>
                    <option :value="3">3天</option>
                    <option :value="7">一周</option>
                </select>
            </div>
        </div>
        <div class="item">
            <div class="row">
                <div class='col-sm-6'>
                    <div class="form-group">
                        <!--指定 date标记-->
                        <div class='input-group date' id='datetimepicker1'>
                            <input type='text' class="form-control" v-model="searchModel.BTime" placeholder="到期开始时间" id="BTime" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class='col-sm-6'>
                    <div class="form-group">
                        <!--指定 date标记-->
                        <div class='input-group date' id='datetimepicker2'>
                            <input type='text' class="form-control" placeholder="到期结束时间" v-model="searchModel.ETime" id="ETime" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="btn-group">
                <select v-model="searchModel.ProductId" style="height:35px;">
                    <option value="0">全部产品</option>
                    <option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
                </select>
            </div>
        </div>
        <div class="item">
            <div class="btn-group">
                <select v-model="searchModel.PackageId" style="height:35px;">
                    <option value="0">全部套餐</option>
                    <option v-for="item in packages" :value="item.Id">{{item.Name}}</option>
                </select>

            </div>
        </div>
        <div class="item">
            <input type="text" v-model="searchModel.Keyword" placeholder="账号" class="bianhao" />
            <button type="button" class="btn btn-primary" v-on:click="search">查询</button>
        </div>

    </div>
    <div class="row xufeiBar">
        <div class="col-lg-6 text-left xuTui">
            <button type="button" class="btn btn-danger btn-rebuy"><img src="~/img/xufei.png"> 续费</button>
            <button type="button" class="btn btn-primary btn-refund">
                <img src="~/img/tui.png"> 退货</button>
            <a style="color:red">&nbsp;*非本系统开通账号无法退款，请联系客服处理</a>
        </div>
        <div class="col-lg-6 text-right">
            <button type="button" class="btn btn-primary laozhanghao"><img src="~/img/renzheng_gray.png"> 老账号认证</button>
        </div>
    </div>
    <table class="table table-striped table_person">
        <tr>
            <th><input type="checkbox" name="" id="checkAll" value="" /></th>
            <th>开通时间</th>
            <th>产品</th>
            <th>套餐</th>
            <th>账号</th>
            <th>密码</th>
            <th>连接数</th>
            <th>到期时间</th>
            <th>剩余时间</th>
            <th>在线及踢线</th>
            <th>服务器</th>
            <th>软件下载</th>
        </tr>
        @foreach (var item in Model)
        {
        <tr>
            <td><input type="checkbox" class="selectAccount" value="@item.Account" a-pid="@(item.ProductId)" a-connectCount="@item.ConnectCount" a-aType="@item.AccountType" /></td>
            <td>@item.CreateTime.ToString("yyyy.MM.dd")</td>
            <td>@item.ProductName</td>
            <td>@item.PackageName</td>
            <td>@item.Account</td>
            <td>@item.Pwd <img src="~/img/change.png" class="change" v-on:click="showAccountBox(@item.Id,'@item.Account','@item.Pwd')" /></td>
            <td>@item.ConnectCount</td>
            <td>@item.EndTime.Value.ToString("yyyy.MM.dd")</td>
            <td class="redT">@(item.Status==AccountStatus.Refund?"已退货": item.RestTime)</td>
            @*<td class="greenT">查看</td>*@
            <td class="blueT"><a @@click="online(@item.ProductId,'@item.Account')">查看</a> </td>
            <td class="blueT"><a asp-action="Index" asp-controller="LineList" asp-route-ProductId="@item.ProductId" target="_blank">查看</a> </td>
            <td class="blueT"> <a asp-action="soft" asp-controller="product" target="_blank">下载</a></td>
        </tr>
        }

    </table>
    @*<div class="fenye">
        @await Component.InvokeAsync("Pager", new PagerModel() { Total = Model.RowCount, PageIndex = this.Context.Request.GetInt("PageIndex") })
    </div>*@
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 70%;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">温馨提示:请选择退款原因</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 text-center">
                            <button type="button" style="width:160px;" v-on:click="refund_reason('连接不上')" class="btn btn-info btn-lg">连接不上</button>
                        </div>
                        <div class="col-md-6 text-center">
                            <button type="button" style="width:160px;" v-on:click="refund_reason('网速慢')" class="btn btn-info btn-lg">网速慢</button>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-6 text-center">
                            <button type="button" style="width:160px;" v-on:click="refund_reason('稳定性差')" class="btn btn-info btn-lg">稳定性差</button>
                        </div>
                        <div class="col-md-6 text-center">
                            <button type="button" style="width:160px;" v-on:click="refund_reason('IP太少')" class="btn btn-info btn-lg">IP太少</button>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-6 text-center">
                            <button type="button" style="width:160px;" v-on:click="refund_reason('想换用其他产品')" class="btn btn-info btn-lg">想换用其他产品</button>
                        </div>
                        <div class="col-md-6 text-center">
                            <button type="button" style="width:160px;" v-on:click="refund_reason(false)" class="btn btn-info btn-lg">暂时用不到了</button>
                        </div>
                    </div>
                    <br>
                    <div>
                        <p style="color: red;display:none;" class="refund-info"> * 此类问题可联系专业售后客服帮助解决，解决率为95%，点击联系售后客服。</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary confirm-refund"  disabled="disabled">确定退款</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>  
</div>

<script type="text/javascript">

    var reason = '';

        var app = new Vue({
        el: '#app',
        data: {
            productWithPackage: [],
            packages: [],
            mutilAuthLoading: false,
            oneAuthLoading: false,
            showOnline: false,
            searchModel: {
                ExpiredDay:-1,
                ProductId:@this.Context.Request.GetInt("ProductId"),
                PackageId:@this.Context.Request.GetInt("PackageId"), 
                Keyword:'@this.Context.Request.Get("Keyword")',
                BTime: '@this.Context.Request.Get("BTime")',
                ETime: '@this.Context.Request.Get("ETime")',
            },
            oneAuthModel: {
                ProductId: 0,
                Account: "",
                Pwd:""
            },
            mutilAuthModel: {
                ProductId: 0,
                Account: "",
                Pwd: "",
                StartNum: 0,
                Count:0
            },
            UpdateAccountModel: {
                ProductId:0,
                UserId:0,
                Account: "",
                Pwd:""
            },
            onLineData:[]
        },
        computed: {

        },
        watch: {
            'searchModel.ProductId': {    //加引号监听对象里的属性
                handler: function (newValue, oldValue) {
                    for (var i = 0; i < this.productWithPackage.length; i++) {
                        var item = this.productWithPackage[i];
                        if (item.Product.Id == newValue) {
                            this.packages = item.Packages
                            return;
                        }
                    }
                },
                immediate: true
            }
        },
        created: function () {

         },
        mounted: function () {
              this.getProducts();
         },
        methods: {
            initPackages: function () {
                    var productId = this.searchModel.ProductId;
                    if (productId == 0) return;
                    for (var i = 0; i < this.productWithPackage.length; i++) {
                        var item = this.productWithPackage[i];
                        if (item.Product.Id == productId) {
                            this.packages = item.Packages
                            return;
                        }
                    }
             },
            getProducts() {
                var that = this;
                $.ajax({
                    type: 'GET',
                    url: '/api/course/v1/product/ProductWithPackage',
                    success: function (res) {
                        if (res.Code == 10000) {
                            that.productWithPackage = res.Data;
                            that.initPackages();
                        }
                    }
                });
            },
            search() {
                var ps = [];
                this.searchModel.BTime = $("#BTime").val();
                this.searchModel.ETime = $("#ETime").val();
                for (var item in this.searchModel) {
                    var p = item + "=" + this.searchModel[item];
                    ps.push(p);
                }
                window.location.href = "?" + ps.join("&");
            },
            showAccountBox(id,account,pwd) {
                $(".editList").show();
                this.UpdateAccountModel.Id = id;
                this.UpdateAccountModel.Account = account;
                this.UpdateAccountModel.Pwd = pwd;
            },
            UpdateAccountPwd(){
                $.ajax({
                    type: 'POST',
                    url: '/user/UpdateAccountPwd',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(this.UpdateAccountModel),
                    success: function (res) {
                        console.log(res);
                        if (res.Code == 10000) {
                            window.location.reload();
                        } else {
                            alert(res.Message)
                        }
                    }
                });
            },
            accountOneAuth() {
                if (this.oneAuthModel.ProductId ==0) {
                    alert('请选择产品')
                    return;
                }
                if (this.oneAuthModel.Account == '' || this.oneAuthModel.Pwd == '') {
                    alert('账号和密码不能为空')
                    return;
                }
                var that = this;
                if (this.oneAuthLoading) return
                this.oneAuthLoading = true;
                $.ajax({
                    type: 'POST',
                    url: '/user/OrginAccountAuth',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(this.oneAuthModel),
                    success: function (res) {
                        that.oneAuthLoading = false;
                        console.log(res);
                        if (res.Code == 10000) {
                            alert('认证成功')
                            window.location.reload();
                        } else {
                            alert(res.Message)
                        }
                    }
                });
            },
            accountMutilAuth() {
                if (this.mutilAuthModel.ProductId == 0) {
                    alert('请选择产品')
                    return;
                }
                if (this.mutilAuthModel.Account == '' || this.mutilAuthModel.Pwd == '') {
                    alert('账号和密码不能为空')
                    return;
                }
                if (this.mutilAuthLoading) return;
                this.mutilAuthLoading = true;
                var that = this;
                $.ajax({
                    type: 'POST',
                    url: '/user/OrginAccountAuth',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(this.mutilAuthModel),
                    success: function (res) {
                        that.mutilAuthLoading = false;
                        console.log(res);
                        if (res.Code == 10000) {
                            alert('认证成功')
                            window.location.reload();
                        } else {
                            alert(res.Message)
                        }
                    }
                });
            },
            online(productId, account) {
                this.showOnline = true
                var that = this;            
                $.ajax({
                    type: 'GET',
                    url: '/api/course/v1/productaccount/OnLine?productId=' + productId + '&account=' + account,
                    success: function (res) {
                        if (res.Code == 10000) {
                            that.onLineData = res.Data;
                            for (var i = 0; i < that.onLineData.length; i++) {
                                that.onLineData[i].ProductId = productId;
                            }
                        }
                    }
                });
            },
            closeOnline() {
                this.showOnline = false;
                this.onLineData = [];
            },
            killout: function (item) {
                var that = this;
                $.ajax({
                    type: 'GET',
                    url: '/api/course/v1/productaccount/KillOut?productId=' + item.ProductId + '&id=' + item.Id,
                    success: function (res) {
                        if (res.Code == 10000) {
                            alert("操作成功");
                            that.online(item.ProductId, item.Account)
                        }
                    }
                });
            },
            refund_reason(reason_info){
                if(reason_info){
                    $(".refund-info").show();
                    reason = reason_info;
                } else {
                    $(".refund-info").hide();
                    reason = '暂时用不到了';
                }
                $(".confirm-refund").removeAttr('disabled');
            }
        }
    })

    $(function () {
        var picker1 = $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn'),
            //minDate: '2016-7-1'
        });
        var picker2 = $('#datetimepicker2').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });
        //动态设置最小值
        picker1.on('dp.change', function (e) {
            picker2.data('DateTimePicker').minDate(e.date);
        });
        //动态设置最大值
        picker2.on('dp.change', function (e) {
            picker1.data('DateTimePicker').maxDate(e.date);
        });        

        //退款

        function caclRefund(account,refundFun) {
            $.ajax({
                type: 'GET',
                url: '/api/course/v1/order/CaclRefund?account=' + account,
                success: function (res) {
                    if (res.Code == 10000) {
                        var msg = res.Data.info +",确定要退款吗？"
                        //var msg ="剩余："+res.Data.RefundRestTime+",还需退款："+ res.Data.RefundAmount+",确定要退款吗？"
                        if (!confirm(msg)) { return; }
                        refundFun(account);
                    } else {
                        alert(res.Message)
                    }
                }
            });
        }

        function refund(account) {
          $.ajax({
                type: 'GET',
                url: '/api/course/v1/order/Refund?account=' +account + "-" + reason,
                success: function (res) {
                    if (res.Code == 10000) {
                        alert('退款成功')
                        window.location.reload()
                    } else {
                        alert(res.Message)
                    }
                }
            });
        }
        $(".btn-refund").on('click', function () {
            var accounts = [];
            $.each($('input:checkbox:checked'), function () {
                accounts.push($(this).val())
            });
            
            if (accounts.length >1) { alert('一次只能退款一个账号');  return; }
            if (accounts.length == 0) { alert('请先选择账号');  return; }
            $('#myModal').modal('show'); 
        })
        $(".confirm-refund").on('click', function () {
            var accounts = [];
            $.each($('input:checkbox:checked'), function () {
                accounts.push($(this).val())
            });
            
            $('#myModal').modal('hide'); 
            caclRefund(accounts[0],refund)
        })


        function isSame(data, property) {
            if (data.length == 0) return true;
            var first = data[0];
            for (var i = 1; i < data.length; i++) {
                var item = data[i];
                if (first[property] != item[property])
                    return false;
            }
            return true;
        }

        //续费
        $(".btn-rebuy").on('click', function () {
            var accounts = [];
            var accountModels = [];
            var isTest = false
            $.each($('input:checkbox:checked'), function () {
                var account = $(this).val();
                if (account) {
                    var accountItem = {
                        account: account,
                        pid: $(this).attr('a-pid'),
                        connectCount: $(this).attr('a-connectCount'),
                        isTest: $(this).attr('a-aType')==200
                    }
                    accountModels.push(accountItem)
                    accounts.push($(this).val())
                    if (accountItem.isTest) isTest = true;
                }
            });
            if (accountModels.length == 0) { alert('请选择账号'); return; }
            if (!isSame(accountModels, 'pid')) { alert('必须选择相同的产品'); return; }
            if (!isSame(accountModels, 'connectCount')) { alert('必须选择相同的连接数'); return; }
            if (isTest) { alert('测试账号暂不支持续费，请新开正式账号'); return; }
            window.location.href = "/product/rebuyindex?productId=" + accountModels[0].pid + "&accounts=" + accounts.join(",");
        })

        $("#checkAll").on('click', function () {
            console.log($(this).prop("checked"),"check")
            $("td > input:checkbox").prop("checked", $(this).prop("checked"))
        })
    });
</script>