Files
juipnet/Host/Views/Product/Index.cshtml
2020-11-28 15:51:34 +08:00

585 lines
25 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;
@inject IConfiguration m_Configuration
@inject Hncore.Pass.Vpn.Service.ProductAccountService m_AccountService
@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 productPackages = Model.Where(m => m.Product.Id == defaultProduct.Id).FirstOrDefault().Packages.Where(p => p.Status == 1 && p.IsTest == 0);//.Select(m => m.Packages.Where(p => p.Status == 1 && p.IsTest == 0).FirstOrDefault());
var defaultPackage = productPackages.FirstOrDefault();// Model.Where(m => m.Product.Id == defaultProduct.Id).Select(m => m.Packages.FirstOrDefault()).FirstOrDefault();
var baseUrl = m_Configuration["BaseInfoUrl"];
var restTimes = "3次";
var restStatus = "注册即送";
if (user != null){
restStatus = "剩余次数";
restTimes = await m_AccountService.GetRestTestCount(user.Id)+"次";
}
Func<string, string> P = (path) => $"{baseUrl}{path}";
}
<style>
.productName {
font-style: oblique;
font-weight: 400;
font-size: 32px;
color: #f49119;
}
.pkgNameCard {
background: #223da4;
height: 90px;
padding: 15px;
}
.clear {
clear: both;
}
.clearfix:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
clear: both
}
.main-page {
margin: 0 auto;
width: 1170px;
padding-bottom:50px;
}
.main-page .left {
width:15%;
border-right: 1px #ccc solid;
margin-top: 25px;
padding-right:10px;
}
.main-page .left, .main-page .right {
float: left;
}
.main-page .nav-back {
height: 300px;
}
.main-page .nav {
position: relative;
margin-top: -300px;
width: 136px;
text-align: center;
font-size: 18px;
font-family: "微软雅黑";
color: #000;
}
.main-page .nav div {
height: 47px;
line-height: 47px;
margin-bottom: 8px;
border-radius: 2px;
cursor: pointer;
}
.main-page .nav div.on {
background: #223da4;
color: #fff;
}
.main-page .right {
width: 85%;
height: 800px;
}
.main-page .content {
position: relative;
overflow: hidden;
}
.contentNew {
border:none;
}
.youhuiNew {
font-size: 16px;
border: none;
text-align: center;
padding: 10px 0;
color: red;
font-weight: bold;
}
.mtop {
margin-top:30px;
}
.packageitem86{
position: relative;
}
.packageitem86::before {
position: absolute;
top: 0.3rem;
left: -0.5rem;
z-index: 1;
padding-right: 0.625rem;
font-weight: bold;
line-height: 0px;
color: white;
height: 0px;
border: 1.0rem solid #f64e3d;
border-right-color: transparent;
content: "免费送一个月";
box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
}
.packageitem86::after {
content: "";
position: absolute;
top: 2.1875rem;
left: -0.5rem;
border: 0.25rem solid #f64e3d;
border-left-color: transparent;
border-bottom-color: transparent;
}
.packageitem19{
position: relative;
}
.packageitem19::before {
position: absolute;
top: 0.3rem;
left: -0.5rem;
z-index: 1;
padding-right: 0.625rem;
font-weight: bold;
line-height: 0px;
color: white;
height: 0px;
border: 1.0rem solid #f64e3d;
border-right-color: transparent;
content: "免费送十天";
box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
}
.packageitem19::after {
content: "";
position: absolute;
top: 2.1875rem;
left: -0.5rem;
border: 0.25rem solid #f64e3d;
border-left-color: transparent;
border-bottom-color: transparent;
}
.packageitem71{
position: relative;
}
.packageitem71::before {
position: absolute;
top: 0.3rem;
left: -0.5rem;
z-index: 1;
padding-right: 0.625rem;
font-weight: bold;
line-height: 0px;
color: white;
height: 0px;
border: 1.0rem solid #f64e3d;
border-right-color: transparent;
content: "免费送七天";
box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
}
.packageitem71::after {
content: "";
position: absolute;
top: 2.1875rem;
left: -0.5rem;
border: 0.25rem solid #f64e3d;
border-left-color: transparent;
border-bottom-color: transparent;
}
.packageitem4{
position: relative;
}
.packageitem4::before {
position: absolute;
top: 0.3rem;
left: -0.5rem;
z-index: 1;
padding-right: 0.625rem;
font-weight: bold;
line-height: 0px;
color: white;
height: 0px;
border: 1.0rem solid #f64e3d;
border-right-color: transparent;
content: "八折";
box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
}
.packageitem4::after {
content: "";
position: absolute;
top: 2.1875rem;
left: -0.5rem;
border: 0.25rem solid #f64e3d;
border-left-color: transparent;
border-bottom-color: transparent;
}
.warning{
position: fixed;
width: 400px;
height: auto;
left: 47%;
top: 30%;
z-index: 3;
background: #fff;
border-radius: 10px;
box-shadow: 0px 6px 8px 6px #ccc;
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 30px;
display: none;
}
#hidebg { position:absolute;left:0px;top:0px;
background-color:#000;
width:100%; /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/
filter:alpha(opacity=60); /*设置透明度为60%*/
opacity:0.6; /*非IE浏览器下设置透明度为60%*/
display:none; /* https://www.daixiaorui.com */
z-Index:2;}
</style>
<!-- ad -->
<div id="hidebg"></div>
<div class="container-fluid ad">
<a asp-action="taobao" asp-controller="article"> <img src="~/img/acBanner.png"></a>
</div>
@*新布局*@
<p class="text-center tit"><img src="~/img/titi_choose.png"></p>
<div class="main-page">
<div class="left" style="width: 175px;">
<div class="nav-back" style="width: 175px;"></div>
<div class="nav" style="width:175px;">
@foreach (var item in Model)
{
@if( item.Product.Id == 14){
<div class="productItem" id="@("p"+item.Product.Id)" a-pid="@item.Product.Id" a-pkg-id="@(item.Packages.FirstOrDefault(m=>m.Status==1).Id)">@item.Product.Name <span style="color: #f64e3d;font-weight:bold;font-size:12px;float:right;padding-right: 5px;">送1月</span></div>
}
@* else if(item.Product.Id == 4 || item.Product.Id == 13) {
<div class="productItem" id="@("p"+item.Product.Id)" a-pid="@item.Product.Id" a-pkg-id="@(item.Packages.FirstOrDefault(m=>m.Status==1).Id)">@item.Product.Name <span style="color: #f64e3d;font-weight:bold;font-size:12px;float:right;padding-right: 5px;">八折</span></div>
} *@
else {
<div class="productItem" id="@("p"+item.Product.Id)" a-pid="@item.Product.Id" a-pkg-id="@(item.Packages.FirstOrDefault(m=>m.Status==1).Id)">@item.Product.Name </div>
}
}
</div>
</div>
<div class="right">
<div class="contentNew">
@foreach (var item in Model)
{
<div class="container packagebox" id="@("box"+item.Product.Id)">
<div class="container bg_taocan">
<div class="row" style="background:url(/img/products.png) no-repeat; background-size:100% 100%;">
<div class="col-lg-4" style="height:200px;padding-top:30px;padding-left:50px;">
<p class="productName">@item.Product.Name</p>
<p style=" border-bottom: 2px solid #fff;font-size:16px;">@(string.Join("|",item.Packages.Select(m=>m.Name)))</p>
</div>
<div class="col-lg-8" style="height:200px;padding-top:30px">
@foreach (var str in item.Product.ContentLine)
{
<p>@str</p>
}
<div class="row" style="text-align: right; position: absolute; right: 50px; bottom: 10px;">
@if (user == null)
{
<button type="button" class="btn btn-warning reBuy" style="font-size:25px;">续费通道</button>
}
else
{
<a asp-action="myaccounts" asp-controller="user"><button type="button" class="btn btn-warning" style="font-size:25px;">续费通道</button></a>
}
</div>
</div>
</div>
</div>
@* @if(item.Product.Id == 5){
<p class="youhuiNew">月卡赠送10天双月卡赠送1个月新开和续费都有赠送活动截止时间2020年11月25日。<br>同一个IP账号仅限一次每位会员不限账号数量您可购买多个IP账号都有赠送</p>
} *@
@* @if(item.Product.Id == 13){
<p class="youhuiNew">全部套餐8折聚惠天卡除外新开和续费都有8折活动截止时间11月20日<br>同一个IP账号不限次数您可对同一账号多次续费都有赠送每位会员不限账号数量您可购买多个IP账号都有赠送</p>
}
@if(item.Product.Id == 4){
<p class="youhuiNew">全部套餐8折聚惠天卡除外新开和续费都有8折活动截止时间11月20日<br>同一个IP账号不限次数您可对同一账号多次续费都有赠送每位会员不限账号数量您可购买多个IP账号都有赠送</p>
} *@
@if(item.Product.Id == 14){
<p class="youhuiNew">月卡赠送7天双月卡赠送1个月仅限新开账号续费帐号不赠送活动截止时间2020年12月1日。<br>同一个IP账号仅限一次每位会员不限账号数量您可购买多个IP账号都有赠送</p>
}
@* @if(item.Product.Id == 1){
<p class="youhuiNew">月卡赠送7天季卡赠送1个月新开和续费都有赠送活动截止时间2020年11月15日<br>同一个IP账号不限次数您可对同一账号多次续费都有赠送每位会员不限账号数量您可购买多个IP账号都有赠送</p>
}
@if(item.Product.Id == 2){
<p class="youhuiNew">月卡赠送7天季卡赠送1个月新开和续费都有赠送活动截止时间2020年11月15日<br>同一个IP账号不限次数您可对同一账号多次续费都有赠送每位会员不限账号数量您可购买多个IP账号都有赠送</p>
} *@
@* @if(item.Product.Id == 6){
<p class="youhuiNew">双月卡赠送1个月新开和续费都有赠送活动截止时间2020年11月15日<br>同一个IP账号不限次数您可对同一账号多次续费都有赠送每位会员不限账号数量您可购买多个IP账号都有赠送</p>
} *@
@* @if(item.Product.Id == 8||item.Product.Id == 7||item.Product.Id == 9||item.Product.Id == 3||item.Product.Id == 10||item.Product.Id == 16||item.Product.Id == 15){
<p class="youhuiNew">双月卡赠送1个月新开和续费都有赠送活动截止时间2020年11月15日<br>同一个IP账号不限次数您可对同一账号多次续费都有赠送每位会员不限账号数量您可购买多个IP账号都有赠送</p>
} *@
@*<p class="text-center nameSmall">—<span>@item.Product.Name</span>—</p>*@
<div class="card" style="margin-top:30px;">
<div class="item packageitem" a-test="true" id="@("pkg"+item.Product.Id)" a-pkg-id="@item.Product.Id">
<p><span class="price">免费</span></p>
<p class="yuanjia" style="color: #FF9900;text-decoration:none;"><span>@restStatus</span></p>
<p>@restTimes</p>
<div class="pkgNameCard">
<p class="tianka" style="font-size:17px;">测试卡</p>
<p class="qixian">使用期限:1小时</p>
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
@foreach (var package in item.Packages.Where(m => m.IsTest == 0 && m.Status == 1).OrderBy(m => m.TenantId))
{
@if(package.Id == 88||package.Id == 101||package.Id == 103||package.Id == 104||(package.Id>103)){
<div class="item packageitem packageitem86" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
<p><span class="price">@package.Price</span>元</p>
<p class="yuanjia" style="color: #FF9900;">原价:<span>@package.LinePrice</span>元</p>
<p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
<div class="pkgNameCard" style="background-color:#f64e3d">
<p class="tianka" style="font-size:17px;">@package.Name</p>
<p class="qixian">@package.Profile</p>
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
}
@* else if(package.Id == 19) {
<div class="item packageitem packageitem19" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
<p><span class="price">@package.Price</span>元</p>
<p class="yuanjia" style="color: #FF9900;">原价:<span>@package.LinePrice</span>元</p>
<p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
<div class="pkgNameCard" style="background-color:#f64e3d">
<p class="tianka" style="font-size:17px;">@package.Name</p>
<p class="qixian">@package.Profile</p>
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
} *@
@* else if(package.Id == 63||package.Id == 64||package.Id == 65||package.Id == 66||package.Id == 67||package.Id == 13||package.Id == 14||package.Id == 15||package.Id == 16) {
<div class="item packageitem packageitem4" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
<p><span class="price">@package.Price</span>元</p>
<p class="yuanjia" style="color: #FF9900;">原价:<span>@package.LinePrice</span>元</p>
<p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
<div class="pkgNameCard" style="background-color:#f64e3d">
<p class="tianka" style="font-size:17px;">@package.Name</p>
<p class="qixian">@package.Profile</p>
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
} *@
else if(package.Id == 71||package.Id == 100||package.Id == 102) {
<div class="item packageitem packageitem71" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
<p><span class="price">@package.Price</span>元</p>
<p class="yuanjia" style="color: #FF9900;">原价:<span>@package.LinePrice</span>元</p>
<p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
<div class="pkgNameCard" style="background-color:#f64e3d">
<p class="tianka" style="font-size:17px;">@package.Name</p>
<p class="qixian">@package.Profile</p>
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
} else {
<div class="item packageitem" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
<p><span class="price">@package.Price</span>元</p>
<p class="yuanjia" style="color: #FF9900;">原价:<span>@package.LinePrice</span>元</p>
<p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
<div class="pkgNameCard">
<p class="tianka" style="font-size:17px;">@package.Name</p>
<p class="qixian">@package.Profile</p>
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
}
}
</div>
<div style="border: 1px dashed #ccc;margin-top:30px;width:90%;margin-left: 63px;">
<p class="youhuiNew">温馨提示需求5个以上可以联系客服设置优惠价若您之前享优惠价请联系客服帮你改价哦开通后有任何问题可无理由退款</p>
</div>
@if (user == null)
{
<p class="tijiao"><button type="button" class="btn btn-primary login">提交</button></p>
}
else
{
<p class="tijiao"><button type="button" class="btn btn-primary btn-submit">提交</button></p>
}
</div>
}
</div>
</div>
<div class="clear"></div>
<div class="warning">
<div class="panel panel-default">
<div class="panel-body text-center" style="font-size: 20px;">
请先选择产品套餐^.^
</div>
<p class="text-center">
<button type="button" class="btn btn-danger quxiao" onclick="$('.warning').hide();$('#hidebg').hide();">我明白了</button>
</p>
</div>
</div>
</div>
@section Scripts{
<script type="text/javascript">
var currentPkgId = 0;
var testProductId = 0;
var isTest = false;
function select(id) {
var el = "#p" + id;
var packageBox = "#box" + id;
$(".packagebox").hide();
$(packageBox).show();
$(el).addClass("on");
$(el).siblings().removeClass("on");
var pkgid = $(el).attr("a-pkg-id");
//selectPackage(pkgid);
}
function selectPackage(id) {
currentPkgId = id;
var el = "#pkg" + id;
//$(".packageitem").hide();
//$(el).show()
$(el).addClass("kuang");
$(el).siblings().removeClass("kuang");
$(el).find(".cardCheck").show();
$(el).siblings().find(".cardCheck").hide();
}
function loginSuccess(data) {
window.location.href = "/product/index";
}
function testLoginSuccess(data) {
window.location.href = "Test?id=" + testProductId;
}
function reBuyLoginSuccess(data) {
window.location.href = "/User/MyAccounts";
}
$(function () {
$(".productItem").click(function () {
//$(this).addClass("kuang");
//$(this).siblings().removeClass("kuang");
//$(this).find(".check").show();
//$(this).siblings().find(".check").hide();
var pid = $(this).attr('a-pid');
select(pid);
});
$(".card .item").click(function () {
currentPkgId = $(this).attr('a-pkg-id');
if ($(this).attr('a-test')){
isTest = true;
} else {
isTest = false;
}
selectPackage(currentPkgId)
//$(this).addClass("kuang");
//$(this).siblings().removeClass("kuang");
//$(this).find(".cardCheck").show();
//$(this).siblings().find(".cardCheck").hide();
})
$(".btn-submit").click(function () {
if(!currentPkgId){
$('#hidebg').height($(document).height());
$('#hidebg').show();
$('.warning').show();
return;
}
if(isTest){
window.location.href = "Test?id=" + currentPkgId;
} else {
window.location.href = "Buy?id=" + currentPkgId;
}
})
$(".testLogin").click(function () {
loginCallback = testLoginSuccess;
testProductId = $(this).attr("a-productId");
$(".mask").show();
$(".main").show();
$(".main").addClass("animated bounceInDown");
});
$(".reBuy").click(function () {
loginCallback = reBuyLoginSuccess;
$(".mask").show();
$(".main").show();
$(".main").addClass("animated bounceInDown");
});
})
select(@defaultProduct.Id)
</script>
@*<script type="text/javascript">
$(".main-page .nav div").mouseenter(function () {
var $this = $(this);
var index = $this.index();
}).mouseleave(function () {
var $this = $(this);
var index = $this.index();
}).click(function () {
var $this = $(this);
var index = $this.index();
var l = -(index * 800);
$(".main-page .nav div").removeClass("on");
$(".main-page .nav div").eq(index).addClass("on");
$(".main-page .content .con-ggh:eq(0)").stop().animate({ "margin-top": l }, 500);
});
</script>*@
}