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/img/logo-blue.png" :to="'/home'"/>
            <span class="logo-title">群智众测平台</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 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"></TestMenu>
          <TestCard :applicationTypeList="homeData.applicationTypeList"></TestCard>
        </el-col>
        <el-col :span="5"  class="homepage-right-modules">
          <LoginCard/>
          <HotCrowd :applicationTypeRank="homeDataNoCache.applicationTypeRank"/>
          <HotAgency :agencyRank="homeDataNoCache.agencyRank"/>
          <HotUser :userRank="homeDataNoCache.userRank"/>
          <HotContest :competitionList="homeData.competitionList"/>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <ResourceAndTool :resourceList="homeDataNoCache.resourceList"></ResourceAndTool>
        </el-col>
        <el-col :span="12">
          <BrandCard :residentAgencyList = homeData.residentAgencyList></BrandCard>
        </el-col>
      </el-row>
      <InstitutionCard></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 {mapActions,mapGetters} from 'vuex'
  import Waterfall from 'vue-waterfall/lib/waterfall'
  import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
  import {storageGet, getAllFields} from '@/js/index.js'
  import {notify} from "../../constants";
  // 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 {
        isLogin: false,
        searchType:'0',
        searchTypeArr:[
          {
            "name": "全部",
            "value": "all"
          },
          {
            "name": "项目",
            "value": "0"
          },
          {
              "name": "机构",
              "value": "1"
          },
          {
              "name": "工具",
              "value": "2"
          },
          {
            "name": "专家",
            "value": "3"
          }],
        searchVal: '',
        homeTabArr:{
          menuArr1: [
            {label: "首页", name: "homepage",linkTo:'/home'},
            {label: "众测广场", name: "square",linkTo:'/square'},
            {label: "众测技术", name: "technology",linkTo:'technology'}
          ],
          menuArr2:[
            {code: '', name: ''}
          ],
          menuArr3:[
            {label: "找机构", name: "findInstitution",linkTo:'/agency/list/show'},
            {label: "找专家", name: "findExpert",linkTo:'/expert/list'},
          ],
        },
        homeData:{},
        homeDataNoCache: {},
        currTab:'homepage'
      }
    },
    methods:{
      loadData(){
        if (storageGet('user') != null) {
            this.isLogin = true;
        }
        this.setFields();

        Http.get('/api/common/index/info/cache').then((res)=>{
          console.log(res.data);
          this.homeData = res.data;
          // this.homeData.applicationTypeList.map((item)=>{
          //   item.height = (item.testTypeList.length / 2) * 24 + 100;
          //   return item;
          // })
        })

        Http.get('/api/common/index/info/nocache').then((res)=>{
            this.homeDataNoCache = res.data;
        })
      },
      setFields(){
          getAllFields().then((res) => {
              this.homeTabArr.menuArr2 = res
              // console.log(this.homeTabArr.menuArr2)
          })
      },
      checkLogin(){
        if(!this.isLogin){
            console.log("请登录后访问");
            notify('warning','请登录后访问');
        }else{
            console.log("已登录");
            this.$router.push('/project/create');
        }
      },
      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)].linkTo);
      },
      handleTypeClick(tab){
        this.searchType = tab.name
      },
      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}});
        }
      }
    },

    mounted() {
      this.loadData();
    }
  }
</script>

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

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