juipnet/Host/Views.Mobile/User/IndexInfo.cshtml

@using Home.Models
@using Hncore.Pass.BaseInfo.Response
@model UserHomeModel
@{
    Layout = "_Layout";
}
<style type="text/css">

    body {
        background: #f5f5f5;
    }

    .msg {
        margin-top: 1.466666rem;
    }

    .lineBar {
        background: #3c5eb5;
        width: 5px;
        height: 30px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
    }

    .accout_tit {
        height: 1.2rem;
        line-height: 1.2rem;
        border-bottom: 1px solid #eee;
        font-size: 30px;
    }

    .model {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 0.933333rem;
        line-height: 0.933333rem;
        background: #fff;
        flex-wrap: wrap;
        height: auto;
    }

        .model .item {
            border-bottom: 1px solid #f5f5f5;
            height: 0.933333rem;
            line-height: 0.933333rem;
        }

            .model .item:nth-child(odd) {
                width: 30%;
                text-align: right;
            }

            .model .item:nth-child(even) {
                width: 70%;
                text-align: center;
                color: #ccc;
            }

    .red {
        color: red;
    }

    .inputBox {
        width: 330px;
    }
</style>
<vc:redirecct-login></vc:redirecct-login>
<div class="container msg">
    <!-- 账户信息 -->
    <div class="accout_tit"><span class="lineBar"></span>账户信息 <button class="btnXq" onclick="$('#infoBox').show()">完善信息</button> 
    <button class="btnXq" onclick="$('#pwdBox').show()">修改密码</button>
    <button class="btnXq"  id="real-name-confirm" onclick="$('#real-name').show()">实名认证</button>
    </div>
    <div class="model">
        <div class="item">
            用户名：
        </div>
        <div class="item">
            @(Model.UserModel.Phone??Model.UserModel.LoginCode)
        </div>
        <div class="item">
            密码：
        </div>
        <div class="item">
            <span>********</span>
        </div>
        <div class="item">
            QQ：
        </div>
        <div class="item">
            @(Model.UserModel.QQ??"--")
        </div>
        <div class="item">
            微信号：
        </div>
        <div class="item">
            @(Model.UserModel.Wx??"--")
        </div>
        <div class="item">
            淘宝会员名：
        </div>
        <div class="item">
            @(Model.UserModel.TaoBao??"--")
        </div>
        <div class="item">
            邮箱：
        </div>
        <div class="item">
            @(Model.UserModel.Email??"--")
        </div>
    </div>
    <!-- 余额 -->
    <div class="accout_tit">
        <span class="lineBar"></span>余额  
        <button class="btnXq" onclick="$('#chargeBox').show()">充值</button>
        <button class="btnXq"  id="cash_out_confirm" onclick="tixian()">提现</button>
    </div>
    <div class="model">
        <div class="item">
            余额：
        </div>
        <div class="item">
            @Model.UserModel.RestAmount
        </div>
    </div>
    <!-- pptv账号 -->
    <div class="accout_tit"><span class="lineBar"></span>PPTV账号</div>
    <div class="model">
        <div class="item">
            使用中：
        </div>
        <div class="item">
            @(Model.AccountModel.TotalCount-Model.AccountModel.ExpriedCount)
        </div>
        <div class="item">
            总个数：
        </div>
        <div class="item">
            @Model.AccountModel.TotalCount
        </div>
        <div class="item">
            已过期：
        </div>
        <div class="item">
            @Model.AccountModel.ExpriedCount
        </div>
    </div>
    <!-- 消费信息 -->
    <div class="accout_tit"><span class="lineBar"></span>消费信息</div>
    <div class="model">
        <div class="item">
            今日消费：
        </div>
        <div class="item">
            @Model.Statistic.TodayExpend
        </div>
        <div class="item">
            今日退款：
        </div>
        <div class="item">
            @Model.Statistic.TodayRefund
        </div>
        <div class="item">
            今日充值：
        </div>
        <div class="item">
            @Model.Statistic.TodayCharege
        </div>
        <div class="item">
            当月消费：
        </div>
        <div class="item">
            @Model.Statistic.MonthExpend
        </div>
        <div class="item">
            当月退款：
        </div>
        <div class="item">
            @Model.Statistic.MonthRefund
        </div>
        <div class="item">
            当月充值：
        </div>
        <div class="item">
            @Model.Statistic.MonthCharege
        </div>
        <div class="item">
            本年消费：
        </div>
        <div class="item">
            @Model.Statistic.YearExpend
        </div>
    </div>
