xinhuaqujiaoyuju/pages/index/index.vue

<template>
	<view class="notify">
		<view class="promotion-center">
			<view class="">
				<wuc-tab :tab-list="titleList" :tabCur.sync="TabCur" @change="tabChange"></wuc-tab>
				<!-- 轮播图1 -->
				<view class="swiper" style="top:90px;">
					<view class="swiper-box">
						<oa-swipe-dot :info="advList" mode="nav" :current="current" field="adv_title">
							<swiper @change="handleDotChange" autoplay="true">
								<swiper-item v-for="(item, index) in advList" :key="index" @click="navTo(item.path)">
									<view class="swiper-item">
										<image :src="item.cover" mode="aspectFill" />
									</view>
								</swiper-item>
							</swiper>
						</oa-swipe-dot>
					</view>
				</view>

			</view>
		</view>

		<view>
			<swiper  class="contentSwiper" :current="TabCur" duration="300" :vertical="false" @change="swiperChange" @transition="swiperonmove">
				<swiper-item v-for="(title,i) in titleList" :key="i">
					
					<load-refresh ref="loadRefresh" :isRefresh="true" refreshType="hollowDots" color="#04C4C4"
						heightReduce="10" backgroundCover="#F3F5F5" :currentPage="page" :totalPages="totalPages"
						@refresh="refresh">
						<view slot="content-list" class="notify-list">
							<view class="card-bg">
								 <leo-list :list="newsList" :path="'/pages/message/content?id='"></leo-list>
							</view>
						</view>
					</load-refresh>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	import moment from '@/common/moment';
	import listCell from '@/components/oa-list-cell';
	import {
		mapMutations
	} from 'vuex';
	import oaSwipeDot from '@/components/oa-swipe-dot';
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	import loadRefresh from '@/components/load-refresh/load-refresh.vue'
	import leoList from '@/components/leo-list/leo-list.vue'
	export default {
		components: {
			listCell,
			oaSwipeDot,
			WucTab,
			loadRefresh,
			leoList
		},
		data() {
			return {
				page: 1,
				pageSize: 5,
				totalPages: 1,
				loadingType: "more",
				hasLogin: false,
				current: 0, // 轮播图index
				titleList: [],
				advList: [], // 广告图
				newsList: [],
				TabCur: 0,//顶部选项卡角标,
			};
		},
		filters: {
			notifyTypeFilter(val) {
				return '公告';
			},
			time(val) {
				// 拿到当前时间戳和发布时的时间戳，然后得出时间戳差
				var curTime = new Date();
				var postTime = new Date(val);
				var timeDiff = curTime.getTime() - postTime.getTime();

				// 单位换算
				var min = 60 * 1000;
				var hour = min * 60;
				var day = hour * 24;
				var week = day * 7;

				// 计算发布时间距离当前时间的周、天、时、分
				var exceedWeek = Math.floor(timeDiff / week);
				var exceedDay = Math.floor(timeDiff / day);
				var exceedHour = Math.floor(timeDiff / hour);
				var exceedMin = Math.floor(timeDiff / min);

				// 最后判断时间差到底是属于哪个区间，然后return
				if (exceedWeek > 0) {
					if (curTime.getFullYear() == postTime.getFullYear()) {
						return moment(val).format('MM-DD');
					} else {
						return moment(val).format('YYYY-MM-DD');
					}
				} else {
					if (exceedDay < 7 && exceedDay > 0) {
						return exceedDay + '天前';
					} else {
						if (exceedHour < 24 && exceedHour > 0) {
							return exceedHour + '小时前';
						} else {
							if(exceedMin<1){
								exceedMin=0
							}
							return exceedMin + '分钟前';
						}
					}
				}
			}
		},
		onShow() {
			this.initData();
		},
		onReachBottom: function() {
			this.loadMore();
		},
		methods: {
			// 监听轮播图切换
			handleDotChange(e) {
				this.current = e.detail.current;
			},
			// 数据初始化
			initData() {
				this.hasLogin = this.$mStore.getters.hasLogin;
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.themeColor.color,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				});
				this.initTablist()
				this.initSwiperImg()
			},
			initTablist() {
				if (!this.hasLogin) {
					uni.reLaunch({
						url: '../public/login'
					})
					return;
				}
				
				var url = this.$mConfig.baseUrl + '/system/docmenu/list';
				var token = this.$preToken + ' ' + this.$store.state.accessToken;
				this.$http.request({
						url: url,
						header: {
							'content-type': 'application/json',
							'Authorization': token
						}
					}).then(r => {
						var tablist = [];
						if (r.code == "200") {
							for (var i = 0; i < r.data.length; i++) {
								if (r.data[i].parentId == "100") {
									var title = {
										"name": r.data[i].deptName
									}
									tablist.push(title);
								}
							}

							this.titleList = tablist;
							this.initContentlist('load');
						}
					})
					.catch(() => {});
			},
			initSwiperImg() {
				var url = this.$mConfig.baseUrl + '/system/mes/rotationImgs';
				var token = this.$preToken + ' ' + this.$store.state.accessToken;
				this.$http.request({
						url: url,
						header: {
							'content-type': 'application/json',
							'Authorization': token
						}
					}).then(r => {
						var advList = [];
						if (r.code == "200") {
							for (var i = 0; i < r.data.length; i++) {
								var advItme = {
									"id": i,
									"adv_title": r.data[i].tatle,
									"cover": this.$mConfig.baseUrl + r.data[i].img,
									"path": '/pages/message/content?id=' + r.data[i].id
								}
								advList.push(advItme);
							}
							if(advList.length>0){
								this.advList = advList;
							}
							
						}
					})
					.catch(() => {});
			},
			initContentlist(type) {
				console.log('more'+this.page)
				var that = this;
				var url = this.$mConfig.baseUrl + '/system/mes/list';
				var token = this.$preToken + ' ' + this.$store.state.accessToken;
				var documentType = this.titleList[this.TabCur].name;
				if (type == 'change') {
					this.page = 1;
				} else if (type == 'getmore') {
					if (this.page < this.totalPages)
						this.page = this.page + 1;
					else return false;
				} else if (type == 'refresh') {
					this.page = 1;
				} else {
					this.page = 1;
				}
				this.$http.request({
						url: url,
						header: {
							'content-type': 'application/json',
							'Authorization': token
						},
						data: {
							pageNum: this.page,
							pageSize: this.pageSize,
							orderByColumn: "createTime",
							isAsc: "desc",
							documentType: documentType
						}
					}).then(r => {
						that.totalPages = Math.ceil(parseInt(r.total) / parseInt(that.pageSize));
						if (type == 'change') {
							this.newsList = r.rows;
							console.log(newsList)
						} else if (type == 'getmore') {
							this.newsList = [...this.newsList, ...r.rows];
						} else if (type == 'refresh') {
							this.newsList = r.rows;
						} else {
							this.newsList = r.rows;
						}
					})
					.catch(() => {

					});
			},
			tabChange(index) {
				this.TabCur = index;
				this.initContentlist('change');
			},
			swiperonmove(e){
				this.$refs.loadRefresh[this.TabCur].moveY=false
			},
			swiperChange(e) {
				let {
					current
				} = e.target;
				this.TabCur = current;
				this.initContentlist('change');
			},
			refresh() {
				this.initContentlist('refresh');
				this.$nextTick(function() {
					this.$refs.loadRefresh[this.TabCur].completed();
				})
			},
			loadMore() {
				this.initContentlist('getmore');
				this.$nextTick(function() {
					this.$refs.loadRefresh[this.TabCur].completed()
				})
			},
			// 通用跳转
			navTo(route) {
				this.$mRouter.push({
					route
				});
			},
			noImg(val) {
				var str = val.replace('<img', '<img style="display:none;"');
				return str;
			}
		},	
	};
