初始提交

Host/Views/Product/Index - 副本 (2).cshtml

@@ -0,0 +1,292 @@
+@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>
+    .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: #0c215d;
+                    color: #fff;
+                }
+
+        .main-page .right {
+            width: 85%;
+            height: 800px;
+           
+        }
+
+        .main-page .content {
+            position: relative;
+            overflow: hidden;
+        }
+    .contentNew {
+        border:none;
+    }
+    .youhuiNew {
+        font-size:14px;
+        border:none;
+        text-align:center;
+        padding:5px 0;
+        color:red;
+    }
+    .mtop {
+        margin-top:30px;
+    }
+</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">
+        <div class="nav-back"></div>
+        <div class="nav">
+            @foreach (var item in Model)
+            {
+                <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 stepOne packagebox" id="@("box"+item.Product.Id)">
+                    <div class="container bg_taocan">
+                        <div class="row">
+                            <div class="col-lg-3 text-center photo">
+                                <div class="photoK">
+                                    @*<img src="/@item.Product.Image">*@
+                                    <p>@item.Product.Name</p>
+                                </div>
+                            </div>
+                            <div class="col-lg-6 intro">
+                                <p>@item.Product.Name</p>
+                                @foreach (var str in item.Product.ContentLine)
+                                {
+                                    <p>·@str</p>
+                                }
+                            </div>
+                            <div class="col-lg-3 text-center twoButton">
+                                @if (user == null)
+                                {
+                                    <p><button type="button" class="btn btn-warning testLogin" a-productId="@item.Product.Id">免费试用</button></p>
+                                    <p><button type="button" class="btn btn-warning reBuy">续费通道</button></p>
+                                }
+                                else
+                                {
+                                    <p>
+                                        <a asp-action="test" asp-controller="product" asp-route-id="@item.Product.Id"><button type="button" class="btn btn-warning">免费试用</button></a>
+                                    </p>
+                                    <p>
+                                        <a asp-action="myaccounts" asp-controller="user"><button type="button" class="btn btn-warning">续费通道</button></a>
+                                    </p>
+                                }
+
+
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-center nameSmall">—<span>@item.Product.Name</span>—</p>
+                    <div class="card">
+                        @foreach (var package in item.Packages.Where(m => m.IsTest == 0 && m.Status == 1))
+                        {
+                            <div class="item packageitem" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
+                                <p class="tianka">@package.Name</p>
+                                <p><span class="price">@package.Price</span>元</p>
+                                <p class="yuanjia">原价：<span>@package.LinePrice</span>元</p>
+                                <p>@(package.DayPrice)元/天</p>
+                                <p class="qixian">@package.Profile</p>
+                                <img src="~/img/check.png" class="cardCheck">
+                            </div>
+                        }
+                    </div>
+                    <p class="youhuiNew mtop">需求5个以上，可以联系客服设置优惠价</p>
+                    <p class="youhuiNew">温馨提示：若您之前享优惠价，请联系客服帮你改价哦</p>
+
+                    @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>*@
+}

Host/Views/Product/Index - 副本.cshtml

@@ -0,0 +1,197 @@
+@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}";
+}
+<!-- ad -->
+<div class="container-fluid ad">
+    <a asp-action="taobao" asp-controller="article">   <img src="~/img/acBanner.png"></a>
+</div>
+<!-- con -->
+<div class="container">
+    <p class="text-center tit"><img src="~/img/titi_choose.png"></p>
+    <div class="cpshow">
+
+        @foreach (var item in Model)
+        {
+            <div class="item" id="@("p"+item.Product.Id)" a-pid="@item.Product.Id" a-pkg-id="@(item.Packages.FirstOrDefault(m=>m.Status==1).Id)">
+                <p class="cpimg"><img src="@P(item.Product.Image)" /></p>
+                <p>@item.Product.Name</p>
+                <img src="~/img/check.png" class="check">
+            </div>
+        }
+
+    </div>
+</div>
+<!-- form -->
+
+@foreach (var item in Model)
+{
+<div class="container stepOne packagebox" id="@("box"+item.Product.Id)">
+    <div class="container bg_taocan">
+        <div class="row">
+            <div class="col-lg-3 text-center photo">
+                <div class="photoK">
+                    <img src="/@item.Product.Image">
+                    <p>@item.Product.Name</p>
+                </div>
+            </div>
+            <div class="col-lg-6 intro">
+                <p>@item.Product.Name</p>
+                @foreach (var str in item.Product.ContentLine)
+                {
+                    <p>·@str</p>
+                }
+                @*<p>·不限速，网速最高可达50兆</p>
+                    <p>·支持手机，电脑，模拟器</p>
+                    <p>·200多个城市+全国混波量ip千万级</p>
+                    <p>·带宽6-10兆</p>
+                    <p>·断开再链接换ip</p>*@
+            </div>
+            <div class="col-lg-3 text-center twoButton">
+                @if (user == null)
+                {
+                    <p><button type="button" class="btn btn-warning testLogin" a-productId="@item.Product.Id">免费试用</button></p>
+                    <p><button type="button" class="btn btn-warning reBuy">续费通道</button></p>
+                }
+                else
+                {
+                    <p>
+                        <a asp-action="test" asp-controller="product" asp-route-id="@item.Product.Id"><button type="button" class="btn btn-warning">免费试用</button></a>
+                    </p>
+                    <p>
+                        <a asp-action="myaccounts" asp-controller="user"><button type="button" class="btn btn-warning">续费通道</button></a>
+                    </p>
+                }
+
+
+            </div>
+        </div>
+    </div>
+    <p class="text-center nameSmall">—<span>@item.Product.Name</span>—</p>
+    <div class="card">
+        @foreach (var package in item.Packages.Where(m => m.IsTest == 0 && m.Status == 1))
+        {
+            <div class="item packageitem" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
+                <p class="tianka">@package.Name</p>
+                <p><span class="price">@package.Price</span>元</p>
+                <p class="yuanjia">原价：<span>@package.LinePrice</span>元</p>
+                <p>@(package.DayPrice)元/天</p>
+                <p class="qixian">@package.Profile</p>
+                <img src="~/img/check.png" class="cardCheck">
+            </div>
+        }
+    </div>
+    <p class="youhui">需求5个以上，可以联系客服设置优惠价</p>
+    <p class="youhui">温馨提示：若您之前享优惠价，请联系客服帮你改价哦</p>
+    
+    @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>
+}
+
+@section Scripts{
+    <script type="text/javascript">
+        var currentPkgId = 0;
+        var testProductId = 0;
+        function select(id) {
+            var el = "#p" + id;
+            var el_box = "#box" + id;
+            $(".packagebox").hide();
+            $(el_box).show()
+            $(el).addClass("kuang");
+            $(el).siblings().removeClass("kuang");
+            $(el).find(".check").show();
+            $(el).siblings().find(".check").hide();
+            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 () {
+        $(".cpshow .item").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>
+}

Host/Views/Product/Index.cshtml

@@ -0,0 +1,308 @@
+@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;
+    }
+</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">
+        <div class="nav-back"></div>
+        <div class="nav">
+            @foreach (var item in Model)
+            {
+                <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>
+                    @*<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))
+                        {
+                        <div class="item packageitem" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
+
+                            <p><span class="price">@package.Price</span>元</p>
+                            <p class="yuanjia">原价：<span>@package.LinePrice</span>元</p>
+                            <p>@(package.DayPrice)元/天</p>
+                            <div class="pkgNameCard">
+                                <p class="tianka">@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>*@
+}

