Dining_Hall/pages/inventory/index.vue

<template>
  <view>
    <!-- 搜索 -->
    <div class="search">
      <u-input
        v-model="keyWord"
        placeholder="请输入搜索内容"
        suffixIcon="search"
        suffixIconStyle="color: #666"
        shape="circle"
        @blur="handleSearch"
      ></u-input>
    </div>
    <!-- 列表 -->
    <div class="list-cont" v-for="(item, index) in tableList" :key="index">
      <u-row justify="space-between" customStyle="margin-bottom: 10px; padding: 0 15px;">
        <u-col span="6">
          <div>{{ item.name }}</div>
        </u-col>
        <u-col span="6">
          <div style="text-align: end; color: #999">{{ item.model }}</div>
        </u-col>
      </u-row>
      <u-line style="margin-bottom: 5px"></u-line>
      <div class="list-item">
        <span>材料类型：</span>
        <span>{{ item.type }}</span>
      </div>
      <div class="list-item">
        <span>库存数量：</span>
        <span style="color: #5ae725">{{ item.kcNum }}</span>
      </div>
      <div class="list-item">
        <span>报废数量：</span>
        <span style="color: #f9ae3d">{{ item.dbfNum }}</span>
      </div>
    </div>

    <u-loadmore :status="status" line v-if="tableList.length > 10" />

    <!-- 空状态 -->
    <u-empty v-if="tableList.length == 0" mode="data"></u-empty>
  </view>
</template>

<script>
import { getInventoryList } from '@/api/aqSafety'

export default {
  data() {
    return {
      keyWord: '',
      status: 'loadmore',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableList: []
    }
  },
  onLoad() {
    this.getList()
  },
  methods: {
    handleSearch() {
      this.pageSize = 10
      this.getList()
    },
    async getList() {
      try {
        const params = {
          encryptedData: JSON.stringify({ keyWord: this.keyWord }),
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        console.log('🚀 ~ getList ~ params', params)
        const res = await getInventoryList(params)
        console.log('🚀 ~ getList ~ res', res)
        this.tableList = res.data.list
        this.total = res.data.total
      } catch (error) {
        console.log('🚀 ~ getList ~ error', error)
      }
    },
    onReachBottom() {
      console.log('🚀 ~ onReachBottom ~ ')
      if (this.total < 10 || this.total == this.tableList.length) {
        this.status = 'nomore'
        return
      }
      this.status = 'loading'
      setTimeout(() => {
        this.pageSize += 10
        this.getList()
        if (this.tableList.length != this.total) this.status = 'loadmore'
        else this.status = 'nomore'
      }, 500)
      console.log('加载..', this.pageSize)
    }
  }
}
</script>

<style lang="scss">
page {
  padding: 15px;
  background-color: #f8f8f8;
}
.search {
  margin-bottom: 15px;
}
.list-cont {
  padding: 15px 0;
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);

  .list-item {
    padding: 5px 15px;
  }
}
</style>