手机端页面调整

This commit is contained in:
“wanyongkang”
2024-04-15 11:15:20 +08:00
parent 4082500c8c
commit 281e57b554
11 changed files with 3508 additions and 62 deletions

View File

@@ -0,0 +1,831 @@
@{
Layout = "_UserLayout";
}
<style>
.col-sm-12 {
padding:0;
margin:0;
}
</style>
<div id="app" style="padding-top: 2rem;">
<h3>长效套餐</h3>
<ul id="myTab" class="nav nav-tabs" style="position:inherit;">
<li v-on:click="get_ip_list()" class="active"><a href="#lang1" data-toggle="tab">已开通长效</a></li>
<li v-on:click="get_package_list()"><a href="#lang2" data-toggle="tab">全部套餐</a></li>
<li v-on:click="get_order_list()"><a href="#lang3" data-toggle="tab">购买记录</a></li>
<li v-on:click="get_switch_ip_list()"><a href="#lang4" data-toggle="tab">IP切换记录</a></li>
</ul>
<br>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="lang1">
<button style="margin-bottom:5px;" class="btn btn-new" v-on:click="get_ip()" >批量提取IP</button>
<span> 格式IP|http端口|socks5端口|账号|密码</span>
<div class="col-sm-12">
<table class="products-table responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
<thead>
<tr>
<th v-on:click="allcheck()"><input type="checkbox" id="allchecked" name="idsss" value=''></th>
<th>模式</th>
<th>节点入口IP</th>
<th>隧道出口IP</th>
<th>HTTP/SK5端口</th>
<th>归属地</th>
<th>带宽</th>
<th>线路</th>
<th>状态</th>
<th>账号/密码</th>
<th>过期时间</th>
<th>是否过期</th>
<th>续费</th>
</tr>
</thead>
<tbody>
<tr v-for="item in ip_list">
<td><input type="checkbox" v-model="idlist" checked="true" name="ids" :value="item.id"></td>
<td>{{item.isRelayed?'中继':'直连'}}</td>
<td>{{item.ip}}</td>
<td>{{item.realIp}}</td>
<td>{{item.httpPort}}/{{item.socks5Port}}</td>
<td>{{item.area}}</td>
<td>{{item.bandwidth}}M/{{item.lineType}}</td>
<td>{{item.shareType}}</td>
<td>{{item.state}}</td>
<td>{{item.username}}/{{item.password}}</td>
<td>{{item.expireTime}}</td>
<td>{{item.isExpired?'已经过期':'未过期'}}</td>
<td><a class="btn btn-new" v-on:click="rebuy_ip(item)" data-toggle="modal" data-target="#myModal">续费</a>
<a v-if="item.isAbroad && item.isRelayed" v-on:click="change_in(item)" class="btn btn-info" data-toggle="modal" data-target="#change_in" >切换入口</a>
<a class="btn btn-warning" v-on:click="change_ip(item)" data-toggle="modal" data-target="#change_ip">切换节点</a></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 class="tab-pane fade" id="lang2">
<div class="col-sm-12">
<table class="products-table responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
<thead>
<tr>
<th>套餐类型</th>
<th>模式</th>
<th>可用ip数量(个)</th>
<th>过期时间</th>
<th>续费</th>
</tr>
</thead>
<tbody>
<tr v-for="item in pakage_list">
<td>{{item.isAbroad}}</td>
<td>{{item.shareType}}</td>
<td>{{item.ipAmount}}</td>
<td>{{item.expireTime}}</td>
<td><a class="btn btn-block btn-new" v-on:click="rebuy(item)" data-toggle="modal" data-target="#myModal">续费</a> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="lang3">
<div class="col-sm-12">
<table class="products-table responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
<thead>
<tr>
<th>订单号</th>
<th>订单类型</th>
<th>游戏类型</th>
<th>IP数量</th>
<th>实付金额</th>
<th>支付时间</th>
<th>续费</th>
</tr>
</thead>
<tbody>
<tr v-for="item in order_list">
<td>{{item.order_no}}</td>
<td>{{item.order_type}}</td>
<td>{{item.game_type}}</td>
<td>{{item.ip_count}}</td>
<td>{{item.money}}</td>
<td>{{item.create_time}}</td>
<td><a class="btn btn-block btn-new" href="/product/http">再次购买</a> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="lang4">
<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>切换后IP</th>
<th>切换后属地</th>
<th>切换方式</th>
<th>切换时间</th>
</tr>
</thead>
<tbody>
<tr v-for="item in switch_list">
<td>{{item.oldIp}}</td>
<td>{{item.oldArea}}</td>
<td>{{item.newIp}}</td>
<td>{{item.newArea}}</td>
<td>{{item.reason}}</td>
<td>{{item.createTime}}</td>
</tr>
</tbody>
</table>
<nav>
<ul class="pager">
<li><a v-on:click="page_p2()">上一页</a></li>
<li>当前页 第{{page2.currentPage}}页 </li>
<li><a v-on:click="page_n2()">下一页</a></li>
</ul>
</nav>
</div>
</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">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<h4 class="modal-title" id="myModalLabel">
{{rebuy_data.title}}
</h4>
</div>
<div class="modal-body">
<div class="col-sm-12 ">
<div class="boxes boxes-border-top text-left margin-top-30 clearfix">
<div class="col-sm-12">
<h5 class="margin-top-0">套餐周期:</h5>
<label class="radio-inline" v-on:click="set_btn_checked('dxwxl_tczq_','2','天')">
<input type="radio" class="hide" v-model="rebuy_data.periodType" value="1"> <span id="dxwxl_tczq_2" class="btn btn-new btn-lg">按天</span>
</label>
<label class="radio-inline" v-on:click="set_btn_checked('dxwxl_tczq_','3','周')">
<input type="radio" class="hide" v-model="rebuy_data.periodType" value="7"> <span id="dxwxl_tczq_3" class="btn btn-default btn-lg">按周</span>
</label>
<label class="radio-inline" v-on:click="set_btn_checked('dxwxl_tczq_','4','月')">
<input type="radio" class="hide" v-model="rebuy_data.periodType" value="30"> <span id="dxwxl_tczq_4" class="btn btn-default btn-lg">按月</span>
</label>
<label v-if="rebuy_data.packType!=21" class="radio-inline" v-on:click="set_btn_checked('dxwxl_tczq_','5','季')">
<input type="radio" class="hide" v-model="rebuy_data.periodType" value="90"> <span id="dxwxl_tczq_5" class="btn btn-default btn-lg">按季</span>
</label>
</div>
</div>
</div>
<div class="col-sm-12 ">
<div class="boxes boxes-border-top text-left margin-top-30 clearfix">
<div class="col-sm-12">
<h5 class="margin-top-0">购买时长:</h5>
<div class="btn-group" role="group" >
<button type="button" v-on:click="gmsc_reduce()" class="btn btn-new">-</button>
<button type="button" class="btn btn-default">{{rebuy_data.periodAmount}}{{order_time_type}}</button>
<button type="button" v-on:click="gmsc_add()" class="btn btn-new">+</button>
</div>
</div>
</div>
</div>
<div class="col-sm-12 ">
<div class="boxes boxes-border-top text-left margin-top-30 clearfix">
<div class="col-sm-12">
<h5 class=" text-left">价格:¥{{order_info.money}} <span style="float:right;">
<button class="btn btn-new" v-on:click="pay()" data-backdrop="static" >实付¥{{order_info.money}}</button>
</span></h5>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div>
</div><!-- /.modal -->
<div class="modal fade" id="change_ip" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<h4 class="modal-title" id="myModalLabel1">
{{change_ip_data.title}}
</h4>
</div>
<div class="modal-body">
<div v-if="change_ip_data.isAbroad==0" class="col-sm-12 gameisp">
<div class="boxes boxes-border-top text-left margin-top-30 clearfix">
<div class="col-sm-12">
<h5 class="margin-top-0">运营商选择:</h5>
<label class="radio-inline" v-on:click="set_btn_checked('game_isp_','1','')">
<input class="hide" v-model="change_ip_data.isp" name="gameisp" type="radio" value="0"> <span id="game_isp_1" class="btn btn-new btn-lg">普通线路</span>
</label>
<label class="radio-inline" v-on:click="set_btn_checked('game_isp_','2','')">
<input class="hide" v-model="change_ip_data.isp" name="gameisp" type="radio" value="2"> <span id="game_isp_2" class="btn btn-default btn-lg">电信</span>
</label>
<label class="radio-inline" v-on:click="set_btn_checked('game_isp_','3','')">
<input class="hide" v-model="change_ip_data.isp" name="gameisp" type="radio" value="3"> <span id="game_isp_3" class="btn btn-default btn-lg">移动</span>
</label>
<label class="radio-inline" v-on:click="set_btn_checked('game_isp_','4','')">
<input class="hide" v-model="change_ip_data.isp" name="gameisp" type="radio" value="4"> <span id="game_isp_4" class="btn btn-default btn-lg">联通</span>
</label>
</div>
</div>
</div>
<div class="col-sm-12 panelback">
<div class="boxes boxes-border-top text-left margin-top-30 clearfix">
<div class="col-sm-12">
<h5 class="margin-top-0">地区选择:</h5>
<div class="col-md-4" style="padding:5px 5px 0 0;">
<label class="radio-inline" style="width:100%;padding:0;" v-on:click="set_btn_checked('game_cityCode_','99','')">
<input class="hide" v-model="change_ip_data.cityCode" name="gamecity" type="radio" value="0"> <span style="width:100%;" id="game_cityCode_99" class="btn btn-new btn-lg">随机地区</span>
</label>
</div>
<div v-for="(value,key) in cities" class="col-md-4" style="padding:5px 5px 0 0;">
<label class="radio-inline" style="width:100%;padding:0;" v-on:click="set_btn_checked('game_cityCode_',key,'')">
<input class="hide" v-model="change_ip_data.cityCode" name="gamecity" type="radio" :value="value.code"> <span style="width:100%;" :id="'game_cityCode_'+key" class="btn btn-default btn-lg">{{value.name}}</span>
</label>
</div>
</div>
</div>
</div>
<div class="col-sm-12 ">
<div class="boxes boxes-border-top text-left margin-top-30 clearfix">
<div class="col-sm-12">
<h5 class=" text-left">价格:¥{{order_info.money}} <span style="float:right;">
<button class="btn btn-new" v-on:click="pay_change_ip()" data-backdrop="static" >实付¥{{order_info.money}}</button>
</span></h5>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div>
</div><!-- /.modal -->
<div class="modal fade" id="change_in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<h4 class="modal-title" id="myModalLabel1">
切换入口
</h4>
</div>
<div class="modal-body">
<div class="col-sm-12 gameisp">
<div class="boxes boxes-border-top text-left margin-top-30 clearfix">
<div class="col-sm-12">
<h5 class="margin-top-0">运营商选择:</h5>
<label class="radio-inline" v-on:click="set_btn_checked('change_in_isp_','1','')">
<input class="hide" v-model="change_ip_data.isp" name="change_inisp" type="radio" value="0"> <span id="change_in_isp_1" class="btn btn-new btn-lg">普通线路</span>
</label>
<label class="radio-inline" v-on:click="set_btn_checked('change_in_isp_','2','')">
<input class="hide" v-model="change_ip_data.isp" name="change_inisp" type="radio" value="2"> <span id="change_in_isp_2" class="btn btn-default btn-lg">电信</span>
</label>
<label class="radio-inline" v-on:click="set_btn_checked('change_in_isp_','3','')">
<input class="hide" v-model="change_ip_data.isp" name="change_inisp" type="radio" value="3"> <span id="change_in_isp_3" class="btn btn-default btn-lg">移动</span>
</label>
<label class="radio-inline" v-on:click="set_btn_checked('change_in_isp_','4','')">
<input class="hide" v-model="change_ip_data.isp" name="change_inisp" type="radio" value="4"> <span id="change_in_isp_4" class="btn btn-default btn-lg">联通</span>
</label>
</div>
</div>
</div>
<div class="col-sm-12 panelback">
<div class="boxes boxes-border-top text-left margin-top-30 clearfix">
<div class="col-sm-12">
<h5 class="margin-top-0">地区选择:</h5>
<div class="col-md-4" style="padding:5px 5px 0 0;">
<label class="radio-inline" style="width:100%;padding:0;" v-on:click="set_btn_checked('change_in_cityCode_','99','')">
<input class="hide" v-model="change_ip_data.cityCode" name="change_incity" type="radio" value="0"> <span style="width:100%;" id="change_in_cityCode_99" class="btn btn-new btn-lg">随机地区</span>
</label>
</div>
<div v-for="(value,key) in cities" class="col-md-4" style="padding:5px 5px 0 0;">
<label class="radio-inline" style="width:100%;padding:0;" v-on:click="set_btn_checked('change_in_cityCode_',key,'')">
<input class="hide" v-model="change_ip_data.cityCode" name="change_incity" type="radio" :value="value.code"> <span style="width:100%;" :id="'change_in_cityCode_'+key" class="btn btn-default btn-lg">{{value.name}}</span>
</label>
</div>
</div>
</div>
</div>
<div class="col-sm-12 ">
<div class="boxes boxes-border-top text-left margin-top-30 clearfix">
<div class="col-sm-12">
<h5 class=" text-left">价格:¥{{order_info.money}} <span style="float:right;">
<button class="btn btn-new" v-on:click="pay_change_ip()" data-backdrop="static" >实付¥{{order_info.money}}</button>
</span></h5>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div>
</div><!-- /.modal -->
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
get_ip_list_require:{
"page": 1, //必填,当前页数
"limit": 50, //必填每页显示条数建议10~20不可超过100
"packId": '', //可选套餐id
"isAbroad": '', //可选是否海外0-国内1-海外
"isExpired": 0, //可选过期状态0-全部1-已过期2-未过期
"state": -1, //可选IP状态-1-全部 1-正常 0-异常掉线9-封禁
"ip": '', //可选具体IP地址
"groupId":'', //可选分组id可通过2681接口查询
"gameId": '', //可选具体游戏id可通过2691接口查询
"cityCode":'', //可选城市编码可通过2692接口查询
"orderBy":0,//可选排序0-默认最近购买时间1-最早购买时间2-最近过期时间3-最迟过期时间4-最近切换时间5-最迟切换时间
},
page:{},
page2:{},
get_ip_switch_require:{
"page": 1, //必填,当前页数
"limit": 50, //必填每页显示条数建议10~20不可超过100
},
ip_list:[],
pakage_list:[],
order_list:[],
switch_list:[],
rebuy_data:{
title:'',
packId:'',
packType:'',
periodType:1,
isRelayed:0,
periodAmount:1,
isAbroad:0,
ipAmount:1,
ids:'',
shareType:1,
lineType:1,
bandwidth:1,
},
order_time_type:'天',
order_info:{
order_type:5,//1:预储值、2短效无限量、3短效包天、4短效包量、5长效游戏 6:单个ip续费 7切换ip
money:1,
data:{}
},
change_ip_data:{
'title':'',
"id": '', //必填长效IP的id
'isAbroad':0,
"cityCode":0, //可选城市编码0表示随机可通过2692接口查询
"isp": 0, //可选运营商0表示随机不指定仅限国内线路使用2-电信3-移动4-联通,
"switchPop": 0, //可选切换标识0-切换直连出口IP1-切换中继入口IP仅限于中继线路
data:{}
},
cities:[],
in_city_data:{
'isAbroad':0,
"isp": 0, //可选运营商0表示随机不指定仅限国内线路使用2-电信3-移动4-联通,
},
idlist:[],
api_link:'',
copy_url:'',
},
created:function(){
this.get_ip_list();
},
methods:{
get_ip_list() {
let data = {
cookie:document.cookie,
data:this.get_ip_list_require
}
var that = this;
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/user/lang_ip_list',
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.d.items;
that.page = res.data.d.pager;
}
});
},
page_p() {
if (this.page.currentPage != 1) {
this.get_ip_list_require.page--;
this.get_ip_list();
}
},
page_n() {
this.get_ip_list_require.page++;
this.get_ip_list();
},
page_p2() {
if (this.page2.currentPage != 1) {
this.get_ip_list_require.page--;
this.get_switch_ip_list();
}
},
page_n2() {
this.get_ip_list_require.page++;
this.get_switch_ip_list();
},
get_package_list() {
let data = {
cookie:document.cookie,
}
var that = this;
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/user/cx_package',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
that.pakage_list = res.data
}
});
},
get_order_list() {
let data = {
cookie:document.cookie,
}
var that = this;
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/user/cx_order',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
that.order_list = res.data
}
});
},
get_switch_ip_list() {
let data = {
cookie:document.cookie,
data:this.get_ip_list_require
}
var that = this;
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/user/cx_switch',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
that.switch_list = res.data.d.items;
that.page2 = res.data.d.pager;
}
});
},
rebuy(r) {
this.rebuy_data.title = '长效IP订单续费';
this.rebuy_data.packId = r.id;
this.rebuy_data.packType = 31;
this.rebuy_data.isAbroad = r.isAbroad2;
this.order_info.order_type = 5;
this.rebuy_data.ipAmount = r.ipAmount;
this.rebuy_data.isRelayed = r.isRelayed;
let _this=this
setTimeout(function() {
_this.calc_price()
}, 500);
},
rebuy_ip(r) {
this.rebuy_data.title = '长效IP续费';
this.rebuy_data.packId = r.packId;
this.rebuy_data.packType = 31;
this.rebuy_data.isAbroad = r.isAbroad;
this.rebuy_data.ids = r.id;
this.order_info.order_type = 6;
this.rebuy_data.ipAmount = 1;
this.rebuy_data.isRelayed = r.isRelayed;
this.rebuy_data.shareType = r.shareType2;
this.rebuy_data.lineType = r.lineType2;
this.rebuy_data.bandwidth = r.bandwidth;
let _this=this
setTimeout(function() {
_this.calc_price()
}, 500);
},
change_ip(r) {
this.change_ip_data.title = '长效IP切换节点';
this.change_ip_data.id = r.id;
this.change_ip_data.isAbroad = r.isAbroad;
this.change_ip_data.switchPop = 0;
var city_re_data = {
"gameId": r.gameId,
"isAbroad": r.isAbroad,
"shareType": r.shareType2,
"isp": r.isp,
};
that = this;
let data = {
cookie:document.cookie,
data: city_re_data
}
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/product/out_city',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
that.cities = res.d.cities
}
});
this.rebuy_data.isAbroad = r.isAbroad;
this.rebuy_data.ids = r.id;
this.order_info.order_type = 6;
this.rebuy_data.ipAmount = 1;
this.rebuy_data.isRelayed = r.isRelayed;
this.rebuy_data.shareType = r.shareType2;
this.rebuy_data.lineType = r.lineType2;
this.rebuy_data.bandwidth = r.bandwidth;
this.change_ip_data.data = this.rebuy_data;
this.calc_price()
},
change_in(r) {
this.change_ip_data.id = r.id;
this.change_ip_data.isAbroad = r.isAbroad;
this.change_ip_data.switchPop = 1;
this.rebuy_data.isAbroad = r.isAbroad;
this.rebuy_data.ids = r.id;
this.order_info.order_type = 6;
this.rebuy_data.ipAmount = 1;
this.rebuy_data.isRelayed = r.isRelayed;
this.rebuy_data.shareType = r.shareType2;
this.rebuy_data.lineType = r.lineType2;
this.rebuy_data.bandwidth = r.bandwidth;
this.change_ip_data.data = this.rebuy_data;
var that = this
var city_re_data = {
"gameId": r.gameId,
"isAbroad": r.isAbroad,
"shareType": r.shareType2,
"isp": r.isp,
"switchPop":1,
"packId":r.packId,
};
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/product/in_city',
dataType: "json",
async:false,
data:this.city_re_data,
success: function (res) {
that.cities = res.d.cities
}
});
this.calc_price()
},
set_btn_checked(id_f,id,text){
var i = 0;
if (text.length > 0) {
this.order_time_type = text
}
for (i=0;i<100;i++) {
$("#"+id_f+i).removeClass("btn-new");
$("#"+id_f+i).addClass("btn-default");
}
$("#"+id_f+id).removeClass("btn-default");
$("#"+id_f+id).addClass("btn-new");
let _this=this
setTimeout(function() {
_this.calc_price()
}, 500);
},
gmsc_add(){
this.rebuy_data.periodAmount++;
this.calc_price()
},
//短效包天购买时长修改
gmsc_reduce(){
if (this.rebuy_data.periodAmount > 1) {
this.rebuy_data.periodAmount--;
this.calc_price()
}
},
pay(){
let that = this;
this.order_info.data = this.rebuy_data;
let data = {
cookie:document.cookie,
order_info: this.order_info
}
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/order/rebuy_order',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
if (res.code == 1) {
$('#myModal').modal('hide');
alert(res.msg);
that.get_ip_list();
this.get_package_list();
} else {
alert(res.msg);
}
}
});
},
pay_change_ip(){
let that = this;
this.order_info.data = this.change_ip_data;
let data = {
cookie:document.cookie,
order_info: this.order_info
}
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/order/change_ip_order',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
if (res.code == 1) {
$('#change_ip').modal('hide');
alert(res.msg);
that.get_ip_list();
this.get_package_list();
} else {
alert('剩余线路不足,切换下单失败,请稍后再试');
}
}
});
},
calc_price() {
var that = this;
this.order_info.data = this.rebuy_data;
var price_info = {
'ipAmount':0,
'price':0,
};
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/product/calc_price',
dataType: "json",
async:false,
data: this.order_info,
success: function (res) {
price_info = res
}
});
this.order_info.money = this.order_info.data.periodAmount * this.order_info.data.ipAmount * price_info.price;
this.order_info.money = this.order_info.money.toFixed(2);
},
allcheck(){
var checkboxes = document.querySelectorAll('input[type="checkbox"]'); // 获取所有复选框元素
if($("#allchecked").prop("checked")) {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked=true; // 将每个复选框的 checked 属性设置为 true
}
}else {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked=false; // 移除每个复选框的 checked 属性
}
}
},
get_ip(){
var ids = '';
var checkboxes = document.querySelectorAll('input[name="ids"]'); // 获取所有复选框元素
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
ids += checkboxes[i].value + ',';
}
}
if(ids == '') {
alert('请选择ip');
return;
}
let data = {
cookie:document.cookie,
data: {"ids":ids}
}
var that = this;
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/user/get_lang_ip',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
var val = '';
var i = 0;
for (i=0;i<res.d.ips.length;i++) {
val += res.d.ips[i].ip + '|' +res.d.ips[i].httpPort + '|' +res.d.ips[i].socks5Port + '|' +res.d.ips[i].username + '|' +res.d.ips[i].password + "\n";
}
that.downTxt(val);
}
});
},
downTxt(val) {
let filename = "ip.txt" //注意最好设置后缀.txt
let value=val
let elem = document.createElement('a'); //创建a标签
elem.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(value)); //设置下载文件内容
elem.setAttribute('download', filename); //设置下载文件名
elem.style.display = 'none'; //设置a标签默认隐藏
document.body.appendChild(elem); //添加至dom层
elem.click(); //执行点击下载事件
document.body.removeChild(elem); //使用下载后移除a标签
}
}
});
</script>

