juipnet/Host/Views.Mobile/User/MyAccounts.cshtml

@using Hncore.Infrastructure.Data
@using Hncore.Pass.Vpn.Domain
@using Hncore.Infrastructure.Extension
@using ViewComponents
@model List<ProductAccountEntity>
@{
    Layout = "_UserLayout";
}
    <div id="app">
        @*<div class="qq">
            <img src="~/m/img/smile.png"> 为给您带来更好的服务体验，请完善QQ号和微信号
        </div>*@
        <div class="chaxun2">
            <input type="text" v-model="searchModel.Keyword" placeholder="账号" /><button type="button" class="btnOrange" v-on:click="search">查询</button>
        </div>
        <div class="row riqi">
            <div class="col-sm-4 col-xs-4">
                日期查询：
            </div>
            <div class="col-sm-4 col-xs-4">
                <input type="text" name="start_date" id="start_date" placeholder="选择开通日期" readonly="readonly" v-model="searchModel.BTime" />
            </div>
            <div class="col-sm-4 col-xs-4">
                <input type="text" name="end_date" id="end_date" placeholder="选择到期日期" readonly="readonly" v-model="searchModel.ETime" />
            </div>
        </div>

        <div class="row shaixuan">
            <div class="col-sm-4 col-xs-4">
                <select v-model="searchModel.ProductId">
                    <option value="0">全部产品</option>
                    <option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
                </select>
            </div>
            <div class="col-sm-4 col-xs-4">
                <select v-model="searchModel.PackageId">
                    <option value="0">全部套餐</option>
                    <option v-for="item in packages" :value="item.Id">{{item.Name}}</option>
                </select>
            </div>
            <div class="col-sm-4 col-xs-4">
                <button type="button" class="btnRenzheng"><img src="~/m/img/renzheng.png">老账号认证</button>
            </div>
        </div>

        <table border="0" cellspacing="0" cellpadding="0" class="orderTable">
            <tr>
                <th><input type="checkbox" name="" id="checkAll" value="" style="width: 0.4rem;height: 0.4rem;" /></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" style="width: 0.4rem;height: 0.4rem;" /></td>
                <td>@item.ProductName/@item.PackageName</td>
                <td>@item.Account</td>
                <td>
                    <button type="button" class="btnXq toDetail"
                            a-UserCode="@item.UserCode"
                            a-ProductName="@item.ProductName"
                            a-PackageName="@item.PackageName"
                            a-Account="@item.Account"
                            a-Pwd="@item.Pwd"
                            a-ConnectCount="@item.ConnectCount"
                            a-StartTime="@item.StartTime"
                            a-EndTime="@item.EndTime"
                            a-RestTime="@item.RestTime">
                        详情
                    </button>
                    <a class="btnXq" asp-action="OnLine" asp-controller="User" asp-route-productId="@item.ProductId" asp-route-account="@item.Account">
                        <button type="button" class="btnXq" style="margin-top:3px">查看</button> 
                    </a>
                   
                </td>
            </tr>
            } 
        </table>
        @*<div  class="fenye" style="margin-top: -210px;margin-bottom: 200px;">
            @await Component.InvokeAsync("Pager", new PagerModel() { Total = Model.RowCount, PageIndex = this.Context.Request.GetInt("PageIndex") })
        </div>*@

        <div class="bottomBar">
            <button type="button" class="btnXu btn-rebuy"><img src="~/m/img/xufei.png">续费</button><button type="button" class="btnTui btn-refund"><img src="~/m/img/tui.png">退货</button>
        </div>

        <!-- 认证弹窗 -->
        <div class="renzhengMask">
            <div class="renzhenKuang">
                <img src="~/m/img/close.png" class="renzhengClose">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs renzhengTab" role="tablist">
                    <li role="presentation" class="active"><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">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <div class="renzhengModel">
                            <div class="item">
                                选择产品
                            </div>
                            <div class="item chooseCp">
                                <select v-model="oneAuthModel.ProductId">
                                    <option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="renzhengModel">
                            <div class="item">
                                输入账号
                            </div>
                            <div class="item renzhengInput">
                                <input type="text" v-model="oneAuthModel.Account" />
                            </div>
                        </div>
                        <div class="renzhengModel">
                            <div class="item">
                                验证密码
                            </div>
                            <div class="item renzhengInput">
                                <input type="text" v-model="oneAuthModel.Pwd" />
                            </div>
                        </div>
                        <p class="btnRz" v-on:click="accountOneAuth">认证账号</p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="profile">

                        <div class="renzhengModel">
                            <div class="item">
                                选择产品
                            </div>
                            <div class="item chooseCp">
                                <select v-model="mutilAuthModel.ProductId">
                                    <option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="renzhengModel">
                            <div class="item">
                                账号前缀
                            </div>
                            <div class="item renzhengInput">
                                <input type="text" v-model="mutilAuthModel.Account" />
                            </div>
                        </div>
                        <div class="renzhengModel">
                            <div class="item">
                                开始数
                            </div>
                            <div class="item renzhengInput">
                                <input type="number" v-model="mutilAuthModel.StartNum" />
                            </div>
                        </div>
                        <div class="renzhengModel">
                            <div class="item">
                                认证个数
                            </div>
                            <div class="item renzhengInput">
                                <input type="number" v-model="mutilAuthModel.Count" />
                            </div>
                        </div>
                        <div class="renzhengModel">
                            <div class="item">
                                验证密码
                            </div>
                            <div class="item renzhengInput">
                                <input type="text" v-model="mutilAuthModel.Pwd" />
                            </div>
                        </div>
                        <p v-if="mutilAuthLoading" style="margin:8px;color:red;text-align:center">认证中,请耐心等待...</p>
                        <p class="btnRz" v-on:click="accountMutilAuth">认证账号</p>
                    </div>

                </div>
            </div>
        </div>

        <!-- 弹窗详情 -->
        <div class="layerTable">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td>用户：</td>
                    <td>{{currentAccount.UserCode}}</td>
                </tr>
                <tr>
                    <td>产品：</td>
                    <td>{{currentAccount.ProductName}}</td>
                </tr>
                <tr>
                    <td>套餐：</td>
                    <td>{{currentAccount.PackageName}}</td>
                </tr>
                <tr>
                    <td>账号：</td>
                    <td>{{currentAccount.Account}}</td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>{{currentAccount.Pwd}}</td>
                </tr>
                <tr>
                    <td>连接数：</td>
                    <td>{{currentAccount.ConnectCount}}</td>
                </tr>
                <tr>
                    <td>开通时间：</td>
                    <td>{{currentAccount.StartTime}}</td>
                </tr>
                <tr>
                    <td>到期时间：</td>
                    <td>{{currentAccount.EndTime}}</td>
                </tr>
                <tr>
                    <td>剩余时间：</td>
                    <td>{{currentAccount.RestTime}}</td>
                </tr>
            </table>
            <div class="back">
                <img src="~/m/img/arrowback.png"> 返回列表
            </div>
        </div>


    </div>

