crowd-test-service-frontend/src/pages/Square/Square2.0.vue

<template>
  <div>
    <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="gotoHome" style="cursor: pointer">
            <img class="logo-img" src="../../assets/image/logo-transparent.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">
                <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" ref="searchInput">
                  <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 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"  style="margin-bottom: 10px">
            <el-col v-if="!projectAndTaskArr.length" style="text-align: center;padding: 5px 0"><span>暂无数据</span></el-col>
            <el-col :span="8" v-for="(item,index) in projectAndTaskArr" :key="index" style="margin-bottom: 15px">
              <SquareCard :card="item"></SquareCard>
            </el-col>
          </el-row>
          <el-pagination
            v-if="currTab!=='squareHome'&&projectAndTaskArr&&projectAndTaskArr.length"
            :page-size="12"
            layout="prev, pager, next"
            :total="totalElements"
            :current-page = "activePage"
            @current-change="handlePageChange"
            class="pull-right"
          >
          </el-pagination>
        </el-col>
        <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>
  </div>
</template>

<script>
  import Http from '@/js/http.js'
  import Apis from '@/js/api.js'
  import SearchBar from '../../components/commons/SearchBar'
  import SquareCard from './SquareCard'
  import PopularProject from './PopularProject'
  import PopularTask from './PopularTask'
  import {storageGet} from '@/js/index.js'
  import {notify} from "../../constants";

  export default {
    name: 'Square2.0',
    data(){
      return {
        user: {},
        isLogin: false,
        searchType:'project',
        searchVal: '',
        currTab:'squareHome',
        tabArr : [
          {label:"项目",name:"project"},
          {label:"任务",name:"task"}
        ],
        menuArr: [
          {label:"首页",name:"squareHome"},
          {label:"测试项目",name:"project"},
          {label:"测试任务",name:"task"}
        ],
        projectAndTaskArr:[],
        type: 0,
        hotCrowdTestProjectVOs:[],
        hotCrowdTaskVOs:[],
        activePage:1,
        totalElements:0
      }
    },
    components: {
      SearchBar,
      SquareCard,
      PopularProject,
      PopularTask
    },
    computed:{
    },
    methods:{
      gotoHome(){
        this.$router.push('/home');
      },
      handleTabClick(tab){
          console.log("handleTabClick ");
        this.currTab = tab.name
        this.activePage = 1;
        this.searchVal = '';
        this.searchData()
      },
      handleTabClickSearch(){
          this.activePage = 1;
          this.searchData()
      },
      searchData(index){
        if(this.currTab === 'squareHome'){
          this.getData();
        }else{
          this.searchType = this.currTab;
          this.handleSearchData();
        }
      },
      handleTypeClick(tab){
        this.searchType = tab.name;
        this.activePage = 1;
        this.$refs.searchInput.focus()
      },

      loadData(){
        if (storageGet('user') != null) {
            this.isLogin = true;
        }

        // this.projectAndTaskArr = this.$route.params.projectAndTaskArr;
        // this.type = this.$route.params.type;

        // 从首页项目搜索框跳转过来
        this.currTab = this.$route.params.currTab;
        if(this.currTab === "project"){
            this.searchVal = this.$route.params.searchVal;
            this.searchType = this.$route.params.searchType;
            this.getHotData();
            this.handleTabClickSearch();
        }

        // // 从热门项目和任务跳转过来
        // else if(this.type == 1){
        //     console.log("type " + this.type);
        //     this.getHotData();
        // }

        // 正常点击众测广场跳转过来
        else{
            this.searchVal = this.$route.params.searchVal;
            this.searchType = 'project';
            this.currTab = "squareHome"
            this.getData();
        }
      },

      getData(){
          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;
              this.projectAndTaskArr = projectAndTaskArr;
          })
      },

      getHotData(){
          Http.get('/api/square/list').then((res)=>{
              this.hotCrowdTestProjectVOs = res.data.hotCrowdTestProjectVOs;
              this.hotCrowdTaskVOs = res.data.hotCrowdTaskVOs;
          })
      },
      checkLogin() {
        this.checkCreateProjectAuth();
      },
      checkCreateProjectAuth() {
        if (!this.isLogin) {
          console.log("请登录后访问");
          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)
          })
        }
      },
      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)=>{
          this.currTab = this.searchType;
          this.projectAndTaskArr = res.data.content;
          this.totalElements=res.data.totalElements;
        })
      },
      handlePageChange(index){
        this.activePage = index;
        this.searchData();
      },
      setUserInfo() {
        this.user = storageGet('user') && storageGet('user').userVO;
      }
    },
    mounted() {
      this.setUserInfo();
      this.loadData();
    }
  }
</script>

<style lang="scss">
  @import "../../style/search-nav.scss";
  .project-task {
     padding: 15px 0;
    .el-card {
      border: none;
    }
   }

  .popular-modules {
    padding: 15px 0 15px 15px;
  }

</style>