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 container" style="text-align: center;"  v-loading="loading">
      <el-tabs value="myProject" @tab-click="handleTabClick">
        <el-tab-pane name="myProject" v-if="currTab == 'project'">
          <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="3" type="flex" align="middle" justify="center">应用类型</el-col>
            <el-col :span="3" type="flex" align="middle" justify="center">项目预算</el-col>
            <el-col :span="3" 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 )"
                        v-for="(item,index) in projectAndTaskArr" :key="item.id" :projectItem="item"/>
        </el-tab-pane>

        <el-tab-pane name="myProject" v-if="currTab == 'task'">
          <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="5">任务封面</el-col>
            <el-col :span="4">任务名称</el-col>
            <el-col :span="4">测试类型</el-col>
            <el-col :span="4">任务预算</el-col>
            <el-col :span="4">领取人数</el-col>
            <el-col :span="3">操作</el-col>
          </el-row>
          <task-item v-if="(projectAndTaskArr != null || projectAndTaskArr.length > 0 )"
                     v-for="(item,index2) in projectAndTaskArr" :key="index2" :task="item"/>
        </el-tab-pane>

      </el-tabs>
    </div>


    <div class="container">
      <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-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 {
        loading: false,
        isLogin: false,
        searchType: 'project',
        searchVal: '',
        currTab: 'project',
        tabArr: [
          {label: "热门项目", name: "project"},
          {label: "热门任务", name: "task"}
        ],
        menuArr: [
          {label: "热门测试项目", name: "project"},
          {label: "热门测试任务", name: "task"}
        ],
        projectAndTaskArr: [],
        activePage: 1,
        totalElements: 0,
        type: ''
      }
    },
    components: {
      TaskItem,
      ProjectItem,
      SearchBar,
      SquareCard,
      PopularProject,
      PopularTask
    },
    computed: {},
    methods: {
      loadData() {
        this.showLoading();
        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();
        }
        this.hideLoading();
      },
      getHotProject() {
        this.showLoading();
        let params = {
          "keyword": this.searchVal,//搜索关键字
          "activePage": this.activePage,//指定页面
          "columnFilters": []
        };
        Http.post(Apis.PROJECT.MORE_HOT_PROJECT, params).then((res) => {
          console.log(res.data);
          this.projectAndTaskArr = res.data.content;
          this.totalElements = res.data.totalElements;
        })
        this.hideLoading();
      },
      getHotTask() {
        this.showLoading();
        let params = {
          "keyword": this.searchVal,//搜索关键字
          "activePage": this.activePage,//指定页面
          "columnFilters": []
        };
        Http.post(Apis.TASK.MORE_HOT_TASK, params).then((res) => {
          this.projectAndTaskArr = res.data.content;
          this.totalElements = res.data.totalElements;
        })
        this.hideLoading();
      },

      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() {
        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() {
        this.activePage = 1;
        console.log("this.searchType " + this.searchType);;
        if (this.searchType === 'project') {
          this.currTab =  'project';
          this.getHotProject();
          console.log("currTab " + this.currTab)
        } else {
          this.currTab =  'task';
          this.getHotTask();
          console.log("currTab " + this.currTab)
        }
      },
      handlePageChange(index) {
        this.activePage = index;
        this.searchData();
      },
      showLoading() {
        this.loading = true
      },
      hideLoading() {
        this.loading = false
      },
      setUserInfo() {
        this.user = storageGet('user') && storageGet('user').userVO;
      }
    },
    mounted() {
      this.setUserInfo();
      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;
  }


  .mine-container {
    padding: 0 80px 40px 80px;
  }

  .mine-top-wrapper {
    height: 350px;
    background-color: #fff;
  }

  [class*="el-col-"] {
    height: 100%;
  }

  .advertise-imgs {
    height: 100%;
  }

  .advertise-imgs img {
    width: 100%;
    height: 100%;
  }

  .user-banner {
    text-align: center;
    display: inline-table;
    height: 100%;
    width: 100%;
    margin-top: 40px;
  }

</style>