zhgdyunapp_vue3/pages/projectEnd/qualityManage/projectList.vue

<template>
  <view class="projectList">
    <view class="fixedheader">
			<headers :showBack="true">
				<view class="headerName">
					项目自检
				</view>
			</headers>
		</view>
    <scroll-view class="smallHeight" :style="{ 'padding-top': (statusBarHeight + 45) * 1.5 + 'rpx' }" scroll-y>
      <view class="project-list">
        <view v-if="dataList&&dataList.length>0">
          <view class="project-item flex a-center" v-for="(item,index) in dataList" :key="index"
            @click="jumpPage(item)">
            <view class="project-detail">
              <view class="project-title">{{ item.taskName }}</view>
              <view class="project-content flex">
                <view class="project-num content flex f-column j-center">
                  <text>{{ item.count.inspectNum }}</text>
                  隐患总数
                </view>
                <view class="project-type content flex f-column j-center">
                  <text class="type1">{{ item.count.notEndNum }}</text>
                  未闭合总数
                </view>
                <!-- <view class="project-type content flex f-column j-center"><text :class="{'type1': index < 2, 'type2': index > 1 }">{{index > 1 ? "已闭合":"待整改"}}</text>隐患整改情况</view> -->
                <view class="content">检查类型：{{ item.inspectTypeName }}</view>
                <view class="content">创建人：{{ item.createUserName }}</view>
              </view>
              <view class="project-date">计划检查时间：{{ item.startTime }}至{{ item.endTime }}</view>
            </view>
            <!-- <view class="project-status" :class="{'status1': index < 2, 'status2': index > 1}">
              {{index > 1 ? "任务已结束":"任务已下发"}}
            </view> -->
          </view>
          <view class="loadMoreBox" v-if="isLoadMore">
            <uni-load-more :status="loadStatus" iconType="auto"></uni-load-more>
          </view>
        </view>

        <view class="no-data" v-else>
          <image class="img" src="/static/noData.png"></image>
          <text class="txt">暂无数据</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import headers from '../../../components/headers/headers.vue'

  export default {
    data() {
      return {
        statusBarHeight: 0,
        userId: "",
        projectSn: "",
        dataList: [],
        loadStatus: 'more',
        isLoadMore: false,
        pageNo: 1,
        pageSize: 10
      }
    },
    onShow() {
      this.dataList = []
      this.pageNo = 1
      this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
      this.projectSn = JSON.parse(uni.getStorageSync('userInfo')).sn
      this.userId = JSON.parse(uni.getStorageSync('userInfo')).userId
      this.queryList()
    },
    onReachBottom() {
      console.log(1)
      if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
        this.isLoadMore = true
        this.pageNo += 1
        this.queryList()
      }
    },
    onPullDownRefresh() {
      console.log(2)
      this.pageNo = 1
      this.dataList = []
      this.queryList()
    },
    methods: {
      jumpPage(val) {
        uni.navigateTo({
          url: './taskList?id=' + val.id
        })
      },
      queryList() {
        let data = {
          inspectUser: this.userId,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          sn: this.projectSn,
          type: 2
        }
        let _this = this
        this.sendRequest({
          url: 'xmgl/inspectTaskRecord/list',
          method: 'post',
          data: data,
          success: (res) => {
            // this.dataList = res.result.records
            this.dataList = this.dataList.concat(res.result.records)
            if (res.result.records.length < this.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
              this.isLoadMore = true
              this.loadStatus = 'nomore'
            } else {
              this.isLoadMore = false
              // that.loadStatus='more'
            }
            uni.stopPullDownRefresh()
            console.log(res.result, 'lll')
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .projectList {
    min-height: 100%;
    background: #F6F6F6;

    .fixedheader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 2;
    }

    .smallHeight {
      height: 100%;
      box-sizing: border-box;
    }

    .flex {
      display: flex;
    }

    .f-column {
      flex-direction: column;
    }

    .a-center {
      align-items: center;
    }

    .j-center {
      justify-content: center;
    }

    .type1 {
      color: #FF7524;
    }

    .type2 {
      color: #127FEC;
    }

    .project-list {
      padding: 30rpx;
      padding-top: 24rpx;

      .project-item {
        background: #fff;
        width: 100%;
        border-radius: 10rpx;
        padding: 30rpx 24rpx 28rpx 42rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        margin-bottom: 24rpx;
        box-shadow: 4rpx 16rpx 20rpx #E8E8E8;

        .project-detail {
          margin-right: 18rpx;

          .project-title {
            font-size: 30rpx;
            font-weight: bold;
            margin-bottom: 18rpx;
          }

          .project-content {
            flex-wrap: wrap;
            color: #71737F;

            .content {
              width: 50%;
              margin-bottom: 8rpx;
            }

            .project-num {
              text-align: center;
              margin-bottom: 20rpx;

              uni-text {
                font-size: 30rpx;
                font-weight: bold;
                color: #2A2E3F;
                margin-bottom: 4rpx;
              }
            }

            .project-type {
              text-align: center;
              margin-bottom: 20rpx;

              uni-text {
                font-size: 30rpx;
                margin-bottom: 4rpx;
                // color: #2A2E3F;
              }
            }
          }

          .project-date {
            color: #71737F;
          }
        }

        .project-status {
          white-space: nowrap;
          padding: 6rpx 18rpx;
          color: #fff;
          border-radius: 22rpx;
        }

        .status1 {
          background: linear-gradient(to right, rgba(255, 133, 30, 1), rgba(255, 133, 30, 0.1));
        }

        .status2 {
          background: linear-gradient(to right, rgba(103, 178, 253, 1), rgba(103, 178, 253, 0.1));
        }
      }
    }
  }

  .no-data {
    text-align: center;

    .img {
      display: block;
      height: 200rpx;
      width: 200rpx;
      margin: 0 auto;
      margin-top: 60rpx;
      margin-bottom: 60rpx;
    }

    .txt {
      color: #C0C4CC;
    }
  }
</style>