xiangqin/pages/activity/activity.vue

<template>
	<view>
		<image src="../../static/bg.png" mode="" class="bg"></image>
		<view class="top u-flex">
			<view class="item" v-for="(item,index) in tabList" @click="itemClick(index)" :key="index">
				<text v-show="current!=index">{{item.name}}</text>
				<image :style="{'width':current==0?'190rpx':'154rpx'}" v-show="current==index" :src="item.img" mode=""></image>
			</view>
		</view>
		<view class="list">
			<view class="applyItem u-flex u-flex-col" v-for="(item,index) in activityList" :key="index" @click="toinfo(item)">
				<view class="tips">
					<image src="../../static/activity/bmz@2x.png" mode="" v-show="item.status==2" style="width: 108rpx;height: 40rpx;"></image>
					<image src="../../static/activity/doing@2x.png" mode=""  v-show="item.status==5" style="width: 108rpx;height: 40rpx;"></image>
					<image src="../../static/activity/end@2x.png" mode=""  v-show="item.status==4" style="width: 128rpx;height: 40rpx;"></image>
					<image src="../../static/activity/fill@2x.png" mode=""  v-show="item.status==3" style="width: 128rpx;height: 40rpx;"></image>
					<image src="../../static/activity/1.png" mode=""  v-show="item.status==6" style="width: 128rpx;height: 40rpx;"></image>
					<image src="../../static/activity/2.png" mode=""  v-show="item.status==1" style="width: 128rpx;height: 40rpx;"></image>
				</view>
				<image :src="item.show_image" mode=""></image>
				<view class="applyItemInfo u-flex-col;">
					<view class="">
						{{item.title}}
					</view>
					<view class="applyTime">
						报名时间：{{item.sig_statime}}-{{item.sig_endtime}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onPullDownRefresh() {
				this.page=1
				this.getList()
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
			},
		onLoad() {
				this.getList()
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		data() {
			return {
				tabList:[{name:'活动进行中',img:'../../static/activity/doing.png'},{name:'活动预告',img:'../../static/activity/yugao.png'},{name:'历史活动',img:'../../static/activity/history.png'}],
				current:0,
				activityList:[],
			}
		},
		methods: {
			getList(){
					uni.$u.http.post('/api/Activity/index',{page:this.page,type:this.current+1}).then(res => {
						if(this.page==1){
							this.activityList=res.data
						}else{
							this.activityList=[...this.activityList,...res.data]
						}
					})
			},
			itemClick(index){
				if(this.current!=index){
					this.current=index
					this.page=1
					this.getList()
				}
			},
			toinfo(item){
				uni.navigateTo({
					url:'./activityInfo?id='+item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.list{
		margin: 24rpx 30rpx 0;
		.applyItem{
			margin-bottom: 20rpx;
			position: relative;
			width: 690rpx;
			height: 420rpx;
			background: #FFFFFF;
			border-radius: 28rpx;
			image{
				width: 690rpx;
				height: 280rpx;
				background: #D8D8D8;
				border-radius: 28rpx 28rpx 0px 0px;
			}
			.tips{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
			.applyItemInfo{
				width: 690rpx;
				align-items: flex-start;
				padding: 20rpx;
				font-size: 32rpx;
				color: #222222;
				box-sizing: border-box;
				font-weight: 600;
				.applyTime{
					font-weight: 400;
					margin-top: 12rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
.top{
	padding-top: 60rpx;
	.item{
		margin-left: 30rpx;
		font-size: 32rpx;
		color: #777777;
		image{
			height: 58rpx;
		}
		
	}
}
</style>