@{
    Layout = "_UserLayout";
}
<style>
    .col-sm-12 {
        padding:0;
        margin:0;
    }
    #getapi>.row {
        padding:10px;
        border-bottom:1px dashed #ccc;
    }
</style>
<div id="app">
    <h3>短效套餐</h3>
    <ul id="myTab" class="nav nav-tabs" style="position:inherit;">
        <li class="active">
            <a href="#all" v-on:click="get_package_list()" data-toggle="tab">全部套餐</a>
        </li>
        <li><a href="#order" v-on:click="get_order_list()" data-toggle="tab">购买记录</a></li>
        <li><a href="#getapi" v-on:click="get_ip()"  data-toggle="tab">提取短效</a></li>
    </ul>
    <br>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="all">
            
            <div class="col-sm-12">
                <table class="products-table responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
                    <thead>
                        <tr>
                            <th>套餐类型</th>
                            <th>当日可用ip数量(个)</th>
                            <th>有效时长</th>
                            <th>过期时间</th>
                            <th>是否过期</th>
                            <th>续费</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in pakage_list">
                            <td>{{item.name}}</td>
                            <td>{{item.remainingAmount}}</td>
                            <td>{{item.durationType}}</td>
                            <td>{{item.expireTime}}</td>
                            <td>{{item.isExpired}}</td>
                            <td v-if="item.planType != 22"><a class="btn btn-block btn-new" v-on:click="rebuy(item)" data-toggle="modal" data-target="#myModal">续费</a> </td>
                            <td v-if="item.planType == 22"> 不支持续费 </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="tab-pane fade" id="order">
            <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>有效时长</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.package_type}}</td>
                            <td>{{item.durationType}}</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="getapi">
            <div class="row">
                <div class="col-md-2 text-right;">
                    请选择提取类型
                </div>
                <div class="col-md-10">
                    <select v-model="api_link_item.pack" @@change="chaneg_type" class="form-control  input-sm" style="height:auto;width:39%" >
                        <option v-for="item in pakage_list" :value="item.id">({{item.id}}){{item.name}}</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 text-right;">
                    提取数量
                </div>
                <div class="col-md-10">
                    <input v-model="api_link_item.num" min=1 max=200 style="max-width:100px;color:black;" type="number" value="1">个IP <span style="color:#ccc;">单次可提取最大数量 200 个</span>
                </div>
            </div>
            <div class="row" id="gt">
                <div class="col-md-2 text-right;">
                    提取时长
                </div>
                <div class="col-md-10">
                    <label class="radio-inline">
                        <input v-model="api_link_item.gt" type="radio" name="gt" value="0" checked>默认
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.gt" type="radio" name="gt" value="1"> 1分钟以上
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.gt" type="radio" name="gt" value="2"> 2分钟以上
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.gt" type="radio" name="gt" value="3"> 3分钟以上
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.gt" type="radio" name="gt" value="4"> 4分钟以上
                    </label>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-2 text-right;">
                    IP协议
                </div>
                <div class="col-md-10">
                    <label class="radio-inline">
                        <input v-model="api_link_item.port" type="radio" name="port" value="1" checked>HTTP
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.port" type="radio" name="port" value="2"> SOCKS5
                    </label>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-2 text-right;">
                    数据格式
                </div>
                <div class="col-md-10">
                    <label class="radio-inline">
                        <input v-model="api_link_item.type" type="radio" name="type" value="1" checked> TXT
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.type" type="radio" name="type" value="2"> JSON
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.type" type="radio" name="type" value="3"> HTML
                    </label>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-2 text-right;">
                    换行符
                </div>
                <div class="col-md-10">
                    <label class="radio-inline">
                        <input v-model="api_link_item.lb" type="radio" name="lb" value="1" checked> 回车换行(\r\n)
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.lb" type="radio" name="lb" value="3"> 回车(\r)
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.lb" type="radio" name="lb" value="4"> 换行(\n)
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.lb" type="radio" name="lb" value="5"> Tab(\t)
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.lb" type="radio" name="lb" value="6"> 其他符号： 
                    </label>
                    <input v-model="api_link_item.clb" type="text" placeholder="请输入换行符">
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 text-right;">
                    地区选择
                </div>
                <div class="col-md-10">
                    <p><a style="cursor: pointer; " v-on:click="selectAll()">全选</a> <a style="cursor: pointer; " v-on:click="deselectAll()">清除</a> </p>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" checked="true" name="regions" value="110000"> 北京市
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="120000"> 天津市
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="130000"> 河北市
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="140000"> 山西市
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="210000"> 辽宁市
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="220000"> 吉林市
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="310000"> 上海市
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="320000"> 江苏省
                    </label>
                    <br>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="330000"> 浙江省
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="340000"> 安徽省
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="350000"> 福建省
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="360000"> 江西省
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="370000"> 山东省
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="410000"> 河南省
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="420000"> 湖北省
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="430000"> 湖南省
                    </label>
                    <br>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="440000"> 广东省
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="460000"> 海南省
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="500000"> 重庆市
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="510000"> 四川省
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="520000"> 贵州省
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="530000"> 云南省
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="610000"> 陕西省
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="620000"> 甘肃省
                    </label>
                    <br>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="630000"> 青海省
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="230000"> 黑龙江省
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="540000"> 西藏自治区
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="150000"> 内蒙古自治区
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="450000"> 广西壮族自治区
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="640000"> 宁夏回族自治区
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="regions" name="regions" value="650000"> 新疆维吾尔自治区
                    </label>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-2 text-right;">
                    IP去重
                </div>
                <div class="col-md-10" id="bqc">
                    <label class="radio-inline">
                        <input v-model="api_link_item.distinct" type="radio" name="distinct" value="2" checked>严格去重
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.distinct" type="radio" name="distinct" value="0"> 不去重
                    </label>
                </div>
                <div style="display:none;" class="col-md-10" id="qc">
                    不去重
                </div>
                
            </div>
            <div class="row">
                <div class="col-md-2 text-right;">
                    运营商
                </div>
                <div class="col-md-10">
                    <label class="radio-inline">
                        <input v-model="api_link_item.isp" type="radio" name="isp" value="0" checked>不限
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.isp" type="radio" name="isp" value="4"> 联通
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.isp" type="radio" name="isp" value="2"> 电信
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 text-right;">
                    自动添加白名单
                </div>
                <div class="col-md-10">
                    <label class="radio-inline">
                        <input v-model="api_link_item.aw" type="radio" name="aw" value="0">不自动
                    </label>
                    <label class="radio-inline" v-on:click="autowhiteip()">
                        <input v-model="api_link_item.aw" type="radio" name="aw" value="1"> 自动
                    </label>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-2 text-right;">
                    签权模式
                </div>
                <div class="col-md-10">
                    <label class="radio-inline" v-on:click="qqms(1)">
                        <input v-model="api_link_item.at" type="radio" name="at" value="1" checked>白名单
                    </label>
                    <label class="radio-inline" v-on:click="qqms(2)">
                        <input v-model="api_link_item.at" type="radio" name="at" value="2"> 白名单+账密
                    </label>
                    <label class="radio-inline" id="at" v-on:click="qqms(3)">
                        <input v-model="api_link_item.at" type="radio" name="at" value="3"> 仅账号密码
                    </label>
                </div>
            </div>
            <div class="row" id="sp">
                <div class="col-md-2 text-right;">
                    分隔符
                </div>
                <div class="col-md-10">
                    <label class="radio-inline">
                        <input v-model="api_link_item.sp" type="radio" name="sp" value="1" checked>竖线（|）
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.sp" type="radio" name="sp" value="2"> 斜线（/）
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.sp" type="radio" name="sp" value="3"> 冒号（:）
                    </label>
                    <label class="radio-inline">
                        <input v-model="api_link_item.sp" type="radio" name="sp" value="6"> 自定义： 
                    </label>
                    <input v-model="api_link_item.csp" type="text" placeholder="请输入分割符">
                </div>
            </div>
            <div class="row text-center">
                <button v-on:click="create_api_link()" class="btn btn-new btn-lg">生成API链接</button>
            </div>
            <div class="row">
                <p style="white-space: nowrap;float:left;border:1px solid #ccc;padding:7px;width:70%;height:40px;overflow:hidden;">{{api_link}}</p>
                <button v-on:click="copy_url" class="btn btn-new">复制链接</button>
                <a target="_blank" :href="api_link" class="btn btn-new">打开链接</a>
            </div>
            <div class="row" style="border:1px dashed #ccc;">
                <table class="table table-bordered">
                    <caption>请求参数注释</caption>
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>类型</th>
                            <th>必选</th>
                            <th>说明</th>
                        </tr>
                    </thead>
                    <tbody><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">pt</td><td class="center">int</td><td class="center">是</td><td>套餐类型，0或12-储值套餐，21-短效包天，22-短效包量，23-短效无限量，29-终身免费VIP套餐，31-长效套餐</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}"><td class="center">num</td><td class="center">int</td><td class="center">是</td><td>提取IP数量</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">gt</td><td class="center">int</td><td class="center">否</td><td>提取时长 0-默认 1-1分钟以上 2-2分钟以上 3-3分钟以上 4-4分钟以上 </td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}"><td class="center">regions</td><td class="center">string</td><td class="center">否</td><td>多个用英文逗号换行,不传表示随机</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">isp</td><td class="center">int</td><td class="center">是</td><td>0:不限 4:联通 2:电信</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}"><td class="center">port</td><td class="center">int</td><td class="center">是</td><td>IP协议 1:HTTP 2:SOCK5</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">time</td><td class="center">int</td><td class="center">否</td><td>有效时长 1-0.1至1分钟 5-1至5分钟 25-5至25分钟 180-25至180分钟 360-3至6小时</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}"><td class="center">type</td><td class="center">int</td><td class="center">否</td><td>数据格式：1:TXT 2:JSON 3:html</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">pack</td><td class="center">int</td><td class="center">否</td><td>用户套餐ID</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}"><td class="center">ts</td><td class="center">int</td><td class="center">否</td><td>是否显示IP过期时间: 1显示 0不显示</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">lb</td><td class="center">int</td><td class="center">否</td><td>换行符(1:\r\n 2:/br 3:\r 4:\n 5:\t 6 :自定义)</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}"><td class="center">clb</td><td class="center">string</td><td class="center">否</td><td>自定义换行符</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">sp</td><td class="center">int</td><td class="center">否</td><td>分隔符(1:竖线| 2:斜线/ 3:冒号 6 :自定义)</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}"><td class="center">csp</td><td class="center">string</td><td class="center">否</td><td>自定义分隔符</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">distinct</td><td class="center">int</td><td class="center">否</td><td>去重选择（2:严格去重。0:不去重）</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}"><td class="center">aw</td><td class="center">int</td><td class="center">否</td><td>是否将调用者自动添加到IP白名单（0:不自动添加。1:自动添加）</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">at</td><td class="center">int</td><td class="center">否</td><td>鉴权模式 1-白名单，2-白名单+账密严格鉴权，3-仅账密鉴权（无限量不可用）</td></tr><!--for6371000000238419--><!--ms-for-end:--></tbody>
                </table>
            </div>
            <div><div class="size-20 color-10 p-t-30">返回结果示例</div><pre class="layui-code layui-box layui-code-view"><h3 class="layui-code-h3">JSON<a href="javascript:;">code</a></h3><ol class="layui-code-ol"><li>{</li><li>    "code":0,</li><li>    "msg":"提示信息",</li><li>    "success":true,</li><li>    "data":[</li><li>        {</li><li>            "ip":"49.68.68.197",    //隧道ip （代理ip）</li><li>            "port":33220,           // 代理端口</li><li>            "expireTime":"2019-05-24 08:58:31"</li><li>        },</li><li>        {</li><li>            "ip":"58.218.201.108",  //隧道ip （代理ip）</li><li>            "port":2690,            // 代理端口</li><li>            "expireTime":"2019-05-24 08:55:31"</li><li>        }</li><li>    ]</li><li>}</li><li>                </li></ol></pre></div>
            <div class="row" style="border:1px dashed #ccc;">
                <table class="table table-bordered">
                    <caption>请求参数注释</caption>
                    <tbody><tr class="api-head"><td width="15%" class="center">名称</td><td width="40%" class="center">类型</td><td width="45%">说明</td></tr><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">success</td><td class="center">bool</td><td>是否成功</td></tr><!--for6375--><tr ms-class="{tr1:index%2==0}"><td class="center">code</td><td class="center">int</td><td>0表示成功，其他参见《错误代码》表</td></tr><!--for6375--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">ip</td><td class="center">string</td><td>IP</td></tr><!--for6375--><tr ms-class="{tr1:index%2==0}"><td class="center">port</td><td class="center">int</td><td>端口号</td></tr><!--for6375--><!--ms-for-end:--></tbody>
                </table>
            </div>
            <div class="row" style="border:1px dashed #ccc;">
                <table class="table table-bordered">
                    <caption>请求参数注释</caption>
                    <tbody><tr class="api-head"><td width="20%" class="center">错误编码</td><td width="50%" class="">错误提示</td><td width="30%">说明</td></tr><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">code:111</td><td class="">请在1秒后再次请求</td><td>提取链接请求太过频繁，超出限制</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}"><td class="center">code:113</td><td class="">请将192.168.0.0设置为白名单！</td><td>白名单未添加/白名单掉了</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">code:114</td><td class="">余额不足</td><td>账户金额消耗完毕</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}"><td class="center">code:115</td><td class="">请更换地区等条件重新生成api链接地址</td><td>没有资源或没有符合条件的数据</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">code:116</td><td class="">您的套餐今日已到达上限！</td><td>套餐内IP数量消耗完毕</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}"><td class="center">code:117</td><td class="">您的套餐pack传参有误!请检测您现在的ip是否在套餐所在账户！</td><td>检测本地白名单是不是在账户下</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">code:118</td><td class="">您的账户异常，请联系客服！</td><td>账户处于被禁用状态</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}"><td class="center">code:121</td><td class="">您的该套餐已经过期了！</td><td>套餐过期</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">code:401</td><td class="">IP:1.1.1.1:2000 Authentication failed！</td><td>白名单错误/使用的IP已经过期</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}"><td class="center">code:403</td><td class="">Sorry！The site has been banned！</td><td>客户目标网站异常，联系客服处理</td></tr><!--for6377999999523163--><!--ms-for-end:--></tbody>
                </table>
            </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><!-- /.modal -->
</div>
<script>
   var vm = new Vue({
	    el:'#app',
	    data:{
            pakage_list:[],
            order_list:[],
            rebuy_data:{
                title:'',
                packId:'',
                packType:'',
                periodType:1,
                periodAmount:1,
                durationType:5,
            },
            order_time_type:'天',
            order_info:{
                order_type:2,//1:预储值、2：短效无限量、3：短效包天、4：短效包量、5：长效游戏
                money:1,
                data:{}
            },

            api_link:'',
            api_link_item:{
                num:1
            },
            regions:[],
            user_detail:{},
	    },
        created:function(){
            this.get_package_list();
        },
	    methods:{
            get_package_list(){
                let data = {
                    cookie:document.cookie,
                }
                var that = this; 
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/user/dx_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_ip() {
                let data = {
                    cookie:document.cookie,
                }
                var that = this; 
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/user/get_user_token',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.user_detail.u = res.data.uid
                        that.user_detail.t = res.data.token
                    }
                });
            },
            autowhiteip(){
                this.api_link_item.u = this.user_detail.u
                this.api_link_item.t = this.user_detail.t
            },
            get_order_list() {
                let data = {
                    cookie:document.cookie,
                }
                var that = this; 
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/user/dx_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
                    }
                });
            },
            rebuy(r) {
                this.rebuy_data.title = r.name;
                this.rebuy_data.packId = r.id;
                this.rebuy_data.packType = r.planType;
                this.rebuy_data.durationType = r.durationType2;
                this.rebuy_data.ipAmount = r.ipAmount;

                if (r.planType == 21) {
                    this.order_info.order_type = 3;
                }
                if (r.planType == 23) {
                    this.order_info.order_type = 2;
                }
                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_package_list();
                        } 
                    }
                });
            },

            chaneg_type(r){
                var that = this;
                this.pakage_list.forEach(function(item,index,arr){

                    if (that.api_link_item.pack == item.id) {
                        that.api_link_item.pt = item.planType;
                        that.api_link_item.time = item.durationType2;
                        
                    }

                })
                if (that.api_link_item.pt != 23) {
                    $("#gt").hide();
                    $("#qc").hide();
                    $("#bqc").show();
                    $("#at").show();
                } else {
                    $("#gt").show();
                    $("#bqc").hide();
                    $("#qc").show();
                    $("#at").hide();
                    that.api_link_item.distinct = 0;
                }  
                if (that.api_link_item.pt == 21) {
                    $("#gt").show();
                }
            },
            qqms(i){
                if (i == 1) {
                    $("#sp").hide();
                } else {
                    $("#sp").show();
                }
            },
            create_api_link(){
                this.api_link = 'http://get.ip.juip.com/get/ip?';
                var regions_list = this.regions.join(",");
                
                for (let key in this.api_link_item) {
                    if (this.api_link_item.hasOwnProperty(key)) {
                        this.api_link += key + "=" + this.api_link_item[key]+'&';
                    }
                }
                this.api_link += 'regions=' + regions_list;
            },
            // 全选按钮点击事件处理程序
            selectAll() {
                var checkboxes = document.querySelectorAll('input[name="regions"]'); // 获取所有复选框元素
                
                for (var i = 0; i < checkboxes.length; i++) {
                    checkboxes[i].checked=true; // 将每个复选框的 checked 属性设置为 true
                    this.regions[i] = checkboxes[i].value;
                }
            },
            // 取消全选按钮点击事件处理程序
            deselectAll() {
                var checkboxes = document.querySelectorAll('input[name="regions"]'); // 获取所有复选框元素
                
                for (var i = 0; i < checkboxes.length; i++) {
                    checkboxes[i].checked=false; // 移除每个复选框的 checked 属性
                }
                this.regions = [];
            },
            copy_url() {
                this.create_api_link();
                var text = this.api_link;
                var textarea = document.createElement('textarea');
                textarea.style.position = 'fixed';
                textarea.style.opacity = 0;
                textarea.value = text;
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
            },
            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
                    }
                });
                switch(this.order_info.order_type) {
                    case 2:
                        this.order_info.money = this.order_info.data.periodAmount * price_info.price;
                    break;
                    case 3:
                        this.order_info.money = this.order_info.data.periodAmount * price_info.price * this.order_info.data.ipAmount;
                    break;
                }

                this.order_info.money = this.order_info.money.toFixed(2);
            }
	    }
	});
</script>