jmpc/src/components/box.vue

<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 {
				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() {
			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)
				
			},
			listChoose(data) {
				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
				}
				
			},
			
			// 下一页
			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>