根据环境完成不同路由下对首页的映射

src/pages/Homepage/HomepagePrivate.vue

@@ -0,0 +1,288 @@
+<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" @click="handleLogoClick">
+            <img class="logo-img" :src="logo_transparent" :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 :gutter="15">
+        <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_contest"/>
+        </el-col>
+        <el-col :span="19" class="test-type-wrapper">
+          <TestMenu :testTypeList="homeData.testTypeList" v-if="HOME_DISPLAY.test_menu && homeData.testTypeList"></TestMenu>
+          <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="homeDataNoCache.toolList && homeDataNoCache.toolList"></ResourceAndTool>
+          </el-row>
+          <el-row>
+            <BrandCard :residentAgencyList=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 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 {CONFIG} 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:CONFIG.logoTitle,
+      HOME_DISPLAY:CONFIG.HOME_DISPLAY,
+      logo_transparent:CONFIG.logo_transparent,
+      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;
+          // })
+          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(){
+      location.reload();
+    },
+    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();
+  },
+  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>

src/router/index.js

@@ -15,6 +15,7 @@ import ProjectAdd from '@/components/cheat/ProjectAdd'
 import AgencyAdd from '@/components/cheat/AgencyAdd'
 
 Vue.use(Router)
+const $env = process.env.NODE_ENV;
 
 export default new Router({
   linkActiveClass: 'active',
@@ -22,7 +23,9 @@ export default new Router({
     {
       path: '/',
       name: 'Home',
-      component: resolve => require(['@/pages/Homepage/Homepage'], resolve),
+      component: resolve => {
+        return $env === 'private' ? require(['@/pages/Homepage/HomepagePrivate'],resolve) : require(['@/pages/Homepage/Homepage'], resolve)
+      },
       meta: {
         title: '',
         requireAuth: false,