crowd-test-service-frontend/src/components/commons/TopSearch.vue

<template>
  <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 ">
            <el-tabs v-model="searchType" type="card" @tab-click="handleTypeClick">
              <el-tab-pane v-for="item in searchTypeArr" v-if="item.value!=='all'" :label="item.name" :name="item.value"
                           :key="item.value"></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>
  </div>
</template>


<script>
    import {mapGetters, mapActions} from 'vuex'
    import commonData from '../../constants/tabMenu'
    import Http from '@/js/http.js'
    import {storageGet} from '@/js/index.js'
    import {notify} from "../../constants";

    export default {
        name: 'TopSearch',
        props: ['searchVal','searchType','searchTypeArr'],
        data() {
            return {
                isLogin: false,
                resultList:[],
            }
        },

        methods: {
            loadData(){
                if (storageGet('user') != null) {
                    this.isLogin = true;
                }
            },
            checkLogin(){
                if(!this.isLogin){
                    console.log("请登录后访问");
                    notify('warning','请登录后访问');
                }else{
                    console.log("已登录");
                    this.$router.push('/project/create');
                }
            },
            handleSearchData() {
                console.log(this.searchType);
                let url = '/api/common/index/page';
                let params = {
                    "keyword": this.searchVal,
                    "activePage": 1,
                    "columnFilters": [
                        {
                            "field": "type",
                            "type": "enums",
                            "enums": this.searchTypeArr,
                            "value": this.searchType
                        }
                    ]
                }
                Http.post(url, params).then((res) => {
                    console.log(res.data.expertPage.content);
                    resultList = res.data.expertPage.content;
                })
            },
            gotoHome() {
                this.$router.push('/home');
            },
            handleTypeClick(tab){
                this.searchType = tab.name
            },
        },
        mounted() {
            this.loadData();
        }
    }

</script>


<style>

</style>