Vue加载更多

<template>
  <div class="container">
    <!-- 头部 -->
    <vHead />
    <!-- 头部 -->

    <el-row :gutter="10">
      <el-col :span="18">
        <div class="statusNav">
          <ul class="flexStart">
            <li @click="status = 1" :class="status === 1 ? 'active' : ''">
              <span>completed</span>
              <div class="line"></div>
            </li>
            <li @click="status = 0" :class="status === 0 ? 'active' : ''">
              <span>failed</span>
              <div class="line"></div>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="6">
        <el-select v-model="buyType" @change="buyTypeChange">
          <el-option :value="1" label="Sold"></el-option>
          <el-option :value="2" label="Buy in"></el-option>
        </el-select>
      </el-col>
    </el-row>

    <div class="status" v-infinite-scroll="getList(false, true)">
      <router-link :to="{ path: '/order/orderDetail', query: { id: item.id } }" tag="div" class="works between" v-for="item in listData" :key="item.id">
        <el-image :src="item.works.verticalCoverImage" fit="fit"></el-image>
        <div class="worksInfo between">
          <h4>{{ item.works.name }}</h4>
          <ul>
            <li>TokenId:&nbsp;&nbsp; {{ item.works.tokenId }}</li>
            <li>Author:&nbsp;&nbsp;{{ item.works.createUser.realname }}</li>
            <li>Buyer:&nbsp;&nbsp;{{ item.buyerUser.realname }}</li>
            <li>
              pay amount:&nbsp;&nbsp;{{ item.payAmount }}
              {{ item.priceUnit }}
            </li>
            <li>
              copyright amount:&nbsp;&nbsp;{{ item.copyrightAmount }}
              {{ item.priceUnit }}
            </li>
            <li class="money public_sty">sales num:&nbsp;&nbsp;{{ item.works.sellNum }}</li>
          </ul>
        </div>
        <div class="statusTxt between">
          <h6>{{ item.status == '1' ? 'completed' : 'failed' }}</h6>
          <time>{{ item.createTime }}</time>
        </div>
      </router-link>
    </div>
  </div>
</template>

export default {
  data() {
    return {
      buyType: 1,
      status: 1,
      query: {
        pageSize: 10,
        pageNo: 1,
        status: '1',
        column: 'createTime',
        order: 'desc'
      },
      total: 0,
      listData: [],
      userData: {}
    }
  },
  watch: {
    status(val) {
      this.query.status = val
      this.getList(true)
    }
  },
  created() {
    this.$isLogin()
    this.userData = this.$ls.get('loginData').userInfo
  },
  mounted() {
    this.query.seller = this.userData.walletAddress
    this.getList()
  },
  methods: {
    async getList(reload, next) {
      if (reload) {
        this.listData = []
        this.query.pageNo = 1
      }

      if (next) {
        if (this.query.pageNo * this.query.pageSize <= this.total) {
          this.query.pageNo++
        } else {
          return
        }
      }
      const { result } = await this.$api.get('/order/order/list', this.query)

      const { total, records } = result
      this.total = total
      this.listData.push(...records)
    },
    buyTypeChange(val) {
      this.query.seller = null
      this.query.buyer = null
      if (val === 1) {
        this.query.seller = this.userData.walletAddress
      } else {
        this.query.buyer = this.userData.walletAddress
      }

      this.getList(true)
    }
  }
}