|
|
@@ -0,0 +1,453 @@
|
|
|
+<template>
|
|
|
+ <div class="contact">
|
|
|
+ <div class="navlist" v-show="navList" v-if="isShownav">
|
|
|
+ <div class="nav" v-for="(n,index) in navList.list" :class="{navC: index == navChoose}" @click="navC(index,n)">
|
|
|
+ <div class="title" :title="n.title">
|
|
|
+ {{ n.title }}
|
|
|
+ </div>
|
|
|
+ <div class="you" style="">
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="head nawarp" v-if="isShowHeader">
|
|
|
+ 当前位置：
|
|
|
+ <div @click="urlTo('index')">首页</div>
|
|
|
+ >
|
|
|
+ <div @click="listBack">
|
|
|
+ {{ navList.title }}
|
|
|
+ > {{ navList.list[navChoose].title }}
|
|
|
+ </div>
|
|
|
+ <span v-show="!(!content) && this.navList.listinlist"> > 信息详情</span>
|
|
|
+ </div>
|
|
|
+ <div class="head" v-else>
|
|
|
+ 当前位置：<div @click="urlTo('index')">首页</div>
|
|
|
+ >
|
|
|
+ <div @click="listBack">
|
|
|
+ {{ navList.title }}
|
|
|
+ </div>
|
|
|
+ <span v-show="!(!content) && this.navList.listinlist"> > 信息详情</span>
|
|
|
+ </div>
|
|
|
+ <slot v-if="!isShowSon"></slot>
|
|
|
+ <div class="contentbox">
|
|
|
+ <div class="content">
|
|
|
+ <div class="load" v-show="loadingType == 'loadmore'">
|
|
|
+ ----- 加载中 -----
|
|
|
+ </div>
|
|
|
+ <div v-html="content" v-show="isShowSon" class="text">
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="contentList chooseitem" v-show="!isShowSon">
|
|
|
+ <div class="item" v-for="c in contentList" @click="listChoose(c)" :title="c.title">
|
|
|
+ <span class="title-icon"></span>
|
|
|
+ <div class="title nawarp">
|
|
|
+ <div class="">
|
|
|
+ </div>
|
|
|
+ <div class="">
|
|
|
+ {{ c.title }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="time">
|
|
|
+ {{ getTime(c.releasetime) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 页数大于一时显示分页 -->
|
|
|
+ <div class="pagec" v-if="totalPage >1">
|
|
|
+ <div class="fristPage" @click="page = 1">
|
|
|
+ 第一页
|
|
|
+ </div>
|
|
|
+ <div class="pagetoomuch" v-show="totalPage>10">
|
|
|
+ <div class="nextPage" v-show="page-4>0">
|
|
|
+ ...
|
|
|
+ </div>
|
|
|
+ <div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
|
|
|
+ :class="{isChoose:count == page}" v-if="count>page-5&&count<page+4 &&count!=totalPage">
|
|
|
+ {{ count }}
|
|
|
+ </div>
|
|
|
+ <div class="nextPage" v-show="page+4<totalPage">
|
|
|
+ ...
|
|
|
+ </div>
|
|
|
+ <div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
|
|
|
+ :class="{isChoose:count == page}" v-show="totalPage>2" v-if="count==totalPage">
|
|
|
+ {{ count }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
|
|
|
+ :class="{isChoose:count == page}" v-show="totalPage<=10">
|
|
|
+ {{ count }}
|
|
|
+ </div>
|
|
|
+ <div class="nextPage" @click='nextPage'>
|
|
|
+ 下一页
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+import { details,getArticList } from '@/request/api.js'
|
|
|
+ export default {
|
|
|
+ props: ['navList'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ artid: '',
|
|
|
+ page: 1, // 当前页
|
|
|
+ limit: 10, // 每页数量
|
|
|
+ sum: 0, // 文章列表总数
|
|
|
+ loadingType: 'loadmore', // 是否在加载
|
|
|
+ path: this.$route.path, // 路由
|
|
|
+ navChoose: this.$route.params.navChoose || this.$route.query.navChoose || 0, //左侧导航栏选择
|
|
|
+ timeOut: '',// 不断获取初始显示数据直至显示
|
|
|
+ content: '', // 文章
|
|
|
+ contentList: [], // 二级列表
|
|
|
+ contentId: this.$route.params.contentId || this.$route.query.contentId || 0, // 文章详情id
|
|
|
+ isShowSon: true, // 是否显示文章而不显示列表
|
|
|
+ pageId: 0, //文章列表id
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ console.log(this.$route.query)
|
|
|
+ if(this.$route.query.navChoose) {
|
|
|
+ this.navChoose = this.$route.query.navChoose
|
|
|
+ }
|
|
|
+ if(this.$route.query.id) {
|
|
|
+ this.artid = this.$route.query.id
|
|
|
+ this.listChoose({id:this.artid })
|
|
|
+ }
|
|
|
+ console.log(this.navList,'navList++++++++++')
|
|
|
+ // this.init()
|
|
|
+ // if(this.isShowContent) {
|
|
|
+ // this.init()
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 查询数据默认
|
|
|
+ init() {
|
|
|
+ this.navC(this.navChoose,this.navList.list[this.navChoose])
|
|
|
+ },
|
|
|
+ navC(index,data) {
|
|
|
+ // 组织介绍中各区县红十字会单独页面
|
|
|
+ const pd1 = this.path == '/introduce' && index == 2
|
|
|
+ if (pd1) {
|
|
|
+ this.isShowSon = false
|
|
|
+ this.content = ''
|
|
|
+ this.loadingType == 'nomore'
|
|
|
+ this.contentList = []
|
|
|
+
|
|
|
+ } else{
|
|
|
+ this.loadingType = 'loadmore' // 加载中
|
|
|
+ this.page = 1
|
|
|
+ this.isShowSon = true
|
|
|
+ this.content = ''
|
|
|
+ this.contentList = []
|
|
|
+ this.pageId = data.id
|
|
|
+ this.getlistslist()
|
|
|
+
|
|
|
+ }
|
|
|
+ this.navChoose = index
|
|
|
+ this.$emit('navListC',index)
|
|
|
+ if(this.$route.path.indexOf('s') != -1) {
|
|
|
+ this.$router.push(this.$route.path.slice(0,this.$route.path.length-1) + '?navChoose=' +index)
|
|
|
+ }else {
|
|
|
+ this.$router.push(this.$route.path + '?navChoose=' +index)
|
|
|
+ }
|
|
|
+ // this.$router.push(this.$route.path + '?navChoose=' +index)
|
|
|
+ // this.navChoose = index
|
|
|
+ // this.$emit('navListC',index)
|
|
|
+
|
|
|
+ },
|
|
|
+ listChoose(data) {
|
|
|
+ console.log(this.$route,'this.$route')
|
|
|
+ this.loadingType = 'loadmore'
|
|
|
+ this.isShowSon = true
|
|
|
+ this.contentId = data.id
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ details({},this.contentId).then(({data}) => {
|
|
|
+ if (data.url == '') {
|
|
|
+ this.content = data.content
|
|
|
+ this.contentId = 0
|
|
|
+ } else{
|
|
|
+ this.originalText(data.url)
|
|
|
+ this.contentId = 0
|
|
|
+ this.isShowSon = false
|
|
|
+ }
|
|
|
+ this.loadingType = 'nomore'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取文章列表
|
|
|
+ getlistslist() {
|
|
|
+ getArticList({page: this.page,limit: this.limit},this.pageId).then(res => {
|
|
|
+ this.sum = res.data.count
|
|
|
+ if(res.data.count > 0) {
|
|
|
+ // 但文章数量为一时显示第一篇文章
|
|
|
+ if(res.data.count == 1 ) {
|
|
|
+ this.isShowSon = true
|
|
|
+ this.contentId = res.data.list[0].id
|
|
|
+ this.getData()
|
|
|
+ // 但点进页面时有指定文章跳至文章详情
|
|
|
+ }else if(this.contentId != 0) {
|
|
|
+ this.isShowSon = true
|
|
|
+ this.getData()
|
|
|
+ // 但文章数量大于一时显示列表
|
|
|
+ }else if(res.data.count > 1) {
|
|
|
+ this.isShowSon = false
|
|
|
+ this.loadingType = 'nomore'
|
|
|
+ }
|
|
|
+ this.contentList = res.data.list
|
|
|
+
|
|
|
+ }else {
|
|
|
+ this.loadingType = 'nomore'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 改变当前页
|
|
|
+ pageChoose(page) {
|
|
|
+ this.page = page
|
|
|
+ },
|
|
|
+ // 文章详情转文章列表
|
|
|
+ listBack() {
|
|
|
+ if (this.path == '/introduce' && this.navChoose == 2) {
|
|
|
+ }else {
|
|
|
+ this.loadingType = 'nomore'
|
|
|
+ this.content = ''
|
|
|
+ this.isShowSon = false
|
|
|
+ this.$router.push(this.$route.path + '?navChoose=' +index)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下一页
|
|
|
+ nextPage() {
|
|
|
+ this.page++
|
|
|
+ if (this.page > this.totalPage) {
|
|
|
+ this.page = this.totalPage
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 跳转页面
|
|
|
+ urlTo(name,navChoose) {
|
|
|
+ this.$router.push({
|
|
|
+ name: name
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 时间戳准换
|
|
|
+ getTime(time) {
|
|
|
+ return time.substring(0,10)
|
|
|
+ },
|
|
|
+ // 查看原文
|
|
|
+ originalText(url) {
|
|
|
+ window.open(url)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 总页数
|
|
|
+ totalPage() {
|
|
|
+ return Math.ceil(this.sum/this.limit)
|
|
|
+ },
|
|
|
+ // 是否有文章列表
|
|
|
+ isShownav() {
|
|
|
+ return !(!this.navList.list)
|
|
|
+ },
|
|
|
+ // 文章列表是否大于数量一
|
|
|
+ isShowHeader() {
|
|
|
+ if(this.isShownav) {
|
|
|
+ if (this.navList.list.length > 1) {
|
|
|
+ return true
|
|
|
+ } else{
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isShowContent() {
|
|
|
+ if (!this.navList.list) {
|
|
|
+ return false
|
|
|
+ } else{
|
|
|
+ return this.navList.list.length > 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // isShowContent() {
|
|
|
+ // if(this.isShowContent) {
|
|
|
+ // this.init()
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ page() {
|
|
|
+ this.getlistslist()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+$red: #D82020;
|
|
|
+ .contact {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ .navlist,.right {
|
|
|
+ box-shadow: 1px 1px 6px #e1e1e1;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .navlist {
|
|
|
+ flex: 2;
|
|
|
+ margin-right: 20px;
|
|
|
+ .title {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFang-SC-Medium;
|
|
|
+ font-weight: Medium;
|
|
|
+ color: #333333;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 20px;
|
|
|
+ .you {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .navC {
|
|
|
+ background-color: #F7DFDF;
|
|
|
+ color: $red;
|
|
|
+ .you {
|
|
|
+ color: $red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ flex: 7;
|
|
|
+ .head, {
|
|
|
+ padding: 10px 20px;
|
|
|
+ }
|
|
|
+ .contentbox {
|
|
|
+ overflow: hidden;
|
|
|
+ height: 800px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .content::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ position: relative;
|
|
|
+ height: 800px;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 25px 40px;
|
|
|
+ background-color: #fff;
|
|
|
+ .text {
|
|
|
+ padding: 0 10px;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ }
|
|
|
+ .original {
|
|
|
+ position: absolute;
|
|
|
+ color: $red;
|
|
|
+ top: 10px;
|
|
|
+ left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .head {
|
|
|
+ background-color: #F2F2F2;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 加载中
|
|
|
+ .load {
|
|
|
+ text-align: center;
|
|
|
+ margin: 20px 0;
|
|
|
+ color: #989898;
|
|
|
+ }
|
|
|
+ .contentList {
|
|
|
+ .item {
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ line-height: 40px;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #666666;
|
|
|
+ border-bottom: solid 1px #F2F2F2;
|
|
|
+ overflow: hidden;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin: auto 0;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ width: calc(100% - 120px);
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ min-width: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chooseitem {
|
|
|
+ color: #666;
|
|
|
+ .title-icon {
|
|
|
+ display: inline-block;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ margin: auto 0;
|
|
|
+ border-top: 6px solid transparent;
|
|
|
+ border-left: 8px solid #d2d2d2;
|
|
|
+ border-bottom: 6px solid transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chooseitem :hover {
|
|
|
+ color: #d8272a;
|
|
|
+ .title-icon {
|
|
|
+ border-left-color: #d8272a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pagetoomuch {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .pagec {
|
|
|
+ color: #333333;
|
|
|
+ display: flex;
|
|
|
+ float: right;
|
|
|
+ margin: 20px 30px;
|
|
|
+ .fristPage,.pageNum,.nextPage {
|
|
|
+ margin-left: 3px;
|
|
|
+ border: solid 1px #F2F2F2;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .fristPage,.nextPage {
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ .pageNum {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .isChoose {
|
|
|
+ background-color: $red;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pagec :hover {
|
|
|
+ color: $red;
|
|
|
+ }
|
|
|
+</style>
|