Host/Views/Product/ReBuyIndex.cshtml

@@ -0,0 +1,132 @@
+@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;
+    }
+</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> 
+    <div class="card">
+        @foreach (var package in Model.Packages.Where(m => m.IsTest == 0 && m.Status == 1))
+        {
+        <div class="item packageitem" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
+           
+            <p><span class="price">@package.Price</span>元</p>
+            <p class="yuanjia">原价：<span>@package.LinePrice</span>元</p>
+            <p>@(package.DayPrice)元/天</p>
+            <div class="pkgNameCard">
+                <p class="tianka">@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 =@defaultPackage.Id;
+    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 () {
+            window.location.href = "rebuy?packageId=" + currentPkgId+"&accounts=@ViewBag.accounts";
+        })
+        selectPackage(currentPkgId)
+    })
+
+    </script>
+}

Host/Views/Product/Soft.cshtml

@@ -0,0 +1,50 @@
+@using Hncore.Pass.Vpn.Domain
+@using Microsoft.Extensions.Configuration
+@inject IConfiguration m_Configuration
+@model List<ProductEntity>
+@{
+    var baseUrl = m_Configuration["BaseInfoUrl"];
+    Func<string, string> P = (path) => $"{baseUrl}{path}";
+}
+<div class="container-fluid softBg">
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-4">
+
+            </div>
+            <div class="col-lg-4 text-center">
+                <p class="simg"><img src="~/img/img_soft.png"></p>
+                <p class="sintro">软件和账户必须为同一产品才能使用</p>
+            </div>
+            <div class="col-lg-4 text-right">
+                <a href="#" class="jiaocheng">使用教程→</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="soft">
+        @foreach (var item in Model.Where(m=>m.Sort!=1000))
+        {
+            <div class="sitem">
+                <div class="smodel">
+                    <div class="softName" style="width:200px;text-align:center;">
+                        @item.Name
+                    </div>
+                    
+                    <div class="item">
+                        <a href="@item.PcClientDownloadUrl"> <button type="button" class="btn btn-sdefault">Windows</button></a>
+                    </div>
+                    @if (item.Id != 3 && item.Id != 7 && item.Id != 9 && item.Id != 12)
+                    {
+                        <div class="item">
+                            <a href="@item.SimulatorDownloadUrl"> <button type="button" class="btn btn-sdefault">SSTP客户端</button></a>
+                        </div>
+                    }
+                    <p>免安装，下载后直接打开</p>
+                </div>
+            </div>
+        }
+    </div>
+</div>

Host/Views/Product/Test.cshtml

@@ -0,0 +1,128 @@
+@using Hncore.Pass.Vpn.Response.Product
+@using Hncore.Infrastructure.Extension
+@using Hncore.Infrastructure.Common
+@model PackageInfoResponse
+@inject Hncore.Pass.Vpn.Service.ProductAccountService m_AccountService
+@{
+    ViewData["Title"] = "领取试用";
+    var t = this.Context.Request.GetInt("t");
+    var randomPwd = ValidateCodeHelper.MakeNumCode(3).ToLower();
+    var randomAccount = ValidateCodeHelper.MakeCharCode(2).ToLower() + ValidateCodeHelper.MakeNumCode(4).ToLower();
+    while (m_AccountService.Exist(m => m.Account == randomAccount))
+    {
+        randomAccount = ValidateCodeHelper.MakeCharCode(2).ToLower() + ValidateCodeHelper.MakeNumCode(4).ToLower();
+    }
+}
+
+<style>
+    .tip {
+        color: red;
+        text-align: center
+    }
+</style>
+
+<div class="container-fluid top">
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-3 text-center">
+                当前已选产品：
+            </div>
+            <div class="col-lg-6">
+                <div class="selectCard">
+                    @*<div class="item">
+                            <p class="selectPhoto">  <img src="/@Model.Product.Image"></p>
+                            <p>@Model.Product.Name</p>
+                        </div>*@
+                    <div class="item">
+                        <p style="padding-top: 40px; font-size: 25px; font-weight: bold;    color: #ee7a69;">@Model.Product.Name</p>
+                    </div>
+                    <div class="item">
+                        <p class="sname">@Model.Package.Name</p>
+                        <p class="sprice">0元</p>
+                        <p class="stime">@Model.Package.Profile</p>
+
+                    </div>
+                    <div class="item">
+                        <p class="zongjia"><span>@Model.Package.Price</span>元</p>
+                    </div>
+                </div>
+                <p class="tishi tishika" style="text-align:center">*请务必选好所需商品，换货会产生费用</p>
+            </div>
+            <div class="col-lg-3">
+                <a asp-action="index" asp-controller="product">返回重新选择》</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 试用 -->
+<div class="container biaodan">
+    <div class="row">
+        <div class="col-lg-3 text-right shuruname">
+            <p>PPTP账号名称：</p>
+            <p>PPTP账号密码：</p>
+        </div>
+        <div class="col-lg-4 text-left shuru">
+            <p><input type="text" name="" id="account" value="@randomAccount" /></p>
+            <p><input type="text" name="" id="pwd" value="@randomPwd" /></p>
+            <div class="btnlingqu">
+                <div class="item cishu">
+                    剩余试用次数<span style="color:red">@(Model.RestTimes)</span>
+                </div>
+                <div class="item tip">
+
+                </div>
+                <div class="item tijiao lingqu">
+                    @if (Model.RestTimes > 0 && Model.Package.Status == 1)
+                    {
+                        <button type="button" class="btn btn-primary" onclick="create()">领取试用</button>
+                    }
+                    @if (Model.Package.Status == 0)
+                    {
+                        <span class="tip">
+                            该产品暂不能测试
+                        </span>
+                    }
+                </div>
+            </div>
+
+        </div>
+        @*<div class="col-lg-5 text-left">
+                <p class="tishi chongfu">*此用户名重复，请重新输入</p>
+            </div>*@
+    </div>
+
+</div>
+
+@section Scripts{
+    <script>
+        function create() {
+            var data = {
+                ProductId:@(Model.Product.Id),
+                PackageId: @(Model.Package.Id),
+                Account: $('#account').val(),
+                Pwd: $('#pwd').val()
+            };
+            if (data.Account == '' || data.Pwd == '') {
+                $(".tip").text("账户和密码不能为空");
+                return;
+            }
+            $.ajax({
+                type: 'POST',
+                url: '/api/course/v1/productaccount/CreateTestAccount',
+                contentType: "application/json",
+                data: JSON.stringify(data),
+                success: function (res) {
+                    console.log(res);
+                    if (res.Code == 10000) {
+                        alert("领取成功")
+                        window.location.href = "/user/myaccounts";
+                    } else {
+                        $(".tip").text(res.Message);
+                    }
+                },
+                dataType: "json"
+            });
+        }
+    </script>
+}

