Files
juipnet/Host/Views.Mobile/User/MyAccounts.cshtml
“wanyongkang” 28ae9d410b 优化
2021-05-26 17:06:41 +08:00

619 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 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">
<div class="row shaixuan">
<div class="col-sm-4 col-xs-4">
<select @@change="search" 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 @@change="search" v-model="searchModel.PackageId">
<option value="0">全部套餐</option>
<option value="测试卡">测试卡</option>
<option value="天卡">天卡</option>
<option value="周卡">周卡</option>
<option value="月卡">月卡</option>
<option value="双月卡(活动)">双月卡(活动)</option>
<option value="季卡">季卡</option>
<option value="年卡">年卡</option>
</select>
</div>
</div>
</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="chaxun2" style="background-color: white;margin-top:0;">
<input type="text" v-model="searchModel.Keyword" placeholder="账号" /><button type="button" class="btnOrange" v-on:click="search">查询</button>
</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" v-if="@item.ProductId==19" 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">&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: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:'0',
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: {
},
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>