dev/dcp-app-gate/pages/information/news-page.nvue

<template>
	<view class="page-news">
		<uni-list class="listview" :enableBackToTop="true" :scroll-y="true" @scrolltolower="loadMore()">
			<!-- 下拉刷新 -->
			<uni-refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
				:display="refreshing ? 'show' : 'hide'">
				<div class="refresh-view">
					<image class="refresh-icon" :src="refreshIcon" :style="{width: (refreshing || pulling) ? 0: '32px'}"
						:class="{'refresh-icon-active': refreshFlag}"></image>
					<uni-load-more v-if="refreshing" class="loading-icon" status="loading"
						:contentText="loadingMoreText"></uni-load-more>
					<text class="loading-text">{{refreshText}}</text>
				</div>
			</uni-refresh>
			<!-- 轮播图 -->
			<uni-cell v-if="!pageItem.dictTypeId">
				<view class="uni-margin-wrap">
					<swiper class="swiper" circular :indicator-dots="true" indicator-active-color="#333"
						:autoplay="true" :interval="2000" :duration="1000">
						<swiper-item v-for="(banner,index) in bannerList" :key="index">
							<navigator :url="'./components/rankDetail?key=' +  banner.baseEntityId">
								<image class="swiper-img" v-if="banner.pictureUrl!==null"
									:src="'https://m.geidcp.com/api/file/pub/' + banner.pictureUrl" mode=""></image>
								<image class="swiper-img" v-else src="../../static/errorImage.jpg" mode=""></image>
							</navigator>
						</swiper-item>
					</swiper>
				</view>
			</uni-cell>
			<!-- 点击排行 -->
			<uni-cell v-if="!pageItem.dictTypeId">
				<view class="rank">
					<view class="rank-title">
						<text class="title">{{ i18n.ClickRank }}</text>
						<view class="top10" @tap="toRankTop">
							<text class="vert">TOP10</text>
							<uni-icons class="vert arrowright" type="arrowright" color="#666666" size="16" />
						</view>
					</view>
					<view class="rank-list-box">
						<view class="rank-list" v-for="(list,index) in hitsList" v-if="informationMap[list] && index<3"
							:key="informationMap[list].baseEntityId" @tap="toRankDetail"
							:data-key="informationMap[list].baseEntityId">
							<view class="order">

								<text class="order-text"
									:class="index == 1? 'order-text2': index == 2? 'order-text3': '' ">{{ index+1 }}</text>
							</view>
							<view class="cont" :style="{width: informationMap[list].pictureUrl? '420rpx': '628rpx'}">
								<view>
									<text
										class="cont-title">{{informationMap[list]?informationMap[list].title:''}}</text>
								</view>
								<view class="cont-sm">
									<text
										class="cont-text">{{ informationMap[list]?informationMap[list].auther:'' }}</text>
									<text
										class="time">{{ formatDate(informationMap[list]?informationMap[list].publishDate:'') }}</text>
								</view>
							</view>
							<view class="cont-img" v-if="informationMap[list].pictureUrl">
								<image class="img"
									:src="informationMap[list]?'https://m.geidcp.com/api/file/pub/' + informationMap[list].pictureUrl:''"
									mode="">
								</image>
							</view>
						</view>
					</view>
				</view>
			</uni-cell>
			<!-- 资讯 -->
			<uni-cell class="cellList" v-if="!pageItem.dictTypeId">
				<text class="title">{{ i18n.LatestNews }}</text>
			</uni-cell>
			<uni-cell v-for="(item, index) in dataList" :key="item.id">
				<news-item :newsItem="item"></news-item>
			</uni-cell>
			<uni-cell v-if="isLoading || dataList.length > 4">
				<view class="loading-more">
					<text class="loading-more-text">{{loadingText}}</text>
				</view>
			</uni-cell>
		</uni-list>
		<no-data class="no-data" v-if="isNoData" @retry="loadMore"></no-data>

	</view>
</template>

