gaoyixia-pc/demand.vue

<!--需求 -->
<template>
  <div class="wrap">
    <header-search
      tabName="需求"
      :type="8"
      :tab-idx="1"
      :bg-img="require('@/assets/bg-21.png')"
    />
    <div class="tab" :class="{ 'tab-fixed': scrollTop >= 50 }">
      <div
        class="tab-item"
        v-for="item in tabList"
        :class="{ current: item.value == params.is_over }"
        @click="changeTab(item)"
      >
        {{ item.label }}
      </div>
    </div>
    <div
      class="box"
      :style="{ 'margin-top': scrollTop >= 50 ? '48px' : '13px' }"
    >
      <DemandTabulation
        ref="tabulation"
        :list="list"
        :loading="loading"
        :finished="finished"
        @onRefresh="onRefresh"
        @getList="getList"
      />
    </div>

    <!-- 发布 -->
    <publish :list="publishList" />

    <!-- 回到顶部 -->
    <to-top display-height="0" :toTop="toTop" />
  </div>
</template>

<script>
import { DemandService } from "@/common/service";
import HeaderSearch from "@/components/header-search.vue";
import DemandTabulation from "./components/demand-tabulation.vue";
import Publish from "@/components/publish.vue";
import ToTop from "@/components/to-top.vue";

export default {
  components: { HeaderSearch, DemandTabulation, Publish, ToTop },
  data() {
    return {
      scrollTop: 0,
      params: {
        is_over: 0, // 是否解决或开源【0否，1是，2开源】
        page: 1, // 页数
        page_num: 10, // 每页数
      },
      list: [],
      loading: false,
      finished: false,
      currentTab: 0,
      tabList: [
        { label: "待解决", value: 0 },
        { label: "已解决", value: 1 },
        { label: "开源项目", value: 2 },
      ],
      publishList: [
        {
          title: "发布需求/项目",
          path: "/contact-online",
          icon: require("@/assets/icon-95.png"),
          class: "",
        },
      ],
    };
  },
  mounted() {
    window.addEventListener("scroll", this.onScroll);
    this.getList();
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.onScroll);
  },
  methods: {
    toTop() {
      window.scrollTo(0, 0);
    },
    onScroll() {
      let scrollPos;
      if (window.pageYOffset) {
        scrollPos = window.pageYOffset;
      } else if (document.compatMode && document.compatMode !== "BackCompat") {
        scrollPos = document.documentElement.scrollTop;
      } else if (document.body) {
        scrollPos = document.body.scrollTop;
      }
      this.scrollTop = scrollPos;
    },
    onRefresh() {
      this.params.page = 1;
      this.finished = false;
      this.getList();
    },
    changeTab(item) {
      this.params.is_over = item.value;
      this.onRefresh();
    },
    getList() {
      this.loading = true;
      DemandService.getRecommendList(this.params)
        .then(({ data }) => {
          const list = data.list;
          this.list = this.params.page === 1 ? list : [...this.list, ...list];
          if (list.length < this.params.page_num) {
            this.finished = true;
          } else {
            this.params.page++;
          }
        })
        .catch(() => {
          this.finished = true;
        })
        .finally(() => {
          this.loading = false;
          this.$refs["tabulation"].refreshLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh;
  background: #f5f5f5;
  .tab {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    color: #444444;
    padding: 0 15px;
    position: relative;
    .tab-item {
      width: 30%;
      padding: 5px 10px;
      font-size: 14px;
      background-color: white;
      border-radius: 5px;
      text-align: center;
    }
    .current {
      font-weight: 500;
      color: #2a63f3;
    }
  }
  .tab-fixed {
    position: fixed;
    left: 0;
    right: 0;
    top: 44px;
    z-index: 999;
    background-image: url("~@/assets/bg-3.png");
    background-size: 100% auto;
    background-position: 0 -44px;
  }
  .box {
    width: 100%;
  }
}
</style>