活动场所列表页基础框架

src/views/activityMan/placeactivity/placeActivityList.vue

@@ -0,0 +1,81 @@
+<template>
+  <van-nav-bar
+    title="场所活动"
+    left-text=""
+    left-arrow
+    @click-left="onClickLeft"
+  />
+  <van-search
+  v-model="value"
+  shape="round"
+  placeholder="请输入搜索关键词"
+/>
+  <van-list
+    v-model:loading="loading"
+    :finished="finished"
+    finished-text="没有更多了"
+    @load="onLoad"
+  >
+    <van-button type="primary" size="small" to="/placeActivity">新增</van-button>
+    <van-cell v-for="item in list" :key="item" :title="item" label="2222" is-link>
+      <template #value>
+        11111
+      </template>
+    </van-cell>
+  </van-list>
+</template>
+
+<script>
+import { ref } from "vue";
+export default {
+  name: "placeActivityList",
+  setup() {
+    const onClickLeft = () => {
+      history.back();
+    };
+    const list = ref([]);
+    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
+    };
+  },
+};
+</script>
+
+<style>
+.van-button {
+  top: -5px;
+}
+
+.van-list {
+  height: 80%;
+  margin-top: 5px;
+}
+
+</style>