HS_MZAP/src/views/activityMan/placeactivity/placeActivityList.vue

<template>
  <van-nav-bar
    fixed
    title="场所活动"
    left-text=""
    right-text="上报"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />
  <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <!-- tab切换 -->
    <div class="nav_tab">
      <div class="tab active">未审核</div>
      <div class="tab">已审核</div>
    </div>
    <van-swipe-cell v-for="item in list" :key="item">
      <div class="list_item">
        <div class="item-left">
          <p style="color: #c4c4c4">{{ item.activityTime }}</p>
          <p style="color: red">待审核</p>
        </div>
        <van-cell is-link to="placeActivityInfo">
          <template #title>
            {{ item.portname }}申请于{{ item.place }}举办{{ item.activity }}活动
          </template>
          <template #label>
            {{ item.activityPlace + " " + item.address }}
          </template>
        </van-cell>
      </div>
      <template #right>
        <van-button square type="danger" text="删除" class="button" />
        <van-button square type="primary" text="修改" class="button" />
      </template>
    </van-swipe-cell>
  </van-list>
</template>

<script>
import { reactive, ref } from "vue";
import router from "@/router";
export default {
  name: "placeActivityList",
  setup() {
    // 返回
    const onClickLeft = () => {
      history.back();
    };
    // 上报
    const onClickRight = () => {
      router.push("placeActivity");
    };
    // 列表
    const list = reactive([
      {
        activity: "测试",
        place: "基督教",
        activityTime: "2023-03-28 13:00",
        countPerson: "100",
        list: "11,22,33",
        portname: "张三",
        area: "",
        activityPlace: "盐都区/张庄街道",
        address: "1111",
        money: "",
        activityName: "李四",
        tel: "",
        file: "",
        into: "1111",
      },
    ]);
    const loading = ref(false);
    const finished = ref(false);

    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     list.value.push(list.value.length + 1);
      //   }

      // 加载状态结束
      loading.value = false;

      // 数据全部加载完成
      // if (list.value.length >= 10) {
      //   finished.value = true;
      // }
      // }, 1000);
    };
    // 搜索
    let value = ref("");
    return {
      onClickLeft,
      list,
      onLoad,
      loading,
      finished,
      value,
      onClickRight,
    };
  },
};
</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>