add:finish 1.0

src/components/commons/SearchBar.vue

@@ -86,10 +86,6 @@
         this.searchType = tab.name;
       },
       handleSearchData(){
-        // console.log(commonData.menuData);
-        // console.log(this.getActiveTab);
-        // let url = commonData.menuData.find((item)=>{return item.name = this.getActiveTab});
-        // let params = {"keyword": this.keyword,"activePage":this.activePage}
         let targetTab = this.getActiveTab;
         let pathInfo =  commonData.menuData.find((item)=>{
           return item.name === this.getActiveTab})

src/constants/tabMenu.js

@@ -5,9 +5,28 @@ const menuData =  [
   {label:"技术文章",name:"article",searchUrl:"/api/technical/articles",targetPage:"/technology/article"},
   {label:"技术专著",name:"monograph",searchUrl:"/api/technical/articles",targetPage:"/technology/monograph"},
 
+];
+const homeTabArr = {
+  menuArr1: [
+    {label: "首页", name: "homepage"},
+    {label: "众测广场", name: "square"},
+    {label: "众测技术", name: "technology"}
+  ],
+  menuArr2:[
+    {label: "科技服务", name: "monograph"},
+    {label: "服务互联网", name: "Internet"},
+    {label: "集成电路", name: "integratedCircuit"},
+    {label: "智能传感器", name: "Sensor"},
+    {label: "高端装备", name: "Assembly"},
+    {label: "更多", name: "more"}
+  ],
+  menuArr3:[
+    {label: "找机构", name: "findInstitution"},
+    {label: "找专家", name: "finfExpert"},
+    {label: "更多", name: "findMore"},
+  ],
+};
 
-]
 export default {
-  menuData,
-
+  menuData, homeTabArr
 }

src/pages/Homepage/Homepage.vue

@@ -1,20 +1,47 @@
 <template>
   <div class="home-wrapper">
-    <SearchBar :tabArr="tabArr" :menuArr="menuArr"></SearchBar>
+    <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"/>
+            <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">免费发布众测需求</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.label" :name="item.name" :key="item.name"></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="getHomeData.testTypeList"></TestMenu>
-
-<!--          <vue-waterfall-easy :imgsArr="homeData.applicationTypeList">-->
-<!--&lt;!&ndash;            <div class="img-info" slot-scope="props">&ndash;&gt;-->
-<!--&lt;!&ndash;              <p class="some-info">第{{props.index+1}}张图片</p>&ndash;&gt;-->
-<!--&lt;!&ndash;              <p class="some-info">{{props.value.info}}</p>&ndash;&gt;-->
-<!--&lt;!&ndash;            </div>&ndash;&gt;-->
-<!--&lt;!&ndash;            <TestCard :application="props" slot-scope="props" class="img-info"></TestCard>&ndash;&gt;-->
-<!--          </vue-waterfall-easy>-->
           <TestCard></TestCard>
-
         </el-col>
         <el-col :span="5"  class="homepage-right-modules">
           <LoginCard/>
@@ -38,6 +65,7 @@
 </template>
 
 <script>
+  // import commonData from '../../constants/tabMenu'
   import SearchBar from '../../components/commons/SearchBar'
   import TestMenu from './TestMenu'
   import LoginCard from './LoginCard'
@@ -52,9 +80,9 @@
   import PopularProject from '../Square/PopularProject'
   import Http from '@/js/http.js'
   import {mapActions,mapGetters} from 'vuex'
-  // import vueWaterfallEasy from 'vue-waterfall-easy'
   import Waterfall from 'vue-waterfall/lib/waterfall'
   import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
