crowd-test-service-frontend/src/pages/Homepage/Homepage.vue

<template>
  <div class="home-wrapper">
    <div class="nav" stype="height:500px">
      <!--搜索框-->
      <el-row class="search-nav" style="padding: 30px 0 20px 0">
        <el-col :span="6">
          <div class="pull-left">
            <img class="logo-img" src="../../assets/image/logo-transparent.png" :to="'/home'"/>
            <span class="logo-title">{{ logoTitle }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="search-nav">
            <div id="search-block ">
              <el-tabs v-model="searchType" type="card" @tab-click="handleTypeClick">
                <el-tab-pane v-for="item in searchTypeArr" v-if="item.value!=='all'" :label="item.name"
                             :name="item.value" :key="item.value"></el-tab-pane>
              </el-tabs>
              <div class="search-input">
                <el-input ref="searchInput" placeholder="请输入内容" v-model="searchVal" class="input-with-select">
                  <el-button class="search-button" slot="append" type="primary" @click="handleSearchData">搜索</el-button>
                </el-input>
              </div>
            </div>
          </div>

        </el-col>
        <el-col :span="6">
          <el-button type="primary pull-right" class="releaseBtn" @click="checkLogin()">免费发布众测需求</el-button>
        </el-col>
      </el-row>
      <!--TabNav-->
      <el-tabs v-model="currTab" @tab-click="handleTabClick" class="square-tab">
        <el-tab-pane v-for="item in homeTabArr.menuArr1" :label="item.label" :name="item.name"
                     :key="item.name"></el-tab-pane>
        <el-tab-pane v-for="item in homeTabArr.menuArr2" :label="item.name" :name="item.code"
                     :key="item.code"></el-tab-pane>
        <el-tab-pane v-for="item in homeTabArr.menuArr3" :label="item.label" :name="item.name"
                     :key="item.name"></el-tab-pane>
      </el-tabs>
      <div>
      </div>
    </div>

    <div class="home-page container">
      <el-row>
        <el-col :span="19" class="test-type-wrapper">
          <TestMenu :testTypeList="homeData.testTypeList" v-if="HOME_DISPLAY.test_menu"></TestMenu>
          <TestCard :applicationTypeList="homeData.applicationTypeList" v-if="HOME_DISPLAY.test_card"></TestCard>
          <el-row style="margin-top: 10px" v-if="HOME_DISPLAY.resource_and_tool">
            <ResourceAndTool :resourceList="homeDataNoCache.resourceList"></ResourceAndTool>
          </el-row>
          <el-row v-if="HOME_DISPLAY.brand_card">
            <BrandCard :residentAgencyList=homeData.residentAgencyList></BrandCard>
          </el-row>
        </el-col>
        <el-col :span="5" class="homepage-right-modules">
          <LoginCard v-if="HOME_DISPLAY.login_card"/>
          <HotCrowd :applicationTypeRank="homeDataNoCache.applicationTypeRank" v-if="HOME_DISPLAY.hot_crowd"/>
          <HotAgency :agencyRank="homeDataNoCache.agencyRank" v-if="HOME_DISPLAY.hot_agency"/>
          <HotUser :userRank="homeDataNoCache.userRank" v-if="HOME_DISPLAY.hot_user"/>
          <HotContest :competitionList="homeData.competitionList" v-if="HOME_DISPLAY.hot_crowd"/>
        </el-col>
      </el-row>
      <InstitutionCard v-if="HOME_DISPLAY.institution_card"></InstitutionCard>
    </div>
  </div>
</template>

<script>
// import commonData from '../../constants/tabMenu'
import SearchBar from '../../components/commons/SearchBar'
import TestMenu from './TestMenu'
import LoginCard from './LoginCard'
import BrandCard from './BrandCard'
import ResourceAndTool from './ResourceAndTool'
import TestCard from './TestCard'
import InstitutionCard from './InstitutionCard'
import HotCrowd from './HotCrowd'
import HotAgency from './HotAgency'
import HotUser from './HotUser'
import HotContest from './HotContest'
import PopularProject from '../Square/PopularProject'
import Http from '@/js/http.js'
import {mapGetters} from 'vuex'
import Waterfall from 'vue-waterfall/lib/waterfall'
import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
import {getAllFields, storageGet} from '@/js/index.js'
import {notify} from "../../constants";
import Apis from '@/js/api'
import {logoTitle, home_searchTypeArr, home_homeTabArr_left,
  home_homeTabArr_right,home_homeTabArr_default,HOME_DISPLAY} from "../../config";

// console.log(commonData);
export default {
  name: 'Homepage',
  components: {
    HotCrowd,
    HotContest,
    HotUser,
    HotAgency,
    InstitutionCard,
    SearchBar,
    TestMenu,
    PopularProject,
    LoginCard,
    TestCard,
    BrandCard,
    ResourceAndTool,
    Waterfall,
    WaterfallSlot
    // vueWaterfallEasy
  },
  data() {
    return {
      logoTitle,
      HOME_DISPLAY,
      user: {},
      isLogin: false,
      loading: false,
      searchType: '0',
      searchTypeArr: home_searchTypeArr,
      searchVal: '',
      homeTabArr: {
        menuArr1: home_homeTabArr_left,
        menuArr2: [{code: '', name: ''}],
        menuArr3: home_homeTabArr_right
      },
      homeData: {},
      homeDataNoCache: {},
      currTab: home_homeTabArr_default
    }
  },
  computed: {
    ...mapGetters(['getUserInfo'])
  },
  methods: {
    loadData() {
      this.showLoading();
      if (storageGet('user') != null) {
        this.isLogin = true;
      }
      this.setFields();
      let p1 = new Promise((resolve, reject) => {
        Http.get('/api/common/index/info/cache').then((res) => {
          this.homeData = res.data;
          // this.homeData.applicationTypeList.map((item)=>{
          //   item.height = (item.testTypeList.length / 2) * 24 + 100;
          //   return item;
          // })
          resolve(res.data);
        }).catch((error) => {
          notify('error', error.data)
          reject(error)
        })
      });
      let p2 = new Promise((resolve, reject) => {
        Http.get('/api/common/index/info/nocache').then((res) => {
          this.homeDataNoCache = res.data;
          resolve(res.data);
        }).catch((error) => {
          notify('error', error.data)
          reject(error)
        })
      });
      Promise.all([p1, p2]).then((result) => {
        this.hideLoading();
      }).catch((error) => {
        notify('error', error.data)
      })
    },
    setFields() {
      getAllFields().then((res) => {
        this.homeTabArr.menuArr2 = res
      })
    },
    checkLogin() {
      this.checkCreateProjectAuth();
    },
    checkCreateProjectAuth() {
      if (!this.isLogin) {
        notify('warning', '请登录后访问');
      } else if (this.isLogin) {
        Http.get(Apis.USER.IS_PART.replace('{userId}', this.user.id)).then((res) => {
          this.$router.push('/project/create');
        }).catch((error) => {
          notify('error', error)
        })
      }
    },
    handleTabClick(tab) {
      this.currTab = tab.name;
      // console.log(this.currTab +  "  "  + tab.index +  "  "  + tab.name );
      for (let i = 0; i < this.homeTabArr.menuArr3.length; i++) {
        if (this.currTab === this.homeTabArr.menuArr3[i].name) {
          this.$router.push(this.homeTabArr.menuArr3[i].linkTo);
        }
      }

      for (let i = 0; i < this.homeTabArr.menuArr2.length; i++) {
        if (this.currTab === this.homeTabArr.menuArr2[i].code) {
          this.$router.push('/field/detail');
        }
      }
      this.$router.push(this.homeTabArr.menuArr1[Number(tab.index)] && this.homeTabArr.menuArr1[Number(tab.index)].linkTo);
    },
    handleTypeClick(tab, e) {
      this.searchType = tab.name;
      // e.target.style.backgroundColor = $color-primary
      this.$refs.searchInput.focus()
    },
    handleSearchData() {
      if (this.searchType == 0) {
        this.$router.push({
          name: 'Square',
          params: {searchVal: this.searchVal, searchType: "project", currTab: "project"}
        });
      } else if (this.searchType == 1) {
        this.$router.push({name: 'AgencyList', params: {searchVal: this.searchVal}});
      } else if (this.searchType == 2) {
        this.$router.push({name: 'ResourceList', params: {searchVal: this.searchVal}});
      } else if (this.searchType == 3) {
        this.$router.push({name: 'ExpertList', params: {searchVal: this.searchVal}});
      }
    },
    showLoading() {
      this.loading = true
    },
    hideLoading() {
      this.loading = false
    },
    setUserInfo() {
      this.user = storageGet('user') && storageGet('user').userVO;
    }
  },
  mounted() {
    this.setUserInfo();
    this.loadData();
    this.$refs.searchInput.focus()
  },
  watch: {
    getUserInfo(val) {
      this.setUserInfo();
      this.loadData();
    }
  }
}
</script>

<style lang="scss">
@import "../../style/search-nav.scss";

.home-wrapper {
  /deep/ .square-tab .el-tabs__item {
    font-size: 16px !important;
    margin-right: 0px !important;
  }

  /deep/ .login-card .popular-list {
    padding: 0 10px !important;
  }

  .home-page {
    padding: 15px 0;
  }

  .test-type-wrapper {
    padding-right: 15px;
    margin-bottom: 15px;
  }

  .homepage-right-modules {
    .login-card .el-card__body {
      padding: 10px !important;
    }

    .popular-card .el-card__header {
      padding: 10px !important;
    }

    .popular-card .el-card__body {
      padding: 10px !important;
    }
  }
}

</style>