add:square data + home data

src/App.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-
     <header-container/>
     <div class="container-wrapper">
       <slot>

src/components/commons/Header2.0.vue

@@ -40,7 +40,7 @@
 
 <style scoped>
   .header-nav {
-    padding: 15px 0;
+    padding: 10px 0;
     text-align: center;
     display: flex;
     font-size: 16px;

src/components/commons/SearchBar.vue

@@ -40,12 +40,11 @@
   export default {
     name: 'SearchBar',
     // components:{},
-    props: ['tabArr','menuArr'],
+    props: ['tabArr','menuArr','activeTab'],
     data(){
       return {
         searchType:'project',
         searchVal: '',
-        activeTab:'homepage'
       }
     },
     computed:{

src/pages/Homepage/BrandCard.vue

@@ -0,0 +1,26 @@
+<template>
+  <el-card class="test-card">
+    <div slot="header" class="clearfix test-card-header">
+      <span>入驻品牌机构</span>
+      <a class="pull-right" style="color: rgba(0, 118, 203, 1)" href="#">more>></a>
+    </div>
+    <div style="height: 96px">
+      <el-row :gutter="15">
+        <el-col v-for="item in residentAgencyList" :key="item.id" :span="6" style="height: 50px">
+          <img :src="item.logo" :alt="item.name" style="width: 100%;height: 100%"/>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: "BrandCard",
+    props:['residentAgencyList']
+  }
+</script>
+
+<style lang="less">
+
+</style>

src/pages/Homepage/Homepage.vue

@@ -1,15 +1,26 @@
 <template>
   <div class="home-wrapper">
-    <SearchBar :tabArr="tabArr" :menuArr="menuArr"></SearchBar>
+    <SearchBar :tabArr="tabArr" :menuArr="menuArr" :activeTab="activeTab"></SearchBar>
     <div class="home-page container">
       <el-row>
         <el-col :span="19" class="test-type-wrapper">
-          <TestMenu></TestMenu>
-          <TestCard></TestCard>
+          <TestMenu :testTypeList="homeData.testTypeList"></TestMenu>
+          <TestCard :applicationTypeList="homeData.applicationTypeList"></TestCard>
         </el-col>
         <el-col :span="5"  class="homepage-right-modules">
           <LoginCard/>
-<!--          <PopularProject />-->
+          <HotCrowd :applicationTypeRank="homeData.applicationTypeRank"/>
+          <HotAgency :agencyRank="homeData.agencyRank"/>
+          <HotUser :userRank="homeData.userRank"/>
+          <HotContest :competitionList="homeData.competitionList"/>
+        </el-col>
+      </el-row>
+      <el-row :gutter="15">
+        <el-col :span="12">
+          <ResourceAndTool :resourceList="homeData.resourceList"></ResourceAndTool>
+        </el-col>
+        <el-col :span="12">
+          <BrandCard :residentAgencyList = homeData.residentAgencyList></BrandCard>
         </el-col>
       </el-row>
       <InstitutionCard></InstitutionCard>
@@ -21,23 +32,38 @@
   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 PopularProject from '../Square/PopularProjext'
+  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'
 
   export default {
     name: 'Homepage',
     components: {
+      HotCrowd,
+      HotContest,
+      HotUser,
+      HotAgency,
       InstitutionCard,
       SearchBar,
       TestMenu,
       PopularProject,
       LoginCard,
-      TestCard
+      TestCard,
+      BrandCard,
+      ResourceAndTool
     },
     data() {
       return {
+        activeTab:'homepage',
         tabArr: [
+          {label: "项目", name: "project"},
           {label: "工具", name: "tool"},
           {label: "机构", name: "institution"},
           {label: "专家", name: "expert"}
@@ -57,9 +83,20 @@
           {label: "找机构", name: "findInstitution"},
           {label: "找专家", name: "finfExpert"},
           // {label: "更多", name: "findMore"},
-        ]
+        ],
+        homeData:{}
       }
     },
+    methods:{
+      loadData(){
+        Http.get('/api/common/index/info').then((res)=>{
+          this.homeData = res.data;
+        })
+      }
+    },
+    mounted() {
+      this.loadData();
+    }
   }
 </script>
 
@@ -77,10 +114,10 @@
     }
     .test-type-wrapper {
       padding-right: 15px;
+      margin-bottom: 15px;
     }
     .homepage-right-modules {
-      margin-top: 15px;
-      .el-card__body {
+      .login-card .el-card__body {
         padding: 10px !important;
       }
     }

src/pages/Homepage/HotAgency.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-card class="popular-card">
+    <div slot="header" class="popular-header">
+      <img src="../../assets/img/agency.png" alt="hot-crowd" class="popular-header-img"/>
+      <span class="popular-header-title">评测机构排行榜</span>
+      <el-button style="float: right; padding: 3px 0;line-height: 25px" type="text">more>></el-button>
+    </div>
+    <div class="popular-list">
+      <el-row class="popular-list-item" v-for="item in agencyRank" :key="item.id">
+        <el-col :span="19">
+          <img :src="item.logo" alt="logo-project" class="pull-left project-logo-img">
+          <div style="margin-left: 55px">
+            <div class="list-item-title">
+              {{item.name}}
+            </div>
+            <div class="list-item-info">
+
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="project-people-number">
+            {{item.taskCount}}次
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: 'HotAgency',
+    props:['agencyRank']
+  }
+</script>
+
+<style lang="less">
+
+</style>

