dootask/resources/assets/js/components/Mobile/Tabbar.vue

<template>
    <div class="mobile-tabbar">
        <transition name="mobile-fade">
            <div v-if="isMore" class="more-mask" @click="toggleRoute('more')"></div>
        </transition>
        <transition name="mobile-slide">
            <div v-if="isMore" class="more-box">
                <div class="tabbar-more-title">{{$L('更多')}}</div>
                <ul v-for="list in navMore">
                    <li v-for="item in list" @click="toggleRoute(item.name)" :class="{active: activeName === item.name}">
                        <div class="more-item">
                            <i class="taskfont" v-html="item.icon"></i>
                            <div class="tabbar-title">{{$L(item.label)}}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </transition>
        <ul class="tabbar-box">
            <li v-for="item in navList" @click="toggleRoute(item.name)" :class="{active: activeName === item.name}">
                <i class="taskfont" v-html="item.icon"></i>
                <div class="tabbar-title">{{$L(item.label)}}</div>
                <template v-if="item.name === 'dashboard'">
                    <Badge v-if="dashboardTask.overdue_count > 0" class="tabbar-badge" type="error" :count="dashboardTask.overdue_count"/>
                    <Badge v-else-if="dashboardTask.today_count > 0" class="tabbar-badge" type="info" :count="dashboardTask.today_count"/>
                    <Badge v-else-if="dashboardTask.all_count > 0" class="tabbar-badge" type="primary" :count="dashboardTask.all_count"/>
                </template>
                <template v-else-if="item.name === 'dialog'">
                    <Badge class="tabbar-badge" :text="msgUnreadMention"/>
                </template>
            </li>
        </ul>
        <div class="mobile-back"></div>
    </div>
</template>

<script>
import {mapGetters, mapState} from "vuex";

export default {
    name: "MobileTabbar",

    data() {
        return {
            isMore: false,

            navList: [
                {icon: '&#xe6fb;', name: 'dashboard', label: '仪表盘'},
                {icon: '&#xe6fa;', name: 'project', label: '项目'},
                {icon: '&#xe6eb;', name: 'dialog', label: '消息'},
                {icon: '&#xe6b2;', name: 'contacts', label: '通讯录'},
                {icon: '&#xe6e9;', name: 'more', label: '更多'},
            ],
            navMore: [
                [
                    {icon: '&#xe6f5;', name: 'calendar', label: '日历'},
                    {icon: '&#xe6f3;', name: 'file', label: '文件'},
                    {icon: '&#xe67b;', name: 'setting', label: '设置'},
                ],
                [
                    {icon: '&#xe7b9;', name: 'addProject', label: '创建项目'},
                    {icon: '&#xe7b8;', name: 'addTask', label: '添加任务'},
                ]
            ],
        };
    },

    created() {

    },

    mounted() {

    },

    beforeDestroy() {

    },

    computed: {
        ...mapState(['cacheDialogs']),
        ...mapGetters(['dashboardTask']),

        routeName() {
            return this.$route.name
        },

        msgUnreadMention() {
            let num = 0;
            let mention = 0;
            this.cacheDialogs.some(dialog => {
                num += $A.getDialogUnread(dialog);
                mention += $A.getDialogMention(dialog);
            })
            if (num <= 0) {
                return '';
            }
            if (num > 99) {
                num = "99+"
            }
            if (mention > 0) {
                if (mention > 99) {
                    return "@99+"
                }
                return `${num}·@${mention}`
            }
            return String(num);
        },

        activeName() {
            if (this.isMore || ['manage-calendar', 'manage-file', 'manage-setting'].includes(this.routeName)) {
                return 'more';
            }

            if (this.routeName === 'manage-dashboard') {
                return 'dashboard';
            }

            if (this.routeName === 'manage-project' && !/^\d+$/.test(this.$route.params.projectId)) {
                return 'project';
            }
            if (this.routeName === 'manage-messenger') {
                if (this.$route.params.dialogId === 'contacts') {
                    return 'contacts'
                } else {
                    return 'dialog'
                }
            }
            return ''
        },
    },

    methods: {
        toggleRoute(path) {
            this.$emit("on-click", path)
            if (path != 'more') {
                this.isMore = false
            }
            //
            let location;
            switch (path) {
                case 'more':
                    this.isMore = !this.isMore;
                    return;

                case 'addTask':
                case 'addProject':
                    return;

                case 'project':
                    location = {name: 'manage-project', params: {projectId: 'all'}};
                    break;

                case 'dialog':
                    location = {name: 'manage-messenger', params: {dialogId: 'dialog'}};
                    break;

                case 'contacts':
                    location = {name: 'manage-messenger', params: {dialogId: 'contacts'}};
                    break;

                default:
                    location = {name: 'manage-' + path};
                    break;
            }
            this.goForward(location);
        },
    },
};
</script>