From a2d35b52a6d3f73a21e9a928e3e4da11a69f4207 Mon Sep 17 00:00:00 2001
From: bobi <bobi1234@foxmail.com>
Date: Sat, 12 Oct 2019 12:43:16 +0800
Subject: [PATCH] =?UTF-8?q?add:=E7=9A=AE=E8=82=A4=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                         | 16 ++---
 js/okadmin.js                      |  7 +++
 lib/layui/lay/okmodules/okLayer.js | 36 +++++------
 lib/layui/lay/okmodules/okUtils.js | 26 ++++++++
 pages/system/alertSkin.html        | 97 ++++++++++++++++++++++++++++++
 5 files changed, 157 insertions(+), 25 deletions(-)
 create mode 100644 pages/system/alertSkin.html

diff --git a/index.html b/index.html
index e9c056f..8eb6c33 100644
--- a/index.html
+++ b/index.html
@@ -19,13 +19,14 @@
                             <i class="layui-icon layui-icon-shrink-right"></i>
                         </a>
                     </li>
-
-<!--                    <li class="ok-nav-item ok-hide-md">-->
-<!--                        &lt;!&ndash; 天气信息 &ndash;&gt;-->
-<!--                        <div class="weather-ok">-->
-<!--                            <iframe frameborder="0" scrolling="no" class="iframe-style" src="pages/weather.html" frameborder="0"></iframe>-->
-<!--                        </div>-->
-<!--                    </li>-->
+                    <!--天气信息-->
+                    <!--
+                    <li class="ok-nav-item ok-hide-md">
+                        <div class="weather-ok">
+                            <iframe frameborder="0" scrolling="no" class="iframe-style" src="pages/weather.html" frameborder="0"></iframe>
+                        </div>
+                    </li>
+                     -->
                 </ul>
                 <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item ok-input-search">
@@ -65,6 +66,7 @@
                             <dd><a lay-id="u-1" href="javascript:" data-url="pages/member/user.html">个人中心<span class="layui-badge-dot"></span></a></dd>
                             <dd><a lay-id="u-2" href="javascript:" data-url="pages/member/user-info.html">基本资料</a></dd>
                             <dd><a lay-id="u-3" href="javascript:" data-url="pages/member/user-pwd.html">安全设置</a></dd>
+                            <dd><a lay-id="u-4" href="javascript:" id="alertSkin">皮肤动画</a></dd>
                             <dd>
                                 <hr/>
                             </dd>
diff --git a/js/okadmin.js b/js/okadmin.js
index 1316778..92583ed 100644
--- a/js/okadmin.js
+++ b/js/okadmin.js
@@ -300,6 +300,13 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer"], function () {
         });
     });
 
+    /**
+     * 弹窗皮肤
+     */
+    $("#alertSkin").click(function () {
+        okLayer.open("皮肤动画", "pages/system/alertSkin.html", "50%", "45%", function (layero) {}, function () {});
+    });
+
     /**
      * 退出操作
      */
