Files
juipnet/Host/Views/User/Index.cshtml
“wanyongkang” bbc52ba086 天天上架
2021-04-23 14:54:16 +08:00

794 lines
29 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:999px;
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;
}
.money-change {
position: fixed;
width: 600px;
height: auto;
left: 43%;
top: 30%;
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-code" class="form-control" placeholder="请输入身份证号码" >
</div><div class="form-group">
<label>手机号码:</label>
<input type="text" id="real-name-phone" class="form-control" placeholder="请输入手机号码" >
</div>
<p class="text-center">
<button type="button" class="btn btn-primary" id="real-name-botton" 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" style="text-align: center;padding-left:323px;"></div>
<script>
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 == 30000) {
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 : 300,
height : 300
});
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('请正确填写姓名和身份证号码。');
// }
// }
// });
}
</script>
</div>
<div class="money-change">
<form id="id-cert">
<p>功能介绍</p>
<p>1、此功能主要为资金无法及时到账用户使用通过不同账号之间类似支付宝转账的效果进行资金转移</p>
<p>2、输入要将资金转入的会员号以及金额点击确认即可进行资金转移</p>
<div class="form-group">
<label>转入会员号:</label>
<input type="text" id="money-change-user" class="form-control" placeholder="请输入待转入会员号" >
</div>
<div class="form-group">
<label>转入资金:</label>
<input type="text" id="money-change-money" class="form-control" placeholder="请输入待转入金额" >
</div>
<p class="text-center">
<button type="button" class="btn btn-primary" onclick="moneychange()">确认</button>
<button type="button" class="btn btn-danger quxiao" style="margin-left:20px;" onclick="$('.money-change').hide()">取消</button>
</p>
</form>
</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>余额<span onclick="$('.money-change').show()" style="float: right;color:blue;cursor:pointer;">资金转移</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 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 moneychange(){
let user = $('#money-change-user').val(),
money = $('#money-change-money').val();
if (money<0) {
alert('转移金额必须大于0');
return;
}
if(money > @Model.UserModel.RestAmount){
alert("抱歉!您转移的额度大于余额,请重新输入金额!");
return;
}
let data = {
cookie:document.cookie,
luser:@Model.UserModel.LoginCode,
ruser:user,
money:money,
}
}
function tixian(){
$('.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>