qingyuan/pagesA/campusActivities/index.vue

<template>
	<view style="min-height: 100vh;background-color: #f8f8f8;box-sizing: border-box;">
		<view style="padding: 0px 30upx;">
			<tabs-c :cc_id="cc_id" pageType="" @changeChildType="changeChildType" @search="search" :searchNeed="true"></tabs-c>
		</view>
		<view class="content_wrapper">
			<view v-for="(item,index) in dataList" :key="index" class="list-item" @click="toDetail(item.id, item.cc_name)">
				<image :src="item.promotional_img" mode="aspectFill"></image>
				<view class="text-box">
					<view class="text1">{{item.title}}</view>
					<view class="text2">
						<view class="text3">
							<image style="width: 50upx;height: 50upx;vertical-align: middle;margin: 0px;" :src="item.avatar"></image>
							{{item.nickname}}
						</view>
						<view class="text4" @click.stop="favorite(item.id, index)">
							<image style="width: 36upx;height: 36upx;vertical-align: middle;margin: 0px;" v-if="!item.is_thumbs_up" :src="imageRootNew+'ze-like-o@2x.png'" mode=""></image>
							<image style="width: 36upx;height: 36upx;vertical-align: middle;margin: 0px;" v-else :src="imageRootNew+'ze-like@2x.png'" mode=""></image>
							<text style="margin-left: 6upx;">{{item.thumbs_up_count || 0}}</text>
						</view>
					</view>
					<!-- <view class="">{{item.publish_time}}</view> -->
				</view>
				<view class="label" v-if="item.cc_name && cc_cc_id == 18">
					{{item.cc_name}}
				</view>
			</view>
			<view v-if="dataList.length==0" style="width: 100%;">
				<loadmore :isMore="true" v-if="dataList.length=='0'" />
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import loadmore from '@/components/template/loadmore.vue'
	import tabsC from '@/components/template/tabs/tabs-copy.vue';
	export default {
		data() {
			return {
				page: 1,
				dataList: [],
				cc_id: "6",//校园活动大类
				cc_cc_id: '',//当前选中的子类
				keyword: "",
			}
		},
		components: {
			loadmore,
			tabsC
		},
		onLoad(e){
			console.log(e, '-----');
			if(e.cc_id){
				this.cc_id = e.cc_id;
			};
		},
		onShow() {
			this.getList();
		},
		methods: {
			getList(type){
				let _this = this;
				let data = {
					page:_this.page, size: 10
				}
				if(type=='search'){
					data.title = this.keyword;
				}
				if(this.cc_cc_id==18){//18是推荐
					data.recommend = 1;
				}else{
					data.cc_id = this.cc_cc_id;
				}
				console.log(data, 'p------');
				App._post_form('&p=student&do=campusActivitiesList', data, res => {
					if(_this.page===1){
						if(res.data.data.length>0){
							_this.setData({
								dataList: res.data.data
							})
						}else{
							_this.setData({
								dataList: []
							})
						}
					}else{
						if(res.data.data.length>0){
							let dataList = _this.dataList.concat(res.data.data);
							_this.setData({
								dataList
							})
						}
					}
				}, false, err=>{
					
				});
			},
			toDetail(id, name){
				if(name){
					//推荐不属于分类
					uni.navigateTo({
						url:'/pagesA/campusActivities/campusActivities?id='+id+'&name='+name
					})
				}else{
					uni.navigateTo({
						url:'/pagesA/campusActivities/campusActivities?id='+id+'&cc_cc_id='+this.cc_cc_id
					})
				}
			},
			favorite(id, index){
				let _this = this,
				data = {
					caid: id
				}
				App._post_form('&p=student&do=thumbsUpActivities', data, res => {
					uni.showToast({
						title: res.message
					})
					_this.dataList[index].is_thumbs_up = !_this.dataList[index].is_thumbs_up;
					if(_this.dataList[index].is_thumbs_up){
						++_this.dataList[index].thumbs_up_count;
					}else if(!_this.dataList[index].is_thumbs_up){
						--_this.dataList[index].thumbs_up_count;
					}
				})
			},
			changeChildType(e){
				console.log(e);
				this.page = 1;
				this.cc_cc_id = e;
				this.keyword = '';
				this.getList();
			},
			search(e){
				this.keyword = e;
				this.page = 1;
				this.getList('search');
			}
		},
		onReachBottom(){
			this.page++;
			if(this.keyword){
				this.getList('search');
				return;
			}
			this.getList();
		}
	}
</script>

<style lang="scss">
.dis-flex{
	display: flex;
	align-items: center;
}
.content_wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0px 15px 20px 15px;
	
	.list-item{
		width: 48%;
		// display: flex;
		// padding: 15px 0px;
		background-color: #FFF;
		// border-bottom: 1px solid #efefef;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
		margin-bottom: 15px;
		position: relative;
	}
	image{
		width: 100%;
		height: 200px;
		border-radius: 5px 5px 0px 0px;
		margin-bottom: 5px;
	}
	.text-box{
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0px 10px 10px;
	}
	.text1{
		height: 44px;    color: #444;
		font-size: 14px;line-height: 22px;font-weight: bold;
		display: -webkit-box;//将盒子转换为弹性盒子
		-webkit-box-orient: vertical;//文本显示方式，默认水平
		-webkit-line-clamp: 2;//设置显示多少行
		overflow: hidden;
		margin-bottom: 10upx;
	}
	.text2{
		font-size: 12px;
		line-height: 50upx;
		color: #999;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.text3{
		display: -webkit-box;//将盒子转换为弹性盒子
		-webkit-box-orient: vertical;//文本显示方式，默认水平
		-webkit-line-clamp: 1;//设置显示多少行
		overflow: hidden;
	}
	.text4{
		
	}
	.label{
		position: absolute;
		top: 0px;
		font-size: 10px;
		padding: 3px 5px;
		color: #666;
		background: rgba(255,255,255,0.5);
	}
}
</style>