Files
juipnet/Host/Views.Mobile/Product/Index.cshtml
“wanyongkang” 5d8bbcc67b 猎豹
2024-01-02 14:13:19 +08:00

641 lines
25 KiB
Plaintext

@using Hncore.Pass.Vpn.Response.Product
@using Microsoft.Extensions.Configuration
@using Hncore.Pass.BaseInfo.Response
@using Hncore.Infrastructure.Serializer;
@inject IConfiguration m_Configuration
@model List<ProductWithPackageResponse>
@{
ViewData["Title"] = "购买产品";
UserLoginModel user = null;
if (this.Context.Request.Cookies.TryGetValue("userInfo", out string userCookie))
{
user = userCookie.FromJsonTo<UserLoginModel>();
}
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 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;
}
.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" 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>
</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>
</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</a>
</li>
}
else if(item.Product.Id == 22) {
<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" 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" data-toggle="tab" style="font-size: 25px;border:1px solid #99CCFF">@item.Product.Name </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>
</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:rgb(57, 81, 107);color:#FFFFFF;">
<p class="texing text-center" style="color:#009933;border:none;">@item.Product.Name 简介</p>
<hr>
<ul class="texingList" style="padding-bottom:0;">
@foreach (var str in item.Product.ContentLine)
{
<li style="padding:5px;">·@str</li>
}
</ul>
<p class=" text-center" style="color:#FF9933">需求五个以上、可联系右侧客服设置优惠价</p>
</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;">高级版-限速4M</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 == 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>
}
@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 != 1103)
{
<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.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>
</div>
</div>
<script>
$(function(){
setTimeout(function(){
$("#loading").hide();
},500);
});
$(".p_type").hide();
$("#p14").click(function () {
$(".type14").show();
$(".type26").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();
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 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 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 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();
}
}
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>