juipnet/Host/Views/User/Index.cshtml

@using Home.Models
@using Hncore.Infrastructure.Extension
@model UserHomeModel
@{
    Layout = "_UserLayout";
    var e = this.Context.Request.GetInt("e");
}
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var edit =@(e)> 0;
    $(function () {
        $(".edit").click(function () {
            $(".editList").show();
        });
        $(".quxiao").click(function () {
            $(".editList").hide();
        });
        $(".changePwd").click(function () {
            $(".pwdList").show();
        });
        $(".quxiaoPwd").click(function () {
            $(".pwdList").hide();
        })
        if(edit) $(".editList").show();
    })
</script>
<style>
    .editList {
        position: fixed;
        width: 400px;
        height: 420px;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -210px;
        z-index: 3;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0px 6px 8px 6px #ccc;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 30px;
        display: none;
    }

        .editList form {
            width: 100%;
        }

    .edit a, .changePwd,.charge a{
        cursor: pointer;
    }

    .charge {
        text-align: right;
        margin-top: 5px;
    }

    .pwdList {
        position: fixed;
        width: 400px;
        height: 320px;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -160px;
        z-index: 3;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0px 6px 8px 6px #ccc;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 30px;
        display: none;
    }

        .pwdList form {
            width: 100%;
        }

    .chargeList {
        position: fixed;
        width: 400px;
        height: 320px;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -160px;
        z-index: 3;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0px 6px 8px 6px #ccc;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 30px;
        display: none;
    }

    .cash-out {
        position: fixed;
        width: 400px;
        height: 400px;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -160px;
        z-index: 3;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0px 6px 8px 6px #ccc;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 30px;
        display: none;
    }
    .real-name {
        position: fixed;
        width: auto;
        height: auto;
        left: 50%;
        top: 20%;
        margin-left: -200px;
        margin-top: -160px;
        z-index: 3;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0px 6px 8px 6px #ccc;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 30px;
        display: none;
    }

        .chargeList form {
            width: 100%;
        }
</style>

<div class="editList">
    <form asp-action="UpdateInfo" asp-controller="User" method="post">
        <div class="form-group">
            <label>QQ号：</label>
            <input type="text" class="form-control" placeholder="" name="QQ" value="@Model.UserModel.QQ">
        </div>
        <div class="form-group">
            <label>微信号：</label>
            <input type="text" class="form-control" placeholder="" name="Wx" value="@Model.UserModel.Wx">
        </div>
        <div class="form-group">
            <label>淘宝会员号：</label>
            <input type="text" class="form-control" placeholder="" name="TaoBao" value="@Model.UserModel.TaoBao">
        </div>
        <div class="form-group">
            <label>邮箱：</label>
            <input type="text" class="form-control" placeholder="" name="Email" value="@Model.UserModel.Email">
        </div>
        <p class="text-center">
            <button type="submit" class="btn btn-primary">提交</button>
            <button type="reset" class="btn btn-danger quxiao" style="margin-left:20px;">取消</button>
        </p>
    </form>
</div>

<div class="pwdList">
    <form id="pwdForm">
        <div class="form-group">
            <label>原密码：</label>
            <input type="text" class="form-control" placeholder="" name="OldPwd">
        </div>
        <div class="form-group">
            <label>新密码：</label>
            <input type="text" class="form-control" placeholder="" name="NewPwd">
        </div>
        <div class="form-group">
            <label>确认新密码：</label>
            <input type="text" class="form-control" placeholder="" name="ConfirmPwd">
        </div>

        <p class="text-center">
            <button type="button" class="btn btn-primary" onclick="updatePwd()">提交</button>
            <button type="reset" class="btn btn-danger quxiaoPwd" style="margin-left:20px;">取消</button>
        </p>
    </form>
</div>

