xiamen-sb-uniapp/pages/maintain/main.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">{{ detail.waitNum }}</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">{{ detail.sbNum }}</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">{{ detail.monthNum }}</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">{{ detail.compaleteNum }}</view>
                    <view class="text-center  f-size-24 text-color-white">本月保养记录</view>
                </u-col>
            </u-row>
        </view>
        <view >
            <u-cell-group class="my2" v-for="item in detail.sbInfoVOS" :key="item.id">
                <u-cell-item :title="item.name" @click="handleView(item.id)">
                    <u-badge :count="item.checkNum" :absolute="false" slot="right-icon"></u-badge>
                </u-cell-item>
                <view class="divider"></view>
            </u-cell-group>

        </view>
    </view>
</template>

<script>
import { stringify } from 'qs';

export default {
    data() {
        return {
            detail: {},
            params: {}
        }
    },
    onLoad(options) {
        this.params = options
    },
    onShow() {
        this.getData(this.params)
    },
    methods: {
        handleView(sbId) {
            const params = {
                filter: 0,
                sbId: sbId,
                timeFlag: this.params.timeFlag || null
            }
            uni.navigateTo({
                url: '/pages/maintain/maintain?' + stringify(params)
            });
        },
        getData(options) {
            console.log(options)
            this.$Http.getCheckJobDetail(options).then(res => {
                console.log(res)
                this.detail = res.data
            })
        }
    }
}
</script>

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