弹框 勾选 列表 分页

<template>
  <!-- 搜索筛选 -->
  <van-popup
    v-model="showPopup"
    round
    position="bottom"
    :style="{ height: '70%' }"
    closeable
    close-icon="cross"
    class="page-filter"
    @close="closeFn"
  >
    <div class="filter-header tc f16 pt20">选择</div>
    <div class="filter-content flexd" style="background-color: #f4f4f6">
      <!-- 列表内容 -->
      <div class="h" style="overflow-y: hidden; position: relative">
        <scroller
          :on-infinite="infinite"
          :noDataText="noDataText"
          class="h"
          ref="myscroller"
        >
          <!-- style="overflow-y: auto" -->

          <div v-for="(item, i) of tableData" :key="i">
            <div class="list bdr10 page-checkbox-w">
              <van-checkbox v-model="item.checked">
                <div class="pt5">{{ item.bizTitle }}</div>

                <div class="list-item flexa f14 cor6">
                  <div class="list-item-lf flex-shrink">编号</div>
                  <span class="text_overflowd">
                    {{ item.bizNo }}
                  </span>
                </div>
                <div class="list-item flexa f14 cor6">
                  <div class="list-item-lf flex-shrink">申请时间</div>
                  <span class="text_overflowd">
                    {{ item.submitTime }}
                  </span>
                </div>

                <!-- 属性标签 -->
                <div class="list-statu custom-label">
                  {{ item.bizStateName }}
                </div>
                <div class="item-line bgcm"></div
              ></van-checkbox>
            </div>
          </div>
        </scroller>
      </div>
    </div>

    <div class="filter-btm-btn pr10 pl10 f14 mt50">
      <van-button class="w" type="info" @click="confirmFn">确定</van-button>
    </div>
  </van-popup>
</template>

<script>
import { queryOptionalWorkTicketList } from "@/api/constructOneTwo/constructStep.js";
export default {
  name: "linkTickets",
  props: ["showPopup", "planId"],
  components: {},
  data() {
    return {
      // showPopup: false,

      page: {
        index: 1,
        size: 10,
      },
      noDataText: "", //没有更多数据 文案
      tableData: [],
    };
  },
  watch: {
    // showPopup(val, newVal) {
    //   this.showPopupEnd = val;
    // },
  },
  created() {
    this.getData();
  },
  methods: {
    // TEMPLATE CODE APP LIST 1 初始化调取方法
    infinite(done) {
      console.log("zhellizhjiofzjfoj");
      setTimeout(() => {
        this.page.index++;
        this.getData();
      }, 300);
    },
    // TEMPLATE CODE APP LIST 2 获取列表数据请求
    async getData() {
      let datVal = {
        // ...this.formSesrch,
        // bizTypeGroup: "WORK_TICKET",
        pageNum: this.page.index,
        pageSize: this.page.size,
        planId: this.planId,
        // startCreateTime: this.startCreateTime,
        // endCreateTime: this.endCreateTime,
      };
      const result = await queryOptionalWorkTicketList(datVal);
      if (this.$refs.myscroller) {
        this.$refs.myscroller.finishInfinite(true);
      }
      if (result.data.length < 10) {
        // this.noDataText = this.sysNoDataTextEnd;
      }
      if (result.data && result.data.length > 0) {
        this.tableData = this.tableData.concat(result.data);

        if (result.pageNum) {
          this.page.index = result.pageNum;
        }
      }
    },
    closeFn() {
      // this.showPopupEnd = false;
      this.$emit("update:showPopup", false);
    },
    // 完成
    confirmFn() {
      let arr = [];
      for (let index = 0; index < this.tableData.length; index++) {
        if (this.tableData[index].checked) {
          arr.push(this.tableData[index]);
        }
      }
      this.$emit("confirm", arr);
      this.closeFn();
    },
  },
};
</script>
<style lang="scss" scoped>
.custom-label {
  color: #fff !important;
  background-color: #0089ff;
}
</style>

.page-filter .filter-header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #fff;
    padding-bottom: 15px;
}

.page-filter .filter-content {
    height: 100%;
    box-sizing: border-box;
    padding-top: 65px;
    padding-left: 10px;
    padding-right: 10px;
    overflow-y: auto;
    padding-bottom: 80px;
    border-top: 2px solid #fff;
}

.page-filter .filter-tag {
    display: inline-block;
    box-sizing: border-box;
    margin-right: 15px;
    margin-top: 10px;
    padding: 5px 0;
    background-color: #f0f0f0;
    border-radius: 16px;
    font-size: 13px;
    width: 80px;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid transparent;
    margin-left: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 30%;
}

.page-filter .filter-tag-active {
    box-sizing: border-box;
    background-color: #cae2fd;
    border: 1px solid #2e7cf9 !important;
    color: #3989f9;
}

.page-filter {
    .filter-header {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background-color: #fff;
        padding-bottom: 15px;
    }

    .filter-content {
        height: 100%;
        box-sizing: border-box;
        padding-top: 65px;
        padding-left: 10px;
        padding-right: 10px;
        overflow-y: auto;
        padding-bottom: 80px;
        border-top: 2px solid #fff;
    }

    .filter-content.no-btm-btn {
        padding-bottom: 20px !important;
    }

    .filter-tag {
        display: inline-block;
        box-sizing: border-box;
        margin-right: 15px;
        margin-top: 10px;
        padding: 5px 0;
        background-color: #f0f0f0;
        border-radius: 16px;
        font-size: 13px;
        width: 80px;
        box-sizing: border-box;
        text-align: center;
        border: 1px solid transparent;
        margin-left: 0 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 30%;
    }

    .filter-tag-active {
        box-sizing: border-box;
        background-color: #cae2fd;
        border: 1px solid #2e7cf9 !important;
        color: #3989f9;
    }

    .filter-btm-btn {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #fff;
        box-sizing: border-box;
        padding-top: 10px;
        padding-bottom: 10px;

        .btn {
            display: inline-block;
            width: 45%;
            height: 40px;
            line-height: 40px;
            background-color: #8a8a8a;
            color: #fff;
            text-align: center;
        }

        .btn_lf {
            border-radius: 20px 0 0 20px;
        }

        .btn_rt {
            border-radius: 0 20px 20px 0;
            background-color: #2e7cf9;
        }
    }
}