@*充值*@
<div class="chargeList">
    <form>
        <div class="form-group">
            <label>充值金额：</label>
            <input type="number" id="orderAmount" class="form-control" placeholder="" value="100">
        </div>
        <div class="form-group">
            
        </div>
        <div class="form-group">
            <label>支付方式：</label>
            <input type="radio" name="PayChannel" value="50" checked> <img src="~/img/zfb.png">支付宝支付
            <input type="radio" name="PayChannel" value="30"> <img src="~/img/wx.png">微信支付
        </div>

        <p class="text-center">
            <button type="button" class="btn btn-primary" onclick="charge()">充值</button>
            <button type="button" class="btn btn-danger quxiao" style="margin-left:20px;" onclick="$('.chargeList').hide()">取消</button>
        </p>
    </form>
</div>
@*提现*@
<div class="cash-out">
    <form>
        <div class="form-group">
            <label>提现金额：</label>
            <input type="number" id="cash-out-money" class="form-control" placeholder="请输入提现金额" >
        </div>
        <div class="form-group">
            <label>提现理由：</label>
            <input type="text" id="cash-out-reason" class="form-control" placeholder="请输入提现理由" >
        </div>
        <div class="form-group">
            <label>提现支付宝账号(目前仅支持支付宝)：</label>
            <input type="text" id="alipay-account" class="form-control" placeholder="请输入支付宝账号" >
        </div>
        <div class="form-group">
            <label>支付宝真实姓名</label>
            <input type="text" id="real-name" class="form-control" placeholder="请输入与支付宝关联的真实姓名" >
        </div>

        <p class="text-center">
            <button type="button" class="btn btn-primary" id="cash_out_confirm" onclick="cash_out()">确认提现</button>
            <button type="button" class="btn btn-danger quxiao" style="margin-left:20px;" onclick="$('.cash-out').hide()">取消</button>
        </p>
    </form>
</div>
<div class="real-name">
    <form id="id-cert">
        <p>接主管部门要求，会员账号需要实名认证方可使用主要功能，请仔细阅读</p>
        <p>1、为了你的帐号安全请勿使用他人手机号或身份信息</p>
        <p>2、平台保护隐私，未经法定程序其他个人和组织无法获取实名信息</p>
        <p>3、请正确填写姓名和身份证号</p>
        <div class="form-group">
            <label>真实姓名：</label>
            <input type="text" id="real-name-name" class="form-control" placeholder="请输入真实姓名" >
        </div><div class="form-group">
            <label>手机号码：</label>
            <input type="text" id="real-name-phone" class="form-control" placeholder="请输入手机号码" >
        </div>
        <div class="form-group">
            <label>身份证号：</label>
            <input type="text" id="real-name-code" class="form-control" placeholder="请输入身份证号码" >
        </div>

        <p class="text-center">
            <button type="button" class="btn btn-primary" id="cash_out_confirm" onclick="realname()">确认</button>
            <button type="button" class="btn btn-danger quxiao" style="margin-left:20px;" onclick="$('.real-name').hide()">取消</button>
        </p>
    </form>
    <h3 id="verify-info" style="display:none;text-align: center;">请打开 支付宝 扫码进行认证</h3>
    <div id="qrcode_s"></div>
</div>

