xiangqin/pages/activity/activityLIst.vue

<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :current='current' :scrollable='false' lineColor='#A890FE' itemStyle="width: 125px;padding-bottom:10px" :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :list="list" @change="change"></u-tabs>
		</u-sticky>
		<view class="" v-if="activityList.length!=0">
			<view class="item" v-for="(item,index) in activityList" :key="index" @click="toinfo(item)">
				<view class="top">
					<image src="../../static/activity/status@2x.png" mode="" class="status"></image>
					<image src="../../static/activity/count@2x.png" mode="" class="count"></image>
					<text v-if="item.status==1">距活动开始 <u-count-down @end="toback()"
							bg-color="rgba(62, 62, 62, 0)" separator-color="#fff" color="#fff" fontSize="20" :timestamp="time(item)"></u-count-down></text>
							<text v-if="item.status==2">活动报名中</text>
							<text v-if="item.status==3">报名已满</text>
							<text v-if="item.status==4">报名结束</text>
							<text v-if="item.status==5">活动进行中</text>
							<text v-if="item.status==6">活动结束</text>
				</view>
				<view class="bottom u-flex">
					<image :src="item.show_image" mode=""></image>
					<view class="">
						<view class="title">
							{{item.title}}
						</view>
						<view class="time">
							<text>活动时间</text> {{item.av_statime}}-{{item.av_endtime}}
						</view>
						<view class="num">
							<text>报名号</text> {{item.number}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
				this.getList()
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		data() {
			return {
				activityList:[],
				page:1,
				current:0,
				list: [{
					name: '待开始',
				}, {
					name: '已开始',
				}, {
					name: '已结束'
				}]
			}
		},
		computed:{
			
		},
		methods: {
			toinfo(item){
				uni.navigateTo({
					url:'./activityInfo?id='+item.id
				})
			},
			time(item){
				var time = new Date(item.av_statime.replace(/-/g, "/")).getTime()
				var time1 = new Date().getTime()
				time = (time - time1) / 1000
				return time
			},
			getList(){
					uni.$u.http.post('/api/user/myactivity',{page:this.page,type:this.current+1}).then(res => {
						if(this.page==1){
							this.activityList=res.data
						}else{
							this.activityList=[...this.activityList,...res.data]
						}
					})
			},
			change(e){
				if(this.current!=e.index){
					this.current=e.index
					this.page=1
					this.getList()
				}
			}
		}
	}
</script>

<style lang="scss">
	.bottom{
		padding: 28rpx 20rpx;
		image{
			width: 160rpx;
			height: 160rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}
		.title{
			font-size: 28rpx;
			font-weight: 600;
		}
		.time{
			margin: 24rpx 0 12rpx;
			font-size: 20rpx;
			text{
				color: #888888;
				margin-right: 12rpx;
			}
		}
		.num{
			font-size: 20rpx;
			text{
				color: #888888;
				margin-right: 31rpx;
			}
		}
	}
	.item{
		position: relative;
		font-size: 26rpx;
		margin: 24rpx auto 0;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		.have{
			width: 120rpx;
			height: 120rpx;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 1;
		}
		.top{
			padding-left: 28rpx;
			position: relative;
			width: 690rpx;
			height: 60rpx;
			line-height: 60rpx;
			.status{
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				width: 690rpx;
				height: 60rpx;
				z-index: 0;
			}
			.count{
				
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
				margin-right: 8rpx;
				margin-bottom: 4rpx;
				position: relative;
			}
			text{
				position: relative;
				font-weight:600;
			}
		}
	}
page{
	background-color: #F3F3F3;
}
</style>