asd-mobild/src/views/weibao/views/specialServices/index.vue

<template>
  <div>
    <van-nav-bar title="专项服务" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
    <div class="box">
      <van-tabs v-if="roleIdStr==21" v-model="active" @change="changetabs">
        <van-tab title="服务计划"></van-tab>
        <van-tab title="服务完成"></van-tab>
      </van-tabs>
      <van-search v-show="active==1||roleIdStr!=21" v-model="historyform.name" shape="round" show-action placeholder="请输入姓名 项目内容" @search="onSearch">
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <van-list v-if="roleIdStr==21" class="mt" v-model="loading" :immediate-check="false" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <servicePlan v-if="active==0" :planformList='planformList'></servicePlan>
      <serviceComplete v-if="active==1" :historyList="historyList"></serviceComplete>
    </van-list>
    <van-list v-else v-model="loading" class="his" :immediate-check="false" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <serviceComplete :historyList="historyList"></serviceComplete>
    </van-list>
  </div>
</template>
<script>
import { pageAppProject, pageProjectHistory } from '../../api/index.js'
import servicePlan from './serviceplan.vue'
import serviceComplete from './serviceComplete.vue'
export default {
  components: { servicePlan, serviceComplete },
  data() {
    return {
      roleIdStr: JSON.parse(sessionStorage.getItem('userInfo')).roleIdStr,
      active: 0,
      value: '',
      loading: false,
      finished: false,
      planform: {
        pageNum: 1,
        pageSuze: 10,
      },
      historyform: {
        pageNum: 1,
        pageSuze: 10,
      },
      planformList: [],
      historyList: [],
    }
  },
  activated() {
    this.loading = true
    this.pageAppProject()
    this.pageProjectHistory()
  },
  methods: {
    onSearch() {
      this.historyform.pageNum = 1
      this.pageProjectHistory()
    },
    onLoad() {
      if (this.roleIdStr != 21) {
        this.active = 1
      }
      if (this.active == 0) {
        this.planform.pageNum = this.planform.pageNum + 1
        this.pageAppProject()
      } else if (this.active == 1) {
        this.historyform.pageNum = this.historyform.pageNum + 1
        this.pageProjectHistory()
      }
    },
    changetabs() {
      this.loading = true
      if (this.active == 0) {
        this.planform.pageNum = 1
        this.pageAppProject()
      } else if (this.active == 1) {
        this.historyform.pageNum = 1
        this.pageProjectHistory()
      }
    },
    async pageAppProject() {
      const res = await pageAppProject(this.planform)
      this.loading = false
      if (this.planform.pageNum == 1) {
        this.planformList = res.data.records
      } else {
        this.planformList = this.planformList.concat(res.data.records)
      }
      if (this.planformList.length >= res.data.total) {
        this.finished = true
      } else {
        this.finished = false
      }
    },
    async pageProjectHistory() {
      const res = await pageProjectHistory(this.historyform)
      this.loading = false
      if (this.historyform.pageNum == 1) {
        this.historyList = res.data.records
      } else {
        this.historyList = this.historyList.concat(res.data.records)
      }
      if (this.historyList.length >= res.data.total) {
        this.finished = true
      } else {
        this.finished = false
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.box {
  position: fixed;
  top: 80px;
  width: 100%;
  z-index: 9999;
}
.mt {
  margin-top: 80px;
}
.his {
  margin-top: 100px;
}
</style>