manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet_h5/src/views/index/index.vue

<template>
    <div class="body">
        <van-swipe class="my-swipe" :autoplay="3000" :height="200" indicator-color="white">
            <van-swipe-item v-for="(item, index) in images" :key="index" class="swipe-img">
                <img :src="item"/>
            </van-swipe-item>
        </van-swipe>
        <van-grid :column-num="3">
            <van-grid-item v-for="(item,index) in routers" :key="index" :icon="item.icon" :text="item.name" 
            :info="item.name=='消息记录'&&unreadNum>0?unreadNum:''"
            :to="item.url">
            </van-grid-item>
        </van-grid>
        <div class="tip">
            新注册用户请登录PC版，完善组织结构信息<br>
            http://worktime.ttkuaiban.com
        </div>
        <Footer page="index"></Footer>
    </div>
</template>

<script>
    import Footer from "@/components/Footer";

    export default {
        data() {
            return {
                user: JSON.parse(localStorage.userInfo),
                unreadNum:0,
                images: [
                    require('../../assets/img/index/banner_1.png'),
                    require('../../assets/img/index/banner_2.png'),
                    require('../../assets/img/index/banner_3.png'),
                ],
                routers: [
                    {
                        name: '查看日报',
                        url: '/view',
                        icon: 'description'
                    },
                    {
                        name: '填写日报',
                        url: '/edit',
                        icon: 'edit'
                    },
                    
                ],
            };
        },
        created() {
            let index = this.active + 1;
            this.list = this[`list${index}`]; // this.list1
            
        },
        mounted() {
            if (this.user.role == 0) {
                //普通员工
                if (this.user.leader) {
                    this.routers.push({
                        name: '审核日报',
                        url: '/review',
                        icon: 'todo-list-o'
                    });
                    this.routers.push({
                                name: '消息记录',
                                url: '/msg',
                                icon: 'todo-list-o',
                                info: this.unreadNum
                            });
                } 
            } else {
                this.routers.push({
                        name: '审核日报',
                        url: '/review',
                        icon: 'todo-list-o'
                    });
                this.routers.push({
                        name: '项目管理',
                        url: '/project',
                        icon: 'label-o'
                    });
                this.routers.push({
                            name: '消息记录',
                            url: '/msg',
                            icon: 'todo-list-o',
                            info: this.unreadNum
                        });
            }

            this.getMessage();
        },
        components: {
            Footer
        },
        methods: {
            getGoods() {
                let url = "/goods"; // /api/goods
                this.$axios
                    .get(url)
                    .then(res => {
                    console.log("res", res);
                    })
                    .catch(err => {
                    console.log("err", err);
                    });
            },
            //获取消息
            getMessage() {
                this.$axios.post("/information/list", {
                })
                .then(res => {
                    if(res.code == "ok") {
                        var list = res.data;
                        this.unreadNum = list.filter(l=>l.checked==0).length;
                        console.log(this.unreadNum);
                        
                    } 
                }).catch(err=> {toast.clear();});
            },
        }
    };
</script>

<style lang="less" scoped>
    .swipe-img {
        img {
            width: 100%;
            height: 100%;
        }
    }

    .body {
        height: calc(100vh - 50px);
        position: relative;
    }

    .tip {
        position: absolute;
        width: 100%;
        bottom: 5px;
        font-size: 14px;
        color: #8f8f8f;
        margin-top: 20px;
        text-align: center;
        line-height: 30px;
    }
</style>