parking_operation/pages/patrolManagement/emergencyDisposalRecords/emergencyDisposalRecords.vue

<!--
 * @Description: 应急处置记录
 * @Author: 空白格
 * @Date: 2022-08-01 09:27:24
 * @LastEditors: 空白格
 * @LastEditTime: 2022-11-16 11:41:03
 * @FilePath: \parking_operation\pages\patrolManagement\emergencyDisposalRecords\emergencyDisposalRecords.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved. 
-->
I
<template>
  <view class="records">
    <view class="records-list" v-if="recordList.length">
      <view class="records-list-item" v-for="(item, index) in recordList" :key="index">
        <view class="records-list-item-top">
          <view class="rlit-left">
            <view class="rlit-left-item"
              >路段/停车场：<text>{{ item.roadName }}</text></view
            >
            <view class="rlit-left-item"
              >处理员：<text>{{ item.processBy }}</text></view
            >
            <view class="rlit-left-item"
              >处理过程：<text>{{ item.processDes }}</text></view
            >
          </view>
          <view class="rlit-right">
            <u-icon name="arrow-right" color="#999" size="18" @click="viewDetails(item.id)"></u-icon>
          </view>
        </view>
        <view class="records-list-item-bottom">
          <view class="rlib-left">上报：{{ $u.timeFormat(item.createTime, 'mm月dd日hh:MM') }}</view>
          <view class="rlib-right" @click="viewDetails(item.id)">查看</view>
        </view>
      </view>
    </view>
    <view class="records-empty" v-else>
      <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" />
    </view>
    <u-loadmore v-if="recordList.length" :status="status" color="#fff" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      recordList: [],
      status: 'loadmore',
      page: 1
    };
  },
  onShow() {
    this.page = 1;
    this.recordList = [];
    this.getList();
  },
  methods: {
    /**
     * 获取应急处置记录列表
     * @date 2022-08-23
     * @returns {any}
     */
    getList() {
      uni.$u.api.emergencyDisposalApi.getEmergencyDisposalRecordsListApi({ pageNum: this.page, pageSize: 15 }).then((res) => {
        if (res.code === 200) {
          this.recordList = this.recordList.concat(res.data.rows);
          setTimeout(() => {
            if (this.page >= res.data.pages) this.status = 'nomore';
            else this.status = 'loading';
          }, 1000);
        }
      });
    },
    /**
     * 查看详情
     * @date 2022-08-23
     * @param {any} id
     * @returns {any}
     */
    viewDetails(id) {
      uni.$u.route({
        url: '/pages/patrolManagement/emergencyDisposalRecords/recordsDetails/recordsDetails',
        params: {
          id
        }
      });
    }
  },
  onPullDownRefresh() {
    this.recordList = [];
    this.page = 1;
    this.status = 'loading';
    this.getList();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onReachBottom() {
    if (this.page >= 100) return;
    this.status = 'loading';
    this.page = ++this.page;
    this.getList();
  }
};
</script>

<style lang="scss">
page {
  min-height: calc(100vh - 44px);
  background-color: #1767f2;
}
</style>
<style lang="scss" scoped>
@import './emergencyDisposalRecords.scss';
</style>