Files
juipnet/Host/Views/User/Index.cshtml
2021-01-06 21:53:41 +08:00

728 lines
27 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: 1000px;
height: auto;
left: 35%;
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>《中华人民共和国网络安全法》第二十四条规定:<br>
网络运营者为用户办理网络接入、域名注册服务,办理固定电话、移动电话等入网手续,或者为用户提供信息发布、即时通讯等服务,在与用户签订协议或者确认提供服务时,应当要求用户提供真实身份信息。用户不提供真实身份信息的,网络运营者不得为其提供相关服务。</p>
<p>1、为了你的帐号安全请勿使用他人手机号或身份信息</p>
<p>2、若您无法支付宝扫脸认证可手持身份证录制一段视频说出仅供聚IP实名认证使用发给客服即可</p>
<p>3、聚IP承诺用户的个人隐私数据仅与支付宝方面进行交互本公司不调用及储存用户的实人认证数据仅接收支付宝方面的实人认证结果</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>