visitor/src/views/applyRecord.vue

<template>
  <div class='box' @scroll="onScroll">
    <div v-for="item in recordArr" class="apply-list" :key="item.id">
      <h3 class="h3">
        <span>提交时间：{{ item.createTime }}</span>
        <!-- refuse拒绝 pass通过 状态 -->
        <div class="status" :class="stateEnum[item.status].className">{{ stateEnum[item.status].statusName }}</div>
      </h3>
      <div class="apply-content">
        <div class="user-info">
          <img src="../assets/lanseyuanquan.png" alt="">
          <span>拜访人：{{ item.name }}</span>
        </div>
        <div class="user-info">
          <img src="../assets/huangseyuanquan.png" alt="">
          <span>拜访时间：{{ item.hours }}</span>
        </div>
        <p>
          {{ item.status == 2 && item.remark ? item.remark : stateEnum[item.status].statusText }}
          <span class="triangle"></span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { rulesForm, resetForm, rulesPhone } from '@/com/index'
import { postApply, getVisitor, getByPhone } from '@/api/user.js'
import { Toast, ImagePreview  } from 'vant';
/* @data */
  const router = useRouter()
  const route = useRoute()
  const store = useStore()
  // console.log(route.params.iphone)
  const query = reactive({
    // phone: route.params.iphone,
    current: 1,
    size: 10
  })
  const total = ref()
  const recordArr = ref([])
  const stateEnum = store.state.stateEnum
  
/* @setup */
  console.log(localStorage.getItem('userToken'))
    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    console.log(windowHeight)
    getByPhone(query).then(res =>{
      // console.log(res)
      recordArr.value = res.data
      total.value = res.total
      // alert(windowHeight)

    }).catch(err =>{
      console.log(err)
    })
/* @method */
  let old = 0
  const onScroll = (e) =>{
    if(e.target.scrollTop > old){ // 说明是下拉
      if(e.target.scrollHeight <= windowHeight + Math.ceil(e.target.scrollTop) ){ // 说明到底了
        console.log('到底了')
        if(recordArr.value.length < total.value ){
          query.current++
          getList()
        }else{
          Toast.success('数据已全部加载完成！');

        }
      }
    }else{ // 说明是上拉

    }
    old = e.target.scrollTop
    
    // setTimeout(()=>{
    //   alert(e.target.scrollHeight - e.target.scrollTop)

    // },2000)
  }
  const getList = () =>{
    Toast.loading({ duration: 0, forbidClick: true, message: '加载中', });
    getByPhone(query).then(res =>{
      // console.log(res)
      recordArr.value = [ ...recordArr.value , ...res.data]
      total.value = res.total
      Toast.clear();

    }).catch(err =>{
      query.current--
      console.log(err)
    })
  }
</script>

<style lang='scss' scoped>
.box{
  width: 100%;
  height: 100vh;
  overflow: auto;
  background: #EDEDED;
  padding: .4rem /* 30/75 */;
  box-sizing: border-box;
  .apply-list{
    width: 100%;
    // height: 5.0667rem /* 380/75 */;
    background: #FFFFFF;
    border-radius: .2667rem /* 20/75 */;
    padding: 0 .4rem /* 30/75 */ .5867rem /* 44/75 */;
    box-sizing: border-box;
    margin-bottom: .4rem /* 30/75 */;
    
    
    .h3{
      width: 100%;
      height: 1.2267rem /* 92/75 */;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: .0267rem /* 2/75 */ dashed #D9D9D9;
      padding: 0 .1067rem /* 8/75 */;
      box-sizing: border-box;
      span{
        font-size: $sm-size;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #999999;
      }
      .status{
        font-size: $size26;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        color: #448CF7;
      }
      .pass{
        color: #18C297;
      }
      .refuse{
        color: #FF6643;
      }
    }
    .apply-content{
      width: 100%;
      padding: .5067rem /* 38/75 */ 0 0;
      .user-info{
        padding: 0 .24rem /* 18/75 */;
        box-sizing: border-box;
        font-size: $md-size;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #000000;
        display: flex;
        align-items: center;
        height: .56rem /* 42/75 */;
        margin-bottom: .2133rem /* 16/75 */;
        img{
          width: .2667rem /* 20/75 */;
          height: .2667rem /* 20/75 */;
          margin-right: .2133rem /* 16/75 */;
        }
      }
      p{
        position: relative;
        width: 8.2133rem /* 616/75 */;
        padding:  .2133rem /* 16/75 */ .4533rem /* 34/75 */;
        box-sizing: border-box;
        line-height: .48rem /* 36/75 */;
        // height: .9067rem /* 68/75 */;
        background: #EAEEF6;
        // background: #fff;
        border-radius: .1333rem /* 10/75 */;
        font-size: $sm-size;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #5F6583;
        margin-top: .5067rem /* 38/75 */;
        .triangle{
          position: absolute;
          top: -.08rem /* 6/75 */;
          left: .5333rem /* 40/75 */;
          width: .2rem /* 15/75 */;
          height: .2rem /* 15/75 */;
          transform: rotateZ(-45deg);
          background: #EAEEF6;
        }
      }
     
    }
    
  }
}
</style>