149 lines
5.0 KiB
Plaintext
149 lines
5.0 KiB
Plaintext
|
||
@{
|
||
Layout = "_UserLayout";
|
||
}
|
||
<style>
|
||
h5 {
|
||
padding:0;
|
||
margin:0;
|
||
color:white;
|
||
}
|
||
.col-sm-12 {
|
||
padding:0;
|
||
margin:0;
|
||
}
|
||
</style>
|
||
<div id="app">
|
||
<h3>使用记录</h3>
|
||
<div class="row">
|
||
<div class="col-md-5 boxes border-dotted-3 clearfix">
|
||
<h3>包天包量使用概况</h3>
|
||
<div class="col-md-6">
|
||
<div class="boxes bg-warning clearfix">
|
||
<div class="col-sm-12">
|
||
<h5>当日使用IP数量 {{used_data.todayShortPackIpUsed}} 个</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="boxes bg-info clearfix">
|
||
<div class="col-sm-12">
|
||
<h5>累计使用IP数量 {{used_data.shortPackIpUsed}} 个</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="margin-top-10">
|
||
<p>明细 最多允许查看72小时内记录 (短效无限量套餐暂无记录)</p>
|
||
<div class="col-md-2" style="margin-bottom:10px;;padding:0;">
|
||
<select v-model="list_info.packType" class="form-control input-sm" style="height:auto;" @@change="get_used_list">
|
||
<option value="21">短效包天套餐</option>
|
||
<option value="22">短效包量套餐</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-sm-12">
|
||
<table class="products-table responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
|
||
<thead>
|
||
<tr>
|
||
<th>使用类型</th>
|
||
<th>客户端IP</th>
|
||
<th>使用IP</th>
|
||
<th>端口号</th>
|
||
<th>使用时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="item in used_list">
|
||
<td>{{item.packType}}</td>
|
||
<td>{{item.userIp}}</td>
|
||
<td>{{item.ip}}</td>
|
||
<td>{{item.port}}</td>
|
||
<td>{{item.createTime}}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<nav>
|
||
<ul class="pager">
|
||
<li><a v-on:click="page_p()">上一页</a></li>
|
||
<li>当前页 第{{page.currentPage}}页 </li>
|
||
<li><a v-on:click="page_n()">下一页</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
var vm = new Vue({
|
||
el:'#app',
|
||
data:{
|
||
used_data:{},
|
||
used_list:[],
|
||
list_info:{
|
||
"page": 1, //必填，当前页数
|
||
"limit": 50, //必填，每页显示条数，建议10~20，不可超过100
|
||
"packType": 12 //必填，套餐类型，12-储值套餐，21-短效包天套餐，22-短效包量套餐
|
||
},
|
||
page:{},
|
||
},
|
||
created:function(){
|
||
this.get_used_info();
|
||
this.get_used_list();
|
||
},
|
||
methods:{
|
||
get_used_info() {
|
||
let data = {
|
||
cookie:document.cookie,
|
||
}
|
||
var that = this;
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: 'https://php-api.juip.com/http/user/dx_used',
|
||
dataType: "json",
|
||
contentType: "application/json",
|
||
data: JSON.stringify(data),
|
||
beforeSend: function(xhr) {
|
||
xhr.withCredentials = true;
|
||
},
|
||
crossDomain: true,
|
||
success: function (res) {
|
||
that.used_data = res.data
|
||
}
|
||
});
|
||
},
|
||
get_used_list() {
|
||
let data = {
|
||
cookie:document.cookie,
|
||
data:this.list_info,
|
||
}
|
||
var that = this;
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: 'https://php-api.juip.com/http/user/dx_used_log',
|
||
dataType: "json",
|
||
contentType: "application/json",
|
||
data: JSON.stringify(data),
|
||
beforeSend: function(xhr) {
|
||
xhr.withCredentials = true;
|
||
},
|
||
crossDomain: true,
|
||
success: function (res) {
|
||
that.used_list = res.data.d.items;
|
||
that.page = res.data.d.pager;
|
||
}
|
||
});
|
||
},
|
||
page_p() {
|
||
if (this.page.currentPage != 1) {
|
||
this.list_info.page--;
|
||
this.get_ip_list();
|
||
}
|
||
},
|
||
page_n() {
|
||
this.list_info.page++;
|
||
this.get_used_list();
|
||
},
|
||
}
|
||
});
|
||
</script> |