<template> <div> <banner></banner> <div class="antibody_box" ref="tablePar"> <!-- 搜索 --> <el-form :inline="true" :model="form" class="demo-form-inline"> <el-form-item label="Antibody:"> <el-input class="input-with-select" v-model="form.keyword" placeholder=""> <!-- <el-button class="but_search" slot="append" icon="el-icon-search" @click="onSubmit"></el-button> --> </el-input> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" @click="onSubmit">Search</el-button> <el-button type="danger" icon="el-icon-refresh" @click="reset">{{ $t("nav.reset") }}</el-button> </el-form-item> </el-form> <!-- 列表 --> <table-list v-loading="tableLoading" :list="list" type="2" @my-sort-change="onSortFieldChange" /> <!-- 加载更多 --> <div class="load_b" v-if="list.length > 0 && pageable.page + 1 !== moreParams.totalPages" @click="loadList" > <i v-if="loadShow" class="el-icon-loading"></i> <span class="load">{{ $t("table.load") }}</span> </div> </div> </div> </template> <script> import tableList from "@/components/tableList"; import banner from "@/components/banner"; let timer = null; export default { components: { tableList, banner }, name: "antibody", data() { return { form: { keyword: "", sortKey: undefined, sortValue: undefined }, pageable: { page: 0, size: 10 }, list: [], tableLoading: false, loadShow: false, moreParams: {}, resultObj: {} }; }, methods: { // 重置 reset() { this.form = { keyword: "" }; this.pageable.page = 0; this.postlist(); }, // 查询 onSubmit() { this.pageable.page = 0; this.postlist(); }, onSortFieldChange(params) { console.log(params); this.form.sortKey = params.field || undefined; this.form.sortValue = params.value || undefined; this.pageable.page = 0; this.postlist(); }, // 加载更多 loadList() { this.loadShow = true; this.pageable.page++; this.postlist(); }, // 获取列表 postlist() { let that = this; that.tableLoading = true; this.$api .post("basb/pageListProducts", { criteria: this.form, pageable: this.pageable }) .then(res => { if (res.code === 0) { const resDataContent = (res.data.content || []).map(item => { return { ...item, skuDefault: item.skuList && item.skuList.length > 0 ? 0 : "" }; }); if (that.pageable.page === 0) { this.list = resDataContent; } else { this.list = this.list.concat(resDataContent); console.log(this.list); } this.moreParams = res.data.more_params; this.loadShow = false; } that.tableLoading = false; }) .catch(() => { that.tableLoading = false; }); }, // 判断滚动条位置 handleScroll() { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; if ( this.pageable.page + 1 == this.moreParams.totalPages || this.list.length < 10 ) { clearTimeout(timer); window.removeEventListener("scroll", this.handleScroll); return; } if (scrollTop + windowHeight >= scrollHeight && !this.loadShow) { // console.log('触底了') this.loadShow = true; this.pageable.page++; this.postlist(); } }, 300); } }, mounted() { this.postlist(); // 监听滚动 window.addEventListener("scroll", this.handleScroll); }, created() { // this.getList() }, beforeDestroy() { // 移除监听 window.removeEventListener("scroll", this.handleScroll); } }; </script> <style lang="scss" scoped> .antibody_box { display: block !important; width: 1200px; margin: auto ; .demo-form-inline{ padding-top: 40px; position: sticky; top: 80px; background: #fff; z-index: 999; display: flex; align-self: center; } .input-with-select /deep/{ width: 300px; border:1px solid #007BC4; border-radius: 4px; overflow: hidden; .el-input__inner{ border: none!important; } // .el-input__inner{ // border-color: #007BC4 !important; // border-right: none !important; // } // .el-input-group__append { // border-color: #007BC4 !important; // border-left: none !important; // } // .but_search { // background-color: #007BC4; // border: #007BC4; // color: #fff; // } } .clout_box { margin-bottom: 2rem; .title { word-wrap: break-word; word-break: normal; width: 100%; background: #f3f3f3; padding: 1.5rem 2rem; font-size: 16px; font-family: Arial; color: #313131; } } } .load_b { margin: 1.2rem 0; font-size: 14px; font-family: Arial; color: #005bab; text-align: center; cursor: pointer; .el-icon-loading { font-size: 24px; } .load { display: block; line-height: 32px; } } .menu_box /deep/ { // 菜单 border: 1px solid #dbdbdb; margin-bottom: 2rem; .menu_b { .list { border: none; } } } @media screen and (min-width: 751px) and (max-width: 9999px) { .menu_box_pmd { display: none; } } @media screen and (min-width: 0px) and (max-width: 750px) { .antibody_box { .clout_box { margin-bottom: 20px; .title { padding: 10px !important; } } } .load_b { margin: 20px 0; } .menu_box /deep/ { // 菜单 border: none; margin-bottom: 0; } } </style>