wyk/juipnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

水滴上线

Browse Source
This commit is contained in:
“wanyongkang”
2024-02-01 17:43:16 +08:00
parent 481f39b9c5
commit d8031b41e3
19 changed files with 2215 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

698
Host/Views.Mobile/Product/Index.cshtml
View File

@@ -2,14 +2,19 @@
@using Microsoft.Extensions.Configuration
@using Hncore.Pass.BaseInfo.Response
@using Hncore.Infrastructure.Serializer;
@using Hncore.Pass.BaseInfo.Service
@inject IConfiguration m_Configuration
@model List<ProductWithPackageResponse>
@inject UserService m_UserService
@inject Hncore.Pass.Vpn.Service.ProductAccountService m_AccountService
@{
ViewData["Title"] = "购买产品";
UserLoginModel user = null;
Hncore.Pass.BaseInfo.Models.User userEntity = new Hncore.Pass.BaseInfo.Models.User();
if (this.Context.Request.Cookies.TryGetValue("userInfo", out string userCookie))
{
user = userCookie.FromJsonTo<UserLoginModel>();
userEntity = await m_UserService.GetById(user.Id);
}
var pid = this.Context.Request.Query.ContainsKey("id") ? this.Context.Request.Query["id"].ToString() : "";
var defaultProduct = Model.Select(m => m.Product).FirstOrDefault();
@@ -21,6 +26,16 @@
{
defaultProduct = Model.Select(m => m.Product).FirstOrDefault(m => m.Id.ToString() == pid);
}
//设置获取余额
var restAmout = Convert.ToDecimal(0.00);
var resttime = 0;
var userid = 0;
if (user != null){
resttime = await m_AccountService.GetRestTestCount(user.Id);
restAmout = userEntity.RestAmount;
userid = userEntity.Id;
}
var defaultPackage = Model.Where(m => m.Product.Id == defaultProduct.Id).Select(m => m.Packages.FirstOrDefault()).FirstOrDefault();
var baseUrl = m_Configuration["BaseInfoUrl"];
Func<string, string> P = (path) => $"{baseUrl}{path}";
@@ -165,23 +180,23 @@
{
if(item.Product.Id == 18) {
<li role="presentation" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<a href="#@item.Product.Id" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name<span style="color: #f64e3d;font-weight:bold;float:right;padding-right: 5px;">最快</span></a>
<a href="#@item.Product.Id" class="click_product" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF"><span style="color: #f64e3d;font-weight:bold;padding-right: 5px;">送</span>@item.Product.Name<span style="color: #f64e3d;font-weight:bold;float:right;padding-right: 5px;">最快</span></a>
</li>
} else if(item.Product.Id == 14) {
<li role="presentation" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<a href="#@item.Product.Id" id="p14" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name</a>
<a href="#@item.Product.Id" class="click_product" id="p14" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name</a>
</li>
}else if(item.Product.Id == 26) {
<li role="presentation" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<a href="#@item.Product.Id" id="p26" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name<span style="color: #f64e3d;font-weight:bold;float:right;padding-right: 5px;">新</span></a>
<a href="#@item.Product.Id" class="click_product" id="p26" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name<span style="color: #f64e3d;font-weight:bold;float:right;padding-right: 5px;">新</span></a>
</li>
}else if(item.Product.Id == 27) {
<li role="presentation" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<a href="#@item.Product.Id" id="p27" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name<span style="color: #f64e3d;font-weight:bold;float:right;padding-right: 5px;">新</span></a>
<a href="#@item.Product.Id" class="click_product" id="p27" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name<span style="color: #f64e3d;font-weight:bold;float:right;padding-right: 5px;">新</span></a>
</li>
}else if(item.Product.Id == 6) {
<li role="presentation" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<a href="#@item.Product.Id" id="p6" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name<span style="color: #f64e3d;font-weight:bold;float:right;padding-right: 5px;">新</span></a>
<a href="#@item.Product.Id" class="click_product" id="p6" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name<span style="color: #f64e3d;font-weight:bold;float:right;padding-right: 5px;">新</span></a>
</li>
}
else if(item.Product.Id == 22) {
@@ -190,7 +205,7 @@
</li>
<li role="presentation" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<a href="#@item.Product.Id" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name </a>
<a href="#@item.Product.Id" role="tab" class="click_product" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name </a>
</li>
}
else if(item.Product.Id == 21) {
@@ -199,12 +214,16 @@
<a style="color:#0098fb;border:1px solid #99CCFF"><span class="glyphicon glyphicon-arrow-down"></span>单窗口单IP<span class="glyphicon glyphicon-arrow-down"></span></a>
</li>
<li role="presentation" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<a href="#@item.Product.Id" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name </a>
<a href="#@item.Product.Id" role="tab" class="click_product" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name </a>
</li>
} else if(item.Product.Id == 28) {
<li role="presentation" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<a href="#@item.Product.Id" id="p28" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name<span style="color: #f64e3d;font-weight:bold;float:right;padding-right: 5px;">新</span></a>
</li>
} else {
<li role="presentation" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<a href="#@item.Product.Id" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name </a>
<a href="#@item.Product.Id" class="click_product" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name </a>
</li>
}
}
@@ -245,7 +264,7 @@
}
@if (item.Product.Id == 27){
<div class="p_type @("type"+item.Product.Id)" style="padding-top: 10px;">
<button type="button" onclick="qldt1()" class="btn btn-default btn-lg qldt1" style="background-color: #FF9900;font-size:1.3em;float:left;margin:5px;">1M</button>
<button type="button" onclick="qldt1()" class="btn btn-default btn-lg qldt1" style="background-color: #FF9900;font-size:1.3em;float:left;margin:5px;">2M</button>
<button type="button" onclick="qldt5()" class="btn btn-default btn-lg qldt5" style="background-color: white;font-size:1.3em;float:left;margin:5px;">5M</button><br>
<button type="button" onclick="qldt10()" class="btn btn-default btn-lg qldt10" style="background-color: white;font-size:1.3em;float:left;margin:5px;">10M</button><br>
<button type="button" onclick="qldt20()" class="btn btn-default btn-lg qldt20" style="background-color: white;font-size:1.3em;float:left;margin:5px;">20M</button>
@@ -281,7 +300,7 @@
<button type="button" onclick="wjgxgj()" id="gxgj" class="btn btn-default btn-lg" style="background-color: white;font-size:1.5em;">极速版</button>
</div>
}
@if(item.Product.Id != 28){
@foreach (var package in item.Packages.Where(m => m.Status == 1&&(m.TenantId==1157||m.TenantId==9999||m.TenantId==10000)).OrderBy(m => m.TenantId))
{
if (package.IsTest == 1 &&package.Id != 89&&package.Id != 1034&&package.Id != 1040&&package.Id != 1094&&package.Id != 1097&&package.Id != 60&&package.Id != 1114)
@@ -351,20 +370,679 @@
}
}
}
}
</div>
</div>
}
<div id="app" class="qilinjingtai" style="display:none;">
<div class="col-sm-10 col-md-6 margin-top-30">
<div class="panel panel-info relative">
<div class="panel-heading">
<h3 class="text-center">拨号线路(静态)</h3>
</div>
<div class="row text-center" style="margin:0;">
<div class="col-sm-6" style="padding:10px 0;margin:0;">
<h4 style="padding:10px;color:#00a63f;">静态专线介绍</h4>
<p>运营商专线宽带,自营机房<span class="glyphicon glyphicon-ok" style=" color:#00a63f; float:right;"></span></p>
<p>大出口流量,直播/游戏首选<span class="glyphicon glyphicon-ok" style=" color:#00a63f; float:right;"></span></p>
<p>全新vpn隧道,安全可靠<span class="glyphicon glyphicon-ok " style=" color:#00a63f; float:right;"></span></p>
<p>全局代理不易发现<span class="glyphicon glyphicon-ok" style=" color:#00a63f; float:right;"></span></p>
<p>IP周期性变化<span class="glyphicon glyphicon-ok" style=" color:#00a63f; float:right;"></span></p>
<p>精选超20000条不同线路<span class="glyphicon glyphicon-ok" style=" color:#00a63f; float:right;"></span></p>
<p>Ros/爱快/路由器/手机/电脑<span class="glyphicon glyphicon-ok" style=" color:#00a63f; float:right;"></span></p>
<p>华为级维护专员7*24小时服务<span class="glyphicon glyphicon-ok" style=" color:#00a63f; float:right;"></span></p>
</div>
<div class="col-sm-6" style="background:#ccc;padding:10px 0;">
<h4 style="padding:10px;color:#00a63f;">传统socks5</h4>
<p><span class="glyphicon glyphicon-remove" style=" color:red; float:left;"></span> 天翼云,各种云线路</p>
<p><span class="glyphicon glyphicon-remove" style=" color:red; float:left;"></span>低带宽出口,共享严重,线路拥挤</p>
<p><span class="glyphicon glyphicon-remove" style=" color:red; float:left;"></span>传统协议,波动大,延迟大</p>
<p><span class="glyphicon glyphicon-remove" style=" color:red; float:left;"></span>系统局部代理,易发现,易封号</p>
<p><span class="glyphicon glyphicon-remove" style=" color:red; float:left;"></span>-</p>
<p><span class="glyphicon glyphicon-remove" style=" color:red; float:left;"></span>容量一般只有2-3000线路</p>
<p><span class="glyphicon glyphicon-remove" style=" color:red; float:left;"></span>电脑/手机</p>
<p><span class="glyphicon glyphicon-remove" style=" color:red; float:left;"></span>售后困难,处理时间漫长</p>
</div>
</div>
<div v-on:click="qilinjt()" class="panel-footer text-center " style="background-color:#00a63f;color:white;padding:20px;font-size:20px;cursor: pointer">
立即购买
</div>
</div>
</div>
<div class="col-sm-10 col-md-6 margin-top-30">
<div class="panel panel-info relative">
<div class="panel-heading">
<h3 class="text-center">水滴专线(固态)</h3>
</div>
<div class="row text-center" style="padding:0;margin:0;">
<div class="col-sm-6" style="padding:10px 0 0 0;">
<h4 style="padding:10px;color:#00a63f;">固态专线介绍</h4>
<p>运营商专线宽带,更稳定<span class="glyphicon glyphicon-ok" style=" color:#00a63f; float:right;"></span></p>
<p>全新vpn隧道,安全可靠<span class="glyphicon glyphicon-ok" style=" color:#00a63f; float:right;"></span></p>
<p>全局代理,为游戏而生<span class="glyphicon glyphicon-ok " style=" color:#00a63f; float:right;"></span></p>
<p>IP永久固定不变<span class="glyphicon glyphicon-ok" style=" color:#00a63f; float:right;"></span></p>
<p>精选超10000条不同线路<span class="glyphicon glyphicon-ok" style=" color:#00a63f; float:right;"></span></p>
<p>Ros/爱快/路由器/手机/电脑<span class="glyphicon glyphicon-ok" style=" color:#00a63f; float:right;"></span></p>
<p>华为级维护专员7*24小时服务<span class="glyphicon glyphicon-ok" style=" color:#00a63f; float:right;"></span></p>
<p>&nbsp;</p>
</div>
<div class="col-sm-6" style="background:#ccc;padding:10px 0 0 0;">
<h4 style="padding:10px;color:#00a63f;">传统socks5</h4>
<p><span class="glyphicon glyphicon-remove" style=" color:red; float:left;"></span> 天翼云,各种云线路</p>
<p><span class="glyphicon glyphicon-remove" style=" color:red; float:left;"></span>传统socks5协议,波动大,延迟大</p>
<p><span class="glyphicon glyphicon-remove" style=" color:red; float:left;"></span>系统局部代理,易发现,易封号</p>
<p><span class="glyphicon glyphicon-remove" style=" color:red; float:left;"></span>-</p>
<p><span class="glyphicon glyphicon-remove" style=" color:red; float:left;"></span>容量一般只有2-3000线路</p>
<p><span class="glyphicon glyphicon-remove" style=" color:red; float:left;"></span>电脑/手机</p>
<p><span class="glyphicon glyphicon-remove" style=" color:red; float:left;"></span>售后困难,处理时间漫长</p>
<p>&nbsp;</p>
</div>
</div>
<div v-on:click="qilingt()" class="panel-footer text-center " style="background-color:#00a63f;color:white;padding:20px;font-size:20px;cursor: pointer">
立即购买
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="pay_qilin" data-backdrop="static" style="z-index:10000;margin-top:30%" 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">水滴-购买支付</h4>
</div>
<div class="modal-body text-center">
<p>购买账号数量:{{order_info.buy_num}}&nbsp;待支付金额:￥{{order_info.price}}</p>
<p>我的余额:￥ @(restAmout)&nbsp;<a href="/User/Index">前往充值</a></p>
<p>
<input id="balance_s1" type="radio" v-model="order_info.pay_type" name="OPayType" value="10" > <label for="balance_s1">余额支付</label>&nbsp;&nbsp;<br>
<input id="zhifubaopay_s1" type="radio" v-model="order_info.pay_type" name="OPayType" value="100" checked ><label for="zhifubaopay_s1"> <img src="~/img/zfb.png">支付宝支付</label>&nbsp;&nbsp;<br>
<input id="weixinpay_s1" type="radio" v-model="order_info.pay_type" name="OPayType" value="70" > <label for="weixinpay_s1"><img src="~/img/wx.png">微信支付</label>
</p>
<p><button class="btn btn-success btn-lg" v-on:click="pay()">确认支付</button></p>
</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-success btn-lg">我已付款</button>
</div>
</div>
</div>
</div>
<div id="alipay"></div>
<div class="modal fade" id="qilinbuy" style="margin:10px;" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" style="width:100%;" role="document">
<div class="modal-content" style="width:100%">
<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">{{qilin.title}}</h4>
</div>
<div class="modal-body ">
<div class="row">
<div class="col-sm-12 col-md-4" style="border:1px solid #ccc;line-height:200%;">
<div class="row" style="padding:5px;">
<div class="col-sm-3">
套餐类型：
</div>
<div class="col-sm-9">
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="jinyougame" v-on:click="game()" class="btn btn-success btn-lg">游戏独享</button>
<button type="button" id="jinyouline" v-on:click="line()" class="btn btn-default btn-lg">线路独享</button>
</div>
</div>
</div>
<div class="row " style="padding:5px;">
<div class="col-sm-3">
游戏选择：
</div>
<div class="col-sm-9">
<select class="form-control " v-model="qilin.game_id" id="gameselect" @@change="select_game" style="height:50px;font-size:15px;">
<option value="0">-请选择游戏-</option>
<option v-for="item in game_list" :value="item.id">{{item.name}}</option>
</select>
</div>
</div>
<div class="row" style="padding:5px;">
<div class="col-sm-3">
线路品质：
</div>
<div class="col-sm-9">
优质尊享
</div>
</div>
<div class="row" style="padding:5px;">
<div class="col-sm-3">
购买数量：
</div>
<div class="col-sm-9">
<div class="col-sm-10">
<input type="number" v-model="order_info.buy_num" @@change="change_num()" min=1 class="form-control" value="1">
</div>
<div class="col-sm-2" title="1.这里输入的数量可以大于等于右侧指定地区输入框中的数量总和
例如：左侧输入100条，右侧只选中了一个地区并设定了20条，那么剩余80条将平均分配至未选择的区域。
2.右侧地区不是必填的，用户不手动分配地区，那么将由系统自动分配。">
<span class="glyphicon glyphicon-question-sign"></span>
</div>
</div>
</div>
<div class="row" style="padding:5px;">
<div class="col-sm-3">
账户余额：
</div>
<div class="col-sm-9">
￥@restAmout
</div>
</div>
<div class="row" style="padding:5px;">
<div class="col-sm-3">
账号：
</div>
<div class="col-sm-9">
<div class="col-sm-10">
<input type="text" v-model="order_info.account" class="form-control" placeholder="请输入账号">
</div>
<div class="col-sm-2" title="
1.若购买数量大于1，则系统将根据用户所填账户内容生成批量账户
2.示例：填写 zhangsan，购买数量20，则会生成zhangsan1-zhangsan20">
<span class="glyphicon glyphicon-question-sign"></span>
</div>
</div>
</div>
<div class="row" style="padding:5px;">
<div class="col-sm-3">
密码：
</div>
<div class="col-sm-9">
<div class="col-sm-10">
<input type="text" v-model="order_info.password" class="form-control" placeholder="请输入密码">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-8" >
<div style="border:1px solid #ccc;margin-left:3px;">
<div class="row" >
<div class="input-group col-sm-12" style="float:left;margin-left:15px;margin-top:5px;">
可用节点总数：{{province_city.surplus_out_total}}
</div>
</div>
<div class="row ">
<div class="col-sm-3 text-center" style="height:470px;overflow:auto;overflow-x: hidden;">
<label style="border:1px solid #00a63f;padding:3px;width:100%;margin:2px;"><input checked name="allprovince" @@change="select_all_province()" type="checkbox"> 全部</label>
<label v-for="(item,index) in province_city.province_surplus_outs" :key="index" style="border:1px solid #00a63f;padding:3px;width:100%;margin:2px"><input v-model="province" name="province" :value="index" type="checkbox" @@change="select_province()">{{item.en_name}}({{item.total}})</label>
</div>
<div class="col-sm-9" style="font-size:15px;height:453px;overflow:auto;">
<div class="col-sm-4 diqu" v-for="item in citys" style="padding:5px;">
<div style="border:1px solid #ddd;padding:5px;">
<p v-if="item.isp_class == 0" style="padding:0;margin:0;white-space: nowrap;overflow:hidden;"><span class="glyphicon glyphicon-asterisk " style="color:#00a63f;overflow:hidden;"></span>[多线]{{item.name}}</p>
<p v-else-if="item.isp_class == 1" style="padding:0;margin:0;white-space: nowrap;overflow:hidden;"><span class="glyphicon glyphicon-asterisk " style="color:#00a63f;overflow:hidden;"></span>[电信]{{item.name}}</p>
<p v-else-if="item.isp_class == 2" style="padding:0;margin:0;white-space: nowrap;overflow:hidden;"><span class="glyphicon glyphicon-asterisk " style="color:#00a63f;overflow:hidden;"></span>[联通]{{item.name}}</p>
<p v-else-if="item.isp_class == 3" style="padding:0;margin:0;white-space: nowrap;overflow:hidden;"><span class="glyphicon glyphicon-asterisk " style="color:#00a63f;overflow:hidden;"></span>[移动]{{item.name}}</p>
<p v-else style="padding:0;margin:0;white-space: nowrap;overflow:hidden;"><span class="glyphicon glyphicon-asterisk " style="color:#00a63f;overflow:hidden;"></span>[未知]{{item.name}}</p>
<hr style="margin:0;">
<p style="padding:0;margin:0;">余量:{{item.total}} 延迟:{{item.ping}}ms</p>
<p style="padding:0;margin:0;">分配数量:<input type="number" min=0 value="0" :class="item.province+'-'+item.city+'-'+item.rid+'-100'" @@change="selsect_adddr_num(item.province+'-'+item.city+'-'+item.rid+'-100',item.total)" :max="item.total" style="width:50%;color:black;background:white;"></p>
</div>
</div>
</div>
</div>
</div>
<div style="border:1px solid #ccc;margin-left:3px;margin-top:5px;">
<div class="row " style="padding:5px;">
<div class="col-sm-3">
带宽选择：
</div>
<div class="col-sm-9">
<div v-if="this.qilin.is_unshar == 0" class="btn-group" role="group" aria-label="...">
<button v-for="(item,index) in package_list.game" :key="index" :class="'package-type-game-'+index" v-on:click="package_click('package-type-game-'+index,'game')" type="button" class="btn btn-default btn-lg">
<span v-if="index == 'test'">测试</span>
<span v-else>{{index}}</span>
</button>
</div>
<div v-if="this.qilin.is_unshar == 1" class="btn-group" role="group" aria-label="...">
<button v-for="(item,index) in package_list.line" :key="index" :class="'package-type-line-'+index" v-on:click="package_click('package-type-line-'+index,'line')" type="button" class="btn btn-default btn-lg">
<span v-if="index == 'test'">测试</span>
<span v-else>{{index}}</span>
</button>
</div>
</div>
</div>
<div class="row " style="padding:5px;">
<div class="col-sm-3">
时长选择：
</div>
<div class="col-sm-9">
<div class="btn-group" role="group" aria-label="...">
<button v-for="item in package_info_list" type="button" :class="'package-name-'+item.Id" v-on:click="package_name_click('package-name-'+item.Id,item.Id)" class="btn btn-default btn-lg">{{item.package_name}}</button>
</div>
</div>
</div>
<div class="row " style="padding:5px;">
<div class="col-sm-3">
应付金额：
</div>
<div class="col-sm-9">
<span>￥{{order_info.price}}</span>
<button style="float:right;margin-right:50px;" v-on:click="pay_page()" class="btn btn-success btn-lg">购买</button>
</div>
</div>
<div class="row" v-if="qilin.product_id == 2">
<div class="col-sm-12" style="background-color:rgb(209 236 241);padding:10px;margin:10px 0">
<p>专享专线：稳定、安全，上下行同速，告别游戏延迟、卡顿。IP将长久有效<span style="color:red;">IP不变化</span>。</p>
<p>线路品质：尊享 > 砖石 > 白金 > 黄金 > 青铜，线路等级越高线路质量越好</p>
</div>
<div class="col-sm-12" style="background-color:rgb(209 236 241);padding:10px;margin:10px 0">
<p>游戏独享:单个游戏所用IP保证在IP池内不会出现同款游戏使用相同IP,游戏真实独享。</p>
<p>线路独享:个人独享整个线路,真实独享,永远不重复。</p>
<p style="color:red;">线路切换单日限制为20次</p>
<p style="color:red;">如果没有自己想用的地区线路或线路余量不足，请联系客服上架</p>
</div>
</div>
<div class="row" v-if="qilin.product_id == 1">
<div class="col-sm-12" style="background-color:rgb(209 236 241);padding:10px;margin:10px 0">
<p>静态线路：稳定、安全，高带宽出口，游戏、直播全搞定。IP<span style="color:red;">3-7</span>天周期性变化。</p>
<p>线路品质：尊享 > 砖石 > 白金 > 黄金 > 青铜，线路等级越高线路质量越好</p>
</div>
<div class="col-sm-12" style="background-color:rgb(209 236 241);padding:10px;margin:10px 0">
<p>游戏独享:单个游戏所用IP保证在IP池内不会出现同款游戏使用相同IP,游戏真实独享。</p>
<p>线路独享:个人独享整个线路,真实独享,永远不重复。</p>
<p style="color:red;">线路切换单日限制为20次</p>
<p style="color:red;">如果没有自己想用的地区线路或线路余量不足，请联系客服上架</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="~/js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
qilin:{
'title':'购买水滴专线-固态',
'is_unshar':0, // 0 游戏独享 1 线路独享
'game_id':0,
'product_id':1,//1静态 2固态
},
game_list:[],
province_city:{},
province:[],
citys:[],
package_list:[],
package_info_list:[],
order_info:{
pay_type:10,
type:0,//类型,0:静态;1:专线;
package_id:'',
game_id:'',
buy_num:1,
price:'',
account:'',
password:'',
product_info:[]
},
},
computed: {
},
watch: {
},
created: function () {
this.order_info.account = this.randomString(2) + (Math.floor(Math.random() * 1000) + 1);
this.order_info.password = (Math.floor(Math.random() * 1000) + 1);
},
methods: {
randomString(len) {
len = len || 32;
var $chars = 'abcdefhijkmnprstwxy';
var maxPos = $chars.length;
var pwd = '';
for (i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
},
qilinjt() {
$('#qilinbuy').modal('show');
this.qilin.title = "购买拨号线路-静态"
this.qilin.product_id = 1
this.order_info.type = 0;
this.order_info.package_id = '';
this.order_info.product_info = [];
this.game();
this.get_package();
},
qilingt() {
$('#qilinbuy').modal('show');
this.qilin.title = "购买水滴专线-固态"
this.qilin.product_id = 2
this.order_info.type = 1;
this.order_info.package_id = '';
this.order_info.product_info = [];
this.game();
this.get_package();
},
get_package(){
let data = {
cookie:document.cookie,
}
var url = 'http://php-api.juip.com/jinyou/api/getPackage?type=';
if ( @(userid) != 0 ) {
url = 'http://php-api.juip.com/jinyou/Jinyoujt/getPackage?type=';
}
var that = this;
$.ajax({
type: 'POST',
url: url+this.qilin.product_id,
dataType: "json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
that.package_list = res.data;
}
});
},
package_click(cls,type) {
this.package_info_list = [];
this.order_info.package_id = '';
var package_name = cls.split('-');
if (type == 'game') {
for (var i in this.package_list.game) {
if ( @(resttime) < 1) {
this.package_list.game.test[0].Price = 1;
}
$('.package-type-game-'+i).addClass('btn-default');
$('.package-type-game-'+i).removeClass(' btn-success');
if (i == package_name[3]) {
this.package_info_list = this.package_list.game[i];
}
}
}
if (type == 'line') {
if ( @(resttime) < 1) {
this.package_list.line.test[0].Price = 1;
}
for (var i in this.package_list.line) {
$('.package-type-line-'+i).addClass('btn-default');
$('.package-type-line-'+i).removeClass(' btn-success');
if (i == package_name[3]) {
this.package_info_list = this.package_list.line[i];
}
}
}
$("."+cls).addClass(' btn-success');
$("."+cls).removeClass("btn-default");
},
package_name_click(package_name,package_id) {
this.order_info.package_id = package_id;
for (var i in this.package_info_list) {
$('.package-name-'+this.package_info_list[i].Id).addClass('btn-default');
$('.package-name-'+this.package_info_list[i].Id).removeClass(' btn-success');
if (this.package_info_list[i].Id == package_id) {
this.order_info.price = this.package_info_list[i].Price * this.order_info.buy_num;
}
}
$("."+package_name).addClass(' btn-success');
$("."+package_name).removeClass("btn-default");
},
change_num() {
for (var i in this.package_info_list) {
if (this.package_info_list[i].Id == this.order_info.package_id) {
this.order_info.price = this.package_info_list[i].Price * this.order_info.buy_num;
}
}
},
selsect_adddr_num(addr_id,total) {
var num = $("."+addr_id).val();
if (num>total) {
num =total;
$("."+addr_id).val(num)
}
this.order_info.product_info[addr_id] = num;
this.order_info.product_info = {...this.order_info.product_info};
let all_add_num = 0;
for (var i in this.order_info.product_info) {
all_add_num += parseInt(this.order_info.product_info[i]);
}
if (this.order_info.buy_num<all_add_num) {
this.order_info.buy_num = all_add_num;
}
for (var i in this.package_info_list) {
if (this.package_info_list[i].Id == this.order_info.package_id) {
this.order_info.price = this.package_info_list[i].Price * this.order_info.buy_num;
}
}
},
game() {
this.qilin.is_unshar = 0;
$("#jinyougame").removeClass("btn-default");
$("#jinyougame").addClass(" btn-success");
$("#jinyouline").removeClass(" btn-success");
$("#gameselect").removeAttr('disabled');
this.order_info.product_info = [];
this.order_info.package_id = '';
this.package_info_list = [];
var that = this;
$.ajax({
type: 'GET',
url: 'http://php-api.juip.com/jinyou/api/gameList',
dataType: "json",
async:false,
success: function (res) {
that.game_list = res.data;
}
});
this.select_game()
},
line() {
this.order_info.product_info = [];
this.qilin.is_unshar = 1;
this.qilin.game_id = '';
this.order_info.package_id = '';
this.package_info_list = [];
$("#jinyouline").removeClass("btn-default");
$("#jinyouline").addClass(" btn-success");
$("#jinyougame").removeClass(" btn-success");
$("#gameselect").attr('disabled',"true");
this.select_game()
},
select_game() {
this.citys = [];
var that = this;
$.ajax({
type: 'GET',
url: 'http://php-api.juip.com/jinyou/api/regionSurplusOuts?product_id='+this.qilin.product_id+'&is_unshar='+this.qilin.is_unshar+'&game_id='+this.qilin.game_id,
dataType: "json",
async:false,
success: function (res) {
that.province_city = res.data.region
}
});
for (var i in this.province_city.province_surplus_outs) {
this.province.push(i);
this.citys = this.citys.concat(this.province_city.province_surplus_outs[i].citys);
}
this.order_info.game_id = this.qilin.game_id
},
select_province() {
this.citys = [];
for (var i in this.province_city.province_surplus_outs) {
if (this.province.includes(i)) {
this.citys = this.citys.concat(this.province_city.province_surplus_outs[i].citys);
}
}
},
select_all_province() {
var checkboxes = document.querySelector('input[name="allprovince"]');
if (checkboxes.checked) {
for (var i in this.province_city.province_surplus_outs) {
this.province.push(i);
this.citys = this.citys.concat(this.province_city.province_surplus_outs[i].citys);
}
} else {
this.province = [];
this.citys = [];
}
},
pay_page(){
if (this.order_info.package_id == '') {
alert('请选择套餐！');
return;
}
if (this.order_info.game_id == '' && this.qilin.is_unshar == 0) {
alert('请选择游戏！');
return;
}
if (this.order_info.account.length < 5 && this.hasNumAndChar(this.order_info.account)) {
alert('账号长度至少5位！');
return;
}
if (this.order_info.password.length < 3 && this.hasNumAndChar(this.order_info.password)) {
alert('密码长度至少3位！');
return;
}
if (this.order_info.price == 0) {
this.order_info.pay_type = 10;
this.pay()
} else {
$('#pay_qilin').modal('show');
}
},
pay(){
let data = {
cookie:document.cookie,
order_info: this.order_info
}
console.log(data.order_info);
console.log(JSON.stringify(data));
$.ajax({
type: 'POST',
url: 'http://php-api.juip.com/jinyou/jinyoujt/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_qilin').modal('hide');
alert(res.msg);
window.location.href = "/user/myaccounts";
} else if (res.code == 2) {
document.getElementById("alipay").innerHTML=res.data;
document.forms['alipaysubmit'].submit();
$('#pay_qilin').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_qilin').modal('hide');
} else {
$('#pay_qilin').modal('hide');
alert(res.msg);
}
}
});
},
verifyed() {
$('#staticBackdrop').modal('hide');
window.location.href = "/user/myaccounts";
},
hasNumAndChar(str) {
var zg = /^[0-9a-zA-Z]*$/;
if (!zg.test(str)) {
return false;
} else {
return true;
}
},
}
})
</script>
<script>
$(function(){
setTimeout(function(){
$("#loading").hide();
},500);
});
$("#p28").click(function () {
$(".qilinjingtai").show();
for (var i=1;i<30;i++){
$("#p"+i).removeClass("on");
}
});
$(".click_product").click(function () {
$(".qilinjingtai").hide();
});
$(".p_type").hide();
$("#p14").click(function () {