From 2b7a4996e6481cc3a79ed6c821c1e7621ff2c529 Mon Sep 17 00:00:00 2001
From: wmp <17516219072@163.com>
Date: Sat, 18 Oct 2025 20:15:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=9F=AD=E6=95=88=E6=97=A0?=
 =?UTF-8?q?=E9=99=90=E9=87=8F=E7=99=BD=E5=90=8D=E5=8D=95=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Host/Controllers/ProductController.cs  |   1 +
 Host/Controllers/UserController.cs     |   8 +
 Host/Views/Product/Http.cshtml         |  51 +++-
 Host/Views/Shared/_UserLayout.cshtml   |   5 +
 Host/Views/User/HttpPackageList.cshtml | 210 ++++++++++-------
 Host/Views/User/HttpWhiteIpSU.cshtml   | 312 +++++++++++++++++++++++++
 6 files changed, 490 insertions(+), 97 deletions(-)
 create mode 100644 Host/Views/User/HttpWhiteIpSU.cshtml

diff --git a/Host/Controllers/ProductController.cs b/Host/Controllers/ProductController.cs
index 294f862..ed14fcb 100644
--- a/Host/Controllers/ProductController.cs
+++ b/Host/Controllers/ProductController.cs
@@ -825,6 +825,7 @@ namespace Home.Controllers
         [HttpGet]
         public async Task<IActionResult> Http()
         {
+            ViewData["BaseUrl"] = m_Configuration["BaseInfoUrl"];
             return View();
         }
         [HttpGet]
diff --git a/Host/Controllers/UserController.cs b/Host/Controllers/UserController.cs
index 5d337f6..e04e1f0 100644
--- a/Host/Controllers/UserController.cs
+++ b/Host/Controllers/UserController.cs
@@ -640,6 +640,7 @@ namespace Home.Controllers
         public IActionResult HttpPackageList()
         {
             var userId = this.Request.GetUserInfo().UserId;
+            ViewData["BaseUrl"] = m_Configuration["BaseInfoUrl"];
             return View();
         }
         [HttpGet]
@@ -664,6 +665,13 @@ namespace Home.Controllers
             return View();
         }
 
+        [HttpGet]
+        [UserAuth]
+        public IActionResult HttpWhiteIpSU()
+        {
+            ViewData["BaseUrl"] = m_Configuration["BaseInfoUrl"];
+            return View();
+        }
 
         /// <summary>
         /// 发送手机验证码
diff --git a/Host/Views/Product/Http.cshtml b/Host/Views/Product/Http.cshtml
index cd54c2e..dfd2028 100644
--- a/Host/Views/Product/Http.cshtml
+++ b/Host/Views/Product/Http.cshtml
@@ -221,6 +221,26 @@
 											</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="d-flex align-items-center" style="gap: 15px;">
+                                                    <div class="btn-group" role="group">
+                                                        <button type="button" v-on:click="dxwxl_whitelist_reduce()" :disabled="dxwxl_data.maxWhitelist <= 1" class="btn btn-new">-</button>
+                                                        <button type="button" class="btn btn-default">{{ dxwxl_data.maxWhitelist }}</button>
+                                                        <button type="button" v-on:click="dxwxl_whitelist_add()" :disabled="dxwxl_data.maxWhitelist >= 20" class="btn btn-new">+</button>
+                                                    </div>
+                                                    <span style="margin-left: 20px;"> 
+                                                       您的白名单上限{{ dxwxl_data.maxWhitelist }}个，
+                                                       <span v-if="dxwxl_data.maxWhitelist === 1">价格<span class="text-danger">无折扣</span></span>
+                                                       <span v-else-if="dxwxl_data.maxWhitelist <= 5" class="text-danger">{{11 - dxwxl_data.maxWhitelist}}折</span>
+                                                       <span v-else class="text-danger">6折</span>
+                                                    </span>
+                                                </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">
@@ -700,7 +720,7 @@
 <script src="~/js/vue.js"></script>
 
 <script type="text/javascript">
