@{
    Layout = "_UserLayout";
}
<style>
    .col-sm-12 {
        padding:0;
        margin:0;
    }
</style>
<div id="app">
    <h3>长效套餐</h3>
    <ul id="myTab" class="nav nav-tabs" style="position:inherit;">
        <li v-on:click="get_ip_list()" class="active"><a href="#lang1" data-toggle="tab">已开通长效</a></li>
        <li v-on:click="get_package_list()"><a href="#lang2" data-toggle="tab">全部套餐</a></li>
        <li v-on:click="get_order_list()"><a href="#lang3" data-toggle="tab">购买记录</a></li>
        <li v-on:click="get_switch_ip_list()"><a href="#lang4" data-toggle="tab">IP切换记录</a></li>
    </ul>
    <br>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="lang1">
            <button style="margin-bottom:5px;" class="btn btn-new"  v-on:click="get_ip()" >批量提取IP</button>  
            <span> 格式：IP|http端口|socks5端口|账号|密码</span>
            <div class="col-sm-12">
                <table class="products-table responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
                    <thead>
                        <tr>
                            <th v-on:click="allcheck()"><input type="checkbox" id="allchecked" name="idsss" value=''></th>
                            <th>模式</th>
                            <th>节点入口IP</th>
                            <th>隧道出口IP</th>
                            <th>HTTP/SK5端口</th>
                            <th>归属地</th>
                            <th>带宽</th>
                            <th>线路</th>
                            <th>状态</th>
                            <th>账号/密码</th>
                            <th>过期时间</th>
                            <th>是否过期</th>
                            <th>续费</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in ip_list">
                            <td><input type="checkbox" v-model="idlist" checked="true" name="ids" :value="item.id"></td>
                            <td>{{item.isRelayed?'中继':'直连'}}</td>
                            <td>{{item.ip}}</td>
                            <td>{{item.realIp}}</td>
                            <td>{{item.httpPort}}/{{item.socks5Port}}</td>
                            <td>{{item.area}}</td>
                            <td>{{item.bandwidth}}M/{{item.lineType}}</td>
                            <td>{{item.shareType}}</td>
                            <td>{{item.state}}</td>
                            <td>{{item.username}}/{{item.password}}</td>
                            <td>{{item.expireTime}}</td>
                            <td>{{item.isExpired?'已经过期':'未过期'}}</td>
                            <td><a class="btn btn-new"  v-on:click="rebuy_ip(item)" data-toggle="modal" data-target="#myModal">续费</a> 
                            <a v-if="item.isAbroad && item.isRelayed" v-on:click="change_in(item)" class="btn btn-info"  data-toggle="modal" data-target="#change_in"  >切换入口</a>
                            <a class="btn btn-warning"  v-on:click="change_ip(item)" data-toggle="modal" data-target="#change_ip">切换节点</a></td>
                        </tr>
                    </tbody>
                </table>
                <nav>
                    <ul class="pager">
                        <li><a v-on:click="page_p()">上一页</a></li>
                        <li>当前页 第{{page.currentPage}}页 </li>
                        <li><a v-on:click="page_n()">下一页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="tab-pane fade" id="lang2">
            <div class="col-sm-12">
                <table class="products-table responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
                    <thead>
                        <tr>
                            <th>套餐类型</th>
                            <th>模式</th>
                            <th>可用ip数量(个)</th>
                            <th>过期时间</th>
                            <th>续费</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in pakage_list">
                            <td>{{item.isAbroad}}</td>
                            <td>{{item.shareType}}</td>
                            <td>{{item.ipAmount}}</td>
                            <td>{{item.expireTime}}</td>
                            <td><a class="btn btn-block btn-new"  v-on:click="rebuy(item)" data-toggle="modal" data-target="#myModal">续费</a> </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="tab-pane fade" id="lang3">
            <div class="col-sm-12">
                <table class="products-table responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
                    <thead>
                        <tr>
                            <th>订单号</th>
                            <th>订单类型</th>
                            <th>游戏类型</th>
                            <th>IP数量</th>
                            <th>实付金额</th>
                            <th>支付时间</th>
                            <th>续费</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in order_list">
                            <td>{{item.order_no}}</td>
                            <td>{{item.order_type}}</td>
                            <td>{{item.game_type}}</td>
                            <td>{{item.ip_count}}</td>
                            <td>{{item.money}}</td>
                            <td>{{item.create_time}}</td>
                            <td><a class="btn btn-block btn-new"  href="/product/http">再次购买</a> </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="tab-pane fade" id="lang4">
            <div class="col-sm-12">
                <table class="products-table responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
                    <thead>
                        <tr>
                            <th>原IP</th>
                            <th>原属地</th>
                            <th>切换后IP</th>
                            <th>切换后属地</th>
                            <th>切换方式</th>
                            <th>切换时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in switch_list">
                            <td>{{item.oldIp}}</td>
                            <td>{{item.oldArea}}</td>
                            <td>{{item.newIp}}</td>
                            <td>{{item.newArea}}</td>
                            <td>{{item.reason}}</td>
                            <td>{{item.createTime}}</td>
                        </tr>
                    </tbody>
                </table>
                <nav>
                    <ul class="pager">
                        <li><a v-on:click="page_p2()">上一页</a></li>
                        <li>当前页 第{{page2.currentPage}}页 </li>
                        <li><a v-on:click="page_n2()">下一页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </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">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        {{rebuy_data.title}}
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="col-sm-12 ">
                        <div class="boxes boxes-border-top text-left margin-top-30 clearfix">
                            <div class="col-sm-12">
                                <h5 class="margin-top-0">套餐周期：</h5>
                                <label class="radio-inline" v-on:click="set_btn_checked('dxwxl_tczq_','2','天')">
                                    <input type="radio" class="hide" v-model="rebuy_data.periodType" value="1"> <span id="dxwxl_tczq_2" class="btn btn-new btn-lg">按天</span>
                                </label>
                                <label class="radio-inline" v-on:click="set_btn_checked('dxwxl_tczq_','3','周')">
                                    <input type="radio" class="hide" v-model="rebuy_data.periodType" value="7"> <span id="dxwxl_tczq_3" class="btn btn-default btn-lg">按周</span>
                                </label>
                                <label class="radio-inline" v-on:click="set_btn_checked('dxwxl_tczq_','4','月')">
                                    <input type="radio" class="hide" v-model="rebuy_data.periodType" value="30"> <span id="dxwxl_tczq_4" class="btn btn-default btn-lg">按月</span>
                                </label>
                                <label v-if="rebuy_data.packType!=21" class="radio-inline" v-on:click="set_btn_checked('dxwxl_tczq_','5','季')">
                                    <input type="radio" class="hide" v-model="rebuy_data.periodType" value="90"> <span id="dxwxl_tczq_5" class="btn btn-default btn-lg">按季</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 ">
                        <div class="boxes boxes-border-top text-left margin-top-30 clearfix">
                            <div class="col-sm-12">
                                <h5 class="margin-top-0">购买时长：</h5>
                                <div class="btn-group" role="group" >
                                    <button type="button" v-on:click="gmsc_reduce()" class="btn btn-new">-</button>
                                    <button type="button" class="btn btn-default">{{rebuy_data.periodAmount}}{{order_time_type}}</button>
                                    <button type="button" v-on:click="gmsc_add()" class="btn btn-new">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 ">
                        <div class="boxes boxes-border-top text-left margin-top-30 clearfix">
                            <div class="col-sm-12">
                                <h5 class=" text-left">价格：￥{{order_info.money}} <span style="float:right;">
                                    <button class="btn btn-new" v-on:click="pay()" data-backdrop="static" >实付￥{{order_info.money}}</button>
                                </span></h5>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    
                </div>
            </div><!-- /.modal-content -->
        </div>
	</div><!-- /.modal -->

    
    <div class="modal fade" id="change_ip" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel1">
                        {{change_ip_data.title}}
                    </h4>
                </div>
                <div class="modal-body">
                    <div v-if="change_ip_data.isAbroad==0" class="col-sm-12 gameisp">
                        <div class="boxes boxes-border-top text-left margin-top-30 clearfix">
                            <div class="col-sm-12">
                                <h5 class="margin-top-0">运营商选择：</h5>
                                <label class="radio-inline" v-on:click="set_btn_checked('game_isp_','1','')">
                                    <input class="hide" v-model="change_ip_data.isp" name="gameisp" type="radio" value="0"> <span id="game_isp_1" class="btn btn-new btn-lg">普通线路</span>
                                </label>
                                <label class="radio-inline" v-on:click="set_btn_checked('game_isp_','2','')">
                                    <input class="hide" v-model="change_ip_data.isp" name="gameisp" type="radio" value="2"> <span id="game_isp_2" class="btn btn-default btn-lg">电信</span>
                                </label>
                                <label class="radio-inline" v-on:click="set_btn_checked('game_isp_','3','')">
                                    <input class="hide" v-model="change_ip_data.isp" name="gameisp" type="radio" value="3"> <span id="game_isp_3" class="btn btn-default btn-lg">移动</span>
                                </label>
                                <label class="radio-inline" v-on:click="set_btn_checked('game_isp_','4','')">
                                    <input class="hide" v-model="change_ip_data.isp" name="gameisp" type="radio" value="4"> <span id="game_isp_4" class="btn btn-default btn-lg">联通</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 panelback">
                        <div class="boxes boxes-border-top text-left margin-top-30 clearfix">
                            <div class="col-sm-12">
                                <h5 class="margin-top-0">地区选择：</h5>
                                <div class="col-md-4" style="padding:5px 5px 0 0;">
                                    <label class="radio-inline" style="width:100%;padding:0;" v-on:click="set_btn_checked('game_cityCode_','99','')">
                                        <input class="hide" v-model="change_ip_data.cityCode" name="gamecity" type="radio" value="0"> <span style="width:100%;" id="game_cityCode_99" class="btn btn-new btn-lg">随机地区</span>
                                    </label>
                                </div>
                                <div  v-for="(value,key) in cities" class="col-md-4" style="padding:5px 5px 0 0;">
                                    <label class="radio-inline" style="width:100%;padding:0;" v-on:click="set_btn_checked('game_cityCode_',key,'')">
                                        <input class="hide" v-model="change_ip_data.cityCode" name="gamecity" type="radio" :value="value.code"> <span style="width:100%;" :id="'game_cityCode_'+key" class="btn btn-default btn-lg">{{value.name}}</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 ">
                        <div class="boxes boxes-border-top text-left margin-top-30 clearfix">
                            <div class="col-sm-12">
                                <h5 class=" text-left">价格：￥{{order_info.money}} <span style="float:right;">
                                    <button class="btn btn-new" v-on:click="pay_change_ip()" data-backdrop="static" >实付￥{{order_info.money}}</button>
                                </span></h5>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    
                </div>
            </div><!-- /.modal-content -->
        </div>
	</div><!-- /.modal -->

    
    <div class="modal fade" id="change_in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel1">
                        切换入口
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="col-sm-12 gameisp">
                        <div class="boxes boxes-border-top text-left margin-top-30 clearfix">
                            <div class="col-sm-12">
                                <h5 class="margin-top-0">运营商选择：</h5>
                                <label class="radio-inline" v-on:click="set_btn_checked('change_in_isp_','1','')">
                                    <input class="hide" v-model="change_ip_data.isp" name="change_inisp" type="radio" value="0"> <span id="change_in_isp_1" class="btn btn-new btn-lg">普通线路</span>
                                </label>
                                <label class="radio-inline" v-on:click="set_btn_checked('change_in_isp_','2','')">
                                    <input class="hide" v-model="change_ip_data.isp" name="change_inisp" type="radio" value="2"> <span id="change_in_isp_2" class="btn btn-default btn-lg">电信</span>
                                </label>
                                <label class="radio-inline" v-on:click="set_btn_checked('change_in_isp_','3','')">
                                    <input class="hide" v-model="change_ip_data.isp" name="change_inisp" type="radio" value="3"> <span id="change_in_isp_3" class="btn btn-default btn-lg">移动</span>
                                </label>
                                <label class="radio-inline" v-on:click="set_btn_checked('change_in_isp_','4','')">
                                    <input class="hide" v-model="change_ip_data.isp" name="change_inisp" type="radio" value="4"> <span id="change_in_isp_4" class="btn btn-default btn-lg">联通</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 panelback">
                        <div class="boxes boxes-border-top text-left margin-top-30 clearfix">
                            <div class="col-sm-12">
                                <h5 class="margin-top-0">地区选择：</h5>
                                <div class="col-md-4" style="padding:5px 5px 0 0;">
                                    <label class="radio-inline" style="width:100%;padding:0;" v-on:click="set_btn_checked('change_in_cityCode_','99','')">
                                        <input class="hide" v-model="change_ip_data.cityCode" name="change_incity" type="radio" value="0"> <span style="width:100%;" id="change_in_cityCode_99" class="btn btn-new btn-lg">随机地区</span>
                                    </label>
                                </div>
                                <div  v-for="(value,key) in cities" class="col-md-4" style="padding:5px 5px 0 0;">
                                    <label class="radio-inline" style="width:100%;padding:0;" v-on:click="set_btn_checked('change_in_cityCode_',key,'')">
                                        <input class="hide" v-model="change_ip_data.cityCode" name="change_incity" type="radio" :value="value.code"> <span style="width:100%;" :id="'change_in_cityCode_'+key" class="btn btn-default btn-lg">{{value.name}}</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 ">
                        <div class="boxes boxes-border-top text-left margin-top-30 clearfix">
                            <div class="col-sm-12">
                                <h5 class=" text-left">价格：￥{{order_info.money}} <span style="float:right;">
                                    <button class="btn btn-new" v-on:click="pay_change_ip()" data-backdrop="static" >实付￥{{order_info.money}}</button>
                                </span></h5>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    
                </div>
            </div><!-- /.modal-content -->
        </div>
	</div><!-- /.modal -->

