@{
    Layout = "_UserLayout";
}
<style>
    .table{
        width: 70%;
    }
</style>
<div id="app" class="text-center" style="margin:2rem 5rem">
    <h1>代理平台api接口文档</h1>
    <h3 style="color:red;">警告：请勿在前台页面直接请求接口，容易产生盗号风险，请在后台进行模拟请求，隐藏请求地址。</h3>
    <h5>请求基础接口url：https://php-api.juip.com</h5>
    <h5>apikey：请联系客服查询</h5>
    <table id="product" class="table table-bordered table-striped">
        <caption>特殊参数说明：product：对应产品参数;package：对应套餐参数</caption>
        <thead>
            <tr>
                <th class="text-center">产品(product)</th>
                <th class="text-center">套餐(package)</th>
                <th class="text-center">参数</th>
                <th class="text-center">套餐</th>
            </tr>
        </thead>
        <tbody v-for="pkg in product_list">
            <tr :sequence="pkg.Id" fid="0">
                <td>{{pkg.Name}}</td>
                <td></td>
                <td>{{pkg.Id}}</td>
                <td><button class="bookShow" status="true">展开套餐</button></td>
            </tr>
            <tr style="background-color: #ccc;" v-for="info in package_list" v-if="pkg.Id == info.ProductId" :sequence="info.Id" :fid="info.ProductId">
                <td>{{info.ProductName}}</td>
                <td>{{info.Name}}</td>
                <td>{{info.Id}}</td>
                <td></td>
            </tr>
        </tbody>

    </table>

    <hr>
    <div class="text-left">
        <div>
            <h4>一、新开测试</h4>
            <h5>接口地址：/api/account/createTest?apikey=1232455165&product=5&package=61&account=27test1231&pwd=123</h5>
            <h5>请求方式：GET </h5>
            <table class="table table-bordered text-center">
                <caption>请求参数：</caption>
                <tbody>
                    <tr>
                        <td>apikey</td>
                        <td>唯一key值</td>
                    </tr>
                    <tr>
                        <td>product</td>
                        <td>产品  如：1</td>
                    </tr>
                    <tr>
                        <td>package</td>
                        <td>套餐 如 1</td>
                    </tr>
                    <tr>
                        <td>account</td>
                        <td>账号 如 test</td>
                    </tr>
                    <tr>
                        <td>pwd</td>
                        <td>密码 如 123</td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-bordered text-center">
                <caption>返回数据：</caption>
                <tbody>
                    <tr>
                        <td>Code</td>
                        <td>10000 开通成功/其他 开通失败</td>
                    </tr>
                    <tr>
                        <td>Message</td>
                        <td>返回提示</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div>
            <h4>二、新开正式账号</h4>
            <h5>接口地址：/api/account/createAccount?apikey=1232455165&package=17&account=test123211&pwd=123&connect=1&type=1</h5>
            <h5>请求方式：GET </h5>
            <table class="table table-bordered text-center">
                <caption>请求参数：</caption>
                <tbody>
                    <tr>
                        <td>apikey</td>
                        <td>唯一key值</td>
                    </tr>
                    <tr>
                        <td>package</td>
                        <td>套餐 如 1</td>
                    </tr>
                    <tr>
                        <td>account</td>
                        <td>账号 如 test</td>
                    </tr>
                    <tr>
                        <td>pwd</td>
                        <td>密码 如 123</td>
                    </tr>
                    <tr>
                        <td>connect</td>
                        <td>连接数</td>
                    </tr>
                    <tr>
                        <td>type</td>
                        <td>类型{1；新开，3：续费}</td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-bordered text-center">
                <caption>返回数据：</caption>
                <tbody>
                    <tr>
                        <td>Code</td>
                        <td>10000 开通成功/其他 开通失败</td>
                    </tr>
                    <tr>
                        <td>Message</td>
                        <td>返回提示</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div>
            <h4>三、修改账号密码</h4>
            <h5>接口地址：/api/account/updateAccountPwd?apikey=1232455165&account=test123211&pwd=123&newPwd=123533</h5>
            <h5>请求方式：GET </h5>
            <table class="table table-bordered text-center">
                <caption>请求参数：</caption>
                <tbody>
                    <tr>
                        <td>apikey</td>
                        <td>唯一key值</td>
                    </tr>
                    <tr>
                        <td>account</td>
                        <td>账号 如 test</td>
                    </tr>
                    <tr>
                        <td>pwd</td>
                        <td>旧密码</td>
                    </tr>
                    <tr>
                        <td>newPwd</td>
                        <td>新密码</td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-bordered text-center">
                <caption>返回数据：</caption>
                <tbody>
                    <tr>
                        <td>Code</td>
                        <td>10000 修改成功/其他 修改失败</td>
                    </tr>
                    <tr>
                        <td>Message</td>
                        <td>返回提示</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div>
            <h4>四、获取在线账号</h4>
            <h5>接口地址：/api/account/onLine?apikey=1232455165&product=1&account=tj8372</h5>
            <h5>请求方式：GET </h5>
            <table class="table table-bordered text-center">
                <caption>请求参数：</caption>
                <tbody>
                    <tr>
                        <td>apikey</td>
                        <td>唯一key值</td>
                    </tr>
                    <tr>
                        <td>account</td>
                        <td>账号 如 test</td>
                    </tr>
                    <tr>
                        <td>product</td>
                        <td>产品</td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-bordered text-center">
                <caption>返回数据：</caption>
                <tbody>
                    <tr>
                        <td>Code</td>
                        <td colspan="2">10000 成功/其他 失败</td>
                    </tr>
                    <tr>
                        <td>Message</td>
                        <td colspan="2">返回提示</td>
                    </tr>
                    <tr>
                        <td rowspan="8">Data<br>返回在线数据（json）</td>
                        <td>Id</td>
                        <td>在线ID</td>
                    </tr>
                    <tr>
                        <td>Account</td>
                        <td>账号</td>
                    </tr>
                    <tr>
                        <td>LoginTime</td>
                        <td>登录时间</td>
                    </tr>
                    <tr>
                        <td>OnlineTime</td>
                        <td>在线时间</td>
                    </tr>
                    <tr>
                        <td>ServerIP</td>
                        <td>服务器IP</td>
                    </tr>
                    <tr>
                        <td>LoginIP</td>
                        <td>登录IP</td>
                    </tr>
                    <tr>
                        <td>UpStream</td>
                        <td>上行</td>
                    </tr>
                    <tr>
                        <td>DownStream</td>
                        <td>下行</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div>
            <h4>五、踢线</h4>
            <h5>接口地址：/api/account/killOut?apikey=1232455165&product=5&id=70329966</h5>
            <h5>请求方式：GET </h5>
            <table class="table table-bordered text-center">
                <caption>请求参数：</caption>
                <tbody>
                    <tr>
                        <td>apikey</td>
                        <td>唯一key值</td>
                    </tr>
                    <tr>
                        <td>id</td>
                        <td>在获取在线账号接口获得的Id</td>
                    </tr>
                    <tr>
                        <td>product</td>
                        <td>产品</td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-bordered text-center">
                <caption>返回数据：</caption>
                <tbody>
                    <tr>
                        <td>Code</td>
                        <td>10000 请求成功</td>
                    </tr>
                    <tr>
                        <td>Message</td>
                        <td>返回提示</td>
                    </tr>
                    <tr>
                        <td>Data</td>
                        <td>true：踢线成功/false：踢线失败</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div>
            <h4>六、查询账号信息</h4>
            <h5>接口地址：/api/account/queryAccount?apikey=1232455165&product=5&account=test1231</h5>
            <h5>请求方式：GET </h5>
            <table class="table table-bordered text-center">
                <caption>请求参数：</caption>
                <tbody>
                    <tr>
                        <td>apikey</td>
                        <td>唯一key值</td>
                    </tr>
                    <tr>
                        <td>account</td>
                        <td>账号</td>
                    </tr>
                    <tr>
                        <td>product</td>
                        <td>产品</td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-bordered text-center">
            <caption>返回数据：</caption>
                <tbody>
                    <tr>
                        <td>Code</td>
                        <td colspan="2">10000 成功/其他 失败</td>
                    </tr>
                    <tr>
                        <td>Message</td>
                        <td colspan="2">返回提示</td>
                    </tr>
                    <tr>
                        <td rowspan="8">Data<br>返回信息（json）</td>
                        <td>ProductName</td>
                        <td>产品名称</td>
                    </tr>
                    <tr>
                        <td>PackageName</td>
                        <td>产品套餐</td>
                    </tr>
                    <tr>
                        <td>Account</td>
                        <td>账号</td>
                    </tr>
                    <tr>
                        <td>ConnectCount</td>
                        <td>连接数</td>
                    </tr>
                    <tr>
                        <td>StartTime</td>
                        <td>开始时间</td>
                    </tr>
                    <tr>
                        <td>EndTime</td>
                        <td>结束时间</td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
