item-management-vant/src/views/personal/doneList.vue

<template>
  <div>
    <BackBar title="已办任务-个贷" lefttext="返回" />
    <van-search v-model="listQuery.keyword" placeholder="请输入项目编号或坐落" @search="onSearch()" />
    <van-pull-refresh v-model="loading" @refresh="onRefresh()">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getDoneList()">
        <div class="card" v-for="item in listData" :key="item.id">
          <div class="businessTitle">
            <van-icon name="link-o" />
            {{ item.orderId }}
          </div>
          <div class="projectName">
            <div>
              <van-icon name="location-o" />
              {{ item.location }}
            </div>
          </div>
          <div class="clientInfo">
            <div>
              <van-icon name="contact-o" />
              {{ item.clientName }}-{{ item.clientSubName}}
            </div>
          </div>
          <div class="clientInfo">
            <div>
              <van-icon name="notes-o" />
              {{ item.comments ? item.comments : '-' }}
            </div>
          </div>
          <div>
            <van-tag type="success" size="medium" class="van-tag">{{ item.nodeName }}</van-tag>
            <van-tag type="success" size="medium" class="van-tag" v-if="item.state === '提交'">{{ item.state }}</van-tag>
            <van-tag type="warning" size="medium" class="van-tag" v-if="item.state !== '提交'">{{ item.state }}</van-tag>
            <van-tag type="primary" size="medium" class="van-tag">{{ item.handler }}</van-tag>
            <van-tag color="#969799" size="medium" class="van-tag">{{ item.finishTime }}</van-tag>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <van-back-top right="10vw" bottom="10vh" />
  </div>
</template>

<script>
import { taskDoneList } from '@/api/personal';

export default {
  data() {
    return {
      loading: false,
      listData: [],
      finished: false,
      listQuery: {
        // 当前页数
        current: 1,
        // 查询关键字
        keyword: null,
      },
    };
  },
  created() {
    this.getDoneList();
  },
  methods: {
    // 列表刷新
    onRefresh() {
      this.listQuery.current = 1;
      this.finished = false;
      this.listData = [];
      this.getDoneList();
    },
    // 列表关键字搜索
    onSearch() {
      this.listQuery.current = 1;
      this.finished = false;
      this.listData = [];
      this.getDoneList();
    },
    // 获取我的订单
    getDoneList() {
      this.loading = true;
      taskDoneList(this.listQuery).then((res) => {
        if (res.code == 200) {
          if (res.data.records) {
            this.listData = this.listData.concat(res.data.records);
          }
          // 判断是否还有下一页
          if (res.data.pages > this.listQuery.current) {
            // 服务端返回的总页数大于当前页数, 将当前页数+1
            this.listQuery.current++;
          } else {
            // 反之停止加载
            this.finished = true;
          }
        }
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped>
.card {
  background-color: white;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
}

.projectName {
  width: 100%;
  margin-bottom: 5px;
  display: flex;
}

.van-tag {
  margin: 2px;
}

.businessTitle {
  font-weight: bold;
  margin-bottom: 5px;
}

/deep/ .van-tabs__wrap {
  width: 100%;
}

.clientInfo {
  margin-bottom: 5px;
}
</style>