nyzy_vue/src/views/gateway/listPage2.vue

<template>
  <div>
    <headerView/>
    <!-- <div class="er_bann2"></div> -->
    <div class="er_bann" v-if="$route.query.pid == 101"></div>
    <div class="er_bann2" v-if="$route.query.pid == 102"></div>
    <div class="er_bann3" v-if="$route.query.pid == 103"></div>
    <div class="er_bann4" v-if="$route.query.pid == 104"></div>
    <div class="er_bann5" v-if="$route.query.pid == 105"></div>
    <div class="er_bann6" v-if="$route.query.pid == 106"></div>
    <div class="er_bann7" v-if="$route.query.pid == 107"></div>
    <div class="er_bann8" v-if="$route.query.pid == 501"></div>
    <div class="er_bann9" v-if="$route.query.pid == 306"></div>
    <div class="er_bann9" v-if="$route.query.pid == 305"></div>
    <div class="er_bann9" v-if="$route.query.pid == 304"></div>
    <div class="er_bann9" v-if="$route.query.pid == 303"></div>
    <div class="er_bann9" v-if="$route.query.pid == 302"></div>
    <div class="er_bann9" v-if="$route.query.pid == 301"></div>
    <div class="weizhibox">
			<div class="weizhi">
				<span><img src="img/shouye.png" style="width: 16px;margin: 11px 4px 0 0;"></span>
				<span>当前位置：</span>
				<a href="javascript:void(0);" @click="$to('home')">首页 ></a>
				<!-- <a href="javascript:void(0);" @click="$to('listPage',{pid:thisColumn.parent})">{{parentData.name}} > </a> -->
				<a href="javascript:void(0);" >{{parentData.name}} > </a>
				<a href="javascript:void(0);">{{thisColumn.name}}</a>
			</div>
		</div>
    <div class="er_contant clearfloat">
			<div class="er_contl left">
				<div class="hjk_item">
					<h3>{{parentData.name}}</h3>
					<div class="" style="width: 60px;height: 3px;background-color: #3591EB;margin-top: -3px;"></div>
				</div>
				<ul>
          <template v-for="(col,colIndex) in columnList" >
            <li v-if="col.id == thisColumn.id" :key="colIndex" class="active2"><a href="javascript:void(0);" class="active3">{{col.name}}</a></li>
            <li v-if="col.id != thisColumn.id" :key="colIndex"><a href="javascript:void(0);" @click="$to('listPage2',{pid:col.parent,id:col.id})">{{col.name}}</a></li>
          </template>
				</ul>
			</div>

      <div class="er_contr right">
				<ul>
					<li v-for="(art,artIndex) in articleList" :key="artIndex">
						<a href="javascript:void(0);" class="er_coa" @click="$to('detailedPage2',{id:art.id})">
							<div class="er_coaimg">
								<img :src="$tImg(art,'cover')" >
							</div>
							<div class="er_item">{{art.title}}</div>
							<div class="er_neirong">
								<p class="er_neip">{{$tfnm(art,'content',48)}}</p>
							</div>
							<a href="javascript:void(0);" class="er_bouutn" >[了解更多]</a>
						</a>
					</li>
				</ul>
			</div>


			<!-- <div class="cyh_contr right">
				<ul>
					<li v-for="(art,artIndex) in articleList" :key="artIndex">
						<a href="javascript:void(0);" class="cyh_coa clearfloat" @click="$to('detailedPage',{id:art.id})">
							<div class="cyhl left">
								<h3 class="elli">{{art.title}}</h3>
								<p class="over-line2">{{$tfnm(art,'content',104)}}</p>
							</div>
							<div class="cyhr right">
								<div class="cyhr_date">{{getMonthAndDay(art.updateTime || art.createTime)}}</div>
								<div class="jianttewr">→</div>
							</div>
						</a>
					</li>
				</ul>
			</div> -->



		</div>


    <footerView/>
  </div>
</template>

<script>
import { getwayMixin } from '@/views/gateway/mixins/getwayMixin'
import { getAction } from '@/api/manage'
import headerView from '@/views/gateway/common/header'
import footerView from '@/views/gateway/common/footer'

export default {
  mixins:[getwayMixin],
  components:{
    headerView,
    footerView
  },
  props:{
  },
  data(){
    return {
      parentData:{},
      thisColumn:{},
      columnList:[],
      articleList: [],
    }
  },
  computed:{
    pid(){
      return this.$route.query.pid || '-1';
    },
    id(){
      return this.$route.query.id;
    },
    findStr(){
      if(this.$route.query.findStr){
        return '*'+this.$route.query.findStr+'*';
      }else{
        return '';
      }
    },
  },
  mounted(){
    this.loadData();
  },
  watch:{
    pid(){
      this.loadData();
    },
    id(){
      this.loadData();
    },
    findStr(){
      this.loadData();
    }
  },
  updated(){
  },
  methods:{
    loadData(){
      //查询栏目（包含当前的和候选的）
      getAction('/gateway/gatewayColumn/list',{pageSize:-1,isEnable:'Y',fpid:this.pid}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          // console.log('list===>',list);
          //查出根节点
          this.parentData = list.find(x => !x.parent);
          if(this.id){
            this.thisColumn = list.find(x => x.id == this.id);
            this.columnList = list.filter(x => x.parent);
          }else{
            this.thisColumn = list[0];
            this.columnList = [];
            this.columnList.push(list[0]);
          }
          
          // console.log('this.columnList===>',this.columnList);
          // console.log('this.thisColumn===>',this.thisColumn);
          // if(!this.id){
          //   let firstColumn = this.columnList[0]
          //   if(firstColumn){
          //     //this.$to('listPage',{pid:firstColumn.parent,id:firstColumn.id},true)
          //   }
          // }
        }
      });
      //如果没有ID自动选中一个
      // if(this.id){
        let columnId = this.id;
        //查询文章列表
        let findParam = {}
        if(this.findStr){
          if(this.utils.isCn()){
            findParam.title = this.findStr;
          }else if(this.utils.isEn()){
            findParam.titleen = this.findStr;
          }
        }else{
          //非搜索，还没有子id，差个锤子
          columnId = (columnId || this.pid) || '-1'
        }
        getAction('/gateway/gatewayArticle/list',{pageSize:-1,isRelease:'Y',columnId,...findParam}).then((res)=>{
          if(res.success){
            let list = res.result.records||res.result;
            this.articleList = list;
          }
        });
      // }
    },
    getDay(dateTime){
      if(!dateTime) return '';
      let d = new Date(dateTime);
      return d.getDate()
    },
    getMonthAndDay(dateTime){
      if(!dateTime) return '';
      let d = new Date(dateTime);
      return (d.getMonth()+1)  + '-' + d.getDate();
    },
    getYearAndMonth(dateTime){
      if(!dateTime) return '';
      let d = new Date(dateTime);
      return d.getFullYear() + '-' + (d.getMonth()+1)
    },
  },
}
</script>

<style scoped>
</style>