Uniapp整合uView+mockJs后台模板|uni-app手机端后台系统

3,068 阅读2分钟

最近一直忙于项目开发,有段时间没来更文了。今天给大家带来的一款uniapp中后台管理系统模板项目uni-uadmin。

uniapp+uview仿抖音小视频/直播

在小程序+APP+h5端效果如下:

未标题-1.png

uniAdmin 全新基于uni-app+vue.js+uView-ui+mock.js等技术架构开发的跨设备手机后台管理系统模板。毛玻璃质感UI,拥有图表、自定义表格、表单、瀑布流及图文编辑器等业务模块,动态权限管理,错误页处理,支持编译至App+H5+小程序

p2.gif

p3.gif

项目目录结构

360截图20220116223356898.png

002360截图20220116215626248.png

004360截图20220116215927624.png

005360截图20220116220129593.png

006360截图20220116220201649.png

007360截图20220116220255881.png

009360截图20220116220559584.png

012360截图20220116220734656.png

013360截图20220116220827762.png

014360截图20220116220911712.png

016360截图20220116221047423.png

017360截图20220116221552694.png

019360截图20220116221653647.png

022360截图20220116221802864.png

025360截图20220116222146615.png

026360截图20220116222230182.png

028360截图20220116222337173.png

029360截图20220116222401989.png

项目中的第一亮点就是模糊化毛玻璃质感UI界面。底部tabbar摒弃传统的tabbar,改为dock菜单。 并且可以左右滑动、支持自定义图标及标题、点击菜单项返回索引。设置type:tab则支持系统tab切换菜单。

p7.gif

<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参数支持如下配置

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,
            },
        ]
    },
}

另外项目中亮点2就是uniapp实现表格功能。

012360截图20220116220805496.png

014360截图20220116220911712.png

023360截图20220116221944248.png

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>

如果想要实现一些复杂的类似自定义slot功能,则可以使用如下方法。

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

表格支持隔行换色、支持全选、单选并返回选中行列数据。

自定义插槽,需要将字段属性改为slot: xxx

好了,今天的分享就到这里。在此祝大家新年快乐,虎年大吉大利。

最后附上一个electron+vue3后台管理系统项目 juejin.cn/post/697729…