+  // console.log(commonData);
   export default {
     name: 'Homepage',
     components: {
@@ -76,20 +104,36 @@
     },
     data() {
       return {
-        tabArr: [
-          {label: "项目", name: "project"},
-          {label: "工具", name: "tool"},
-          {label: "机构", name: "institution"},
-          {label: "专家", name: "expert"}
-        ],
-        menuArr:{
+        searchType:'0',
+        searchTypeArr:[
+          {
+            "name": "全部",
+            "value": "all"
+          },
+          {
+            "name": "项目",
+            "value": "0"
+          },
+          {
+            "name": "工具",
+            "value": "1"
+          },
+          {
+            "name": "机构",
+            "value": "2"
+          },
+          {
+            "name": "专家",
+            "value": "3"
+          }],
+        searchVal: '',
+        homeTabArr:{
           menuArr1: [
             {label: "首页", name: "homepage"},
             {label: "众测广场", name: "square"},
             {label: "众测技术", name: "technology"}
           ],
           menuArr2:[
-            // {label: "|", name: "segmentation"},
             {label: "科技服务", name: "monograph"},
             {label: "服务互联网", name: "Internet"},
             {label: "集成电路", name: "integratedCircuit"},
@@ -98,7 +142,6 @@
             {label: "更多", name: "more"}
           ],
           menuArr3:[
-            // {label: "|", name: "segmentation"},
             {label: "找机构", name: "findInstitution"},
             {label: "找专家", name: "finfExpert"},
             {label: "更多", name: "findMore"},
@@ -858,11 +901,12 @@
               "imageUrl": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/Partner/mooctest.png"
             }
           ]
-        }
+        },
+        currTab:'homepage'
       }
     },
     methods:{
-      ...mapActions(['setActiveTab','setHomeData']),
+      ...mapActions(['setHomeData']),
       loadData(){
          this.homeData.applicationTypeList.map((item)=>{
            item.height = (item.testTypeList.length / 2) * 24 + 100;
@@ -872,19 +916,46 @@
         // Http.get('/api/common/index/info').then((res)=>{
         //   this.setHomeData(res.data);
         // })
+      },
+      handleTabClick(tab){
+        this.currTab = tab.name
+      },
+      handleTypeClick(tab){
+        this.searchType = tab.name
+      },
+      handleSearchData(){
+        let url = '/api/common/index/page';
+        let params = {
+          "keyword": this.searchVal,
+          "activePage": 1,
+          "columnFilters": [
+            {
+              "field": "type",
+              "type": "enums",
+              "enums":this.searchTypeArr,
+              "value": this.searchType
+            }
+          ]
+        }
+        Http.post(url,params).then((res)=>{
+          console.log(res);
+        })
+
       }
     },
     computed:{
       ...mapGetters(['getHomeData']),
     },
     mounted() {
-      this.setActiveTab('homepage');
+      console.log(this.homeTabArr);
       this.loadData();
     }
   }
 </script>
 
-<style  lang="less">
+<style lang="less">
+  @import "../../style/search-nav";
+
   .home-wrapper {
     /deep/ .square-tab .el-tabs__item {
       font-size: 16px !important;

src/pages/Square/Square2.0.vue

@@ -1,14 +1,44 @@
 <template>
   <div>
-    <SearchBar :tabArr="tabArr" :menuArr="menuArr"></SearchBar>
+    <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"/>
+            <span class="logo-title">群智众测平台</span>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="search-nav">
+            <div id="search-block " class="">
+              <el-tabs v-model="searchType" type="card" @tab-click="handleTypeClick" v-if="tabArr">
+                <el-tab-pane v-for="item in tabArr" :label="item.label" :name="item.name" :key="item.label"></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">免费发布众测需求</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 menuArr" :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">
       <el-row>
         <el-col :span="18" class="project-task">
-<!--          <el-row :gutter="15" v-for="(item,index) in projectAndTaskArr" :key="index" style="margin-bottom: 10px">-->
-<!--            <el-col :span="8" v-for="card in item" :key="card.id">-->
-<!--              <SquareCard :card="card"></SquareCard>-->
-<!--            </el-col>-->
-<!--          </el-row>-->
           <el-row :gutter="15"  style="margin-bottom: 10px">
             <el-col :span="8" v-for="(item,index) in projectAndTaskArr" :key="index" style="margin-bottom: 15px">
               <SquareCard :card="item"></SquareCard>
@@ -35,20 +65,22 @@
     name: 'Square2.0',
     data(){
       return {
+        searchType:'project',
+        searchVal: '',
+        currTab:'squareHome',
         tabArr : [
           {label:"项目",name:"project"},
           {label:"任务",name:"task"}
         ],
         menuArr: [
           {label:"首页",name:"squareHome"},
-          {label:"测试项目",name:"testProject"},
-          {label:"测试任务",name:"testTask"}
+          {label:"测试项目",name:"project"},
+          {label:"测试任务",name:"task"}
         ],
         projectAndTaskArr:[],
         hotCrowdTestProjectVOs:[],
         hotCrowdTaskVOs:[],
         activePage:1,
-        keyword:''
       }
     },
     components: {
@@ -58,22 +90,28 @@
       PopularTask
     },
     computed:{
-      ...mapGetters(['getActiveTab']),
-      currTab: {
-        get() {
-          if(this.getActiveTab === 'squareHome'){
-            this.loadData();
-          }
-          if(this.getActiveTab === 'testProject'){
-            this.loadTestProject();
-          }
-          return this.getActiveTab;
-        },
-        set(){}
-      }
     },
     methods:{
-      ...mapActions(['setActiveTab']),
+      handleTabClick(tab){
+        this.currTab = tab.name
+        this.activePage = 1;
+        this.searchVal = '';
+        this.searchData()
+      },
+      searchData(){
+        if(this.currTab === 'squareHome'){
+          this.loadData();
+        }else{
+          this.searchType = this.currTab;
+          // let searchType = this.menuArr.find(item=>{
+          //   return item.name === this.currTab
+          // }).value;
+          this.handleSearchData();
+        }
+      },
+      handleTypeClick(tab){
+        this.searchType = tab.name;
+      },
       loadData(){
         Http.get('/api/square/list').then((res)=>{
           let crowdTestProjectVOs = res.data.crowdTestProjectVOs;
@@ -84,24 +122,44 @@
           this.projectAndTaskArr = projectAndTaskArr;
         })
       },
-      // loadTestProject(){
-      //   let url = '/api/square/project/list';
-      //   let params = {"keyword": this.keyword,"activePage":this.activePage}
-      //   Http.get(url,params)
-      //     .then(res=>{
-      //       console.log(res);
-      //     })
-      // },
+      handleSearchData(){
+        let url = '/api/square/search/list';
+        let params = {
+          "keyword": this.searchVal,//搜索关键字
+          "activePage": this.activePage,//指定页面
+          "columnFilters":
+            [
+              {
+                "type": this.searchType // 查询项目就是project,任务就是task
+              }
+            ]
+        };
+        Http.post(url,params).then((res)=>{
+          console.log(res);
+          this.currTab = this.searchType;
+          // if(this.searchType === 'project'){
+          //   this.currTab = 'testProject'
+          // }
+          // if(this.searchType === 'task') {
+          //   this.currTab = 'testTask'
+          // }
+          this.projectAndTaskArr = res.data.content;
+          this.activePage = 1
+        })
+      },
+      handlePageChange(index){
+        this.activePage = index;
+        this.searchData();
+      }
     },
     mounted() {
       this.loadData();
-      this.setActiveTab('squareHome');
-      // this.loadTestProject();
     }
   }
 </script>
 
 <style lang="less">
+  @import "../../style/search-nav";
   .project-task {
      padding: 15px 0;
     .el-card {

src/pages/Square/SquareProject.vue

@@ -73,7 +73,7 @@
       // }
     },
     methods:{
-      ...mapActions(['setActiveTab']),
+
       loadData(){
         let url = '/api/square/project/list';
         let params = {

src/pages/Technology/Technology2.0.vue

@@ -1,11 +1,45 @@
 <template>
   <div class="technology-container">
-    <SearchBar :menuArr="menuArr"></SearchBar>
+    <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"/>
+            <span class="logo-title">群智众测平台</span>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="search-nav">
+            <div id="search-block " class="">
+              <div class="search-input">
+                <el-input placeholder="请输入内容" v-model="searchVal" class="input-with-select">
+                  <el-button class="search-button" slot="append"  type="primary" @click="loadTechnologyArticles">搜索</el-button>
+                </el-input>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary pull-right" class="releaseBtn">免费发布众测需求</el-button>
+        </el-col>
+      </el-row>
+      <!--TabNav-->
+      <el-tabs v-model="searchType" @tab-click="handleTabClick" class="square-tab">
+        <el-tab-pane v-for="item in searchTypeArr" :name="item.value" :key="item.value">
+          <span slot="label" style="font-size: 18px">{{item.name}}</span>
+        </el-tab-pane>
+      </el-tabs>
+      <div>
+      </div>
+    </div>
     <div class="container" style="margin: 15px auto">
       <el-row>
         <el-col :span="18" class="project-task">
-          <TechnologyCard></TechnologyCard>
+          <TechnologyCard :techArticleList = techArticleList.content v-if="searchType=='0'"></TechnologyCard>
+          <TechnologyMG :techArticleList = techArticleList.content v-if="searchType=='1'"></TechnologyMG>
           <el-pagination
+            v-if="techArticleList.content&&techArticleList.content.length"
             :page-size="10"
             layout="prev, pager, next"
             :total="techArticleList.totalElements"
@@ -26,6 +60,7 @@
   import Http from '@/js/http.js'
   import SearchBar from '../../components/commons/SearchBar'
   import TechnologyCard from './TechnologyCard'
+  import TechnologyMG from './TechnologyMG'
   import HotActicle from './HotActicle'
   import PopularProject from '../Square/PopularProject'
   import qs from 'querystring'
@@ -36,38 +71,37 @@
     components: {
       SearchBar,
       TechnologyCard,
+      TechnologyMG,
       PopularProject,
       HotActicle
     },
     data(){
       return {
-        menuArr: [
-          {label:"技术文章",name:"article",searchUrl:"/api/technical/articles",targetPage:"/technology/article"},
-          {label:"技术专著",name:"monograph",searchUrl:"/api/technical/articles",targetPage:"/technology/monograph"},
+        searchVal: '',
+        searchType:'',
+        searchTypeArr:[
+          {
+            "name": "技术文章",
+            "value": "0"
+          },
+          {
+            "name": "论文专著",
+            "value": "1"
+          }
         ],
         articleArr:[],
         keyword:"",
         activePage:1,
-        techArticleList:{}
-      }
-    },
-    computed:{
-      ...mapGetters(['getActiveTab']),
-      currTab: {
-        get() {
-          if(this.getActiveTab === 'article'){
-            this.loadTechnologyArticles();
-          }
-          if(this.getActiveTab === 'monograph'){
-            this.loadTechnologyMG();
-          }
-          return this.getActiveTab;
-        },
-        set(){}
+        techArticleList:{},
       }
     },
     methods:{
-      ...mapActions(['setTechArticleList','setActiveTab']),
+      handleTabClick(tab){
+        this.searchType = tab.name
+        this.activePage = 1;
+        this.searchVal = '';
+        this.loadTechnologyArticles();
+      },
       loadHotArticles(){
         Http.get('/api/technical/ranking').then((res)=>{
           this.articleArr = res;
@@ -77,20 +111,28 @@
         // let url=`/api/technical/articles?searchCondition={"keyword":"${this.keyword}","activePage":${this.activePage}}`;
         // Http.get(encodeURI(url))
         let url = '/api/technical/articles';
-        let params = {"keyword": this.keyword,"activePage":this.activePage}
+        let params = {
+          "keyword": this.searchVal,//查询条件，分页展示时就不填
+          "activePage": this.activePage,//指定页数
+          "columnFilters": [
+            {
+              "field": "type",
+              "type": "enums",
+              "enums": this.searchTypeArr,
+              "value": this.searchType//展示技术文章value为0
+            }
+          ]
+        }
         Http.post(url,params)
           .then(res=>{
-            this.techArticleList = res.data.technicalArticlespage;
-            this.setTechArticleList(this.techArticleList);
-          })
-      },
-      loadTechnologyMG(){
-        let url = '/api/technical/articles';
-        let params = {"keyword": this.keyword,"activePage":this.activePage}
-        Http.post(url,params)
-          .then(res=>{
-            this.techArticleList = res.data.technicalArticlespage;
-            this.setTechArticleList(this.techArticleList);
+            if(res.data.technicalArticlesPage){
+              this.techArticleList = res.data.technicalArticlesPage;
+              this.searchType = '0';
+            }
+            else if(res.data.publicationsPage){
+              this.techArticleList = res.data.publicationsPage;
+              this.searchType = '1';
+            }
           })
       },
       handlePageChange(index){
@@ -101,13 +143,12 @@
     mounted() {
       this.loadHotArticles();
       this.loadTechnologyArticles();
-      this.setActiveTab('article');
-      this.loadTechnologyMG();
     }
   }
 </script>
 
-<style scoped lang="less">
+<style lang="less">
+  @import "../../style/search-nav";
   .technology-container {
     /deep/ .search-input,/deep/ .releaseBtn{
       margin: 20px 0 0 0 !important;
@@ -116,6 +157,7 @@
     .popular-modules {
       padding-left: 15px;
     }
+
   }
 
 </style>

src/pages/Technology/TechnologyCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="technology-card">
-    <div class="card-wrapper">
-      <el-card  v-for="item in getTechArticleList.content" :key="item.id"  style="margin-bottom: 15px">
+    <div class="card-wrapper" v-if="techArticleList&&techArticleList.length">
+      <el-card  v-for="item in techArticleList" :key="item.id"  style="margin-bottom: 15px">
         <el-row>
           <el-col :span="6">
             <img :src="item.photoUrl" alt="technology-img" class="pull-left technology-img">
@@ -31,6 +31,9 @@
         </el-row>
       </el-card>
     </div>
+    <div v-else>
+      暂无内容
+    </div>
   </div>
 </template>
 
@@ -38,9 +41,7 @@
   import { mapGetters } from 'vuex';
   export default {
     name: 'TechnologyCard',
-    computed: {
-      ...mapGetters(['getTechArticleList']),
-    },
+    props:['techArticleList']
   }
 </script>
 

src/pages/Technology/TechnologyMG.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="technology-card">
+    <div class="card-wrapper" v-if="techArticleList&&techArticleList.length">
+      <el-card  v-for="item in techArticleList" :key="item.id"  style="margin-bottom: 15px">
+        <el-row>
+            <div class="technology-title">
+              {{item.longTitle}}
+            </div>
+          <div style="margin: 10px 0">
+            会议：{{item.conferenceJournal}}
+          </div>
+            <div class="technology-info">
+              <el-row >
+                作者：{{item.author}}
+              </el-row>
+            </div>
+        </el-row>
+      </el-card>
+    </div>
+    <div v-else>
+      暂无内容
+    </div>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex';
+  export default {
+    name: 'TechnologyMG',
+    props:['techArticleList']
+  }
+</script>
+
+<style scoped lang="less">
+  .technology-card {
+    .card-wrapper {
+      .technology-img {
+        width: 100%;
+        height: 130px;
+      }
+      .technology-title{
+        font-size:22px;
+        font-family:Source Han Sans CN;
+        font-weight:500;
+        color:rgba(0,0,0,1);
+      }
+      .technology-info {
+        font-size:16px;
+        font-family:Source Han Sans CN;
+        font-weight:400;
+        color:rgba(0,0,0,1);
+      }
+    }
+  }
+</style>

src/style/search-nav.less

@@ -0,0 +1,57 @@
+.nav{
+  background:rgba(255,255,255,1);
+  box-shadow:0px 4px 30px 0px rgba(8,5,6,0.08);
+  padding: 0 15%;
+}
+
+.logo-img{
+  width: 50px;
+  height: 50px;
+  margin: 2px 23px;
+  display: block;
+}
+.logo-title{
+  width: 100px;
+  text-align: center;
+}
+.nav .el-tabs__header{
+  margin: 0 !important;
+}
+
+.nav .el-tabs--card>.el-tabs__header{
+  border-bottom: none !important;
+}
+
+.nav .el-tabs__nav-wrap::after{
+  width: 0;
+  height: 0;
+}
+
+/*.square-tab .el-tabs__item {*/
+/*  font-size: 18px;*/
+/*  margin-right: 35px;*/
+/*}*/
+
+.search-button{
+  background-color: rgb(0, 118, 203) !important;
+  border: none;
+  border-radius: initial;
+  padding: -1px;
+  color: white !important;
+  height: 39px;
+  margin-right: -100px;
+}
+
+.search-block{
+  width: 500px;
+}
+
+.releaseBtn{
+  background-color: rgb(0, 118, 203);
+  margin-top: 40px;
+}
+
+.tab-menu1 {
+  border: 1px solid #ccc;
+  width: 1px;
+}