lsappBms/lss_vue_wx/src/views/Home.vue

<template>
    <div class="context">
        <router-view class="context_router"></router-view>
        <mt-tabbar v-model="selected" fixed class="tabber" style="display:none">
            <mt-tab-item id="tab1" @click.native="changeTab(1)">
                <img v-if="selected == 'tab1'" slot="icon" src="../assets/image/tab_ass_choose.png">
                <img v-else slot="icon" src="../assets/image/tab_ass.png">
                资产
            </mt-tab-item>
            <mt-tab-item id="tab2" @click.native="changeTab(2)">
                <img v-if="selected == 'tab2'" slot="icon" src="../assets/image/tab_task_choose.png">
                <img v-else slot="icon" src="../assets/image/tab_task.png">
                工单
            </mt-tab-item>
            <mt-tab-item id="tab3" @click.native="changeTab(3)">
                <img v-if="selected == 'tab3'" slot="icon" src="../assets/image/tab_my_choose.png">
                <img v-else slot="icon" src="../assets/image/tab_my.png">
                <mt-badge v-if="num != 0 && num != null" class="myMsg" size="small" type="error">{{num}}</mt-badge>
                我的
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>

<script>
    export default {
        inject: ['reload'],
        data() {
            return {
                selected: 'tab1',
                user: sessionStorage.getItem("user"),
                showTab: true,
                num: sessionStorage.noRead,
            };
        },
        methods: {
            changeTab(type) {
                if(type == 1) {
                    if(this.$router.history.current.fullPath == '/assets') {
                        this.reload();
                    } else {
                        this.$router.push({ path: '/assets' });
                        this.getNoRead();
                    }
                } else if(type == 2) {
                    if(this.$router.history.current.fullPath == '/task') {
                        this.reload();
                    } else {
                        this.$router.push({ path: '/task' });
                        this.getNoRead();
                    }
                } else if(type == 3) {
                    if(this.$router.history.current.fullPath == '/my') {
                        this.reload();
                    } else {
                        this.$router.push({ path: '/my' });
                        this.getNoRead();
                    }
                }
            },

            getNoRead() {
                this.http.post(this.port.my.noReadNum, {
                    'uid': this.user.id,
                } , 
                res => {
                    if (res.code == "ok") {
                        sessionStorage.setItem('noRead', res.data==null?0:res.data);
                        this.num = sessionStorage.noRead;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },
        },
        created() {
            if(this.$router.history.current.meta.parentPath == "/tab_assets") {
                this.selected = "tab1"
            } else if(this.$router.history.current.meta.parentPath == "/tab_task") {
                this.selected = "tab2"
            } else if(this.$router.history.current.meta.parentPath == "/tab_my") {
                this.selected = "tab3"
            }
        },
        mounted() {
            if( this.$router.history.current.fullPath == '/assets' || 
                this.$router.history.current.fullPath == '/task' || 
                this.$router.history.current.fullPath == '/my') {
                $(".tabber").show();
            } else {
                $(".tabber").hide();
            }
            if (this.user) {
                var user = JSON.parse(this.user);
                this.user = user;
                this.getNoRead();
            } else {
                this.$router.push("/login");
            }
        }
    };
</script>

<style scoped lang="scss">
    .context {
        height: 100%;
        background: #EFEFEF;
    }

    .context_router {
        height: calc(100% - 55px);
    }

    #tab3 {
        position: relative;
    }

    .myMsg {
        position: absolute;
        right: 0.3rem;
        top: 0.06rem;
    }
</style>