vant点击切换不同组件

点击不同tab切换不同的component

<template>
  <div class="my-case-page">
    <mt-header title="双随机一公开">
      <mt-button @click="backIndex()" icon="back" slot="left">返回</mt-button>
    </mt-header>
    
     <div class="container">
        <div @click.prevent="handleManage('unprocess',1)" :class="{active:titleShow ==1}">待办</div>
        <div @click.prevent="handleManage('processing',2)" :class="{active:titleShow ==2}">复查</div>
        <div @click.prevent="handleManage('processed',3)" :class="{active:titleShow ==3}">已办</div>
      </div>
    <div class="container-all">
      <div class="container-bottom">
          <component  :is="componentName"></component>
      </div>
    </div>
    <div class="scanning-item" @click="handleScanning">扫描</div>
  </div>
</template>

<script>
// 导入组件
import unprocess from "./components/unprocess.vue";
import processing from "./components/processing.vue";
import processed from "./components/processed.vue";
import {
  apiGetRandomList,
  FILE_OPEN_URL,
  apiGetRandomCount,
} from "@/api/case";
let formatDate;
export default {
  name: "index",
  data() {
    formatDate = this.$formatDate;
    return {
      list: [],
      titleShow: 1, //控制头部切换样式-未处理，处理中，已处理
      componentName: "unprocess",
      pageNum: 1,
      env: process.env.VUE_APP_SERVE_ENV,
      FILE_OPEN_URL: FILE_OPEN_URL,
      id:'',
    };
  },
  created(){
    this.componentName = this.$route.query.componentName || this.componentName ;
    this.titleShow = this.$route.query.titleShow || this.titleShow;
  },
  // 注册组件
  components: {
    unprocess,
    processing,
    processed,
  },
  methods: {
    backIndex() {
      this.$router.go(-1);
    },
    handleScanning(){
      this.$router.push({path:"/scanning/index"});
    },
    //点击title切换 -number控制active选中颜色
    handleManage(process, number) {
      this.componentName = process;
      this.titleShow = number;
    },
 
  },

  filters: {
    formatDate(value, that) {
      return that.$formatDate(value, "yyyy-MM-dd hh:mm");
    },
  },
};
</script>

<style lang="less" scoped>
// 头部fixed样式start
.mint-header {
  background: white;
  color: #333333;
  // box-shadow: 0 0 * @toVw 5 * @toVw #f2f2f2;
  // border-bottom: 1 * @toVw solid #f2f2f2;
  border-bottom: 0 solid #fff !important;
  position: fixed;
  font-size: 14 * @toVw;
  top: 0;
  left: 0;
  height: 45 * @toVw;
  line-height: 45 * @toVw;
  width: 100%;
  z-index: 100;

  .mint-button {
    height: 41 * @toVw;

    /deep/ .mintui {
      font-size: 14 * @toVw;
    }
    /deep/ .mint-header-title {
      font-size: 16 * @toVw;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
    }
  }
}
// 头部fixed样式end
.my-case-page {
  background: #ffffffff;
  height: 100vh;
  overflow: auto;
  .container {
      width: 3.75rem; //1rem=100px
      margin: 0 auto;
      padding: 5px 0;
      box-sizing: border-box;
      display: flex;
      position: fixed;
      top: 12vw;
      left: 0;
      height: 12vw;
      line-height: 12vw;
      z-index: 99;
      align-items: center;
      justify-content: space-around;
      border-top: 0.26666667vw solid #f2f2f2;
      border-bottom: 0.26666667vw solid #f2f2f2;
      background-color: #ffffffff;
      .active {
        border-bottom: 2px solid rgb(2, 167, 240);
      }
    }
  .container-all {
    background: #ffffffff;
    margin-top: 24vw;
    
  }
}
.scanning-item{
  z-index: 666;
}
</style>

2.点击tab切换，然后切换到不同组件,这个是components文件processing.vue文件