<div class="row">
    <div class="col-lg-5">
        <div class="zhanghu">
            <div class="accout_tit"><span class="lineBar"></span>账户信息<span   onclick="$('.real-name').show()" style="float:right;cursor:pointer;color:blue;font-size:25px;padding:3px 3px 0 3px;">实名认证</span></div>
            <p class="edit"><a>编辑</a></p>
            <div class="row">
                <div class="col-lg-6 accoutLeft">
                    <div class="row">
                        <div class="col-lg-4 text-center">
                            <img src="~/img/bandPhone.png">
                        </div>
                        <div class="col-lg-8 xinxi">
                            <div class="item">
                                手机号/用户名：
                            </div>
                            <div class="item myPhone">
                                @(Model.UserModel.Phone??Model.UserModel.LoginCode)
                            </div>
                            <div class="item">
                                密码：
                            </div>
                            <div class="item myPwd">
                                <span>********</span>
                                @*<img src="~/img/closePwd.png">*@
                            </div>
                            <div class="item text-right">
                                <img src="~/img/fix.png"><a class="changePwd">修改密码</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="xinxi2">
                        <div class="item">
                            QQ号：<span>@(Model.UserModel.QQ??"--")</span>
                        </div>
                        <div class="item">
                            微信号：<span>@(Model.UserModel.Wx??"--")</span>
                        </div>
                        <div class="item">
                            淘宝会员名：<span>@(Model.UserModel.TaoBao??"--")</span>
                        </div>
                        <div class="item">
                            邮箱：<span>@(Model.UserModel.Email??"--")</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="zhanghu">
            <div class="accout_tit"><span class="lineBar"></span>余额</div>
            <p class="charge"  onclick="tixian()"  style="float:left;font-size:25px;"><a>提现</a></p>
            <p class="charge"  onclick="$('.chargeList').show()"  style="font-size:25px;"><a>充值</a></p>
            <div class="money" style="padding: 20px 30px;">¥<span>@Model.UserModel.RestAmount</span></div>
            <p class="grayText text-center">可通过淘宝充值，或联系管理员充值</p>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="zhanghu">
            <div class="accout_tit"><span class="lineBar"></span>IP账号</div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="useCon">
                        <p><span>@(Model.AccountModel.TotalCount-Model.AccountModel.ExpriedCount)</span></p>
                        <p>使用中</p>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="zhanghao">
                        <div class="item">
                            @Model.AccountModel.TotalCount
                        </div>
                        <div class="item">
                            总个数
                        </div>
                        <div class="item">
                            @Model.AccountModel.ExpriedCount
                        </div>
                        <div class="item">
                            已过期
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-7">
        <div class="zhanghu2">
            <div class="accout_tit"><span class="lineBar"></span>消费信息</div>
            <div class="row xiaofeiArea">
                <div class="col-lg-8">
                    <div class="xiaofei">
                        <div class="item x1">
                            <p>@Model.Statistic.TodayExpend</p>
                            <p>今日消费</p>
                        </div>
                        <div class="item x2">
                            <p>@Model.Statistic.TodayRefund</p>
                            <p>今日退款</p>
                        </div>
                        <div class="item x3">
                            <p>@Model.Statistic.TodayCharege</p>
                            <p>今日充值</p>
                        </div>
                        <div class="item x1">
                            <p>@Model.Statistic.MonthExpend</p>
                            <p>当月消费</p>
                        </div>
                        <div class="item x2">
                            <p>@Model.Statistic.MonthRefund</p>
                            <p>当月退款</p>
                        </div>
                        <div class="item x3">
                            <p>@Model.Statistic.MonthCharege</p>
                            <p>当月充值</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="bennian">
                        <div class="bennianxiaofei">
                            <p>@Model.Statistic.YearExpend</p>
                            <p>本年消费</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="col-lg-5">
        <div class="zhanghu2">
            <div class="accout_tit"><span class="lineBar"></span>聚IP头条</div>
            <ul class="toutiao">
                @foreach (var item in Model.TopNewsModel)
                {
                    <li><a asp-action="info" asp-controller="article" asp-route-id="@item.Id">@item.Title</a><span class="newTIme">@item.CreateTime.ToString("yyyy.MM.dd")</span></li>
                }
            </ul>
        </div>
    </div>
</div>


<!-- 支付弹窗开始 -->
<div class="payMask">
    <div class="payCon">
        <img src="~/img/close.png" class="payClose" onclick="$('.payMask').hide()">
        <p class="payTit"><img src="~/img/wx.png">微信支付 ｜ 收银台</p>
        <div class="row">
            <div class="col-lg-6 text-center">             
                <p>                  
                    <div id="qrcode" style="width:200px;height:200px"></div>
                </p>              
            </div>
            <div class="col-lg-6 text-left leftBorder">
                <p>充值订单</p>
                <p class="payPrice">¥<span id="orderAmountRet"></span></p>
                <p>收款方：聚IP</p>
                <p>下单时间：<span id="orderTime"></span></p>
                <p>订单号：<span id="OrderNo"></span></p>
            </div>
        </div>
    </div>
