手机端页面调整

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

File diff suppressed because it is too large Load Diff

View File

@@ -1,38 +1,105 @@
<style>
html {
font-size: 16px;
font-size: 10px !important
}
p{
font-size: 14px;
font-weight: normal;
}
.navList .btn {
display:inline;
}
.denglu .btn {
display:inline;
}
#regBox .btn {
display:inline;
}
</style>
<style>.fixedHead[data-v-1d039d3b]{background:linear-gradient(45deg,#4dbc8f 0,var(--main) 100%);z-index:10}.btn-1[data-v-1d039d3b]{background:linear-gradient(136.57deg,#27b148 19.13%,rgba(39,177,72,.55) 51.17%,#27b148 86.22%)}.btn-2[data-v-1d039d3b]{background:linear-gradient(136.57deg,#7f83f7 19.13%,rgba(39,177,72,.55) 51.17%,#93d2f3 86.22%)}.businessCooperation>.item .shadow1[data-v-1d039d3b]{box-shadow:0 3px 2px 1px var(--main)}.footer[data-v-1d039d3b]{background:linear-gradient(45deg,var(--main) 0,#4dbc8f 100%)}.chat .text[data-v-1d039d3b]{box-shadow:0 2px 10px rgba(0,0,0,.1);position:relative}.chat .text[data-v-1d039d3b]:after{border:6px solid transparent;border-right-color:#fff;content:"";height:0;position:absolute;width:0}.chat .text[data-v-1d039d3b]:not(.self):after{right:100%;top:10px}.chat .text.self[data-v-1d039d3b]:after{left:100%;top:10px}.chat .self.text[data-v-1d039d3b]:after{border-left-color:#a3dbb1;border-right-color:transparent}.funCard li[data-v-1d039d3b]{box-shadow:4px 4px 8px #27b148}.bg1[data-v-1d039d3b]{background:url(https://www.xiaowei.run/_nuxt/transparentBg1.bbdf63be.png) no-repeat 0 0/100% 100%}.bg2[data-v-1d039d3b]{background:url(https://www.xiaowei.run/_nuxt/transparentBg2.dae3d787.png) no-repeat 0 0/100% 100%}.bg3[data-v-1d039d3b]{background:url(https://www.xiaowei.run/_nuxt/transparentBg3.2e7c2b41.png) no-repeat 0 0/100% 100%}.bg4[data-v-1d039d3b]{background:url(https://www.xiaowei.run/_nuxt/transparentBg4.8cff2de0.png) no-repeat 0 0/100% 100%}.header[data-v-1d039d3b]{background:linear-gradient(180deg,#27b148,hsla(0,0%,94%,.3) 72%)}</style>
<style>.fixedHead[data-v-1d039d3b]{background:linear-gradient(45deg,#4dbc8f 0,var(--main) 100%);z-index:10}.btn-1[data-v-1d039d3b]{background:linear-gradient(136.57deg,#27b148 19.13%,rgba(39,177,72,.55) 51.17%,#27b148 86.22%)}.btn-2[data-v-1d039d3b]{background:linear-gradient(136.57deg,#7f83f7 19.13%,rgba(39,177,72,.55) 51.17%,#93d2f3 86.22%)}.businessCooperation>.item .shadow1[data-v-1d039d3b]{box-shadow:0 3px 2px 1px var(--main)}.footer[data-v-1d039d3b]{background:linear-gradient(45deg,var(--main) 0,#4dbc8f 100%)}.chat .text[data-v-1d039d3b]{box-shadow:0 2px 10px rgba(0,0,0,.1);position:relative}.chat .text[data-v-1d039d3b]:after{border:6px solid transparent;border-right-color:#fff;content:"";height:0;position:absolute;width:0}.chat .text[data-v-1d039d3b]:not(.self):after{right:100%;top:10px}.chat .text.self[data-v-1d039d3b]:after{left:100%;top:10px}.chat .self.text[data-v-1d039d3b]:after{border-left-color:#a3dbb1;border-right-color:transparent}.funCard li[data-v-1d039d3b]{box-shadow:4px 4px 8px #27b148}.bg1[data-v-1d039d3b]{background:url(/jinqiao/transparentBg1.bbdf63be.png) no-repeat 0 0/100% 100%}.bg2[data-v-1d039d3b]{background:url(/jinqiao/transparentBg2.dae3d787.png) no-repeat 0 0/100% 100%}.bg3[data-v-1d039d3b]{background:url(/jinqiao/transparentBg3.2e7c2b41.png) no-repeat 0 0/100% 100%}.bg4[data-v-1d039d3b]{background:url(/jinqiao/transparentBg4.8cff2de0.png) no-repeat 0 0/100% 100%}.header[data-v-1d039d3b]{background:linear-gradient(180deg,#27b148,hsla(0,0%,94%,.3) 72%)}</style>
<style>*,:after,:before{border-color:var(--un-default-border-color,#e5e7eb);border-style:solid;border-width:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}</style>
<style>:root{--main:#27b148}body{font-size:14px}html{font-family:PingFangSC-regular;overflow-x:hidden;scroll-behavior:smooth}button{outline:none}#app,body,html{height:100%;margin:0;padding:0}.omit{overflow:hidden;text-overflow:ellipsis}.nowrap,.omit{white-space:nowrap}.nowrap{flex-wrap:nowrap}</style>
<style>#--unocss--{layer:__ALL__}</style>
<link rel="stylesheet" href="https://www.xiaowei.run/_nuxt/entry.277ee4d9.css">
<link rel="stylesheet" href="/jinqiao/entry.277ee4d9.css">
<div id="product">
<link href="/http/css/style.css" rel="stylesheet">
<div data-v-1d039d3b="">
<div id="product-jinqiao">
<div class="modal fade" id="buy" data-backdrop="static" 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">购买金桥授权码</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-3 text-right">
套餐选择:
</div>
<div class="col-md-9">
<div class="btn-group" role="group" aria-label="...">
<button v-for="(item,index) in package_list" :key="index" :class="'package' + item.id" v-on:click="package_select(item)" type="button" style="color:black;" class="btn btn-default btn-sm">
<span>{{item.name}}</span>
</button>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3 text-right">
我的余额:
</div>
<div class="col-md-9">
¥{{balance}}
</div>
</div>
<br>
<div class="row">
<div class="col-md-3 text-right">
套餐价格:
</div>
<div class="col-md-9">
¥{{order.price}}
</div>
</div>
<br>
<div class="row">
<div class="col-md-3 text-right">
支付方式:
</div>
<div class="col-md-9">
<input id="balance_s1" v-model="order.pay_type" type="radio" name="OPayType" value="10" checked> <label for="balance_s1">余额支付</label>&nbsp;&nbsp;
<input id="zhifubaopay_s1" v-model="order.pay_type" type="radio" name="OPayType" value="100" > <label for="zhifubaopay_s1">&nbsp; <img src="~/img/zfb.png" style="width:20px;display:inline;">支付宝支付</label>&nbsp;&nbsp;
<input id="weixinpay_s1" v-model="order.pay_type" type="radio" name="OPayType" value="70" > <label for="weixinpay_s1">&nbsp;<img src="~/img/wx.png" style="width:20px;display:inline;">微信支付</label>
</div>
</div>
</div>
<div class="modal-footer" >
<button type="button" class="btn btn-default" style="color:black; float:right;" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" v-on:click="pay()" style=" float:right;margin-right:10px;">提交</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<div data-v-1d039d3b="">
<div lt-xl="h-auto" class=" top-0 w-full fixedHead" data-v-1d039d3b="">
<div class="mx-auto h-100% flex flex-col" xl="w-360 max-w-100%" style="top:150px;" data-v-1d039d3b="">
<div flex="" lt-md="pr-4 pl-2 " lt-xl="px-4 " xl="" class="nowrap box-border flex-shrink-0 justify-between py-3 pt-4 fixedHead" data-v-1d039d3b="">
<div class="flex items-center cursor-pointer" data-v-1d039d3b="">
<img src="https://www.xiaowei.run/_nuxt/logo.02571b77.png" class="w-14 transform" lt-md="w-10 translate-y--4px" lt-xl="translate-y--4px" xl="translate-y--4px" alt="" data-v-1d039d3b="">
<img src="/jinqiao/logo.png" class="w-14 transform" lt-md="w-10 translate-y--4px" lt-xl="translate-y--4px" xl="translate-y--4px" alt="" data-v-1d039d3b="">
<h1 class="text-9" lt-md="text-7" data-v-1d039d3b=""> 金桥投屏 </h1>
</div>
<div class="flex items-center gap-5 text-7" lt-md="text-4 gap-3" lt-xl="text-5" data-v-1d039d3b="">
<a class="cursor-pointer" lt-sm="hidden" data-v-1d039d3b="">立刻下载</a>
<a class="cursor-pointer" lt-sm="hidden" data-v-1d039d3b="">产品优势</a>
<a href="https://www.douyin.com/user/MS4wLjABAAAA9OTfuojoBUcN4YwDhq_pbK0Aj8bSJo9yf90Ezwr_0B2YjVkcSvNaOle3Qv27bgxn" target="_blank" lt-md="hidden" data-v-1d039d3b="">演示视频</a>
<a href="https://shouce.xiaowei.run" target="_blank" data-v-1d039d3b="">产品手册</a>
<a class="cursor-pointer" lt-sm="hidden" data-v-1d039d3b="">商务合作</a>
<span class="cursor-pointer" data-v-1d039d3b="">专家服务</span>
<a class="cursor-pointer" lt-sm="hidden" href="#advantage" style="color:#1a1a1a;cursor: pointer;" data-v-1d039d3b="">产品优势</a>
@* <a href="" target="_blank" lt-md="hidden" data-v-1d039d3b="">演示视频</a> *@
<a href="https://vw1r6mihwro.feishu.cn/docx/VBK0dGfzmobP9zxPZamc5fjvndd" target="_blank" style="color:#1a1a1a;cursor: pointer;" data-v-1d039d3b="">产品手册</a>
<a data-v-1d039d3b="" v-on:click="get_init()" style="color:#1a1a1a;cursor: pointer;">前往购买</a>
</div>
</div>
</div>
@@ -53,21 +120,15 @@ p{
<p class="text-5" lt-xl="px-6 text-4" data-v-1d039d3b=""> 无需注册 · 打开即用 · 全功能免费 · 响应迅速 · 画质清晰 · 主机资源占用低 · 连接稳定 · 操作便捷 · 界面简洁 </p>
<div my-11="" flex="" items-center="" data-v-1d039d3b="">
<div class="mx-auto flex items-center gap-10" lt-md="block" data-v-1d039d3b="">
<button class="mx-auto btn btn-1 px-6 py-3 text-18px" lt-xl="" data-v-1d039d3b="">
<a style="font-size:2rem;" href="/jinqiao/金桥投屏_v3.73.zip" class="mx-auto btn btn-1 px-6 py-3 text-18px" lt-xl="" data-v-1d039d3b="">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 256 256" data-v-1d039d3b="">
<path fill="currentColor" d="M228 152v56a20 20 0 0 1-20 20H48a20 20 0 0 1-20-20v-56a12 12 0 0 1 24 0v52h152v-52a12 12 0 0 1 24 0m-108.49 8.49a12 12 0 0 0 17 0l40-40a12 12 0 0 0-17-17L140 123V40a12 12 0 0 0-24 0v83l-19.51-19.49a12 12 0 0 0-17 17Z" data-v-1d039d3b=""></path>
</svg>
<span data-v-1d039d3b="">下 载 稳 定 版</span>
</button>
<button class="mx-auto btn btn-2 px-6 py-3 text-18px" lt-md="mt-5" data-v-1d039d3b="">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 256 256" data-v-1d039d3b="">
<path fill="currentColor" d="M228 152v56a20 20 0 0 1-20 20H48a20 20 0 0 1-20-20v-56a12 12 0 0 1 24 0v52h152v-52a12 12 0 0 1 24 0m-108.49 8.49a12 12 0 0 0 17 0l40-40a12 12 0 0 0-17-17L140 123V40a12 12 0 0 0-24 0v83l-19.51-19.49a12 12 0 0 0-17 17Z" data-v-1d039d3b=""></path>
</svg>
<span data-v-1d039d3b="">下 载 尝 鲜 版</span>
</button>
</a>
</div>
</div>
<img src="https://www.xiaowei.run/_nuxt/headerBg1.2a015da1.jpg" lt-xl="mb-10 w-60vw mx-auto" class="mx-auto w-1000px flex-shrink-0 overflow-hidden rounded-1" alt="" data-v-1d039d3b="">
<img src="/jinqiao/headerBg1.2a015da1.jpg" lt-xl="mb-10 w-60vw mx-auto" class="mx-auto w-1000px flex-shrink-0 overflow-hidden rounded-1" alt="" data-v-1d039d3b="">
</div>
</div>
</div>
@@ -75,18 +136,12 @@ p{
</div>
<div style="" class="fixed right-3 bottom-10 z-10" lt-sm="hidden!" data-v-1d039d3b="">
<div class="mx-auto flex flex-col gap-3 items-end" data-v-1d039d3b="">
<button class="mx-auto btn btn-1 px-6 py-3 text-18px" lt-xl="" data-v-1d039d3b="">
<a style="font-size:1.5rem;" href="/jinqiao/金桥投屏_v3.73.zip" class="mx-auto btn btn-1 px-6 py-3 text-18px" lt-xl="" data-v-1d039d3b="">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 256 256" data-v-1d039d3b="">
<path fill="currentColor" d="M228 152v56a20 20 0 0 1-20 20H48a20 20 0 0 1-20-20v-56a12 12 0 0 1 24 0v52h152v-52a12 12 0 0 1 24 0m-108.49 8.49a12 12 0 0 0 17 0l40-40a12 12 0 0 0-17-17L140 123V40a12 12 0 0 0-24 0v83l-19.51-19.49a12 12 0 0 0-17 17Z" data-v-1d039d3b=""></path>
</svg>
<span data-v-1d039d3b="">下 载 稳 定 版</span>
</button>
<button class="mx-auto btn btn-2 px-6 py-3 text-18px" data-v-1d039d3b="">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 256 256" data-v-1d039d3b="">
<path fill="currentColor" d="M228 152v56a20 20 0 0 1-20 20H48a20 20 0 0 1-20-20v-56a12 12 0 0 1 24 0v52h152v-52a12 12 0 0 1 24 0m-108.49 8.49a12 12 0 0 0 17 0l40-40a12 12 0 0 0-17-17L140 123V40a12 12 0 0 0-24 0v83l-19.51-19.49a12 12 0 0 0-17 17Z" data-v-1d039d3b=""></path>
</svg>
<span data-v-1d039d3b="">下 载 尝 鲜 版</span>
</button>
</a>
</div>
</div>
<div class="bg1" xl="h-300" lt-xl="pb-20" data-v-1d039d3b="">
@@ -169,7 +224,7 @@ p{
<p class="text-18px opacity-60" data-v-1d039d3b=""> 为什么选择使用金桥投屏 </p>
</div>
<div class="mx-auto mt-30 w-1476px flex" lt-xl="w-80%" lt-md="w-90%" data-v-1d039d3b="">
<img src="https://www.xiaowei.run/_nuxt/c1.5fcf15dc.svg" lt-xl="hidden" class="w-486px transform" alt="" data-v-1d039d3b="">
<img src="/jinqiao/c1.5fcf15dc.svg" lt-xl="hidden" class="w-486px transform" alt="" data-v-1d039d3b="">
<table class="text-center text-5 w-1000px h-490px" lt-sm="text-3" lt-md="text-4" data-v-1d039d3b="">
<tbody>
<tr class="odd:bg-gray/10" data-v-1d039d3b="">
@@ -240,35 +295,35 @@ p{
<ul class="mx-auto mt-30 w-800px flex flex-col gap-8" lt-lg="w-80%" lt-md="w-90%" data-v-1d039d3b="">
<li class="flex items-start" data-v-1d039d3b="">
<div data-v-1d039d3b="">
<img src="https://www.xiaowei.run/_nuxt/1.f928972f.jpg" class="mx-4 h-28 w-28 flex-shrink-0 rounded-2 object-cover" lt-md="w-16 h-16" alt="" data-v-1d039d3b="">
<img src="/jinqiao/1.f928972f.jpg" class="mx-4 h-28 w-28 flex-shrink-0 rounded-2 object-cover" lt-md="w-16 h-16" alt="" data-v-1d039d3b="">
<p mt-1="" text-center="" text-4="" lt-md="transform scale-90" data-v-1d039d3b=""> 软件工程师 </p>
</div>
<p class="text w-60% rounded-1 bg-white p-2" data-v-1d039d3b=""> 我们做APP开发时需要针对不同型号的手机做大量的兼容性测试、功能测试、性能测试后才能上线之前这个过程耗时耗力。使用金桥投屏后可以在一台电脑上控制多台不同型号的手机进行批量操作大大提高了我们APP的测试效率缩短了我们的开发时间。 </p>
</li>
<li class="flex flex-row-reverse items-start" data-v-1d039d3b="">
<div data-v-1d039d3b="">
<img src="https://www.xiaowei.run/_nuxt/2.8c8fe8f3.jpg" class="mx-4 h-28 w-28 flex-shrink-0 rounded-2 object-cover" lt-md="w-16 h-16" alt="" data-v-1d039d3b="">
<img src="/jinqiao/2.8c8fe8f3.jpg" class="mx-4 h-28 w-28 flex-shrink-0 rounded-2 object-cover" lt-md="w-16 h-16" alt="" data-v-1d039d3b="">
<p mt-1="" text-center="" text-4="" lt-md="transform scale-90" data-v-1d039d3b=""> 直播间运营经理 </p>
</div>
<p class="text self w-60% rounded-1 bg-#a3dbb1 p-2" data-v-1d039d3b=""> 我们做直播间的运营时,需要时刻做好场控,带动气氛,引导互动,提升人气。这些工作不仅费神更耗体力,几个小时下来,常常精疲力尽。使用金桥投屏后,这项工作变得简单轻松,一个人就可以轻松完成之前一个团队才能完成的工作。 </p>
</li>
<li class="flex items-start" data-v-1d039d3b="">
<div data-v-1d039d3b="">
<img src="https://www.xiaowei.run/_nuxt/3.4ee88369.jpg" class="mx-4 h-28 w-28 flex-shrink-0 rounded-2 object-cover" lt-md="w-16 h-16" alt="" data-v-1d039d3b="">
<img src="/jinqiao/3.4ee88369.jpg" class="mx-4 h-28 w-28 flex-shrink-0 rounded-2 object-cover" lt-md="w-16 h-16" alt="" data-v-1d039d3b="">
<p mt-1="" text-center="" text-4="" lt-md="transform scale-90" data-v-1d039d3b=""> 私域营销总监 </p>
</div>
<p class="text w-60% rounded-1 bg-white p-2" data-v-1d039d3b=""> 我们做私域用户营销时,需要频繁的在大量的手机和社交账号之间切换,令人抓狂。直到使用金桥投屏后,只需要把手机插上电脑,再多的账号也不需要切换了,都可以在一台电脑上操作了,还可以用复制粘贴功能大幅提高效率,真的太棒了。 </p>
</li>
<li class="flex flex-row-reverse items-start" data-v-1d039d3b="">
<div data-v-1d039d3b="">
<img src="https://www.xiaowei.run/_nuxt/4.cec1fce8.jpg" class="mx-4 h-28 w-28 flex-shrink-0 rounded-2 object-cover" lt-md="w-16 h-16" alt="" data-v-1d039d3b="">
<img src="/jinqiao/4.cec1fce8.jpg" class="mx-4 h-28 w-28 flex-shrink-0 rounded-2 object-cover" lt-md="w-16 h-16" alt="" data-v-1d039d3b="">
<p mt-1="" text-center="" text-4="" lt-md="transform scale-90" data-v-1d039d3b=""> 电商客服主管 </p>
</div>
<p class="self text w-60% rounded-1 bg-#a3dbb1 p-2" data-v-1d039d3b=""> 我们做电商运营时,常常需要在多个平台上同时管理多个店铺,操作繁琐、效率低下、耗费大量人力。使用金桥投屏后,可以让一名客服人员在一台电脑上,同时管理多个手机上的多个店铺,大大提高了我们的服务效率。 </p>
</li>
<li class="flex items-start" data-v-1d039d3b="">
<div data-v-1d039d3b="">
<img src="https://www.xiaowei.run/_nuxt/5.dce34d6e.jpg" class="mx-4 h-28 w-28 flex-shrink-0 rounded-2 object-cover" lt-md="w-16 h-16" alt="" data-v-1d039d3b="">
<img src="/jinqiao/5.dce34d6e.jpg" class="mx-4 h-28 w-28 flex-shrink-0 rounded-2 object-cover" lt-md="w-16 h-16" alt="" data-v-1d039d3b="">
<p mt-1="" text-center="" text-4="" lt-md="transform scale-90" data-v-1d039d3b=""> 游戏工作室老板 </p>
</div>
<p class="text w-60% rounded-1 bg-white p-2" data-v-1d039d3b=""> 以前我们玩游戏时都是把游戏运行在安卓模拟器中,不仅操作起来不方便,封号还特别严重。自从使用金桥投屏后,我们直接把手机插到电脑上,就可以方便的在多台手机上玩游戏了。不仅批量操作起来方便很多,还解决了模拟器封号的问题。 </p>
@@ -282,7 +337,7 @@ p{
</div>
<ul class="businessCooperation mx-auto w-910px mt-20" lt-md="w-340px!" data-v-1d039d3b="">
<li class="item flex items-center transform translate-x-20" lt-md="translate-x-0" data-v-1d039d3b="">
<img src="https://www.xiaowei.run/_nuxt/cooperate1.bec6e117.png" lt-md="hidden" class="w-500px" alt="" data-v-1d039d3b="">
<img src="/jinqiao/cooperate1.bec6e117.png" lt-md="hidden" class="w-500px" alt="" data-v-1d039d3b="">
<div class="transform translate-y--10" data-v-1d039d3b="">
<p class="title text-7 mb-6" lt-md="text-center" data-v-1d039d3b="">CPS代理推广</p>
<ul class="list w-82" data-v-1d039d3b="">
@@ -311,7 +366,7 @@ p{
</div>
</li>
<li class="item flex items-center transform translate-x--20" lt-md="translate-x-0 mt-10" data-v-1d039d3b="">
<img src="https://www.xiaowei.run/_nuxt/cooperate2.9f3df39f.png" lt-md="hidden" class="w-500px" alt="" data-v-1d039d3b="">
<img src="/jinqiao/cooperate2.9f3df39f.png" lt-md="hidden" class="w-500px" alt="" data-v-1d039d3b="">
<div class="transform translate-y--10" data-v-1d039d3b="">
<p class="title text-7 mb-6" lt-md="text-center" data-v-1d039d3b="">OEM定制服务</p>
<ul class="list w-82" data-v-1d039d3b="">
@@ -344,4 +399,140 @@ p{
</div>
</div>
<div id="alipay"></div>
<div class="modal fade" id="staticBackdrop" style="z-index:100000;" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">微信扫码支付</h5>
</div>
<div class="modal-body" id="qrcode_s" style="margin: 0 auto;">
</div>
<div class="modal-footer">
<button type="button" v-on:click="verifyed" class="btn btn-primary">我已付款</button>
</div>
</div>
</div>
</div>
</div>
<script src="~/js/vue.js"></script>
<script>
var app = new Vue({
el: '#product-jinqiao',
data: {
balance: 0,
package_list:[],
order:{
pay_type:10,
package_id:0,
price:0,
},
},
computed: {
},
watch: {
},
created: function () {
},
methods: {
get_init() {
let data = {
cookie:document.cookie,
}
var url = 'https://php-api.juip.com/jinqiao/index/get_init';
var that = this;
$.ajax({
type: 'POST',
url: url,
dataType: "json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
if (res.code == 1) {
that.balance = res.data.balance;
that.package_list = res.data.package_list;
$('#buy').modal('show');
}
}
});
},
package_select(item) {
for (var i in this.package_list) {
$('.package'+this.package_list[i].id).addClass('btn-default');
$('.package'+this.package_list[i].id).removeClass('btn-new');
}
$('.package'+item.id).removeClass('btn-default');
$('.package'+item.id).addClass('btn-new');
this.order.price = item.price
this.order.package_id = item.id
},
pay() {
let data = {
cookie:document.cookie,
data:this.order
}
if(this.order.package_id == 0) {
alert("请选择套餐!");
return;
}
var url = 'https://php-api.juip.com/jinqiao/index/create_order';
var that = this;
$.ajax({
type: 'POST',
url: url,
dataType: "json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
success: function (res) {
if (res.code == 1) {
$('#buy').modal('hide');
alert(res.msg);
window.location.href = "/user/jinqiao";
} else if (res.code == 2) {
document.getElementById("alipay").innerHTML=res.data;
document.forms['alipaysubmit'].submit();
$('#buy').modal('hide');
} else if (res.code == 3) {
$("#qrcode_s").html('');
new QRCode(document.getElementById("qrcode_s"), {
text: res.data,
width : 300,
height : 300
});
$('#staticBackdrop').modal('show');
$('#buy').modal('hide');
} else {
$('#buy').modal('hide');
alert(res.msg);
}
}
});
},
verifyed() {
$('#staticBackdrop').modal('hide');
window.location.href = "/user/jinqiao";
},
}
})
</script>

View File

@@ -161,25 +161,33 @@
<!-- 弹窗导航 -->
<div class="mask">
<ul class="layNav">
<li><a href="/"><p>首页</p></a></li>
<li><a href="/product/index"><p>产品购买 <span style="color: red;">活动</span></p></a> </li>
<li><a asp-action="index" asp-controller="LineList" asp-route-Catalog="1"><p>线路表</p></a> </li>
<li><a asp-action="soft" asp-controller="product"><p>软件下载</p></a> </li>
<li><a asp-action="index" asp-controller="article"><p>教程&帮助</p></a></li>
<li><a href="/product/routeros"><p>软路由购买</p></a></li>
<li><a href="http://vps.juip.com" style="color: red;"><p>动态VPS</p></a></li>
@* <li><a asp-action="taobao" asp-controller="article">淘宝充值活动</a></li> *@
<li><a href="/"><p style="font-size: 0.4rem;">首页</p></a></li>
<li class="dropdown" >
<span style="color: white;background-color: black;border: none;font-size: 0.4rem;width: 100%;text-align: center;" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
产品购买
</span>
<ul class="dropdown-menu" style="width:100%" aria-labelledby="dropdownMenu1">
<li style="border-bottom: 1px solid black;"><a href="/product/index">动静态IP</a></li>
<li style="border-bottom: 1px solid black;"><a href="/product/http">HTTP</a></li>
<li style="border-bottom: 1px solid black;"><a href="/product/jinqiao">安卓投屏</a></li>
<li style="border-bottom: 1px solid black;"><a href="/product/routeros">软路由购买</a></li>
<li style="border-bottom: 1px solid black;"><a href="http://vps.juip.com">动态VPS</a></li>
</ul>
</li>
<li><a asp-action="index" asp-controller="LineList" asp-route-Catalog="1"><p style="font-size: 0.4rem;">线路表</p></a> </li>
<li><a asp-action="soft" asp-controller="product"><p style="font-size: 0.4rem;">软件下载</p></a> </li>
<li><a asp-action="index" asp-controller="article"><p style="font-size: 0.4rem;">教程&帮助</p></a></li>
@if (user != null)
{
<li><a asp-action="index" asp-controller="user"><p>个人中心</p></a></li>
<li><a asp-action="LoginOut" asp-controller="user"><p>退出</p></a></li>
<li><a asp-action="index" asp-controller="user"><p style="font-size: 0.4rem;">个人中心</p></a></li>
<li><a asp-action="LoginOut" asp-controller="user"><p style="font-size: 0.4rem;">退出</p></a></li>
}
else
{
<li><a asp-action="WebLogin" asp-controller="user"><p>登录</p></a></li>
<li><a asp-action="WebLogin" asp-controller="user"><p style="font-size: 0.4rem;">登录</p></a></li>
}
<li><p class="btnClose"><img src="~/m/img/close.png" ></p></li>
<li><p class="btnClose" style="font-size: 0.4rem;"><img src="~/m/img/close.png" ></p></li>
</ul>
</div>
<div class="mynav">

View File

@@ -48,24 +48,33 @@
<!-- 弹窗导航 -->
<div class="mask">
<ul class="layNav">
<li><a href="/"><p>首页</p></a></li>
<li><a href="/product/index"><p>产品购买 <span style="color: red;">活动</span></p></a> </li>
<li><a asp-action="index" asp-controller="LineList" asp-route-Catalog="1"><p>线路表</p></a> </li>
<li><a asp-action="soft" asp-controller="product"><p>软件下载</p></a> </li>
<li><a asp-action="index" asp-controller="article"><p>教程&帮助</p></a></li>
<li><a href="/product/routeros"><p>软路由购买</p></a></li>
<li><a href="http://vps.juip.com" style="color: red;"><p>动态VPS</p></a></li>
<li><a href="/"><p style="font-size: 0.4rem;">首页</p></a></li>
<li class="dropdown" >
<span style="color: white;background-color: black;border: none;font-size: 0.4rem;width: 100%;text-align: center;" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
产品购买
</span>
<ul class="dropdown-menu" style="width:100%" aria-labelledby="dropdownMenu1">
<li style="border-bottom: 1px solid black;"><a href="/product/index">动静态IP</a></li>
<li style="border-bottom: 1px solid black;"><a href="/product/http">HTTP</a></li>
<li style="border-bottom: 1px solid black;"><a href="/product/jinqiao">安卓投屏</a></li>
<li style="border-bottom: 1px solid black;"><a href="/product/routeros">软路由购买</a></li>
<li style="border-bottom: 1px solid black;"><a href="http://vps.juip.com">动态VPS</a></li>
</ul>
</li>
<li><a asp-action="index" asp-controller="LineList" asp-route-Catalog="1"><p style="font-size: 0.4rem;">线路表</p></a> </li>
<li><a asp-action="soft" asp-controller="product"><p style="font-size: 0.4rem;">软件下载</p></a> </li>
<li><a asp-action="index" asp-controller="article"><p style="font-size: 0.4rem;">教程&帮助</p></a></li>
@if (user != null)
{
<li><a asp-action="index" asp-controller="user"><p>个人中心</p></a></li>
<li><a asp-action="LoginOut" asp-controller="user"><p>退出</p></a></li>
<li><a asp-action="index" asp-controller="user"><p style="font-size: 0.4rem;">个人中心</p></a></li>
<li><a asp-action="LoginOut" asp-controller="user"><p style="font-size: 0.4rem;">退出</p></a></li>
}
else
{
<li><a asp-action="WebLogin" asp-controller="user"><p>登录</p></a></li>
<li><a asp-action="WebLogin" asp-controller="user"><p style="font-size: 0.4rem;">登录</p></a></li>
}
<li><p class="btnClose"><img src="~/m/img/close.png" ></p></li>
<li><p class="btnClose" style="font-size: 0.4rem;"><img src="~/m/img/close.png" ></p></li>
</ul>
</div>
<div class="mynav">

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>