crowd-test-service-frontend/src/pages/Technology/Technology2.0.vue

<template>
  <div class="technology-container">
    <div class="nav" stype="height:500px">
      <!--搜索框-->
      <el-row class="container search-nav" style="padding: 30px 0 20px 0">
        <el-col :span="5">
          <div class="pull-left to-mooctest-ranking" @click="handleLogoClick">
<!--            <img class="logo-img" :src="logo_transparent" :to="'/home'"/>-->
<!--            <span class="logo-title">{{ logoTitle }}</span>-->
          </div>
        </el-col>
        <el-col :span="15">
          <div class="search-nav-input">
            <div id="search-block " class="">
              <el-tabs v-model="searchType" type="card" @tab-click="handleTypeClick">
                <el-tab-pane v-for="item in searchTypeArr" :label="item.label" :name="item.value" :key="item.value"></el-tab-pane>
              </el-tabs>
              <el-input placeholder="请输入内容" v-model="searchVal" class="input-with-select">
                <el-button class="search-button" slot="append"  type="primary" @click="loadTechnologyArticles(1)">搜索</el-button>
              </el-input>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button type="primary pull-right" class="releaseBtn" @click="checkLogin()">免费发布众测需求</el-button>
        </el-col>
      </el-row>
      <!--TabNav-->
      <el-tabs v-model="searchType" @tab-click="handleTabClick" class="container square-tab">
        <el-tab-pane v-for="item in searchTypeArr" :name="item.value" :key="item.value">
          <span slot="label" style="font-size: 18px">{{item.name}}</span>
        </el-tab-pane>
      </el-tabs>
      <div>
      </div>
    </div>
    <div class="container" style="margin: 15px auto" v-loading="loading">
      <el-row>
        <el-col :span="18" class="project-task">
          <CrowdTool
            :toolList = techArticleList.content v-if="searchType=='2'">
          </CrowdTool>
          <CrowdCase
            :caseList = techArticleList.content v-if="searchType=='3'" @refreshList="loadTechnologyArticles(activePage)">
          </CrowdCase>
          <TechnologyCard
            :techArticleList = techArticleList.content v-if="searchType=='0'" @refreshList="loadTechnologyArticles(activePage)">
          </TechnologyCard>
          <TechnologyMG :techArticleList = techArticleList.content v-if="searchType=='1'"></TechnologyMG>
          <el-pagination
            v-if="techArticleList.content&&techArticleList.content.length"
            :page-size="5"
            layout="prev, pager, next"
            :total="techArticleList.totalElements"
            @current-change="handlePageChange"
            :current-page = activePage
            class="pull-right"
          >
          </el-pagination>
        </el-col>
        <el-col :span="6"  class="popular-modules" v-if="TECHNOLOGY_DISPLAY.hot_article">
          <HotActicle :articleArr="articleArr" @refreshHotArticle="loadHotArticles" />
        </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 TechnologyCard from './TechnologyCard'
  import TechnologyMG from './TechnologyMG'
  import CrowdCase from './CrowdCase'
  import CrowdTool from './CrowdTool'
  import HotActicle from './HotActicle'
  import PopularProject from '../Square/PopularProject'
  import {storageGet} from '@/js/index.js'
  import {notify} from "../../constants";
  import {CONFIG} from "../../config";

  export default {
    name: 'Technology2.0',
    components: {
      SearchBar,
      TechnologyCard,
      TechnologyMG,
      PopularProject,
      HotActicle,
      CrowdCase,
      CrowdTool
    },
    data(){
      return {
        logoTitle:CONFIG.logoTitle,
        logo_transparent:CONFIG.logo_transparent,
        TECHNOLOGY_DISPLAY:CONFIG.TECHNOLOGY_DISPLAY,
        loading: false,
        isLogin: false,
        searchVal: '',
        searchType:CONFIG.technology_searchType,
        searchTypeArr:CONFIG.technology_searchTypeArr,
        articleArr:[],
        keyword:"",
        activePage:1,
        techArticleList:{},
      }
    },
    methods:{
      handleLogoClick(){
        window.open('http://47.98.174.59:8200/#/');
      },
      loadData(){
          if (storageGet('user') != null) {
              this.isLogin = true;
          }
      },
      checkLogin() {
        this.checkCreateProjectAuth();
      },
      checkCreateProjectAuth() {
        if (!this.isLogin) {
          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)
          })
        }
      },

      //显示页面加载画面
      showLoading() {
        this.loading = true
      },
      //隐藏页面加载画面
      hideLoading() {
        this.loading = false
      },
      gotoHome(){
        this.$router.push('/home');
      },
      handleTypeClick(tab){
        this.handleTabClick(tab);
      },
      handleTabClick(tab){
        this.searchType = tab.name
        this.activePage = 1;
        this.searchVal = '';
        this.loadTechnologyArticles(1);
      },
      loadHotArticles(){
        Http.get('/api/technical/ranking').then((res)=>{
          this.articleArr = res.data.technicalArticlesPage.content;
        })
      },
      loadTechnologyArticles(index){
        this.showLoading()
        let url = '/api/technical/articles';
        this.activePage = index;
        let params = {
          "keyword": this.searchVal,//查询条件，分页展示时就不填
          "activePage": this.activePage,//指定页数
          "columnFilters": [
            {
              "field": "type",
              "type": "enums",
              "enums": this.searchTypeArr,
              "value": this.searchType//展示技术文章value为0
            }
          ],
          "sortType":(this.searchType === '2' ||  this.searchType === '3' ) ? 'id' : 'publicTime'
        };
        Http.post(url,params)
          .then(res=>{
            let { technicalArticlesPage , publicationsPage ,toolVOPage,taskVOS} = res.data;
            this.techArticleList = technicalArticlesPage || publicationsPage || toolVOPage || taskVOS;
            // console.log(res.data)
            this.hideLoading()
          //   if(res.data.technicalArticlesPage){
          //     this.techArticleList = res.data.technicalArticlesPage;
          //   }else if(res.data.publicationsPage){
          //     this.techArticleList = res.data.publicationsPage;
          //   }else if(res.data.toolVOPage){
          //     this.techArticleList = res.data.toolVOPage;
          //   } else if(res.data.taskVOS){
          //     this.techArticleList = res.data.taskVOS
          //   }
          })
      },
      handlePageChange(index){
        this.activePage = index;
        this.loadTechnologyArticles(index);
      },
      setUserInfo() {
        this.user = storageGet('user') && storageGet('user').userVO;
      }
    },
    mounted() {
      this.loadData();
      this.setUserInfo();
      this.loadHotArticles();
      this.loadTechnologyArticles(1);
    }
  }
</script>

<style lang="scss">
  @import "../../style/search-nav.scss";

  .technology-container {
    /deep/ .search-input,/deep/ .releaseBtn{
      margin: 20px 0 0 0 !important;
    }

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

  }

</style>