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

<template>
  <div class="home-wrapper">
    <div class="nav" stype="height:500px">
      <!--搜索框-->
      <el-row class="container search-nav" style="padding: 30px 0 20px 0">
        <el-col :span="5">
          <div class="pull-left to-mooctest-ranking" :style="{backgroundImage: 'url(' + mooctest_rank_logo_url + ')'}"  @click="handleLogoClick"></div>
        </el-col>
        <el-col :span="15">
<!--          <div class="search-nav-input">-->
<!--            <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="19">
          <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="container square-tab">
        <el-tab-pane v-for="item in homeTabArr.menuArr1" :name="item.name"
                     :key="item.name">
          <span slot="label" style="font-size: 18px">{{item.label}}</span>
        </el-tab-pane>
        <el-tab-pane v-for="item in homeTabArr.menuArr2"  :name="item.code"
                     :key="item.code">
          <span slot="label" style="font-size: 18px">{{item.label}}</span>
        </el-tab-pane>
        <el-tab-pane v-for="item in homeTabArr.menuArr3" :name="item.name"
                     :key="item.name">
          <span slot="label" style="font-size: 18px">{{item.label}}</span>
        </el-tab-pane>
      </el-tabs>
      <div>
      </div>
    </div>

    <div class="container home-page ">
      <el-row :gutter="15">
        <el-col :span="5" class="homepage-right-modules">
          <LoginCard v-if="HOME_DISPLAY.login_card"/>
          <PopularProject :hotCrowdTestProjectVOs="homeDataNoCache.projectList" v-if="HOME_DISPLAY.hot_project"/>
          <PopularTask :hotCrowdTaskVOs="homeDataNoCache.taskList" v-if="HOME_DISPLAY.hot_task"/>
          <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_contest"/>
        </el-col>
        <el-col :span="19" class="test-type-wrapper">
          <TestMenu :testTypeList="homeData.testTypeList" v-if="HOME_DISPLAY.test_menu && homeData.testTypeList"></TestMenu>
          <RankingCard v-if="HOME_DISPLAY.mooctest_rank"></RankingCard>
          <TestCard :applicationTypeList="homeData.applicationTypeList" v-if="HOME_DISPLAY.test_card && homeData.applicationTypeList"></TestCard>
          <el-row style="margin-top: 10px" v-if="HOME_DISPLAY.resource_and_tool">
            <ResourceAndTool :resourceList="homeData.toolList && homeData.toolList"></ResourceAndTool>
          </el-row>
          <el-row>
            <BrandCard :residentAgencyList="homeData.residentAgencyList" v-if="HOME_DISPLAY.brand_card && homeData.residentAgencyList"></BrandCard>
          </el-row>
        </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 RankingCard from './RankingCard'
  import HotContest from './HotContest'
  import PopularTask from '../Square/PopularTask'
  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 {CONFIG} from "../../config";

  export default {
    name: 'Homepage',
    components: {
      HotCrowd,
      HotContest,
      HotUser,
      HotAgency,
      PopularTask,
      InstitutionCard,
      SearchBar,
      TestMenu,
      PopularProject,
      LoginCard,
      RankingCard,
      TestCard,
      BrandCard,
      ResourceAndTool,
      Waterfall,
      WaterfallSlot
      // vueWaterfallEasy
    },
    data() {
      return {
        logoTitle:CONFIG.logoTitle,
        HOME_DISPLAY:CONFIG.HOME_DISPLAY,
        logo_transparent:CONFIG.logo_transparent,
        background_image: CONFIG.background_image,
        mooctest_rank_url: CONFIG.mooctest_rank_url,
        mooctest_rank_logo_url: CONFIG.mooctest_rank_logo_url,
        user: {},
        isLogin: false,
        searchType: CONFIG.home_searchType,
        searchTypeArr: CONFIG.home_searchTypeArr,
        searchVal: '',
        homeTabArr: {
          menuArr1: CONFIG.home_homeTabArr_left,
          menuArr2: [{code: '', name: ''}],
          menuArr3: CONFIG.home_homeTabArr_right
        },
        homeData: {},
        homeDataNoCache: {},
        currTab: CONFIG.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;
            // })
            this.homeTabArr.menuArr2 = res.data.fieldList
            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();
      },
      handleLogoClick(){
        window.open(this.mooctest_rank_url, "_blank");
      },
      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.data)
          })
        }
      },
      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({name: 'PopularProjectAndTaskList', params: {fieldCode: this.homeTabArr.menuArr2[i].code}})

          }
        }
        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();
    },
    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>