src/pages/Homepage/HotContest.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-card class="popular-card">
+    <div slot="header" class="popular-header">
+      <img src="../../assets/img/crowd-contest.png" alt="hot-crowd" class="popular-header-img"/>
+      <span class="popular-header-title">众测大赛</span>
+      <el-button style="float: right; padding: 3px 0;line-height: 25px" type="text">more>></el-button>
+    </div>
+    <div class="popular-list">
+      <el-row class="popular-list-item" v-for="item in competitionList" :key="item.id">
+        <el-col :span="23">
+          <img src="../../assets/img/logo-project.png" alt="logo-project" class="pull-left project-logo-img">
+          <div style="margin-left: 55px">
+            <div class="list-item-title">
+              {{item.name}}
+            </div>
+            <div class="list-item-info">
+              {{item.startTime}}
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="1">
+          <div class="project-people-number">
+            >
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: 'HotContest',
+    props:['competitionList']
+  }
+</script>
+
+<style lang="less">
+
+</style>

src/pages/Homepage/HotCrowd.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-card class="popular-card">
+    <div slot="header" class="popular-header">
+      <img src="../../assets/img/HotCrowd.png" alt="hot-crowd" class="popular-header-img"/>
+      <span class="popular-header-title">热门项目</span>
+      <el-button style="float: right; padding: 3px 0;line-height: 25px" type="text">more>></el-button>
+    </div>
+    <div class="popular-list">
+      <el-row class="popular-list-item" v-for="item in applicationTypeRank" :key="item.id">
+        <el-col :span="19">
+          <img src="../../assets/img/logo-project.png" alt="logo-project" class="pull-left project-logo-img">
+          <div style="margin-left: 55px">
+            <div class="list-item-title">
+              {{item.name}}
+            </div>
+            <div class="list-item-info">
+
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="project-people-number">
+            {{item.count}}人
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: 'HotCrowd',
+    props:['applicationTypeRank']
+  }
+</script>
+
+<style lang="less">
+
+</style>

src/pages/Homepage/HotUser.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-card class="popular-card">
+    <div slot="header" class="popular-header">
+      <img src="../../assets/img/userRank.png" alt="hot-crowd" class="popular-header-img"/>
+      <span class="popular-header-title">众测人员排行榜</span>
+      <el-button style="float: right; padding: 3px 0;line-height: 25px" type="text">more>></el-button>
+    </div>
+    <div class="popular-list">
+      <el-row class="popular-list-item" v-for="item in userRank" :key="item.id">
+        <el-col :span="19">
+          <img src="../../assets/img/logo-project.png" alt="logo-project" class="pull-left project-logo-img">
+          <div style="margin-left: 55px">
+            <div class="list-item-title">
+              {{item.name}}
+            </div>
+            <div class="list-item-info">
+
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="project-people-number">
+            {{item.taskCount}}人
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: 'HotCrowd',
+    props:['userRank']
+  }
+</script>
+
+<style lang="less">
+
+</style>

src/pages/Homepage/ResourceAndTool.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-card class="test-card">
+    <div slot="header" class="clearfix test-card-header">
+      <span>众测资源和工具</span>
+      <a class="pull-right" style="color: rgba(0, 118, 203, 1)" href="#">more>></a>
+    </div>
+    <div>
+      <div v-for="item in resourceList" :key="item.code">{{item.name}}</div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: "ResourceAndTool",
+    props:['resourceList']
+  }
+</script>
+
+<style lang="less">
+
+</style>

