juipnet/Host/Views/Product/Index.cshtml

@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 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"];
    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;
    }
</style>
<!-- ad -->
<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 testLogin" a-productId="@item.Product.Id">免费试用</button>
                                        <button type="button" class="btn btn-warning reBuy">续费通道</button>
                                    }
                                    else
                                    {
                                      
                                            <a asp-action="test" asp-controller="product" asp-route-id="@item.Product.Id"><button type="button" class="btn btn-warning">免费试用</button></a>
                                      
                                            <a asp-action="myaccounts" asp-controller="user"><button type="button" class="btn btn-warning">续费通道</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;">
                        @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>


@section Scripts{
    <script type="text/javascript">
        var currentPkgId = 0;
        var testProductId = 0;
        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 = "Buy?id=" + currentPkgId;
        }
        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');
            selectPackage(currentPkgId)
            //$(this).addClass("kuang");
            //$(this).siblings().removeClass("kuang");
            //$(this).find(".cardCheck").show();
            //$(this).siblings().find(".cardCheck").hide();

        })
        $(".btn-submit").click(function () {
            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>*@
}