wyk/juipnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

手机端页面调整

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

745
Host/Views.Mobile/User/HttpPackageList.cshtml Normal file
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="">Sorry！The 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>