src/pages/Homepage/TestCard.vue

@@ -1,17 +1,35 @@
 <template>
-  <el-card class="test-card">
-    <div slot="header" class="clearfix test-card-header">
-      <span>移动APP测试</span>
-    </div>
-    <div>
-      设备兼容性测试 性能测试
-    </div>
-  </el-card>
+  <div>
+    <el-row :gutter="10" v-for="(item,index) in applicationTypeArr" :key="index">
+      <el-col :span="8" v-for="application in item">
+        <el-card class="test-card">
+          <div slot="header" class="clearfix test-card-header">
+            <span>{{application.name}}</span>
+          </div>
+          <div>
+            <span v-for="type in application.testTypeList" :key="type.code" style="width: 50%">{{type.name}}</span>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
   export default {
-    name: "TestCard"
+    name: "TestCard",
+    props:['applicationTypeList'],
+    data(){
+      return{
+        applicationTypeArr:[]
+      }
+    },
+    mounted() {
+      // console.log(this.applicationTypeList);
+      // for(var i=0;i<this.applicationTypeList.length;i+=3){
+      //   this.applicationTypeArr.push(this.applicationTypeList.slice(i,i+3));
+      // }
+    }
   }
 </script>
 
@@ -22,6 +40,7 @@
     height:48px;
     background:rgba(233,240,250,1) !important;
     padding: 12px 15px;
