client-app/pages/index/index.vue

<template>
    <hc-sys :tabbar="false" isNavBar navBarUi="home-nav-bar">
        <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>
        <view class="relative px-5" v-if="msgCountData.taskCount > 0">
            <uni-notice-bar class="radius" show-icon :text="`您有${msgCountData.taskCount}条待办任务，请注意及时处理`" @click="toTaskPage"/>
        </view>
        <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':''"
                      @click="toNoAuth"
                >
                    <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':''"
                      @click="toTaskPage"
                >
                    <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':''"
                      @click="toNoAuth"
                >
                    <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':''"
                      @click="toNoAuth"
                >
                    <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':''"
                      @click="toNoAuth"
                >
                    <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':''"
                      @click="toNoAuth"
                >
                    <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':''"
                      @click="toNoAuth"
                >
                    <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':''"
                      @click="toNoAuth"
                >
                    <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">{{projectInfo.projectName}}</view>
                <view class="contrac-name">{{contractInfo.contractName}}</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, watch} from "vue";
import {useAppStore} from "@/store";
import {onShow, onHide} from '@dcloudio/uni-app'
import mainApi from '~api/user/index';
import {errorToast} from "@/utils/tools";

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

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

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

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

//深度监听长连接消息
watch(() => [
    store.msgCountData,
], ([val]) => {
    msgCountData.value = val
}, {deep: true,})

//获取配置
const appCheck = ref(1)
const userConfigInfo = async () => {
    const { data } = await mainApi.userConfigInfo()
    appCheck.value = data?.appCheck ?? 1
}

//资料填报
const isPopovershow = ref(false);
const isDataFill = () => {
    if (appCheck.value === 2) {
        homeToPage('/pages/data-fill/index')
    } else {
        isPopovershow.value = true;
    }
}

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

//开始填报
const startDataFill = async () => {
    isPopovershow.value = false;
    if (checkbox1.value.length > 0) {
        mainApi.userConfigSave({
            appCheck: 2
        }).then()
    }
    homeToPage('/pages/data-fill/index')
}

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

//跳转到任务页面
const toTaskPage = () => {
    uni.switchTab({
        url: '/pages/task/index'
    })
}
const toNoAuth = () => {
  errorToast('此功能还在开发中')
}
</script>
<style lang="scss">
:deep(.home-nav-bar) {
    background-color: #EFEFF4;
}
</style>
<style lang="scss" scoped>
@import "@/style/index/index.scoped.scss";
</style>