Host/Views/Product/buy.cshtml

@@ -0,0 +1,744 @@
+@using Hncore.Pass.Vpn.Response.Product
+@using Hncore.Infrastructure.Extension
+@using Hncore.Pass.BaseInfo.Response
+@using Hncore.Infrastructure.Serializer;
+@using Hncore.Pass.BaseInfo.Service
+@using Hncore.Infrastructure.Common
+
+@model PackageInfoResponse
+@inject UserService m_UserService
+@inject Hncore.Pass.Vpn.Service.ProductAccountService m_AccountService
+@{
+    ViewData["Title"] = "购买产品";
+    UserLoginModel user = null;
+    Hncore.Pass.BaseInfo.Models.User userEntity = new Hncore.Pass.BaseInfo.Models.User();
+    if (this.Context.Request.Cookies.TryGetValue("userInfo", out string userCookie))
+    {
+        user = userCookie.FromJsonTo<UserLoginModel>();
+        userEntity = await m_UserService.GetById(user.Id);
+    }
+
+    var randomPwd = ValidateCodeHelper.MakeNumCode(3).ToLower();
+    var randomAccount1 = ValidateCodeHelper.MakeCharCode(2).ToLower() + ValidateCodeHelper.MakeNumCode(4).ToLower();
+
+    while (m_AccountService.Exist(m => m.Account == randomAccount1)) {
+        randomAccount1 = ValidateCodeHelper.MakeCharCode(2).ToLower() + ValidateCodeHelper.MakeNumCode(4).ToLower();
+    }
+
+    var randomAccountMutil = ValidateCodeHelper.MakeCharCode(3).ToLower();
+
+    while (m_AccountService.Exist(m =>m.Account.StartsWith(randomAccountMutil)))
+    {
+        randomAccountMutil = ValidateCodeHelper.MakeCharCode(3).ToLower();
+    }
+}
+<script src="~/js/vue.js"></script>
+<script type="text/javascript">
+    $(function () {
+        $('.spinner .btn:first-of-type').on('click', function () {
+            $('.spinner input').val(parseInt($('.spinner input').val(), 10) + 1);
+            });
+        $('.spinner .btn:last-of-type').on('click', function () {
+            $('.spinner input').val(parseInt($('.spinner input').val(), 10) - 1);
+            });
+
+        $(".dan").addClass("cu");
+        $(".dan").click(function () {
+            $(this).addClass("cu");
+            $(".pi").removeClass("cu");
+            $(".t1").show();
+            $(".t2").hide();
+            });
+        $(".pi").click(function () {
+            $(this).addClass("cu");
+            $(".dan").removeClass("cu");
+            $(".t1").hide();
+            $(".t2").show();
+            })
+    })
+</script>
+<vc:pay-wait></vc:pay-wait>
+<vc:pay-ok></vc:pay-ok>
+<div class="container-fluid top">
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-3 text-center">
+                当前已选产品：
+            </div>
+            <div class="col-lg-6">
+                <div class="selectCard">
+                    <div class="item">
+                        <p style="padding-top: 40px; font-size: 25px; font-weight: bold;    color: #ee7a69;">@Model.Product.Name</p>
+                    </div>
+                    <div class="item">
+                        <p class="sname">@Model.Package.Name</p>
+                        <p class="sprice">@(Model.Package.DayPrice)元/天</p>
+                        <p class="stime">@Model.Package.Profile</p>
+
+                    </div>
+                    <div class="item">
+                        <p class="zongjia"><span>@Model.Package.Price</span>元</p>
+                    </div>
+                </div>
+                <p class="tishi tishika" style="text-align:center">*请务必选好所需商品，换货会产生费用</p>
+                @if (Model.Package.Name == "天卡")
+        {
+                    <p class="tishi " style="text-align:center">*天卡不支持退款，请谨慎购买</p>
+    }
+            </div>
+            <div class="col-lg-3">
+                <a href="javascript:history.go(-1)">返回重新选择》</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="app">
+    <!-- con -->
+    <div class="container zhuce">
+        <div class="reg_tab">
+            <div class="item dan active_dan">
+                单个注册
+            </div>
+            <div class="item pi">
+                批量注册
+            </div>
+        </div>
+    </div>
+    <div class="container t1" style="font-size: 18px;font-weight: bold;">
+        <form action="~/product/CreateOrder" method="post" id="accountForm">
+            <input type="hidden" name="PackageId" value="@Model.Package.Id" />
+            <input type="hidden" name="OrderType" value="1" />
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    PPTP产品账号：
+                </div>
+                <div class="col-lg-4 regDan">
+                    <input type="text" name="Account" value="" v-model="OneBuyModel.Account" v-on:blur="checkOneAccount" />
+                    <p class="jinggao" v-if="!OneChecker.AccountOk">5至10位字母或数字或组合</p>
+                </div>
+                <div class="col-lg-4 text-left warnText">
+                    <sapn class="grayText">5至10位字母或数字或组合</sapn>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    PPTP产品密码：
+                </div>
+                <div class="col-lg-4 regDan">
+                    <input type="text" name="Pwd" v-model="OneBuyModel.Pwd" v-on:blur="checkOnePwd" />
+                    <p class="jinggao" v-if="!OneChecker.PwdOk">2至10位字母或数字或组合</p>
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span class="grayText">2至10位字母或数字或组合</span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    连接数：
+                </div>
+                <div class="col-lg-4">
+                    <div class="buchang">
+                        <input type="hidden" class="form-control ConnectCount" v-model="OneBuyModel.ConnectCount" name="ConnectCount" value="1">
+                        <div class="item cursor" v-on:click="OneBuyModel.ConnectCount>1&&OneBuyModel.ConnectCount--">
+                            -
+                        </div>
+                        <div class="item">
+                            <input type="text" style="width:100%;height:21px;border:0" v-model="OneBuyModel.ConnectCount" />
+                        </div>
+                        <div class="item cursor" v-on:click="OneBuyModel.ConnectCount++">
+                            +
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span class="grayText">可同时在线的设备数</span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    选择优惠券：
+                </div>
+                <div class="col-lg-4 regDan">
+                    <div class="dropdown">
+                        <select style="height:40px;" name="" class="btn btn-default dropdown-toggle" v-model="OneBuyModel.CouponId" v-on:change="selectFn">
+                            <option value="0">请选择优惠券</option>
+                            <option v-for="item in Coupons" :value="item.Id">{{item.Name}}</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span class="grayText">每隔30天淘宝下单可获得一张优惠券</span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    余额：
+                </div>
+                <div class="col-lg-4">
+                    当前账户余额<span class="blueText">@(userEntity.RestAmount)</span>元
+                    <a href="/User/Index">前往充值</a>
+                </div>
+                <div class="col-lg-4">
+                    
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    支付方式：
+                </div>
+                <div class="col-lg-4 zhifufangshi">
+                    <input id="zhifubaopay_s1" type="radio" name="OPayType" value="100" checked v-model="OneBuyModel.OPayType"> <img src="~/img/zfb.png"><label for="zhifubaopay_s1">支付宝支付</label>
+                    <input id="weixinpay_s1" type="radio" name="OPayType" value="70" v-model="OneBuyModel.OPayType"> <img src="~/img/wx.png"><label for="weixinpay_s1">微信支付</label>
+                    <input id="UseAccountAmount_s1" type="radio" name="OPayType" value="1" v-model="OneBuyModel.UseAccountAmount"> <label for="UseAccountAmount_s1">余额支付</label>
+
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    应付款：
+                </div>
+                <div class="col-lg-4">
+                    <span class="blueText">{{OneTotalAmount}}</span>元
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span></span>
+                </div>
+            </div>
+            @* <div class="row">
+                <div class="col-lg-4 text-right">
+                    应付款：
+                </div>
+                <div class="col-lg-4">
+                    <span style="font-size: 30px;font-weight: bold;">{{OnePayAmount}}</span>元
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span></span>
+                </div>
+            </div> *@
+            <p class="tiijiao-tipjiao" style="color:red">{{Tip}}</p>
+            <p class="tijiao"><button class="btn btn-primary" type="button" v-on:click="onePay">确认支付</button></p>
+
+        </form>
+    </div>
+
+    <div class="container t2" id="moreBuy" style="font-size: 18px;font-weight: bold;">
+        <form action="~/product/CreateOrder" method="post">
+            <p class="shuoming">批量注册的账号会使用【账号前缀】+【开始数】+【个数】顺序进行注册，</p>
+            <p class="shuoming">如:注册账号前缀为【user】开始数为【6】个数为【10】，则注册的账号为：user06，user07，user08，....user14</p>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    PPTP账号前缀：
+                </div>
+                <div class="col-lg-4 regDan">
+                    <input type="text" name="Account" value="" v-model="MoreBuyModel.Account" />
+                    <p class="jinggao" v-if="!MoreChecker.AccountOk">3至8位字母或数字或组合</p>
+                </div>
+                <div class="col-lg-4 text-left warnText">
+                    <sapn class="grayText">3至8位字母或数字或组合</sapn>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    开始号：
+                </div>
+                <div class="col-lg-4 regDan">
+                    <input type="number" name="MinPostfix" v-model="MoreBuyModel.MinPostfix" />
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span class="grayText">本批次账号的起始账号的尾数</span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    注册个数：
+                </div>
+                <div class="col-lg-4 regDan">
+                    <input type="number" name="MaxPostfix" v-model="MoreBuyModel.MaxPostfix" />
+                    <p class="jinggao" v-if="MoreBuyModel.MaxPostfix>500">一次最多注册500个</p>
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span class="grayText">本批次的账号个数</span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    PPTP产品密码：
+                </div>
+                <div class="col-lg-4 regDan">
+                    <input type="text" name="Pwd" id="" value="" v-model="MoreBuyModel.Pwd" />
+                    <p class="jinggao" v-if="!MoreChecker.PwdOk">2至10位字母或数字或组合</p>
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span>2至10位字母或数字或组合</span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    连接数：
+                </div>
+                <div class="col-lg-4">
+                    <div class="buchang">
+                        <input type="hidden" class="form-control" name="ConnectCount" v-model="MoreBuyModel.ConnectCount">
+                        <div class="item" @@click="MoreBuyModel.ConnectCount>1&&MoreBuyModel.ConnectCount--">
+                            -
+                        </div>
+                        <div class="item">
+                            <input type="text" style="width:100%;height:21px;border:0" v-model="MoreBuyModel.ConnectCount" />
+                        </div>
+                        <div class="item" @@click="MoreBuyModel.ConnectCount++">
+                            +
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span class="grayText">可同时在线的设备数</span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    选择优惠券：
+                </div>
+                <div class="col-lg-4 regDan">
+                    <div class="dropdown">
+                        <select style="height:40px;" name="" class="btn btn-default dropdown-toggle" v-model="MoreBuyModel.CouponId" v-on:change="selectFn">
+                            <option value="0">请选择优惠券</option>
+                            <option v-for="item in Coupons" :value="item.Id">{{item.Name}}</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span class="grayText">每隔30天淘宝下单可获得一张优惠券</span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    余额：
+                </div>
+                <div class="col-lg-4">
+                    当前账户余额<span class="blueText">@(userEntity.RestAmount)</span>元
+                    <a href="/User/Index">前往充值</a>
+                </div>
+                <div class="col-lg-4">
+                    
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    支付方式：
+                </div>
+                <div class="col-lg-4 zhifufangshi">
+                    <input id="zhifubaopay_s" type="radio" name="OPayType" value="100" checked v-model="MoreBuyModel.OPayType"> <img src="~/img/zfb.png"><label for="zhifubaopay_s">支付宝支付</label>
+                    <input id="weixinpay_s" type="radio" name="OPayType" value="70" v-model="MoreBuyModel.OPayType"> <img src="~/img/wx.png"><label for="weixinpay_s">微信支付</label>
+                    <input id="UseAccountAmount" type="radio" name="OPayType" value="1" v-model="MoreBuyModel.UseAccountAmount"> <label for="UseAccountAmount">余额支付</label>
+
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    应付款
+                </div>
+                <div class="col-lg-4">
+                    <span class="blueText">{{MoreTotalAmount}}</span>元
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span></span>
+                </div>
+            </div>
+            @* <div class="row">
+                <div class="col-lg-4 text-right">
+                    应付款：
+                </div>
+                <div class="col-lg-4">
+                    <span style="font-size: 30px;font-weight: bold;">{{MorePayAmount}}</span>元
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span></span>
+                </div>
+            </div> *@
+            <p class="ijiao-tip" style="color:red">{{Tip}}</p>
+            <p class="tijiao"><button class="btn btn-primary" type="button" v-on:click="morePay">确认支付</button></p>
+        </form>
+    </div>
+    <!-- 支付弹窗开始 -->
+    <div class="payMask">
+        <div class="payCon">
+            <img src="~/img/close.png" class="payClose" v-on:click="close">
+            <p class="payTit"><img src="~/img/wx.png">微信支付 ｜ 收银台</p>
+            <div class="row">
+                <div class="col-lg-6 text-center">
+                    @*<p>订单将在25分钟后关闭，请及时付款</p>*@
+                    <p>
+                        @*<img id="wxPayQr" src="img/ewm.png">*@
+                        <div id="qrcode" style="width:200px;height:200px"></div>
+                    </p>
+                    @*<p>二维码已经失效，请刷新后重新扫码支付</p>*@
+                </div>
+                <div class="col-lg-6 text-left leftBorder">
+                    <p>新开订单</p>
+                    <p class="payPrice">¥<span>{{OrderInfo.OtherPayAmount}}</span></p>
+                    <p>收款方：聚IP</p>
+                    <p>下单时间：<span>{{OrderInfo.CreateTime}}</span></p>
+                    <p>订单号：<span>{{OrderInfo.OrderNo}}</span></p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 支付弹窗结束 -->
+
+    <div id="aliPayBox" style="display:none"></div>
+</div>
+
+@section Scripts{
+    <script>
+        var productId =@(Model.Product.Id);
+        /** 表单序列化成json字符串的方法  */
+        function form2JsonString(formId) {
+            var paramArray = $('#' + formId).serializeArray();
+            var jsonObj = {};
+            $(paramArray).each(function () {
+                jsonObj[this.name] = this.value;
+            });
+            console.log(jsonObj);
+            return JSON.stringify(jsonObj);
+        }
+
+        var app = new Vue({
+            el: '#app',
+            data: {
+                payHandler: null,
+                Tip: '',
+                RestAmount: @(userEntity.RestAmount),
+                Coupons: [],
+                SelectCoupon: {},
+                OrderInfo: {},
+                OneChecker: {
+                    AccountOk: true,
+                    PwdOk: true
+                },
+                MoreChecker: {
+                    AccountOk: true,
+                    PwdOk: true,
+                    Max: 10,
+                },
+                OneBuyModel: {
+                    Price:@(Model.Package.Price),
+                    PackageId:@(Model.Package.Id),
+                    CouponAmount: 0,
+                    OrderType: 1,
+                    Account: '@(randomAccount1)',
+                    Pwd: '@(randomPwd)',
+                    ConnectCount: 1,
+                    CouponId: 0,
+                    UseAccountAmount: 0,
+                    OPayType: 100,
+                    PayChannel: 50
+                },
+                MoreBuyModel: {
+                    Price:@(Model.Package.Price),
+                    PackageId:@(Model.Package.Id),
+                    CouponAmount: 0,
+                    OrderType: 2,
+                    Account: '@(randomAccountMutil)',
+                    Pwd: '@(randomPwd)',
+                    ConnectCount: 1,
+                    CouponId: 0,
+                    UseAccountAmount: 0,
+                    OPayType: 100,
+                    MinPostfix: 1,
+                    MaxPostfix: 1,
+                    PayChannel: 50
+                }
+            },
+            computed: {
+                OneTotalAmount: function () {
+                    var total = this.OneBuyModel.Price * this.OneBuyModel.ConnectCount
+                    return total.toFixed(2);
+                },
+                OnePayAmount: function () {
+                    var restAmout = this.OneBuyModel.UseAccountAmount == 1 ? this.RestAmount : 0;
+                    var total = this.OneBuyModel.Price * this.OneBuyModel.ConnectCount - this.OneBuyModel.CouponAmount - restAmout;
+                    total = total < 0 ? 0 : total;
+                    return total.toFixed(2);
+                },
+                MoreTotalAmount: function () {
+                    var total = this.MoreBuyModel.Price * this.MoreBuyModel.ConnectCount * this.MoreBuyModel.MaxPostfix;
+                    return total.toFixed(2);
+                },
+                MorePayAmount: function () {
+                    var restAmout = this.MoreBuyModel.UseAccountAmount == 1 ? this.RestAmount : 0;
+                    var total = this.MoreBuyModel.Price * this.MoreBuyModel.ConnectCount * this.MoreBuyModel.MaxPostfix - this.MoreBuyModel.CouponAmount - restAmout;
+                    total = total < 0 ? 0 : total;
+                    return total.toFixed(2);
+                }
+            },
+            watch: {
+                'OneBuyModel.CouponId': {    //加引号监听对象里的属性
+                    handler: function (newValue, oldValue) {
+                        var totalAmount = this.OneBuyModel.Price * this.OneBuyModel.ConnectCount;
+                        for (var i = 0; i < this.Coupons.length; i++) {
+                            var item = this.Coupons[i];
+                            if (totalAmount < item.AllowMinAmount) {
+                                continue;
+                            }
+                            if (item.Id == newValue) {
+                                if (item.CouponType == 1) {//满减
+                                    this.OneBuyModel.CouponAmount = item.CouponValue;
+                                } else {
+                                    this.OneBuyModel.CouponAmount = totalAmount * item.CouponValue * 0.1;
+                                }
+                                return;
+                            }
+                        }
+                    },
+                    immediate: true
+                },
+                'MoreBuyModel.CouponId': {    //加引号监听对象里的属性
+                    handler: function (newValue, oldValue) {
+                        var totalAmount = this.MoreBuyModel.Price * this.MoreBuyModel.ConnectCount;
+                        for (var i = 0; i < this.Coupons.length; i++) {
+                            var item = this.Coupons[i];
+                            if (totalAmount < item.AllowMinAmount) {
+                                continue;
+                            }
+                            if (item.Id == newValue) {
+                                if (item.CouponType == 1) {//满减
+                                    this.MoreBuyModel.CouponAmount = item.CouponValue;
+                                } else {
+                                    this.MoreBuyModel.CouponAmount = totalAmount * item.CouponValue * 0.1;
+                                }
+                                return;
+                            }
+                        }
+                    },
+                    immediate: true
+                },
+                'OneBuyModel.OPayType': {    //加引号监听对象里的属性
+                    handler: function (newValue, oldValue) {
+                        this.OneBuyModel.UseAccountAmount = false;
+                        this.OneBuyModel.PayChannel = newValue == 70 ? 30 : 50;
+                    },
+                    immediate: true
+                },
+                'MoreBuyModel.OPayType': {    //加引号监听对象里的属性
+                    handler: function (newValue, oldValue) {
+                        this.MoreBuyModel.UseAccountAmount = false;
+                        this.MoreBuyModel.PayChannel = newValue == 70 ? 30 : 50;
+                    },
+                    immediate: true
+                }
+            },
+            mounted: function () {
+                @if(user != null) {
+                    <text>this.getCoupons()</text>
+                }
+            },
+            methods: {
+                // true:数值型的，false：非数值型
+                isNum(value) {
+                    return typeof value === 'number' && !isNaN(value);
+                },
+                selectFn: function (e) {
+                    console.log(e.target.value) // 选择项的value
+                },
+                getCoupons: function () {
+                    var that = this;
+                    var url = '/api/sells/v1/coupon/GetAvailableCoupon';
+                    $.ajax({
+                        type: 'GET',
+                        url: url,
+                        success: function (res) {
+                            console.log(res);
+                            if (res.Code == 10000) {
+                                that.Coupons = res.Data.map(m => m.Coupon);
+                            }
+                        }
+                    })
+                },
+                hasNumAndChar(str) {
+                    var zg = /^[0-9a-zA-Z]*$/; 
+                    if (!zg.test(str)) {
+                        return false;
+                    } else {
+                        return true;
+                    } 
+                },
+                checkOneAccount() {
+                    if (this.OneBuyModel.Account.length > 10 || this.OneBuyModel.Account.length < 5 || !this.hasNumAndChar(this.OneBuyModel.Account)) {
+                        this.OneChecker.AccountOk = false;
+                        return false;
+                    }
+                    this.OneChecker.AccountOk = true;
+                    return true;
+                },
+                checkOnePwd() {
+                    if (this.OneBuyModel.Pwd.length < 2 || this.OneBuyModel.Pwd.length > 10 || !this.hasNumAndChar(this.OneBuyModel.Pwd)) {
+                        this.OneChecker.PwdOk = false;
+                        return false;
+                    }
+                    this.OneChecker.PwdOk = true;
+                    return true;
+                },
+                checkMoreAccount() {
+                    if (this.MoreBuyModel.Account.length < 3 || this.MoreBuyModel.Account.length > 8 || !this.hasNumAndChar(this.MoreBuyModel.Account)) {
+                        this.MoreChecker.AccountOk = false;
+                        return false;
+                    }
+                    this.MoreChecker.AccountOk = true;
+                    return true;
+                },
+                checkMorePwd() {
+                    if (this.MoreBuyModel.Pwd.length < 2 || this.MoreBuyModel.Pwd.length > 10 || !this.hasNumAndChar(this.MoreBuyModel.Pwd)) {
+                        this.MoreChecker.PwdOk = false;
+                        return false;
+                    }
+                    this.MoreChecker.PwdOk = true;
+                    return true;
+                },
+                onePay: function () {
+                    this.OneBuyModel.ConnectCount = parseInt(this.OneBuyModel.ConnectCount)
+                    if (!this.isNum(this.OneBuyModel.ConnectCount)) return;
+                    if (!this.checkOneAccount() || !this.checkOnePwd()) return;
+                    if (this.OnePayAmount > 0 ) {
+                        if (this.OneBuyModel.UseAccountAmount){
+                            alert('余额不足，请充值！');return;
+                        }
+                    }
+                    var that = this;
+                    if (this.OneBuyModel.UseAccountAmount === true) this.OneBuyModel.UseAccountAmount = 1;
+                    if (this.OneBuyModel.UseAccountAmount === false) this.OneBuyModel.UseAccountAmount = 0;
+                    showPayWait();
+                    $.ajax({
+                        type: 'POST',
+                        url: '/product/CreateOrder',
+                        dataType: "json",
+                        contentType: "application/json",
+                        data: JSON.stringify(this.OneBuyModel),
+                        success: function (res) {
+                            console.log(res);
+                            if (res.Code == 10000) {
+                                hidePayWait();
+                                if (res.Data == "00") {
+                                    //alert('购买成功')
+                                    showPayOk();
+                                } else {
+                                    that.payCallback(res.Data)
+                                    that.isPay(res.Data.OrderInfo.OrderNo);
+                                }
+                            } else {
+                                tipPayWait(res.Message);
+                                //that.Tip = res.Message;
+                            }
+                        }
+                    });
+                },
+                morePay: function () {
+                    this.MoreBuyModel.ConnectCount = parseInt(this.MoreBuyModel.ConnectCount)
+                    if (!this.isNum(this.MoreBuyModel.ConnectCount)) return;
+                    if (!this.checkMoreAccount() || !this.checkMorePwd() || this.MoreBuyModel.MaxPostfix>500) return;
+                    var that = this;
+                    if (this.MorePayAmount > 0 ) {
+                        if (this.MoreBuyModel.UseAccountAmount){
+                            alert('余额不足，请充值！');return;
+                        }
+                    }
+                    if (this.MoreBuyModel.UseAccountAmount === true) this.MoreBuyModel.UseAccountAmount = 1;
+                    if (this.MoreBuyModel.UseAccountAmount === false) this.MoreBuyModel.UseAccountAmount = 0;
+                    showPayWait();
+                    $.ajax({
+                        type: 'POST',
+                        url: '/product/CreateOrder',
+                        dataType: "json",
+                        contentType: "application/json",
+                        data: JSON.stringify(this.MoreBuyModel),
+                        success: function (res) {
+                            console.log(res);
+                            if (res.Code == 10000) {
+                                hidePayWait();
+                                if (res.Data == "00") {
+                                    //alert('购买成功')
+                                    showPayOk();
+                                } else {
+                                    that.payCallback(res.Data)
+                                    that.isPay(res.Data.OrderInfo.OrderNo);
+                                }
+                            } else {
+                                //that.Tip = res.Message;
+                                tipPayWait(res.Message);
+                            }
+                        }
+                    });
+                },
+                payCallback: function (data) {
+                    this.OrderInfo = data.OrderInfo;
+                    var payType = this.OrderInfo.PayType;
+                    if (payType == 70) {
+                        $(".payMask").show();
+                        $('#qrcode').qrcode(data.PayData);
+                    } else if (payType == 100) {
+                        $("#aliPayBox").html(data.PayData);
+                        //document.write(data.PayData);
+                    }
+                },
+                checkAccount: function () {
+                    var account = $("#sAccount").val()
+                    var url = '/api/course/v1/productaccount/ExistAccount?productId=' + productId + '&accounts=' + account;
+                    $.ajax({
+                        type: 'GET',
+                        url: url,
+                        success: function (res) {
+                            console.log(res);
+                            if (res.Code != 10000) {
+                                $("#sAccountTip").text(res.Message)
+                            }
+                        }
+                    })
+                },
+                isPay: function (orderNo) {
+                    var that = this;
+                    this.payHandler= setInterval(function () {
+                        var url = '/product/IsPay?orderNo=' + orderNo;
+                        $.ajax({
+                            type: 'GET',
+                            url: url,
+                            success: function (res) {
+                                if (res.Code == 10000 && res.Data ==1) {
+                                    clearInterval(that.payHandler);
+                                    showPayOk();
+                                    $(".payMask").hide();
+                                    //window.location.href = "/user/myaccounts";
+                                }
+                            }
+                        })
+                    }, 3000)
+                },
+                close() {
+                    clearInterval(this.payHandler);
+                    $('.payMask').hide();
+                    $('#qrcode').empty();
+                }
+            }
+        })
+
+        function checkAccount() {
+            var account = $("#sAccount").val()
+            var url = '/api/course/v1/productaccount/ExistAccount?productId=' + productId+ '&accounts=' + account;
+            $.ajax({
+                type: 'GET',
+                url: url,
+                success: function (res) {
+                    console.log(res);
+                    if (res.Code != 10000) {
+                        $("#sAccountTip").text(res.Message)
+                    }
+                }
+            })
+        }
+    </script>
+}

