新增手机端浏览模式

2026-07-05 17:42:49 +08:00 · 2023-09-27 16:32:38 +08:00
parent c77257730c
commit 4356de36b3
11 changed files with 310 additions and 28 deletions
--- a/extend/base/admin/controller/IndexBase.php
+++ b/extend/base/admin/controller/IndexBase.php
@@ -3,8 +3,10 @@
 namespace base\admin\controller;

 use app\admin\model\SystemAdmin;
+use app\admin\model\SystemMenu;
 use app\admin\model\SystemQuick;
 use app\common\controller\AdminController;
+use app\common\service\MenuService;

 class IndexBase extends AdminController
 {
@@ -116,4 +118,39 @@ class IndexBase extends AdminController

        return $this->fetch();
    }
+
+    public function mobile()
+    {
+        $pid = $this->request->param('pid', 0);
+
+        $menuService = new MenuService(session('admin.id'));
+
+        $home_info = $menuService->getHomeInfo();
+
+        $list_menu = SystemMenu::with(['children' => function ($query) {
+            $query->order('sort', 'desc')->order('id', 'asc');
+        }])->where('pid', $pid)->order([
+            'sort' => 'desc',
+            'id' => 'asc',
+        ])
+        ->where('status', 1)
+        ->select();
+
+        $list_menu_pid = SystemMenu::group('pid')->column('pid');
+
+        foreach ($list_menu as $model_menu) {
+            foreach ($model_menu->children as $model_child) {
+                if (in_array($model_child->id, $list_menu_pid)) {
+                    $model_child->href = __url('mobile', ['pid' => $model_child->pid]);
+                } else {
+                    $model_child->href = __url($model_child->href);
+                }
+            }
+        }
+
+        $this->assign('home_info', $home_info);
+        $this->assign('list_menu', $list_menu);
+
+        return $this->fetch();
+    }
 }
--- a/extend/base/admin/model/SystemMenuBase.php
+++ b/extend/base/admin/model/SystemMenuBase.php
@@ -2,6 +2,7 @@

 namespace base\admin\model;

+use app\admin\model\SystemMenu;
 use app\common\constants\MenuConstant;
 use app\common\model\TimeModel;

@@ -9,6 +10,11 @@ class SystemMenuBase extends TimeModel
 {
    protected $deleteTime = 'delete_time';

+    public function children()
+    {
+        return $this->hasMany(SystemMenu::class, 'pid', 'id');
+    }
+
    public function getPidMenuList()
    {
        $list = $this->field('id,pid,title')
--- a/extend/base/admin/view/common/_require.html
+++ b/extend/base/admin/view/common/_require.html
@@ -30,4 +30,5 @@
 <script src="__STATIC__/plugs/jq-module/city-picker/js/city-picker.data.min.js"></script>
 <script src="__STATIC__/plugs/jq-module/city-picker/js/city-picker.min.js"></script>
 <script src="__STATIC__/plugs/clipboard.js/clipboard.min.js"></script>
+<script src="__STATIC__/plugs/ulthon-admin/table.js"></script>
 <script src="__STATIC__/plugs/ulthon-admin/ulthon-admin.js"></script>
--- a/extend/base/admin/view/index/mobile.html
+++ b/extend/base/admin/view/index/mobile.html
@@ -0,0 +1,31 @@
+
+
+<div class="ul-section ul-padding-md">
+    <div class="ul-group-title">基本</div>
+    <div class="ul-nav-grid colord box">
+        <a href="{:__url('admin/index/welcome')}" class="item">
+            <div class="icon">
+                <div class="main"><i class="{$home_info.icon}"></i></div>
+            </div>
+            <div class="title">{$home_info.title}</div>
+        </a>
+    </div>
+</div>
+
+{volist name='list_menu' id='vo'}
+{notempty name='vo.children'}
+<div class="ul-section ul-padding-md">
+    <div class="ul-group-title">{$vo.title}</div>
+    <div class="ul-nav-grid colord box">
+        {volist name='vo.children' id='vovo'}
+        <a href="{$vovo.href}" class="item">
+            <div class="icon">
+                <div class="main"><i class="{$vovo.icon}"></i></div>
+            </div>
+            <div class="title">{$vovo.title}</div>
+        </a>
+        {/volist}
+    </div>
+</div>
+{/notempty}
+{/volist}
--- a/extend/base/admin/view/index/mobile.js
+++ b/extend/base/admin/view/index/mobile.js
--- a/extend/base/admin/view/layout/default.html
+++ b/extend/base/admin/view/layout/default.html
@@ -30,6 +30,38 @@
 </head>

 <body>
+    {if $Request.isMobile }
+    <link rel="stylesheet" href="//layui.ulthon.com/cdn/layui-ul.css">
+    <div class="ul-section">
+        <div class="ul-header">
+            <div class="ul-header-main" style="max-width: 600px;">
+                <div class="ul-header-left">
+                    <a href="{:__url('admin/index/mobile')}" class="">
+                        <img class="ul-header-logo" src="{$logo_info.image}" alt="">
+                    </a>
+                </div>
+                {notempty name='session_admin'}   
+                <div class="ul-header-right">
+                    <div class="ul-header-user">
+                        <div class="ul-header-user-avatar" style="background-image: url('{$session_admin.head_img}');">
+                        </div>
+                        <div class="ul-header-user-info">
+                            <div class="ul-header-user-name">
+                                {$session_admin.username}
+                            </div>
+                            <div class="ul-header-user-options">
+                                <i class="ul-icon-exit"></i>
+                                <span>退出</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {/notempty}
+            </div>
+        </div>
+    </div>
+    {/if}
+
    {__CONTENT__}
    <script style="display: none;" id="data-brage" type="text/plain">{$data_brage|raw|default='[]'}</script>
 </body>
--- a/extend/base/common/controller/AdminControllerBase.php
+++ b/extend/base/common/controller/AdminControllerBase.php
@@ -366,6 +366,15 @@ class AdminControllerBase extends BaseController
        ];

        View::assign($data);
+
+        if ($this->request->isMobile()) {
+            $logo_info = [
+                'title' => sysconfig('site', 'logo_title'),
+                'image' => sysconfig('site', 'logo_image'),
+                'href' => __url('index/index'),
+            ];
+            $this->assign('logo_info', $logo_info);
+        }
    }

    /**
--- a/public/static/admin/css/public.css
+++ b/public/static/admin/css/public.css
@@ -337,6 +337,11 @@ table样式
    padding: 10px 0px;
 }

+/* 手机端的表格头部操作 */
+.layuimini-container .main-tool {
+    padding: 15px;
+}
+
 /**
 开关
 */