</div>

<script>
    $(function () { 
        var sequence_fid;
        //1. 非父级元素 初始时隐藏
        $("#product tbody tr[fid!='0']").hide();
        //2. 点击“作品”按钮的触发事件
        $(".bookShow").click(function(){
            //status为true,则展开
            if($(this).attr('status') == 'true')
            {
                $(this).attr('status', 'false');  //表示已经展开
                sequence_fid = $(this).parent().parent().attr('sequence');
                $(`tbody tr[fid="${sequence_fid}"]`).show();
            }
            else  //status为false,则收起
            {
                $(this).attr('status', 'true');   //表示已收起
                sequence_fid = $(this).parent().parent().attr('sequence');
                $(`tbody tr[fid="${sequence_fid}"]`).hide();
            }
        })
    });

   var vm = new Vue({
        el:'#app',
        data:{
            product_list: [],
            package_list: [],
        },
        created:function(){
            this.post();
        },
        methods:{
            post:function(){
                var param = {};
                let cashOutData = {
                    cookie:document.cookie
                }
                $.ajax({
                    type: 'POST',
                    async:false,
                    url: 'https://php-api.juip.com/product/OpenProduct/getProductPackageList',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(cashOutData),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        param = res.data;
                    }
                });
                this.product_list = param.product_list;
                this.package_list = param.package_list;
            }
        }
    });
</script>