Files
juipnet/Host/Views.Mobile/Product/Index.cshtml

1874 lines
89 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
@using Hncore.Pass.Vpn.Response.Product
@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();
if (pid == "")
{
pid = Model.Select(m => m.Product).FirstOrDefault().Id.ToString();
}
else
{
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}";
}
<div id="loading">
<div class="loader">
<div class="loader-inner">
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
</div>
</div>
</div>
<style>
.loader {
background: #000;
background: radial-gradient(#222, #000);
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: 99999;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
background-color:#cbd3d3;
color:white !important;
}
.loader-inner {
bottom: 0;
height: 60px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap {
animation:
spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
;
box-sizing: border-box;
height: 50px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transform-origin: 50% 100%;
width: 100px;
}
.loader-line {
border: 4px solid transparent;
border-radius: 100%;
box-sizing: border-box;
height: 100px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }
.loader-line-wrap:nth-child(1) .loader-line {
border-color: hsl(0, 80%, 60%);
height: 90px;
width: 90px;
top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
border-color: hsl(60, 80%, 60%);
height: 76px;
width: 76px;
top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
border-color: hsl(120, 80%, 60%);
height: 62px;
width: 62px;
top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
border-color: hsl(180, 80%, 60%);
height: 48px;
width: 48px;
top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
border-color: hsl(240, 80%, 60%);
height: 34px;
width: 34px;
top: 35px;
}
@@keyframes spin {
0%, 15% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div class="cpBanner" style="background:#03162a;display:none;">
<div class="row" style="color:white;width:calc(100vw-1px);">
<div class="col-md-12 text-center" style="padding:2% ;">
<h4>需求五个以上、可联系右侧客服设置优惠价</h4>
<p>动态IP销量排名NO.1<br>
十余种全网知名旗舰产品低价热销、
节点多、稳定、靠谱、单人单线
</p>
</div>
</div>
</div>
<div class="cpNav" style="margin-top:4.7em;">
<div class="item">
<ul class="nav nav-tabs cpName" role="tablist" style="margin-top:calc(26vh);">
<li>
<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>
@foreach (var item in Model)
{
if(item.Product.Id == 18) {
<li role="presentation" onclick="onrecommend(18)" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<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>
} else if(item.Product.Id == 29) {
<li role="presentation" onclick="onrecommend(29)" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<a href="#@item.Product.Id" class="click_product" id="p29" 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 == 3) {
<li role="presentation" onclick="onrecommend(3)" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<a href="#@item.Product.Id" class="click_product" id="p3" 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 == 14) {
<li role="presentation" onclick="onrecommend(14)" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<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" onclick="onrecommend(26)" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<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</a>
</li>
}else if(item.Product.Id == 27) {
<li role="presentation" onclick="onrecommend(27)" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<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</a>
</li>
}else if(item.Product.Id == 6) {
<li role="presentation" onclick="onrecommend(6)" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<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</a>
</li>
}
else if(item.Product.Id == 22) {
<li role="presentation" onclick="onrecommend(22)" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<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) {
<li >
<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" 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 >
<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" id="p28" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name</a>
</li>
} else {
<li onclick="onrecommend( @(item.Product.Id) )" role="presentation" class="@(item.Product.Id==defaultProduct.Id?"active":"")">
<a href="#@item.Product.Id" id="p@(item.Product.Id)" class="click_product" role="tab" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name </a>
</li>
}
}
</ul>
</div>
<div class="item">
<div class="tab-content">
@foreach (var item in Model)
{
<div role="tabpanel" class="tab-pane @(item.Product.Id==defaultProduct.Id?"active":"")" id="@item.Product.Id">
<div style="fonft-size:1.2em;float:left;position: relative;top: calc(-2vh);left: -47%;height:calc(26vh);line-height:1.2em;width:calc(100vw);overflow:hidden;background:#cbd3d3;color:black;border-radius:100px;">
<p class=" text-left" style="color:black;border:none;font-size: 35px;margin:0.7rem 0 0.2rem 0rem;width:calc(38vw);float:left;padding-left:0.4rem;">@item.Product.Name 简介: </p>
<a target="_blank" style="color: black;font-size:32px;float:right;width:calc(60vw);text-align:center;border:2px solid white;border-top:none;line-height:150%;" href="/img/product_compare.png?id=99">点击查看各产品对比<br>需求5个以上可联系客服优惠</a>
<br>
<br>
<ul class="texingList" style="padding-bottom:0;padding-top:0.6rem">
@foreach (var str in item.Product.ContentLine)
{
<li style="padding:5px;">·@str</li>
}
</ul>
<br>
</div>
<div style="margin-top:calc(2vh);">
@if (item.Product.Id == 14){
<div class="p_type @("type"+item.Product.Id)" style="padding-top: 10px;">
<button type="button" onclick="ttzhizun()" class="btn btn-default btn-lg ttzx" style="background-color: #FF9900;font-size:1.3em;">尊享版-不限速</button>
<button type="button" onclick="ttgaoji()" class="btn btn-default btn-lg ttgj" style="background-color: white;font-size:1.3em;">高级版-限速4M</button><br>
<button type="button" onclick="ttputong()" class="btn btn-default btn-lg ttpt" style="background-color: white;font-size:1.3em;margin-top:10px;">普通版-限速2M</button>
</div>
}
@if (item.Product.Id == 26){
<div class="p_type @("type"+item.Product.Id)" style="padding-top: 10px;">
<button type="button" onclick="lbzhizun()" class="btn btn-default btn-lg lbzx" style="background-color: #FF9900;font-size:1.3em;">尊享版-不限速</button>
<button type="button" onclick="lbgaoji()" class="btn btn-default btn-lg lbgj" style="background-color: white;font-size:1.3em;">高级版-限速6M</button><br>
<button type="button" onclick="lbputong()" class="btn btn-default btn-lg lbpt" style="background-color: white;font-size:1.3em;margin-top:10px;">普通版-限速2M</button>
</div>
}
@if (item.Product.Id == 29){
<div class="p_type @("type"+item.Product.Id)" style="padding-top: 10px;">
<button type="button" onclick="jhzhizun()" class="btn btn-default btn-lg jhzx" style="background-color: #FF9900;font-size:1.3em;">尊享版-不限速</button>
<button type="button" onclick="jhgaoji()" class="btn btn-default btn-lg jhgj" style="background-color: white;font-size:1.3em;">高级版-限速6M</button><br>
<button type="button" onclick="jhputong()" class="btn btn-default btn-lg jhpt" style="background-color: white;font-size:1.3em;margin-top:10px;">普通版-限速2M</button>
</div>
}
@if (item.Product.Id == 3){
<div class="p_type @("type"+item.Product.Id)" style="padding-top: 10px;">
<button type="button" onclick="jgzhizun()" class="btn btn-default btn-lg jgzx" style="background-color: #FF9900;font-size:1.3em;">尊享版-不限速</button>
<button type="button" onclick="jggaoji()" class="btn btn-default btn-lg jggj" style="background-color: white;font-size:1.3em;">高级版-限速6M</button><br>
<button type="button" onclick="jgputong()" class="btn btn-default btn-lg jgpt" style="background-color: white;font-size:1.3em;margin-top:10px;">普通版-限速2M</button>
</div>
}
@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;">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>
</div>
}
@if (item.Product.Id == 6){
<div class="p_type @("type"+item.Product.Id)" style="padding-top: 10px;">
<button type="button" onclick="xfgaoji()" class="btn btn-default btn-lg xfgj" style="background-color: #FF9900;font-size:1.3em;">高级-6M</button>
<button type="button" onclick="xfduxiang()" class="btn btn-default btn-lg xfdx" style="background-color: white;font-size:1.3em;">优享-10M</button><br>
</div>
}
<!-- @if (item.Product.Id == 20) {
<div style="margin: 5px;">
<button type="button" onclick="wjdxphone()" id="dxaz" class="btn btn-default btn-lg" style="background-color: white;font-size:1.5em;">安卓/苹果</button>
<button type="button" onclick="wjdxpc()" id="dxdn" class="btn btn-default btn-lg" style="background-color: white;font-size:1.5em;">电脑</button>
</div>
<div style="margin: 5px;">
<button type="button" onclick="wjdxpt()" id="dxpt" class="btn btn-default btn-lg" style="background-color: #FF9900;font-size:1.5em;">普通版-5兆</button>
<button type="button" onclick="wjdxgj()" id="dxgj" class="btn btn-default btn-lg" style="background-color: white;font-size:1.5em;">高端版-10兆</button>
</div>
} -->
<!-- @if (item.Product.Id == 21) {
<div style="margin: 5px;">
<button type="button" onclick="wjgxphone()" id="gxaz" class="btn btn-default btn-lg" style="background-color: #FF9900;font-size:1.5em;">安卓/苹果</button>
<button type="button" onclick="wjgxpc()" id="gxdn" class="btn btn-default btn-lg" style="background-color: white;font-size:1.5em;">电脑</button>
</div>
<div style="margin: 5px;">
<button type="button" onclick="wjgxpt()" id="gxpt" class="btn btn-default btn-lg" style="background-color: #FF9900;font-size:1.5em;">普通版</button>
<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)
{
<a asp-action="test" id="@("package-"+package.Id)" asp-controller="product" asp-route-id="@package.ProductId">
<div class="card color_2">
<div class="item">
<p style="font-size: 35px;color:#FFFF00;">@package.Name</p>
<p>@package.Profile</p>
</div>
<div class="item">
<p>¥<span>0.00</span></p>
<p style="color: #FF9900;text-decoration: line-through">原价:@package.LinePrice 元</p>
</div>
</div>
</a>
}
else
{
@if(package.Price == 0.1M){
<a asp-action="buy" id="@("package-"+package.Id)" asp-controller="product" asp-route-id="@package.Id">
<div class="card color_2">
<div class="item">
<p style="font-size: 35px;color:#FFFF00;">@package.Name 首单</p>
<p>@package.Profile</p>
</div>
<div class="item">
<p>¥<span>@package.Price</span></p>
<p style="color: #FF9900;text-decoration: line-through">原价:@package.LinePrice 元</p>
</div>
</div>
</a>
} else if((package.Id == 89||package.Id == 1034||package.Id == 1040||package.Id == 1094||package.Id == 1097||package.Id == 1103||package.Id == 60||package.Id == 1114)&&package.IsTest==1){
<a asp-action="test" id="@("package-"+package.Id)" asp-controller="product" asp-route-id="@package.Id">
<div class="card color_2">
<div class="item">
<p style="font-size: 35px;color:#FFFF00;">@package.Name</p>
<p>@package.Profile</p>
</div>
<div class="item">
<p>¥<span>0.00</span></p>
<p style="color: #FF9900;text-decoration: line-through">原价:@package.LinePrice 元</p>
</div>
</div>
</a>
}
else {
<a asp-action="buy" id="@("package-"+package.Id)" asp-controller="product" asp-route-id="@package.Id">
<div class="card color_2">
<div class="item">
<p style="font-size: 35px;color:#FFFF00;">@package.Name</p>
<p>@package.Profile</p>
</div>
<div class="item">
@if((package.Id == 64||package.Id == 1004)&&package.Price<60){
<p>¥<span>60.00</span></p>
} else {
<p>¥<span>@package.Price</span></p>
}
<p style="color: #FF9900;text-decoration: line-through">原价:@package.LinePrice 元</p>
</div>
</div>
</a>
}
}
}
}
</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 selectpicker" id="gameselect" data-live-search="true" v-model="qilin.game_id" @@change="select_game" style="height:30px;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">
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="top" data-content="1.这里输入的数量可以大于等于右侧指定地区输入框中的数量总和 例如左侧输入100条右侧只选中了一个地区并设定了20条那么剩余80条将平均分配至未选择的区域。 2.右侧地区不是必填的,用户不手动分配地区,那么将由系统自动分配。"></button>
<script>
$(function (){
$("[data-toggle='popover']").popover();
});
</script>
</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">
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="top" data-content="1.若购买数量大于1则系统将根据用户所填账户内容生成批量账户 2.示例:填写 zhangsan购买数量20则会生成zhangsan1-zhangsan20"></button>
</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>
<div class="modal fade" id="product_recommend" tabindex="-1" role="dialog" aria-labelledby="myModalLabelproduct" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<h4 class="modal-title" id="myModalLabelproduct">
产品推荐
</h4>
</div>
<div class="modal-body">
<p style="font-weight:bold;">重磅打造:</p>
<p style="font-weight:bold;">1.极光IP聚IP池子最大的动态产品240城市纯净住宅IP</p>
<p style="font-weight:bold;">2.极狐IP聚IP网速最快的动态产品260城市纯净住宅IP</p>
<p style="font-weight:bold;">现推广期天卡1毛体验</p>
<p style="font-weight:bold;">承诺不好用24小时内免费退款</p>
<div class="text-right">
<label>
<input id="recommendchechk" type="checkbox"> 7天内不再提示
</label>
</div>
</div>
<div class="modal-footer">
<a href="/product/index" type="button" class="btn btn-primary" >
查看
</a>
<button type="button" class="btn btn-warning" onclick="buyrecommendfunc()" data-dismiss="modal">
忽略
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<div class="modal fade" id="product_recommend_2" tabindex="-1" role="dialog" aria-labelledby="myModalLabelproduct" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<h4 class="modal-title" id="myModalLabelproduct">
产品推荐
</h4>
</div>
<div class="modal-body">
<p style="font-weight:bold;color: red;">强子IP即将停运IP资源池将加进极狐IP。</p>
<p style="font-weight:bold;">重磅打造:</p>
<p style="font-weight:bold;">1.极光IP聚IP池子最大的动态产品240城市纯净住宅IP</p>
<p style="font-weight:bold;">2.极狐IP聚IP网速最快的动态产品260城市纯净住宅IP</p>
<p style="font-weight:bold;">现推广期天卡1毛体验</p>
<p style="font-weight:bold;">承诺不好用24小时内免费退款</p>
<div class="text-right">
<label>
<input id="recommendchechk_2" type="checkbox"> 7天内不再提示
</label>
</div>
</div>
<div class="modal-footer">
<a href="/product/index" type="button" class="btn btn-primary" >
查看
</a>
<button type="button" class="btn btn-warning" onclick="buyrecommendfunc_2()" data-dismiss="modal">
忽略
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script src="~/js/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css">
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-zh_CN.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="/js/bootstrap-select.js"></script>
<script type="text/javascript">
// $(function () {
// app.game();
// });
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() * 10000) + 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 = 'https://php-api.juip.com/jinyou/api/getPackage?type=';
if ( @(userid) != 0 ) {
url = 'https://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: 'https://php-api.juip.com/jinyou/api/gameList',
dataType: "json",
async:false,
success: function (res) {
that.game_list = res.data;
}
});
this.$nextTick(() => {
$('#gameselect').selectpicker('refresh'); // 重新渲染下拉框
});
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: 'https://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.province_city.surplus_out_total < this.order_info.buy_num){
alert('节点数量不足!');
return;
}
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: 'https://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('');
$("#qrcode_s").qrcode({
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 buyrecommendfunc() {
var isChecked = $('#recommendchechk').is(':checked');
if (isChecked) {
localStorage.setItem('buyrecommend', new Date().getTime());
}
}
function buyrecommendfunc_2() {
var isChecked = $('#recommendchechk_2').is(':checked');
if (isChecked) {
localStorage.setItem('buyrecommend_2', new Date().getTime());
}
}
function onrecommend(id) {
if (id != 29 && id != 26 && id != 3 && id != 28 && id != 22 && id != 21 && id != 20 && id != 18 && id != 1 ) {
var lastClosedTime = localStorage.getItem('buyrecommend');
if (!lastClosedTime) {
// 如果之前没有关闭时间记录,则显示提示框
$('#product_recommend').modal('show')
} else {
// 如果有关闭时间记录则检查是否超过7天
var sevenDaysInMillis = 7 * 24 * 60 * 60 * 1000; // 7天的毫秒数
var currentTime = new Date().getTime();
if (currentTime - lastClosedTime > sevenDaysInMillis) {
// 超过7天显示提示框
$('#product_recommend').modal('show')
}
}
}
if (id == 1) {
var lastClosedTime = localStorage.getItem('buyrecommend_2');
if (!lastClosedTime) {
// 如果之前没有关闭时间记录,则显示提示框
$('#product_recommend_2').modal('show')
} else {
// 如果有关闭时间记录则检查是否超过7天
var sevenDaysInMillis = 7 * 24 * 60 * 60 * 1000; // 7天的毫秒数
var currentTime = new Date().getTime();
if (currentTime - lastClosedTime > sevenDaysInMillis) {
// 超过7天显示提示框
$('#product_recommend_2').modal('show')
}
}
}
}
$(function(){
setTimeout(function(){
$("#loading").hide();
},500);
$(".type14").hide();
$(".type29").show();
$(".type3").hide();
$(".type6").hide();
$(".type27").hide();
$(".type26").hide();
for (var i=1187;i<1193;i++){
$("#package-"+i).show();
}
for (var i=1193;i<1205;i++){
$("#package-"+i).hide();
}
for (var i=1208;i<1211;i++){
$("#package-"+i).hide();
}
for (var i=1205;i<1208;i++){
$("#package-"+i).show();
}
for (var i=1211;i<1214;i++){
$("#package-"+i).hide();
}
$(".jhzx").css('background-color','#FF9900');
$(".jhgj").css('background-color','white');
$(".jhpt").css('background-color','white');
});
$("#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 () {
$(".type14").show();
$(".type26").hide();
$(".type6").hide();
$(".type27").hide();
$(".type29").hide();
$(".type3").hide();
$("#package-89").show();
$("#package-69").show();
$("#package-70").show();
$("#package-71").show();
$("#package-1022").show();
$("#package-1023").show();
for (var i=1034;i<1046;i++){
$("#package-"+i).hide();
}
$(".ttzx").css('background-color','#FF9900');
$(".ttgj").css('background-color','white');
$(".ttpt").css('background-color','white');
});
$("#p26").click(function () {
$(".type14").hide();
$(".type26").show();
$(".type6").hide();
$(".type27").hide();
$(".type29").hide();
$(".type3").hide();
for (var i=1090;i<1097;i++){
$("#package-"+i).show();
}
for (var i=1097;i<1109;i++){
$("#package-"+i).hide();
}
$(".lbzx").css('background-color','#FF9900');
$(".lbgj").css('background-color','white');
$(".lbpt").css('background-color','white');
});
$("#p29").click(function () {
$(".type14").hide();
$(".type29").show();
$(".type6").hide();
$(".type3").hide();
$(".type27").hide();
$(".type26").hide();
for (var i=1187;i<1193;i++){
$("#package-"+i).show();
}
for (var i=1193;i<1205;i++){
$("#package-"+i).hide();
}
for (var i=1208;i<1211;i++){
$("#package-"+i).hide();
}
for (var i=1205;i<1208;i++){
$("#package-"+i).show();
}
for (var i=1211;i<1214;i++){
$("#package-"+i).hide();
}
$(".jhzx").css('background-color','#FF9900');
$(".jhgj").css('background-color','white');
$(".jhpt").css('background-color','white');
});
$("#p3").click(function () {
$(".type14").hide();
$(".type29").hide();
$(".type6").hide();
$(".type3").show();
$(".type27").hide();
$(".type26").hide();
for (var i=1214;i<1220;i++){
$("#package-"+i).show();
}
for (var i=1235;i<1241;i++){
$("#package-"+i).hide();
}
for (var i=1232;i<1235;i++){
$("#package-"+i).show();
}
for (var i=1220;i<1232;i++){
$("#package-"+i).hide();
}
$(".jgzx").css('background-color','#FF9900');
$(".jggj").css('background-color','white');
$(".jgpt").css('background-color','white');
});
$("#p27").click(function () {
$(".type14").hide();
$(".type26").hide();
$(".type27").show();
$(".type6").hide();
$(".type29").hide();
$(".type3").hide();
for (var i=1115;i<1121;i++){
$("#package-"+i).show();
}
for (var i=1121;i<1139;i++){
$("#package-"+i).hide();
}
$(".qldt1").css('background-color','#FF9900');
$(".qldt5").css('background-color','white');
$(".qldt10").css('background-color','white');
$(".qldt20").css('background-color','white');
});
$("#p13").click(function () {
alert("本产品已升级更新为极狐地区超全涵盖全国260个城市IP高纯净度超速且稳定且每个城市都是三网混合更真实有效 现活动推广期周卡送1天月卡送1周双月送1个月")
});
$("#p17").click(function () {
alert("本产品已升级更新为极狐地区超全涵盖全国260个城市IP高纯净度超速且稳定且每个城市都是三网混合更真实有效 现活动推广期周卡送1天月卡送1周双月送1个月")
});
$("#p6").click(function () {
$(".type14").hide();
$(".type26").hide();
$(".type6").show();
$(".type27").hide();
$(".type29").hide();
$(".type3").hide();
$("#package-60").show();
for (var i=22;i<27;i++){
$("#package-"+i).show();
}
for (var i=1109;i<1115;i++){
$("#package-"+i).hide();
}
$(".xfgj").css('background-color','#FF9900');
$(".xfdx").css('background-color','white');
});
function ttzhizun() {
$("#package-89").show();
$("#package-69").show();
$("#package-70").show();
$("#package-71").show();
$("#package-1022").show();
$("#package-1023").show();
for (var i=1034;i<1046;i++){
$("#package-"+i).hide();
}
$(".ttzx").css('background-color','#FF9900');
$(".ttgj").css('background-color','white');
$(".ttpt").css('background-color','white');
}
function lbzhizun() {
for (var i=1090;i<1097;i++){
$("#package-"+i).show();
}
for (var i=1097;i<1109;i++){
$("#package-"+i).hide();
}
$(".lbzx").css('background-color','#FF9900');
$(".lbgj").css('background-color','white');
$(".lbpt").css('background-color','white');
}
function jhzhizun() {
$(".jhzx").css('background-color','#FF9900');
$(".jhgj").css('background-color','white');
$(".jhpt").css('background-color','white');
for (var i=1187;i<1193;i++){
$("#package-"+i).show();
}
for (var i=1193;i<1205;i++){
$("#package-"+i).hide();
}
for (var i=1208;i<1211;i++){
$("#package-"+i).hide();
}
for (var i=1205;i<1208;i++){
$("#package-"+i).show();
}
for (var i=1211;i<1214;i++){
$("#package-"+i).hide();
}
}
function jgzhizun() {
$(".jgzx").css('background-color','#FF9900');
$(".jggj").css('background-color','white');
$(".jgpt").css('background-color','white');
for (var i=1214;i<1220;i++){
$("#package-"+i).show();
}
for (var i=1235;i<1241;i++){
$("#package-"+i).hide();
}
for (var i=1232;i<1235;i++){
$("#package-"+i).show();
}
for (var i=1220;i<1232;i++){
$("#package-"+i).hide();
}
}
function ttgaoji() {
$(".ttgj").css('background-color','#FF9900');
$(".ttzx").css('background-color','white');
$(".ttpt").css('background-color','white');
$("#package-89").hide();
$("#package-69").hide();
$("#package-70").hide();
$("#package-71").hide();
$("#package-1022").hide();
$("#package-1023").hide();
for (var i=1040;i<1046;i++){
$("#package-"+i).hide();
}
for (var i=1034;i<1040;i++){
$("#package-"+i).show();
}
}
function lbgaoji() {
$(".lbgj").css('background-color','#FF9900');
$(".lbzx").css('background-color','white');
$(".lbpt").css('background-color','white');
for (var i=1090;i<1097;i++){
$("#package-"+i).hide();
}
for (var i=1103;i<1109;i++){
$("#package-"+i).hide();
}
for (var i=1097;i<1103;i++){
$("#package-"+i).show();
}
}
function jhgaoji() {
$(".jhzx").css('background-color','white');
$(".jhgj").css('background-color','#FF9900');
$(".jhpt").css('background-color','white');
for (var i=1187;i<1193;i++){
$("#package-"+i).hide();
}
for (var i=1199;i<1205;i++){
$("#package-"+i).hide();
}
for (var i=1193;i<1199;i++){
$("#package-"+i).show();
}
for (var i=1208;i<1211;i++){
$("#package-"+i).show();
}
for (var i=1205;i<1208;i++){
$("#package-"+i).hide();
}
for (var i=1211;i<1214;i++){
$("#package-"+i).hide();
}
}
function jggaoji() {
$(".jgzx").css('background-color','white');
$(".jggj").css('background-color','#FF9900');
$(".jgpt").css('background-color','white');
for (var i=1214;i<1220;i++){
$("#package-"+i).hide();
}
for (var i=1232;i<1235;i++){
$("#package-"+i).hide();
}
for (var i=1220;i<1226;i++){
$("#package-"+i).show();
}
for (var i=1235;i<1238;i++){
$("#package-"+i).show();
}
for (var i=1226;i<1232;i++){
$("#package-"+i).hide();
}
for (var i=1238;i<1241;i++){
$("#package-"+i).hide();
}
}
function ttputong() {
$(".ttpt").css('background-color','#FF9900');
$(".ttzx").css('background-color','white');
$(".ttgj").css('background-color','white');
$("#package-89").hide();
$("#package-69").hide();
$("#package-70").hide();
$("#package-71").hide();
$("#package-1022").hide();
$("#package-1023").hide();
for (var i=1040;i<1046;i++){
$("#package-"+i).show();
}
for (var i=1034;i<1040;i++){
$("#package-"+i).hide();
}
}
function lbputong() {
$(".lbpt").css('background-color','#FF9900');
$(".lbzx").css('background-color','white');
$(".lbgj").css('background-color','white');
for (var i=1090;i<1097;i++){
$("#package-"+i).hide();
}
for (var i=1103;i<1109;i++){
$("#package-"+i).show();
}
for (var i=1097;i<1103;i++){
$("#package-"+i).hide();
}
}
function jhputong() {
$(".jhpt").css('background-color','#FF9900');
$(".jhzx").css('background-color','white');
$(".jhgj").css('background-color','white');
for (var i=1187;i<1193;i++){
$("#package-"+i).hide();
}
for (var i=1199;i<1205;i++){
$("#package-"+i).show();
}
for (var i=1193;i<1199;i++){
$("#package-"+i).hide();
}
for (var i=1208;i<1211;i++){
$("#package-"+i).hide();
}
for (var i=1205;i<1208;i++){
$("#package-"+i).hide();
}
for (var i=1211;i<1214;i++){
$("#package-"+i).show();
}
}
function jgputong() {
$(".jgpt").css('background-color','#FF9900');
$(".jgzx").css('background-color','white');
$(".jggj").css('background-color','white');
for (var i=1214;i<1226;i++){
$("#package-"+i).hide();
}
for (var i=1226;i<1232;i++){
$("#package-"+i).show();
}
for (var i=1232;i<1238;i++){
$("#package-"+i).hide();
}
for (var i=1238;i<1241;i++){
$("#package-"+i).show();
}
}
function qldt1() {
$(".qldt1").css('background-color','#FF9900');
$(".qldt5").css('background-color','white');
$(".qldt10").css('background-color','white');
$(".qldt20").css('background-color','white');
for (var i=1115;i<1121;i++){
$("#package-"+i).show();
}
for (var i=1121;i<1139;i++){
$("#package-"+i).hide();
}
}
function qldt5() {
$(".qldt1").css('background-color','white');
$(".qldt5").css('background-color','#FF9900');
$(".qldt10").css('background-color','white');
$(".qldt20").css('background-color','white');
for (var i=1115;i<1121;i++){
$("#package-"+i).hide();
}
for (var i=1121;i<1127;i++){
$("#package-"+i).show();
}
for (var i=1127;i<1139;i++){
$("#package-"+i).hide();
}
}
function qldt10() {
$(".qldt1").css('background-color','white');
$(".qldt5").css('background-color','white');
$(".qldt10").css('background-color','#FF9900');
$(".qldt20").css('background-color','white');
for (var i=1115;i<1127;i++){
$("#package-"+i).hide();
}
for (var i=1127;i<1133;i++){
$("#package-"+i).show();
}
for (var i=1133;i<1139;i++){
$("#package-"+i).hide();
}
}
function qldt20() {
$(".qldt1").css('background-color','white');
$(".qldt5").css('background-color','white');
$(".qldt10").css('background-color','white');
$(".qldt20").css('background-color','#FF9900');
for (var i=1115;i<1133;i++){
$("#package-"+i).hide();
}
for (var i=1133;i<1139;i++){
$("#package-"+i).show();
}
}
function xfgaoji() {
$(".xfgj").css('background-color','#FF9900');
$(".xfdx").css('background-color','white');
$("#package-60").show();
for (var i=22;i<27;i++){
$("#package-"+i).show();
}
for (var i=1109;i<1115;i++){
$("#package-"+i).hide();
}
}
function xfduxiang() {
$(".xfdx").css('background-color','#FF9900');
$(".xfgj").css('background-color','white');
$("#package-60").hide();
for (var i=22;i<27;i++){
$("#package-"+i).hide();
}
for (var i=1109;i<1115;i++){
$("#package-"+i).show();
}
}
// var wjdxtype = 1;
// function wjdxphone() {
// $("#dxaz").css('background-color','#FF9900');
// $("#dxdn").css('background-color','white');
// $("#dxpt").css('background-color','#FF9900');
// $("#dxgj").css('background-color','white');
// wjdxtype = 1;
// for (var i=1048;i<1051;i++){
// $("#package-"+i).show();
// }
// for (var i=1051;i<1060;i++){
// $("#package-"+i).hide();
// }
// }
// wjdxphone();
// function wjdxpc() {
// $("#dxaz").css('background-color','white');
// $("#dxdn").css('background-color','#FF9900');
// $("#dxpt").css('background-color','#FF9900');
// $("#dxgj").css('background-color','white');
// wjdxtype = 2;
// for (var i=1048;i<1054;i++){
// $("#package-"+i).hide();
// }
// for (var i=1057;i<1060;i++){
// $("#package-"+i).hide();
// }
// for (var i=1054;i<1057;i++){
// $("#package-"+i).show();
// }
// }
// function wjdxpt() {
// $("#dxpt").css('background-color','#FF9900');
// $("#dxgj").css('background-color','white');
// if (wjdxtype == 1) {
// for (var i=1051;i<1060;i++){
// $("#package-"+i).hide();
// }
// for (var i=1048;i<1051;i++){
// $("#package-"+i).show();
// }
// } else if (wjdxtype == 2) {
// for (var i=1048;i<1054;i++){
// $("#package-"+i).hide();
// }
// for (var i=1054;i<1057;i++){
// $("#package-"+i).show();
// }
// for (var i=1057;i<1060;i++){
// $("#package-"+i).hide();
// }
// }
// }
// function wjdxgj() {
// $("#dxpt").css('background-color','white');
// $("#dxgj").css('background-color','#FF9900');
// if (wjdxtype == 1) {
// for (var i=1048;i<1051;i++){
// $("#package-"+i).hide();
// }
// for (var i=1051;i<1054;i++){
// $("#package-"+i).show();
// }
// for (var i=1054;i<1060;i++){
// $("#package-"+i).hide();
// }
// } else if (wjdxtype == 2) {
// for (var i=1048;i<1057;i++){
// $("#package-"+i).hide();
// }
// for (var i=1057;i<1060;i++){
// $("#package-"+i).show();
// }
// }
// }
// //1 安卓、苹果 2 pc
// var wjgxtype = 1;
// function wjgxphone() {
// $("#gxaz").css('background-color','#FF9900');
// $("#gxdn").css('background-color','white');
// $("#gxpt").css('background-color','#FF9900');
// $("#gxgj").css('background-color','white');
// $("#wjgxgd").removeClass("active");
// $("#wjgxpt").addClass("active");
// wjgxtype = 1;
// for (var i=1060;i<1063;i++){
// $("#package-"+i).show();
// }
// for (var i=1063;i<1072;i++){
// $("#package-"+i).hide();
// }
// }
// wjgxphone();
// function wjgxpc() {
// $("#gxaz").css('background-color','white');
// $("#gxdn").css('background-color','#FF9900');
// $("#gxpt").css('background-color','#FF9900');
// $("#gxgj").css('background-color','white');
// $("#wjgxgd").removeClass("active");
// $("#wjgxpt").addClass("active");
// wjgxtype = 2;
// for (var i=1060;i<1066;i++){
// $("#package-"+i).hide();
// }
// for (var i=1069;i<1072;i++){
// $("#package-"+i).hide();
// }
// for (var i=1066;i<1069;i++){
// $("#package-"+i).show();
// }
// }
// function wjgxpt() {
// $("#gxpt").css('background-color','#FF9900');
// $("#gxgj").css('background-color','white');
// $("#wjgxgd").removeClass("active");
// $("#wjgxpt").addClass("active");
// if (wjgxtype == 1) {
// for (var i=1060;i<1063;i++){
// $("#package-"+i).show();
// }
// for (var i=1063;i<1072;i++){
// $("#package-"+i).hide();
// }
// } else if (wjgxtype == 2) {
// for (var i=1060;i<1066;i++){
// $("#package-"+i).hide();
// }
// for (var i=1066;i<1069;i++){
// $("#package-"+i).show();
// }
// for (var i=1069;i<1072;i++){
// $("#package-"+i).hide();
// }
// }
// }
// function wjgxgj() {
// $("#gxpt").css('background-color','white');
// $("#gxgj").css('background-color','#FF9900');
// $("#wjgxgd").addClass("active");
// $("#wjgxpt").removeClass("active");
// if (wjgxtype == 1) {
// for (var i=1060;i<1063;i++){
// $("#package-"+i).hide();
// }
// for (var i=1063;i<1066;i++){
// $("#package-"+i).show();
// }
// for (var i=1066;i<1072;i++){
// $("#package-"+i).hide();
// }
// } else if (wjgxtype == 2) {
// for (var i=1060;i<1069;i++){
// $("#package-"+i).hide();
// }
// for (var i=1069;i<1072;i++){
// $("#package-"+i).show();
// }
// }
// }
</script>