1230 lines
69 KiB
Plaintext
1230 lines
69 KiB
Plaintext
|
||
|
||
<div id="product" class="container ">
|
||
|
||
<!-- Shared Hosting Tabs -->
|
||
<section class="pricingtables section_sapce section_gray" style="padding:80px 0;">
|
||
<div class="section-title margin-bottom-25">
|
||
<h2><span>套餐多元，自主选择，城市覆盖广性价比高，服务态度都说好</span> 预存享超值优惠 海量IP池随心用</h2>
|
||
</div>
|
||
<div class="row">
|
||
<div class="container">
|
||
<div class="col-sm-12">
|
||
<div id="combo-tabs">
|
||
<ul>
|
||
<li v-on:click="tab(1)"><a href="#feature1"><b>预储值</b></a></li>
|
||
<li v-on:click="tab(2)"><a href="#feature2"><b>短效无限量</b></a></li>
|
||
<li v-on:click="tab(3)"><a href="#feature3"><b>短效包天</b></a> </li>
|
||
<li v-on:click="tab(4)"><a href="#feature4"><b>短效包量</b></a> </li>
|
||
<li v-on:click="tab(5)"><a href="#feature5"><b>长效游戏</b></a> </li>
|
||
</ul>
|
||
|
||
<!-- 1st tab -->
|
||
<div id="feature1">
|
||
<div class="tabfeatures">
|
||
<h2 class="padding-b50 text-center" style="padding-top: 45px;">充的越多送的越多</h2>
|
||
<div class="row main-feature">
|
||
<div class="col-sm-12 combo-prices">
|
||
|
||
<div class="col-sm-6 col-md-3 margin-top-30">
|
||
<div class="panel panel-info relative">
|
||
<div class="panel-heading">
|
||
<h3 class="text-center">￥<input v-model="order_info.money" type="number" style="width:30%;" /></h3>
|
||
</div>
|
||
<div class="panel-body text-center">
|
||
<div class="price-cercle">
|
||
<h3 class="text_primary">实到{{order_info.money}}H币</h3>
|
||
</div>
|
||
</div>
|
||
<ul class="text-center">
|
||
<li>国内长效月卡低至9.9元</li>
|
||
<li>国际长效月卡低至10元</li>
|
||
<li>多充多送更超值</li>
|
||
<li>省时省力更方便</li>
|
||
<li>支持购买任意套餐</li>
|
||
</ul>
|
||
<div class="panel-footer">
|
||
|
||
<a class="btn btn-new btn-lg" v-on:click="recharge(order_info.money)" data-backdrop="static" data-toggle="modal" data-target="#pay">自定义充值</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6 col-md-3 margin-top-30">
|
||
<div class="panel panel-info relative">
|
||
<div class="ribbon ribbon-small text-white">
|
||
<div class="ribbon-content bg_yellow text-uppercase ">送 ￥5%</div>
|
||
</div>
|
||
<div class="panel-heading">
|
||
<h3 class="text-center">￥200</h3>
|
||
</div>
|
||
<div class="panel-body text-center">
|
||
<div class="price-cercle">
|
||
<h3 class="text_primary">实到210H币</h3>
|
||
</div>
|
||
</div>
|
||
<ul class="text-center">
|
||
<li>国内长效月卡低至9.9元</li>
|
||
<li>国际长效月卡低至10元</li>
|
||
<li>多充多送更超值</li>
|
||
<li>省时省力更方便</li>
|
||
<li>支持购买任意套餐</li>
|
||
</ul>
|
||
<div class="panel-footer">
|
||
|
||
<a class="btn btn-new btn-lg" v-on:click="recharge(200)" data-backdrop="static" data-toggle="modal" data-target="#pay">立即充值</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md-3 margin-top-30">
|
||
<div class="panel panel-info relative">
|
||
<div class="ribbon ribbon-small text-white">
|
||
<div class="ribbon-content bg_yellow text-uppercase ">送 ￥10%</div>
|
||
</div>
|
||
<div class="panel-heading">
|
||
<h3 class="text-center">￥500</h3>
|
||
</div>
|
||
<div class="panel-body text-center">
|
||
<div class="price-cercle">
|
||
<h3 class="text_primary">实到550H币</h3>
|
||
</div>
|
||
</div>
|
||
<ul class="text-center">
|
||
<li>国内长效月卡低至9.9元</li>
|
||
<li>国际长效月卡低至10元</li>
|
||
<li>多充多送更超值</li>
|
||
<li>省时省力更方便</li>
|
||
<li>支持购买任意套餐</li>
|
||
</ul>
|
||
<div class="panel-footer">
|
||
|
||
<a class="btn btn-new btn-lg" v-on:click="recharge(500)" data-backdrop="static" data-toggle="modal" data-target="#pay">立即充值</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6 col-md-3 margin-top-30">
|
||
<div class="panel panel-info relative">
|
||
<div class="ribbon ribbon-small text-white">
|
||
<div class="ribbon-content bg_yellow text-uppercase ">送 ￥15%</div>
|
||
</div>
|
||
<div class="panel-heading">
|
||
<h3 class="text-center">￥1000</h3>
|
||
</div>
|
||
<div class="panel-body text-center">
|
||
<div class="price-cercle">
|
||
<h3 class="text_primary">实到1150H币</h3>
|
||
</div>
|
||
</div>
|
||
<ul class="text-center">
|
||
<li>国内长效月卡低至9.9元</li>
|
||
<li>国际长效月卡低至10元</li>
|
||
<li>多充多送更超值</li>
|
||
<li>省时省力更方便</li>
|
||
<li>支持购买任意套餐</li>
|
||
</ul>
|
||
<div class="panel-footer">
|
||
|
||
<a class="btn btn-new btn-lg" v-on:click="recharge(1000)" data-backdrop="static" data-toggle="modal" data-target="#pay">立即充值</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
|
||
<div class="col-sm-4">
|
||
<div class="boxes border-dashed-2 margin-top-30 clearfix relative" style="background-color:white;">
|
||
<div class="ribbon ribbon-small text-white">
|
||
<div class="ribbon-content bg_yellow text-uppercase ">多送20%</div>
|
||
</div>
|
||
<div class="col-sm-12">
|
||
<h2>￥2000</h2>
|
||
<p>实到2400H币</p>
|
||
<p><a v-on:click="recharge(2000)" data-backdrop="static" data-toggle="modal" data-target="#pay" style="margin:0 auto;" class="btn btn-new btn-lg">立即充值</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="boxes border-dashed-2 margin-top-30 clearfix relative" style="background-color:white;">
|
||
<div class="ribbon ribbon-small text-white">
|
||
<div class="ribbon-content bg_yellow text-uppercase ">多送25%</div>
|
||
</div>
|
||
<div class="col-sm-12">
|
||
<h2>￥5000</h2>
|
||
<p>实到6250H币</p>
|
||
<p><a v-on:click="recharge(5000)" data-backdrop="static" data-toggle="modal" data-target="#pay" style="margin:0 auto;" class="btn btn-new btn-lg">立即充值</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="boxes border-dashed-2 margin-top-30 clearfix relative" style="background-color:white;">
|
||
<div class="ribbon ribbon-small text-white">
|
||
<div class="ribbon-content bg_yellow text-uppercase ">多送30%</div>
|
||
</div>
|
||
<div class="col-sm-12">
|
||
<h2>￥10000</h2>
|
||
<p>实到13000H币</p>
|
||
<p><a v-on:click="recharge(10000)" data-backdrop="static" data-toggle="modal" data-target="#pay" style="margin:0 auto;" class="btn btn-new btn-lg">立即充值</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2nd tab -->
|
||
<div id="feature2">
|
||
<div class="tabfeatures">
|
||
<h5 class="padding-b50 text-center" style="padding-top: 45px;">适用于每天需要大量高匿IP的用户使用，支持HTTP(S)、S5协议，IP可通过API获得集成在程序或软件中使用</h5>
|
||
<div class="row main-feature">
|
||
<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">
|
||
<input type="radio" v-model="dxwxl_data.durationType" class="hide" value="5"> <span class="btn btn-new btn-lg">1~5分钟</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>
|
||
<label class="radio-inline">
|
||
<input type="radio" class="hide" v-model="dxwxl_data.periodType" value="1060"> <span v-on:click="set_btn_checked('dxwxl_tczq_','1','小时')" id="dxwxl_tczq_1" class="btn btn-new btn-lg">按小时</span>
|
||
</label>
|
||
<label class="radio-inline">
|
||
<input type="radio" class="hide" v-model="dxwxl_data.periodType" value="1"> <span v-on:click="set_btn_checked('dxwxl_tczq_','2','天')" id="dxwxl_tczq_2" class="btn btn-default btn-lg">按天</span>
|
||
</label>
|
||
<label class="radio-inline">
|
||
<input type="radio" class="hide" v-model="dxwxl_data.periodType" value="7"> <span v-on:click="set_btn_checked('dxwxl_tczq_','3','周')" id="dxwxl_tczq_3" class="btn btn-default btn-lg">按周</span>
|
||
</label>
|
||
<label class="radio-inline">
|
||
<input type="radio" class="hide" v-model="dxwxl_data.periodType" value="30"> <span v-on:click="set_btn_checked('dxwxl_tczq_','4','月')" id="dxwxl_tczq_4" class="btn btn-default btn-lg">按月</span>
|
||
</label>
|
||
<label class="radio-inline">
|
||
<input type="radio" class="hide" v-model="dxwxl_data.periodType" value="90"> <span v-on:click="set_btn_checked('dxwxl_tczq_','5','季')" 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="dxwxl_gmsc_reduce()" class="btn btn-new">-</button>
|
||
<button type="button" class="btn btn-default">{{dxwxl_data.periodAmount}}{{order_time_type}}</button>
|
||
<button type="button" v-on:click="dxwxl_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" data-backdrop="static" data-toggle="modal" v-on:click="get_balance()" data-target="#pay">实付￥{{order_info.money}}</button></span></h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3rd tab -->
|
||
<div id="feature3">
|
||
<div class="tabfeatures">
|
||
<h5 class="padding-b50 text-center" style="padding-top: 45px;">适用于每天需要大量高匿IP的用户使用，支持HTTP(S)、S5协议，IP可通过API获得集成在程序或软件中使用</h5>
|
||
<div class="row main-feature">
|
||
<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">选择每日可使用IP数：</h5>
|
||
<div class="row">
|
||
<div class="col-sm-4">
|
||
<label class="radio-inline" v-on:click="set_btn_checked('dxbt_ipnum_','1','')">
|
||
<input type="radio" v-model="dxbt_data.ipAmount" class="hide" value="5000"> <span id="dxbt_ipnum_1" class="btn btn-new btn-lg">每日最多使用 5,000 个IP</span>
|
||
</label>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<label class="radio-inline" v-on:click="set_btn_checked('dxbt_ipnum_','2','')">
|
||
<input type="radio" v-model="dxbt_data.ipAmount" class="hide" value="10000"> <span id="dxbt_ipnum_2" class="btn btn-default btn-lg">每日最多使用 10,000 个IP</span>
|
||
</label>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<label class="radio-inline" v-on:click="set_btn_checked('dxbt_ipnum_','3','')">
|
||
<input type="radio" v-model="dxbt_data.ipAmount" class="hide" value="30000"> <span id="dxbt_ipnum_3" class="btn btn-default btn-lg">每日最多使用 30,000 个IP</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="margin-top-10">
|
||
<div class="col-sm-4">
|
||
<label class="radio-inline" v-on:click="set_btn_checked('dxbt_ipnum_','4','')">
|
||
<input type="radio" v-model="dxbt_data.ipAmount" class="hide" value="50000"> <span id="dxbt_ipnum_4" class="btn btn-default btn-lg">每日最多使用 50,000 个IP</span>
|
||
</label>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<label class="radio-inline" v-on:click="set_btn_checked('dxbt_ipnum_','5','')">
|
||
<input type="radio" v-model="dxbt_data.ipAmount" class="hide" value="100000"> <span id="dxbt_ipnum_5" class="btn btn-default btn-lg">每日最多使用 100,000 个IP</span>
|
||
</label>
|
||
</div>
|
||
<div class="col-sm-4 text-center" style="margin-top:10px;">
|
||
<span v-on:click="set_btn_checked('dxbt_ipnum_','6','')" id="dxbt_ipnum_6" style="border:1px solid #ccc;;padding-left:10px !important;padding-right:10px !important;" class="btn-default btn-lg">每日最多使用<input v-model="dxbt_data.ipAmount" min=500 style="max-width:100px;color:black;" type="number" :value="ipAmount">个IP</span>
|
||
</div>
|
||
</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="margin-top-0">有效时长：</h5>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('dxbt_durationType_','1','')">
|
||
<input type="radio" v-model="dxbt_data.durationType" class="hide" value="5"> <span id="dxbt_durationType_1" class="btn btn-new btn-lg">1~5分钟</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('dxbt_durationType_','2','')">
|
||
<input type="radio" v-model="dxbt_data.durationType" class="hide" value="25"> <span id="dxbt_durationType_2" class="btn btn-default btn-lg">5~25分钟</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('dxbt_durationType_','3','')">
|
||
<input type="radio" v-model="dxbt_data.durationType" class="hide" value="180"> <span id="dxbt_durationType_3" class="btn btn-default btn-lg">25分钟~3小时</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('dxbt_durationType_','4','')">
|
||
<input type="radio" v-model="dxbt_data.durationType" class="hide" value="360"> <span id="dxbt_durationType_4" class="btn btn-default btn-lg">3小时~6小时</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>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('dxbt_periodType_','1','天')">
|
||
<input type="radio" v-model="dxbt_data.periodType" class="hide" value="1"> <span id="dxbt_periodType_1" class="btn btn-new btn-lg">按天</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('dxbt_periodType_','2','周')">
|
||
<input type="radio" v-model="dxbt_data.periodType" class="hide" value="7"> <span id="dxbt_periodType_2" class="btn btn-default btn-lg">按周</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('dxbt_periodType_','3','月')">
|
||
<input type="radio" v-model="dxbt_data.periodType" class="hide" value="30"> <span id="dxbt_periodType_3" 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="dxbt_gmsc_reduce()" class="btn btn-new">-</button>
|
||
<button type="button" class="btn btn-default">{{dxbt_data.periodAmount}}{{order_time_type}}</button>
|
||
<button type="button" v-on:click="dxbt_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" data-backdrop="static" data-toggle="modal" v-on:click="get_balance()" data-target="#pay">实付￥{{order_info.money}}</button></span></h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4th tab -->
|
||
<div id="feature4">
|
||
<div class="tabfeatures">
|
||
<h2 class="padding-b50 text-center" style="padding-top: 45px;">提取免费，使用才扣费。节约成本，按使用次数扣费</h2>
|
||
<div class="row main-feature">
|
||
<div class="col-sm-12 ">
|
||
<div class="boxes boxes-border-top text-left margin-top-30 clearfix">
|
||
<h5 class="margin-top-0">充值金额：</h5>
|
||
<div class="row">
|
||
<div class="col-md-2" v-on:click="set_btn_checked('dxbl_ipnum_','1','')">
|
||
<label class="radio-inline">
|
||
<input type="radio" v-model="order_info.money" class="hide" value="1"> <span id="dxbl_ipnum_1" class="btn btn-new btn-lg">1元</span>
|
||
</label>
|
||
</div>
|
||
<div class="col-md-2" v-on:click="set_btn_checked('dxbl_ipnum_','2','')">
|
||
<label class="radio-inline">
|
||
<input type="radio" v-model="order_info.money" class="hide" value="10"> <span id="dxbl_ipnum_2" class="btn btn-default btn-lg">10元</span>
|
||
</label>
|
||
</div>
|
||
<div class="col-md-2" v-on:click="set_btn_checked('dxbl_ipnum_','3','')">
|
||
<label class="radio-inline">
|
||
<input type="radio" v-model="order_info.money" class="hide" value="20"> <span id="dxbl_ipnum_3" class="btn btn-default btn-lg">20元</span>
|
||
</label>
|
||
</div>
|
||
<div class="col-md-2" v-on:click="set_btn_checked('dxbl_ipnum_','4','')">
|
||
<label class="radio-inline">
|
||
<input type="radio" v-model="order_info.money" class="hide" value="50"> <span id="dxbl_ipnum_4" class="btn btn-default btn-lg">50元</span>
|
||
</label>
|
||
</div>
|
||
<div class="col-md-2" v-on:click="set_btn_checked('dxbl_ipnum_','5','')">
|
||
<label class="radio-inline">
|
||
<input type="radio" v-model="order_info.money" class="hide" value="80"> <span id="dxbl_ipnum_5" class="btn btn-default btn-lg">80元</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<br>
|
||
<div class="row">
|
||
<div class="col-md-2" v-on:click="set_btn_checked('dxbl_ipnum_','6','')">
|
||
<label class="radio-inline">
|
||
<input type="radio" v-model="order_info.money" class="hide" value="100"> <span id="dxbl_ipnum_6" class="btn btn-default btn-lg">100元</span>
|
||
</label>
|
||
</div>
|
||
<div class="col-md-2" v-on:click="set_btn_checked('dxbl_ipnum_','7','')">
|
||
<label class="radio-inline">
|
||
<input type="radio" v-model="order_info.money" class="hide" value="200"> <span id="dxbl_ipnum_7" class="btn btn-default btn-lg">200元</span>
|
||
</label>
|
||
</div>
|
||
<div class="col-md-2" v-on:click="set_btn_checked('dxbl_ipnum_','8','')">
|
||
<label class="radio-inline">
|
||
<input type="radio" v-model="order_info.money" class="hide" value="500"> <span id="dxbl_ipnum_8" class="btn btn-default btn-lg">500元</span>
|
||
</label>
|
||
</div>
|
||
<div class="col-md-2" v-on:click="set_btn_checked('dxbl_ipnum_','9','')">
|
||
<label class="radio-inline">
|
||
<input type="radio" v-model="order_info.money" class="hide" value="1000"> <span id="dxbl_ipnum_9" class="btn btn-default btn-lg">1000元</span>
|
||
</label>
|
||
</div>
|
||
<div class="col-sm-4" style="margin-top:10px;">
|
||
<span v-on:click="set_btn_checked('dxbl_ipnum_','10','')" id="dxbl_ipnum_10" style="border:1px solid #ccc;;padding-left:10px !important;padding-right:10px !important;" class="btn-default btn-lg">自定义<input @@change="calc_price()" v-model="order_info.money" min=1 style="max-width:100px;color:black;" type="number" :value="money">元</span>
|
||
</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="margin-top-0">有效时长：</h5>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('dxbl_durationType_','1','')">
|
||
<input type="radio" class="hide" value="5" v-model="dxbl_data.durationType"> <span id="dxbl_durationType_1" class="btn btn-new btn-lg">1~5分钟</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('dxbl_durationType_','2','')">
|
||
<input type="radio" class="hide" value="25" v-model="dxbl_data.durationType"> <span id="dxbl_durationType_2" class="btn btn-default btn-lg">5~25分钟</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('dxbl_durationType_','3','')">
|
||
<input type="radio" class="hide" value="180" v-model="dxbl_data.durationType"> <span id="dxbl_durationType_3" class="btn btn-default btn-lg">25分钟~3小时</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('dxbl_durationType_','4','')">
|
||
<input type="radio" class="hide" value="360" v-model="dxbl_data.durationType"> <span id="dxbl_durationType_4" class="btn btn-default btn-lg">3小时~6小时</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">IP数量：</h5>
|
||
<div class="text-left">可使用<h3 style="display:inline;"> {{order_info.data.ipAmount}} </h3>个IP，有效期1年，提取免费，使用才扣费。</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" data-backdrop="static" data-toggle="modal" v-on:click="get_balance()" data-target="#pay">实付￥{{order_info.money}}</button></span></h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 4th tab -->
|
||
<div id="feature5">
|
||
<div class="tabfeatures">
|
||
<h2 class="padding-b50 text-center" style="padding-top: 45px;"> 高匿 高质 长效 稳定 HTTP SOCKS5 </h2>
|
||
<div class="row main-feature">
|
||
<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('game_isAbroad_','1','')">
|
||
<input v-model="game.isAbroad" class="hide" v-on:click="guonei()" name="gameisAbroad" type="radio" value="0"> <span id="game_isAbroad_1" class="btn btn-new btn-lg">国内游戏</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('game_isAbroad_','2','')">
|
||
<input v-model="game.isAbroad" class="hide" v-on:click="guoji()" name="gameisAbroad" type="radio" value="1"> <span id="game_isAbroad_2" 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>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('game_shareType_','1','')">
|
||
<input class="hide" v-model="game.shareType" v-on:click="gamegx()" name="gameshareType" type="radio" value="1"> <span id="game_shareType_1" class="btn btn-new btn-lg">共享线路</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('game_shareType_','2','')">
|
||
<input class="hide" v-model="game.shareType" v-on:click="gamedx()" name="gameshareType" type="radio" value="2"> <span id="game_shareType_2" class="btn btn-default btn-lg">独享游戏</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12 gamezjxz hid">
|
||
<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_isRelayed_','1','')">
|
||
<input class="hide" v-model="game.isRelayed" v-on:click="get_lines('isRelayed',0)" name="isRelayed" type="radio" value="0"> <span id="game_isRelayed_1" class="btn btn-new btn-lg">直连</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('game_isRelayed_','2','')">
|
||
<input class="hide" v-model="game.isRelayed" v-on:click="get_lines('isRelayed',1)" name="isRelayed" type="radio" value="1"> <span id="game_isRelayed_2" class="btn btn-default btn-lg">中继</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12 gamexlzl hid">
|
||
<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_lineType_','1','')">
|
||
<input class="hide" v-model="game.lineType" v-on:click="gameptxl()" name="gamelineType" type="radio" value="1"> <span id="game_lineType_1" class="btn btn-new btn-lg">普通线路</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('game_lineType_','2','')">
|
||
<input class="hide" v-model="game.lineType" v-on:click="gameyzxl()" name="gamelineType" type="radio" value="2"> <span id="game_lineType_2" class="btn btn-default btn-lg">优质线路</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12 gamedxyx hid">
|
||
<div class="boxes boxes-border-top text-left margin-top-30 clearfix">
|
||
<div class="col-sm-12">
|
||
<h5 class="margin-top-0">独享游戏：</h5>
|
||
<div v-for="(item,key) in games" class="col-md-2" style="padding:5px 5px 0 0;">
|
||
<label class="radio-inline" style="width:100%;padding:0;" v-on:click="set_btn_checked('game_gameId_',key,'')">
|
||
<input class="hide" v-model="game.gameId" v-on:click="get_lines('gameId',item.id)" name="gamegame" type="radio" :value="item.id"> <span style="width:100%;" :id="'game_gameId_'+key" class="btn btn-default btn-lg">{{item.name}}</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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('game_isp_','1','')">
|
||
<input class="hide" v-model="game.isp" v-on:click="get_lines('isp',0)" 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="game.isp" v-on:click="get_lines('isp',2)" 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="game.isp" v-on:click="get_lines('isp',3)" 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="game.isp" v-on:click="get_lines('isp',4)" 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-2" 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="game.cityCode" v-on:click="get_lines('cityCode',0)" 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-2" 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="game.cityCode" v-on:click="get_lines('cityCode',value.code)" 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="margin-top-0">IP数量：</h5>
|
||
<div id="qsSlider">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<div id="QsControls">
|
||
<div id="cpu" class="slider ui-slider-primary">
|
||
<div class="sdecs">最大可选数量：{{game_ip_sum_count}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<div class="btn-group" role="group" >
|
||
<button type="button" v-on:click="game_ipnum_reduce()" class="btn btn-new">-</button>
|
||
<button type="button" class="btn btn-default">{{game.ipAmount}}个</button>
|
||
<button type="button" v-on:click="game_ipnum_add()" class="btn btn-new">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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="margin-top-0">带宽：</h5>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('game_bandwidth_','1','')">
|
||
<input v-model="game.bandwidth" class="hide" type="radio" value="1"> <span id="game_bandwidth_1" class="btn btn-new btn-lg">1M</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('game_bandwidth_','2','')">
|
||
<input v-model="game.bandwidth" class="hide" type="radio" value="2"> <span id="game_bandwidth_2" class="btn btn-default btn-lg">2M</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('game_bandwidth_','3','')">
|
||
<input v-model="game.bandwidth" class="hide" type="radio" value="5"> <span id="game_bandwidth_3" class="btn btn-default btn-lg">5M</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('game_bandwidth_','4','')">
|
||
<input v-model="game.bandwidth" class="hide" type="radio" value="10"> <span id="game_bandwidth_4" class="btn btn-default btn-lg">10M</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>
|
||
|
||
<label class="radio-inline" v-on:click="set_btn_checked('game_periodType_','1','天')">
|
||
<input type="radio" v-model="game.periodType" class="hide" value="1"> <span id="game_periodType_1" class="btn btn-new btn-lg">按天</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('game_periodType_','2','周')">
|
||
<input type="radio" v-model="game.periodType" class="hide" value="7"> <span id="game_periodType_2" class="btn btn-default btn-lg">按周</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('game_periodType_','3','月')">
|
||
<input type="radio" v-model="game.periodType" class="hide" value="30"> <span id="game_periodType_3" class="btn btn-default btn-lg">按月</span>
|
||
</label>
|
||
<label class="radio-inline" v-on:click="set_btn_checked('game_periodType_','4','季')">
|
||
<input type="radio" v-model="game.periodType" class="hide" value="90"> <span id="game_periodType_4" 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="game_gmsc_reduce()" class="btn btn-new">-</button>
|
||
<button type="button" class="btn btn-default">{{game.periodAmount}}{{order_time_type}}</button>
|
||
<button type="button" v-on:click="game_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" data-backdrop="static" data-toggle="modal" v-on:click="get_balance()" data-target="#pay">实付￥{{order_info.money}}</button></span></h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End of Shared Hosting Tabs -->
|
||
|
||
<!-- Modal -->
|
||
<div class="modal fade" id="pay" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||
<h4 class="modal-title text-center" id="myModalLabel">待支付：￥{{order_info.money}}元</h4>
|
||
</div>
|
||
<div class="modal-body ">
|
||
<p v-if="is_recharge">选择支付方式：</p>
|
||
<div v-if="is_recharge" class="text-center" style="padding:50px;">
|
||
<input id="zhifubaopay_s1" type="radio" v-model="order_info.pay_type" name="OPayType" value="2" checked ><label for="zhifubaopay_s1"> <img src="~/img/zfb.png">支付宝支付</label>
|
||
<input id="weixinpay_s1" type="radio" v-model="order_info.pay_type" name="OPayType" value="3" > <label for="weixinpay_s1"><img src="~/img/wx.png">微信支付</label>
|
||
|
||
</div>
|
||
<div v-else class="text-center" style="padding:39px;">
|
||
<p>个人剩余H币：{{balance}} <a class="text-success" href="/product/http" >去充值</a></p>
|
||
<p>本次支付H币：{{order_info.money}}</p>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer ">
|
||
<button type="button" v-on:click="pay()" style="margin: 0 auto;display:block;padding: 10px 100px;" class="btn btn-primary">立即支付</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="staticBackdropLabel">微信扫码支付</h5>
|
||
</div>
|
||
<div class="modal-body" id="qrcode_s" style="margin: 0 auto;">
|
||
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" v-on:click="verifyed" class="btn btn-primary">我已付款</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<div id="alipay"></div>
|
||
|
||
<script src="/http/js/superfish.min.js"></script>
|
||
<script src="/http/js/owl.carousel.js"></script>
|
||
<script src="/http/js/jquery.responsiveTabs.js"></script>
|
||
<script src="/http/js/jquery.slicknav.min.js"></script>
|
||
<script src="/http/js/jquery.parallax-1.1.3.js"></script>
|
||
<script src="/http/js/jquery-ui.js"></script>
|
||
<script type="text/javascript" src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
|
||
|
||
<script src="~/js/vue.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
|
||
var select_ip_num = 0;
|
||
|
||
$(document).on("ready", function(e) {
|
||
|
||
// ______________ TABS
|
||
$('#combo-tabs').responsiveTabs({
|
||
startCollapsed: 'accordion'
|
||
});
|
||
|
||
$.fn.extend({
|
||
qsSlider: function(options) {
|
||
|
||
var defaults = {
|
||
|
||
};
|
||
|
||
var o = $.extend(defaults, options);
|
||
|
||
this.each(function(){
|
||
|
||
var qsSlider = function() {
|
||
|
||
// Tweak slider steps
|
||
var cpuslider = {
|
||
min: 1, // Slider min value
|
||
max: o.MaxCPU, // Slider max value
|
||
step: 1 // Slider increments
|
||
};
|
||
|
||
// Presets buttons - numbers reference the number of slider steps.
|
||
var presetspec = {
|
||
xs: { cpu: "1" },
|
||
s: { cpu: "1" },
|
||
m: { cpu: "4" },
|
||
l: { cpu: "12"},
|
||
xl: { cpu: "8" }
|
||
};
|
||
|
||
// Exported spec.
|
||
this.specification = {
|
||
cpu: cpuslider,
|
||
};
|
||
|
||
|
||
// Functions //
|
||
|
||
// Sets the number of CPU.
|
||
this.setCPU = function(sliderStep) {
|
||
|
||
var units ='个';
|
||
var sTotal = sliderStep + " " + units;
|
||
|
||
// And the Text box.
|
||
$("div.values div#cpuvalue").text(sTotal);
|
||
|
||
// And update the slider (if we were called by preset, this will actually change the slider, if we're called by the slider nothing will happen.
|
||
$("div#qsSlider div#QsControls div#cpu").slider("value", sliderStep);
|
||
}
|
||
|
||
|
||
|
||
this.selectPreset = function(presetName) {
|
||
var presetData = $(presetspec).attr(presetName);
|
||
this.setCPU(presetData.cpu);
|
||
};
|
||
|
||
|
||
};
|
||
});
|
||
|
||
// maintain chainability
|
||
return this;
|
||
}
|
||
});
|
||
$('#qsSlider').qsSlider({
|
||
|
||
// Maximum Slider values
|
||
MaxCPU : '10000', // Maximum CPU
|
||
|
||
cpuID : '&configoption[199]=',
|
||
|
||
});
|
||
});
|
||
|
||
|
||
var app = new Vue({
|
||
el: '#product',
|
||
data: {
|
||
game:{
|
||
"isAbroad": 0, //必填，是否海外，0-国内，1-海外
|
||
"isRelayed": 0,//可选，是否中继，0-否，1-是，注意：海外线路才有中继
|
||
"shareType": 1, //必填，线路类型，1-共享，2-独享
|
||
"gameId": 0, //可选，游戏id，共享请传递0或不传，独享在101协议中返回
|
||
"lineType": 1, //必填，线路质量类型，1-普通，2-优质
|
||
"bandwidth": 1, //必填，带宽，1-1M、2-2M、5-5M、10-10M
|
||
"cityCode": 0, //可选，城市编码，0表示随机不指定，在102协议中返回
|
||
"isp": 0, //可选，运营商，0表示随机不指定，仅限国内线路使用，2-电信，3-移动，4-联通
|
||
"ipAmount": 1, //必填，购买IP数量，最小1个
|
||
"periodType": 1, //必填，周期类型，1-按天，7-按周，30-按月，90-按季度
|
||
"periodAmount": 1,//必填，购买周期，根据periodType来，例如按天，就是N天，按周就是N周
|
||
},
|
||
dxwxl_data:{//短效无限量
|
||
durationType:5,
|
||
periodType:1060,//必填，周期类型，1060-小时，1-按天，7-按周，30-按月，90-按季度
|
||
periodAmount:1,//必填，购买周期，根据periodType来，例如按天，就是N天，按周就是N周
|
||
},
|
||
dxbt_data:{//短效包天
|
||
durationType:5,//必填，有效时长，5-1至5分钟，25-5至25分钟，180-25至180分钟，360-3至6小时
|
||
ipAmount:5000,//必填，每日IP数量，最小500个
|
||
periodType:1060,//必填，周期类型，1060-小时，1-按天，7-按周，30-按月，90-按季度
|
||
periodAmount:1,//必填，购买周期，根据periodType来，例如按天，就是N天，按周就是N周
|
||
},
|
||
dxbl_data:{//短效包量
|
||
durationType:5,//必填，有效时长，5-1至5分钟，25-5至25分钟，180-25至180分钟，360-3至6小时
|
||
ipAmount:10,//必填，每日IP数量，最小500个
|
||
},
|
||
cities:[],
|
||
games:[],
|
||
order_info:{
|
||
order_type:1,//1:预储值、2：短效无限量、3：短效包天、4：短效包量、5：长效游戏
|
||
money:1,
|
||
pay_type:2,//1H币 2支付宝 3微信
|
||
data:{}
|
||
},
|
||
is_recharge:1,
|
||
order_time_type:'小时',
|
||
ipAmount:3000,//ip量
|
||
money:2000,//ip量
|
||
game_ip_sum_count:100,//长效可选线路数量
|
||
game_ip_sum_counts:100,//长效可选线路数量
|
||
|
||
balance:0,//余额
|
||
},
|
||
created: function () {
|
||
|
||
},
|
||
methods: {
|
||
//点击tab初始化数据
|
||
tab(t){
|
||
switch(t) {
|
||
case 1:
|
||
this.is_recharge = 1;
|
||
this.order_info.pay_type = 2;
|
||
this.order_info.order_type = 1;
|
||
break;
|
||
case 2:
|
||
this.dxwxl_data.periodType = 1060;
|
||
this.is_recharge = 0;
|
||
this.order_info.order_type = 2;
|
||
this.order_info.pay_type = 1;
|
||
this.set_btn_checked('dxwxl_tczq_','1','小时');
|
||
break;
|
||
case 3:
|
||
this.dxbt_data.periodType = 1;
|
||
this.is_recharge = 0;
|
||
this.order_info.order_type = 3;
|
||
this.order_info.pay_type = 1;
|
||
this.set_btn_checked('dxbt_periodType_','1','天');
|
||
break;
|
||
case 4:
|
||
this.order_info.money = 1;
|
||
this.is_recharge = 0;
|
||
this.order_info.order_type = 4;
|
||
this.order_info.pay_type = 1;
|
||
this.calc_price();
|
||
break;
|
||
case 5:
|
||
this.game.periodType = 1;
|
||
this.get_cities();
|
||
this.get_lines();
|
||
this.is_recharge = 0;
|
||
this.order_info.order_type = 5;
|
||
this.order_info.pay_type = 1;
|
||
this.set_btn_checked('game_periodType_','1','天');
|
||
break;
|
||
}
|
||
},
|
||
guonei(){
|
||
$(".gameisp").show();
|
||
$(".gamexlzl").hide();
|
||
$(".gamedxyx").hide();
|
||
$(".gamezjxz").hide();
|
||
this.game.isAbroad = 0;
|
||
this.game.shareType = 1;
|
||
this.set_btn_checked('game_shareType_','1','');
|
||
this.game.lineType = 1;
|
||
this.set_btn_checked('game_lineType_','1','');
|
||
this.game.gameId = 0;
|
||
this.get_cities();
|
||
this.get_lines('isAbroad',0);
|
||
},
|
||
guoji(){
|
||
$(".gameisp").hide();
|
||
$(".gamexlzl").hide();
|
||
$(".gamedxyx").hide();
|
||
$(".gamezjxz").show();
|
||
this.game.isAbroad = 1;
|
||
this.game.shareType = 1;
|
||
this.set_btn_checked('game_shareType_','1','');
|
||
this.game.lineType = 1;
|
||
this.set_btn_checked('game_lineType_','1','');
|
||
this.game.gameId = 0;
|
||
this.get_cities();
|
||
this.get_lines('isAbroad',1);
|
||
},
|
||
gamegx(){
|
||
$(".gamexlzl").hide();
|
||
$(".gamedxyx").hide();
|
||
this.game.lineType = 1;
|
||
this.set_btn_checked('game_lineType_','1','');
|
||
this.game.gameId = 0;
|
||
this.game.shareType = 1;
|
||
this.get_lines('shareType',1);
|
||
},
|
||
gamedx(){
|
||
$(".gamexlzl").show();
|
||
$(".gamedxyx").show();
|
||
this.game.shareType = 2;
|
||
this.get_games();
|
||
this.get_lines('shareType',2);
|
||
},
|
||
//查询长效可选城市
|
||
get_cities(){
|
||
var that = this
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: 'https://php-api.juip.com/http/product/city',
|
||
dataType: "json",
|
||
async:false,
|
||
data:this.game,
|
||
success: function (res) {
|
||
that.cities = res.d.cities
|
||
}
|
||
});
|
||
},
|
||
//查询长效可选游戏
|
||
get_games(){
|
||
var that = this
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: 'https://php-api.juip.com/http/product/game',
|
||
dataType: "json",
|
||
async:false,
|
||
data:this.game,
|
||
success: function (res) {
|
||
that.games = res.d.games
|
||
that.game.gameId = res.d.games[0]['id']
|
||
}
|
||
});
|
||
},
|
||
//查询长效线路数量
|
||
get_lines(se_type,val){
|
||
switch (se_type) {
|
||
case 'gameId':
|
||
this.game.gameId = val
|
||
break;
|
||
case 'isAbroad':
|
||
this.game.isAbroad = val
|
||
break;
|
||
case 'shareType':
|
||
this.game.shareType = val
|
||
break;
|
||
case 'cityCode':
|
||
this.game.cityCode = val
|
||
break;
|
||
case 'isp':
|
||
this.game.isp = val
|
||
break;
|
||
case 'isRelayed':
|
||
this.game.isRelayed = val
|
||
break;
|
||
}
|
||
var that = this
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: 'https://php-api.juip.com/http/product/linecount',
|
||
dataType: "json",
|
||
async:false,
|
||
data:this.game,
|
||
success: function (res) {
|
||
that.game_ip_sum_count = res.d.count
|
||
}
|
||
});
|
||
that.game.ipAmount = 1;
|
||
$(function() {
|
||
$("div#qsSlider #QsControls div.slider").each(
|
||
function(i, control) {
|
||
var id = $(control).attr('id');
|
||
$(control).slider({
|
||
orientation: "horizontal",
|
||
range: "min",
|
||
value: that.game.ipAmount,
|
||
min: parseFloat(1),
|
||
max: parseFloat(that.game_ip_sum_count),
|
||
step: parseFloat(1),
|
||
slide: function(event, ui) {
|
||
if (id == 'cpu') {
|
||
that.game.ipAmount = ui.value;
|
||
that.calc_price();
|
||
}
|
||
}
|
||
});
|
||
|
||
}
|
||
);
|
||
|
||
});
|
||
},
|
||
//充值
|
||
recharge(money) {
|
||
this.order_info.money = money;
|
||
alert('此充值只针对HTTP,无法购买 动静态ip 以及其他产品，请确认仔细！');
|
||
},
|
||
//短效无限量购买时长修改
|
||
dxwxl_gmsc_reduce(){
|
||
if (this.dxwxl_data.periodAmount > 1) {
|
||
this.dxwxl_data.periodAmount--;
|
||
this.calc_price();
|
||
}
|
||
},
|
||
//短效无限量购买时长修改
|
||
dxwxl_gmsc_add(){
|
||
this.dxwxl_data.periodAmount++;
|
||
this.calc_price();
|
||
},
|
||
//短效包天购买时长修改
|
||
dxbt_gmsc_reduce(){
|
||
if (this.dxbt_data.periodAmount > 1) {
|
||
this.dxbt_data.periodAmount--;
|
||
this.calc_price();
|
||
}
|
||
},
|
||
//短效包天购买时长修改
|
||
dxbt_gmsc_add(){
|
||
this.dxbt_data.periodAmount++;
|
||
this.calc_price();
|
||
},
|
||
//长效游戏购买ip量修改
|
||
game_ipnum_reduce(){
|
||
if (this.game.ipAmount > 1) {
|
||
this.game.ipAmount--;
|
||
this.calc_price();
|
||
}
|
||
},
|
||
//长效游戏购买ip量修改
|
||
game_ipnum_add(){
|
||
this.game.ipAmount++;
|
||
this.calc_price();
|
||
},
|
||
//游戏购买时长修改
|
||
game_gmsc_reduce(){
|
||
if (this.game.periodAmount > 1) {
|
||
this.game.periodAmount--;
|
||
this.calc_price();
|
||
}
|
||
},
|
||
//游戏购买时长修改
|
||
game_gmsc_add(){
|
||
this.game.periodAmount++;
|
||
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);
|
||
},
|
||
pay() {
|
||
//if ((this.balance < this.order_info.money) && (this.order_info.order_type!=1)) {
|
||
// alert('余额不足');
|
||
// return;
|
||
//}
|
||
switch(this.order_info.order_type) {
|
||
case 2:
|
||
this.order_info.data = this.dxwxl_data;
|
||
break;
|
||
case 3:
|
||
if (this.dxbt_data.ipAmount < 500) {
|
||
alert("ip数量最低500个");
|
||
return;
|
||
}
|
||
this.order_info.data = this.dxbt_data;
|
||
break;
|
||
case 4:
|
||
this.order_info.data = this.dxbl_data;
|
||
break;
|
||
case 5:
|
||
this.order_info.data = this.game;
|
||
if (this.game_ip_sum_count == 0) {
|
||
alert('可用IP为0！');
|
||
return;
|
||
}
|
||
break;
|
||
}
|
||
let data = {
|
||
cookie:document.cookie,
|
||
order_info: this.order_info
|
||
}
|
||
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: 'https://php-api.juip.com/http/order/create_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) {
|
||
$('#pay').modal('hide');
|
||
alert(res.msg);
|
||
} else if (res.code == 2) {
|
||
document.getElementById("alipay").innerHTML=res.data;
|
||
document.forms['alipaysubmit'].submit();
|
||
$('#pay').modal('hide');
|
||
} else if (res.code == 3) {
|
||
$("#qrcode_s").html('');
|
||
new QRCode(document.getElementById("qrcode_s"), {
|
||
text: res.data,
|
||
width : 300,
|
||
height : 300
|
||
});
|
||
|
||
$('#staticBackdrop').modal('show');
|
||
$('#pay').modal('hide');
|
||
} else {
|
||
$('#pay').modal('hide');
|
||
alert(res.msg);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
verifyed() {
|
||
$('#staticBackdrop').modal('hide');
|
||
},
|
||
get_balance() {
|
||
let data = {
|
||
cookie:document.cookie,
|
||
}
|
||
var that = this;
|
||
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: 'https://php-api.juip.com/http/user/get_balance',
|
||
dataType: "json",
|
||
contentType: "application/json",
|
||
data: JSON.stringify(data),
|
||
beforeSend: function(xhr) {
|
||
xhr.withCredentials = true;
|
||
},
|
||
crossDomain: true,
|
||
success: function (res) {
|
||
that.balance = res;
|
||
}
|
||
});
|
||
},
|
||
calc_price() {
|
||
var that = this;
|
||
switch(this.order_info.order_type) {
|
||
case 2:
|
||
this.order_info.data = this.dxwxl_data;
|
||
break;
|
||
case 3:
|
||
this.order_info.data = this.dxbt_data;
|
||
break;
|
||
case 4:
|
||
this.order_info.data = this.dxbl_data;
|
||
break;
|
||
case 5:
|
||
this.order_info.data = this.game;
|
||
if (that.game_ip_sum_count == 0) {
|
||
alert('可用IP为0！');
|
||
return;
|
||
}
|
||
break;
|
||
}
|
||
|
||
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;
|
||
case 4:
|
||
this.order_info.data.ipAmount = this.order_info.money * price_info.ipAmount;
|
||
break;
|
||
case 5:
|
||
this.order_info.money = this.order_info.data.periodAmount * this.order_info.data.ipAmount * price_info.price;
|
||
break;
|
||
}
|
||
|
||
this.order_info.money = this.order_info.money.toFixed(2);
|
||
}
|
||
}
|
||
})
|
||
</script> |