juipnet/Host/Views.Mobile/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="~/js/vue.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
    $(function () {
         let realverify = {
            cookie:document.cookie,
        }
        $.ajax({
            type: 'POST',
            async:false,
            url: 'http://php-api.juip.com/api/Realname/index',
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(realverify),
            beforeSend: function(xhr) {
                xhr.withCredentials = true;
            },
            crossDomain: true,
            success: function (res) {
                if (res.Code == -10000) {
                    alert('接主管部门要求，会员需要实名认证方可使用该产品，点击确定前往 用户主页、个人信息 实名认证。');
                    window.location.href="/User/IndexInfo"; 
                }
            }
        });
</script>
<vc:redirecct-login></vc:redirecct-login>
<vc:pay-wait></vc:pay-wait>
<div id="app">
    <div class="cpTop">
        <p class="choose">当前已选产品：</p>
        <div class="kArea">
            <div class="cpKuang">
                <div class="item">
                    <p><img src="~/@Model.Product.Image"></p>
                    <p>@Model.Product.Name</p>
                </div>
                <div class="item">
                    <p class="kaci">@Model.Package.Name</p>
                    <p class="grayText">@(Model.Package.DayPrice)元/天</p>
                    <p class="grayText">@Model.Package.Profile</p>
                </div>
                <div class="item">
                    ¥ <span class="price">@Model.Package.Price</span>
                </div>
            </div>
        </div>
        <div class="chongxin">
            <div class="item redText">
                *请确认好所需产品，买错产品换货将产生费用
            </div>
            <div class="item">
                <button type="button" class="btnBlue" onclick="history.go(-1)">返回重新选择</button>
            </div>
        </div>
    </div>
    <!-- con -->
    <div class="container zhuce">
        <div class="reg_tab">
            <div class="item dan active_dan">
                续费
            </div>
        </div>
    </div>
    <div class="conDan">
        <div class="row">
            <div class="col-sm-5 col-xs-5">
                IP产品账号：
            </div>
            <div class="col-sm-7 col-xs-7 shuru">
                <input type="text" v-model="OneBuyModel.Account" disabled />
            </div>
        </div>
        @*<div class="row">
            <div class="col-sm-5 col-xs-5">
                IP账号密码：
            </div>
            <div class="col-sm-7 col-xs-7 shuru">
                <input type="text" v-model="OneBuyModel.Pwd" />
            </div>
        </div>*@
        <div class="row">
            <div class="col-sm-5 col-xs-5">
                连接数：
            </div>
            <div class="col-sm-7 col-xs-7">
                <div class="jiajian">
                    <div class="item">

                    </div>
                    <div class="item">
                        <span>{{OneBuyModel.ConnectCount}}</span>
                    </div>
                    <div class="item">

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-5 col-xs-5">
                选择优惠券：
            </div>
            <div class="col-sm-7 col-xs-7 select">
                <select class="chooseYhq" 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="row">
            <div class="col-sm-5 col-xs-5">
                余额：
            </div>
            <div class="col-sm-7 col-xs-7">
                <div class="">
                    当前账户余额<span class="blueText">@(userEntity.RestAmount)</span>元
                    <a href="/User/Index">前往充值</a>

                </div>
            </div>
        </div>
        <div class="row" v-if="showPayType">
            <div class="col-sm-5 col-xs-5">
                支付方式：
            </div>
            <div class="col-sm-7 col-xs-7 pay">
                <div class="radio" v-on:click="OneBuyModel.OPayType=100">
                    <input id="zhifubaopay_s1" name="OPayType" type="radio" v-model="OneBuyModel.OPayType" value="100">
                    <label  for="zhifubaopay_s1" class="radio-label"><img src="~/m/img/zfb.png"> 支付宝支付</label>
                </div>
                <div class="radio" v-on:click="OneBuyModel.OPayType=70">
                    <input id="weixinpay_s1" name="OPayType" type="radio" v-model="OneBuyModel.OPayType" value="70">
                    <label  for="weixinpay_s1" class="radio-label"><img src="~/m/img/wx.png"> 微信支付</label>
                </div>
                <div class="radio" >
                    <input id="UseAccountAmount" name="OPayType" type="radio" v-model="OneBuyModel.UseAccountAmount" value="1">
                    <label for="UseAccountAmount" class="radio-label" style="line-height:150%"> 余额支付</label>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="col-sm-5 col-xs-5">
                总金额：
            </div>
            <div class="col-sm-7 col-xs-7">
                <span>{{TotalAmount}}</span>元
            </div>
        </div>
        <div class="row">
            <div class="col-sm-5 col-xs-5">
                应付款：
            </div>
            <div class="col-sm-7 col-xs-7">
                <span class="yingfu" style="font-size: 35px;font-weight: bold;">{{PayAmount}}</span>元
            </div>
        </div>
        <div class="row">
            <div class="col-sm-5 col-xs-5">
            </div>
            <div class="col-sm-7 col-xs-7">
                <p>{{auto_discount_text}}</p>
            </div>
        </div>
        <p class="grayText songquan">淘宝每次下单获得优惠券</p>
        <p class="grayText songquan" style="color:red">{{Tip}}</p>
        <div class="ok">
            <button type="button" class="pay-botton btnPay" v-on:click="onePay">确认支付</button>
        </div>
    </div>
</div>
<div id="aliPayBox" style="display:none"></div>
@section Scripts{
    <script>
        var productId =@(Model.Product.Id);
        var app = new Vue({
            el: '#app',
            data: {
                auto_discount_text:'',
                showPayType: true,
                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:40,
                }
            },
            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 ;
                    total= total < 0 ? 0 : total;
                    total = parseFloat(total.toFixed(2));

                    

                        //最低价
                        var min_cost = @(Model.Package.MinPrice) * this.OneBuyModel.ConnectCount * count - this.OneBuyModel.CouponAmount;
                        if(total<min_cost){
                            total = min_cost;
                        }

                    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 {
                                //亲 请勿非法操作呦^.^ 请按照正常的流程操作 我们后台是有记录滴
                                if($(".kaci").text() == '天卡'){
                                    this.OneBuyModel.CouponAmount = totalAmount * item.CouponValue * 0.1;
                                } else {
                                    alert('非天卡无效');
                                    this.OneBuyModel.CouponId = '0';
                                }
                            }
                            return;
                        } else {
                            this.OneBuyModel.CouponAmount = 0;
                        }
                    }
                },
                immediate: true
              },
                'OneBuyModel.OPayType': {    //加引号监听对象里的属性
                    handler: function (newValue, oldValue) {
                        var wx = 10;
                        if (isWeiXin()) wx = 20;
                        this.OneBuyModel.PayChannel = newValue == 70 ? wx : 40;
                    },
                    immediate: true
                }
            },
            mounted: function () {
                if (isWeiXin()) {
                    this.OneBuyModel.PayChannel = 20;                    
                    this.OneBuyModel.OPayType = 70;                   
                    this.showPayType = false;
                }
                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 () {
                    $(".pay-botton").hide();
                    if (this.OneBuyModel.UseAccountAmount) {
                        if (this.RestAmount < this.PayAmount){
                            alert('余额不足，请充值。您也可以使用微信、支付宝支付。');return;
                        } else {
                            this.RestAmount = this.RestAmount - this.PayAmount;
                        }
                    }
                    var that = this;
                    if (this.OneBuyModel.UseAccountAmount === true) this.OneBuyModel.UseAccountAmount = 1;
                    if (this.OneBuyModel.UseAccountAmount === false) this.OneBuyModel.UseAccountAmount = 0;
                    var that = this;
                    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();
                                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;
                    if (!data.PayData) { alert("下单成功"); return; }
                    var payChannel = this.OrderInfo.PayChannel;
                    if (payChannel == 10) {
                        this.h5WxPay(data.PayData)
                    } else if (payChannel == 20) {
                        this.jsWxPay(data.PayData);
                    } else if (payChannel == 40) {
                        this.aliPay(data.PayData);
                    }
                },
                h5WxPay(payData) {
                    window.location.href = payData;
                },
                jsWxPay(payData) {
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest',
                        JSON.parse(payData),
                        function (res) {
                            if (res.err_msg == "get_brand_wcpay_request:ok") {
                                window.location.href = "/User/MyAccounts";
                            } else if (res.err_msg == "get_brand_wcpay_request:cancel") {

                            } else {
                                alert("支付失败" + res.err_msg);
                            }
                        });
                },
                aliPay(payData) {
                    $("#aliPayBox").html(payData);
                },
                isPay: function (orderNo) {
                    var handler = setInterval(function () {
                        var url = '/product/IsPay?orderNo=' + orderNo;
                        $.ajax({
                            type: 'GET',
                            url: url,
                            success: function (res) {
                                if (res.Code == 10000 && res.Data == 1) {
                                    clearInterval(handler);
                                   // $(".payMask").hide();
                                    window.location.href = "/user/myaccounts";
                                }
                            }
                        })
                    }, 3000)
                }
            }
        })
    </script>
}