<script>
	import moment from "moment";
	import uniList from './components/uni-list.vue';
	import uniCell from './components/uni-cell.vue';
	import uniRefresh from './components/uni-refresh.vue';
	import uniLoadMore from './components/uni-load-more.vue';
	import noData from './components/nodata.nvue';
	import newsItem from './news-item.nvue';

	export default {
		components: {
			uniList,
			uniCell,
			uniRefresh,
			uniLoadMore,
			noData,
			newsItem
		},
		props: ['pageItem'],
		data() {
			return {
				bannerList: [],
				hitsList: [],
				dataList: [],
				navigateFlag: false,
				pulling: false,
				refreshing: false,
				refreshFlag: false,
				refreshText: "",
				isLoading: false,
				loadingText: getApp().$i18n.locale == 'zh' ? '加载中...' : 'Loading...',
				isNoData: false,
				pulling: false,
				angle: 0,
				topClickList: {},
				informationMap: {},
				loadingMoreText: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},
				page: {
					typeDict: null,
					language: getApp().$i18n.locale.toUpperCase(),
					pageSize: 10,
					pageNo: 1,
					businessType: "information",
					title: ''
				},
				refreshIcon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5QTFRFcHBw3Nzct7e39vb2ycnJioqK7e3tpqam29vb////D8oK7wAAAAp0Uk5T////////////ALLMLM8AAABxSURBVHja7JVBDoAgDASrjqj//7CJBi90iyYeOHTPMwmFZrHjYyyFYYUy1bwUZqtJIYVxhf1a6u0R7iUvWsCcrEtwJHp8MwMdvh2amHduiZD3rpWId9+BgPd7Cc2LIkPyqvlQvKxKBJ//Qwq/CacAAwDUv0a0YuKhzgAAAABJRU5ErkJggg=="
			}
		},
		created() {
			if (!this.pageItem.dictTypeId) {
				this.getBanner();
				this.getHitsList();
			}
			this.pullTimer = null;
			this._isWidescreen = false;
			// #ifdef H5
			var mediaQueryOb = uni.createMediaQueryObserver(this)
			mediaQueryOb.observe({
				minWidth: 768
			}, matches => {
				this._isWidescreen = matches;
			})
			// #endif
		},
		watch: {
			i18n() {
				//置空，清除缓存
				this.hitsList = [];
				this.dataList = [];
				this.page.pageNo = 1;
				if (!this.pageItem.dictTypeId) {
					this.getHitsList();
				};
				this.loadMore();
				this.loadingText = getApp().$i18n.locale == 'zh' ? '加载中...' : 'Loading...';
			}
		},
		computed: {
			i18n() {
				return getApp().$t('common');
			}
		},
		methods: {
			BBBB() {
				console.log(getApp().globalData, '----')
			},
			formatDate(value, formatString, defaultString) {
				if (value == null) {
					return defaultString ? defaultString : "";
				}
				formatString = formatString || 'YYYY-MM-DD';
				return moment(value).format(formatString);
			},
			async getBanner() {
				const res = await getApp().$myRequest({
					url: '/cms/cmsInformationViews/appBannerInformations/',
					data: {
						language: getApp().$i18n.locale.toUpperCase()
					}
				});
				this.bannerList = res.data.bannerList;
				// this.bannerList.forEach((item, index) => {
				// 	if (item.pictureUrl==null)
				// })
				console.log(this.bannerList, "图片数据");
			},
			async loadData(refresh, index) {
				if (this.isLoading) {
					return;
				}
				this.isLoading = true;
				this.isNoData = false;
				if (index == 0) {
					this.page.typeDict = null;
				} else {
					this.page.typeDict = index;
				}
				this.page.language = getApp().$i18n.locale.toUpperCase();
				const res = await getApp().$myRequest({
					url: '/cms/cmsInformationViews/appGetInformationList/',
					data: this.page,
				});
				// console.log(res);
				if (res.data && res.data.page) {
					if (refresh) {
						this.dataList = res.data.page.list || [];
						this.page.pageNo = 1;
						this.dataList.forEach(element => {
							element.content = element.content.replace(/<[^>]+>|&[^>]+;/g, "")
						});
					} else {
						if (this.page.pageNo <= res.data.page.totalPage) {
							this.dataList = this.dataList.concat(res.data.page.list);
							this.page.pageNo += 1;
							this.isLoading = false;
						} else {
							this.isLoading = true;
							this.loadingText = getApp().$i18n.locale == 'zh' ? '到底啦！' : 'It is the end!';
						}

					}
				} else {
					if (this.dataList.length == 0) {
						this.isNoData = true;
					}
				}


				if (refresh) {
					this.isLoading = false;
					this.refreshing = false;
					this.refreshFlag = false;
					this.refreshText = getApp().$i18n.locale == 'zh' ? '已刷新' : 'Refreshed';
					if (this.pullTimer) {
						clearTimeout(this.pullTimer);
					}
					this.pullTimer = setTimeout(() => {
						this.pulling = false;
					}, 1000);
				}
			},
			async getHitsList() { //点击排行
				let that = this;
				let list = {
					pageSize: 3,
					language: getApp().$i18n.locale.toUpperCase(),
					businessType: "information",
				}
				const res = await getApp().$myRequest({
					url: '/cms/cmsInformationClicks/topClickList',
					data: {
						...list
					}
				});
				// console.log(res);
				that.topClickList = res.data.topClickList;
				that.hitsList = that.topClickList[1];
				that.informationMap = res.data.informationMap;
				// this.hitsList = res.data.cmsInformationView;
			},
			toRankDetail(e) { //去点击详情
				let key = e.currentTarget.dataset.key;
				uni.navigateTo({
					url: './components/rankDetail?key=' + key
				});
			},
			loadMore(e) {
				this.loadData(false, Number(this.pageItem.value));
			},
			refreshData() {
				if (this.isLoading) {
					return;
				}
				this.pulling = true;
				this.refreshing = true;
				this.refreshText = getApp().$i18n.locale == 'zh' ? "正在刷新..." : 'Refreshing...';
				this.loadData(true, Number(this.pageItem.value));
			},
			onrefresh(e) {
				this.refreshData();
			},
			onpullingdown(e) {
				if (this.refreshing) {
					return;
				}

				this.pulling = false;
				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
					this.refreshFlag = true;
					this.refreshText = getApp().$i18n.locale == 'zh' ? '释放立即刷新' : 'Release refresh now';
				} else {
					this.refreshFlag = false;
					this.refreshText = getApp().$i18n.locale == 'zh' ? '下拉可以刷新' : 'Drop down to refresh';
				}
			},
			toRankTop() {
				uni.navigateTo({
					url: './components/rankTop'
				})
			}
		}
	}
