Files
juipnet/Host/Views/User/MyAccounts.cshtml
2021-01-05 21:01:20 +08:00

768 lines
31 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 Hncore.Infrastructure.Data
@using Hncore.Pass.Vpn.Domain
@using Hncore.Infrastructure.Extension
@using ViewComponents
@model List<ProductAccountEntity>
@{
Layout = "_UserLayout";
}
<script>
$(function () {
$('#myTabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
});
//$(".edit").click(function () {
// $(".editList").show();
//});
$(".quxiao").click(function () {
$(".editList").hide();
});
$(".laozhanghao").click(function () {
$(".zhanghaoCon").show();
});
$(".btnClose").click(function () {
$(".zhanghaoCon").hide();
})
})
</script>
<style>
.zhanghaoCon {
position: fixed;
width: 400px;
height: 455px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -220px;
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;
}
.online {
position: fixed;
left: 300px;
width: 950px;
height: 700px;
top: 100px;
z-index: 3;
background: #fff;
border-radius: 10px;
box-shadow: 0px 6px 8px 6px #ccc;
padding: 30px;
overflow-y: auto;
}
.editList {
position: fixed;
width: 400px;
height: 240px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -120px;
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, .zhanghaoCon form, .tab-content {
width: 100%;
}
.activetit {
border-bottom: 1px solid #3157ad !important;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
border: none;
}
.btnClose {
width: 20px;
height: 20px;
position: absolute;
top: 10px;
right: 10px;
}
.btnOnlineClose {
width: 20px;
height: 20px;
position: absolute;
top: 10px;
right: 10px;
}
form .row {
height: 60px;
line-height: 60px;
}
form .row input {
height: 35px;
}
form .row select {
width: 160px;
height: 35px;
}
.btnClose {
cursor: pointer;
}
input[type=checkbox] {
width: 17px;
height: 17px;
}
.blueT{
cursor:pointer;
}
[v-cloak] {
display: none;
}
</style>
<div id="app">
<div class="zhanghaoCon">
<img src="~/img/close.png" class="btnClose" />
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" style="margin-top:20px;border-bottom:none;">
<li role="presentation" class="activetit"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">单个认证</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">批量认证</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="margin-top:40px;">
<div role="tabpanel" class="tab-pane active" id="home">
<form>
<div class="row">
<div class="col-lg-3">选择产品:</div>
<div class="col-lg-9">
<select v-model="oneAuthModel.ProductId">
<option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-3">输入账号:</div>
<div class="col-lg-9">
<input type="text" v-model="oneAuthModel.Account" />
</div>
</div>
<div class="row">
<div class="col-lg-3">验证密码:</div>
<div class="col-lg-9">
<input type="text" v-model="oneAuthModel.Pwd" />
</div>
</div>
<p v-if="oneAuthLoading" class="text-center" style="margin:8px;color:red;">认证中,请耐心等待...</p>
<p class="text-center" style="margin-top:20px"><button type="button" class="btn btn-primary" v-on:click="accountOneAuth">认证账号</button></p>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<form>
<div class="row">
<div class="col-lg-3">选择产品:</div>
<div class="col-lg-9">
<select v-model="mutilAuthModel.ProductId">
<option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-3">账号前缀:</div>
<div class="col-lg-9">
<input type="text" v-model="mutilAuthModel.Account" />
</div>
</div>
<div class="row">
<div class="col-lg-3">开始数:</div>
<div class="col-lg-9">
<input type="number" v-model="mutilAuthModel.StartNum" />
</div>
</div>
<div class="row">
<div class="col-lg-3">认证个数:</div>
<div class="col-lg-9">
<input type="number" v-model="mutilAuthModel.Count" />
</div>
</div>
<div class="row">
<div class="col-lg-3">验证密码:</div>
<div class="col-lg-9">
<input type="text" v-model="mutilAuthModel.Pwd" />
</div>
</div>
<p v-if="mutilAuthLoading" class="text-center" style="margin:8px;color:red;">认证中,请耐心等待...</p>
<p class="text-center" style="margin-top:20px"><button type="button" class="btn btn-primary" v-on:click="accountMutilAuth">认证账号</button></p>
</form>
</div>
</div>
</div>
<div class="online" v-cloak v-if="showOnline">
<img src="~/img/close.png" class="btnOnlineClose" v-on:click="closeOnline()" />
<div class="tab-content" style="margin-top:40px;">
<table class="table table-striped table_person">
<tr>
<th>序号</th>
<th>账号</th>
<th>登录时间</th>
<th>在线时间</th>
<th>服务器Ip</th>
<th>登录ip</th>
<th>上行</th>
<th>下行</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in onLineData">
<td>#{{index+1}}</td>
<td>{{item.Account}}</td>
<td>{{item.LoginTime}}</td>
<td>{{item.OnlineTime}}</td>
<td>{{item.ServerIP}}</td>
<td>{{item.LoginIP}}</td>
<td>{{item.UpStream}}</td>
<td>{{item.DownStream}}</td>
<td class="blueT" @@click="killout(item)"> 强制离线</td>
</tr>
</table>
</div>
</div>
<div class="editList">
<form>
<div class="form-group">
<label>账户:</label>
<input type="text" class="form-control" placeholder="" v-model="UpdateAccountModel.Account">
</div>
<div class="form-group">
<label>新密码:</label>
<input type="text" class="form-control" placeholder="" v-model="UpdateAccountModel.Pwd">
</div>
<p class="text-center"><button type="button" class="btn btn-primary" v-on:click="UpdateAccountPwd">提交</button><button type="reset" class="btn btn-danger quxiao" style="margin-left:20px;">取消</button></p>
</form>
</div>
<p class="wanshan"><img src="~/img/smile.png"> 为了给您带来更好的服务体验请完善qq号和微信号。<a class="edit" asp-action="index" asp-controller="user" asp-route-e="1">立即完善》</a></p>
<div class="toolsBar">
<div class="item">
<div class="btn-group">
<select v-model="searchModel.ExpiredDay" style="height:35px;">
<option>剩余时间</option>
<option :value="-1">全部</option>
<option :value="0">过期</option>
<option :value="1">1天</option>
<option :value="3">3天</option>
<option :value="7">一周</option>
</select>
</div>
</div>
<div class="item">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<!--指定 date标记-->
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" v-model="searchModel.BTime" placeholder="到期开始时间" id="BTime" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<!--指定 date标记-->
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" placeholder="到期结束时间" v-model="searchModel.ETime" id="ETime" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="btn-group">
<select v-model="searchModel.ProductId" style="height:35px;">
<option value="0">全部产品</option>
<option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
</select>
</div>
</div>
<div class="item">
<div class="btn-group">
<select v-model="searchModel.PackageId" style="height:35px;">
<option value="0">全部套餐</option>
<option v-for="item in packages" :value="item.Id">{{item.Name}}</option>
</select>
</div>
</div>
<div class="item">
<input type="text" v-model="searchModel.Keyword" placeholder="账号" class="bianhao" />
<button type="button" class="btn btn-primary" v-on:click="search">查询</button>
</div>
</div>
<div class="row xufeiBar">
<div class="col-lg-6 text-left xuTui">
<button type="button" class="btn btn-danger btn-rebuy"><img src="~/img/xufei.png"> 续费</button>
<button type="button" class="btn btn-primary btn-refund">
<img src="~/img/tui.png"> 退货</button>
<a style="color:red">&nbsp;*非本系统开通账号无法退款,请联系客服处理</a>
</div>
<div class="col-lg-6 text-right">
<button type="button" class="btn btn-primary laozhanghao"><img src="~/img/renzheng_gray.png"> 老账号认证</button>
</div>
</div>
<table class="table table-striped table_person">
<tr>
<th><input type="checkbox" name="" id="checkAll" value="" /></th>
<th>开通时间</th>
<th>产品</th>
<th>套餐</th>
<th>账号</th>
<th>密码</th>
<th>连接数</th>
<th>到期时间</th>
<th>剩余时间</th>
<th>在线及踢线</th>
<th>服务器</th>
<th>软件下载</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td><input type="checkbox" class="selectAccount" value="@item.Account" a-pid="@(item.ProductId)" a-connectCount="@item.ConnectCount" a-aType="@item.AccountType" /></td>
<td>@item.CreateTime.ToString("yyyy.MM.dd")</td>
<td>@item.ProductName</td>
<td>@item.PackageName</td>
<td>@item.Account</td>
<td>@item.Pwd <img src="~/img/change.png" class="change" v-on:click="showAccountBox(@item.Id,'@item.Account','@item.Pwd')" /></td>
<td>@item.ConnectCount</td>
<td>@item.EndTime.Value.ToString("yyyy.MM.dd")</td>
<td class="redT">@(item.Status==AccountStatus.Refund?"已退货": item.RestTime)</td>
@*<td class="greenT">查看</td>*@
<td class="blueT"><a @@click="online(@item.ProductId,'@item.Account')">查看</a> </td>
<td class="blueT"><a asp-action="Index" asp-controller="LineList" asp-route-ProductId="@item.ProductId" target="_blank">查看</a> </td>
<td class="blueT"> <a asp-action="soft" asp-controller="product" target="_blank">下载</a></td>
</tr>
}
</table>
@*<div class="fenye">
@await Component.InvokeAsync("Pager", new PagerModel() { Total = Model.RowCount, PageIndex = this.Context.Request.GetInt("PageIndex") })
</div>*@
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="width: 70%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">温馨提示:请选择退款原因</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6 text-center">
<button type="button" style="width:160px;" v-on:click="refund_reason('连接不上')" class="btn btn-info btn-lg">连接不上</button>
</div>
<div class="col-md-6 text-center">
<button type="button" style="width:160px;" v-on:click="refund_reason('网速慢')" class="btn btn-info btn-lg">网速慢</button>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 text-center">
<button type="button" style="width:160px;" v-on:click="refund_reason('稳定性差')" class="btn btn-info btn-lg">稳定性差</button>
</div>
<div class="col-md-6 text-center">
<button type="button" style="width:160px;" v-on:click="refund_reason('IP太少')" class="btn btn-info btn-lg">IP太少</button>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 text-center">
<button type="button" style="width:160px;" v-on:click="refund_reason('想换用其他产品')" class="btn btn-info btn-lg">想换用其他产品</button>
</div>
<div class="col-md-6 text-center">
<button type="button" style="width:160px;" v-on:click="refund_reason(false)" class="btn btn-info btn-lg">暂时用不到了</button>
</div>
</div>
<br>
<div>
<p style="color: red;display:none;" class="refund-info"> * 此类问题可联系专业售后客服帮助解决解决率为95%,点击联系售后客服。</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary confirm-refund" disabled="disabled">确定退款</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div>
<script type="text/javascript">
var reason = '';
var app = new Vue({
el: '#app',
data: {
productWithPackage: [],
packages: [],
mutilAuthLoading: false,
oneAuthLoading: false,
showOnline: false,
searchModel: {
ExpiredDay:-1,
ProductId:@this.Context.Request.GetInt("ProductId"),
PackageId:@this.Context.Request.GetInt("PackageId"),
Keyword:'@this.Context.Request.Get("Keyword")',
BTime: '@this.Context.Request.Get("BTime")',
ETime: '@this.Context.Request.Get("ETime")',
},
oneAuthModel: {
ProductId: 0,
Account: "",
Pwd:""
},
mutilAuthModel: {
ProductId: 0,
Account: "",
Pwd: "",
StartNum: 0,
Count:0
},
UpdateAccountModel: {
ProductId:0,
UserId:0,
Account: "",
Pwd:""
},
onLineData:[]
},
computed: {
},
watch: {
'searchModel.ProductId': { //加引号监听对象里的属性
handler: function (newValue, oldValue) {
for (var i = 0; i < this.productWithPackage.length; i++) {
var item = this.productWithPackage[i];
if (item.Product.Id == newValue) {
this.packages = item.Packages
return;
}
}
},
immediate: true
}
},
created: function () {
},
mounted: function () {
this.getProducts();
},
methods: {
initPackages: function () {
var productId = this.searchModel.ProductId;
if (productId == 0) return;
for (var i = 0; i < this.productWithPackage.length; i++) {
var item = this.productWithPackage[i];
if (item.Product.Id == productId) {
this.packages = item.Packages
return;
}
}
},
getProducts() {
var that = this;
$.ajax({
type: 'GET',
url: '/api/course/v1/product/ProductWithPackage',
success: function (res) {
if (res.Code == 10000) {
that.productWithPackage = res.Data;
that.initPackages();
}
}
});
},
search() {
var ps = [];
this.searchModel.BTime = $("#BTime").val();
this.searchModel.ETime = $("#ETime").val();
for (var item in this.searchModel) {
var p = item + "=" + this.searchModel[item];
ps.push(p);
}
window.location.href = "?" + ps.join("&");
},
showAccountBox(id,account,pwd) {
$(".editList").show();
this.UpdateAccountModel.Id = id;
this.UpdateAccountModel.Account = account;
this.UpdateAccountModel.Pwd = pwd;
},
UpdateAccountPwd(){
$.ajax({
type: 'POST',
url: '/user/UpdateAccountPwd',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(this.UpdateAccountModel),
success: function (res) {
console.log(res);
if (res.Code == 10000) {
window.location.reload();
} else {
alert(res.Message)
}
}
});
},
accountOneAuth() {
if (this.oneAuthModel.ProductId ==0) {
alert('请选择产品')
return;
}
if (this.oneAuthModel.Account == '' || this.oneAuthModel.Pwd == '') {
alert('账号和密码不能为空')
return;
}
var that = this;
if (this.oneAuthLoading) return
this.oneAuthLoading = true;
$.ajax({
type: 'POST',
url: '/user/OrginAccountAuth',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(this.oneAuthModel),
success: function (res) {
that.oneAuthLoading = false;
console.log(res);
if (res.Code == 10000) {
alert('认证成功')
window.location.reload();
} else {
alert(res.Message)
}
}
});
},
accountMutilAuth() {
if (this.mutilAuthModel.ProductId == 0) {
alert('请选择产品')
return;
}
if (this.mutilAuthModel.Account == '' || this.mutilAuthModel.Pwd == '') {
alert('账号和密码不能为空')
return;
}
if (this.mutilAuthLoading) return;
this.mutilAuthLoading = true;
var that = this;
$.ajax({
type: 'POST',
url: '/user/OrginAccountAuth',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(this.mutilAuthModel),
success: function (res) {
that.mutilAuthLoading = false;
console.log(res);
if (res.Code == 10000) {
alert('认证成功')
window.location.reload();
} else {
alert(res.Message)
}
}
});
},
online(productId, account) {
this.showOnline = true
var that = this;
$.ajax({
type: 'GET',
url: '/api/course/v1/productaccount/OnLine?productId=' + productId + '&account=' + account,
success: function (res) {
if (res.Code == 10000) {
that.onLineData = res.Data;
for (var i = 0; i < that.onLineData.length; i++) {
that.onLineData[i].ProductId = productId;
}
}
}
});
},
closeOnline() {
this.showOnline = false;
this.onLineData = [];
},
killout: function (item) {
var that = this;
$.ajax({
type: 'GET',
url: '/api/course/v1/productaccount/KillOut?productId=' + item.ProductId + '&id=' + item.Id,
success: function (res) {
if (res.Code == 10000) {
alert("操作成功");
that.online(item.ProductId, item.Account)
}
}
});
},
refund_reason(reason_info){
if(reason_info){
$(".refund-info").show();
reason = reason_info;
} else {
$(".refund-info").hide();
reason = '暂时用不到了';
}
$(".confirm-refund").removeAttr('disabled');
}
}
})
$(function () {
var picker1 = $('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD',
locale: moment.locale('zh-cn'),
//minDate: '2016-7-1'
});
var picker2 = $('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD',
locale: moment.locale('zh-cn')
});
//动态设置最小值
picker1.on('dp.change', function (e) {
picker2.data('DateTimePicker').minDate(e.date);
});
//动态设置最大值
picker2.on('dp.change', function (e) {
picker1.data('DateTimePicker').maxDate(e.date);
});
//退款
function caclRefund(account,refundFun) {
$.ajax({
type: 'GET',
url: '/api/course/v1/order/CaclRefund?account=' + account,
success: function (res) {
if (res.Code == 10000) {
var msg = res.Data.info +",确定要退款吗?"
//var msg ="剩余:"+res.Data.RefundRestTime+",还需退款:"+ res.Data.RefundAmount+",确定要退款吗?"
if (!confirm(msg)) { return; }
refundFun(account);
} else {
alert(res.Message)
}
}
});
}
function refund(account) {
$.ajax({
type: 'GET',
url: '/api/course/v1/order/Refund?account=' +account + "-" + reason,
success: function (res) {
if (res.Code == 10000) {
alert('退款成功')
window.location.reload()
} else {
alert(res.Message)
}
}
});
}
$(".btn-refund").on('click', function () {
var accounts = [];
$.each($('input:checkbox:checked'), function () {
accounts.push($(this).val())
});
if (accounts.length >1) { alert('一次只能退款一个账号'); return; }
if (accounts.length == 0) { alert('请先选择账号'); return; }
$('#myModal').modal('show');
})
$(".confirm-refund").on('click', function () {
var accounts = [];
$.each($('input:checkbox:checked'), function () {
accounts.push($(this).val())
});
$('#myModal').modal('hide');
caclRefund(accounts[0],refund)
})
function isSame(data, property) {
if (data.length == 0) return true;
var first = data[0];
for (var i = 1; i < data.length; i++) {
var item = data[i];
if (first[property] != item[property])
return false;
}
return true;
}
//续费
$(".btn-rebuy").on('click', function () {
var accounts = [];
var accountModels = [];
var isTest = false
$.each($('input:checkbox:checked'), function () {
var account = $(this).val();
if (account) {
var accountItem = {
account: account,
pid: $(this).attr('a-pid'),
connectCount: $(this).attr('a-connectCount'),
isTest: $(this).attr('a-aType')==200
}
accountModels.push(accountItem)
accounts.push($(this).val())
if (accountItem.isTest) isTest = true;
}
});
if (accountModels.length == 0) { alert('请选择账号'); return; }
if (!isSame(accountModels, 'pid')) { alert('必须选择相同的产品'); return; }
if (!isSame(accountModels, 'connectCount')) { alert('必须选择相同的连接数'); return; }
if (isTest) { alert('测试账号暂不支持续费,请新开正式账号'); return; }
window.location.href = "/product/rebuyindex?productId=" + accountModels[0].pid + "&accounts=" + accounts.join(",");
})
$("#checkAll").on('click', function () {
console.log($(this).prop("checked"),"check")
$("td > input:checkbox").prop("checked", $(this).prop("checked"))
})
});
</script>