OfficeApp/components/task/index.vue

<template>
  <view class="c_task_index">
    <u-sticky bgColor="#f5f5f5" offsetTop="44px">
      <!-- <u-tabs :list="tabLists" @click="changeCurrent" lineColor='#3274F9' :scrollable="false"
        inactiveStyle='color:#666' activeStyle="color:#3274F9"></u-tabs> -->
      <uni-segmented-control :current="current" :values="['全部','已完成']" styleType="text"
        @clickItem="changeCurrent" activeColor="#3274F9"></uni-segmented-control>
    </u-sticky>
    <view class="c_task_index_list">
      <view v-for="item in list" :key="item.id">
        <taskItem :datas="item"></taskItem>
      </view>
    </view>
    <u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText"
      :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
    <!-- <u-empty icon="/static/img/empty/data.png" text="没有数据"></u-empty> -->
  </view>
</template>

<script>
  import { Toast } from "../../libs/uniApi";
  import taskItem from "./taskItem.vue";
  import { taskLists } from "@/api/task.js";
  export default {
    name: "task",
    components: { taskItem },
    data() {
      return {
        current: 0,
        status: 0,
        // tabLists: [{
        //   name: '全部',
        // }, {
        //   name: '已完成'
        // }, {
        //   name: '未完成'
        // }],
        loadConfig: {
          page: 1,
          limit: 25,
          loadingText: '努力加载中',
          loadmoreText: '轻轻上拉',
          nomoreText: '我也是有底线的~~',
          status: 'loadmore'
        },
        list: []
      };
    },
    created() {
      this.initLoadConfig();
    },
    methods: {
      navTo(url) {
        url ?
          uni.navigateTo({
            url: url
          }) : Toast('暂未开放')
      },
      changeCurrent(e) {
        if (this.current !== e.currentIndex) {
          this.current = +e.currentIndex;
          switch (this.current) {
            case 1:
              this.status = 3;
              break;
            case 2:
              this.status = 5;
              break;
            default:
              this.status = 0;
          }
          this.initLoadConfig();
        }
      },
      initLoadConfig() {
        this.loadConfig.page = 1;
        this.loadConfig.status = 'loadmore';
        this.list = [];
        this.loadList();
      },
      async loadList() {
        if (this.loadConfig.status == "nomore") return;
        this.loadConfig.status = "loading";
        let res = await taskLists({
          page: this.loadConfig.page,
          status: this.status,
          limit: this.loadConfig.limit
        });
        this.loadConfig.status = "loadmore"
        if (res.data.length < this.loadConfig.limit) {
          this.loadConfig.status = "nomore"
        } else {
          this.loadConfig.page++;
        }
        this.list = [...this.list, ...res.data];
      }
    }
  }
</script>

<style lang="scss">
  .c_task_index {
    padding-bottom: 100rpx;

    .c_task_index_list {
      padding-top: 28rpx;

    }
  }
</style>