dreamland/template/graceUI商城套装新版本/graceMallForUniapp/pages/news/news.vue

<template>
	<gracePage headerBG="#FFFFFF" :isSwitchPage="true">
		<view slot="gHeader" style="padding:0 25rpx;">
			<graceNavBar :items="tabs" :currentIndex="currentIndex" @change="navChange"></graceNavBar>
		</view>
		<view slot="gBody" class="grace-flex-v1" id="gBody">
			<swiper :style="{height:mainHeight+'px'}" :current="currentIndex" @change="swiperChange">
				<swiper-item v-for="(news, newsIndex) in newsAll" :key="newsIndex">
					<scroll-view scroll-y="true" :style="{height:mainHeight+'px'}" 
					@scrolltolower="scrollend" @scroll="scroll" 
					@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
						<graceReload ref="graceReload" width="700rpx" marginLeft="25rpx" @reload="reload"></graceReload>
						<graceEmpty v-if="news == 'empty'">
							<view slot="img" class="empty-view">
								<!-- 请根据您的项目要求制作并更换为空图片 -->
								<image class="empty-img" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
							</view>
							<text slot="text" class="grace-text-small grace-gray">本栏目暂无新闻</text>
						</graceEmpty>
						<view style="padding:0 25rpx;">
							<block v-for="(item, index) in news" :key="index" v-if="news != 'empty'">
								<view class="grace-news-list grace-border-b" v-if="item.imgs.length < 3" @tap="newsinfo">
									<view class="grace-news-item">
										<view class="grace-news-img grace-news-img-l">
											<image :src="item.imgs[0]" mode="widthFix" class="grace-news-img-in"></image>
										</view>
										<view class="grace-news-body">
											<text class="grace-news-title">{{item.title}}</text>
											<text class="grace-news-desc">{{item.desc}}</text>
										</view>
									</view>
									<view class="grace-news-info">
										<view style="width:500rpx;" class="grace-nowrap">
											<text class="grace-icons grace-news-info-text">&#xe609; {{item.viewnum}}</text>
											<text class="grace-icons grace-news-info-text" style="margin-left:30rpx;">&#xe69e; {{item.author}} · {{item.catename}}</text>
										</view>
										<text class="grace-icons grace-news-info-text">&#xe6b8; 208</text>
									</view>
								</view>
								<view class="grace-news-list grace-border-b" v-if="item.imgs.length >= 3" @tap="newsinfo">
									<text class="grace-news-title">{{item.title}}</text>
									<view class="grace-news-img-list">
										<view class="grace-news-imgs" v-for="(img, imgIndex) in item.imgs" :key="imgIndex">
											<image :src="img" mode="widthFix" class="grace-news-imgs-img"></image>
										</view>
									</view>
									<view class="grace-news-info">
										<view style="width:500rpx;" class="grace-nowrap">
											<text class="grace-icons grace-news-info-text">&#xe609; {{item.viewnum}}</text>
											<text class="grace-icons grace-news-info-text" style="margin-left:30rpx;">&#xe69e; {{item.author}} · {{item.catename}}</text>
										</view>
										<text class="grace-icons grace-news-info-text">&#xe6b8; 208</text>
									</view>
								</view>
							</block>
						</view>
						<graceLoading :loadingType="loadingTypes[newsIndex]"></graceLoading>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "../../graceUI/components/gracePage.vue";
