Merge branch 'v2.0' of https://gitee.com/bobi1234/ok-admin into v2.0

README.md

@@ -23,19 +23,32 @@
 | ok-admin v1.0 | http://ok-admin-v1.xlbweb.cn |
 | ok-admin v2.0  | http://ok-admin.xlbweb.cn |
 
-### 效果预览
+### PC端效果预览
 
-![登陆页面](https://i.loli.net/2019/09/19/QKicV94INmZDJbM.png)
+![登陆页面](https://i.loli.net/2019/09/28/SBoEY2eQTIuNXOM.png)
 ![注册页面](https://i.loli.net/2019/09/19/4sQtJrbuFVXefRU.png)
 ![忘记密码页面](https://i.loli.net/2019/09/19/UOXpBiVc3ahfPSr.png)
-![控制台](https://images.gitee.com/uploads/images/2019/0919/232459_8cbe7bb9_1152471.png "屏幕截图.png")
+![控制台](https://images.gitee.com/uploads/images/2019/0928/133150_4f541d2e_1152471.png "屏幕截图.png")
-![控制台一](https://images.gitee.com/uploads/images/2019/0919/232545_7d66fa8d_1152471.png "屏幕截图.png")
+![控制台一](https://images.gitee.com/uploads/images/2019/0928/133215_c28c2f78_1152471.png "屏幕截图.png")
-![用户管理](https://images.gitee.com/uploads/images/2019/0919/232623_3697ef6c_1152471.png "屏幕截图.png")
+![用户列表](https://images.gitee.com/uploads/images/2019/0928/133254_6bfb7575_1152471.png "屏幕截图.png")
-![角色管理](https://images.gitee.com/uploads/images/2019/0919/232706_e7f4c417_1152471.png "屏幕截图.png")
+![角色列表](https://images.gitee.com/uploads/images/2019/0928/133314_6bb0b726_1152471.png "屏幕截图.png")
-![权限管理](https://images.gitee.com/uploads/images/2019/0919/232738_b5079eb4_1152471.png "屏幕截图.png")
+![权限列表](https://images.gitee.com/uploads/images/2019/0928/133347_eb37eb95_1152471.png "屏幕截图.png")
-![中国地图](https://images.gitee.com/uploads/images/2019/0919/232839_5a176d81_1152471.png "屏幕截图.png")
+![中国地图](https://images.gitee.com/uploads/images/2019/0928/133414_848c2992_1152471.png "屏幕截图.png")
-![区域地图](https://images.gitee.com/uploads/images/2019/0919/232900_a3072d5b_1152471.png "屏幕截图.png")
+![文章列表](https://images.gitee.com/uploads/images/2019/0928/133443_1b312757_1152471.png "屏幕截图.png")
-![文章列表](https://images.gitee.com/uploads/images/2019/0919/232946_ab8814a5_1152471.png "屏幕截图.png")
+
+### 手机端效果预览
+
+<div align="center">
+    <img src="https://images.gitee.com/uploads/images/2019/0928/133918_d3f06692_1152471.png" height="500" width="250" alt="手机端-控制台"/>
+    <img src="https://images.gitee.com/uploads/images/2019/0928/133958_d693ec3d_1152471.png" height="500" width="250" alt="手机端-控制台一"/>
+    <img src="https://images.gitee.com/uploads/images/2019/0928/134037_044ce556_1152471.png" height="500" width="250" alt="手机端-左侧菜单"/>
+</div>
+
+<div align="center">
+    <img src="https://images.gitee.com/uploads/images/2019/0928/134101_88527de9_1152471.png" height="500" width="250" alt="手机端-用户列表"/>
+    <img src="https://images.gitee.com/uploads/images/2019/0928/134122_9505f727_1152471.png" height="500" width="250" alt="手机端-添加用户"/>
+    <img src="https://images.gitee.com/uploads/images/2019/0928/140051_e8dc01fa_1152471.png" height="500" width="250" alt="登陆页面"/>
+</div>
 
 ### 开源协议
 

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;-->
+                    <li class="ok-nav-item ok-hide-md">
-<!--                        <div class="weather-ok">-->
+                        <div class="weather-ok">
-<!--                            <iframe frameborder="0" scrolling="no" class="iframe-style" src="pages/weather.html" frameborder="0"></iframe>-->
+                            <iframe frameborder="0" scrolling="no" class="iframe-style" src="pages/weather.html" frameborder="0"></iframe>
-<!--                        </div>-->
+                        </div>
-<!--                    </li>-->
+                    </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>

js/console.js

@@ -52,30 +52,30 @@ layui.use(["okUtils", "table", "countUp", "okMock"], function () {
     function userList() {
         table.render({
             method: "get",
-            url: okMock.api.user.list2,
+            url: okMock.api.user.list,
             elem: '#userData',
             height: 340,
             page: true,
             limit: 7,
             cols: [[
-                {field: "id", title: "id", width: 50},
+                {field: "id", title: "ID", width: 180},
-                {field: "u_name", title: "姓名"},
+                {field: "username", title: "账号", width: 100},
-                {field: "u_sex", title: "性别", width: 80},
+                {field: "password", title: "密码", width: 80},
-                {field: "u_email", title: "邮箱"},
+                {field: "email", title: "邮箱", width: 200},
-                {field: "u_endtime", title: "时间",},
+                {field: "createTime", title: "创建时间", width: 180},
-                {field: "u_grade", title: "等级"}
+                {field: "logins", title: "登录次数", width: 100}
             ]],
-            parseData: function (res) {
+//             parseData: function (res) {
-                res.data.list.forEach(function (i, j) {
+//                 res.data.list.forEach(function (i, j) {
-                    var dateTime = new Date(i.u_endtime);
+//                     var dateTime = new Date(i.u_endtime);
-                    i.u_endtime = dateTime.getFullYear() + "-" + dateTime.getMonth() + "-" + dateTime.getDay();
+//                     i.u_endtime = dateTime.getFullYear() + "-" + dateTime.getMonth() + "-" + dateTime.getDay();
-                });
+//                 });
-                return {
+//                 return {
-                    "code": res.code,
+//                     "code": res.code,
-                    "count": res.data.count,
+//                     "count": res.data.count,
-                    "data": res.data.list
+//                     "data": res.data.list
-                }
+//                 }
-            }
+//             }
         });
     }
 

js/okadmin.js

@@ -262,7 +262,7 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer"], function () {
                 "壮三山五岳，叠古风姿；九经三史，彰现华韵。<br/>" +
                 "豪客泼墨，贤士铺卷，放歌九州富丽妍。<br/>" +
                 "泰山脊，领风骚环宇，有谁堪比？<br/>" +
-                "ok-admin v2.0 祝您国庆节快乐！<br/>祝福伟大的祖国，越来越强大。<br/>祖国强大的祖国，一直屹立于世界东方！(^し^)";
+                "ok-admin v2.0 祝您国庆节快乐！<br/>祝福伟大的祖国，越来越强大。<br/>祝福强大的祖国，一直屹立于世界东方！(^し^)";
         } else {
             content = "ok-admin v2.0上线啦(^し^)<br/>" +
                 "在此郑重承诺该模板<span style='color:#5cb85c'>永久免费</span>为大家提供<br/>" +
@@ -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 () {});
+    });
+
     /**
      * 退出操作
      */

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;
+            let storage = window.localStorage;
-			var skin = storage.getItem("skin");
+            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;
+            let storage = window.localStorage;
-			var anim = storage.getItem("anim");
+            let anim = storage.getItem("anim");
-			var animArray = ["0", "1", "2", "3", "4", "5", "6"];
+            let animArray = ["0", "1", "2", "3", "4", "5", "6"];
             if (animArray.indexOf(anim) > -1) {
-				// 用户选择的动画
+                // 用户选择的动画
                 return anim;
             } else if (!anim || anim == 7) {
                 // 随机动画

lib/layui/lay/okmodules/okMock.js

@@ -7,7 +7,7 @@ layui.define([], function(exprots) {
                 list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/menu/list"
             },
             user: {
-                list: "https://www.easy-mock.com/mock/5d5d0dd46cfcbd1b8627bf1d/ok-admin-v2.0/user/list",
+                list: "http://rap2api.taobao.org/app/mock/233041/user/list",
                 list2: "https://www.easy-mock.com/mock/5d5d0dd46cfcbd1b8627bf1d/ok-admin-v2.0/user/list2",
                 batchNormal: "https://www.easy-mock.com/mock/5d5d0dd46cfcbd1b8627bf1d/ok-admin-v2.0/user/batchNormal",
                 batchStop: "https://www.easy-mock.com/mock/5d5d0dd46cfcbd1b8627bf1d/ok-admin-v2.0/user/batchStop",

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);

pages/member/user-add.html

@@ -105,11 +105,12 @@
 <!--js逻辑-->
 <script src="../../lib/layui/layui.js"></script>
 <script>
-    layui.use(["element", "form", "laydate", "okLayer", "okUtils"], function () {
+    layui.use(["element", "form", "laydate", "okLayer", "okUtils", "okMock"], function () {
-        var form = layui.form;
+        let form = layui.form;
-        var laydate = layui.laydate;
+        let laydate = layui.laydate;
-        var okLayer = layui.okLayer;
+        let okLayer = layui.okLayer;
-        var okUtils = layui.okUtils;
+        let okUtils = layui.okUtils;
+        let okMock = layui.okMock;
 
         laydate.render({elem: "#birthday", type: "datetime"});
 
@@ -118,7 +119,7 @@
         });
 
         form.on("submit(add)", function (data) {
-            okUtils.ajax(okUtils.mockApi.user.add, "post", data.field).done(function (response) {
+            okUtils.ajax(okMock.api.user.add, "post", data.field, true).done(function (response) {
                 console.log(response);
                 okLayer.msg.greenTick("添加成功", function () {
                     parent.layer.close(parent.layer.getFrameIndex(window.name));

pages/member/user.html

@@ -22,9 +22,9 @@
     <!--模糊搜索区域-->
     <div class="layui-row">
         <form class="layui-form layui-col-md12 ok-search">
-            <input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime">
+            <input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime" name="startTime">
-            <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime">
+            <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
-            <input class="layui-input" placeholder="请输入用户名" autocomplete="off">
+            <input class="layui-input" placeholder="账号" autocomplete="off" name="username">
             <button class="layui-btn" lay-submit="" lay-filter="search">
                 <i class="layui-icon">&#xe615;</i>
             </button>
@@ -58,7 +58,7 @@
             size: "sm",
             cols: [[
                 {type: "checkbox", fixed: "left"},
-                {field: "guid", title: "GUID", width: 280, sort: true},
+                {field: "id", title: "ID", width: 160, sort: true},
                 {field: "username", title: "账号", width: 100},
                 {field: "password", title: "密码", width: 100},
                 {field: "reallyName", title: "姓名", width: 100},

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>