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.2rem solid #0777ff;
        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 #0777ff;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }

    .packageitem10{
        position: relative;
    }
    .packageitem10::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.2rem solid #0777ff;
        border-right-color: transparent;
        content: "8 折+送十天";
        box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
    }

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

    
    .packageitem710{
        position: relative;
    }
    .packageitem710::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.2rem solid #0777ff;
        border-right-color: transparent;
        content: "7 折+送一月";
        box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
    }

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

    .packageitem1{
        position: relative;
    }
    .packageitem1::before {
        position: absolute;
        top: 0.3rem;
        left: -0.5rem;
        z-index: 1;
        padding-right: 0.625rem;
        font-weight: bold;
        line-height: 0px;
        color: #FF0033;
        height: 0px;
        border: 1.0rem solid #FF9933;
        border-right-color: transparent;
        content: "首单0.1元";
        box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
    }

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

    .packageitem81{
        position: relative;
    }
    .packageitem81::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.2rem solid #0777ff;
        border-right-color: transparent;
        content: "8 折+送一个月";
        box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
    }

    .packageitem81::after {
        content: "";
        position: absolute;
        top: 2.1875rem;
        left: -0.5rem;
        border: 0.25rem solid #0777ff;
        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.2rem solid #0777ff;
        border-right-color: transparent;
        content: "9 折+送七天";
        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 #0777ff;
        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.2rem solid #0777ff;
        border-right-color: transparent;
        content: "8 折+送一个月";
        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 #0777ff;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }

    .packageitem92{
        position: relative;
    }
    .packageitem92::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.2rem solid #0777ff;
        border-right-color: transparent;
        content: "8 折+送两个月";
        box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
    }

    .packageitem92.contentNew::after {
        content: "";
        position: absolute;
        top: 2.1875rem;
        left: -0.5rem;
        border: 0.25rem solid #0777ff;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }

    
    .packageitem8-1{
        position: relative;
    }
    .packageitem8-1::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.2rem solid #0777ff;
        border-right-color: transparent;
        content: "8 折+送七天";
        box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
    }

    .packageitem8-1.contentNew::after {
        content: "";
        position: absolute;
        top: 2.1875rem;
        left: -0.5rem;
        border: 0.25rem solid #0777ff;
        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.2rem solid #0777ff;
        border-right-color: transparent;
        content: "9折";
        @* content: "@Model[0].Packages[0].Title 折"; *@
        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 #0777ff;
        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.2rem solid #0777ff;
        border-right-color: transparent;
        content: "8 折";
        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 #0777ff;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }
    p {
        font-size: 14px;
    }


</style>
<!-- ad -->
@* <div class="container-fluid ad">
    <a asp-action="taobao" asp-controller="article">   <img src="~/img/acBanner.png"></a>
</div> *@
<div class="container-fluid ad" style="height:100px;background:#0777ff;">

    <div class="row" style="color:white;width:calc(100vw-1px);">
        <div class="col-md-12 text-center" style="padding-top:1%;">
            <h4>需求五个以上、可联系右侧客服设置优惠价</h4>
            <p>动态IP销量排名NO.1
                十余种全网知名旗舰产品低价热销、
                节点多、稳定、靠谱、单人单线
            </p>
        </div>
    </div>
</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>   
                <a asp-action="index" asp-controller="product">
                    <button type="button" class="btn btn-warning">购买通道</button>
                </a>            
            </div>      
            <div class="col-lg-8" style="height:200px;padding-top:30px;">
                <p>@defaultProduct.Name</p>
                @foreach (var str in defaultProduct.ContentLine)
                {
                    <p style="font-size: 14px;margin:0;">@str</p>
                }     
            </div>
        </div>
    </div> 
    
                    
    <div class="card">
        <div style="display: flex;margin: 0 auto;">
        @foreach (var package in Model.Packages.Where(m => m.IsTest == 0 && m.Status == 1 && m.Id != 21).OrderBy(m => m.TenantId))
        {
            <style>
                .packageitem-@package.Id{
                    position: relative;
                }
                .packageitem-@package.Id::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.2rem solid #0777ff;
                    border-right-color: transparent;
                    content: "@package.Title 折";
                    box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
                }

                .packageitem-@package.Id::after {
                    content: "";
                    position: absolute;
                    top: 2.1875rem;
                    left: -0.5rem;
                    border: 0.25rem solid #0777ff;
                    border-left-color: transparent;
                    border-bottom-color: transparent;
                }
            </style>
                <div class="item packageitem " id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
                    
                    @if((package.Id == 64||package.Id == 1004)&&package.Price<60){
                        <p><span class="price">60.00</span>元</p>
                    } else {
                        <p><span class="price">@package.Price</span>元</p>
                    }
                    <p class="yuanjia" style="color: #FF9900;">原价：<span>@package.LinePrice</span>元</p>
                    <p>&nbsp;</p>
                    <div class="pkgNameCard"  style="background-color:#0777ff">
                        <p class="tianka" style="font-size:13px;">@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>
    <div style="margin-left:26%">
        <div style="border: 1px dashed #ccc;margin-top:30px;width:50%;margin-left: 63px;background-color:#FFCC33">
            <p class="youhuiNew" style="padding-bottom:0px;">温馨提示：需求5个以上，可以联系客服设置优惠价</p>
            <p class="youhuiNew" style="padding-top:0px;padding-bottom:0px;">开通后有任何问题可无理由退款，并支持自助提现</p>
                        <p class="youhuiNew" style="padding-top:0px;padding-bottom:0px;">退款规则：购买价格-使用天数*天卡价格</p>
            
        </div>
    </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 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;">重磅打造：极狐IP（聚IP最好的动态产品），260城市纯净IP（三网混合IP），稳定极速！视频直播无压力！且有不同带宽可选！</p>

                <p style="font-weight:bold;">现推广期天卡1毛体验，周送1天，月送1周，双月送1月！</p>

                <p style="font-weight:bold;">承诺不好用48小时内免费退款！</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>


@if(!string.IsNullOrWhiteSpace(ViewBag.errorTip))
{
    <script>
        alert('禁止续费，请联系客服')
        history.go(-1);
    </script>
}

@section Scripts{
    <script type="text/javascript">

        function buyrecommendfunc() {
            var isChecked = $('#recommendchechk').is(':checked');
            if (isChecked) {
                localStorage.setItem('rebuyrecommend', new Date().getTime());
            }
        }
        var id = getUrlParam('productId')
        if (id != 29 && id != 28 && id != 25 && id != 22 && id != 21 && id != 20 && id != 18 ) {
            var lastClosedTime = localStorage.getItem('rebuyrecommend');
            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')
                }
            }
        }

        //获取url中的参数
        function getUrlParam(name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
          var r = window.location.search.substr(1).match(reg);  //匹配目标参数
          if (r != null) return unescape(r[2]); return null; //返回参数值
        }

        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>
}