View File

@@ -0,0 +1,745 @@
@{
Layout = "_UserLayout";
}
<style>
.col-sm-12 {
padding:0;
margin:0;
}
#getapi>.row {
padding:10px;
border-bottom:1px dashed #ccc;
}
</style>
<div id="app" style="padding-top: 2rem;">
<h3>短效套餐</h3>
<ul id="myTab" class="nav nav-tabs" style="position:inherit;">
<li class="active">
<a href="#all" v-on:click="get_package_list()" data-toggle="tab">全部套餐</a>
</li>
<li><a href="#order" v-on:click="get_order_list()" data-toggle="tab">购买记录</a></li>
<li><a href="#getapi" v-on:click="get_ip()" data-toggle="tab">提取短效</a></li>
</ul>
<br>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="all">
<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>有效时长</th>
<th>过期时间</th>
<th>是否过期</th>
<th>续费</th>
</tr>
</thead>
<tbody>
<tr v-for="item in pakage_list">
<td>{{item.name}}</td>
<td>{{item.remainingAmount}}</td>
<td>{{item.durationType}}</td>
<td>{{item.expireTime}}</td>
<td>{{item.isExpired}}</td>
<td v-if="item.planType != 22"><a class="btn btn-block btn-new" v-on:click="rebuy(item)" data-toggle="modal" data-target="#myModal">续费</a> </td>
<td v-if="item.planType == 22"> 不支持续费 </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="order">
<div class="col-sm-12">
<table class="products-table responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
<thead>
<tr>
<th>订单号</th>
<th>订单类型</th>
<th>套餐类型</th>
<th>有效时长</th>
<th>支付金额</th>
<th>支付时间</th>
<th>再次购买</th>
</tr>
</thead>
<tbody>
<tr v-for="item in order_list">
<td>{{item.order_no}}</td>
<td>{{item.order_type}}</td>
<td>{{item.package_type}}</td>
<td>{{item.durationType}}</td>
<td>{{item.money}}</td>
<td>{{item.create_time}}</td>
<td><a class="btn btn-block btn-new" href="/product/http">再次购买</a> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="getapi">
<div class="row">
<div class="col-md-2 text-right;">
请选择提取类型
</div>
<div class="col-md-10">
<select v-model="api_link_item.pack" @@change="chaneg_type" class="form-control input-sm" style="height:auto;width:39%" >
<option v-for="item in pakage_list" :value="item.id">({{item.id}}){{item.name}}</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-2 text-right;">
提取数量
</div>
<div class="col-md-10">
<input v-model="api_link_item.num" min=1 max=200 style="max-width:100px;color:black;" type="number" value="1">个IP <span style="color:#ccc;">单次可提取最大数量 200 个</span>
</div>
</div>
<div class="row" id="gt">
<div class="col-md-2 text-right;">
提取时长
</div>
<div class="col-md-10">
<label class="radio-inline">
<input v-model="api_link_item.gt" type="radio" name="gt" value="0" checked>默认
</label>
<label class="radio-inline">
<input v-model="api_link_item.gt" type="radio" name="gt" value="1"> 1分钟以上
</label>
<label class="radio-inline">
<input v-model="api_link_item.gt" type="radio" name="gt" value="2"> 2分钟以上
</label>
<label class="radio-inline">
<input v-model="api_link_item.gt" type="radio" name="gt" value="3"> 3分钟以上
</label>
<label class="radio-inline">
<input v-model="api_link_item.gt" type="radio" name="gt" value="4"> 4分钟以上
</label>
</div>
</div>
<div class="row">
<div class="col-md-2 text-right;">
IP协议
</div>
<div class="col-md-10">
<label class="radio-inline">
<input v-model="api_link_item.port" type="radio" name="port" value="1" checked>HTTP
</label>
<label class="radio-inline">
<input v-model="api_link_item.port" type="radio" name="port" value="2"> SOCKS5
</label>
</div>
</div>
<div class="row">
<div class="col-md-2 text-right;">
数据格式
</div>
<div class="col-md-10">
<label class="radio-inline">
<input v-model="api_link_item.type" type="radio" name="type" value="1" checked> TXT
</label>
<label class="radio-inline">
<input v-model="api_link_item.type" type="radio" name="type" value="2"> JSON
</label>
<label class="radio-inline">
<input v-model="api_link_item.type" type="radio" name="type" value="3"> HTML
</label>
</div>
</div>
<div class="row">
<div class="col-md-2 text-right;">
换行符
</div>
<div class="col-md-10">
<label class="radio-inline">
<input v-model="api_link_item.lb" type="radio" name="lb" value="1" checked> 回车换行(\r\n)
</label>
<label class="radio-inline">
<input v-model="api_link_item.lb" type="radio" name="lb" value="3"> 回车(\r)
</label>
<label class="radio-inline">
<input v-model="api_link_item.lb" type="radio" name="lb" value="4"> 换行(\n)
</label>
<label class="radio-inline">
<input v-model="api_link_item.lb" type="radio" name="lb" value="5"> Tab(\t)
</label>
<label class="radio-inline">
<input v-model="api_link_item.lb" type="radio" name="lb" value="6"> 其他符号:
</label>
<input v-model="api_link_item.clb" type="text" placeholder="请输入换行符">
</div>
</div>
<div class="row">
<div class="col-md-2 text-right;">
地区选择
</div>
<div class="col-md-10">
<p><a style="cursor: pointer; " v-on:click="selectAll()">全选</a> <a style="cursor: pointer; " v-on:click="deselectAll()">清除</a> </p>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" checked="true" name="regions" value="110000"> 北京市
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="120000"> 天津市
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="130000"> 河北市
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="140000"> 山西市
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="210000"> 辽宁市
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="220000"> 吉林市
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="310000"> 上海市
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="320000"> 江苏省
</label>
<br>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="330000"> 浙江省
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="340000"> 安徽省
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="350000"> 福建省
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="360000"> 江西省
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="370000"> 山东省
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="410000"> 河南省
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="420000"> 湖北省
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="430000"> 湖南省
</label>
<br>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="440000"> 广东省
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="460000"> 海南省
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="500000"> 重庆市
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="510000"> 四川省
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="520000"> 贵州省
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="530000"> 云南省
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="610000"> 陕西省
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="620000"> 甘肃省
</label>
<br>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="630000"> 青海省
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="230000"> 黑龙江省
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="540000"> 西藏自治区
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="150000"> 内蒙古自治区
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="450000"> 广西壮族自治区
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="640000"> 宁夏回族自治区
</label>
<label class="checkbox-inline">
<input type="checkbox" v-model="regions" name="regions" value="650000"> 新疆维吾尔自治区
</label>
</div>
</div>
<div class="row">
<div class="col-md-2 text-right;">
IP去重
</div>
<div class="col-md-10" id="bqc">
<label class="radio-inline">
<input v-model="api_link_item.distinct" type="radio" name="distinct" value="2" checked>严格去重
</label>
<label class="radio-inline">
<input v-model="api_link_item.distinct" type="radio" name="distinct" value="0"> 不去重
</label>
</div>
<div style="display:none;" class="col-md-10" id="qc">
不去重
</div>
</div>
<div class="row">
<div class="col-md-2 text-right;">
运营商
</div>
<div class="col-md-10">
<label class="radio-inline">
<input v-model="api_link_item.isp" type="radio" name="isp" value="0" checked>不限
</label>
<label class="radio-inline">
<input v-model="api_link_item.isp" type="radio" name="isp" value="4"> 联通
</label>
<label class="radio-inline">
<input v-model="api_link_item.isp" type="radio" name="isp" value="2"> 电信
</label>
</div>
</div>
<div class="row">
<div class="col-md-2 text-right;">
自动添加白名单
</div>
<div class="col-md-10">
<label class="radio-inline">
<input v-model="api_link_item.aw" type="radio" name="aw" value="0">不自动
</label>
<label class="radio-inline" v-on:click="autowhiteip()">
<input v-model="api_link_item.aw" type="radio" name="aw" value="1"> 自动
</label>
</div>
</div>
<div class="row">
<div class="col-md-2 text-right;">
签权模式
</div>
<div class="col-md-10">
<label class="radio-inline" v-on:click="qqms(1)">
<input v-model="api_link_item.at" type="radio" name="at" value="1" checked>白名单
</label>
<label class="radio-inline" v-on:click="qqms(2)">
<input v-model="api_link_item.at" type="radio" name="at" value="2"> 白名单+账密
</label>
<label class="radio-inline" id="at" v-on:click="qqms(3)">
<input v-model="api_link_item.at" type="radio" name="at" value="3"> 仅账号密码
</label>
</div>
</div>
<div class="row" id="sp">
<div class="col-md-2 text-right;">
分隔符
</div>
<div class="col-md-10">
<label class="radio-inline">
<input v-model="api_link_item.sp" type="radio" name="sp" value="1" checked>竖线(|
</label>
<label class="radio-inline">
<input v-model="api_link_item.sp" type="radio" name="sp" value="2"> 斜线(/
</label>
<label class="radio-inline">
<input v-model="api_link_item.sp" type="radio" name="sp" value="3"> 冒号(:
</label>
<label class="radio-inline">
<input v-model="api_link_item.sp" type="radio" name="sp" value="6"> 自定义:
</label>
<input v-model="api_link_item.csp" type="text" placeholder="请输入分割符">
</div>
</div>
<div class="row text-center">
<button v-on:click="create_api_link()" class="btn btn-new btn-lg">生成API链接</button>
</div>
<div class="row">
<p style="white-space: nowrap;float:left;border:1px solid #ccc;padding:7px;width:70%;height:40px;overflow:hidden;">{{api_link}}</p>
<button v-on:click="copy_url" class="btn btn-new">复制链接</button>
<a target="_blank" :href="api_link" class="btn btn-new">打开链接</a>
</div>
<div class="row" style="border:1px dashed #ccc;">
<table class="table table-bordered">
<caption>请求参数注释</caption>
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>必选</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">pt</td><td class="center">int</td><td class="center">是</td><td>套餐类型0或12-储值套餐21-短效包天22-短效包量23-短效无限量29-终身免费VIP套餐31-长效套餐</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}"><td class="center">num</td><td class="center">int</td><td class="center">是</td><td>提取IP数量</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">gt</td><td class="center">int</td><td class="center">否</td><td>提取时长 0-默认 1-1分钟以上 2-2分钟以上 3-3分钟以上 4-4分钟以上 </td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}"><td class="center">regions</td><td class="center">string</td><td class="center">否</td><td>多个用英文逗号换行,不传表示随机</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">isp</td><td class="center">int</td><td class="center">是</td><td>0:不限 4:联通 2:电信</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}"><td class="center">port</td><td class="center">int</td><td class="center">是</td><td>IP协议 1:HTTP 2:SOCK5</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">time</td><td class="center">int</td><td class="center">否</td><td>有效时长 1-0.1至1分钟 5-1至5分钟 25-5至25分钟 180-25至180分钟 360-3至6小时</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}"><td class="center">type</td><td class="center">int</td><td class="center">否</td><td>数据格式1:TXT 2:JSON 3:html</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">pack</td><td class="center">int</td><td class="center">否</td><td>用户套餐ID</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}"><td class="center">ts</td><td class="center">int</td><td class="center">否</td><td>是否显示IP过期时间: 1显示 0不显示</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">lb</td><td class="center">int</td><td class="center">否</td><td>换行符(1:\r\n 2:/br 3:\r 4:\n 5:\t 6 :自定义)</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}"><td class="center">clb</td><td class="center">string</td><td class="center">否</td><td>自定义换行符</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">sp</td><td class="center">int</td><td class="center">否</td><td>分隔符(1:竖线| 2:斜线/ 3:冒号 6 :自定义)</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}"><td class="center">csp</td><td class="center">string</td><td class="center">否</td><td>自定义分隔符</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">distinct</td><td class="center">int</td><td class="center">否</td><td>去重选择2:严格去重。0:不去重)</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}"><td class="center">aw</td><td class="center">int</td><td class="center">否</td><td>是否将调用者自动添加到IP白名单0:不自动添加。1:自动添加)</td></tr><!--for6371000000238419--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">at</td><td class="center">int</td><td class="center">否</td><td>鉴权模式 1-白名单2-白名单+账密严格鉴权3-仅账密鉴权(无限量不可用)</td></tr><!--for6371000000238419--><!--ms-for-end:--></tbody>
</table>
</div>
<div><div class="size-20 color-10 p-t-30">返回结果示例</div><pre class="layui-code layui-box layui-code-view"><h3 class="layui-code-h3">JSON<a href="javascript:;">code</a></h3><ol class="layui-code-ol"><li>{</li><li> "code":0,</li><li> "msg":"提示信息",</li><li> "success":true,</li><li> "data":[</li><li> {</li><li> "ip":"49.68.68.197", //隧道ip 代理ip</li><li> "port":33220, // 代理端口</li><li> "expireTime":"2019-05-24 08:58:31"</li><li> },</li><li> {</li><li> "ip":"58.218.201.108", //隧道ip 代理ip</li><li> "port":2690, // 代理端口</li><li> "expireTime":"2019-05-24 08:55:31"</li><li> }</li><li> ]</li><li>}</li><li> </li></ol></pre></div>
<div class="row" style="border:1px dashed #ccc;">
<table class="table table-bordered">
<caption>请求参数注释</caption>
<tbody><tr class="api-head"><td width="15%" class="center">名称</td><td width="40%" class="center">类型</td><td width="45%">说明</td></tr><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">success</td><td class="center">bool</td><td>是否成功</td></tr><!--for6375--><tr ms-class="{tr1:index%2==0}"><td class="center">code</td><td class="center">int</td><td>0表示成功其他参见《错误代码》表</td></tr><!--for6375--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">ip</td><td class="center">string</td><td>IP</td></tr><!--for6375--><tr ms-class="{tr1:index%2==0}"><td class="center">port</td><td class="center">int</td><td>端口号</td></tr><!--for6375--><!--ms-for-end:--></tbody>
</table>
</div>
<div class="row" style="border:1px dashed #ccc;">
<table class="table table-bordered">
<caption>请求参数注释</caption>
<tbody><tr class="api-head"><td width="20%" class="center">错误编码</td><td width="50%" class="">错误提示</td><td width="30%">说明</td></tr><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">code:111</td><td class="">请在1秒后再次请求</td><td>提取链接请求太过频繁,超出限制</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}"><td class="center">code:113</td><td class="">请将192.168.0.0设置为白名单!</td><td>白名单未添加/白名单掉了</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">code:114</td><td class="">余额不足</td><td>账户金额消耗完毕</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}"><td class="center">code:115</td><td class="">请更换地区等条件重新生成api链接地址</td><td>没有资源或没有符合条件的数据</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">code:116</td><td class="">您的套餐今日已到达上限!</td><td>套餐内IP数量消耗完毕</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}"><td class="center">code:117</td><td class="">您的套餐pack传参有误!请检测您现在的ip是否在套餐所在账户</td><td>检测本地白名单是不是在账户下</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">code:118</td><td class="">您的账户异常,请联系客服!</td><td>账户处于被禁用状态</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}"><td class="center">code:121</td><td class="">您的该套餐已经过期了!</td><td>套餐过期</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}" class="tr1" old-change-class="tr1"><td class="center">code:401</td><td class="">IP:1.1.1.1:2000 Authentication failed</td><td>白名单错误/使用的IP已经过期</td></tr><!--for6377999999523163--><tr ms-class="{tr1:index%2==0}"><td class="center">code:403</td><td class="">SorryThe site has been banned</td><td>客户目标网站异常,联系客服处理</td></tr><!--for6377999999523163--><!--ms-for-end:--></tbody>
</table>
</div>
</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">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<h4 class="modal-title" id="myModalLabel">
{{rebuy_data.title}}
</h4>
</div>
<div class="modal-body">
<div class="col-sm-12 ">
<div class="boxes boxes-border-top text-left margin-top-30 clearfix">
<div class="col-sm-12">
<h5 class="margin-top-0">套餐周期:</h5>
<label class="radio-inline" v-on:click="set_btn_checked('dxwxl_tczq_','2','天')">
<input type="radio" class="hide" v-model="rebuy_data.periodType" value="1"> <span id="dxwxl_tczq_2" class="btn btn-new btn-lg">按天</span>
</label>
<label class="radio-inline" v-on:click="set_btn_checked('dxwxl_tczq_','3','周')">
<input type="radio" class="hide" v-model="rebuy_data.periodType" value="7"> <span id="dxwxl_tczq_3" class="btn btn-default btn-lg">按周</span>
</label>
<label class="radio-inline" v-on:click="set_btn_checked('dxwxl_tczq_','4','月')">
<input type="radio" class="hide" v-model="rebuy_data.periodType" value="30"> <span id="dxwxl_tczq_4" class="btn btn-default btn-lg">按月</span>
</label>
<label v-if="rebuy_data.packType!=21" class="radio-inline" v-on:click="set_btn_checked('dxwxl_tczq_','5','季')">
<input type="radio" class="hide" v-model="rebuy_data.periodType" value="90"> <span id="dxwxl_tczq_5" class="btn btn-default btn-lg">按季</span>
</label>
</div>
</div>
</div>
<div class="col-sm-12 ">
<div class="boxes boxes-border-top text-left margin-top-30 clearfix">
<div class="col-sm-12">
<h5 class="margin-top-0">购买时长:</h5>
<div class="btn-group" role="group" >
<button type="button" v-on:click="gmsc_reduce()" class="btn btn-new">-</button>
<button type="button" class="btn btn-default">{{rebuy_data.periodAmount}}{{order_time_type}}</button>
<button type="button" v-on:click="gmsc_add()" class="btn btn-new">+</button>
</div>
</div>
</div>
</div>
<div class="col-sm-12 ">
<div class="boxes boxes-border-top text-left margin-top-30 clearfix">
<div class="col-sm-12">
<h5 class=" text-left">价格:¥{{order_info.money}} <span style="float:right;">
<button class="btn btn-new" v-on:click="pay()" data-backdrop="static" >实付¥{{order_info.money}}</button>
</span></h5>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
pakage_list:[],
order_list:[],
rebuy_data:{
title:'',
packId:'',
packType:'',
periodType:1,
periodAmount:1,
durationType:5,
},
order_time_type:'天',
order_info:{
order_type:2,//1:预储值、2短效无限量、3短效包天、4短效包量、5长效游戏
money:1,
data:{}
},
api_link:'',
api_link_item:{
num:1
},
regions:[],
user_detail:{},
},
created:function(){
this.get_package_list();
},
methods:{
get_package_list(){
let data = {
cookie:document.cookie,
}
var that = this;
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/user/dx_package',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
that.pakage_list = res.data
}
});
},
get_ip() {
let data = {
cookie:document.cookie,
}
var that = this;
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/user/get_user_token',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
that.user_detail.u = res.data.uid
that.user_detail.t = res.data.token
}
});
},
autowhiteip(){
this.api_link_item.u = this.user_detail.u
this.api_link_item.t = this.user_detail.t
},
get_order_list() {
let data = {
cookie:document.cookie,
}
var that = this;
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/user/dx_order',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
that.order_list = res.data
}
});
},
rebuy(r) {
this.rebuy_data.title = r.name;
this.rebuy_data.packId = r.id;
this.rebuy_data.packType = r.planType;
this.rebuy_data.durationType = r.durationType2;
this.rebuy_data.ipAmount = r.ipAmount;
if (r.planType == 21) {
this.order_info.order_type = 3;
}
if (r.planType == 23) {
this.order_info.order_type = 2;
}
this.calc_price();
},
set_btn_checked(id_f,id,text){
var i = 0;
if (text.length > 0) {
this.order_time_type = text
}
for (i=0;i<100;i++) {
$("#"+id_f+i).removeClass("btn-new");
$("#"+id_f+i).addClass("btn-default");
}
$("#"+id_f+id).removeClass("btn-default");
$("#"+id_f+id).addClass("btn-new");
let _this=this
setTimeout(function() {
_this.calc_price()
}, 500);
},
gmsc_add(){
this.rebuy_data.periodAmount++;
this.calc_price();
},
//短效包天购买时长修改
gmsc_reduce(){
if (this.rebuy_data.periodAmount > 1) {
this.rebuy_data.periodAmount--;
this.calc_price();
}
},
pay(){
let that = this;
this.order_info.data = this.rebuy_data;
let data = {
cookie:document.cookie,
order_info: this.order_info
}
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/order/rebuy_order',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
if (res.code == 1) {
$('#myModal').modal('hide');
alert(res.msg);
that.get_package_list();
}
}
});
},
chaneg_type(r){
var that = this;
this.pakage_list.forEach(function(item,index,arr){
if (that.api_link_item.pack == item.id) {
that.api_link_item.pt = item.planType;
that.api_link_item.time = item.durationType2;
}
})
if (that.api_link_item.pt != 23) {
$("#gt").hide();
$("#qc").hide();
$("#bqc").show();
$("#at").show();
} else {
$("#gt").show();
$("#bqc").hide();
$("#qc").show();
$("#at").hide();
that.api_link_item.distinct = 0;
}
if (that.api_link_item.pt == 21) {
$("#gt").show();
}
},
qqms(i){
if (i == 1) {
$("#sp").hide();
} else {
$("#sp").show();
}
},
create_api_link(){
this.api_link = 'http://get.ip.juip.com/get/ip?';
var regions_list = this.regions.join(",");
for (let key in this.api_link_item) {
if (this.api_link_item.hasOwnProperty(key)) {
this.api_link += key + "=" + this.api_link_item[key]+'&';
}
}
this.api_link += 'regions=' + regions_list;
},
// 全选按钮点击事件处理程序
selectAll() {
var checkboxes = document.querySelectorAll('input[name="regions"]'); // 获取所有复选框元素
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked=true; // 将每个复选框的 checked 属性设置为 true
this.regions[i] = checkboxes[i].value;
}
},
// 取消全选按钮点击事件处理程序
deselectAll() {
var checkboxes = document.querySelectorAll('input[name="regions"]'); // 获取所有复选框元素
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked=false; // 移除每个复选框的 checked 属性
}
this.regions = [];
},
copy_url() {
this.create_api_link();
var text = this.api_link;
var textarea = document.createElement('textarea');
textarea.style.position = 'fixed';
textarea.style.opacity = 0;
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
},
calc_price() {
var that = this;
this.order_info.data = this.rebuy_data;
var price_info = {
'ipAmount':0,
'price':0,
};
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/product/calc_price',
dataType: "json",
async:false,
data: this.order_info,
success: function (res) {
price_info = res
}
});
switch(this.order_info.order_type) {
case 2:
this.order_info.money = this.order_info.data.periodAmount * price_info.price;
break;
case 3:
this.order_info.money = this.order_info.data.periodAmount * price_info.price * this.order_info.data.ipAmount;
break;
}
this.order_info.money = this.order_info.money.toFixed(2);
}
}
});
</script>

