jingheng_H5/diary/topic/plaza.vue

<template>
	<view class="container">
		<view class="swiper_box">
			<swiper style="width: 100%; height: 100%;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item @click="goto" :data-url='item.page_url'  v-for="(item,index) in info" :key='index'> 
					<image :src="item.pic_url" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="title">
			人气话题
		</view>
		<view class="content">
			<view class="item" @click="goto" :data-url="'/diary/topic/topic?id='+item.id" v-for="(item,index) in datalist" :key='index'>
				<view class="p1">
					<view class="icon-box flex j-center al-item-center">
						<view class="icon">#</view>
					</view>
					<view class="topic_name">{{item.topic_name}}</view>
				</view>
				<view class="p2">
					<view class="left">
						<text class="icon" :style="{'background-color': colorFn(index,'b'),'color':colorFn(index,'c')}" >NO.{{index+1}}</text>
						话题{{item.member_count}}人参与
					</view>
					<view class="right">
						进入话题 <text class="iconfont icon-arrow-right"></text>
					</view>
				</view>
				<view class="p3">
				<image v-for="(items,indexs) in item.pics" :key='indexs' :src="items" mode=""></image>
				
				<image  v-if="!item.pics.length" :src="item.topic_pic" mode=""></image>
				</view>
			</view>
		</view>
		<nomore text="没有更多内容了" v-if="nomore"></nomore>
		<nodata text="没有查找到相关内容" v-if="nodata"></nodata>
		<!-- 悬浮按钮 -->
		<drag-button></drag-button>
	</view>
</template>

<script>
	var app = getApp();
	export default{
		
		data(){
			return{
				info:{},
				pagenum:1,
				loading:false,
				isload: false,
					nomore:false,
					nodata:false,
					datalist:[],
			}
		},
		onReachBottom () {
		  if (!this.nodata && !this.nomore) {
		    this.pagenum = this.pagenum + 1;
			 this.getRecList()
		  }
		},
		onLoad(opt) {
			this.id = opt.id;
			this.getRecList();
		},
		methods:{
			colorFn(i,c){
				let color
				if(c === 'b'){
				   color = ''
					if(i === 0){
						color = '#FB6C6B'
					}else if(i === 1){
						color = '#FDC10F'
					}else if(i === 2){
						color = '#4F9DFB'
					}
				}else{
					if(i < 3){
						color = '#fff'
					}else{
						color = '#333'
					}
				}
				return color
			},
			getRecList(){
			let that = this;
			var page = that.pagenum;
				that.loading = true;
							  			that.nomore = false;
							  			that.nodata = false;
			app.post('ApiZhiwei/topic', {pagenum: page}, function (res) {
							  				that.loading = false;
			  var data = res.topicList;
			  if (page == 1) {
				  that.info = res.banner;
			    that.datalist = data;
			    if (data.length == 0) {
			      that.nodata = true;
			    }
			  }else{
			    if (data.length == 0) {
			      that.nomore = true;
			    } else {
			      var datalist = that.datalist;
			      var newdata = datalist.concat(data);
			      that.datalist = newdata;
			    }
			  }
							  				that.loaded();
			});
			
		
		},
	},
	}
</script>

<style lang="scss">
	.container {
		background: #FFF;
	}
	.content{
		padding: 0 20rpx;
		.item{
			margin-bottom: 28rpx;
			.p3{
				image{
					width: 218rpx;
					height: 218rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}
				image:nth-child(3){
					margin: 0;
				}
			}
			.p2{
				margin-bottom: 26rpx;
				color: #999;
				font-size: 24rpx;
				display: flex;
                 justify-content: space-between;
				 align-items: center;
				 .left{
					 .icon{
						 // font-weight: bold;.
						 // background-color: #97000c;
						 // color: #fff;
						 font-size: 20rpx;
						 line-height: 26rpx;
						 padding: 0 6rpx;
						 // font-size: 26;
						 border-radius: 4rpx;
						 margin-right: 10rpx;
					 }
				 }
				 .right{
					 display: flex;
					 align-items: center;
				 }
			}
			.p1{
				margin-bottom: 10rpx;
				display: flex;
				
				.icon-box {
					flex-shrink: 0;
					background: radial-gradient(#dcf5eb,#e9fdf6);
					border-radius: 50%;
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx;
				}
				.icon{
					font-size: 26rpx;
					color: #0A5D3B;
				}
				.topic_name {
					flex: 1;
					align-items: center;
					white-space: nowrap;      /*超出的空白区域不换行*/
					overflow: hidden;         /*超出隐藏*/
					text-overflow: ellipsis;  /*文本超出显示省略号*/
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					line-height: 40rpx;
				}
			}
		}
	}
	.title{
		text-align: center;
		font-size: 32rpx;
		line-height: 44rpx;
		font-weight: bold;
		margin: 28rpx 0;
		color: #333;
	}
	.swiper_box{
		width: 100%;
		height: 280rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>