UNION_NSI/target/classes/views/mobile/newHome.html

<!--#
layout("/mobile/platform.html"){
#-->
<style>

    #app {
        background-color: #FFFFFF;
    }

    .icon_text {
        font-size: 12px;
        margin-top: 10px;
    }

    .van-image {
        max-height: 300px !important;
    }

    .not_open {
        filter: grayscale(100%);
    }

    .van-doc-card {
        margin: 14px;
        padding: 12px 38px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 8px 12px #ebedf0;
        line-height: 36px;
        font-size: 13px;
        position: relative;
    }

    .number_text {
        font-size: 36px;
        color: #409eff;
    }

    .van-empty__description {
        font-size: 18px;
        line-height: 40px;
    }

    .title {
        text-align: center;
        font-size: 18px;
    }

    .van-info--dot {
        width: 10px;
        height: 10px;
    }

</style>

<div id="app" v-cloak>

    <div v-if="active === 0" style="background-color: #f6f7f9; min-height: 100vh">
        <van-notice-bar
                left-icon="volume-o" color="#1989fa" background="#ecf9ff"
                text="温馨提示：只显示当前年份的待办事项"
        ></van-notice-bar>
        <div @click="toUrl(o)" class="van-doc-card" v-for="o in needItems">
            <div class="title">{{ o.title }}</div>
            <div style="display: flex; align-items: center; justify-content: space-between;">
                <div>
                    <div style="color: grey; font-size: 15px">{{ o.label }}</div>
                </div>
                <div class="number_text">
                    <span>{{ o.number }}</span>
                </div>
            </div>
        </div>
        <van-empty
                v-if="needItems.length === 0"
                class="custom-image"
                image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
                description="暂无待办"
        ></van-empty>
    </div>

    <div v-if="active === 1">
        <!--轮播图-->
        <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
            <van-swipe-item v-for="item in photoArray">
                <van-image width="100%" :height="$(document).height() * 0.26"
                           :src="item.src"></van-image>
            </van-swipe-item>
        </van-swipe>

        <!--宫格-->
        <van-grid :column-num="3" :border="false">

            <van-grid-item v-for="item in gridArray" :class="item.isOpen ? '' : 'not_open'"
                           :url="item.isOpen ? '/mobile/index/toHome?type=' + item.text : ''">
                <van-image width="48" height="48" :src="item.src"></van-image>
                <span class="icon_text">{{item.text}}</span>
            </van-grid-item>

            <van-grid-item>
                <image src="/assets/mobile/svg/qxbd.svg" @click="loginOut" width="48" height="48"></image>
                <span class="icon_text">解除绑定</span>
            </van-grid-item>
        </van-grid>
    </div>

    <van-tabbar v-model="active" @change="tabbrChange">
        <van-tabbar-item :dot="needCount" icon="envelop-o">待办</van-tabbar-item>
        <van-tabbar-item icon="home-o">工作台</van-tabbar-item>
    </van-tabbar>

</div>

<script>
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                active: 1,
                needCount: 0,
                needItems: [],
                photoArray: [
                    {src: '/assets/mobile/img/home/home1.png'},
                    {src: '/assets/mobile/img/home/home2.png'},
                    {src: '/assets/mobile/img/home/home3.png'},
                ],
                gridArray: [
                    // {src: '/assets/mobile/img/home/8活动报名.jpg', text: '活动报名', isOpen: true,},
                    {src: '/assets/mobile/img/home/7会员申请.jpg', text: '会员管理', isOpen: true,},
                    {src: '/assets/mobile/img/home/9我的福利.jpg', text: '我的福利', isOpen: true,},
                    {src: '/assets/mobile/img/home/1民主管理.jpg', text: '民主管理', isOpen: true,},
                    {src: '/assets/mobile/img/home/6文体活动.jpg', text: '文体活动', isOpen: true,},
                    {src: '/assets/mobile/img/home/3职工权益.jpg', text: '职工权益', isOpen: true,},
                    {src: '/assets/mobile/img/home/2日常办公.jpg', text: '日常办公', isOpen: true,},
                    // {src: '/assets/mobile/img/home/4教育培训.jpg', text: '教育培训', isOpen: true,},
                    {src: '/assets/mobile/img/home/5校园文化.jpg', text: '校园文化', isOpen: true,},
                    {src: '/assets/mobile/img/home/11女工计生.png', text: '女工计生', isOpen: true,},
                    // {src: '/assets/mobile/img/home/10心理咨询.jpg', text: '法律援助', isOpen: true,},
                ]
            }
        },
        methods: {
            async loginOut() {
                const confirm = await vant.Dialog.confirm({
                    title: '提示',
                    message: '您确认要取消绑定吗？',
                })
                if (confirm === "confirm") {
                    window.location.href = "/platform/login/logout"
                }
            },
            tabbrChange(o) {
                this.needItems = []
                this.initData()
            },
            toUrl(o) {
                location.href = o.url
            },
            /**
             * 入学登记待办
             * @returns {Promise<void>}
             */
            async getRxdjAgenda() {
                const {data, code} = await $.get("/platform/rxdj/agent/getAgenda")
                if (code === 0) {
                    this.needItems = this.needItems.concat(data.filter(v => v.number > 0))
                }
            },
            async initData() {
                await this.getRxdjAgenda()
                this.needCount = this.needItems.length
            }
        },
        created() {
            this.initData()
        }
    })
</script>

<!--#
}
#-->