初始提交
This commit is contained in:
wanyongkang
429
Host/Views/User/Index.cshtml
Normal file
429
Host/Views/User/Index.cshtml
Normal file
@@ -0,0 +1,429 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
.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="row">
|
||||
<div class="col-lg-5">
|
||||
<div class="zhanghu">
|
||||
<div class="accout_tit"><span class="lineBar"></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="$('.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>PPTP账号</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>
|
||||
/** 表单序列化成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);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user