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></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></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 id="aliPayBox" style="display:none"></div>

<script>
    /** 表单序列化成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);
                }
            }
        });
    }
</script>