<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; } } }
标签:box,padding,color,列表,filter,勾选,background,弹框,border From: https://www.cnblogs.com/dianzan/p/18616655