@@ -560,4 +565,24 @@ table样式
 }


-@media (max-width: 768px) {}
+@media (max-width: 768px) {
+    .layuimini-form .layui-form-item {
+        padding-right: 0;
+    }
+
+    .layuimini-form .layui-form-item .layui-form-label {
+        float: unset;
+        display: inline-block;
+        width: auto;
+        padding-left: 0;
+        padding-bottom: 0px;
+    }
+
+    .layuimini-form .layui-form-item .layui-input-block {
+        margin-left: 0;
+    }
+
+    .layuimini-form.multiple-columns .layui-form-item.full-line {
+        width: calc(100% - 0px);
+    }
+}
--- a/public/static/common/js/app.js
+++ b/public/static/common/js/app.js
@@ -9,11 +9,11 @@ loading.show = function (count) {
    }

    if (loading.showCount == 0) {
-        loading.index = layer.load()
+        loading.index = layer.load();
    }

    loading.showCount += count;
-}
+};

 loading.hide = function (count) {

@@ -37,4 +37,26 @@ loading.hide = function (count) {
        layer.close(loading.index);
    }

-}
+};
+
+const tools = {};
+
+tools.checkMobile = function () {
+    var userAgentInfo = navigator.userAgent;
+    var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
+    var mobile_flag = false;
+    //根据userAgent判断是否是手机
+    for (var v = 0; v < mobileAgents.length; v++) {
+        if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
+            mobile_flag = true;
+            break;
+        }
+    }
+    var screen_width = window.screen.width;
+    var screen_height = window.screen.height;
+    //根据屏幕分辨率判断是否是手机
+    if (screen_width < 600 && screen_height < 800) {
+        mobile_flag = true;
+    }
+    return mobile_flag;
+};
--- a/public/static/plugs/ulthon-admin/table.js
+++ b/public/static/plugs/ulthon-admin/table.js
@@ -0,0 +1,123 @@
+(function () {
+    var table = {};
+
+    table.render = function (options) {
+        console.log(options);
+
+        var divId = options.elem + 'MB';
+        $(options.elem).hide();
+
+        var dataContainer = $(
+            `<div id="${divId.substring(1)}'" style="margin:-15px">
+            <div class="main-tool"></div>
+            <div class="main-data"></div>
+            </div>`
+        ).insertAfter(options.elem);
+
+        // 暂时隐藏按钮
+        // var containerToobar = dataContainer.find('.main-tool');
+        // containerToobar.prepend(options.toolbar);
+
+        var containerBox = dataContainer.find('.main-data');
+
+        loadPage();
+
+        var page = 1;
+        function loadPage() {
+            $.get(options.url, { page: page }, function (res) {
+
+                res.data.forEach(row => {
+
+                    var rowItem = $.extend(true, {}, row);
+
+                    var baseElem = $(baseItem).appendTo(containerBox);
+
+                    if (options.cols[0][0].type == 'checkbox' || options.cols[0[0]].type == 'radio') {
+                        $('<input name="layTableCheckbox" type="' + options.cols[0][0].type + '">')
+                            .appendTo(baseElem.find('.header').find('.plus'));
+
+                    }
+
+                    rowItem.LAY_COL = $.extend(true, {}, options.cols[0][1]);
+                    baseElem.find('.header').find('.main').find('span').html(
+                        options.cols[0][1].templet(rowItem)
+                    );
+
+                    options.cols[0].forEach(LAY_COL => {
+                        var dataItem = $.extend(true, {}, row);
+                        dataItem.LAY_COL = $.extend(true, {}, LAY_COL);
+                        if (LAY_COL.type == 'checkbox' || LAY_COL.type == 'radio') {
+                            return;
+                        }
+
+                        if (LAY_COL.templet == ua.table.tool) {
+                            // 暂时隐藏按钮
+                            // baseElem.find('.footer .plus').html(dataItem.LAY_COL.templet(dataItem));
+                            return;
+                        }
+
+                        if (LAY_COL.field == 'create_time') {
+                            baseElem.find('.footer .main').html(dataItem.LAY_COL.templet(dataItem));
+                            return;
+                        }
+
+                        var baseDataItemElem = $(baseDataItem).appendTo(baseElem.find('.body .main'));
+                        baseDataItemElem.find('.item-title').html(
+                            dataItem.LAY_COL.title + ':'
+                        );
+                        baseDataItemElem.find('.item-value').html(
+                            dataItem.LAY_COL.templet(dataItem)
+                        );
+                    });
+
+                });
+
+
+            });
+        }
+
+        var baseItem = `
+            <div class="ul-data-card">
+                <div class="header">
+                    <div class="main">
+                        #
+                        <span></span>
+                    </div>
+                    <div class="plus">
+                        
+                    </div>
+                </div>
+                <div class="body">
+                    <div class="main">
+                        
+                        
+                    </div>
+                </div>
+                <div class="footer">
+                    <div class="main">
+                       
+                    </div>
+                    <div class="plus">
+                        <div class="layui-btn layui-btn-sm layui-btn-normal">删除</div>
+                        <div class="layui-btn layui-btn-sm layui-btn-primary">修改</div>
+                    </div>
+                </div>
+            </div>`;
+        var baseDataItem = `
+            <div class="item">
+                <div class="item-title">
+                    
+                </div>
+                <div class="item-value">
+                    
+                </div>
+            </div>`;
+
+    };
+
+    table.on = function (event, callback) {
+        // console.log(event, callback);
+    };
+
+    window.uaTable = table;
+})();
--- a/public/static/plugs/ulthon-admin/ulthon-admin.js
+++ b/public/static/plugs/ulthon-admin/ulthon-admin.js
@@ -19,7 +19,6 @@

    var form = layui.form,
        layer = layui.layer,