</div>
<!-- 修改个人详情 -->
<div class="layerTable" id="infoBox">
    <form asp-action="UpdateInfo" asp-controller="User" method="post">
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>QQ：</td>
                <td><input type="text" name="QQ" value="@(Model.UserModel.QQ)" /></td>
            </tr>
            <tr>
                <td>微信号：</td>
                <td><input type="text" name="Wx" value="@(Model.UserModel.Wx)" /></td>
            </tr>
            <tr>
                <td>淘宝会员名：</td>
                <td><input type="text" name="TaoBao" value="@(Model.UserModel.TaoBao)" /></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input type="text" name="Email" value="@(Model.UserModel.Email)" /></td>
            </tr>
        </table>

        <div class="" style="text-align:center;">
            <button type="button" class="btnXq" onclick="$('#infoBox').hide()">返回</button>
            <button type="submit" class="btnXq">确定</button>
        </div>
    </form>
</div>

<!-- 修改密码 -->
<div class="layerTable" id="pwdBox">
    <form id="pwdForm">
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>原密码：</td>
                <td><input type="text" class="inputBox" name="OldPwd" /></td>
            </tr>
            <tr>
                <td>新密码：</td>
                <td><input type="text" class="inputBox" name="NewPwd" /></td>
            </tr>
            <tr>
                <td>确认新密码：</td>
                <td><input type="text" class="inputBox" name="ConfirmPwd" /></td>
            </tr>
        </table>

        <div class="" style="text-align:center;">
            <button type="button" class="btnXq" onclick="$('#pwdBox').hide()">返回</button>
            <button type="button" class="btnXq" onclick="updatePwd()">确定</button>
        </div>
    </form>
</div>

<!-- 充值 -->
<div class="layerTable" id="chargeBox">
    <form id="pwdForm">
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>充值金额：</td>
                <td><input type="number" class="inputBox" id="orderAmount" value="100" /></td>
            </tr>
            <tr>
                <td>支付方式：</td>
                <td>
                    <input type="radio" name="PayChannel" value="40" checked> <img src="~/img/zfb.png">支付宝支付<br />
                    <input type="radio" name="PayChannel" value="10"> <img src="~/img/wx.png">微信支付
                </td>
            </tr>
        </table>

        <div class="" style="text-align:center;">
            <button type="button" class="btnXq" onclick="$('#chargeBox').hide()">返回</button>
            <button type="button" class="btnXq" onclick="charge()">确定</button>
        </div>
    </form>
</div>
<!-- 提现 -->
<div class="layerTable" id="cash-out"  style="margin-right:10em;">
    <form id="cashForm">
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>提现金额：</td>
                <td><input type="number" id="cash-out-money" class="inputBox"  placeholder="请输入提现金额"/></td>
            </tr>
            <tr>
                <td>提现理由：</td>
                <td><input type="text" id="cash-out-reason" class="inputBox"  placeholder="请输入提现理由"/></td>
            </tr>
            <tr>
                <td>提现支付宝账号：</td>
                <td><input type="text" id="alipay-account" class="inputBox" placeholder="请输入支付宝账号"/></td>
            </tr>
            <tr>
                <td>支付宝真实姓名</td>
                <td><input type="text" id="alipay-account" class="inputBox" placeholder="请输入与支付宝关联的真实姓名"/></td>
            </tr>
        </table>

        <div class="" style="text-align:center;">
            <button type="button" class="btnXq" onclick="$('#cash-out').hide()">返回</button>
            <button type="button" class="btnXq" onclick="cash_out()">确定</button>
        </div>
    </form>
</div>