</script>

<style scoped>
	.uni-margin-wrap {
		margin-top: 20upx;
	}

	.swiper {
		width: 750upx;
		height: 310upx;
	}

	.swiper-img {
		width: 750upx;
		height: 310upx;
	}

	.rank {
		background-color: #FFFFFF;
		padding: 20upx 30upx 0;
		margin: 20upx 0;
	}

	.rank-title {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
	}

	.title {
		font-size: 32upx;
		font-weight: 700;
		color: #333333;
	}

	.top10 {
		font-size: 28upx;
		flex-direction: row;
	}

	.vert {
		font-size: 28upx;
		flex-direction: row;
		color: #666666;
	}

	.arrowright {
		margin-top: 3rpx;
	}

	.rank-list-box {
		margin-top: 18upx;
	}

	.rank-list {
		padding: 30upx 0;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #f1f1f1;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
	}

	.order-text {
		width: 40upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 8upx;
		background-color: #f66600;
		margin-top: 4upx;
		font-size: 26upx;
	}

	.order-text2 {
		background-color: #ff995f;
	}

	.order-text3 {
		background-color: #ffcd5d;
	}

	.cont {
		width: 420upx;
	}

	.cont-title {
		color: #333333;
		font-size: 32upx;
		font-weight: 700;
		text-align: left;
		lines: 2;
		text-overflow: ellipsis;
		/* #ifndef APP-PLUS-NVUE */
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		/* #endif */
	}

	.cont-sm {
		margin-top: 16upx;
		flex-direction: row;
	}

	.cont-text {
		font-size: 28upx;
		color: #999999;
	}

	.time {
		margin-left: 30upx;
		font-size: 28upx;
		color: #999999;
	}

	.img {
		width: 185upx;
		height: 140upx;
	}

	.cellList {
		background-color: #FFFFFF;
		padding: 20upx 30upx;
	}

	.uni-list {
		background-color: transparent;
	}

	.uni-list::before {
		background-color: transparent;
	}

	.no-data {
		flex: 1;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
	}

	.page-news {
		flex: 1;
		flex-direction: column;
	}

	.listview {
		flex: 1;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
	}

	.refresh {
		justify-content: center;
	}

	.refresh-view {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		width: 750upx;
		height: 64px;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}

	.refresh-icon {
		width: 32px;
		height: 32px;
		transition-duration: .5s;
		transition-property: transform;
		transform: rotate(0deg);
		transform-origin: 15px 15px;
	}

	.refresh-icon-active {
		transform: rotate(180deg);
	}

	.loading-icon {
		width: 28px;
		height: 28px;
		margin-right: 5px;
		color: gray;
	}

	.loading-text {
		margin-left: 2px;
		font-size: 16px;
		color: #999999;
	}

	.loading-more {
		align-items: center;
		justify-content: center;
		padding-top: 14px;
		padding-bottom: 14px;
		text-align: center;
	}

	.loading-more-text {
		font-size: 28upx;
		color: #999;
	}
</style>