veterans_H5/h5_web/pages/policyNews/policyNews.vue

<template>
	<view>
		<u-swiper
			:list="bannerList"
			name="bannerUrl"
			border-radius="0"
			mode="none"
			height="427"
			:title="true"
			:effect3d="false"
			img-mode="scaleToFill"
			@click="swiperClick"
		></u-swiper>
		<u-tabs :list="tabs" :is-scroll="false" name="label" :current="tabIndex" @change="tabChange"></u-tabs>
		<!-- <me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></me-tabs> -->
		<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		 <mescroll-uni ref="mescrollRef" @init="mescrollInit" top="500" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<!-- 数据列表 -->
			<u-card class="news-list"
			:body-style="{'padding-top':0}"
			:head-style="{'padding':0}"
			:border="false" 
			:foot-border-top="false" 
			:full="true" border-radius="0">
				<view class="news-list-head" slot="head">
					<view class="">新闻动态</view>
				</view>
				<view class="news-list-body" slot="body">
					<view v-for="(item,index) in newsList" 
					@click="$u.route('/pages/policyNewsDetails/policyNewsDetails',{artId:item.artId})"
					:key="item.artId" 
					class="u-body-item u-flex u-border-bottom u-col-between u-row-between">
						<view class="news-text">
							<view class="u-body-item-title u-line-2">{{item.artTitle}}</view>
							<view class="foot u-flex">
								<view class="">{{item.artCategoryName}}</view>
								<view class="time">{{$u.timeFormat(item.createTime.replace(/-/g, '/'), 'mm月dd日 hh时MM分')}}</view>
							</view>
						</view>
						<image :src="item.artImage" mode="aspectFill"></image>
					</view>
				</view>
			</u-card>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default{
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data(){
			return{
				bannerList: [],
				upOption:{
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					auto:false,
					// use:false,
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 暂无数据 ~', // 提示
						// btnText: '去看看'
					}
				},
				newsList: [], //列表数据
				tabs: [],
				tabIndex: 0, // tab下标
			}
		},
		onLoad(){
			this.getPolicyType();
			this.getBannerList();
		},
		onShow(){
			
		},
		methods:{
			// 获取新闻类别
			getPolicyType(){
				this.$u.api.getDictdataUrl({key:'policy_type'}).then(res=>{
					if(res.code == 200){
						// console.log('getPolicyType',res)
						this.tabs = res.data;
						this.mescroll.resetUpScroll();
						console.log('this.tabs',this.tabs)
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
				});
			},
			getBannerList(){
				this.$u.api.getIndexBannerList()
				.then(res=>{
					this.bannerList = res.data;
					// console.log('bannerList',JSON.parse(JSON.stringify(res)));
				})
			},
			// 轮播图点击
			swiperClick (index) {
				// console.log('swiperClick',index);
				// console.log('bannerList',this.bannerList);
				if(this.bannerList[index].jumpUrl){
					// console.log(this.bannerList[index].jumpUrl);
					let url = this.bannerList[index].jumpUrl.split('#')[1];
					// console.log('url',url);
					this.$u.route({
						url: url,
					});
				}else{
					this.$u.route({
						url: 'pages/bannerDetails/bannerDetails',
						params: {
						  id: this.bannerList[index].id
						}
					})
				}
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// console.log('page',page)
				//联网加载数据
				let keyword = this.tabs[this.tabIndex]?.text;
				let params ={
					artCategoryId:keyword,
					pageNum:page.num,
					pageSize:page.size
				} 
				this.$u.api.getpolicyNewsList(params).then(curPageData=>{
					// console.log('curPageData',curPageData)
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					this.mescroll.endSuccess(curPageData.rows.length);
					//设置列表数据
					if(page.num == 1) this.newsList = []; //如果是第一页需手动制空列表
					this.newsList=this.newsList.concat(curPageData.rows); //追加新数据
				}).catch((err)=>{
					uni.showToast({
						title:'链接失败'
					});
					console.log('err',err)
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			// 切换菜单
			tabChange(index) {
				this.newsList = [];// 先置空列表,显示加载进度
				this.tabIndex = index;
				this.mescroll.resetUpScroll(); // 再刷新列表数据
				
			},
			//点击空布局按钮的回调
			emptyClick(){
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import  './policyNews.scss'
</style>