Files
juipnet/Host/Views/Product/Http.cshtml

1225 lines
69 KiB
Plaintext
Raw Normal View History

2023-12-27 17:28:05 +08:00
<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">
2024-01-05 15:16:36 +08:00
<h3 class="text-center">¥<input v-model="order_info.money" type="number" style="width:30%;" /></h3>
2023-12-27 17:28:05 +08:00
</div>
<div class="panel-body text-center">
<div class="price-cercle">
2024-01-03 14:55:04 +08:00
<h3 class="text_primary">实到{{order_info.money}}H币</h3>
2023-12-27 17:28:05 +08:00
</div>
</div>
<ul class="text-center">
<li>国内长效月卡低至9.9元</li>
<li>国际长效月卡低至10元</li>
<li>多充多送更超值</li>
<li>省时省力更方便</li>
<li>支持购买任意套餐</li>
</ul>
<div class="panel-footer">
2024-01-03 14:55:04 +08:00
<a class="btn btn-new btn-lg" v-on:click="recharge(order_info.money)" data-backdrop="static" data-toggle="modal" data-target="#pay">自定义充值</a>
2023-12-27 17:28:05 +08:00
</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">&times;</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>
2024-02-01 17:43:16 +08:00
<script type="text/javascript" src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
2023-12-27 17:28:05 +08:00
<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',
2024-03-19 15:49:56 +08:00
url: 'https://php-api.juip.com/http/product/city',
2023-12-27 17:28:05 +08:00
dataType: "json",
async:false,
data:this.game,
success: function (res) {
that.cities = res.d.cities
}
});
},
//查询长效可选游戏
get_games(){
var that = this
$.ajax({
type: 'POST',
2024-03-19 15:49:56 +08:00
url: 'https://php-api.juip.com/http/product/game',
2023-12-27 17:28:05 +08:00
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',
2024-03-19 15:49:56 +08:00
url: 'https://php-api.juip.com/http/product/linecount',
2023-12-27 17:28:05 +08:00
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;
},
//短效无限量购买时长修改
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() {
2024-02-22 17:26:33 +08:00
//if ((this.balance < this.order_info.money) && (this.order_info.order_type!=1)) {
// alert('余额不足');
// return;
//}
2023-12-27 17:28:05 +08:00
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 (this.game_ip_sum_count == 0) {
alert('可用IP为0');
return;
}
break;
}
let data = {
cookie:document.cookie,
order_info: this.order_info
}
$.ajax({
type: 'POST',
2024-03-19 15:49:56 +08:00
url: 'https://php-api.juip.com/http/order/create_order',
2023-12-27 17:28:05 +08:00
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',
2024-03-19 15:49:56 +08:00
url: 'https://php-api.juip.com/http/user/get_balance',
2023-12-27 17:28:05 +08:00
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',
2024-03-19 15:49:56 +08:00
url: 'https://php-api.juip.com/http/product/calc_price',
2023-12-27 17:28:05 +08:00
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>