nsgk_mobile/src/views/supply/index.vue

<template>
  <div class="app-container">
    <navBar title="个人供求" background="0" positionType="fixed"></navBar>
    <van-tabs animated :swipeable="true">
      <van-tab title="供应信息">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          style="margin-top: 10px;"
          @load="getList"
        >
          <van-cell v-for="(item,index) in supplyList" :key="index" :to="{path:'/supply/supplyDetail',query:{id:item.id}}"  >
            <template #title>
              {{item.location}}
            </template>
            <template #label>
              <div style="display: flex;align-items: center;justify-content: space-between;">
                <p style="color:#2D87E8;display: flex;align-items: center;"><img src="../../../static/images/transaction_new/supply/supply_icon_01.png" alt="">{{item.phone}}</p>
                <p style="float: right;"><van-icon name="clock-o" color="#AAB1B5" style="margin-right: 5px;" />{{item.logintime}}</p>
              </div>
            </template>
            <template #right-icon>
              <div style="width: 5%;">
                <img src="../../../static/images/transaction_new/supply/supply_icon_02.png" style="position:absolute;right: 0;top: 0;" alt="">
              </div>
            </template>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="需求信息">
        <van-list
          v-model="loadingSecond"
          :finished="finishedSecond"
          finished-text="没有更多了"
          style="margin-top: 10px;"
          @load="getSecondList"
        >
          <van-cell v-for="(item,index) in supplySecondList" :key="index" :to="{path:'/supply/supplyDetail',query:{id:item.id}}">
            <template #title>
              {{item.location}}
            </template>
            <template #label>
              <div style="display: flex;align-items: center;justify-content: space-between;">
                <p style="color:#2D87E8;display: flex;align-items: center;"><img src="../../../static/images/transaction_new/supply/supply_icon_01.png" alt="">{{item.phone}}</p>
                <p style="float: right;"><van-icon name="clock-o" color="#AAB1B5" style="margin-right: 5px;" />{{item.logintime}}</p>
              </div>
            </template>
            <template #right-icon>
              <div style="width: 5%;">
                <img src="../../../static/images/transaction_new/supply/supply_icon_03.png" style="position:absolute;right: 0;top: 0;" alt="">
              </div>
            </template>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { supplyList } from "@/api/supply/index";
import navBar from "@/components/common/nav_bar.vue";

export default {
  name: "supply",
  components: { navBar },
  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 {
    height: 100vh;
    background: #F4F8FB;
  }
  /deep/ .van-tabs__content{
    background: transparent;
    /*border-radius: 20PX;*/
  }
  /deep/ .van-tabs__nav{
    /*background: transparent;*/
    padding-bottom: 0;
  }
  /deep/ .van-tab--active{
    background: #fff;
  }
  /deep/ .van-tab::after{
    display: none;
  }
  /deep/ .van-tabs__wrap{
    overflow: initial;
  }
  /deep/ .van-tabs__line{
    /*background: linear-gradient(to right, #5166f5, #97eedc);*/
    background: url("../../../static/images/transaction_new/tab_border.png") no-repeat center;
    height: 0.35rem;
    bottom: 0;
  }
  /deep/ .van-tab:nth-child(1)::before{
    content: "";
    position: absolute;
    left: auto;
    top: 0;
    right: -19%;
    bottom: 0;
    background: url("../../../static/images/yinnong/login_tab_icon.png") no-repeat center;
    background-size: 100% 100%;
    width: 20%;
  }
  /deep/ .van-tab:nth-child(2)::before{
    content: "";
    position: absolute;
    left: -19%;
    top: 0;
    right: auto;
    bottom: 0;
    /*background: url("../../../static/images/yinnong/login_tab_icon_right.png") no-repeat center;*/
    /*background-size: 100% 100%;*/
    width: 20%;
  }
  .van-cell{
    border-radius: 10Px;
    overflow: hidden;
    position: relative;
    width: 94%;
    margin: 0 auto 1vh;
  }
</style>