<template>
  <div class="unContainer">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了哦!" @load="onLoad">
        <!-- item-all   start -->
        <div class="item-all" v-for="(item,index) in tableData" :key="index">
          <div class="item">
            <span class="itemLeft">检查对象名称(姓名)：</span>
            <span class="item-right">{{item.checkObjectName}}</span>
          </div>
          <div class="item">
            <span class="itemLeft">检查人名称：</span>
            <span class="item-right">{{item.checkUserName}}</span>
          </div>
<!--          <div class="item">
            <span class="itemLeft">行业类型：</span>
            <span class="item-right">{{item.tradeCategory}}</span>
          </div>-->

          <div class="item">
            <span class="itemLeft">检查时间：</span>
            <span class="item-right">{{item.startTime | switchTime}}-{{item.endTime | switchTime}}</span>
          </div>
          <div class="handle-button-box">
            <div @click="handleDetail(item)" class="handle-button">处理详情</div>
            <div @click="review(item)" class="handle-button">去复查</div>
          </div>

        </div>
        <!-- item-all   end -->
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { apiPubSearchMyTask } from "@/api/case.js";
import { formatDate } from "@/common/wordBook";

export default {
  name: "processing",
  data() {
    return {
      refreshing: false, //控制下拉刷新
      loading: false, //滚动到底部会触发@load将loading=true
      finished: false, //数据全部加载完finished = true
      pageNum: 1, //第一页start
      pageSize: 5, //每页10条数据
      total: 0, //列表总数量
      tableData: [], //循环列表赋值的数组
    };
  },
  created() {
  },
  methods: {
    //组件滚动到底部触发事件==>初始化会触发一次load事件，用于加载第一屏数据
    onLoad() {
      this.getList(); //调用请求接口数据的方法
    },
    //调用接口请求数据
    getList() {
      apiPubSearchMyTask({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status:'2',
      }).then((res) => {
        this.total = res.data.total;
        if (this.pageNum == 1) {
          this.tableData = res.data.list;
        } else {
          //页数加1再次调用接口赋值数据
          this.tableData = this.tableData.concat(res.data.list);
        }
        if (this.tableData.length < this.total) {
          this.pageNum = this.pageNum + 1;
        } else {
          this.finished = true;
        }
        //如果loading为true,是不会触发@load事件，因为第一次一进来就触发@load事件把loading = true,
        //所以这里要loading= false,这样滚动到底部才能触发@load事件
        this.loading = false;
      }).catch(()=>{
         this.loading = false;
      });
    },
    //下拉刷新触发事件
    onRefresh() {
      console.log('下拉刷新')
      this.pageNum = 1
       apiPubSearchMyTask({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
         status:'2',
      }).then(res=>{
         this.total = res.data.total;
         this.tableData = res.data.list
         this.refreshing =false
         this.finished = false// 如果数据全部加载完毕之后，下拉刷新需要把finished质为false
        this.$toast('刷新成功')
        // 当此时tableData的数据长度<total,需要+1页数，不然当我在滚动到底部的时候调用接口还
        // 是用pageNum=1第一页去调用接口数据，这样不对，应该是第二页了。
        if(this.tableData.length < this.total){
          this.pageNum = this.pageNum +1 
        }else{
          this.finished = true
        }
      })
      
    },
    // 查看详情
    handleDetail(e){
      this.$router.push({
        path:'/randomCheck/handleDetail',
        query:{
          id:e.id,
          statusFlag:e.status,
          pageType: 'look',
          // tradeCategory:e.tradeCategory
        }})
    },
    //复查
    review(item) {
      this.$router.replace({
        name: 'review',
        query: {
          planId: item.id,
        }
      })
    }
  },//methods方法结束
  // 局部过滤器filters
  filters: {
    switchTime(val) {
      if(!val) return '';
      return formatDate(val, "yyyy-MM-dd");
    },
  },
};
</script>