HS_MZAP/src/views/activityMan/selfMeetingReport/selfMeetingList.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.partyTime }}</p>
              <p style="color: red">待审核</p>
            </div>
            <van-cell is-link>
              <template #title>
                <p>地点：{{ item.placeSelectName }}</p>
                <p>相关人员：{{ item.relatedPersons.name }}</p>
                <p>频次：{{ item.frequency }}</p>
              </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.partyTime }}</p>
              <p style="color: red">已审核</p>
            </div>
            <van-cell is-link>
              <template #title>
                <p>地点：{{ item.placeSelectName }}</p>
                <p>相关人员：{{ item.relatedPersons.name }}</p>
                <p>频次：{{ item.frequency }}</p>
              </template>
            </van-cell>
          </div>
        </van-swipe-cell>
      </van-list>
    </van-tab>
  </van-tabs>
</template>
  
  <script>
import { ref } from "vue";
import PrivatePartyPointService from "@/api/privateparty/PrivatePartyPointService";
import { useRouter } from "vue-router";
export default {
  name: "placeActivityList",
  setup() {
    const onClickLeft = () => {
      history.back();
    };
    // 上报
    const onClickRight = () => {
      router.push("/selfMeeting");
    };
    const value = ref("");
    // 切换
    let active = ref(0);
    const onClickTab = (val) => {
      // 清空列表数据
      finished.value = false;
      list.value = [];
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      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) => {
      // 异步更新数据
      new PrivatePartyPointService()
        .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++;
        });
    };
    // 删除确认
    const beforeClose = ({ position }) => {
      switch (position) {
        case "left":
        case "cell":
        case "outside":
          return true;
        case "right":
          return new Promise((resolve) => {
            showConfirmDialog({
              title: "确定删除吗？",
            }).then(resolve);
          });
      }
    };
    let router = useRouter();
    // 修改跳转
    const updateItem = (val) => {
      router.push({
        path: "/selfMeeting",
        query: { id: val.id },
      });
    };
    // 详情跳转
    const goInfo = (val) => {
      router.push({
        path: "/selfMeetingInfo",
        query: { id: val },
      });
    };
    return {
      active,
      onClickTab,
      onClickLeft,
      list,
      onLoad,
      loading,
      finished,
      value,
      onClickRight,
      beforeClose,
      updateItem,
      goInfo,
    };
  },
};
</script >
  
<style scope>
.van-list {
  height: 80%;
  margin-top: 5px;
}
.list_item {
  display: flex;
  background: #fff;
}
.list_item p{
  line-height: 1;
}
.item-left {
  text-align: center;
  width: 30%;
  font-size: 12px;
  border-right: 1px solid #eee;
}
.button {
  height: 100%;
}
</style>