smart-app/pages/qualityInspection_fj/qualityInspection.vue

<template>
    <scroll-view scroll-y class="nav hc-qualityInspection-view" @scrolltolower="getList" style="height: 100vh;">
        <cu-custom bgColor="bg-blue1" :isBack="true">
            <block slot="backText"></block>
            <block slot="content">质量巡检</block>
        </cu-custom>
        <view class="page-bg-bar"/>
        <view class="cu-bar hc-search-bar">
            <view class="action">
                <uni-data-select class="action-data-select" v-model="searchForm.engineeringType" :localdata="typeData"/>
            </view>
            <view class="action">
                <uni-datetime-picker class="action-date-picker" v-model="pickerRange" type="daterange" @change="searchDateChange"/>
            </view>
            <view class="action">
                <button class="cu-btn bg-white">搜索</button>
            </view>
        </view>
        <!--列表-->
        <view class="hc-content-zindex">
            <view class="hc-data-card" @click="itemInfoTap">
                <view class="title-box">
                    <view class="title">工程名称</view>
                    <view class="date">2023-07-12</view>
                </view>
                <view class="name-bar">长安互通左幅1号桥</view>
                <view class="content-box">
                    <view class="title">分部工程类别：</view>
                    <view class="name">下部结构</view>
                    <view class="right-icons">
                        <uni-icons type="right" size="22" color="#858585"/>
                    </view>
                    <view class="tag-text">
                        <view class="text-bar">
                            <text class="type">病害类型：</text>
                            <text class="text">模板未清理</text>
                        </view>
                        <view class="text-bar">
                            <text class="type">严重程度：</text>
                            <text class="text">轻微</text>
                        </view>
                    </view>
                </view>
                <view class="action">
                    <button class="cu-btn bg-grey">已撤</button>
                </view>
            </view>
            <view class="hc-data-card">
                <view class="title-box">
                    <view class="title">工程名称</view>
                    <view class="date">2023-07-12</view>
                </view>
                <view class="name-bar">长安互通左幅1号桥</view>
                <view class="content-box">
                    <view class="title">分部工程类别：</view>
                    <view class="name">下部结构</view>
                    <view class="right-icons">
                        <uni-icons type="right" size="22" color="#858585"/>
                    </view>
                    <view class="tag-text">
                        <view class="text-bar">
                            <text class="type">病害类型：</text>
                            <text class="text">模板未清理</text>
                        </view>
                        <view class="text-bar">
                            <text class="type">严重程度：</text>
                            <text class="text">轻微</text>
                        </view>
                    </view>
                </view>
                <view class="action">
                    <button class="cu-btn bg-blue1" @click.stop="revocationTap">撤回</button>
                </view>
            </view>
        </view>
        <!--底部按钮-->
        <view style="height: 174rpx;"/>
        <view class="fixed-bottom">
            <button type="primary" @click="newRecordTap">新增记录</button>
        </view>
    </scroll-view>
</template>

<script>
export default {
    data() {
        return {
            title: "质量巡检",
            searchForm: {
                engineeringType: 1,
                startDate: '',
                endDate: '',
                diseaseType: '',
                severity: '',
                defectType: '',
                type: '',
                status: '',
                cs:1,
                pageSize:15,
            },
            page: 0,
            totalPage: 999,
            userid: null,
            project: null,
            qualityModifyInfoID: '',
            engineeringType: 1,
            pickerRange: [],
            typeData: [
                {value: 1, text: '隧道工程'},
                {value: 2, text: '桥梁工程'}
            ],
        }
    },
    onLoad() {
        const {id} = uni.getStorageSync("userInfo")
        this.project = uni.getStorageSync(`porject_${id}`);
        this.userid = id;
    },
    onShow() {
        this.resetPage();
        this.getList();
        this.getListNums();
    },
    methods: {
        searchDateChange(val) {
            if (val.length > 1) {
                this.searchForm.startDate = val[0];
                this.searchForm.endDate = val[1];
            } else {
                this.searchForm.startDate = '';
                this.searchForm.endDate = '';
            }
        },
        resetPage(){
            this.page = 0;
            this.totalPage = 999;
            this.taskList = [];
        },
        getList() {
            if(this.page >= this.totalPage){
                return;
            }
            this.page++;
            let form = this.searchForm
            this.http.request("/app/qualityModifyInfo/page",{
                ...form,
                page: this.page,
                projectId:this.project.id,
                contractId:this.project.contractId,
            }).then((json)=>{
                if(json.result == 1){
                    this.taskList = this.taskList.concat(json.datas);
                    this.totalPage = json.totalPage;
                }
            })
        },
        getListNums(){

        },
        //查看详情
        itemInfoTap(item) {
            uni.navigateTo({
                url: '/pages/qualityInspection_fj/qualityInfo'
            })
        },
        //撤回
        revocationTap() {

        },
        //新增记录
        newRecordTap() {
            uni.navigateTo({
                url: '/pages/qualityInspection_fj/addInspection'
            })
        },
    },
    filters: {
        timeStamp: function(value) {
            if (!value) return '';
            let now = new Date(value);
            let year = now.getFullYear();
            let month = now.getMonth() + 1;
            if (month < 10) {
                month = '0' + month
            }
            let date = now.getDate();
            if (date < 10) {
                date = '0' + date
            }
            return year + "-" + month + "-" + date
        },
    },
}
</script>

<style lang="scss">
page {
    background-color: #EFEFEF;
}
.hc-qualityInspection-view {
    .page-bg-bar {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 340rpx;
        border-radius: 0 0 160rpx 160rpx;
        background-color: rgba(47, 165, 255, 1);
        z-index: 1;
    }
    .hc-search-bar {
        position: sticky;
        top: 0;
        border: 2rpx solid rgba(255, 255, 255, .20);
        border-left: 0;
        border-right: 0;
        z-index: 222;
        .action {
            .action-data-select {
                width: 182rpx;
                flex: 182rpx;
            }
            .cu-btn {
                height: 54rpx;
                padding: 0 22rpx;
                font-size: 24rpx;
                border-radius: 6rpx;
            }
        }
    }
    .hc-content-zindex {
        position: relative;
        padding: 26rpx;
        z-index: 2;
    }
    .hc-data-card {
        .title-box {
            position: relative;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .title {
                font-weight: bold;
            }
        }
        .name-bar {
            padding: 0 10px 10px;
            position: relative;
            border-bottom: 1px solid #eee;
        }
        .content-box {
            position: relative;
            padding: 10px;
            .title {
                color: #858585;
            }
            .name {
                position: relative;
                padding: 12px 24px 12px 0;
            }
            .right-icons {
                position: absolute;
                right: 10px;
                bottom: 48%;
            }
            .tag-text {
                position: relative;
                display: flex;
                align-items: center;
                font-size: 14px;
                margin-top: 16px;
                .text-bar .type {
                    color: #858585;
                }
                .text-bar + .text-bar {
                    margin-left: 14px;
                }
            }
        }
        .action {
            position: absolute;
            right: 5px;
            bottom: 5px;
            .cu-btn {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                font-size: 14px;
            }
        }
    }

    .fixed-bottom {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        padding: 34rpx 34rpx calc(var(--window-bottom) + 38rpx);
        box-shadow: 0 -12rpx 10rpx -12rpx rgba(215, 224, 253, 100);
    }
}
</style>