|
|
@@ -2,15 +2,12 @@
|
|
|
<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-row class="container search-nav" style="padding: 30px 0 20px 0" :gutter="40">
|
|
|
+ <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="12">
|
|
|
- <div class="search-nav">
|
|
|
+ <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"
|
|
|
@@ -25,27 +22,29 @@
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
- <el-col :span="6">
|
|
|
+ <el-col :span="4">
|
|
|
<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-tabs v-model="currTab" @tab-click="handleTabClick" class="container square-tab">
|
|
|
<el-tab-pane v-for="item in homeTabArr.menuArr1" :label="item.label" :name="item.name"
|
|
|
- :key="item.name"></el-tab-pane>
|
|
|
+ :key="item.name" style="font-size: 18px"></el-tab-pane>
|
|
|
<el-tab-pane v-for="item in homeTabArr.menuArr2" :label="item.name" :name="item.code"
|
|
|
- :key="item.code"></el-tab-pane>
|
|
|
+ :key="item.code" style="font-size: 18px"></el-tab-pane>
|
|
|
<el-tab-pane v-for="item in homeTabArr.menuArr3" :label="item.label" :name="item.name"
|
|
|
- :key="item.name"></el-tab-pane>
|
|
|
+ :key="item.name" style="font-size: 18px"></el-tab-pane>
|
|
|
</el-tabs>
|
|
|
<div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="home-page container">
|
|
|
+ <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"/>
|
|
|
@@ -53,12 +52,13 @@
|
|
|
</el-col>
|
|
|
<el-col :span="19" class="test-type-wrapper">
|
|
|
<TestMenu :testTypeList="homeData.testTypeList" v-if="HOME_DISPLAY.test_menu && homeData.testTypeList"></TestMenu>
|
|
|
+ <RankingCard></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="homeDataNoCache.toolList && homeDataNoCache.toolList"></ResourceAndTool>
|
|
|
+ <ResourceAndTool :resourceList="homeData.toolList && homeData.toolList"></ResourceAndTool>
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
- <BrandCard :residentAgencyList=homeData.residentAgencyList v-if="HOME_DISPLAY.brand_card && homeData.residentAgencyList"></BrandCard>
|
|
|
+ <BrandCard :residentAgencyList="homeData.residentAgencyList" v-if="HOME_DISPLAY.brand_card && homeData.residentAgencyList"></BrandCard>
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -68,221 +68,227 @@
|
|
|
</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";
|
|
|
+ // 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";
|
|
|
|
|
|
-// 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
|
|
|
- })
|
|
|
+ export default {
|
|
|
+ name: 'Homepage',
|
|
|
+ components: {
|
|
|
+ HotCrowd,
|
|
|
+ HotContest,
|
|
|
+ HotUser,
|
|
|
+ HotAgency,
|
|
|
+ PopularTask,
|
|
|
+ InstitutionCard,
|
|
|
+ SearchBar,
|
|
|
+ TestMenu,
|
|
|
+ PopularProject,
|
|
|
+ LoginCard,
|
|
|
+ RankingCard,
|
|
|
+ TestCard,
|
|
|
+ BrandCard,
|
|
|
+ ResourceAndTool,
|
|
|
+ Waterfall,
|
|
|
+ WaterfallSlot
|
|
|
+ // vueWaterfallEasy
|
|
|
},
|
|
|
- checkLogin() {
|
|
|
- this.checkCreateProjectAuth();
|
|
|
+ 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
|
|
|
+ }
|
|
|
},
|
|
|
- handleLogoClick(){
|
|
|
- location.reload();
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['getUserInfo'])
|
|
|
},
|
|
|
- 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');
|
|
|
+ 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)
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ 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)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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');
|
|
|
+ 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;
|
|
|
}
|
|
|
- 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) {
|
|
|
+ mounted() {
|
|
|
this.setUserInfo();
|
|
|
this.loadData();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ getUserInfo(val) {
|
|
|
+ this.setUserInfo();
|
|
|
+ this.loadData();
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-@import "../../style/search-nav.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;
|
|
|
- }
|
|
|
+ .home-wrapper {
|
|
|
+ /deep/ .square-tab .el-tabs__item {
|
|
|
+ font-size: 16px !important;
|
|
|
+ margin-right: 0px !important;
|
|
|
+ }
|
|
|
|
|
|
- .test-type-wrapper {
|
|
|
- padding-right: 15px;
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
+ /deep/ .login-card .popular-list {
|
|
|
+ padding: 0 10px !important;
|
|
|
+ }
|
|
|
|
|
|
- .homepage-right-modules {
|
|
|
- .login-card .el-card__body {
|
|
|
- padding: 10px !important;
|
|
|
+ .home-page {
|
|
|
+ padding: 15px 0;
|
|
|
}
|
|
|
|
|
|
- .popular-card .el-card__header {
|
|
|
- padding: 10px !important;
|
|
|
+ .test-type-wrapper {
|
|
|
+ padding-right: 15px;
|
|
|
+ margin-bottom: 15px;
|
|
|
}
|
|
|
|
|
|
- .popular-card .el-card__body {
|
|
|
- padding: 10px !important;
|
|
|
+ .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>
|
