uniapp+uview后台管理系统|uni-app手机端后台uniUadmin

前段时间有给大家分享一个uni-app仿抖音小视频，今天分享一个uniapp移动端后台管理uni-uadmin实例项目。

uni-uadmin 一款基于uni-app+uviewUI+uniUI+mockjs+echarts等技术开发架构的手机移动端后台管理系统模板。包含了图表、自定义表格、表单、瀑布流及图文编辑器等业务模块，动态权限管理，错误页处理，可编译至H5+小程序+APP端。

uni-app+uview短视频+直播聊天实例

技术栈

• 编辑器：HbuilderX3.3.5
• 使用技术：vue+uniapp+uViewUI+mockjs
• 弹窗组件：ua-popup（基于uni-app跨端弹框组件）
• 表格组件：ua-table（基于uni-app封装的多功能表格）
• 自定义组件：uaDock全新的dock风格tabbar组件
• uniapp图表组件：u-charts图表库

项目构建目录

共用模板

整个页面结构布局分为顶部自定义导航+内容区域+底部dock tab菜单三大部分。

<!-- 公共页面模板 -->  
<template>  
    <view class="ua__pageview flexbox flex-col" :style="{'--SKIN': $store.state.skin, 'background': bgcolor, 'color': color}">  
        <slot name="header" />  

        <!-- //主容器 -->  
        <view class="ua__scrollview flex1">  
            <slot />  
        </view>  

        <!-- //底部 -->  
        <slot name="footer" />  

        <!-- //dock菜单 -->  
        <ua-dock v-if="dock && dock != 'false'" @click="handleDockClick" />  

        <!-- //函数式弹框 -->![  
        <ua-popup ref="uapopup" />](/img/bVcXG8X)  

        <!-- //换肤弹框模板 -->  
        <ua-popup v-model="isVisibleSkin" position="right">  
            <Skin />  
        </ua-popup>  
    </view>  
</template>

uniapp-uadmin 还支持动态权限控制。

uniapp自定义菜单tab组件ua-dock

<!-- //底部dock菜单 -->  
<template>  
    <view class="ua__dockbar">  
        <scroll-view class="ua__dock-scroll ua__filter" :class="platform" scroll-x :style="{'background': bgcolor}">  
            <view class="ua__dock-wrap">  
                <!-- Tab菜单项 -->  
                <block v-for="(item, index) in menu" :key="index">  
                    <view v-if="item.type == 'divider'" class="ua__dock-divider"></view>  
                    <view v-else class="ua__dock-item" :class="currentTabIndex == index ? 'cur' : ''" @click="switchTab(index, item)">  
                        <text v-if="item.icon" class="iconfont nvuefont" :class="item.icon">{{item.icon}}</text>  
                        <image v-if="item.img" :src="item.img" class="iconimg" :style="{'font-size': item.iconSize}" />  
                        <text v-if="item.badge" class="ua__badge ua__dock-badge">{{item.badge}}</text>  
                        <text v-if="item.dot" class="ua__badge-dot ua__dock-badgeDot"></text>  
                    </view>  
                </block>  
            </view>  
        </scroll-view>  
    </view>  
</template>

props: {  
    // 当前索引  
    current: { type: [Number, String], default: 0 },  
    // 背景色  
    bgcolor: { type: String, default: null },  
    /**  
     * [ 菜单选项 ]  
        type　　　　菜单类型 type: 'tab'支持uni.switchTab切换 type: 'divider'分割线  
        path　　　　菜单页面地址  
        icon　　　　菜单图标-iconfont图标  
        img　　　　 菜单图片  
        color　　　 菜单图标颜色  
        title　　　 标题  
        badge　　　 圆点数字  
        dot        小红点  
     */  
    menu: {  
        type: Array,  
        default: () => [  
            /* Tab菜单 */  
            {  
                type: 'tab',  
                path: '/pages/index/index',  
                icon: `\ue619`,  
                color: '#2979ff',  
                title: '首页',  
            },  
            {  
                type: 'tab',  
                path: '/pages/component/index',  
                icon: 'icon-component',  
                color: '#17c956',  
                title: '组件',  
                badge: 5,  
            },  
            {  
                type: 'tab',  
                path: '/pages/permission/index',  
                icon: 'icon-auth',  
                color: '#f44336',  
                title: '权限管理',  
            },  
            {  
                type: 'tab',  
                path: '/pages/setting/index',  
                icon: 'icon-wo',  
                color: '#8d1cff',  
                title: '设置',  
                dot: true,  
            },  
            {  
                path: '/pages/error/404',  
                img: require('@/static/mac/keychain.png'),  
                title: '错误页面',  
            },  

            { type: 'divider' },  

            /* Nav菜单 */  
            {  
                img: require('@/static/logo.png'),  
                title: 'github',  
            },  
            {  
                img: 'https://www.uviewui.com/common/logo.png',  
                title: 'gitee',  
            },  
            {  
                img: require('@/static/mac/colorsync.png'),  
                title: '皮肤',  
            },  
            {  
                img: require('@/static/mac/info.png'),  
                title: '关于',  
            },  

            { type: 'divider' },  

            {  
                img: require('@/static/mac/bin.png'),  
                title: '回收站',  
                badge: 12,  
            },  
        ]  
    },  
},

