xiamen-sb-uniapp/pages/maintain/mainPosition.vue

<template>
    <view class="u-swipe-content">
        <view class="header py3 p-relative">
            <view class="text-center py2 u-font-34 text-color-white">待保养总数</view>
            <view class="text-center  f-size-50 text-color-white">{{ list.length>0? list[0].waitNum:0 }}</view>
            <u-row class="p3 p-absolute row" style="bottom:0;" gutter="16" justify="space-between">
                <u-col span="4">
                    <view class="text-center py2 f-size-32 text-color-white">{{ list.length>0?list[0].sbNum:0 }}</view>
                    <view class="text-center  f-size-24 text-color-white">保养设备数</view>
                </u-col>
                <u-col span="4" >
                    <view class="text-center py2 f-size-32 text-color-white">{{ list.length>0?list[0].monthNum:0 }}</view>
                    <view class="text-center  f-size-24 text-color-white">本月保养任务</view>
                </u-col>
                <u-col span="4">
                    <view class="text-center py2 f-size-32 text-color-white">{{ list.length>0?list[0].compaleteNum:0 }}</view>
                    <view class="text-center  f-size-24 text-color-white">本月保养记录</view>
                </u-col>
            </u-row>
        </view>
        <view class="p2">
            <u-grid :col="3">
                <u-grid-item v-for="item in list" :key="item.positionId" @click="handleView(item.positionId)">
                    <u-badge :count="item.subWaitNum" ></u-badge>
                    <view class="grid-text">{{ item.positionName }}</view>
                </u-grid-item>
            </u-grid>
        </view>
    </view>
</template>

<script>
import { stringify } from 'qs';
export default {
    data() {
        return {
            list: [],
            timeFlag: null
        }
    },
    onLoad(options) {
        console.log(options)
        this.timeFlag = options.timeFlag
    },
    onShow() {
        this.getData()
    },
    methods: {
        handleView(positionId) {
            const params = {
                positionId: positionId,
                timeFlag: this.timeFlag || null
            }
            uni.navigateTo({
                url: '/pages/maintain/main??' + stringify(params)
            });
        },
        getData() {
            this.$Http.getCheckJob({ timeFlag: this.timeFlag }).then(res => {
                console.log(res)
                this.list = res.data
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.header{
   height:380rpx;
   width: 100vw;
   background: #0082FF;
}
.u-swipe-content{
    min-height: calc(100vh - 88rpx);
}
.grid-text{
    height: 150rpx;
    line-height: 150rpx;
}
</style>