+    margin-bottom: 10%;
   }
   .test-card-header {
     border-left: 5px solid #0076cb;

src/pages/Homepage/TestMenu.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="test-menu-wrapper">
     <div class="test-menu-item-wrapper">
-      <div class="test-menu-item" v-for="item in typeArr" :key="item.value">
+      <div class="test-menu-item" v-for="(item,index) in testTypeList" :key="item.code" v-if="index<8">
         <img src="../../assets/img/testType.png" alt="testType" class="test-menu-item-img">
-        {{item.label}}
+        {{item.name}}
       </div>
       <div class="more-test-wrapper">
         <i class="el-icon-arrow-right more-test"></i>更多分类
@@ -15,18 +15,10 @@
 <script>
   export default {
     name: "TestMenu",
+    props:['testTypeList'],
     data() {
       return {
-        typeArr: [
-          {label: '性能测试', value: 'performance'},
-          {label: '功能测试', value: 'functional'},
-          {label: '兼容性测试', value: 'compatibility'},
-          {label: '安全测试', value: 'security'},
-          {label: '代码漏洞测试', value: 'bug'},
-          {label: 'XX测试', value: 'XX1'},
-          {label: 'XX测试', value: 'XX2'},
-          {label: 'XX测试', value: 'XX3'},
-        ]
+
       }
     }
   }
@@ -37,7 +29,7 @@
     background: rgba(255, 255, 255, 1);
     box-shadow: 0px 4px 30px 0px rgba(8, 6, 6, 0.08);
     padding: 15px 20px;
-    margin: 15px 0;
+    margin-bottom: 15px;
     display: flex;
 
     .test-menu-item-wrapper {

src/pages/Square/PopularProjext.vue → src/pages/Square/PopularProject.vue

@@ -6,39 +6,21 @@
       <el-button style="float: right; padding: 3px 0" type="text">more>></el-button>
     </div>
     <div class="popular-list">
-      <el-row class="popular-list-item">
+      <el-row class="popular-list-item" v-for="item in hotCrowdTestProjectVOs" :key="item.id">
         <el-col :span="19">
           <img src="../../assets/img/logo-project.png" alt="logo-project" class="pull-left project-logo-img">
           <div style="margin-left: 55px">
             <div class="list-item-title">
-              XXXXXXX项目
+              {{item.name}}
             </div>
             <div class="list-item-info">
-              描述XXXXXXXXXX
+              {{item.description}}
             </div>
           </div>
         </el-col>
         <el-col :span="5">
           <div class="project-people-number">
-            100人
-          </div>
-        </el-col>
-      </el-row>
-      <el-row class="popular-list-item">
-        <el-col :span="19">
-          <img src="../../assets/img/logo-project.png" alt="logo-project" class="pull-left project-logo-img">
-          <div style="margin-left: 55px">
-            <div class="list-item-title">
-              XXXXXXX项目
-            </div>
-            <div class="list-item-info">
-              描述XXXXXXXXXX
-            </div>
-          </div>
-        </el-col>
-        <el-col :span="5">
-          <div class="project-people-number">
-            100人
+            {{item.joinCount}}人
           </div>
         </el-col>
       </el-row>
@@ -48,11 +30,15 @@
 
 <script>
   export default {
-    name: 'PopularProject'
+    name: 'PopularProject',
+    props:['hotCrowdTestProjectVOs']
   }
 </script>
 
 <style lang="less">
+  .popular-card {
+    margin-bottom: 15px;
+  }
   .popular-header .el-card__header{
     border-bottom: 2px solid rgba(0,117,203,1) !important;
   }
@@ -77,15 +63,17 @@
   }
 
   .popular-list {
-    padding: 0 15px 15px 15px;
     .popular-list-item {
-      padding: 10px 0;
+      padding: 5px 10px;
       border-bottom: 1px solid #ccc;
       .list-item-title{
         font-size:14px;
         font-family:Source Han Sans CN;
         font-weight:400;
         color:rgba(0,0,0,1);
+        overflow: hidden;
+        text-overflow:ellipsis; //溢出用省略号显示
+        white-space:nowrap; //溢出不换行
       }
       .list-item-info{
         font-size:14px;

src/pages/Square/PopularTask.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-card class="popular-card">
+    <div slot="header" class="popular-header">
+      <img src="../../assets/img/popularTask.png" alt="popular-project" class="popular-header-img"/>
+      <span class="popular-header-title">热门项目</span>
+      <el-button style="float: right; padding: 3px 0" type="text" class="pull-right">more>></el-button>
+    </div>
+    <div class="popular-list">
+      <el-row class="popular-list-item" v-for="item in hotCrowdTaskVOs" :key="item.id">
+        <el-col :span="19">
+          <img src="../../assets/img/logo-blue.png" alt="logo-project" class="pull-left project-logo-img">
+          <div style="margin-left: 55px">
+            <div class="list-item-title">
+              {{item.title}}
+            </div>
+            <div class="list-item-info">
+              {{item.description}}
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="project-people-number">
+            {{item.participantHasCommittedCount}}人
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: 'PopularTask',
+    props:['hotCrowdTaskVOs']
+  }
+</script>
+
+<style lang="less">
+
+</style>

src/pages/Square/Square2.0.vue

@@ -1,34 +1,18 @@
 <template>
   <div>
-    <SearchBar :tabArr="tabArr" :menuArr="menuArr"></SearchBar>
+    <SearchBar :tabArr="tabArr" :menuArr="menuArr" :activeTab="activeTab"></SearchBar>
     <div class="container">
       <el-row>
         <el-col :span="18" class="project-task">
-          <el-row :gutter="15" style="margin-bottom: 20px">
-            <el-col :span="8">
-              <SquareCard></SquareCard>
-            </el-col>
-            <el-col :span="8">
-              <SquareCard></SquareCard>
-            </el-col>
-            <el-col :span="8">
-              <SquareCard></SquareCard>
-            </el-col>
-          </el-row>
-          <el-row :gutter="15">
-            <el-col :span="8">
-              <SquareCard></SquareCard>
-            </el-col>
-            <el-col :span="8">
-              <SquareCard></SquareCard>
-            </el-col>
-            <el-col :span="8">
-              <SquareCard></SquareCard>
+          <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-col>
-        <el-col :span="6"  class="popular-modules">
-          <PopularProject />
+        <el-col :span="6"  class="popular-modules" style="padding-left: 15px">
+          <PopularProject :hotCrowdTestProjectVOs="hotCrowdTestProjectVOs" style="margin-bottom: 15px"/>
+          <PopularTask :hotCrowdTaskVOs="hotCrowdTaskVOs"/>
         </el-col>
       </el-row>
     </div>
@@ -36,13 +20,16 @@
 </template>
 
 <script>
+  import Http from '@/js/http.js'
   import SearchBar from '../../components/commons/SearchBar'
   import SquareCard from './SquareCard'
-  import PopularProject from './PopularProjext'
+  import PopularProject from './PopularProject'
+  import PopularTask from './PopularTask'
   export default {
     name: 'Square2.0',
     data(){
       return {
+        activeTab:'home',
         tabArr : [
           {label:"项目",name:"project"},
           {label:"任务",name:"task"}
@@ -51,27 +38,48 @@
           {label:"首页",name:"home"},
           {label:"测试项目",name:"testProject"},
           {label:"测试任务",name:"teskTask"}
-        ]
+        ],
+        projectAndTaskArr:[],
+        hotCrowdTestProjectVOs:[],
+        hotCrowdTaskVOs:[],
       }
     },
     components: {
       SearchBar,
       SquareCard,
-      PopularProject
+      PopularProject,
+      PopularTask
+    },
+    methods:{
+      loadData(){
+        Http.get('/api/square/list').then((res)=>{
+          let crowdTestProjectVOs = res.data.crowdTestProjectVOs;
+          let crowdTestTaskVOS = res.data.crowdTestTaskVOS;
+          let projectAndTaskArr = crowdTestProjectVOs.concat(crowdTestTaskVOS);
+          this.hotCrowdTestProjectVOs = res.data.hotCrowdTestProjectVOs;
+          this.hotCrowdTaskVOs = res.data.hotCrowdTaskVOs;
+          for(var i=0;i<projectAndTaskArr.length;i+=3){
+            this.projectAndTaskArr.push(projectAndTaskArr.slice(i,i+3));
+          }
+        })
+      }
+    },
+    mounted() {
+      this.loadData();
     }
   }
 </script>
 
-<style scoped>
+<style lang="less">
   .project-task {
      padding: 15px 0;
+    .el-card {
+      border: none;
+    }
    }
 
   .popular-modules {
     padding: 15px 0 15px 15px;
   }
 
-  .search-nav {
-    margin: 20px 0;
-  }
 </style>

src/pages/Square/SquareCard.vue

@@ -1,15 +1,15 @@
 <template>
   <el-card class="square-card">
     <div class="card-title" >
-      XXXXXX卡片标题
+      {{card.name ? card.name :card.title}}
     </div>
     <div class="card-content">
-      卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容
+      {{card.description}}
     </div>
     <div class="card-detail">
       <el-row>
         <el-col :span="6">
-          <span class="card-detail-money">￥10000</span>
+          <span class="card-detail-money">￥{{card.quotedPrice ? card.quotedPrice : card.quotePrice}}</span>
         </el-col>
         <el-col :span="18">
           <span class="card-detail-info pull-right">14分钟前发布/5人参与</span>
@@ -19,7 +19,7 @@
     <div class="card-footer">
       <el-row class="card-footer-row">
         <el-col :span="12" class="pull-left">
-          性能测试项目
+          {{card.platform}}
         </el-col>
         <el-col :span="12" class=" test-btn">
           <el-button type="primary" round size="mini" class="pull-right">我要众测</el-button>
@@ -31,7 +31,11 @@
 
 <script>
   export default {
-    name: 'SquareCard'
+    name: 'SquareCard',
+    props: ['card'],
+    mounted() {
+
+    }
   }
 </script>
 

src/pages/Technology/Technology2.0.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="technology-container">
-    <SearchBar :menuArr="menuArr"></SearchBar>
+    <SearchBar :menuArr="menuArr" :activeTab="activeTab"></SearchBar>
     <div class="container">
       <el-row>
         <el-col :span="18" class="project-task">
@@ -18,7 +18,7 @@
 <script>
   import SearchBar from '../../components/commons/SearchBar'
   import TechnologyCard from './TechnologyCard'
-  import PopularProject from '../Square/PopularProjext'
+  import PopularProject from '../Square/PopularProject'
   export default {
     name: 'Technology2.0',
     components: {
@@ -28,6 +28,7 @@
     },
     data(){
       return {
+        activeTab:'article',
         menuArr: [
           {label:"技术文章",name:"article"},
           {label:"技术专著",name:"monograph"},
@@ -39,15 +40,12 @@
 
 <style scoped lang="less">
   .technology-container {
-    /deep/ .search-nav,/deep/ .releaseBtn{
+    /deep/ .search-input,/deep/ .releaseBtn{
       margin: 20px 0 0 0 !important;
     }
-    .project-task {
-      padding: 15px 0;
-    }
 
     .popular-modules {
-      padding: 15px 0 15px 15px;
+      padding-left: 15px;
     }
   }
 

src/style/main.scss

@@ -57,8 +57,6 @@ a {
 
 .container {
     width: 100%;
-    padding-right: 15px;
-    padding-left: 15px;
     margin-right: auto;
     margin-left: auto
 }