-
+    var baseUrl = '@ViewData["BaseUrl"]';
 var select_ip_num = 0;
 
 $(document).on("ready", function(e) {
@@ -806,6 +826,7 @@ $(document).on("ready", function(e) {
                 durationType:5,
                 periodType:1060,//必填，周期类型，1060-小时，1-按天，7-按周，30-按月，90-按季度
                 periodAmount:1,//必填，购买周期，根据periodType来，例如按天，就是N天，按周就是N周
+                maxWhitelist:1,//选填，变更无限量白名单数量，不填写会默认使用当前白名单数量
             },
             dxbt_data:{//短效包天
                 durationType:5,//必填，有效时长，5-1至5分钟，25-5至25分钟，180-25至180分钟，360-3至6小时
@@ -927,7 +948,7 @@ $(document).on("ready", function(e) {
                 var that = this
                 $.ajax({
                     type: 'POST',
-                    url: 'https://php-api.juip.com/http/product/city',
+                    url: `${baseUrl}/http/product/city`,
                     dataType: "json",
                     async:false,
                     data:this.game,
@@ -941,7 +962,7 @@ $(document).on("ready", function(e) {
                 var that = this
                 $.ajax({
                     type: 'POST',
-                    url: 'https://php-api.juip.com/http/product/game',
+                    url: `${baseUrl}/http/product/game`,
                     dataType: "json",
                     async:false,
                     data:this.game,
@@ -976,7 +997,7 @@ $(document).on("ready", function(e) {
                 var that = this
                 $.ajax({
                     type: 'POST',
-                    url: 'https://php-api.juip.com/http/product/linecount',
+                    url: `${baseUrl}/http/product/linecount`,
                     dataType: "json",
                     async:false,
                     data:this.game,
@@ -1026,6 +1047,18 @@ $(document).on("ready", function(e) {
                 this.dxwxl_data.periodAmount++;
                 this.calc_price();
             },
+            //短效无限量购买白名单修改
+            dxwxl_whitelist_reduce(){
+                if (this.dxwxl_data.maxWhitelist > 1) {
+                    this.dxwxl_data.maxWhitelist--;
+                    this.calc_price();
+                }
+            },
+            //短效无限量购买白名单修改
+            dxwxl_whitelist_add(){
+                this.dxwxl_data.maxWhitelist++;
+                this.calc_price();
+            },
             //短效包天购买时长修改
             dxbt_gmsc_reduce(){
                 if (this.dxbt_data.periodAmount > 1) {
@@ -1115,7 +1148,7 @@ $(document).on("ready", function(e) {
                
                 $.ajax({
                     type: 'POST',
-                    url: 'https://php-api.juip.com/http/order/create_order',
+                    url: `${baseUrl}/http/order/create_order`,
                     dataType: "json",
                     contentType: "application/json",
                     data: JSON.stringify(data),
@@ -1159,7 +1192,7 @@ $(document).on("ready", function(e) {
                
                 $.ajax({
                     type: 'POST',
-                    url: 'https://php-api.juip.com/http/user/get_balance',
+                    url: `${baseUrl}/http/user/get_balance`,
                     dataType: "json",
                     contentType: "application/json",
                     data: JSON.stringify(data),
@@ -1199,7 +1232,7 @@ $(document).on("ready", function(e) {
                 };
                 $.ajax({
                     type: 'POST',
-                    url: 'https://php-api.juip.com/http/product/calc_price',
+                    url: `${baseUrl}/http/product/calc_price`,
                     dataType: "json",
                     async:false,
                     data: this.order_info,
@@ -1209,7 +1242,9 @@ $(document).on("ready", function(e) {
                 });
                 switch(this.order_info.order_type) {
                     case 2:
-                        this.order_info.money = this.order_info.data.periodAmount * price_info.price;
+                        const whitelist = this.order_info.data.maxWhitelist
+                        const discount = Math.max(.6, 1 - .1 * (whitelist - 1))
+                        this.order_info.money = this.order_info.data.periodAmount * whitelist * discount * price_info.price;
                     break;
                     case 3:
                         this.order_info.money = this.order_info.data.periodAmount * price_info.price * this.order_info.data.ipAmount;
diff --git a/Host/Views/Shared/_UserLayout.cshtml b/Host/Views/Shared/_UserLayout.cshtml
index da656db..e9a7eb6 100644
--- a/Host/Views/Shared/_UserLayout.cshtml
+++ b/Host/Views/Shared/_UserLayout.cshtml
@@ -234,6 +234,11 @@
                         白名单设置
                     </a>
                 </li>
+                <li>
+                    <a href="/user/httpwhiteipsu">
+                        白名单设置（短效无限量）
+                    </a>
+                </li>
             </ul>
         </li>
         
diff --git a/Host/Views/User/HttpPackageList.cshtml b/Host/Views/User/HttpPackageList.cshtml
index 1912fa9..1292433 100644
--- a/Host/Views/User/HttpPackageList.cshtml
+++ b/Host/Views/User/HttpPackageList.cshtml
@@ -1,4 +1,3 @@
-
 @{
     Layout = "_UserLayout";
 }
@@ -447,9 +446,17 @@
                     <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>
+                                <h5 class=" text-left">
+                                    <span style="margin-right:4px">价格：￥{{order_info.money}}</span>
+                                    <span style="font-size: 13px;font-weight: 400;color: #666666;">
+                                        无限量白名单上限：{{whitelist}}
+                                    </span>
+                                    <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>
@@ -462,50 +469,53 @@
 	</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,
+    var baseUrl = '@ViewData["BaseUrl"]';
+    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:{}
+            order_time_type: '天',
+            order_info: {
+                order_type: 2,//1:预储值、2：短效无限量、3：短效包天、4：短效包量、5：长效游戏
+                money: 1,
+                data: {}
             },
 
-            api_link:'',
-            api_link_item:{
-                num:1
+            api_link: '',
+            api_link_item: {
+                num: 1
             },
-            regions:[],
-            user_detail:{},
-	    },
-        created:function(){
-            this.get_package_list();
+            regions: [],
+            user_detail: {},
+            whitelist: 1,
         },
-	    methods:{
-            get_package_list(){
+        created: function () {
+            this.get_package_list();
+            this.get_whitelist_max();
+        },
+        methods: {
+            get_package_list() {
                 let data = {
-                    cookie:document.cookie,
+                    cookie: document.cookie,
                 }
-                var that = this; 
-               
+                var that = this;
+
                 $.ajax({
                     type: 'POST',
-                    url: 'https://php-api.juip.com/http/user/dx_package',
+                    url: `${baseUrl}/http/user/dx_package`,
                     dataType: "json",
                     contentType: "application/json",
                     data: JSON.stringify(data),
-                    beforeSend: function(xhr) {
+                    beforeSend: function (xhr) {
                         xhr.withCredentials = true;
                     },
                     crossDomain: true,
@@ -516,17 +526,17 @@
             },
             get_ip() {
                 let data = {
-                    cookie:document.cookie,
+                    cookie: document.cookie,
                 }
-                var that = this; 
-               
+                var that = this;
+
                 $.ajax({
                     type: 'POST',
-                    url: 'https://php-api.juip.com/http/user/get_user_token',
+                    url: `${baseUrl}/http/user/get_user_token`,
                     dataType: "json",
                     contentType: "application/json",
                     data: JSON.stringify(data),
-                    beforeSend: function(xhr) {
+                    beforeSend: function (xhr) {
                         xhr.withCredentials = true;
                     },
                     crossDomain: true,
@@ -536,23 +546,23 @@
                     }
                 });
             },
-            autowhiteip(){
+            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,
+                    cookie: document.cookie,
                 }
-                var that = this; 
-               
+                var that = this;
+
                 $.ajax({
                     type: 'POST',
-                    url: 'https://php-api.juip.com/http/user/dx_order',
+                    url: `${baseUrl}/http/user/dx_order`,
                     dataType: "json",
                     contentType: "application/json",
                     data: JSON.stringify(data),
-                    beforeSend: function(xhr) {
+                    beforeSend: function (xhr) {
                         xhr.withCredentials = true;
                     },
                     crossDomain: true,
@@ -562,6 +572,8 @@
                 });
             },
             rebuy(r) {
+                console.log(r);
+
                 this.rebuy_data.title = r.name;
                 this.rebuy_data.packId = r.id;
                 this.rebuy_data.packType = r.planType;
@@ -577,52 +589,53 @@
                 this.calc_price();
 
             },
-            set_btn_checked(id_f,id,text){
+            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");
+                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()  {
-                
+                $("#" + id_f + id).removeClass("btn-default");
+                $("#" + id_f + id).addClass("btn-new");
+
+                let _this = this
+                setTimeout(function () {
+
                     _this.calc_price()
-                
+
                 }, 500);
             },
-            gmsc_add(){
+            gmsc_add() {
                 this.rebuy_data.periodAmount++;
                 this.calc_price();
             },
             //短效包天购买时长修改
-            gmsc_reduce(){
+            gmsc_reduce() {
                 if (this.rebuy_data.periodAmount > 1) {
                     this.rebuy_data.periodAmount--;
                     this.calc_price();
                 }
             },
-            pay(){
+            pay() {
                 let that = this;
                 this.order_info.data = this.rebuy_data;
-                
+                this.order_info.renew = 1;
+
                 let data = {
-                    cookie:document.cookie,
+                    cookie: document.cookie,
                     order_info: this.order_info
                 }
-               
+
                 $.ajax({
                     type: 'POST',
-                    url: 'https://php-api.juip.com/http/order/rebuy_order',
+                    url: `${baseUrl}/http/order/rebuy_order`,
                     dataType: "json",
                     contentType: "application/json",
                     data: JSON.stringify(data),
-                    beforeSend: function(xhr) {
+                    beforeSend: function (xhr) {
                         xhr.withCredentials = true;
                     },
                     crossDomain: true,
@@ -631,19 +644,19 @@
                             $('#myModal').modal('hide');
                             alert(res.msg);
                             that.get_package_list();
-                        } 
+                        }
                     }
                 });
             },
 
-            chaneg_type(r){
+            chaneg_type(r) {
                 var that = this;
-                this.pakage_list.forEach(function(item,index,arr){
+                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;
-                        
+
                     }
 
                 })
@@ -658,25 +671,25 @@
                     $("#qc").show();
                     $("#at").hide();
                     that.api_link_item.distinct = 0;
-                }  
+                }
                 if (that.api_link_item.pt == 21) {
                     $("#gt").show();
                 }
             },
-            qqms(i){
+            qqms(i) {
                 if (i == 1) {
                     $("#sp").hide();
                 } else {
                     $("#sp").show();
                 }
             },
-            create_api_link(){
+            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 += key + "=" + this.api_link_item[key] + '&';
                     }
                 }
                 this.api_link += 'regions=' + regions_list;
@@ -684,18 +697,18 @@
             // 全选按钮点击事件处理程序
             selectAll() {
                 var checkboxes = document.querySelectorAll('input[name="regions"]'); // 获取所有复选框元素
-                
+
                 for (var i = 0; i < checkboxes.length; i++) {
-                    checkboxes[i].checked=true; // 将每个复选框的 checked 属性设置为 true
+                    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 属性
+                    checkboxes[i].checked = false; // 移除每个复选框的 checked 属性
                 }
                 this.regions = [];
             },
@@ -716,30 +729,49 @@
                 this.order_info.data = this.rebuy_data;
 
                 var price_info = {
-                    'ipAmount':0,
-                    'price':0,
+                    'ipAmount': 0,
+                    'price': 0,
                 };
                 $.ajax({
                     type: 'POST',
-                    url: 'https://php-api.juip.com/http/product/calc_price',
+                    url: `${baseUrl}/http/product/calc_price`,
                     dataType: "json",
-                    async:false,
+                    async: false,
                     data: this.order_info,
                     success: function (res) {
                         price_info = res
                     }
                 });
-                switch(this.order_info.order_type) {
+                switch (this.order_info.order_type) {
                     case 2:
-                        this.order_info.money = this.order_info.data.periodAmount * price_info.price;
-                    break;
+                        const whitelist = this.whitelist
+                        const discount = Math.max(.6, 1 - .1 * (whitelist - 1))
+                        this.order_info.money = this.order_info.data.periodAmount * whitelist * discount * price_info.price;
+                        break;
                     case 3:
                         this.order_info.money = this.order_info.data.periodAmount * price_info.price * this.order_info.data.ipAmount;
-                    break;
+                        break;
                 }
 
                 this.order_info.money = this.order_info.money.toFixed(2);
+            },
+
+            // 查询短效无限量白名单数量
+            get_whitelist_max() {
+                const data = {
+                    cookie: document.cookie,
+                }
+
+                $.ajax({
+                    type: 'POST',
+                    url: `${baseUrl}/http/user/white_limit_get_su`,
+                    data: data,
+                    dataType: "json",
+                    success: (res) => {
+                        this.whitelist = res.data;
+                    }
+                });
             }
-	    }
-	});
+        }
+    });
 </script>
\ No newline at end of file
diff --git a/Host/Views/User/HttpWhiteIpSU.cshtml b/Host/Views/User/HttpWhiteIpSU.cshtml
new file mode 100644
index 0000000..c41fdca
--- /dev/null
+++ b/Host/Views/User/HttpWhiteIpSU.cshtml
@@ -0,0 +1,312 @@
+@{
+    Layout = "_UserLayout";
+}
+
+<div id="app">
+    <div class="boxes margin-top-5 clearfix">
+        <div style="display: flex; align-items: center;">
+            <input v-model="ip" type="text" style="width: 350px; margin-right: 20px;" placeholder="请输入ip地址并点击保存白名单" />
+            <button v-on:click="set_ip()" type="button" class="btn btn-primary"
+                style="outline: none; box-shadow: none;">保存</button>
+        </div>
+        <div class="margin-top-30">
+            <h5>当前白名单列表
+                <span class="text-warning">当前白名单数量：{{ whiteLimit }} 个</span>
+                <button type="button" class="btn btn-new btn-xs" data-toggle="modal" data-target="#whitelistModal"
+                    style="outline: none; box-shadow: none; margin-left: 60px;" v-on:click="get_package_details()">
+                    调整白名单上限
+                </button>
+            </h5>
+
+            <div class="modal fade" id="whitelistModal" tabindex="-1" role="dialog">
+                <div class="modal-dialog" role="document">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title">调整白名单上限</h5>
+                            <button type="button" class="close" data-dismiss="modal">
+                                <span>&times;</span>
+                            </button>
+                        </div>
+                        <div class="d-flex align-items-center" style="gap: 15px;">
+                            <div class="modal-body btn-group" role="group">
+                                <button type="button" class="btn btn-new btn-xs" v-on:click="decreaseLimit"
+                                    style=" outline: none; box-shadow: none;" :disabled="tempWhiteLimit <= 1">-</button>
+                                <span class="btn btn-default btn-xs">{{ tempWhiteLimit }}</span>
+                                <button type="button" class="btn btn-new btn-xs" v-on:click="increaseLimit"
+                                    style="outline: none; box-shadow: none;" :disabled="tempWhiteLimit >= 20">+</button>
+                            </div>
+                            <div style="margin-left: 2rem; margin-bottom: 1rem">
+                                <span v-if="tempDiscount === 10">价格<span class="text-danger">无折扣</span></span>
+                                <span v-else class="text-danger">
+                                    当前已应用 {{ tempDiscount*10 }}% 折扣
+                                </span>
+                            </div>
+                            <div style="margin-left: 2rem; margin-bottom: 1rem">
+                                调整后到期时间：{{ new Date(newExpre).toLocaleString() }}
+                            </div>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                            <button type="button" class="btn btn-primary" v-on:click="set_white_limit()">确定</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-12">
+                <table class="products-table responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
+                    <thead>
+                        <tr>
+                            <th>IP地址</th>
+                            <th>设置时间</th>
+                            <th>锁定状态</th>
+                            <th>操作</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="item in ip_list">
+                            <td style="display:none;">{{item.id}}</td>
+                            <td>{{item.ip}}</td>
+                            <td>{{item.createTime}}</td>
+                            <td>{{item.isLocked}}</td>
+                            <td>
+                                <a v-if="item.isLocked=='未锁定'" v-on:click="lock_ip(item.id,1)"
+                                    class="btn btn-new">锁定</a>
+                                <a v-if="item.isLocked=='已锁定'" v-on:click="lock_ip(item.id,0)"
+                                    class="btn btn-new">解锁</a>
+                                <a class="btn btn-danger" v-on:click="delete_ip(item.id)">删除</a>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    var baseUrl = '@ViewData["BaseUrl"]';
+    var vm = new Vue({
+        el: '#app',
+        data: {
+            ip_list: [],
+            ip: '',
+            whiteLimit: 1, //获取当前白名单的数量
+            tempWhiteLimit: 1, //模态框中白名单的数量
+            tempDiscount: 10,
+            detail: {},
+            newExpre: 0,
+        },
+        created: function () {
+            this.get_list()
+            this.get_white_limit()
+            this.get_package_details()
+        },
+        methods: {
+            get_list() {
+                let data = {
+                    cookie: document.cookie,
+                }
+                var that = this;
+
+                $.ajax({
+                    type: 'POST',
+                    url: `${baseUrl}/http/user/white_list_su`,
+                    dataType: "json",
+                    contentType: "application/json",
+                    data: JSON.stringify(data),
+                    beforeSend: function (xhr) {
+                        xhr.withCredentials = true;
+                    },
+                    crossDomain: true,
+                    success: function (res) {
+                        that.ip_list = res.data
+                    }
+                });
+            },
+            set_ip() {
+                let data = {
+                    cookie: document.cookie,
+                    data: { ip: this.ip }
+                }
+                var that = this;
+
+                $.ajax({
+                    type: 'POST',
+                    url: `${baseUrl}/http/user/create_white_ip_su`,
+                    dataType: "json",
+                    contentType: "application/json",
+                    data: JSON.stringify(data),
+                    beforeSend: function (xhr) {
+                        xhr.withCredentials = true;
+                    },
+                    crossDomain: true,
+                    success: function (res) {
+                        that.get_list()
+                    }
+                });
+            },
+            lock_ip(id, status) {
+                var lock_ip = {};
+                lock_ip.id = id;
+                lock_ip.lock = status;
+                let dataa = {
+                    cookie: document.cookie,
+                    data: lock_ip
+                }
+                var that = this;
+
+                $.ajax({
+                    type: 'POST',
+                    url: `${baseUrl}/http/user/lock_ip_su`,
+                    dataType: "json",
+                    contentType: "application/json",
+                    data: JSON.stringify(dataa),
+                    beforeSend: function (xhr) {
+                        xhr.withCredentials = true;
+                    },
+                    crossDomain: true,
+                    success: function (res) {
+                        that.get_list()
+                    }
+                });
+            },
+            delete_ip(id) {
+                var dalete_ip = {};
+                dalete_ip.id = id;
+                let dataa = {
+                    cookie: document.cookie,
+                    data: dalete_ip
+                }
+                var that = this;
+
+                $.ajax({
+                    type: 'POST',
+                    url: `${baseUrl}/http/user/delete_ip_su`,
+                    dataType: "json",
+                    contentType: "application/json",
+                    data: JSON.stringify(dataa),
+                    beforeSend: function (xhr) {
+                        xhr.withCredentials = true;
+                    },
+                    crossDomain: true,
+                    success: function (res) {
+                        that.get_list()
+                    }
+                });
+            },
+            // 添加白名单数量
+            setTempWhiteLimit(value) {
+                this.tempWhiteLimit = Math.min(20, value)
+                this.tempWhiteLimit = Math.max(1, value)
+                this.tempDiscount = Math.max(6, 11 - value)
+
+                this.newExpre = this.calc_remain(this.detail.expireTime, this.whiteLimit, this.tempWhiteLimit)
+            },
+            increaseLimit() {
+                this.setTempWhiteLimit(this.tempWhiteLimit + 1)
+            },
+            // 减少白名单数量
+            decreaseLimit() {
+                this.setTempWhiteLimit(this.tempWhiteLimit - 1)
+            },
+            //确定后把最新白名单数量调接口给后端
+            set_white_limit() {
+                let data = {
+                    cookie: document.cookie,
+                    data: { maxAmount: this.tempWhiteLimit }
+                }
+                var that = this;
+
+                $.ajax({
+                    type: 'POST',
+                    url: `${baseUrl}/http/user/white_limit_set_su`,
+                    dataType: "json",
+                    contentType: "application/json",
+                    data: JSON.stringify(data),
+                    beforeSend: function (xhr) {
+                        xhr.withCredentials = true;
+                    },
+                    crossDomain: true,
+                    success: function (res) {
+                        if (res.code > 0) {
+                            $('#whitelistModal').modal('hide');
+                            alert('白名单上限设置成功！');
+                        } else {
+                            alert('设置失败：' + (res.message || '未知错误'));
+                        }
+                    },
+                    error: function () {
+                        alert('设置失败，请重试！');
+                    }
+                });
+            },
+
+            // 获取白名单当前的数量
+            get_white_limit() {
+                $.ajax({
+                    type: 'POST',
+                    url: `${baseUrl}/http/user/white_limit_get_su`,
+                    dataType: "json",
+                    contentType: "application/json",
+                    data: JSON.stringify({
+                        cookie: document.cookie,
+                    }),
+                    beforeSend: function (xhr) {
+                        xhr.withCredentials = true;
+                    },
+                    crossDomain: true,
+                    success: (res) => {
+                        if (res.code > 0) {
+                            this.whiteLimit = res.data
+                            this.setTempWhiteLimit(res.data)
+                        }
+                    }
+                });
+            },
+
+            // 获取最新套餐详情
+            get_package_details() {
+                $.ajax({
+                    type: 'POST',
+                    url: `${baseUrl}/http/user/get_unlimited_available`,
+                    dataType: "json",
+                    contentType: "application/json",
+                    data: JSON.stringify({
+                        cookie: document.cookie,
+                    }),
+                    beforeSend: function (xhr) {
+                        xhr.withCredentials = true;
+                    },
+                    crossDomain: true,
+                    success: (res) => {
+                        if (res.code < 0) alert('获取套餐信息失败')
+                        this.detail = res.data
+                        this.setTempWhiteLimit(this.tempWhiteLimit)
+                    }
+                });
+            },
+
+            // 计算修改白名单上限后的剩余时间
+            calc_remain(expire, maxWhitelist, newMaxWhitelist) {
+
+                // 套餐剩余秒数
+                const now = Math.floor(Date.now() / 1000)
+                const prev = expire ?? now
+                const remain = prev - now
+
+                // 白名单比值，时间份数
+                const multiple = maxWhitelist / newMaxWhitelist
+
+                // 折扣比值，新折扣作为基准
+                const oldDiscount = Math.max(.6, 1 - .1 * (maxWhitelist - 1))
+                const newDiscount = Math.max(.6, 1 - .1 * (newMaxWhitelist - 1))
+                const offset = oldDiscount / newDiscount
+
+                // 手续费，固定 1%
+                const fee = 99 / 100
+
+                // 返回新到期时间
+                return Math.floor(remain * multiple * offset * fee + now) * 1000
+            }
+        }
+    });
+</script>
\ No newline at end of file