Files
juipnet/Host/Views/User/Index.cshtml
2020-12-27 16:39:32 +08:00

720 lines
26 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
@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="$('.cash-out').show()" 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 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>