hf-pda/src/pages/eqInspection/eqInspection.vue

<template>
  <div class="eqInspection">
    <!-- navbar -->
    <van-sticky :offset-top="0">
      <van-nav-bar
        title="PDA设备巡检记录"
        left-arrow
        sticky
        class="eq-header"
        @click-left="onClickLeft"
      />
      <!-- @click-right="onClickRight" -->
    </van-sticky>
    <van-pull-refresh class="eq-main" v-model="isLoading" @refresh="onRefresh" ref="listMain">
      <!-- 信息列表主体 -->
      <!-- 搜索区域 -->
      <div class="eq-search">
        <div class="eq-search-back"></div>
        <div class="eq-search-main"></div>
      </div>
      <water-fall @click.native="getMore" :isOver="isOver"></water-fall>
    </van-pull-refresh>
  </div>
</template>

<script>
import { list, eqList } from '@/api/eqInspection'

export default {
  name: 'eqInspection',
  data () {
    return {
      queryList: {
        current: 1,
        endTime: '',
        equipmentId: '',
        size: 10,
        startTime: ''
      },
      isLoading: false,
      isOver: true,
      dataList: [],
      eqList: [],
      dataOption: {}
    }
  },
  mounted () {
    this.getDataList()
    this.getEqList()
    document.querySelector('.eq-main').addEventListener('scroll', this.handleScroll, true)
    // // 给浏览器加入一个空的历史纪录
    // window.history.pushState(null, null, document.URL)
    // // 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
    // window.addEventListener('popstate', this.onBrowserBack, false)
  },
  // destroyed () {
  //   window.removeEventListener('popstate', this.onBrowserBack, false)
  //   document.querySelector('.ol-main').removeEventListener('scroll', this.handleScroll, false)
  // },
  methods: {
    // 浏览器返回按钮监听
    // onBrowserBack () {
    //   if (this.show || this.showItem || this.showTypeId || this.showTypeCode) {
    //     this.show = false
    //     this.showItem = false
    //     this.showTypeId = false
    //     this.showTypeCode = false
    //     window.history.pushState(null, null, document.URL)
    //   } else {
    //     this.$router.goBack()
    //   }
    // },
    // 滚动事件监听
    handleScroll () {
      let clientHeight = document.documentElement.clientHeight // 客户区大小
      let scrollHeight = document.querySelector('.eq-main').scrollHeight // 没用滚动条的情况下，元素内容的总高度
      let scrollTop = document.querySelector('.eq-main').scrollTop // 被隐藏在内容区域上方的像素数
      let headerHeight = document.querySelector('.eq-header').offsetHeight// header高度
      let listHeight = clientHeight - headerHeight // list高度
      if (scrollTop - (scrollHeight - listHeight) >= -80 && this.isFirstScroll) {
        this.isFirstScroll = false
        this.pageNum += 1
        if (this.isOver) {
          this.isOver = !this.isOver
          this.getDataList()
          setTimeout(() => {
            this.isFirstScroll = true
          }, 2000)
        }
      }
    },
    // 瀑布流点击
    getMore () {
      if (this.isOver) {
        this.queryList.current += 1
        this.getDataList()
      }
    },
    // 获取信息列表
    async getDataList () {
      const result = await list(this.queryList)
      if (result.success) {
        this.dataList = result.data.records
        this.dataOption = result.data
        if (this.dataOption.total === this.queryList.current) {
          this.isOver = false
        } else {
          this.isOver = true
        }
        this.show = false
      } else {
        this.isOver = true
      }
    },
    // 获取设备列表
    async getEqList () {
      const result = await eqList({
        current: 1,
        size: 999
      })
      console.log(result)
    },
    // 分页器
    onChange (v) {
      this.getDataList()
    },
    // 返回上一页
    onClickLeft () {
      this.$router.goBack()
    },
    // 下拉刷新
    async onRefresh () {
      this.queryList.current = 1
      await this.getDataList()
      this.$toast.success('刷新成功')
      this.isLoading = false
    }
  }
}
</script>

<style lang="scss">
  .eqInspection {
    width: 100%;
    background: #F6F6F6;
    .eq-main {
      width: 100%;
      position: absolute;
      top: 1.5rem;
      bottom: 0;
      overflow: scroll;
    }

    .eq-header {
      background: #4271FF;
      .van-icon {
        color: #fff;
        font-size: .5rem;
      }
      .van-nav-bar__content {
        height: 1.5rem;
        line-height: 1.5rem;
        .van-nav-bar__title {
          color: #fff;
          font-size: .5rem;
        }
      }
    }
    .van-hairline--bottom::after {
      border-bottom-width: 0;
    }
    .eq-search {
      width: 100%;
      height: 3.625rem;
      position: relative;
      .eq-search-back {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 1rem;
        background: #4271FF;
      }
      .eq-search-main {
        position: relative;
        width: 94%;
        margin-left: 3%;
        height: 3.625rem;
        border-radius: .25rem;
        background: #fff;
        box-shadow: .02rem .02rem .1rem rgba($color: #000000, $alpha: .2);
      }
    }
  }
</style>