vant 列表+下拉刷新

<!-- 随访任务 -->
<template>
  <div class="task">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-if="taskList.length>0" v-model="loading" :error.sync="error" :offset="offset" :finished="finished" finished-text="没有更多了" @load="getTaskList">
        <div v-for="(item,index) in taskList" :key="index" class="taskList">
          <div class="name">{{ item.followName }}</div>
          <div class="text">患者姓名：{{ item.inquirerName }}</div>
          <div class="text">病案号：{{ item.hospitalCaseId }}</div>
          <div class="text">医院名称：{{ item.hospitalName }}</div>
          <div class="text">随访日期：{{ item.startTime }} - {{ item.endTime }}</div>
          <div class="form">
            <div v-for="(i,idx) in item.tables" :key="idx" @click="tablesClick(i,item.followStatus)">
              {{ i.tableName }}
              <img v-if="i.tableStatus=='审核中'" class="auditStatus" src="../assets/image/iconShz.png" alt="">
              <img v-if="i.tableStatus=='已审核'" class="auditStatus" src="../assets/image/iconYsh.png" alt="">
              <img v-if="i.tableStatus=='未填写'" class="auditStatus" src="../assets/image/iconWtx.png" alt="">
            </div>
          </div>
          <img v-if="item.followStatus==1" class="status" src="../assets/image/iconProgress.png" alt="">
          <img v-if="item.followStatus==2" class="status" src="../assets/image/iconfinished.png" alt="">
          <img v-if="item.followStatus==3" class="status" src="../assets/image/iconLose.png" alt="">
        </div>
      </van-list>
      <van-empty v-else description="暂无数据" />
    </van-pull-refresh>
    <div class="subbtn">
      <div class="subbtn_bt mgr_7 main_btn boxflex" @click="switchPatient">切换患者</div>
    </div>
    <div class="kong"></div>
    <van-popup v-model="show" position="bottom" round>
      <div v-for="(item,index) in inquirerList" :key="index" class="Name" :class="(!listQuery.inquirerId && item.relation == 0)|| (listQuery.inquirerId == item.inquirerId)?'select': ''" @click="selName(item)">{{ item.name }}</div>
      <div class="Name cancel" @click="cancel">取消</div>
    </van-popup>
  </div>
</template>

<script>
import API from '@/api/task'
export default {
  name: 'Task',
  components: {},
  data() {
    return {
      listQuery: {
        inquirerId: '',
        page: 1,
        num: 10
      },
      taskList: [],
      offset: 30,
      error: false,
      loading: false,
      finished: false,
      refreshing: false,
      show: false,
      inquirerList: [],
      init: false
    }
  },
  metaInfo: {
    title: '随访任务'
  },

  computed: {},

  created() {},

  mounted() {
    if (this.$route.query.inquirerId) {
      this.listQuery.inquirerId = this.$route.query.inquirerId
    }
    this.getTaskList()

  },

  methods: {
    // 获取随访任务数据
    getTaskList() {
      if (this.refreshing) {
        // this.taskList = []

        this.refreshing = false
      }
      API.getTaskList(this.listQuery).then(res => {
        console.log('this.listQuery', res)

        if (res.code === 0) {
          if (this.listQuery.page === 1) {
            this.taskList = res.data[0].result
          } else {
            this.taskList = this.taskList.concat(res.data[0].result)
          }
          this.listQuery.page++
          if (!res.data[0].hasNext) {
            console.log('没有下一页')
            this.finished = true
          }
          console.log(res, this.listQuery)
        } else {
          this.error = true
          this.$toast(res.msg)
        }
        console.log(this.loading)
      }).catch(e => {
        this.error = true
        this.finished = true
      }).finally(() => {
        this.loading = false
        if (!this.init) {
          this.getPatientList()
        }
        this.init = true
      })
    },
    onRefresh() {
      this.listQuery.page = 1
      this.finished = false
      this.loading = true
      this.getTaskList()
    },
    tablesClick(i, followStatus) {
      // 进行中和失效中点击审核中的表单状态 提示“已提交，等待审核”；失效状态下的点击未填写的表单状态，提示“请等待医生与您联系！”
      if (i.tableStatus === '未填写' && followStatus === 3) {
        this.$toast('请等待医生与您联系！')
      } else if (i.tableStatus === '审核中' && (followStatus === 3 || followStatus === 1)) {
        this.$toast('已提交，等待审核！')
      } else {
        window.location.href = i.url
      }
    },
    // 获取患者数据
    getPatientList() {
      API.getPatientList().then(res => {
        if (res.code === 0) {
          this.inquirerList = res.data
        } else {
          this.$toast(res.msg)
        }
      })
    },
    // 切换患者
    switchPatient() {
      this.show = true
    },
    selName(item) {
      this.listQuery.inquirerId = item.inquirerId
      this.listQuery.page = 1
      this.getTaskList()
      this.show = false
    },
    cancel() {
      this.show = false
    }
  }
}
</script>

<style scoped lang="less">
  @import '~@/assets/css/task.less';
  .subbtn{
    border-top: none;
  }
</style>