gs_nuxt/components/SearchList.vue

<template>
<div>
  <el-container>
    <el-main style="padding: 0">

<!--      导航头部-->
      <!--          主题导航-->
      <el-row  >

        <el-col :span="18" offset="3">
          <el-row class="nav_tap" :gutter="34" style="padding: 10px;margin-left: 0;margin-right:0;margin-top: 25px " >
            <p v-show="search_key!=null&&search_key!=''" style="text-align: left">以下是关键词: <span v-html="search_key" class="nav_title"></span> 的检索内容:</p>

            <el-col :span="18" style="margin-bottom: 15px">
              <span class="nav_title">按关键词:</span>
              <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 2}"
                placeholder="请输入内容"
                v-model="s_key">
              </el-input>
            </el-col>
            <el-col :span="8" ><span class="nav_title">按照类型:</span>

              <el-select v-model="s_type" clearable placeholder="请选择">
                <el-option
                  v-for="item in wordType"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="11">


              <div class="block">
                <span class="nav_title">按照时段:</span>
                <el-date-picker
                  v-model="timer_picker"
                  type="daterange"
                  align="right"
                  unlink-panels
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="5"><span @click="getSearchList()" class="nav_title">&nbsp;&nbsp;&nbsp;搜索&nbsp;&nbsp;&nbsp;</span></el-col>


          </el-row>

        </el-col>

      </el-row>

          <!--        主要列表-->
          <el-row>
            <el-col :span="18" offset="3">
              <el-row>
                <el-col v-for="item in news_list" :key="item"  >
                  <el-row class="word_item" style="margin-bottom: 20px">
                    <el-col :span="8">
                      <div>

                           <span class="type_flag" v-for="type in wordType" v-if="type.dictValue==item.newsInfoType">
                      {{type.dictLabel}}
                    </span>

                      </div>
                      <el-image
                        style="width: 100%; height: 300px"
                        lazy
                        v-if="item.newsInfoUrl "
                        :src="item.newsInfoUrl "
                      ></el-image>
                    </el-col>
                    <el-col class="word_info" :span="16">
                      <div >
                        <h4>
                          <nuxt-link :to="{name:'info-id',params:{id:item.newsInfoId,title:item.newsInfoTitle}}">
                            {{item.newsInfoTitle.length>25?item.newsInfoTitle.substr(1,25)+"...":item.newsInfoTitle}}
                          </nuxt-link>
                          <!--                          <n-link style="text-decoration: none; font-size: 1.3rem;font-weight: 400;color: black"  :to="{name:'info-id'}">  {{item.newsInfoTitle}}</n-link>-->
                        </h4>
                        <div v-html="item.newsInfoContent.replace(/<[^>]+>/g,'').length>100?item.newsInfoContent.replace(/<[^>]+>/g,'').substr(1,
                    100)+'...':item.newsInfoContent.replace(/<[^>]+>/g,'')">

                        </div>
                        <span class="info_span"><i class="el-icon-s-custom"></i>{{item.newsInfoAuthor}}    时间:{{item.newsInfoTime}}</span>
                      </div>
                      <div></div>
                    </el-col>
                  </el-row>

                </el-col>
              </el-row>
            </el-col>

          </el-row>

          <!--        分页-->
          <el-row>
            <el-col :span="18" offset="3">
              <el-row>
                <el-col :span="18" offset="7">
                  <pagination
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getSearchList"
                  />

                </el-col>
              </el-row>
            </el-col>
          </el-row>



    </el-main>
  </el-container>
</div>
</template>