</div>
<!-- 支付弹窗结束 -->

<div id="aliPayBox" style="display:none"></div>
<script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
<script>
    var t1 = null;

    function ready( callback ) {
        // 如果jsbridge已经注入则直接调用 
        if  ( window.AlipayJSBridge ) {
            callback && callback ();
        }  else  {
            // 如果没有注入则监听注入的事件 
            document . addEventListener ( 'AlipayJSBridgeReady' ,  callback ,  false );
        }
    }
    
    // startBizService 接口仅在支付宝 10.0.15 及以上支持 
    // 需要接入者自行做下版本兼容处理 ！！ 
    function   startAPVerify ( options ,  callback ) {
        AlipayJSBridge . call ( 'startBizService' , {
        name :  'open-certify' ,
        param :  JSON . stringify ( options ),
    },  callback );
    }
    
    /** 
    * 唤起认证流程 
    * 参数: certifyId、url 需要通过支付宝 openapi 开放平台网关接口获取 
    * 详细说明可查看文档下方的参数说明 
    **/ 
        // 需要确保在 AlipayJSBridge ready 之后才调用 
    



    /** 表单序列化成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);
    }
    function updatePwd() {       
        $.ajax({
            type: 'POST',
            url: '/user/UpdatePwd',
            dataType: "json",
            contentType: "application/json",
            data: form2JsonString("pwdForm"),
            success: function (res) {
                console.log(res);
                if (res.Code == 10000) {
                    $(".pwdList").hide();
                } else {
                    alert(res.Message)
                }
            }
        });
    }
    function payCallback(data) {
        var orderInfo= data.OrderInfo;     
        if (orderInfo.PayChannel == 30) {
            $(".payMask").show();
            $('#qrcode').empty();
            $('#qrcode').qrcode(data.PayData);
            $('#orderAmountRet').text(orderInfo.PaymentAmount);
            $('#orderTime').text(orderInfo.CreateTime);
            $('#OrderNo').text(orderInfo.OrderNo);          
        } else if (orderInfo.PayChannel == 50) {
            $("#aliPayBox").html(data.PayData);            
        }
    }
    function isPay(orderNo) {
        var that = this;
        var payHandler = setInterval(function () {
            var url = '/user/IsPay?orderNo=' + orderNo;
            $.ajax({
                type: 'GET',
                url: url,
                success: function (res) {
                    if (res.Code == 10000 && res.Data == 1) {
                        clearInterval(payHandler);
                        window.location.reload();
                    }
                }
            })
        }, 3000)
    }
    function charge() {
        var chargeData = {
            ChargeAmount: $('#orderAmount').val(),
            PayChannel: $('input[name="PayChannel"]:checked').val()
        }
        $.ajax({
            type: 'POST',
            url: '/user/CreateOrder',
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(chargeData),
            success: function (res) {
                console.log(res);
                if (res.Code == 10000) {
                    payCallback(res.Data)
                    isPay(res.Data.OrderInfo.OrderNo);
                } else {
                    alert(res.Message);                   
                }
            }
        });
    }

    function realname(){
         let id_code = $('#real-name-code').val(),
            name = $('#real-name-name').val(),
            phone = $('#real-name-phone').val();

        if(id_code.length <= 0){
            alert("抱歉！请重新输入身份证号！");
            return;
        }
        if(phone.length != 11){
            alert("抱歉！请重新输入手机号！");
            return;
        }
        if(name.length <= 0){
            alert("抱歉！请重新输入姓名！");
            return;
        }

        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
        if(reg.test(id_code) === false)  
        {  
            alert("身份证输入不合法");  
            return  false;  
        }  

        let data = {
            cookie:document.cookie,
            id_code: id_code,
            name: name,
            phone: phone
        }


        $.ajax({
            type: 'POST',
            url: 'http://php-api.juip.com/api/test/aliverify',
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(data),
            beforeSend: function(xhr) {
                xhr.withCredentials = true;
            },
            crossDomain: true,
            success: function (res) {
                if (res.Code == 20000) {
                    alert('已经认证成功');
                    window.location.href='/User/Index';
                    return ;
                }
                if (res.Code == 10000) {
                     $('#id-cert').hide();
                     $('#verify-info').show();
                    new QRCode(document.getElementById("qrcode_s"), {
                        text: res.url,
                        width : 550,
                        height : 550
                    });        
                    t1 = window.setInterval(get_verify_res,1500);

                } else {
                    alert('请正确填写姓名和身份证号码。');                   
                }

                   
            }
        });
        
        // let data = {
        //     cookie:document.cookie,
        //     id_code: id_code,
        //     name: name
        // }
        // $.ajax({
        //     type: 'POST',
        //     url: 'http://php-api.juip.com/api/Realname/index',
        //     dataType: "json",
        //     contentType: "application/json",
        //     data: JSON.stringify(data),
        //     beforeSend: function(xhr) {
        //         xhr.withCredentials = true;
        //     },
        //     crossDomain: true,
        //     success: function (res) {
        //         if (res.Code == 10000) {
        //             $('.real-name').hide();
        //             alert('实名认证成功。');
        //         } else {
        //             alert('请正确填写姓名和身份证号码。');                   
        //         }
        //     }
        // });
    }

    function get_verify_res(){
         let data = {
            cookie:document.cookie
        }
         $.ajax({
            type: 'POST',
            url: 'http://php-api.juip.com/api/test/aliGetResult',
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(data),
            beforeSend: function(xhr) {
                xhr.withCredentials = true;
            },
            crossDomain: true,
            success: function (res) {
                if (res.Code == 10000) {
                    clearInterval(t1); 
                    window.location.href='/User/Index';
                }
            }
        });          
    }

    function tixian(){
        var r=confirm("因我司支付宝账户暂被冻结，用户提现功能也暂时受限，我司正与公安协调处理此事，您可用余额继续消费。如需继续提现，我司将在账户解冻后第一时间处理，钱一分都不会少，请您放心，感谢理解！\n\n提示：请勿相信外边传谣，聚IP将对用户负责到底，更不会出现跑路的情况！\n\n\n 是否确定继续提现？");
        if (r==true){
            $('.cash-out').show();
        }
    }

    function cash_out() {
       
        let cash_out_money = $('#cash-out-money').val(),
            reason = $('#cash-out-reason').val(),
            real_name = $('#real-name').val(),
            alipay_account = $('#alipay-account').val();
        if(cash_out_money > @Model.UserModel.RestAmount){
            alert("抱歉！您提现的额度大于余额，请重新输入提现金额！");
            return;
        }
        if(cash_out_money <= 0){
            alert("抱歉！请重新输入提现金额！");
            return;
        }
        if(real_name.length <= 0){
            alert("抱歉！请重新输入姓名！");
            return;
        }
        // 
        let reg = /^(?:1[3-9]\d{9}|[a-zA-Z\d._-]*\@@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20})$/;
        if(alipay_account.length <= 0 || alipay_account.match(reg) == null){
            alert("抱歉！请重新输入支付宝账号！");
            return;
        }
        $('#cash_out_confirm').addClass('disabled'); 
        $('#cash_out_confirm').prop('disabled', true); 
        let cashOutData = {
            cash_out_money: cash_out_money,
            reason: reason,
            alipay_account: alipay_account,
            real_name: real_name,
            cookie:document.cookie
        }
        $.ajax({
            type: 'POST',
            url: 'http://php-api.juip.com/order/CashOutIndex/index',
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(cashOutData),
            beforeSend: function(xhr) {
                xhr.withCredentials = true;
            },
            crossDomain: true,
            success: function (res) {
                if (res.Code == 10000) {
                    $('.cash-out').hide();
                    alert('提现请求发送成功，我们会在一到两个工作日进行处理，请注意查看资金明细。');
                } else {
                    alert('提现异常！请重试或联系客服。');                   
                }
            }
        });
    }
</script>