-        table = layui.table,
        laydate = layui.laydate,
        upload = layui.upload,
        element = layui.element,
@@ -37,6 +36,13 @@
        upload_exts: '',
    };

+    var table;
+
+    if (tools.checkMobile()) {
+        table = window.uaTable;
+    } else {
+        table = layui.table;
+    }

    var extGroup = {
        // 图片扩展名数组
@@ -1445,23 +1451,7 @@
            }
        },
        checkMobile: function () {
-            var userAgentInfo = navigator.userAgent;
-            var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
-            var mobile_flag = false;
-            //根据userAgent判断是否是手机
-            for (var v = 0; v < mobileAgents.length; v++) {
-                if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
-                    mobile_flag = true;
-                    break;
-                }
-            }
-            var screen_width = window.screen.width;
-            var screen_height = window.screen.height;
-            //根据屏幕分辨率判断是否是手机
-            if (screen_width < 600 && screen_height < 800) {
-                mobile_flag = true;
-            }
-            return mobile_flag;
+            return tools.checkMobile();
        },
        open: function (title, url, width, height, isResize, shadeClose = false) {
            isResize = isResize === undefined ? true : isResize;
@@ -1591,12 +1581,18 @@
                    clientHeight = '100%';
                }

+                // 如果是手机版，则直接跳转
+                if (admin.checkMobile()) {
+                    location.href = external ? url : admin.url(url);
+                } else {
                    admin.open(
                        $(this).attr('data-title'),
                        external ? url : admin.url(url),
                        clienWidth,
                        clientHeight,
                    );
+                }
+
            });

            // 放大图片