client-app/pages/index/index.vue

<template>
    <hc-sys :tabbar="false" isNavBar>
        <template #navBar>
            <view class="hc-home-nav-bar px-5 py-4">
                <view class="title">应用主页</view>
                <view class="icon">
                    <text class="i-ri-layout-masonry-fill" v-if="isListType" @click="isListType = false"/>
                    <text class="i-material-symbols-view-list-rounded" v-else @click="isListType = true"/>
                </view>
            </view>
        </template>
        <template v-if="!isListType">
            <view class="hc-flex-conten mt-4">
                <view class="left-col-card-1" :class="isAnimation?'is-animation':''" @click="isDataFill">
                    <view class="card-bg">
                        <view class="icon">
                            <text class="i-solar-calendar-search-outline"/>
                        </view>
                    </view>
                    <view class="text-box">
                        <text class="text">资料填报</text>
                    </view>
                </view>
                <view class="right-col-card-1" :class="isAnimation?'is-animation':''">
                    <view class="card-bg">
                        <text class="text">进度查询</text>
                    </view>
                    <view class="icon">
                        <text class="i-ic-outline-list-alt"/>
                    </view>
                </view>
                <view class="right-col-card-2"
                      :class="isAnimation?'is-animation':''"
                      @click="homeToPage('/pages/ledger/index')"
                >
                    <view class="card-bg">
                        <text class="text">日志填报</text>
                    </view>
                    <view class="icon">
                        <text class="i-mdi-text-box-edit-outline"/>
                    </view>
                </view>
            </view>
            <view class="hc-flex-conten __150 mt-4">
                <view class="left-col-card-2" :class="isAnimation?'is-animation':''">
                    <view class="card-bg">
                        <view class="icon">
                            <text class="i-fluent-task-list-square-settings-20-filled"/>
                        </view>
                        <view class="text-box">
                            <text class="text">任务管理</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="hc-flex-conten __180 mt-4">
                <view class="left-col-card-3"
                      :class="isAnimation?'is-animation':''"
                      @click="homeToPage('/pages/image/index')"
                >
                    <view class="card-bg">
                        <view class="icon">
                            <text class="i-solar-videocamera-record-linear"/>
                        </view>
                    </view>
                    <view class="text-box">
                        <text class="text">声像资料</text>
                    </view>
                </view>
                <view class="right-col-card-3" :class="isAnimation?'is-animation':''">
                    <view class="card-bg">
                        <view class="icon">
                            <text class="i-icon-park-outline-history-query"/>
                        </view>
                        <text class="text">资料查询</text>
                    </view>
                </view>
                <view class="right-col-card-4" :class="isAnimation?'is-animation':''">
                    <view class="card-bg">
                        <text class="text">工单消息</text>
                    </view>
                    <view class="icon">
                        <text class="i-icon-park-outline-message"/>
                    </view>
                </view>
            </view>
        </template>
        <template v-else>
            <view class="hc-list-container">
                <view class="hc-list-item shadow-sm" :class="isAnimation?'a-l':''" @click="isDataFill">
                    <view class="icon bg-1">
                        <text class="i-solar-calendar-search-outline"/>
                    </view>
                    <view class="container">
                        <view class="title">资料填报</view>
                        <view class="text">派发监理通知单及监理指令</view>
                    </view>
                </view>
                <view class="hc-list-item shadow-sm" :class="isAnimation?'a-r':''">
                    <view class="icon bg-2">
                        <text class="i-ic-outline-list-alt"/>
                    </view>
                    <view class="container">
                        <view class="title">进度查询</view>
                        <view class="text">资料进度数据统计查询</view>
                    </view>
                </view>
                <view class="hc-list-item shadow-sm"
                      :class="isAnimation?'a-l':''"
                      @click="homeToPage('/pages/ledger/index')"
                >
                    <view class="icon bg-3">
                        <text class="i-mdi-text-box-edit-outline"/>
                    </view>
                    <view class="container">
                        <view class="title">日志填报</view>
                        <view class="text">施工及监理日志填报</view>
                    </view>
                </view>
                <view class="hc-list-item shadow-sm" :class="isAnimation?'a-r':''">
                    <view class="icon bg-4">
                        <text class="i-fluent-form-48-regular"/>
                    </view>
                    <view class="container">
                        <view class="title">资料填报</view>
                        <view class="text">质检资料及试验资料数据填报</view>
                    </view>
                </view>
                <view class="hc-list-item shadow-sm"
                      :class="isAnimation?'a-l':''"
                      @click="homeToPage('/pages/image/index')"
                >
                    <view class="icon bg-5">
                        <text class="i-solar-videocamera-record-linear"/>
                    </view>
                    <view class="container">
                        <view class="title">声像资料</view>
                        <view class="text">拍照及上传影像资料</view>
                    </view>
                </view>
                <view class="hc-list-item shadow-sm" :class="isAnimation?'a-r':''">
                    <view class="icon bg-6">
                        <text class="i-icon-park-outline-history-query"/>
                    </view>
                    <view class="container">
                        <view class="title">资料查询</view>
                        <view class="text">质检及试验报表资料查看</view>
                    </view>
                </view>
                <view class="hc-list-item shadow-sm" :class="isAnimation?'a-l':''">
                    <view class="icon bg-7">
                        <text class="i-solar-calendar-linear"/>
                    </view>
                    <view class="container">
                        <view class="title">施工台账</view>
                        <view class="text">完善外业台账数据</view>
                    </view>
                </view>
            </view>
        </template>
        <!--弹窗-->
        <view class="hc-popover-box" :class="isPopovershow ? 'show' : ''">
            <view class="img-box">
                <view class="img-bg"/>
            </view>
            <view class="close-icon" @click="closePopover">
                <text class="i-material-symbols-cancel-rounded"/>
            </view>
            <view class="hc-popover-container">
                <view class="project-name">项目名称</view>
                <view class="contrac-name">合同段名称</view>
                <view class="tip-title">填报规则温馨提示</view>
                <view class="tip-content-box">
                    <view class="tip-item">
                        <view class="icon">
                            <text class="i-ri-magic-fill"/>
                        </view>
                        <view class="text">填报之后务必点击保存按钮，避免数据丢失</view>
                    </view>
                    <view class="tip-item">
                        <view class="icon">
                            <text class="i-ri-magic-fill"/>
                        </view>
                        <view class="text">灰色按键为非必填项，系统已内置公式模型，可不用手动填写</view>
                    </view>
                    <view class="tip-item">
                        <view class="icon">
                            <text class="i-ri-magic-fill"/>
                        </view>
                        <view class="text">当前工序上报的报表数据必填项少于90%的填报率，系统不允许上报</view>
                    </view>
                </view>
                <view class="mt-16">
                    <uni-data-checkbox multiple v-model="checkbox1" :localdata="hobby"/>
                </view>
                <view class="mt-10">
                    <button class="hc-btn rounded-36" type="primary" @click="startDataFill">开始填报</button>
                </view>
            </view>
        </view>
    </hc-sys>
</template>

<script setup>
import {ref} from "vue";
import {useAppStore} from "@/store";
import {onShow, onHide} from '@dcloudio/uni-app'

//变量
const store = useAppStore()
const isListType = ref(false);
const checkbox1 = ref([])
const hobby = [{text: '以后忽略此页面提示', value: 0}]

//是否动画
const isAnimation = ref(store.isAnimation)

onShow(()=>{
    if(store.isAnimation) {
        isAnimation.value = true
    }
})

onHide(() => {
    isAnimation.value = false
})

//资料填报
const isPopovershow = ref(false);
const isDataFill = () => {
    isPopovershow.value = true;
}

//关闭弹窗
const closePopover = () => {
    isPopovershow.value = false;
}

//开始填报
const startDataFill = () => {
    isPopovershow.value = false;
    homeToPage('/pages/data-fill/index')
}

//跳转页面
const homeToPage = (url) => {
    uni.navigateTo({
        url: url
    })
}
</script>

<style lang="scss" scoped>
@import "@/style/index/index.scoped.scss";
</style>