Host/Views/Product/rebuy.cshtml

@@ -0,0 +1,376 @@
+@using Hncore.Pass.Vpn.Response.Product
+@using Hncore.Infrastructure.Extension
+@using Hncore.Pass.BaseInfo.Response
+@using Hncore.Infrastructure.Serializer;
+@using Hncore.Pass.BaseInfo.Service
+@model PackageInfoResponse
+@inject UserService m_UserService
+@{
+    ViewData["Title"] = "购买产品";
+    UserLoginModel user = null;
+    Hncore.Pass.BaseInfo.Models.User userEntity = new Hncore.Pass.BaseInfo.Models.User();
+    if (this.Context.Request.Cookies.TryGetValue("userInfo", out string userCookie))
+    {
+        user = userCookie.FromJsonTo<UserLoginModel>();
+        userEntity = await m_UserService.GetById(user.Id);
+    }
+}
+<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+<script type="text/javascript">
+    $(function () {
+        $('.spinner .btn:first-of-type').on('click', function () {
+            $('.spinner input').val(parseInt($('.spinner input').val(), 10) + 1);
+        });
+        $('.spinner .btn:last-of-type').on('click', function () {
+            $('.spinner input').val(parseInt($('.spinner input').val(), 10) - 1);
+        });
+
+        $(".dan").addClass("cu");
+        $(".dan").click(function () {
+            $(this).addClass("cu");
+            $(".pi").removeClass("cu");
+            $(".t1").show();
+            $(".t2").hide();
+        });
+        $(".pi").click(function () {
+            $(this).addClass("cu");
+            $(".dan").removeClass("cu");
+            $(".t1").hide();
+            $(".t2").show();
+        })
+    })
+</script>
+<vc:pay-wait></vc:pay-wait>
+<vc:pay-ok></vc:pay-ok>
+<div class="container-fluid top">
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-3 text-center">
+                当前已选产品：
+            </div>
+            <div class="col-lg-6">
+                <div class="selectCard">
+                    <div class="item">
+                        <p style="padding-top: 40px; font-size: 25px; font-weight: bold;    color: #ee7a69;">@Model.Product.Name</p>
+                    </div>
+                    <div class="item">
+                        <p class="sname">@Model.Package.Name</p>
+                        <p class="sprice">@(Model.Package.DayPrice)元/天</p>
+                        <p class="stime">@Model.Package.Profile</p>
+
+                    </div>
+                    <div class="item">
+                        <p class="zongjia"><span>@Model.Package.Price</span>元</p>
+                    </div>
+                </div>
+                <p class="tishi tishika" style="text-align:center">*请务必选好所需商品，换货会产生费用</p>
+            </div>
+            <div class="col-lg-3">
+                <a href="javascript:history.go(-1)">返回重新选择》</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="app">
+    <!-- con -->
+    <div class="container zhuce">
+        <div class="reg_tab">
+            <div class="item dan active_dan">
+                续费
+            </div>
+        </div>
+    </div>
+    <div class="container t1">
+        <form action="~/product/CreateOrder" method="post" id="accountForm">
+            <input type="hidden" name="PackageId" value="@Model.Package.Id" />
+            <input type="hidden" name="OrderType" value="1" />
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    PPTP产品账号：
+                </div>
+                <div class="col-lg-4 regDan">
+                    <input type="text" name="Account" value="" v-model="OneBuyModel.Account" disabled />
+                    <p class="jinggao" id="sAccountTip"></p>
+                </div>
+                <div class="col-lg-4 text-left warnText">
+                    <sapn class="grayText">支持10位以内字母，数字</sapn>
+                </div>
+            </div>
+            @*<div class="row">
+                <div class="col-lg-4 text-right">
+                    PPTP产品密码：
+                </div>
+                <div class="col-lg-4 regDan">
+                    <input type="text" name="Pwd" v-model="OneBuyModel.Pwd" />
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span class="grayText">支持6位以内字母，数字</span>
+                </div>
+            </div>*@
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    连接数：
+                </div>
+                <div class="col-lg-4">
+                    <div class="buchang">                       
+                        <div class="item">
+                            {{OneBuyModel.ConnectCount}}
+                        </div>                       
+                    </div>
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    选择优惠券：
+                </div>
+                <div class="col-lg-4 regDan">
+                    <div class="dropdown">
+                        <select name="" class="btn btn-default dropdown-toggle" v-model="OneBuyModel.CouponId">
+                            <option value="0">请选择优惠券</option>
+                            <option v-for="item in Coupons" :value="item.Id">{{item.Name}}</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span class="grayText">每隔30天淘宝下单可获得一张优惠券</span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    余额抵扣：
+                </div>
+                <div class="col-lg-4">
+                    <input type="checkbox" v-model="OneBuyModel.UseAccountAmount" value="1"> 使用余额抵扣，当前账户余额<span class="blueText">@(userEntity.RestAmount)</span>元
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    支付方式：
+                </div>
+                <div class="col-lg-4 zhifufangshi">
+                    <input type="radio" name="OPayType" value="100"  checked v-model="OneBuyModel.OPayType"> <img src="~/img/zfb.png">支付宝支付
+                    <input type="radio" name="OPayType" value="70"  v-model="OneBuyModel.OPayType"> <img src="~/img/wx.png">微信支付
+
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    总金额：
+                </div>
+                <div class="col-lg-4">
+                    <span class="blueText">{{TotalAmount}}</span>元
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 text-right">
+                    应付款：
+                </div>
+                <div class="col-lg-4">
+                    <span style="font-size: 30px;font-weight: bold;">{{PayAmount}}</span>元
+                </div>
+                <div class="col-lg-4 text-left">
+                    <span></span>
+                </div>
+            </div>
+            <p class="ijiao-tip" style="color:red">{{Tip}}</p>
+            <p class="tijiao"><button class="btn btn-primary" type="button" v-on:click="onePay">确认支付</button></p>
+
+        </form>
+    </div>
+
+    <!-- 支付弹窗开始 -->
+    <div class="payMask">
+        <div class="payCon">
+            <img src="~/img/close.png" class="payClose" v-on:click="close">
+            <p class="payTit"><img src="~/img/wx.png">微信支付 ｜ 收银台</p>
+            <div class="row">
+                <div class="col-lg-6 text-center">
+                    @*<p>订单将在25分钟后关闭，请及时付款</p>*@
+                    <p>
+                        @*<img id="wxPayQr" src="img/ewm.png">*@
+                        <div id="qrcode" style="width:200px;height:200px"></div>
+                    </p>
+                    @*<p>二维码已经失效，请刷新后重新扫码支付</p>*@
+                </div>
+                <div class="col-lg-6 text-left leftBorder">
+                    <p>新开订单</p>
+                    <p class="payPrice">¥<span>{{OrderInfo.OtherPayAmount}}</span></p>
+                    <p>收款方：聚IP</p>
+                    <p>下单时间：<span>{{OrderInfo.CreateTime}}</span></p>
+                    <p>订单号：<span>{{OrderInfo.OrderNo}}</span></p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 支付弹窗结束 -->
+
+    <div id="aliPayBox" style="display:none"></div>
+</div>
+
+@section Scripts{
+    <script>
+        var productId =@(Model.Product.Id);
+        var app = new Vue({
+            el: '#app',
+            data: {
+                payHandler: null,
+                Tip:'',
+                RestAmount: @(userEntity.RestAmount),
+                Coupons: [],
+                SelectCoupon: {},
+                OrderInfo: {},
+                OneBuyModel: {
+                    Price:@(Model.Package.Price),
+                    PackageId:@(Model.Package.Id),
+                    OrderType: @ViewBag.orderType,
+                    Account: '@ViewBag.accounts',
+                    CouponAmount: 0,
+                    Pwd: '',
+                    ConnectCount: @(ViewBag.ConnectCount),
+                    CouponId: 0,
+                    UseAccountAmount: 0,
+                    OPayType: 100,
+                    PayChannel:50,
+                }
+            },
+            computed: {
+                TotalAmount: function () {
+                    var count = this.OneBuyModel.Account.split(',').length;
+                    var total = this.OneBuyModel.Price * this.OneBuyModel.ConnectCount * count;
+                    return total.toFixed(2);
+                },
+                PayAmount: function () {
+                    var count = this.OneBuyModel.Account.split(',').length;
+                    var restAmout = this.OneBuyModel.UseAccountAmount == 1 ? this.RestAmount : 0;
+                    var total = this.OneBuyModel.Price * this.OneBuyModel.ConnectCount * count - this.OneBuyModel.CouponAmount - restAmout;
+                    total= total < 0 ? 0 : total;
+                    return total.toFixed(2);
+                }
+            },
+            watch: {
+            'OneBuyModel.CouponId': {    //加引号监听对象里的属性
+                    handler: function (newValue, oldValue) {
+                    var totalAmount = this.OneBuyModel.Price * this.OneBuyModel.ConnectCount;
+                    for (var i = 0; i < this.Coupons.length; i++) {
+                        var item = this.Coupons[i];
+                        if (totalAmount < item.AllowMinAmount) {
+                            continue;
+                        }
+                        if (item.Id == newValue) {
+                            if (item.CouponType == 1) {//满减
+                               this.OneBuyModel.CouponAmount = item.CouponValue;
+                            } else {
+                                this.OneBuyModel.CouponAmount = totalAmount * item.CouponValue * 0.1;
+                            }
+                            return;
+                        }
+                        }
+                },
+                immediate: true
+              },
+                'OneBuyModel.OPayType': {    //加引号监听对象里的属性
+                    handler: function (newValue, oldValue) {
+                        this.OneBuyModel.PayChannel = newValue == 70 ? 30 : 50;
+                    },
+                    immediate: true
+                }
+            },
+             mounted: function () {
+                this.getCoupons();
+            },
+            methods: {
+               getCoupons: function () {
+                    var that = this;
+                    var url = '/api/sells/v1/coupon/GetAvailableCoupon';
+                    $.ajax({
+                        type: 'GET',
+                        url: url,
+                        success: function (res) {
+                            console.log(res);
+                            if (res.Code == 10000) {
+                                that.Coupons = res.Data.map(m => m.Coupon);
+                            }
+                        }
+                    })
+                },
+                onePay: function () {
+                    if (this.PayAmount == 0 || this.OneBuyModel.UseAccountAmount) {
+                        if (!confirm('余额和微信支付宝组合支付时，余额将立即扣除，请务必完成后续差额支付！')) return;
+                    }
+                    var that = this;
+                    if (this.OneBuyModel.UseAccountAmount === true) this.OneBuyModel.UseAccountAmount = 1;
+                    if (this.OneBuyModel.UseAccountAmount === false) this.OneBuyModel.UseAccountAmount = 0;
+                    showPayWait();
+                    $.ajax({
+                        type: 'POST',
+                        url: '/product/CreateOrder',
+                        dataType: "json",
+                        contentType: "application/json",
+                        data: JSON.stringify(this.OneBuyModel),
+                        success: function (res) {
+                            console.log(res);
+                            if (res.Code == 10000) {
+                                hidePayWait();
+                                if (res.Data == "00") {
+                                    alert("续费成功");
+                                } else {
+                                    that.payCallback(res.Data)
+                                    that.isPay(res.Data.OrderInfo.OrderNo);
+                                }
+                            } else {
+                                //that.Tip = res.Message;
+                                tipPayWait(res.Message);
+                            }
+                        }
+                    });
+                },
+                payCallback: function (data) {
+                    this.OrderInfo = data.OrderInfo;
+                    var payType = this.OrderInfo.PayType;
+                    if (payType == 70) {
+                        $(".payMask").show();
+                        $('#qrcode').qrcode(data.PayData);
+                    } else if (payType == 100) {
+                        $("#aliPayBox").html(data.PayData);
+                    }
+                },
+                isPay: function (orderNo) {
+                    var that = this;
+                    this.payHandler = setInterval(function () {
+                        var url = '/product/IsPay?orderNo=' + orderNo;
+                        $.ajax({
+                            type: 'GET',
+                            url: url,
+                            success: function (res) {
+                                if (res.Code == 10000 && res.Data == 1) {
+                                    clearInterval(that.payHandler);
+                                    $(".payMask").hide();
+                                    showPayOk();
+                                    //window.location.href = "/user/myaccounts";
+                                }
+                            }
+                        })
+                    }, 3000)
+                },
+                close() {
+                    clearInterval(this.payHandler);
+                    $('.payMask').hide();
+                    $('#qrcode').empty();
+                }
+            }
+        })
+    </script>
+}