View File

@@ -0,0 +1,58 @@
@{
Layout = "_UserLayout";
}
<div id="app" style="padding-top: 2rem;">
<table class="table">
<caption>HTTP 充值记录</caption>
<thead>
<tr>
<th style="min-width: 100px;">交易时间</th>
<th style="min-width: 100px;">充值H币</th>
<th style="min-width: 100px;">充值渠道</th>
<th style="min-width: 50px;">支付金额</th>
</tr>
</thead>
<tbody>
<tr v-for="info in list">
<td>{{info.create_time}}</td>
<td>{{info.ju_money}}</td>
<td>{{info.pay_type }}</td>
<td>{{info. pay_money }}</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
list:[]
},
created:function(){
this.get_list();
},
methods:{
get_list() {
let data = {
cookie:document.cookie,
}
var that = this;
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/user/charge_list',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
that.list = res
}
});
}
}
});
</script>

View File

@@ -0,0 +1,149 @@
@{
Layout = "_UserLayout";
}
<style>
h5 {
padding:0;
margin:0;
color:white;
}
.col-sm-12 {
padding:0;
margin:0;
}
</style>
<div id="app" style="padding-top: 2rem;">
<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>

View File

@@ -0,0 +1,146 @@
@{
Layout = "_UserLayout";
}
<div id="app" style="padding-top: 2rem;">
<div class="boxes margin-top-5 clearfix">
<div>
<input v-model="ip" type="text" style="width:25%" placeholder="请输入ip地址并点击保存白名单" />
<button v-on:click="set_ip()" type="button" class="btn btn-primary" ><span class="glyphicon glyphicon-plus"></span>保存</button>
</div>
<div class=" margin-top-30">
<h5>当前白名单列表 <span class="text-warning">当前仅允许保留白名单数量5个</span></h5>
<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 vm = new Vue({
el:'#app',
data:{
ip_list:[],
ip:'',
},
created:function(){
this.get_list();
},
methods:{
get_list() {
let data = {
cookie:document.cookie,
}
var that = this;
$.ajax({
type: 'POST',
url: 'https://php-api.juip.com/http/user/white_list',
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: 'https://php-api.juip.com/http/user/create_white_ip',
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: 'https://php-api.juip.com/http/user/lock_ip',
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: 'https://php-api.juip.com/http/user/delete_ip',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(dataa),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
that.get_list()
}
});
}
}
});
</script>