<script>
import {navList,newsList,dictList,listWordPost} from "../static/js/index"
import axios  from "axios";
export default {
  name: "SearchList",
  head(){
    return{
      title:"中关村公共资源论坛|文章检索"
    }
  },

  data(){
    return{

      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: '',
      search_key:null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        type: null,
        author: null,
        releaseTime: null,
        word: null,
        coverUrl: null
      },
      news_list:null,
      total:0,
      wordType:null,
      timer_picker:[],
      s_type:null,
      s_key:null
    }
  },
  created() {
    this.getSearchList()
    this.getDictType()
  },
  methods:{
    getDictType(){
      dictList({"dictType":"sys_info_word_type"}).then(response=>{
        this.wordType=response.rows;
      })
    },
    s_click(){
      console.log(this.timer_picker)

      // axios({
      //   method: 'post',
      //   url: 'http://localhost:7070/website/news/listPost',
      //   data: {
      //     newsInfoTitle: this.s_key,
      //     pageNum: 1,
      //     newsInfoType: this.s_type,
      //     'params[beginNewsInfoTime]': this.timer_picker[0],
      //     'params[endNewsInfoTime]': this.timer_picker[1],
      //     pageSize: 5,
      //
      //   },
      //   headers: {
      //     'Content-Type': 'application/x-www-form-urlencoded'
      //   }
      // }).then(response=>{
      //   this.queryParams.pageNum=1
      //   this.news_list=response.rows;
      //   this.total=response.total;
      // })



      listWordPost({"newsInfoTitle": this.s_key,"pageNum":1,"newsInfoType":this.s_type,
        "beginNewsInfoTime":this.timer_picker[0],
        "endNewsInfoTime":this.timer_picker[1],
        "pageSize":this.queryParams.pageSize}).then(response=>{
        this.queryParams.pageNum=1
        this.news_list=response.rows;
        this.total=response.total;

      })
    },
    getSearchList(){


      if(this.timer_picker.length>0){
        listWordPost({"newsInfoTitle": this.s_key,"pageNum":this.queryParams.pageNum,"newsInfoType":this.s_type,
          "beginNewsInfoTime":this.timer_picker[0],
          "endNewsInfoTime":this.timer_picker[1],
          "pageSize":this.queryParams.pageSize}).then(response=>{

          this.news_list=response.rows;
          this.total=response.total;
          this.search_key=this.s_key;
        })
      }else {
        newsList({"newsInfoTitle": this.s_key,"pageNum":this.queryParams.pageNum,"newsInfoType":this.s_type,
          // "beginNewsInfoTime":this.timer_picker[0],
          // "endNewsInfoTime":this.timer_picker[1],
          "pageSize":this.queryParams.pageSize}).then(response=>{

          this.news_list=response.rows;
          this.total=response.total;
          this.search_key=this.s_key;
        })
      }
      if (this.$route.params.key!=null){
        this.search_key=this.$route.params.key;
        this.$route.params.key=null;
      }

    }
  }
}
</script>

<style scoped>



.nav_tap{
  background-color: #f0f0f0;
  text-align: left;
  margin-bottom: 30px;
}

.nav_tap span{
  background-color: #b11116;


  -webkit-text-size-adjust: 100%;
  letter-spacing: 1px;
  text-rendering: optimizeLegibility;
  font-family: "PingFang SC", "Microsoft YaHei", "STHeiti", "sans-serif";
  line-height: 38px;
  font-size: 22px;
  box-sizing: border-box;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  border-radius: 6px;
  padding: 0 20px;

  color: white;
}
.type_flag{
  position: absolute;
  z-index: 2;
  padding: 7px;
  margin: 10px;
  color: white;
  background-color: rgba(0,0,0,0.5);
  border-radius: 20px;
}
.word_item{
  background-color: #f0f0f0;
}
.word_info{
  padding: 0 20px;
}
.info_span{
  position: absolute;
  bottom: 10px;

}



</style>
<style>

/*带背景的分页按钮背景色begin*/
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #b11116;
  color: #FFF;
}
.el-pagination.is-background .el-pager li.active {
  color: #fff;
  cursor: default;
}
.el-pagination.is-background .el-pager li:hover {
  color: #b11116;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #b11116;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  background-color: #b11116;
  color: #FFF;
}
/*带背景的分页按钮背景色end*/


/*不带背景的分页按钮背景色begin*/
.el-pager li.active {
  color: #b11116;
  cursor: default;
}
.el-pagination .el-pager li:hover {
  color: #b11116;
}
.el-pagination .el-pager li:not(.disabled):hover {
  color: #b11116;
}
/*不带背景的分页按钮背景色end*/
</style>