nsgk_mobile/src/views/supply/index.vue

<template>
  <div class="app-container">
    <van-nav-bar
      title="个人供求"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />
    <van-tabs animated color="#007b76" type="card" style="margin-top: 10px;">
      <van-tab>
        <template #title><van-icon name="label" size="18" style="top: 4px"/>供应信息</template>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          style="margin-top: 10px;"
          @load="getList"
        >
          <van-cell icon="play" v-for="(item,index) in supplyList" :key="index" >
            <template #title>
              {{item.location}}
            </template>
            <template #label>
              联系电话：{{item.phone}} <p style="float: right;">发布时间：{{item.logintime}}</p>
            </template>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="选项">
        <template #title><van-icon name="bookmark" size="18" style="top: 4px"/>需求信息</template>
        <van-list
          v-model="loadingSecond"
          :finished="finishedSecond"
          finished-text="没有更多了"
          style="margin-top: 10px;"
          @load="getSecondList"
        >
          <van-cell icon="play"  v-for="(item,index) in supplySecondList" :key="index">
            <template #title>
              {{item.location}}
            </template>
            <template #label>
              联系电话：{{item.phone}} <p style="float: right;">发布时间：{{item.logintime}}</p>
            </template>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { supplyList } from "@/api/supply/index";
export default {
  name: "supply",
  data() {
    return {
      //是否显示加载
      loading: false,
      //是否滚动到底部
      finished: false,
      //是否显示加载
      loadingSecond: false,
      //是否滚动到底部
      finishedSecond: false,
      //查询参数
      queryParams: {
        deptId:100,
        pageNum:1,
        pageSize:10,
        supplyDemandType:1
      },
      //查询参数
      querySecondParams: {
        deptId:100,
        pageNum:1,
        pageSize:10,
        supplyDemandType:2
      },
      //数据集合
      supplyList:[],
      //数据集合
      supplySecondList:[],

    };
  },
  created() {},
  methods: {
    getList(){
      this.loading = true;
      supplyList(this.queryParams).then(response => {
        console.log(response)
        this.supplyList = response.rows;
        if(this.supplyList.length >= response.total){
          this.finished = true;
          return;
        }
        this.queryParams.pageNum += 1 ;
        this.loading = false;
      });
    },
    getSecondList(){
      this.loadingSecond = true;
      supplyList(this.querySecondParams).then(response => {
        console.log(response)
        this.supplySecondList = response.rows;
        if(this.supplySecondList.length >= response.total){
          this.finishedSecond = true;
          return;
        }
        this.queryParams.pageNum += 1 ;
        this.loadingSecond = false;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
}
  .titleClass{

  }
</style>