onecric_h5/pages/News/list.vue

<template>
	<view class="">
		<view class="head">
			<u-navbar bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true">
				<view slot="center" class="navbar-center">
					 <!-- lineWidth="124" -->
					 <u-tabs 
					 :list="tabList" 
					 :current="current"
					 lineWidth="126rpx"
					 @click="changeTab" 
					 lineHeight="2" 
					 lineColor="#DC3C23" 
					 :scrollable="false"   
					 :activeStyle="{color:'#DC3C23',fontSize:'34rpx'}" 
					 :inactiveStyle="{color:'#fff',fontSize:'34rpx'}
					 "></u-tabs>
				</view>
			</u-navbar>
		</view>
		<!-- 社区 -->
		<view class="" v-show="current == 0">
			<!--  :style="{marginTop:show1?'204rpx':'100rpx'}" -->
			<view class="topic-list">
				<view class="list-li flex" v-for="(item,index) in Headlist.data" :key="index"
					@click="$toUrl('./news-detail?id=' + item.circle_id)">
					<view class="list-li-left flex-wrap">
						<view class="list-li-left-nav text-clamp2">{{item.title}}</view>
						<view class="list-li-left-bot flex-start">
							<!-- <text :style="{color:index == 0?'#CC374A':'#999'}">置顶</text> -->
							<view class="flex">
								<image src="/static/image/news/topic11.png" mode="aspectFill"></image>
								<text>{{item.comment_count}}</text>
							</view>
						</view>
					</view>
					<u--image :showLoading="true" class="list-li-logo" radius="12" :src="item.img" width="240rpx" height="136rpx" @click="click"></u--image>
					<!-- <image class="list-li-logo" :src="item.img ?item.img:require('../../static/image/common/none-img.png')" mode="aspectFill"></image> -->
				</view>
			</view>
			
			
		</view>
		
		<!-- 圈子 -->
		<view class="Community" v-if="current == 1">
			<view class="u-demo-block__content">
				<view class="album" @click="$toUrl('./community-detail?id=' + item.circle_id)" v-for="(item,index) in luntanList.data" :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>
					<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="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>
			</view>
		</view>
		<u-empty
			v-if="luntanList.data && luntanList.data.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>
</template>

<script>
	import MoteLinesDivide from "@/components/mote-lines-divide/mote-lines-divide"
	export default {
		components: {
		    MoteLinesDivide
		},
		data() {
			return {
				current:0,
				Headlist:{
					data:[]
				},
				page:1,
				luntanList:{
					data:[]
				},
			}
		},
		computed:{
			tabList() {
				let arr = [
					{
						name: this.$t('news.tab1'),
					},
					{
						name: this.$t('news.posts'),
					},
				]
				return arr
			},
			info() {
				return this.$store.state.info
			},
			isLogin() {
				return this.$store.state.isLogin
			}
		},
		onLoad(option) {
			this.current = option.type;
			if(this.current == 0) {
				this.getHeadlines()
			}else {
				this.getLuntan()
			}
		},
		onReachBottom() { //触底加载
			if(this.current == 0) {
				if (JSON.stringify(this.HeadlinesList) == '{}') return
				if (this.status == 'more') {
					this.getHeadlines()
				}
			}else {
				if (this.status == 'more') {
					this.getLuntan()
				}
			}
		},
		methods:{
			changeTab(e) {
				this.current = e.index;
				this.page = 1;
				this.status = 'more';
				if(this.current == 0) {
					this.getHeadlines()
				}else {
					this.getLuntan()
				}
				
			},
			/* 收藏的列表 */
			getHeadlines() {
				this.status = 'loading';
				let uid = '';
				if(this.isLogin == 1) {
					uid = this.info.id
				}
				
				uni.$u.http.get('/api/Headlines_user/logList', {
					params:{page: this.page,type:1,uid:uid}
				}).then(res => {
					// this.$db.set('system'.res.data)
					this.HeadlinesList = res;
					if(this.page == 1) {
						this.Headlist.data = res.data
					}else {
						this.Headlist.data = [...this.data, ...res.data]
					}
					
					if (res.total > this.Headlist.data.length) {
						this.page++
						this.status = 'more'
					}else {
						this.status = 'nomore'
					}
				})
			},
			// 
			getLuntan() {
				this.status = 'loading';
				let uid = '';
				if(this.isLogin == 1) {
					uid = this.info.id
				}
				uni.$u.http.get('/api/Circleuser/logList', {
					params:{page: this.page,type:1,uid:uid}
				}).then(res => {
					console.log(res);
					if(this.page == 1) {
						this.luntanList.data = res.data
					}else {
						this.luntanList.data = [...this.data, ...res.data]
					}
					if (res.total > this.luntanList.data.length) {
						this.page++
						this.status = 'more'
					}else {
						this.status = 'nomore'
					}
					
				})
			},
		}
	}
</script>

<style lang="scss">
	.head {
		position: sticky;
		top: 0;
		z-index: 99;
		background-color: $color1;
	}
	.topic-list {
		margin: 0 24rpx;
		padding: 0 24rpx;
		border-radius: 12rpx;
		background-color: white;
	
		.list-li {
	
			padding: 32rpx 0;
			border-bottom: 2rpx solid #F0F0F0;
		}
	
		.list-li-logo {
	
			width: 242rpx;
			height: 136rpx;
			margin-left: 32rpx;
			border-radius: 12rpx;
		}
	
		.list-li-left {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			height: 136rpx;
	
			image {
				width: 28rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
	
			.list-li-left-nav {
				color: #333;
				font-size: 32rpx;
				align-self: flex-start;
			}
		}
	
		.list-li-left-bot {
			width: 100%;
			font-size: 24rpx;
			align-self: flex-end;
	
			text {
				color: #CC374A;
				margin-right: 32rpx;
			}
	
			view {
				text {
					color: #999;
				}
			}
		}
	}
	.album {
		margin-top: 20rpx;
		padding: 32rpx 24rpx;
		border-radius: 12rpx;
		background-color: white;
		.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;
			}
		}
	}
</style>