HS_MZAP/src/views/activityMan/siteList.vue

<template>
    <div class="siteList">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-checkbox-group
          v-if="type == 1"
          v-model="checked"
          ref="checkboxGroup"
        >
          <van-button type="primary" size="mini" @click="checkAll"
            >全选</van-button
          >
          <van-cell-group inset>
            <van-cell
              v-for="(item, index) in list"
              clickable
              :key="item"
              :title="item.name"
              @click="toggle(index)"
            >
              <template #right-icon>
                <van-checkbox
                  shape="square"
                  :name="item"
                  :ref="(el) => (checkboxRefs[index] = el)"
                />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
        <van-radio-group v-if="type == 0" v-model="checked">
          <van-cell-group inset>
            <van-cell
              v-for="item in list"
              clickable
              :key="item"
              :title="item.name"
              @click="selectes(item)"
            >
              <template #right-icon>
                <van-radio :name="item" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </van-list>
    </div>
  </template>
  
  <script>
  import { ref } from "vue";
  import tools from "@/api/sys/tools";
  export default {
    name: "siteList",
    emits: ["selected"],
    props: ["type"],
    setup(props, { emit }) {
      const list = ref([]);
      const loading = ref(false);
      const finished = ref(false);
      let index = 0;
      const onLoad = () => {
        // 异步更新数据
        new tools()
        .placeList({
            current: index + 1,
            size: 10,
        })
        .then(({ records }) => {
            list.value.push(...records);
            // 加载状态结束
            loading.value = false;
            index++;
            // 数据全部加载完成
            if (records.length < 10) {
              finished.value = true;
            }
        });
        
      };
      // 搜索
      const value = ref("");
      const onSearch = (val) => showToast(val);
      const onCancel = () => showToast("取消");
      // 选择场所
      const checked = ref([]);
      const checkboxRefs = ref([]);
      const checkboxGroup = ref(null);
      const toggle = (index) => {
        checkboxRefs.value[index].toggle();
        emit("selected", checked.value, 1);
      };
      // 全选
      const checkAll = () => {
        checkboxGroup.value.toggleAll(true);
        emit("selected", checked.value, 1);
      };
      const selectes = (val) => {
        checked.value = val;
        emit("selected", checked.value, 0);
      };
  
      return {
        // 场所
        list,
        onLoad,
        loading,
        finished,
        // 搜索
        value,
        onSearch,
        onCancel,
        // 全选
        checkAll,
        toggle,
        checked,
        checkboxRefs,
        checkboxGroup,
        // 单选
        selectes,
      };
    },
  };
  </script>
  
  <style scoped>
  .siteList {
    height: 65vh;
    overflow: auto;
    margin: 10px;
  }
  .van-button {
    top: -5px;
  }
  .search {
    height: 40px;
    line-height: 40px;
  }
  .van-list {
    height: 80%;
    margin-top: 5px;
  }
  .keyword {
    width: 70%;
    height: 25px;
    border-radius: 25px;
    border: 1px solid;
    padding-left: 15px;
  }
  </style>