import graceNavBar from "../../graceUI/components/graceNavBar.vue";
import graceLoading from "../../graceUI/components/graceLoading.vue";
import graceEmpty from '../../graceUI/components/graceEmptyNew.vue';
import graceReload from '../../graceUI/components/graceReload.vue';
export default {
    data() {
    	return {
			currentIndex: 0,
			mainHeight : 600,
			//分类数据
			tabsAll : [],
			tabs : [],
			// 新闻信息保存数组
			newsAll : [],
			// 每个选项卡对应的分页
			pages : [],
			// 加载状态
			loadingTypes : [],
			// 每个滚动区域的滚动值
			scrollTops : []
    	}
    },
	onReady:function(){
		setTimeout(()=>{
			uni.createSelectorQuery().select('#gBody').fields(
				{size: true}, (res) => {
					this.mainHeight = res.height;
				}
			).exec();
		},1000);
		//加载分类信息 初始化数据
		this.getCate();
	},
	watch:{
		currentIndex : function (nVal, oldVal) {
			if( this.loadingTypes[this.currentIndex] != 2 || this.loadingTypes[this.currentIndex] != 4){ this.getNews(); }
		}
	},
	methods:{
		navChange: function (e) {
			this.currentIndex = e;
		},
		swiperChange: function (e) {
			var index = e.detail.current;
			this.currentIndex = index;	
		},
		//加载分类信息 初始化数据
		getCate : function () {
			uni.request({
				// 此处可以获取分类 根据分类自己拼接请求地址
				// 格式请参考 接口 [ 浏览器运行直接查看 ]
				url     : 'http://grace.hcoder.net/api/tabs',
				method  : 'GET',
				data    : {},
				success : res => {
					// 初始化新闻列表数组 元素数量与分类匹配
					this.tabsAll = res.data.data;
					for(var i = 0; i < this.tabsAll.length; i++){
						this.newsAll.push([]);
						this.tabs.push(this.tabsAll[i].txt);
						this.pages.push(1);
						this.loadingTypes.push(3);
						this.scrollTops.push(0);
					}
					this.getNews();
				}
			});
		},
		// 加载新闻
		getNews : function(isReload){
			// 当前正在展示的 选项index 为 this.currentIndex
			// 那么分类 id 应该为 this.tabsAll[this.currentIndex].id
			//console.log('类型 : ' + this.tabs[this.currentIndex] + ' 第'+ this.pages[this.currentIndex] +'页');
			if(!isReload){this.loadingTypes.splice(this.currentIndex, 1, 1);}
			//console.log('http://grace.hcoder.net/api/news/index/'+this.tabsAll[this.currentIndex].id+'/'+this.pages[this.currentIndex]);
			uni.request({
				// 此处可以获取分类 根据分类自己拼接请求地址
				// 分类 id 、页码 都已经获取到了
				url      : 'http://grace.hcoder.net/api/news/index/'+this.tabsAll[this.currentIndex].id+'/'+this.pages[this.currentIndex],
				method   : 'GET',
				data     : {},
				success  : res => {
					if(res.data.status == 'ok'){
						// 第一页
						if(this.pages[this.currentIndex] == 1){
							this.newsAll.splice(this.currentIndex, 1 , res.data.data);
						}
						// 之后的加载页
						else{
							this.newsAll[this.currentIndex] = this.newsAll[this.currentIndex].concat(res.data.data);
						}
						// 页码增加
						this.pages[this.currentIndex]++;
						setTimeout(()=>{
							this.loadingTypes.splice(this.currentIndex, 1, 3);
						},300)
					}else if(res.data.status == 'empty'){
						console.log('empty');
						this.newsAll[this.currentIndex] = 'empty';
						this.loadingTypes.splice(this.currentIndex, 1, 4);
					}else if(res.data.status == 'nomore'){
						console.log('nomore');
						this.loadingTypes.splice(this.currentIndex, 1, 2);
					}
				},
				complete: () => {
					if(isReload){
						setTimeout(()=>{
							this.$refs.graceReload[this.currentIndex].endReload();
						},300)
					}
				}
			});
		},
		// 点击新闻列表
		newsinfo : function () {
			uni.navigateTo({
				url:'../artInfo/artInfo'
			})
		},
		// 加载更多
		scrollend:function(e){
			// 判断加载状态避免多次滚动时有加载尚未完成
			if( this.loadingTypes[this.currentIndex] == 2 || this.loadingTypes[this.currentIndex] == 4){ return false; }
			console.log('loadmore.....');
			this.getNews();
		},
		scroll:function(e){
			this.scrollTops[this.currentIndex] = e.detail.scrollTop;
		},
		touchstart : function (e){
			var touchObj = {scrollTop : this.scrollTops[this.currentIndex], moveY : e.changedTouches[0].pageY};
			this.$refs.graceReload[this.currentIndex].touchstart(touchObj);
		},
		touchmove : function (e) {
			var touchObj = {scrollTop : this.scrollTops[this.currentIndex], moveY : e.changedTouches[0].pageY};
			this.$refs.graceReload[this.currentIndex].touchmove(touchObj);
		},
		touchend : function (e) {
			var touchObj = {scrollTop : this.scrollTops[this.currentIndex], moveY : e.changedTouches[0].pageY};
			this.$refs.graceReload[this.currentIndex].touchend(touchObj);
		},
		// 下拉刷新
		reload:function(){
			this.pages[this.currentIndex] = 1;
			this.loadingTypes.splice(this.currentIndex, 1, 3);
			this.getNews(1);
		}
	},
	components:{gracePage, graceNavBar, graceEmpty, graceLoading, graceReload}
}
</script>
<style>
.grace-news-img{width:220rpx; height:150rpx; overflow:hidden; font-size:0;}
.grace-news-img-in{width:100%;}
.grace-news-imgs-img{width:225rpx; height:380rpx;}
.empty-view{width:280rpx; height:280rpx; border-radius:280rpx; background-color:#F6F7F8; margin-top:300rpx;}
.empty-img{width:220rpx; height:200rpx; margin:40rpx; border-radius:200rpx;}
.grace-text-small{margin-top:10px;}
</style>