nyzy_vue/src/views/gateway/detailedPage2.vue

<template>
  <div>
    <headerView/>
    <div class="er_bann" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 101"></div>
    <div class="er_bann2" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 102"></div>
    <div class="er_bann3" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 103"></div>
    <div class="er_bann4" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 104"></div>
    <div class="er_bann5" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 105"></div>
    <div class="er_bann6" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 106"></div>
    <div class="er_bann7" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 107"></div>

    <div class="er_bann8" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 501"></div>
    <div class="er_bann9" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 306"></div>
    <div class="er_bann9" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 305"></div>
    <div class="er_bann9" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 304"></div>
    <div class="er_bann9" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 303"></div>
    <div class="er_bann9" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 302"></div>
    <div class="er_bann9" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 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('listPage2',{pid:thisColumn.parent?thisColumn.parent:thisColumn.id,id:thisColumn.parent?thisColumn.id:null})">{{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: #21c168;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" @click="$to('listPage2',{pid:col.parent?col.parent:col.id,id:col.parent?col.id:null})">{{col.name}}</a></li>
            <li v-if="col.id != thisColumn.id" :key="colIndex"><a href="javascript:void(0);" @click="$to('listPage2',{pid:col.parent?col.parent:col.id,id:col.id})">{{col.name}}</a></li>
          </template>
				</ul>
			</div>
			<div class="cyh_contr right">
				<div class="xqer_cont">
					<h3>{{articleData.title}}</h3>
					<div class="xqer_date">
						<span>发布日期：<span>{{articleData.updateTime || articleData.createTime}}</span></span>
						<span v-show="articleData.author">作者：<span>{{articleData.author}}</span></span>
					</div>
					<p v-html="articleData.content"></p>
					
				</div>
			</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: [],
      articleData:{},
    }
  },
  computed:{
    id(){
      return this.$route.query.id || '-1';
    }
  },
  mounted(){
    this.loadData();
  },
  watch:{
    id(){
      this.loadData();
    },
  },
  updated(){
  },
  methods:{
    loadData(){
      //查询栏目（包含当前的和候选的）
      getAction('/gateway/gatewayArticle/queryArticleById',{id:this.id}).then((res)=>{
        if(res.success){
          console.log('res =>',res.result);
          let data = res.result;
          this.articleData = data;
          this.thisColumn = data.currentGatewayColumn
          //查出根节点
          if(data.parentGatewayColumn){
            this.parentData = data.parentGatewayColumn
          }else{
            this.parentData = data.currentGatewayColumn
          }

          if(data.gatewayColumnList && data.gatewayColumnList.length > 0){
            this.columnList = data.gatewayColumnList
          }else{
            this.columnList = [];
            this.columnList.push(data.currentGatewayColumn);

          }
          
          console.log('columnList', this.columnList );

          // if(!this.columnId){
          //   let firstColumn = this.columnList[0]
          //   if(firstColumn){
          //     //this.$to('listPage',{pid:firstColumn.parent,id:firstColumn.id},true)
          //   }
          // }
        }
      });
      //如果没有ID自动选中一个
      // if(this.id){
      //   //查询文章列表
      //   getAction('/gateway/gatewayArticle/list',{pageSize:-1,isRelease:'Y',columnId:this.id}).then((res)=>{
      //     if(res.success){
      //       let list = res.result.records||res.result;
      //       this.articleList = list;
      //     }
      //   });
      // }
    },
    getFileName(url){
      if(!url) return '';
      let filePaths = url.split('/');
      let fileAllName = filePaths[filePaths.length-1]
      return fileAllName.substring(0,fileAllName.lastIndexOf('_'));
    },
  },
}
</script>

<style scoped>
</style>