312 lines
13 KiB
Plaintext
312 lines
13 KiB
Plaintext
@{
|
|
Layout = "_UserLayout";
|
|
}
|
|
|
|
<div id="app">
|
|
<div class="boxes margin-top-5 clearfix">
|
|
<div style="display: flex; align-items: center;">
|
|
<input v-model="ip" type="text" style="width: 350px; margin-right: 20px;" placeholder="请输入ip地址并点击保存白名单" />
|
|
<button v-on:click="set_ip()" type="button" class="btn btn-primary"
|
|
style="outline: none; box-shadow: none;">保存</button>
|
|
</div>
|
|
<div class="margin-top-30">
|
|
<h5>当前白名单列表
|
|
<span class="text-warning">当前白名单数量：{{ whiteLimit }} 个</span>
|
|
<button type="button" class="btn btn-new btn-xs" data-toggle="modal" data-target="#whitelistModal"
|
|
style="outline: none; box-shadow: none; margin-left: 60px;" v-on:click="get_package_details()">
|
|
调整白名单上限
|
|
</button>
|
|
</h5>
|
|
|
|
<div class="modal fade" id="whitelistModal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">调整白名单上限</h5>
|
|
<button type="button" class="close" data-dismiss="modal">
|
|
<span>×</span>
|
|
</button>
|
|
</div>
|
|
<div class="d-flex align-items-center" style="gap: 15px;">
|
|
<div class="modal-body btn-group" role="group">
|
|
<button type="button" class="btn btn-new btn-xs" v-on:click="decreaseLimit"
|
|
style=" outline: none; box-shadow: none;" :disabled="tempWhiteLimit <= 1">-</button>
|
|
<span class="btn btn-default btn-xs">{{ tempWhiteLimit }}</span>
|
|
<button type="button" class="btn btn-new btn-xs" v-on:click="increaseLimit"
|
|
style="outline: none; box-shadow: none;" :disabled="tempWhiteLimit >= 20">+</button>
|
|
</div>
|
|
<div style="margin-left: 2rem; margin-bottom: 1rem">
|
|
<span v-if="tempDiscount === 10">价格<span class="text-danger">无折扣</span></span>
|
|
<span v-else class="text-danger">
|
|
当前已应用 {{ tempDiscount*10 }}% 折扣
|
|
</span>
|
|
</div>
|
|
<div style="margin-left: 2rem; margin-bottom: 1rem">
|
|
调整后到期时间：{{ new Date(newExpre).toLocaleString() }}
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
|
|
<button type="button" class="btn btn-primary" v-on:click="set_white_limit()">确定</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<table class="products-table responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
|
|
<thead>
|
|
<tr>
|
|
<th>IP地址</th>
|
|
<th>设置时间</th>
|
|
<th>锁定状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="item in ip_list">
|
|
<td style="display:none;">{{item.id}}</td>
|
|
<td>{{item.ip}}</td>
|
|
<td>{{item.createTime}}</td>
|
|
<td>{{item.isLocked}}</td>
|
|
<td>
|
|
<a v-if="item.isLocked=='未锁定'" v-on:click="lock_ip(item.id,1)"
|
|
class="btn btn-new">锁定</a>
|
|
<a v-if="item.isLocked=='已锁定'" v-on:click="lock_ip(item.id,0)"
|
|
class="btn btn-new">解锁</a>
|
|
<a class="btn btn-danger" v-on:click="delete_ip(item.id)">删除</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var baseUrl = '@ViewData["BaseUrl"]';
|
|
var vm = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
ip_list: [],
|
|
ip: '',
|
|
whiteLimit: 1, //获取当前白名单的数量
|
|
tempWhiteLimit: 1, //模态框中白名单的数量
|
|
tempDiscount: 10,
|
|
detail: {},
|
|
newExpre: 0,
|
|
},
|
|
created: function () {
|
|
this.get_list()
|
|
this.get_white_limit()
|
|
this.get_package_details()
|
|
},
|
|
methods: {
|
|
get_list() {
|
|
let data = {
|
|
cookie: document.cookie,
|
|
}
|
|
var that = this;
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: `${baseUrl}/http/user/white_list_su`,
|
|
dataType: "json",
|
|
contentType: "application/json",
|
|
data: JSON.stringify(data),
|
|
beforeSend: function (xhr) {
|
|
xhr.withCredentials = true;
|
|
},
|
|
crossDomain: true,
|
|
success: function (res) {
|
|
that.ip_list = res.data
|
|
}
|
|
});
|
|
},
|
|
set_ip() {
|
|
let data = {
|
|
cookie: document.cookie,
|
|
data: { ip: this.ip }
|
|
}
|
|
var that = this;
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: `${baseUrl}/http/user/create_white_ip_su`,
|
|
dataType: "json",
|
|
contentType: "application/json",
|
|
data: JSON.stringify(data),
|
|
beforeSend: function (xhr) {
|
|
xhr.withCredentials = true;
|
|
},
|
|
crossDomain: true,
|
|
success: function (res) {
|
|
that.get_list()
|
|
}
|
|
});
|
|
},
|
|
lock_ip(id, status) {
|
|
var lock_ip = {};
|
|
lock_ip.id = id;
|
|
lock_ip.lock = status;
|
|
let dataa = {
|
|
cookie: document.cookie,
|
|
data: lock_ip
|
|
}
|
|
var that = this;
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: `${baseUrl}/http/user/lock_ip_su`,
|
|
dataType: "json",
|
|
contentType: "application/json",
|
|
data: JSON.stringify(dataa),
|
|
beforeSend: function (xhr) {
|
|
xhr.withCredentials = true;
|
|
},
|
|
crossDomain: true,
|
|
success: function (res) {
|
|
that.get_list()
|
|
}
|
|
});
|
|
},
|
|
delete_ip(id) {
|
|
var dalete_ip = {};
|
|
dalete_ip.id = id;
|
|
let dataa = {
|
|
cookie: document.cookie,
|
|
data: dalete_ip
|
|
}
|
|
var that = this;
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: `${baseUrl}/http/user/delete_ip_su`,
|
|
dataType: "json",
|
|
contentType: "application/json",
|
|
data: JSON.stringify(dataa),
|
|
beforeSend: function (xhr) {
|
|
xhr.withCredentials = true;
|
|
},
|
|
crossDomain: true,
|
|
success: function (res) {
|
|
that.get_list()
|
|
}
|
|
});
|
|
},
|
|
// 添加白名单数量
|
|
setTempWhiteLimit(value) {
|
|
this.tempWhiteLimit = Math.min(20, value)
|
|
this.tempWhiteLimit = Math.max(1, value)
|
|
this.tempDiscount = Math.max(6, 11 - value)
|
|
|
|
this.newExpre = this.calc_remain(this.detail.expireTime, this.whiteLimit, this.tempWhiteLimit)
|
|
},
|
|
increaseLimit() {
|
|
this.setTempWhiteLimit(this.tempWhiteLimit + 1)
|
|
},
|
|
// 减少白名单数量
|
|
decreaseLimit() {
|
|
this.setTempWhiteLimit(this.tempWhiteLimit - 1)
|
|
},
|
|
//确定后把最新白名单数量调接口给后端
|
|
set_white_limit() {
|
|
let data = {
|
|
cookie: document.cookie,
|
|
data: { maxAmount: this.tempWhiteLimit }
|
|
}
|
|
var that = this;
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: `${baseUrl}/http/user/white_limit_set_su`,
|
|
dataType: "json",
|
|
contentType: "application/json",
|
|
data: JSON.stringify(data),
|
|
beforeSend: function (xhr) {
|
|
xhr.withCredentials = true;
|
|
},
|
|
crossDomain: true,
|
|
success: function (res) {
|
|
if (res.code > 0) {
|
|
$('#whitelistModal').modal('hide');
|
|
alert('白名单上限设置成功！');
|
|
} else {
|
|
alert('设置失败：' + (res.message || '未知错误'));
|
|
}
|
|
},
|
|
error: function () {
|
|
alert('设置失败，请重试！');
|
|
}
|
|
});
|
|
},
|
|
|
|
// 获取白名单当前的数量
|
|
get_white_limit() {
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: `${baseUrl}/http/user/white_limit_get_su`,
|
|
dataType: "json",
|
|
contentType: "application/json",
|
|
data: JSON.stringify({
|
|
cookie: document.cookie,
|
|
}),
|
|
beforeSend: function (xhr) {
|
|
xhr.withCredentials = true;
|
|
},
|
|
crossDomain: true,
|
|
success: (res) => {
|
|
if (res.code > 0) {
|
|
this.whiteLimit = res.data
|
|
this.setTempWhiteLimit(res.data)
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
// 获取最新套餐详情
|
|
get_package_details() {
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: `${baseUrl}/http/user/get_unlimited_available`,
|
|
dataType: "json",
|
|
contentType: "application/json",
|
|
data: JSON.stringify({
|
|
cookie: document.cookie,
|
|
}),
|
|
beforeSend: function (xhr) {
|
|
xhr.withCredentials = true;
|
|
},
|
|
crossDomain: true,
|
|
success: (res) => {
|
|
if (res.code < 0) alert('获取套餐信息失败')
|
|
this.detail = res.data
|
|
this.setTempWhiteLimit(this.tempWhiteLimit)
|
|
}
|
|
});
|
|
},
|
|
|
|
// 计算修改白名单上限后的剩余时间
|
|
calc_remain(expire, maxWhitelist, newMaxWhitelist) {
|
|
|
|
// 套餐剩余秒数
|
|
const now = Math.floor(Date.now() / 1000)
|
|
const prev = expire ?? now
|
|
const remain = prev - now
|
|
|
|
// 白名单比值，时间份数
|
|
const multiple = maxWhitelist / newMaxWhitelist
|
|
|
|
// 折扣比值，新折扣作为基准
|
|
const oldDiscount = Math.max(.6, 1 - .1 * (maxWhitelist - 1))
|
|
const newDiscount = Math.max(.6, 1 - .1 * (newMaxWhitelist - 1))
|
|
const offset = oldDiscount / newDiscount
|
|
|
|
// 手续费，固定 1%
|
|
const fee = 99 / 100
|
|
|
|
// 返回新到期时间
|
|
return Math.floor(remain * multiple * offset * fee + now) * 1000
|
|
}
|
|
}
|
|
});
|
|
</script> |