juipnet/Host/Views/Product/ReBuyIndex.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 ProductWithPackageResponse
@{
    ViewData["Title"] = "购买产品";
    UserLoginModel user = null;
    if (this.Context.Request.Cookies.TryGetValue("userInfo", out string userCookie))
    {
        user = userCookie.FromJsonTo<UserLoginModel>();
    }
    var defaultProduct = Model.Product; 
    var defaultPackage = Model.Packages.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;
    }
    .youhuiNew {
        font-size: 16px;
        border: none;
        text-align: center;
        padding: 10px 0;
        color: red;
        font-weight: bold;
    }
    .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;
    }

     .packageitem3{
        position: relative;
    }

     .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;
    }
    .packageitem3::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;
    }

    .packageitem3::after {
        content: "";
        position: absolute;
        top: 2.1875rem;
        left: -0.5rem;
        border: 0.25rem solid #f64e3d;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }

     .packageitem91{
        position: relative;
    }
    .packageitem91::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;
    }

    .packageitem91::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>

<div class="container stepOne packagebox" id="@("box"+defaultProduct.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">@defaultProduct.Name</p>               
            </div>
            <div class="col-lg-8" style="height:200px;padding-top:30px">
                <p>@defaultProduct.Name</p>
                @foreach (var str in defaultProduct.ContentLine)
                {
                    <p>@str</p>
                }           
            <div class="row" style="text-align: right;   position: absolute; right: 50px; bottom: 10px;">
                <a asp-action="index" asp-controller="product">
                    <button type="button" class="btn btn-warning">购买通道</button>
                </a>
            </div>
            </div>
        </div>
    </div> 
    @* @if(defaultProduct.Id == 5){
        <p class="youhuiNew">月卡赠送10天，双月卡赠送1个月，新开和续费都有赠送，活动截止时间2020年11月25日。<br>（同一个IP账号仅限一次，每位会员不限账号数量，您可购买多个IP账号都有赠送）</p>
    } *@
    @if(defaultProduct.Id == 14){
        <p class="youhuiNew">月卡赠送7天，双月卡赠送1个月，仅限新开账号，续费帐号不赠送，活动截止时间2020年12月1日。<br>（同一个IP账号仅限一次，每位会员不限账号数量，您可购买多个IP账号都有赠送）</p>
    }
    @if(defaultProduct.Id == 1){
        <p class="youhuiNew">月卡送1周，双月卡赠送1个月，新开和续费都有赠送<br>（同一个IP账号不限次数，您可对同一账号多次续费都有赠送，每位会员不限账号数量，您可购买多个IP账号都有赠送）</p>
    }
    @if(defaultProduct.Id == 2){
        <p class="youhuiNew">月卡送1周，双月卡赠送1个月，新开和续费都有赠送<br>（同一个IP账号不限次数，您可对同一账号多次续费都有赠送，每位会员不限账号数量，您可购买多个IP账号都有赠送）</p>
    }
    @if(defaultProduct.Id == 6){
        <p class="youhuiNew">双月卡赠送1个月，新开和续费都有赠送，活动截止时间2021年2月26日<br>（同一个IP账号不限次数，您可对同一账号多次续费都有赠送，每位会员不限账号数量，您可购买多个IP账号都有赠送）</p>
    }
    @* @if(defaultProduct.Id == 8||defaultProduct.Id == 7||defaultProduct.Id == 9||defaultProduct.Id == 3||defaultProduct.Id == 10||defaultProduct.Id == 16||defaultProduct.Id == 15){
        <p class="youhuiNew">双月卡赠送1个月，新开和续费都有赠送，活动截止时间2020年11月15日<br>（同一个IP账号不限次数，您可对同一账号多次续费都有赠送，每位会员不限账号数量，您可购买多个IP账号都有赠送）</p>
    } *@
    @if(defaultProduct.Id == 13){
       <p class="youhuiNew">双月卡赠送1个月，仅限新开账号，续费帐号不赠送，活动截止时间2020年1月31日<br>（同一个IP账号仅限一次，每位会员不限账号数量，您可购买多个IP账号都有赠送）</p>
    }
    @if(defaultProduct.Id == 17){
       <p class="youhuiNew">双月卡赠送1个月，仅限新开账号，续费帐号不赠送，活动截止时间2020年2月28日<br>（同一个IP账号仅限一次，每位会员不限账号数量，您可购买多个IP账号都有赠送）</p>
    }
    @* @if(defaultProduct.Id == 4){
        <p class="youhuiNew">全部套餐8折聚惠，天卡除外，新开和续费都有8折，活动截止时间11月20日<br>（同一个IP账号不限次数，您可对同一账号多次续费都有赠送，每位会员不限账号数量，您可购买多个IP账号都有赠送）</p>
    } *@
                    
    <div class="card">
        @foreach (var package in Model.Packages.Where(m => m.IsTest == 0 && m.Status == 1&& m.Id != 1009&& m.Id != 1018&& m.Id != 1019&& m.Id != 1020&& m.Id != 1021).OrderBy(m => m.TenantId))
        {
            @if(package.Id == 88||package.Id == 101||package.Id == 103||package.Id == 104||(package.Id>103 && package.Id>1000 && package.Id!=1012 && package.Id!=1013 && package.Id!=1014)){
                                
                    <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 == 1018){
                                
                                <div class="item packageitem packageitem91" 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 == 1||package.Id == 1002||package.Id == 1003||package.Id == 4||package.Id == 7||package.Id == 12||package.Id == 17||package.Id == 22||package.Id == 27||package.Id == 32||package.Id == 37||package.Id == 42||package.Id == 62||package.Id == 69||package.Id == 73||package.Id == 80) {
                    <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 if(package.Id != 88) {
                    
                    <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>
                }
        @* <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>@(package.DayPrice)元/天</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>

@if(!string.IsNullOrWhiteSpace(ViewBag.errorTip))
{
    <script>
        alert('@ViewBag.errorTip')
        history.go(-1);
    </script>
}

@section Scripts{
    <script type="text/javascript">
    var currentPkgId = 0;
    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 = "rebuy?packageId=" + currentPkgId+"&accounts=@ViewBag.accounts";
    }
    $(function () {
        $(".card .item").click(function () {
            currentPkgId = $(this).attr('a-pkg-id');
            selectPackage(currentPkgId)
        })
        $(".btn-submit").click(function () {
            if(currentPkgId == 0){
                alert("未选择套餐！");
                return;
            }
            window.location.href = "rebuy?packageId=" + currentPkgId+"&accounts=@ViewBag.accounts";
        })
        selectPackage(currentPkgId)
    })

    </script>
}