crowd-test-service-frontend/src/pages/Square/PopularProjectAndTaskList.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/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">
                <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" @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="mine-body" style="text-align: center;">
      <el-tabs value="myProject" @tab-click="handleTabClick" v-loading="loading" style="width: 90%;margin-left: 5%">
        <el-tab-pane name="myProject">
          <span v-if="projectAndTaskArr == null || projectAndTaskArr.length == 0"> 暂无项目 </span>
          <el-row v-if="projectAndTaskArr != null && projectAndTaskArr.length != 0" type="flex" align="middle" justify="center"
                  style="font-size: 14px;">
            <el-col :span="6" type="flex" align="middle" justify="center">项目图片</el-col>
            <el-col :span="6" type="flex" align="middle" justify="center">项目名称</el-col>
            <el-col :span="6" type="flex" align="middle" justify="center">应用类型</el-col>
            <el-col :span="2" type="flex" align="middle" justify="center">项目预算</el-col>
            <el-col :span="4" type="flex" align="middle" justify="center">操作</el-col>
          </el-row>
          <project-item v-if="(projectAndTaskArr != null || projectAndTaskArr.length > 0 ) || currTab == 'project'"
                                    v-for="(item,index) in projectAndTaskArr" :key="index" :projectItem="item"/>
          <task-item v-if="(projectAndTaskArr != null || projectAndTaskArr.length > 0 ) || currTab == 'task'"
                         v-for="(item,index) in projectAndTaskArr" :key="index" :projectItem="item"/>
<!--          <div v-if="projectAndTaskArr != null || projectAndTaskArr.length > 0"-->
<!--                        v-for="(item,index) in projectAndTaskArr" :key="index" :projectItem="item">-->

<!--          <template>-->
<!--            <div class="project-item-container">-->
<!--              <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">-->
<!--                <el-col :span="6" type="flex" align="middle" justify="center">-->
<!--                  <el-badge :value="item.statusVO.text" class="item" :type="item.statusVO.style">-->
<!--                    <img class="project-cover" src="@/assets/img/home_ban1.jpg">-->
<!--                  </el-badge>-->
<!--                </el-col>-->
<!--                <el-col :span="6" type="flex" align="middle" justify="center">{{item.name}}</el-col>-->
<!--                &lt;!&ndash;<el-col :span="4">{{project.id}}</el-col>&ndash;&gt;-->
<!--                <el-col :span="6" type="flex" align="middle" justify="center">-->
<!--        <span style="font-size: 10px;"-->
<!--              v-bind:class="['badge']"-->
<!--        >{{item.platform}}</span>-->
<!--                </el-col>-->
<!--                <el-col :span="2" type="flex" align="middle" justify="center">-->
<!--                  <div class="badge">¥{{item.budget}}</div>-->
<!--                </el-col>-->
<!--                <el-col :span="4" type="flex" align="middle" justify="center">-->
<!--                  <el-badge v-if="item.needHandle" is-dot class="item">-->
<!--                    <span class="btn btn-small btn-info" @click="goToProjectDetail(item.id)">查看详情</span>-->
<!--                  </el-badge>-->
<!--                  <span v-if="!item.needHandle" class="btn btn-small btn-info" @click="goToProjectDetail(item.id)">查看详情</span>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </div>-->
<!--          </template>-->
<!--          </div>-->
        </el-tab-pane>
      </el-tabs>
    </div>


    <div class="container">
      <el-row>
        <el-col :span="18" class="project-task">
<!--          <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>-->
<!--            </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 {notify} from "../../constants"
    import TaskItem from '../../components/commons/TaskItem'
    import ProjectItem from '../../components/commons/ProjectItem'
    import {defaultValue, getRolesPermissions, storageGet} from '@/js/index'
    import { mapActions ,mapGetters} from 'vuex';
    export default {
        name: 'PopularProjectAndTaskList',
        comments: {TaskItem, ProjectItem},
        data(){
            return {
                isLogin: false,
                searchType:'project',
                searchVal: '',
                currTab:'project',
                tabArr : [
                    {label:"热门项目",name:"project"},
                    {label:"热门任务",name:"task"}
                ],
                menuArr: [
                    {label:"热门测试项目",name:"project"},
                    {label:"热门测试任务",name:"task"}
                ],
                projectAndTaskArr:[],
                type: 0,
                activePage:1,
                totalElements:0,
                type: ''
            }
        },
        components: {
            ProjectItem,
            SearchBar,
            SquareCard,
            PopularProject,
            PopularTask
        },
        computed:{
        },
        methods:{
            loadData(){
                if (storageGet('user') != null) {
                    this.isLogin = true;
                }
                this.type = this.$route.params.type;
                if(this.type === "project"){
                    this.currTab = 'project';
                    this.getHotProject();
                }else{
                    this.currTab = 'task';
                    this.getHotTask();
                }
            },
            getHotProject(){
                let params = {
                    "keyword": this.keyword,//搜索关键字
                    "activePage": this.activePage,//指定页面
                    "columnFilters":[]
                };
                Http.post(Apis.PROJECT.MORE_HOT_PROJECT, params).then((res) => {
                    console.log(res.data);
                    this.projectAndTaskArr = res.data.content;
                })
            },
            getHotTask(){
                let params = {
                    "keyword": this.keyword,//搜索关键字
                    "activePage": this.activePage,//指定页面
                    "columnFilters":[]
                };
                Http.post(Apis.TASK.MORE_HOT_TASK, params).then((res) => {
                    this.projectAndTaskArr = res.data.content;
                })
            },

            gotoHome(){
                this.$router.push('/home');
            },
            handleTabClick(tab){
                this.currTab = tab.name
                this.searchType = this.currTab;
                this.activePage = 1;
                this.searchVal = '';
                this.searchData()
            },
            handleTabClickSearch(){
                this.activePage = 1;
                this.searchData()
            },
            searchData(index){
                if(this.currTab === 'project'){
                    this.getHotProject();
                }else{
                    this.searchType = this.currTab;
                    this.getHotTask();
                }
            },
            handleTypeClick(tab){
                this.searchType = tab.name;
                // this.currTab = this.searchType;
                this.activePage = 1;
            },
            checkLogin(){
                if(!this.isLogin){
                    console.log("请登录后访问");
                    notify('warning','请登录后访问');
                }else{
                    console.log("已登录");
                    this.$router.push('/project/create');
                }
            },
            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();
            }
        },
        mounted() {
            this.loadData();
        }
    }
</script>

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

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

</style>