zhgdyunapp_vue3/pages/projectEnd/laborManage/safetyEducationManage/index.vue

<template>
  <view class="fullHeight">
    <headers :showBack="true" :themeType="'white'" class="fixedHeaderBox">
      <view class="headerName">
        安全教育培训
      </view>
    </headers>
    <view class="searchBox" :style="{ 'padding-top': (statusBarHeight+52) * 1.5 + 'rpx' }">
      <input type="text" v-model="searchForm.eduCourseName" confirm-type="search" class="input"
             placeholder-style="color:rgba(72, 141, 236, 0.5)" placeholder="按培训主题查找"
             @confirm="list=[];loadData()"/>
    </view>
    <view class="listBox" :style="{ 'padding-top': (statusBarHeight+52+40) * 1.5 + 'rpx' }">
      <view class="listItem" v-for="item in list" :key="item.id" @click="goAdd(item.id)">
        <view class="title">
          {{ item.eduCourseName }}
        </view>
        <view class="bottom">
          <text class="tags" v-if="item.eduType==1">入场</text>
          <text class="tags" v-if="item.eduType==2">定期</text>
          <text class="tags" v-if="item.eduType==3">入场</text>
          <text class="tags" v-if="item.eduType==4">VR</text>
          <text class="time">{{ item.eduTime }}</text>
          <text>{{ item.workernum }}人参与</text>
        </view>
        <image src="/static/icon-right.png" class="icon-right"></image>
      </view>
      <view class="placeholderBox" v-show="list.length==0">
        <image src="/static/noData.png" class="noDataImg"></image>
        <view class="text">
          暂无数据
        </view>
      </view>
    </view>
    <view class="loadMoreBox" v-if="isLoadMore&&list.length>0">
      <uni-load-more :status="loadStatus" iconType="auto"></uni-load-more>
    </view>
    <view style="height: 120rpx;">

    </view>
    <view class="bigOperateBtn" @click="goAdd('')">
      开始新培训
    </view>
  </view>
</template>

<script>
// import headers from "../../../components/headers/headers.vue"
// import uniLoadMore from "../../../../components/uni-load-more/uni-load-more.vue"
export default {
  data() {
    return {
      searchForm: {
        eduCourseName: "",
        eduType: "",
        pageNo: 1,
        pageSize: 10,
        projectSn: ""
      },
      projectDetail: {},
      list: [],
      statusBarHeight: 0,
      loadStatus: 'more',
      isLoadMore: false
    };
  },
  mounted() {
    // this.statusBarHeight=uni.getStorageSync('systemInfo').statusBarHeight
    // this.projectDetail=JSON.parse(uni.getStorageSync('projectDetail'))
    // this.searchForm.projectSn=this.projectDetail.projectSn
    // this.list=[]
    // this.loadData()
  },
  onShow() {
    this.searchForm.pageNo = 1;
    uni.removeStorageSync('person')
    this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight
    this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
    this.searchForm.projectSn = this.projectDetail.projectSn
    this.list = []
    this.loadData()
  },
  onReachBottom() {
    if (!this.isLoadMore) {  //此处判断，上锁，防止重复请求
      this.isLoadMore = true
      this.searchForm.pageNo += 1
      this.loadData()
    }
  },
  onPullDownRefresh() {
    this.searchForm.pageNo = 1
    this.list = []
    this.loadData()
  },
  methods: {
    loadData() {
      var that = this
      this.sendRequest({
        url: 'xmgl/workerSafeEducation/list',
        data: this.searchForm,
        method: "POST",
        success(res) {
          that.list = that.list.concat(res.result.records)
          if (res.result.records.length < that.searchForm.pageSize) {  //判断接口返回数据量小于请求数据量，则表示此为最后一页
            that.isLoadMore = true
            that.loadStatus = 'nomore'
          } else {
            that.isLoadMore = false
            // that.loadStatus='more'
          }
          uni.stopPullDownRefresh()
          console.log('that.isLoadMore', that.isLoadMore)
        }
      })
    },
    goAdd(id) {
      uni.navigateTo({
        url: './add?id=' + id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.searchBox {
  background-color: #2b8df3;
  padding: 0 30rpx 10rpx;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;

  .input {
    border-radius: 36rpx;
    height: 70rpx;
    text-align: center;
    background-color: white;
  }
}

.bigOperateBtn {
  position: fixed;
  bottom: 30rpx;
  left: 30rpx;
  width: calc(100% - 60rpx);
  background: #488DEC;
  box-shadow: 0px 4px 8px 0px rgba(43, 141, 243, 0.42);
  border-radius: 50rpx;
  height: 100rpx;
  line-height: 100rpx;
  color: white;
  font-size: 40rpx;
  text-align: center;
}

.listBox {
  margin: 30rpx;
}

.listItem {
  box-shadow: 0px 4px 26rpx 0px rgba(212, 220, 236, 0.53);
  position: relative;
  margin-bottom: 10rpx;
  padding: 30rpx;
  border-radius: 16rpx;

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

  .bottom {
    color: rgba(55, 45, 102, 0.5);
    font-size: 24rpx;
  }

  .tags {
    background-color: rgba(197, 117, 229, 1);
    border-radius: 4px;
    padding: 1px 6rpx;
    margin-right: 16rpx;
    color: white;
  }

  .time {
    margin-right: 24rpx;
  }
}

.icon-right {
  position: absolute;
  width: 16rpx;
  height: 28rpx;
  right: 30rpx;
  top: calc(50% - 7px);
}
</style>