crs-double-resistance/src/view/product/index.vue

<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>