<script src="~/m/js/LCalendar.js" type="text/javascript" charset="utf-8"></script>


<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            mutilAuthLoading: false,
            productWithPackage: [],
            packages: [],
            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
            },
            currentAccount: {
                UserCode: "",
                ProductName: "",
                PackageName: "",
                Account: "",
                Pwd: "",
                ConnectCount: "",
                StartTime: "",
                EndTime: "",
                RestTime: "",
            }
        },
        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
            }
        },
        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 = [];
                for (var item in this.searchModel) {
                    var p = item + "=" + this.searchModel[item];
                    ps.push(p);
                }
                window.location.href = "?" + ps.join("&");
            },
            accountOneAuth() {
                if (this.oneAuthModel.ProductId ==0) {
                    alert('请选择产品')
                    return;
                }
                if (this.oneAuthModel.Account == '' || this.oneAuthModel.Pwd == '') {
                    alert('账号和密码不能为空')
                    return;
                }
                $.ajax({
                    type: 'POST',
                    url: '/user/OrginAccountAuth',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(this.oneAuthModel),
                    success: function (res) {
                        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)
                        }
                    }
                });
            },
            setAccountInfo(info) {
                this.currentAccount = info;
            }
        }
    })
    function showDetail(_self) {
        var currentOrder = {
            UserCode: $(_self).attr('a-UserCode'),
            ProductName: $(_self).attr('a-ProductName'),
            PackageName: $(_self).attr('a-PackageName'),
            Account: $(_self).attr('a-Account'),
            Pwd: $(_self).attr('a-Pwd'),
            ConnectCount: $(_self).attr('a-ConnectCount'),
            StartTime: $(_self).attr('a-StartTime'),
            EndTime: $(_self).attr('a-EndTime'),
            RestTime: $(_self).attr('a-RestTime'),
        }
        app.setAccountInfo(currentOrder);
        $(_self).show();
    }
    $(function () {
         //退款
        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.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,
                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; }
            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(account)
                    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(",");
        })


        $(".toDetail").click(function () {
            showDetail($(this))
            $(".layerTable").show();
        });
        $(".back").click(function () {
            $(".layerTable").hide();
        })
        $(".btnRenzheng").click(function () {
            $(".renzhengMask").show();
        });
        $(".renzhengClose").click(function () {
            $(".renzhengMask").hide();
        });
        $("#checkAll").on('click', function () {
            console.log($(this).prop("checked"), "check")
            $("td > input:checkbox").prop("checked", $(this).prop("checked"))
        })
    });
</script>

<script type="text/javascript">
    var calendar = new LCalendar();
    calendar.init({
        'trigger': '#start_date', //标签id
        'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
        'minDate': (new Date().getFullYear() - 3) + '-' + 1 + '-' + 1, //最小日期
        'maxDate': (new Date().getFullYear() + 3) + '-' + 12 + '-' + 31 //最大日期
    });
    var calendar = new LCalendar();
    calendar.init({
        'trigger': '#end_date', //标签id
        'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
        'minDate': (new Date().getFullYear() - 3) + '-' + 1 + '-' + 1, //最小日期
        'maxDate': (new Date().getFullYear() + 3) + '-' + 12 + '-' + 31 //最大日期
    });

</script>