</script>
<style lang="scss">
	page {
		background-color: $page-color-base;
	}

	.contentSwiper {
		// height: calc(calc(22vw + 50upx) * 5);
		height: calc(calc(22vw + 50upx) * 5);
		margin-bottom: calc(var(--window-bottom) - 40px);
	}

	/*轮播图*/
	.swiper {
		width: 100%;
		margin-top: 20upx;
		margin-bottom: 20upx;
		display: flex;
		justify-content: center;

		.swiper-box {
			width: 92%;
			height: 40vw;
			overflow: hidden;
			border-radius: 15upx;
			box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;

			swiper {
				width: 100%;
				height: 40vw;
				swiper-item {
					image {
						width: 100%;
						height: 40vw;
					}
				}
			}
		}
	}

	.notify {

		.promotion-center {
			background: #fff;
			margin-bottom: 20upx;

			/*分类列表*/
			.category-list {
				width: 100%;
				padding: 0 0 30upx 0;
				border-bottom: solid 2upx #f6f6f6;
				display: flex;
				flex-wrap: wrap;

				.category {
					width: 33.3%;
					margin-top: 50upx;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;

					.img {
						width: 100%;
						display: flex;
						justify-content: center;

						.iconfont {
							font-size: $font-lg + 24upx;
						}
					}

					.text {
						width: 100%;
						display: flex;
						justify-content: center;
						font-size: 24upx;
						color: #3c3c3c;
					}

					.share-btn {
						height: 142upx;
						text-align: left;
						background: none;
						padding: 0;
						margin: 0;
					}

					.share-btn:after {
						border: none;
						border-radius: none;
					}
				}
			}
		}

		.header {
			width: 100%;
			padding-left: $font-lg;
			height: 100upx;
			display: flex;
			align-items: center;
			position: fixed;
			top: 0;
			z-index: 10;
			background-color: #fff;
			/*  #ifdef  APP-PLUS  */
			top: var(--status-bar-height);

			/*  #endif  */
			.title {
				font-size: 36upx;
			}
		}

		.place {
			background-color: #ffffff;
			height: 100upx;
			/*  #ifdef  APP-PLUS  */
			margin-top: var(--status-bar-height);
			/*  #endif  */
		}

		.notify-list {
			border-radius: 5px;
			background: $page-color-base;
			/* #ifdef APP-PLUS */
			padding-top: var(--status-bar-height);
			/* #endif */
			/* #ifndef APP-PLUS */
			padding-top: 1rpx;
			/* #endif */
			padding-bottom: 1rpx;

			.card-bg {
				margin: 0 24rpx;
				padding: 0 32rpx;
				background: #ffffff;
				border-radius: 20rpx;
				box-shadow: 0px 4rpx 20rpx 0rpx rgba(235, 241, 244, 0.35);
			}

			.read {
				text-align: right;
				margin-right: $spacing-base;
				margin-top: $spacing-base;
				margin-bottom: $spacing-sm;

				text {
					margin-left: $spacing-base;
				}
			}

			.row {
				border-radius: 10px;
				width: calc(94%);
				height: calc(22vw + 20upx);
				margin: 0 auto 1px;
				// border-radius: 15upx;
				box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				position: relative;
				overflow: hidden;
				z-index: 4;
				border: 0;

				.menu {
					.iconfont {
						color: #fff;
						font-size: 60upx;
					}

					position: absolute;
					width: 29%;
					height: 100%;
					right: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					z-index: 2;
				}

				.carrier {
					@keyframes showMenu {
						0% {
							transform: translateX(0);
						}

						100% {
							transform: translateX(-30%);
						}
					}

					@keyframes closeMenu {
						0% {
							transform: translateX(-30%);
						}

						100% {
							transform: translateX(0);
						}
					}

					&.open {
						animation: showMenu 0.25s linear both;
					}

					&.close {
						animation: closeMenu 0.15s linear both;
					}

					background-color: #fff;
					position: absolute;
					width: 100%;
					padding: 0 0;
					height: 100%;
					z-index: 3;
					display: flex;
					align-items: center;
				}
			}

			.notify-wrapper {
				background-color: $color-white;
				width: 100%;
				padding: $spacing-base $spacing-lg $spacing-base 40upx;
				margin: $spacing-base 0 0;
				border-radius: 15upx;
				position: relative;

				.title {
					font-size: $font-lg;
					color: $font-color-dark;
					font-weight: 500;
					margin: 0 0 $spacing-sm;
				}

				.content {
					font-size: $font-sm;
					color: $font-color-base;
					height: 75upx;
					line-height: 36upx;

				}

				.time {
					float: right;
					font-size: $font-base;
					color: $font-color-light;
				}

				.type {
					position: absolute;
					top: 26upx;
					left: -10upx;
					border: none;
					font-size: $font-sm;
					opacity: 0.8;
				}

				.un-read {
					display: inline-block;
					width: 12upx;
					height: 12upx;
					border-radius: 50%;
					position: absolute;
					top: 32upx;
					right: 30upx;
				}
			}
		}

		.notify-empty {
			position: fixed;
			left: 0;
			top: 50;
			width: 100%;
			height: 100vh;
			padding-bottom: 100upx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;

			.iconfont {
				font-size: $font-lg + 100upx;
			}

			.empty-tips {
				display: flex;
				font-size: $font-sm + 2upx;
				color: $font-color-disabled;

				.navigator {
					margin-left: 16upx;
				}
			}
		}
	}
</style>