|
@@ -0,0 +1,279 @@
|
|
|
+<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>-->
|
|
|
+<!-- <!–<el-col :span="4">{{project.id}}</el-col>–>-->
|
|
|
+<!-- <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>
|