</div>
<script>
   var vm = new Vue({
	    el:'#app',
	    data:{
            get_ip_list_require:{
                "page": 1, //必填，当前页数
                "limit": 50, //必填，每页显示条数，建议10~20，不可超过100
                "packId": '', //可选，套餐id
                "isAbroad": '', //可选，是否海外，0-国内，1-海外
                "isExpired": 0, //可选，过期状态，0-全部，1-已过期，2-未过期
                "state": -1, //可选，IP状态：-1-全部 1-正常 0-异常（掉线），9-封禁
                "ip": '', //可选，具体IP地址
                "groupId":'', //可选，分组id，可通过2681接口查询
                "gameId": '', //可选，具体游戏id，可通过2691接口查询
                "cityCode":'', //可选，城市编码，可通过2692接口查询
                "orderBy":0,//可选，排序，0-默认最近购买时间，1-最早购买时间，2-最近过期时间，3-最迟过期时间，4-最近切换时间，5-最迟切换时间
            },
            page:{},
            page2:{},
            get_ip_switch_require:{
                "page": 1, //必填，当前页数
                "limit": 50, //必填，每页显示条数，建议10~20，不可超过100
            },
            ip_list:[],
            pakage_list:[],
            order_list:[],
            switch_list:[],
            
            rebuy_data:{
                title:'',
                packId:'',
                packType:'',
                periodType:1,
                isRelayed:0,
                periodAmount:1,
                isAbroad:0,
                ipAmount:1,
                ids:'',
                shareType:1,
                lineType:1,
                bandwidth:1,
            },
            order_time_type:'天',
            order_info:{
                order_type:5,//1:预储值、2：短效无限量、3：短效包天、4：短效包量、5：长效游戏 6:单个ip续费 7：切换ip
                money:1,
                data:{}
            },
            change_ip_data:{
                'title':'',
                "id": '', //必填，长效IP的id
                'isAbroad':0,
                "cityCode":0, //可选，城市编码，0表示随机，可通过2692接口查询
                "isp": 0, //可选，运营商，0表示随机不指定，仅限国内线路使用，2-电信，3-移动，4-联通,
                "switchPop": 0, //可选，切换标识，0-切换直连（出口IP），1-切换中继入口IP（仅限于中继线路）
                data:{}
            },
            cities:[],
            in_city_data:{
                'isAbroad':0,
                "isp": 0, //可选，运营商，0表示随机不指定，仅限国内线路使用，2-电信，3-移动，4-联通,
            },
            idlist:[],
            api_link:'',
            copy_url:'',

	    },
        created:function(){
            this.get_ip_list();
        },
	    methods:{
            get_ip_list() {
                let data = {
                    cookie:document.cookie,
                    data:this.get_ip_list_require
                }
                var that = this; 
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/user/lang_ip_list',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.ip_list = res.data.d.items;
                        that.page = res.data.d.pager;
                    }
                });
            },
            page_p() {
                if (this.page.currentPage != 1) {
                    this.get_ip_list_require.page--;
                    this.get_ip_list();
                }
            },
            page_n() {
                this.get_ip_list_require.page++;
                this.get_ip_list();
            },
            page_p2() {
                if (this.page2.currentPage != 1) {
                    this.get_ip_list_require.page--;
                    this.get_switch_ip_list();
                }
            },
            page_n2() {
                this.get_ip_list_require.page++;
                this.get_switch_ip_list();
            },
            get_package_list() {
                let data = {
                    cookie:document.cookie,
                }
                var that = this; 
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/user/cx_package',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.pakage_list = res.data
                    }
                });
            },
            get_order_list() {
                let data = {
                    cookie:document.cookie,
                }
                var that = this; 
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/user/cx_order',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.order_list = res.data
                    }
                });
            },
            get_switch_ip_list() {
                let data = {
                    cookie:document.cookie,
                    data:this.get_ip_list_require
                }
                var that = this; 
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/user/cx_switch',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.switch_list = res.data.d.items;
                        that.page2 = res.data.d.pager;
                    }
                });
            },
            rebuy(r) {
                this.rebuy_data.title = '长效IP订单续费';
                this.rebuy_data.packId = r.id;
                this.rebuy_data.packType = 31;
                this.rebuy_data.isAbroad = r.isAbroad2;
                this.order_info.order_type = 5;
                this.rebuy_data.ipAmount = r.ipAmount;
                this.rebuy_data.isRelayed = r.isRelayed;
                let _this=this
                setTimeout(function()  {
                
                    _this.calc_price()
                
                }, 500);
            },
            rebuy_ip(r) {
                this.rebuy_data.title = '长效IP续费';
                this.rebuy_data.packId = r.packId;
                this.rebuy_data.packType = 31;
                this.rebuy_data.isAbroad = r.isAbroad;
                this.rebuy_data.ids = r.id;
                this.order_info.order_type = 6;
                this.rebuy_data.ipAmount = 1;
                this.rebuy_data.isRelayed = r.isRelayed;
                this.rebuy_data.shareType = r.shareType2;
                this.rebuy_data.lineType = r.lineType2;
                this.rebuy_data.bandwidth = r.bandwidth;
                
                let _this=this
                setTimeout(function()  {
                
                    _this.calc_price()
                
                }, 500);
            },
            change_ip(r) {
                this.change_ip_data.title = '长效IP切换节点';
                this.change_ip_data.id = r.id;
                this.change_ip_data.isAbroad = r.isAbroad;
                this.change_ip_data.switchPop = 0;

                var city_re_data = {
                    "gameId": r.gameId,
                    "isAbroad": r.isAbroad,
                    "shareType": r.shareType2,
                    "isp": r.isp,
                };

                that = this;
                let data = {
                    cookie:document.cookie,
                    data: city_re_data
                }
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/product/out_city',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.cities = res.d.cities
                    }
                });
                this.rebuy_data.isAbroad = r.isAbroad;
                this.rebuy_data.ids = r.id;
                this.order_info.order_type = 6;
                this.rebuy_data.ipAmount = 1;
                this.rebuy_data.isRelayed = r.isRelayed;
                this.rebuy_data.shareType = r.shareType2;
                this.rebuy_data.lineType = r.lineType2;
                this.rebuy_data.bandwidth = r.bandwidth;
                this.change_ip_data.data = this.rebuy_data;
                this.calc_price()
                
            },
            change_in(r) {
                this.change_ip_data.id = r.id;
                this.change_ip_data.isAbroad = r.isAbroad;
                this.change_ip_data.switchPop = 1;
                this.rebuy_data.isAbroad = r.isAbroad;
                this.rebuy_data.ids = r.id;
                this.order_info.order_type = 6;
                this.rebuy_data.ipAmount = 1;
                this.rebuy_data.isRelayed = r.isRelayed;
                this.rebuy_data.shareType = r.shareType2;
                this.rebuy_data.lineType = r.lineType2;
                this.rebuy_data.bandwidth = r.bandwidth;
                this.change_ip_data.data = this.rebuy_data;
                var that = this

                
                var city_re_data = {
                    "gameId": r.gameId,
                    "isAbroad": r.isAbroad,
                    "shareType": r.shareType2,
                    "isp": r.isp,
                    "switchPop":1,
                    "packId":r.packId,
                };

                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/product/in_city',
                    dataType: "json",
                    async:false,
                    data:this.city_re_data,
                    success: function (res) {
                        that.cities = res.d.cities
                    }
                });
                this.calc_price()
            },
            set_btn_checked(id_f,id,text){
                var i = 0;
                if (text.length > 0) {
                    this.order_time_type = text
                }
                for (i=0;i<100;i++) {
                    $("#"+id_f+i).removeClass("btn-new");
                    $("#"+id_f+i).addClass("btn-default");
                }
                $("#"+id_f+id).removeClass("btn-default");
                $("#"+id_f+id).addClass("btn-new");

                let _this=this
                setTimeout(function()  {
                
                    _this.calc_price()
                
                }, 500);
            },
            gmsc_add(){
                this.rebuy_data.periodAmount++;
                this.calc_price()
            },
            //短效包天购买时长修改
            gmsc_reduce(){
                if (this.rebuy_data.periodAmount > 1) {
                    this.rebuy_data.periodAmount--;
                    this.calc_price()
                }
            },
            pay(){
                let that = this;
                this.order_info.data = this.rebuy_data;
                
                let data = {
                    cookie:document.cookie,
                    order_info: this.order_info
                }
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/order/rebuy_order',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        if (res.code == 1) {
                            $('#myModal').modal('hide');
                            alert(res.msg);
                            that.get_ip_list();
                            this.get_package_list();
                        } else {
                            alert(res.msg);
                        }
                    }
                });
            },
            pay_change_ip(){
                let that = this;
                this.order_info.data = this.change_ip_data;
                
                let data = {
                    cookie:document.cookie,
                    order_info: this.order_info
                }
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/order/change_ip_order',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        if (res.code == 1) {
                            $('#change_ip').modal('hide');
                            alert(res.msg);
                            that.get_ip_list();
                            this.get_package_list();
                        } else {
                            alert('剩余线路不足，切换下单失败，请稍后再试');
                        }
                    }
                });
            },
            calc_price() {
                var that = this;
                this.order_info.data = this.rebuy_data;

                var price_info = {
                    'ipAmount':0,
                    'price':0,
                };
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/product/calc_price',
                    dataType: "json",
                    async:false,
                    data: this.order_info,
                    success: function (res) {
                        price_info = res
                    }
                });
                this.order_info.money = this.order_info.data.periodAmount * this.order_info.data.ipAmount * price_info.price;

                this.order_info.money = this.order_info.money.toFixed(2);
            },
            allcheck(){
                var checkboxes = document.querySelectorAll('input[type="checkbox"]'); // 获取所有复选框元素

                if($("#allchecked").prop("checked")) {
                    for (var i = 0; i < checkboxes.length; i++) {
                        checkboxes[i].checked=true; // 将每个复选框的 checked 属性设置为 true
                    }
                }else {
                    for (var i = 0; i < checkboxes.length; i++) {
                        checkboxes[i].checked=false; // 移除每个复选框的 checked 属性
                    }
                }
                
            },
            get_ip(){
                var ids = '';
                var checkboxes = document.querySelectorAll('input[name="ids"]'); // 获取所有复选框元素
                for (var i = 0; i < checkboxes.length; i++) {
                    if (checkboxes[i].checked) {
                        ids += checkboxes[i].value + ',';
                    }
                }
                if(ids == '') {
                    alert('请选择ip！');
                    return;
                }
                let data = {
                    cookie:document.cookie,
                    data: {"ids":ids}
                }
                var that = this;
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/user/get_lang_ip',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        var val = '';
                        var i = 0;
                        for (i=0;i<res.d.ips.length;i++) {
                            val += res.d.ips[i].ip + '|' +res.d.ips[i].httpPort + '|' +res.d.ips[i].socks5Port + '|' +res.d.ips[i].username + '|' +res.d.ips[i].password + "\n"; 
                        }   
                        that.downTxt(val);
                    }
                });
            },
            downTxt(val) {
                let filename = "ip.txt"  //注意最好设置后缀.txt
                let value=val
                let elem = document.createElement('a');  //创建a标签
                elem.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(value));  //设置下载文件内容
                elem.setAttribute('download', filename);  //设置下载文件名
                elem.style.display = 'none';  //设置a标签默认隐藏
                document.body.appendChild(elem);  //添加至dom层
                elem.click();  //执行点击下载事件
                document.body.removeChild(elem);  //使用下载后移除a标签
            }

        }
	});
</script>