HS_MZAP/src/views/activityMan/religiousConference/religiousConferenceList.vue

<template>
  <van-nav-bar
    title="负责人会议"
    left-text=""
    right-text="上报"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />
  <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
  <van-tabs
    v-model:active="active"
    title-inactive-color="#bdbdbd"
    title-active-color="#36a7f3"
    @click-tab="onClickTab"
  >
    <van-tab title="未审核" name="0">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-swipe-cell
          v-for="item in list"
          :key="item"
          :before-close="beforeClose"
        >
          <div class="list_item" @click="goInfo(item.id)">
            <div class="item-left">
              <p style="color: #c4c4c4">{{ item.updateDate }}</p>
              <p style="color: red">待审核</p>
            </div>
            <van-cell is-link>
              <template #title >
                {{ item.siteName.name }}（{{ item.meetingTime }}）
              </template>
              <template #label>
                {{ item.participants.name }}
              </template>
            </van-cell>
            
          </div>
          <template #right>
            <van-button square type="danger" text="删除" class="button" />
            <van-button
              square
              type="primary"
              text="修改"
              class="button"
              @click="updateItem(item)"
            />
          </template>
        </van-swipe-cell>
      </van-list>
    </van-tab>
    <van-tab title="已审核" name="1">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-swipe-cell
          v-for="item in list"
          :key="item"
          :before-close="beforeClose"
        >
          <div class="list_item" @click="goInfo(item.id)">
            <div class="item-left">
              <p style="color: #c4c4c4">{{ item.updateDate }}</p>
              <p style="color: gray">已审核</p>
            </div>            
            <van-cell is-link>
              <template #title >
                {{ item.siteName.name }}（{{ item.meetingTime }}）
              </template>
              <template #label>
                {{ item.participants.name }}
              </template>
            </van-cell>
          </div>
        </van-swipe-cell>
      </van-list>
    </van-tab>
  </van-tabs>
</template>

<script>
import { ref } from "vue";
import router from "@/router";
import religiousConferenceService from "@/api/religiousConference/religiousConferenceService";
export default {
name: "religiousConferenceList",
setup() {
  const onClickLeft = () => {
    history.back();
  };
  const onClickRight = () => {
    router.push("/religiousConferenceView");
  };
  let tabIndex = ref(0);
  
  //tab切换
  let active = ref(0);
  const onClickTab = (val) => {
    // 清空列表数据
    finished.value = false;
    list.value = [];
    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    index = 0;
    if (val.name == 0) {
      onLoad(0);
    } else {
      onLoad(1);
    }
  };
  // 列表
  let list = ref([]);
  const loading = ref(false);
  const finished = ref(false);
  let index = 0;
  const onLoad = (val) => {
    // 异步更新数据
    console.log(val);
    new religiousConferenceService()
      .list({
        current: index + 1,
        size: 10,
        assessment:val ? val : 0,
      })
      .then((res) => {
        list.value.push(...res.records) ;
        // 加载状态结束
        loading.value = false;        
        // 数据全部加载完成
        if (res.records.length < 10) {
          finished.value = true;
        }
        index++;
      });
  };
  // 搜索
  let value = ref("");
  // 删除确认
  const beforeClose = ({ position }) => {
    switch (position) {
      case "left":
      case "cell":
      case "outside":
        return true;
      case "right":
        return new Promise((resolve) => {
          showConfirmDialog({
            title: "确定删除吗？",
          }).then(resolve);
        });
    }
  };
  // 详情跳转
  const goInfo = (val) => {
      router.push({
        path: "/religiousConferenceInfo",
        query: { id: val },
      });
    };
  return {
    onClickLeft,
    onClickTab,
    list,
    onLoad,
    loading,
    finished,
    value,
    onClickRight,
    tabIndex,
    goInfo,
    beforeClose,
  };
},
};
</script>

<style>
body {
background: #f5f5f5;
}
.nav_tab {
width: 100vw;
display: flex;
text-align: center;
background: #fff;
margin: 10px 0;
}
.tab {
flex: 1;
line-height: 40px;
font-size: 14px;
}
.active {
background: #36a7f3;
color: #fff;
}
.van-list {
height: 80%;
margin-top: 5px;
}
.list_item {
display: flex;
background: #fff;
}
.item-left {
text-align: center;
width: 30%;
font-size: 12px;
border-right: 1px solid #eee;
}
.button {
height: 100%;
}
</style>