onecric_h5/pages/News/news-list.vue

<template>
	<view class="">
		<view class="head">
			<view class="" :style="[{background: `url(${info.img})center top / 100% auto no-repeat`},{height:'100%'}]">
				<u-navbar leftText="" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
				<view class="head-title">
					{{info.name}}
				</view>
			</view>
			<!-- <u-navbar :leftText="info.name" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true" v-else></u-navbar> -->
		</view>
		<!-- <view class="head"  :style="{height:isShow?'auto':'300rpx'}">
			<view class="" :style="[{background: info.img ? `url(${info.img})center top / 100% auto no-repeat` : '#000'},{height:'100%'}]" v-if="!isShow">
				<u-navbar leftText="" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
				<view class="head-title">
					{{info.name}}
				</view>
			</view>
			<u-navbar :leftText="info.name" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true" v-else></u-navbar>
		</view> -->
		
		<view class="flex screen">
			<view class="">
				<text :class="{active:is_refining == 0}" @click="setStatus(1)">{{$t('news.lab2')}}</text>
				<text :class="{active:is_refining == 1}" @click="setStatus(1)">{{$t('news.lab3')}}</text>
			</view>
			<view class="flex-start" @click="setStatus(2)">
				{{is_reply == 0?$t('news.lab4'):$t('news.lab5')}}
				<image src="/static/image/news/screen.png" mode=""></image>
			</view>
		</view>
		
		<view class="u-demo-block__content" style="padding-bottom: 40rpx;">
			<view class="album" @click="$toUrl('./community-detail?id=' + item.id)" v-for="(item,index) in luntanList" :key="index">
				<view class="album_top flex-start">
					<image class="logo" :src="item.avatar" mode=""></image>
					<view class="">
						<u--text :text="item.user_nickname" bold size="32"></u--text>
						<u--text margin="6px 0 0 0" color="#999" :text="item.addtime"></u--text>
					</view>
				</view>
				<!-- <view class="nav font28">
					{{item.title}}
				</view> -->
				<mote-lines-divide :line="3" @click.stop="" :expandText="$t('news.full')" :foldHint="$t('news.collapsed')">
				        {{item.title}}
				</mote-lines-divide>
				<view class="album__content">
					<u-album multipleSize="200" space="16" :urls="item.img"></u-album>
				</view>
				
				<view class="types flex-start">
					<image :src="item.classification_icon" mode=""></image>
					{{item.classification_name}}
				</view>
				<view class="flex tabbar">
					<view class="">
						<image src="/static/image/news/topic2.png" mode=""></image>
						<u--text color="#999" size="24" :text="item.favorites"></u--text>
					</view>
					<view class="">
						<image src="/static/image/news/topic7.png" mode=""></image>
						<u--text color="#999" size="24" :text="item.comment"></u--text>
					</view>
					<view class="">
						<image src="/static/image/news/topic6.png" mode=""></image>
						<u--text color="#999" size="24" :text="item.click"></u--text>
					</view>
				</view>
			</view>
			<u-loadmore
				v-if="luntanList.length != 0"
				:status="status"
				fontSize="28"
				:line="true"
				:loading-text="statusType.loadingText" 
				:loadmore-text="statusType.loadmoreText" 
				:nomore-text="statusType.nomoreText" 
			/>
		</view>
		<u-empty
			v-if="luntanList.length == 0"
			mode="data"
			width="474"
			height="312"
			textSize="28"
			marginTop="100"
			:text="$t('common.nodata')"
			icon="/static/image/common/nodata.png"
		>
		</u-empty>
		
		<!-- <view class="loading">
			--{{status == 'more'?'more':status == 'loading'?'loading':'noMore'}}--
		</view> -->
	</view>
</template>

<script>
	import MoteLinesDivide from "@/components/mote-lines-divide/mote-lines-divide"
	export default {
		components: {
		    MoteLinesDivide
		},
		data() {
			return {
				id:null,
				page:1,
				info:{
					name:''
				},
				is_reply:0,
				is_refining:0,
				isShow:false,
				statusType:{
					loadingText: this.$t('common.lab'),
					loadmoreText: this.$t('common.lab1'),
					nomoreText: this.$t('common.lab2')
				},
				status:'loadmore',
				luntanList: []
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getHeadlines()
		},
		onReachBottom() { //触底加载
			if (this.info.total > this.luntanList.length && this.status == 'loadmore') {
				this.page++
				this.getHeadlines()
			}
		},
		onPageScroll(e) {
			if(e.scrollTop > 200) {
				this.isShow = true
			}else {
				this.isShow = false
			}
		},
		methods:{
			/* 筛选 */
			setStatus(type) {
				if(type == 1) {
					this.is_refining = this.is_refining == 0?1:0
				}else {
					this.is_reply = this.is_reply == 0?1:0
				}
				this.page = 1;
				this.getHeadlines()
			},
			
			getHeadlines() {
				uni.showLoading({
					title:this.$t('common.lab')
				})
				this.status = 'loading'
				uni.$u.http.get('/api/Circle/designatedCategory', {
					params:{page: this.page,id:this.id,is_refining:this.is_refining,is_reply:this.is_reply}
				}).then(res => {
					if(this.page == 1) {
						res.info.total = res.list.total;
						this.info = res.info
						this.luntanList = res.list.data;
					}else {
						this.luntanList = this.luntanList.concat(res.list.data);
					}
					
					if(this.info.total > this.luntanList.length) {
						this.status = 'loadmore'
					}else {
						this.status = 'noMore'
					}
					uni.hideLoading()
				})
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F3F7;
	}
	.loading {
		text-align: center;
		padding: 10rpx 0;
		color: #999;
	}
	.head {
		position: sticky;
		top: 0;
		z-index: 9999;
		height: 300rpx;
		background-color: #000;
	}
	.head-title {
		color: #fff;
		margin-top: 20%;
		padding: 0 24rpx;
	}
	
	.album {
		margin-bottom: 20rpx;
		padding: 32rpx 24rpx;
		border-radius: 12rpx;
		background-color: white;
		.types {
			width: fit-content;
			// display: inline-block;
			color: #E3AC72;
			font-size: 28rpx;
			margin-top: 24rpx;
			padding: 10rpx 16rpx;
			background-color: #FFF1E0;
			border-radius: 6rpx;
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
		// border-bottom: 20rpx solid #F3F3F7;
		.logo {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			margin-right: 16rpx;
		}
		.nav {
			padding-top: 20rpx;
		}
		.album__content {
			margin-top: 30rpx;
			image {
				border-radius: 10rpx;
			}
		}
		.tabbar {
			margin-top: 22rpx;
			padding: 0 22rpx;
			image {
				width: 48rpx;
				height: 48rpx;
			}
			view {
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
		}
	}
	
	.screen {
		color: #666;
		position: sticky;
		top: 300rpx;
		z-index: 99;
		background-color: white;
		padding: 18rpx 24rpx;
		font-size: 28rpx;
		text {
			margin-right: 44rpx;
			padding: 8rpx 24rpx;
			
		}
		.active {
			color: #E3AC72;
			border-radius: 26rpx;
			background-color: #FFF1E0;
		}
		image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 10rpx;
		}
	}
</style>