juipnet/Host/Views/Product/rebuy.cshtml

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