diff --git a/lib/layui/lay/okmodules/okLayer.js b/lib/layui/lay/okmodules/okLayer.js
index bdb5236..68f4f8e 100644
--- a/lib/layui/lay/okmodules/okLayer.js
+++ b/lib/layui/lay/okmodules/okLayer.js
@@ -1,13 +1,13 @@
 "use strict";
 layui.define(["layer"], function (exports) {
-    var okLayer = {
+    let okLayer = {
         /**
          * confirm()函数二次封装
          * @param content
          * @param yesFunction
          */
         confirm: function (content, yesFunction) {
-            var options = {skin: okLayer.skinChoose(), icon: 3, title: "提示", anim: okLayer.animChoose()};
+            let options = {skin: okLayer.skinChoose(), icon: 3, title: "提示", anim: okLayer.animChoose()};
             layer.confirm(content, options, yesFunction);
         },
         /**
@@ -17,7 +17,7 @@ layui.define(["layer"], function (exports) {
          * @param width
          * @param height
          * @param successFunction
-		 * @param endFunction
+         * @param endFunction
          */
         open: function (title, content, width, height, successFunction, endFunction) {
             layer.open({
@@ -30,7 +30,7 @@ layui.define(["layer"], function (exports) {
                 content: content,
                 zIndex: layer.zIndex,
                 skin: okLayer.skinChoose(),
-				success: successFunction,
+                success: successFunction,
                 end: endFunction
             });
         },
@@ -42,37 +42,37 @@ layui.define(["layer"], function (exports) {
             time: 1000,
             // 绿色勾
             greenTick: function (content, callbackFunction) {
-                var options = {icon: 1, time: okLayer.msg.time, anim: okLayer.animChoose()};
+                let options = {icon: 1, time: okLayer.msg.time, anim: okLayer.animChoose()};
                 layer.msg(content, options, callbackFunction);
             },
             // 红色叉
             redCross: function (content, callbackFunction) {
-                var options = {icon: 2, time: okLayer.msg.time, anim: okLayer.animChoose()};
+                let options = {icon: 2, time: okLayer.msg.time, anim: okLayer.animChoose()};
                 layer.msg(content, options, callbackFunction);
             },
             // 黄色问号
             yellowQuestion: function (content, callbackFunction) {
-                var options = {icon: 3, time: okLayer.msg.time, anim: okLayer.animChoose()};
+                let options = {icon: 3, time: okLayer.msg.time, anim: okLayer.animChoose()};
                 layer.msg(content, options, callbackFunction);
             },
             // 灰色锁
             grayLock: function (content, callbackFunction) {
-                var options = {icon: 4, time: okLayer.msg.time, anim: okLayer.animChoose()};
+                let options = {icon: 4, time: okLayer.msg.time, anim: okLayer.animChoose()};
                 layer.msg(content, options, callbackFunction);
             },
             // 红色哭脸
             redCry: function (content, callbackFunction) {
-                var options = {icon: 5, time: okLayer.msg.time, anim: okLayer.animChoose()};
+                let options = {icon: 5, time: okLayer.msg.time, anim: okLayer.animChoose()};
                 layer.msg(content, options, callbackFunction);
             },
             // 绿色笑脸
             greenLaugh: function (content, callbackFunction) {
-                var options = {icon: 6, time: okLayer.msg.time, anim: okLayer.animChoose()};
+                let options = {icon: 6, time: okLayer.msg.time, anim: okLayer.animChoose()};
                 layer.msg(content, options, callbackFunction);
             },
             // 黄色感叹号
             yellowSigh: function (content, callbackFunction) {
-                var options = {icon: 7, time: okLayer.msg.time, anim: okLayer.animChoose()};
+                let options = {icon: 7, time: okLayer.msg.time, anim: okLayer.animChoose()};
                 layer.msg(content, options, callbackFunction);
             }
         },
@@ -81,8 +81,8 @@ layui.define(["layer"], function (exports) {
          * @returns {string}
          */
         skinChoose: function () {
-			var storage = window.localStorage;
-			var skin = storage.getItem("skin");
+            let storage = window.localStorage;
+            let skin = storage.getItem("skin");
             if (skin == 1) {
                 // 灰白色
                 return "";
@@ -94,7 +94,7 @@ layui.define(["layer"], function (exports) {
                 return "layui-layer-lan";
             } else if (!skin || skin == 4) {
                 // 随机颜色
-				var skinArray = ["", "layui-layer-molv", "layui-layer-lan"];
+                var skinArray = ["", "layui-layer-molv", "layui-layer-lan"];
                 return skinArray[Math.floor(Math.random() * skinArray.length)];
             }
         },
@@ -103,11 +103,11 @@ layui.define(["layer"], function (exports) {
          * @returns {number}
          */
         animChoose: function () {
-			var storage = window.localStorage;
-			var anim = storage.getItem("anim");
-			var animArray = ["0", "1", "2", "3", "4", "5", "6"];
+            let storage = window.localStorage;
+            let anim = storage.getItem("anim");
+            let animArray = ["0", "1", "2", "3", "4", "5", "6"];
             if (animArray.indexOf(anim) > -1) {
-				// 用户选择的动画
+                // 用户选择的动画
                 return anim;
             } else if (!anim || anim == 7) {
                 // 随机动画
diff --git a/lib/layui/lay/okmodules/okUtils.js b/lib/layui/lay/okmodules/okUtils.js
index 3f1a20d..626161b 100644
--- a/lib/layui/lay/okmodules/okUtils.js
+++ b/lib/layui/lay/okmodules/okUtils.js
@@ -133,6 +133,32 @@ layui.define(["layer"], function (exprots) {
                 if (new RegExp("(" + k + ")").test(fmt))
                     fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
             return fmt;
+        },
+        number: {
+            /**
+             * 判断是否为一个正常的数字
+             * @param num
+             */
+            isNumber: function (num) {
+                if (num && !isNaN(num)) {
+                    return true;
+                }
+                return false;
+            },
+            /**
+             * 判断一个数字是否包括在某个范围
+             * @param num
+             * @param begin
+             * @param end
+             */
+            isNumberWith: function (num, begin, end) {
+                if (this.isNumber(num)) {
+                    if (num >= begin && num <= end) {
+                        return true;
+                    }
+                    return false;
+                }
+            },
         }
     };
     exprots("okUtils", okUtils);
diff --git a/pages/system/alertSkin.html b/pages/system/alertSkin.html
new file mode 100644
index 0000000..1567b59
--- /dev/null
+++ b/pages/system/alertSkin.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>皮肤动画</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+        <link rel="stylesheet" href="../../css/oksub.css">
+    </head>
+    <body>
+        <div class="ok-body">
+            <!--面包屑导航区域-->
+            <div class="ok-body-breadcrumb">
+        <span class="layui-breadcrumb">
+            <a><cite>顶部导航</cite></a>
+            <a><cite>皮肤动画</cite></a>
+        </span>
+                <a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
+                    <i class="layui-icon layui-icon-refresh"></i>
+                </a>
+            </div>
+            <!--form表单-->
+            <form class="layui-form ok-form" lay-filter="filter">
+                <div class="layui-form-item">
+                    <label class="layui-form-label">弹窗皮肤</label>
+                    <div class="layui-input-block" id="skin">
+                        <input type="radio" name="skin" value="1" title="灰白色">
+                        <input type="radio" name="skin" value="2" title="墨绿色">
+                        <input type="radio" name="skin" value="3" title="天蓝色">
+                        <input type="radio" name="skin" value="4" title="随机" checked>
+                    </div>
+                </div>
+                <div class="layui-form-item">
+                    <label class="layui-form-label">弹窗动画</label>
+                    <div class="layui-input-block" id="anim">
+                        <input type="radio" name="anim" value="0" title="平滑放大">
+                        <input type="radio" name="anim" value="1" title="从上掉落">
+                        <input type="radio" name="anim" value="2" title="从底部往上滑入">
+                        <input type="radio" name="anim" value="3" title="从左滑入">
+                        <input type="radio" name="anim" value="4" title="从左翻滚">
+                        <input type="radio" name="anim" value="5" title="渐显">
+                        <input type="radio" name="anim" value="6" title="抖动">
+                        <input type="radio" name="anim" value="7" title="随机" checked>
+                    </div>
+                </div>
+                <div class="layui-form-item">
+                    <div class="layui-input-block">
+                        <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
+                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <!--js逻辑-->
+        <script src="../../lib/layui/layui.js"></script>
+        <script>
+            layui.use(["element", "form", "okLayer", "okUtils"], function () {
+                let form = layui.form;
+                let $ = layui.jquery;
+                let okLayer = layui.okLayer;
+                let okUtils = layui.okUtils;
+
+                // 单选框控件默认选中
+                let storage = window.localStorage;
+                let skin = storage.getItem("skin");
+                let anim = storage.getItem("anim");
+                let _skin = okUtils.number.isNumberWith(skin, 1, 4) ? skin : 4;
+                $("#skin").find("input").each(function () {
+                    let val = $(this).val();
+                    if (val == _skin) {
+                        $(this).prop("checked", true);
+                    }
+                });
+
+                let _anim = okUtils.number.isNumberWith(anim, 0, 7) ? anim : 7;
+                $("#anim").find("input").each(function () {
+                    let val = $(this).val();
+                    if (val == _anim) {
+                        $(this).prop("checked", true);
+                    }
+                });
+
+                form.render()
+
+                form.on("submit(edit)", function (data) {
+                    // 持久化skin和anim
+                    let storage = window.localStorage;
+                    storage.skin = data.field.skin;
+                    storage.anim = data.field.anim;
+                    okLayer.msg.greenTick("设置成功", function () {
+                        parent.layer.close(parent.layer.getFrameIndex(window.name));
+                    });
+                    return false;
+                });
+            })
+        </script>
+    </body>
+</html>