uniapp自定义多功能表格组件ua-table

ua-table 支持多行、多列，表头固定，自定义slot插槽内容，点击行列返回数据等功能。

<ua-table   
    :columns="columns"   
    headerBgColor="#eee"   
    :headerBold="true"   
    stripe  
    padding="5px 0"  
    :data="data.list"   
    height="450rpx"  
>  
</ua-table>  

<script>  
import Mock from 'mockjs'  

export default {  
    data() {  
        return {  
            columns: [  
                {type: 'index', align: 'center', width: 100, fixed: true}, // 索引序号  
                {prop: 'title', label: '标题', align: 'left', width: '350'},  
                {prop: 'num', label: '搜索量', align: 'center', width: 120},  
            ],  
            data: Mock.mock({  
                total: 100,  
                page: 1,  
                pagesize: 10,  
                'list|10': [  
                    {  
                        id: '@id()',  
                        title: '@ctitle(10, 20)',  
                        num: '@integer(1000,10000)'  
                    }  
                ]  
            }),  
        }  
    }  
}  
</script>

如果想实现一些自定义插槽内容，则可以通过如下方法实现。

<ua-table   
    :columns="columns"   
    headerBgColor="#eee"   
    :headerBold="true"   
    :stripe="true"  
    :data="data.list"   
    @row-click="handleRowClick"  
    @select="handleCheck"   
    height="750rpx"  
    style="border:1px solid #eee"  
>  
    <template #default="{row, col, index}">  
        <block v-if="col.slot == 'image'">  
            <u-image :src="row.image" :lazy-load="true" height="100rpx" width="100rpx" @click="previewImage(row.image)" />  
        </block>  
        <block v-if="col.slot == 'switch'">  
            <u-switch v-model="row.switch" inactive-color="#fff" :size="36"></u-switch>  
        </block>  
        <block v-if="col.slot == 'tags'">  
            <u-tag :text="row.tags" bg-color="#607d8b" color="#fff" mode="dark" size="mini" />  
        </block>  
        <block v-if="col.slot == 'progress'">  
            <u-line-progress active-color="#1fb925" :percent="row.progress" :show-percent="false" :height="16"></u-line-progress>  
        </block>  
        <block v-if="col.slot == 'btns'">  
            <view class="ua__link success" @click.stop="handleFormEdit(row)">编辑</view>  
            <view class="ua__link error" @click.stop="handleDel(row, index)">删除</view>  
        </block>  
    </template>  
</ua-table>  

<script>  
/**  
 * uniapp自定义表格  
 * @author XY Q：282310962  
*/  
import Mock from 'mockjs'  

export default {  
    data() {  
        return {  
            columns: [  
                {type: 'selection', align: 'center', width: 80, fixed: true}, // 多选  
                {type: 'index', align: 'center', width: 80, fixed: true}, // 索引序号  
                {prop: 'author', label: '作者', align: 'center', width: 120},  
                {prop: 'title', label: '标题', align: 'left', width: 350},  
                {slot: 'image', label: '图片', align: 'center', width: 120},  
                {slot: 'switch', label: '推荐', align: 'center', width: 100},  
                {slot: 'tags', label: '标签', align: 'center', width: 100},  
                {slot: 'progress', label: '热度', align: 'center', width: 150},  
                {prop: 'date', label: '发布时间', align: 'left', width: 300}, // 时间  
                {slot: 'btns', label: '操作', align: 'center', width: 150, fixed: 'right'}, // 操作  
            ],  
            data: Mock.mock({  
                total: 100,  
                page: 1,  
                pagesize: 10,  
                'list|30': [  
                    {  
                        id: '@id()',  
                        author: '@cname()',  
                        title: '@ctitle(10, 20)',  
                        image: 'https://picsum.photos/400/400?random=' + '@guid()',  
                        switch: '@boolean()',  
                        'tags|1': ['admin', 'test', 'dev'],  
                        progress: '@integer(30, 90)',  
                        date: '@datetime()'  
                    }  
                ]  
            }),  
        }  
    }  
}  
</script>

OK，基于uni-app+uview-ui开发原生移动端中后台管理系统就分享到这里。

链接：https://juejin.cn/post/7058793828123148325
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。