View File

@@ -18,6 +18,16 @@
<li><img src="~/m/img/p2.png"><a asp-action="myrefundorders" asp-controller="user">退货订单<img src="~/m/img/arrow.png"></a></li>
<li><img src="~/m/img/p4.png"><a asp-action="mycoupons" asp-controller="user">我的优惠券&nbsp;<span style="background-color: red;font-size:25px;" class="badge" id="coupon_num"></span><img src="~/m/img/arrow.png"></a></li>
<li><img src="~/m/img/p4.png"></span><a asp-action="cashout" asp-controller="user">提现管理<img src="~/m/img/arrow.png"></a></li>
<li><img src="~/m/img/p4.png"></span> <a href="/user/httprecharge">HTTP充值记录<img src="~/m/img/arrow.png"></a></li>
<li><img src="~/m/img/p4.png"></span><a href="/user/httppackageList">
短效套餐<img src="~/m/img/arrow.png"></a></li>
<li><img src="~/m/img/p4.png"><a href="/user/httplongterm">
长效管理<img src="~/m/img/arrow.png"></a></li>
<li><img src="~/m/img/p4.png"><a href="/user/httpusehistory">
使用记录<img src="~/m/img/arrow.png"></a></li>
<li><img src="~/m/img/p4.png"></span><a href="/user/httpwhiteip">
白名单设置<img src="~/m/img/arrow.png"></a></li>
<li><img src="~/m/img/p4.png"></span><a href="/user/jinqiao">金桥投屏<img src="~/m/img/arrow.png"></a></li>
</ul>
<script>

View File

@@ -0,0 +1,59 @@
@{
Layout = "_UserLayout";
}
<div id="app" style="padding-top: 2rem;">
<table class="table">
<caption>金桥投屏兑换码</caption>
<thead>
<tr>
<th>套餐</th>
<th>兑换码</th>
<th>购买时间</th>
</tr>
</thead>
<tbody>
<tr v-for="info in tableData">
<td>{{info.package_name}}</td>
<td>{{info.code}}</td>
<td>{{info.create_time}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
tableData: [],
},
created:function(){
this.post();
},
methods:{
post:function(){
var param = [];
let cashOutData = {
cookie:document.cookie
}
$.ajax({
type: 'POST',
async:false,
url: 'https://php-api.juip.com/jinqiao/index/get_key',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(cashOutData),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
param = res.data;
console.log(res)
}
});
this.tableData = param;
}
}
});
</script>