购买页面优化

Host/Views/Product/Index.cshtml

@@ -3,6 +3,7 @@
 @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"] = "购买产品";
@@ -27,6 +28,12 @@
     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>
@@ -236,8 +243,39 @@
         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>
@@ -282,15 +320,11 @@
                                 <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>
+                                        <button type="button" class="btn btn-warning reBuy" style="font-size:25px;">续费通道</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>
+                                        <a asp-action="myaccounts" asp-controller="user"><button type="button" class="btn btn-warning"  style="font-size:25px;">续费通道</button></a>
                                         
                                     }
 
@@ -326,6 +360,18 @@
                     
                     @*<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)){
@@ -419,6 +465,16 @@
         </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>
 
 
@@ -426,6 +482,7 @@
     <script type="text/javascript">
         var currentPkgId = 0;
         var testProductId = 0;
+        var isTest = false;
         function select(id) {
             var el = "#p" + id;
             var packageBox = "#box" + id;
@@ -434,7 +491,7 @@
             $(el).addClass("on");
             $(el).siblings().removeClass("on");
             var pkgid = $(el).attr("a-pkg-id");
-            selectPackage(pkgid);
+            //selectPackage(pkgid);
         }
 
         function selectPackage(id) {
@@ -448,7 +505,7 @@
             $(el).siblings().find(".cardCheck").hide();
         }
         function loginSuccess(data) {
-            window.location.href = "Buy?id=" + currentPkgId;
+            window.location.href = "/product/index";
         }
         function testLoginSuccess(data) {
             window.location.href = "Test?id=" + testProductId;
@@ -467,6 +524,11 @@
         });
         $(".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");
@@ -475,7 +537,17 @@
 
         })
         $(".btn-submit").click(function () {
-            window.location.href = "Buy?id=" + currentPkgId;
+            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;