621 lines
26 KiB
Plaintext
621 lines
26 KiB
Plaintext
@using Hncore.Infrastructure.Data
|
||
@using Hncore.Pass.Vpn.Domain
|
||
@using Hncore.Infrastructure.Extension
|
||
@using ViewComponents
|
||
@model List<ProductAccountEntity>
|
||
@{
|
||
Layout = "_UserLayout";
|
||
}
|
||
|
||
<script type="text/javascript">
|
||
$(function () {
|
||
let realverify = {
|
||
cookie:document.cookie,
|
||
}
|
||
$.ajax({
|
||
type: 'POST',
|
||
async:false,
|
||
url: 'http://php-api.juip.com/api/Realname/index',
|
||
dataType: "json",
|
||
contentType: "application/json",
|
||
data: JSON.stringify(realverify),
|
||
beforeSend: function(xhr) {
|
||
xhr.withCredentials = true;
|
||
},
|
||
crossDomain: true,
|
||
success: function (res) {
|
||
if (res.Code == -10000) {
|
||
alert('接主管部门要求，会员需要实名认证方可使用该产品，点击确定前往 用户主页、个人信息 实名认证。。');
|
||
window.location.href="/User/IndexInfo";
|
||
}
|
||
}
|
||
});
|
||
})
|
||
</script>
|
||
</script>
|
||
<div id="app">
|
||
@*<div class="qq">
|
||
<img src="~/m/img/smile.png"> 为给您带来更好的服务体验，请完善QQ号和微信号
|
||
</div>*@
|
||
<div class="chaxun2">
|
||
<input type="text" v-model="searchModel.Keyword" placeholder="账号" /><button type="button" class="btnOrange" v-on:click="search">查询</button>
|
||
</div>
|
||
<div class="row riqi">
|
||
<div class="col-sm-4 col-xs-4">
|
||
日期查询：
|
||
</div>
|
||
<div class="col-sm-4 col-xs-4">
|
||
<input type="text" name="start_date" id="start_date" placeholder="选择开通日期" readonly="readonly" v-model="searchModel.BTime" />
|
||
</div>
|
||
<div class="col-sm-4 col-xs-4">
|
||
<input type="text" name="end_date" id="end_date" placeholder="选择到期日期" readonly="readonly" v-model="searchModel.ETime" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row shaixuan">
|
||
<div class="col-sm-4 col-xs-4">
|
||
<select v-model="searchModel.ProductId">
|
||
<option value="0">全部产品</option>
|
||
<option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-sm-4 col-xs-4">
|
||
<select v-model="searchModel.PackageId">
|
||
<option value="0">全部套餐</option>
|
||
<option v-for="item in packages" :value="item.Id">{{item.Name}}</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-sm-4 col-xs-4">
|
||
<button type="button" class="btnRenzheng"><img src="~/m/img/renzheng.png">老账号认证</button>
|
||
</div>
|
||
</div>
|
||
|
||
<table border="0" cellspacing="0" cellpadding="0" class="orderTable">
|
||
<tr>
|
||
<th><input type="checkbox" name="" id="checkAll" value="" style="width: 0.4rem;height: 0.4rem;" /></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" style="width: 0.4rem;height: 0.4rem;" /></td>
|
||
<td>@item.ProductName/@item.PackageName</td>
|
||
<td>@item.Account</td>
|
||
<td>
|
||
<button type="button" class="btnXq toDetail"
|
||
a-UserCode="@item.UserCode"
|
||
a-ProductName="@item.ProductName"
|
||
a-PackageName="@item.PackageName"
|
||
a-Account="@item.Account"
|
||
a-Pwd="@item.Pwd"
|
||
a-ConnectCount="@item.ConnectCount"
|
||
a-StartTime='@item.StartTime.Value.ToString("yyyy.M.dd H:m")'
|
||
a-EndTime='@item.EndTime.Value.ToString("yyyy.M.dd H:m")'
|
||
a-RestTime="@item.RestTime">
|
||
详情
|
||
</button>
|
||
<a class="btnXq" asp-action="OnLine" asp-controller="User" asp-route-productId="@item.ProductId" asp-route-account="@item.Account">
|
||
<button type="button" class="btnXq" style="margin-top:3px">查看在线</button>
|
||
</a>
|
||
<a class="btnXq" href="/User/AssignAddress?productId=@item.ProductId&account=@item.Account&password=@item.Pwd">
|
||
<button type="button" class="btnXq" style="margin-top:3px">指定线路</button>
|
||
</a>
|
||
|
||
</td>
|
||
</tr>
|
||
}
|
||
</table>
|
||
@*<div class="fenye" style="margin-top: -210px;margin-bottom: 200px;">
|
||
@await Component.InvokeAsync("Pager", new PagerModel() { Total = Model.RowCount, PageIndex = this.Context.Request.GetInt("PageIndex") })
|
||
</div>*@
|
||
|
||
<div class="bottomBar">
|
||
<button type="button" class="btnXu btn-rebuy"><img src="~/m/img/xufei.png">续费</button><button type="button" class="btnTui btn-refund"><img src="~/m/img/tui.png">退货</button>
|
||
</div>
|
||
|
||
<!-- 认证弹窗 -->
|
||
<div class="renzhengMask">
|
||
<div class="renzhenKuang">
|
||
<img src="~/m/img/close.png" class="renzhengClose">
|
||
<!-- Nav tabs -->
|
||
<ul class="nav nav-tabs renzhengTab" role="tablist">
|
||
<li role="presentation" class="active"><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">
|
||
<div role="tabpanel" class="tab-pane active" id="home">
|
||
<div class="renzhengModel">
|
||
<div class="item">
|
||
选择产品
|
||
</div>
|
||
<div class="item chooseCp">
|
||
<select v-model="oneAuthModel.ProductId">
|
||
<option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="renzhengModel">
|
||
<div class="item">
|
||
输入账号
|
||
</div>
|
||
<div class="item renzhengInput">
|
||
<input type="text" v-model="oneAuthModel.Account" />
|
||
</div>
|
||
</div>
|
||
<div class="renzhengModel">
|
||
<div class="item">
|
||
验证密码
|
||
</div>
|
||
<div class="item renzhengInput">
|
||
<input type="text" v-model="oneAuthModel.Pwd" />
|
||
</div>
|
||
</div>
|
||
<p class="btnRz" v-on:click="accountOneAuth">认证账号</p>
|
||
</div>
|
||
<div role="tabpanel" class="tab-pane" id="profile">
|
||
|
||
<div class="renzhengModel">
|
||
<div class="item">
|
||
选择产品
|
||
</div>
|
||
<div class="item chooseCp">
|
||
<select v-model="mutilAuthModel.ProductId">
|
||
<option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="renzhengModel">
|
||
<div class="item">
|
||
账号前缀
|
||
</div>
|
||
<div class="item renzhengInput">
|
||
<input type="text" v-model="mutilAuthModel.Account" />
|
||
</div>
|
||
</div>
|
||
<div class="renzhengModel">
|
||
<div class="item">
|
||
开始数
|
||
</div>
|
||
<div class="item renzhengInput">
|
||
<input type="number" v-model="mutilAuthModel.StartNum" />
|
||
</div>
|
||
</div>
|
||
<div class="renzhengModel">
|
||
<div class="item">
|
||
认证个数
|
||
</div>
|
||
<div class="item renzhengInput">
|
||
<input type="number" v-model="mutilAuthModel.Count" />
|
||
</div>
|
||
</div>
|
||
<div class="renzhengModel">
|
||
<div class="item">
|
||
验证密码
|
||
</div>
|
||
<div class="item renzhengInput">
|
||
<input type="text" v-model="mutilAuthModel.Pwd" />
|
||
</div>
|
||
</div>
|
||
<p v-if="mutilAuthLoading" style="margin:8px;color:red;text-align:center">认证中,请耐心等待...</p>
|
||
<p class="btnRz" v-on:click="accountMutilAuth">认证账号</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 弹窗详情 -->
|
||
<div class="layerTable">
|
||
<table border="0" cellspacing="0" cellpadding="0">
|
||
<tr>
|
||
<td>用户：</td>
|
||
<td>{{currentAccount.UserCode}}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>产品：</td>
|
||
<td>{{currentAccount.ProductName}}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>套餐：</td>
|
||
<td>{{currentAccount.PackageName}}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>账号：</td>
|
||
<td>{{currentAccount.Account}}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>密码：</td>
|
||
<td>{{currentAccount.Pwd}}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>连接数：</td>
|
||
<td>{{currentAccount.ConnectCount}}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>开通时间：</td>
|
||
<td>{{currentAccount.StartTime}}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>到期时间：</td>
|
||
<td>{{currentAccount.EndTime}}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>剩余时间：</td>
|
||
<td>{{currentAccount.RestTime}}</td>
|
||
</tr>
|
||
</table>
|
||
<div class="back">
|
||
<img src="~/m/img/arrowback.png"> 返回列表
|
||
</div>
|
||
</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: 100%;">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</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:200px;" v-on:click="refund_reason('连接不上')" class="btn btn-info btn-lg">连接不上</button>
|
||
</div>
|
||
<br>
|
||
<div class="col-md-6 text-center">
|
||
<button type="button" style="width:200px;" 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:200px;" v-on:click="refund_reason('稳定性差')" class="btn btn-info btn-lg">稳定性差</button>
|
||
</div>
|
||
<br>
|
||
<div class="col-md-6 text-center">
|
||
<button type="button" style="width:200px;" 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:200px;" v-on:click="refund_reason('想换用其他产品')" class="btn btn-info btn-lg">想换用其他产品</button>
|
||
</div>
|
||
<br>
|
||
<div class="col-md-6 text-center">
|
||
<button type="button" style="width:200px;" 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 src="~/m/js/LCalendar.js" type="text/javascript" charset="utf-8"></script>
|
||
|
||
|
||
<script type="text/javascript">
|
||
var reason = '';
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data: {
|
||
mutilAuthLoading: false,
|
||
productWithPackage: [],
|
||
packages: [],
|
||
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
|
||
},
|
||
currentAccount: {
|
||
UserCode: "",
|
||
ProductName: "",
|
||
PackageName: "",
|
||
Account: "",
|
||
Pwd: "",
|
||
ConnectCount: "",
|
||
StartTime: "",
|
||
EndTime: "",
|
||
RestTime: "",
|
||
}
|
||
},
|
||
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
|
||
}
|
||
},
|
||
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 = [];
|
||
for (var item in this.searchModel) {
|
||
var p = item + "=" + this.searchModel[item];
|
||
ps.push(p);
|
||
}
|
||
window.location.href = "?" + ps.join("&");
|
||
},
|
||
accountOneAuth() {
|
||
if (this.oneAuthModel.ProductId ==0) {
|
||
alert('请选择产品')
|
||
return;
|
||
}
|
||
if (this.oneAuthModel.Account == '' || this.oneAuthModel.Pwd == '') {
|
||
alert('账号和密码不能为空')
|
||
return;
|
||
}
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: '/user/OrginAccountAuth',
|
||
dataType: "json",
|
||
contentType: "application/json",
|
||
data: JSON.stringify(this.oneAuthModel),
|
||
success: function (res) {
|
||
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)
|
||
}
|
||
}
|
||
});
|
||
},
|
||
setAccountInfo(info) {
|
||
this.currentAccount = info;
|
||
},
|
||
refund_reason(reason_info){
|
||
if(reason_info){
|
||
$(".refund-info").show();
|
||
reason = reason_info;
|
||
} else {
|
||
$(".refund-info").hide();
|
||
reason = '暂时用不到了';
|
||
}
|
||
$(".confirm-refund").removeAttr('disabled');
|
||
}
|
||
}
|
||
})
|
||
function showDetail(_self) {
|
||
var currentOrder = {
|
||
UserCode: $(_self).attr('a-UserCode'),
|
||
ProductName: $(_self).attr('a-ProductName'),
|
||
PackageName: $(_self).attr('a-PackageName'),
|
||
Account: $(_self).attr('a-Account'),
|
||
Pwd: $(_self).attr('a-Pwd'),
|
||
ConnectCount: $(_self).attr('a-ConnectCount'),
|
||
StartTime: $(_self).attr('a-StartTime'),
|
||
EndTime: $(_self).attr('a-EndTime'),
|
||
RestTime: $(_self).attr('a-RestTime'),
|
||
}
|
||
app.setAccountInfo(currentOrder);
|
||
$(_self).show();
|
||
}
|
||
$(function () {
|
||
//退款
|
||
function caclRefund(account,refundFun) {
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: '/api/course/v1/order/CaclRefund?account=' + account,
|
||
success: function (res) {
|
||
console.log(res);
|
||
if (res.Code == 10000) {
|
||
var msg =res.Data.info +",确定要退款吗？"
|
||
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)
|
||
}
|
||
}
|
||
});
|
||
}
|
||
$(".confirm-refund").on('click', function () {
|
||
var accounts = [];
|
||
$.each($('input:checkbox:checked'), function () {
|
||
accounts.push($(this).val())
|
||
});
|
||
|
||
$('#myModal').modal('hide');
|
||
caclRefund(accounts[0],refund)
|
||
})
|
||
|
||
$(".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');
|
||
})
|
||
|
||
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(account)
|
||
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(",");
|
||
})
|
||
|
||
|
||
$(".toDetail").click(function () {
|
||
showDetail($(this))
|
||
$(".layerTable").show();
|
||
});
|
||
$(".back").click(function () {
|
||
$(".layerTable").hide();
|
||
})
|
||
$(".btnRenzheng").click(function () {
|
||
$(".renzhengMask").show();
|
||
});
|
||
$(".renzhengClose").click(function () {
|
||
$(".renzhengMask").hide();
|
||
});
|
||
$("#checkAll").on('click', function () {
|
||
console.log($(this).prop("checked"), "check")
|
||
$("td > input:checkbox").prop("checked", $(this).prop("checked"))
|
||
})
|
||
});
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
var calendar = new LCalendar();
|
||
calendar.init({
|
||
'trigger': '#start_date', //标签id
|
||
'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
|
||
'minDate': (new Date().getFullYear() - 3) + '-' + 1 + '-' + 1, //最小日期
|
||
'maxDate': (new Date().getFullYear() + 3) + '-' + 12 + '-' + 31 //最大日期
|
||
});
|
||
var calendar = new LCalendar();
|
||
calendar.init({
|
||
'trigger': '#end_date', //标签id
|
||
'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
|
||
'minDate': (new Date().getFullYear() - 3) + '-' + 1 + '-' + 1, //最小日期
|
||
'maxDate': (new Date().getFullYear() + 3) + '-' + 12 + '-' + 31 //最大日期
|
||
});
|
||
|
||
</script>
|