aiot-app/pages/tour_tally/check/detail.vue

<template>
  <view>
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="检查详情"
      @clickLeft="back"
    >
    </uni-nav-bar>
    <view class="check-content">
      <view class="title">
        {{ equiName }} <text>{{ equiCode }}</text></view
      >
      <view class="check-list">
        <CheckCard
          v-for="(item, index) in equipList"
          :item="item"
          class="mb20"
          :index="index"
          type="view"
        ></CheckCard>
      </view>
    </view>
  </view>
</template>

<script>
import { post } from '@/utils/api.js'
import CheckCard from './components/CheckCard.vue'
export default {
  components: { CheckCard },
  data () {
    return {
      pageId: '',
      page: 1,
      equipList: [],
      isEnd: false,
      equiName: '',
      equiCode: '',
      workOrderId: ''
    }
  },
  onLoad (options) {
    this.pageId = options.id
    this.equiName = options.equiName
    this.equiCode = options.equiCode
    this.workOrderId = +options.workOrderId
    this.getList()
  },
  onReachBottom () {
    if (this.isEnd) return
    this.page++
    this.getList()
  },
  methods: {
    getList () {
      const { page } = this
      post(
        this.apiUrl +
          `/workOrder/getEquipmentItemsListApp?size=10&page=${page}`,
        { planEquiId: +this.pageId, workOrderId: this.workOrderId },
        true
      ).then(res => {
        if (res?.success) {
          if (page === 1) {
            this.equipList = res.data.records
          } else {
            this.equipList.push(...res.data.records)
          }

          this.isEnd = this.equipList.length >= res.data.total
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.check-content {
  box-sizing: border-box;
  // height: calc(100vh - 88rpx);
  display: flex;
  flex-direction: column;
  .title {
    line-height: 80rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;
  }
  .check-list {
    flex: 1;
    overflow: auto;
    padding: 0 30rpx 30rpx;
  }
  .footer {
    height: 100rpx;
    display: flex;
    border: 1rpx solid $j-primary-border-green;
    .btn {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      border-radius: 0;
      &.primary {
        background-color: $j-primary-border-green;
        color: #fff;
      }
    }
  }

  .mb20 {
    margin-bottom: 20rpx;
  }
}
</style>