<div class="layerTable" id="real-name"  style="margin-right:10em;">
    <form id="id-cert">
        <table border="0" cellspacing="0" cellpadding="0">
               <p>《中华人民共和国网络安全法》第二十四条规定：<br>
网络运营者为用户办理网络接入、域名注册服务，办理固定电话、移动电话等入网手续，或者为用户提供信息发布、即时通讯等服务，在与用户签订协议或者确认提供服务时，应当要求用户提供真实身份信息。用户不提供真实身份信息的，网络运营者不得为其提供相关服务。</p>
        <p>1、为了你的帐号安全请勿使用他人手机号或身份信息</p>
        <p>2、若您无法支付宝扫脸认证，可手持身份证录制一段视频，说出：仅供聚IP实名认证使用！发给客服即可！</p>
        <p>3、聚IP承诺：用户的个人隐私数据仅与支付宝方面进行交互，本公司不调用及储存用户的实人认证数据，仅接收支付宝方面的实人认证结果！</p>
            <tr>
                <td>真实姓名：</td>
                <td><input type="text" id="real-name-name" class="inputBox"  placeholder="请输入真实姓名"/></td>
            </tr>
            <tr>
                <td>手机号码：</td>
                <td><input type="text" id="real-name-phone" class="inputBox" placeholder="请输入手机号码" ></td>
            </tr>
            <tr>
                <td>身份证号：</td>
                <td><input type="number" id="real-name-code" class="inputBox"  placeholder="请输入身份证号码"/></td>
            </tr>
        </table>

        <div class="" style="text-align:center;">
            <button type="button" class="btnXq" onclick="$('#real-name').hide()">返回</button>
            <button type="button" class="btnXq" onclick="realname()">确定</button>
        </div>
    </form>
    <h1 id="verify-info" style="display:none;text-align: center;padding-top:100px;font-size:25px">请截图此页面，进入支付宝扫码验证</h1>
    <div style="padding: 50px 100px;text-align: center;" id="qrcode"></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;
    /** 表单序列化成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() {
        var that = this;
        $.ajax({
            type: 'POST',
            url: '/user/UpdatePwd',
            dataType: "json",
            contentType: "application/json",
            data: form2JsonString("pwdForm"),
            success: function (res) {
                console.log(res);
                if (res.Code == 10000) {
                    $("#pwdBox").hide();
                } else {
                    alert(res.Message)
                }
            }
        });
    }

    function h5WxPay(payData) {
        window.location.href = payData;
    }
    function jsWxPay(payData) {
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest',
            JSON.parse(payData),
            function (res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    window.location.href = "/User/indexInfo";
                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {

                } else {
                    alert("支付失败" + res.err_msg);
                }
            });
    }
    function aliPay(payData) {
        $("#aliPayBox").html(payData);
    }
    function payCallback(data) {
        var orderInfo = data.OrderInfo;
        if (!data.PayData) { alert("下单失败"); return; }
        var payChannel = orderInfo.PayChannel;
        if (payChannel == 10) {
            h5WxPay(data.PayData)
        } else if (payChannel == 20) {
            jsWxPay(data.PayData);
        } else if (payChannel == 40) {
            aliPay(data.PayData);
        }
    }
    function charge() {
        var chargeData = {
            ChargeAmount: $('#orderAmount').val(),
            PayChannel: $('input[name="PayChannel"]:checked').val()
        }
        if (isWeiXin()) {
            chargeData.PayChannel = 20;
        }
        $.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)
                } else {
                    alert(res.Message);
                }
            }
        });
    }

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

    //     if(id_code.length <= 0){
    //         alert("抱歉！请重新输入身份证号！");
    //         return;
    //     }
    //     if(name.length <= 0){
    //         alert("抱歉！请重新输入姓名！");
    //         return;
    //     }
        
    //     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 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"), {
                        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;
        }
        // 
        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) {
                console.log(res);
                if (res.Code == 10000) {
                    $('.cash-out').hide();
                    alert('提现请求发送成功，我们会在一到两个工作日进行处理，请注意查看资金明细。');
                } else {
                    alert('提现异常！请重试或联系客服。');                   
                }
            }
        });
    }
</script>