jp-railway/pages/staffHome/activityCenter/activityCenter.vue

<template>
	<view>
		<u-navbar title="活动中心"></u-navbar>
		<view class="tabs"  >
			<u-tabs bar-width="60" :bold="false" inactive-color="#B3B3B3" active-color="#333333" height="88"
				:list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="main">
			 <view class="activity-item"  v-for="(item,i) in list" :key="i"  @click="ckItem(item)" >
			 	<view class="title">
			 		{{item.title}}
					<view class="have-used" v-if="item.status=='77d93870-e1e1-4369-b2b6-629e8645e8d9'" >
						<img src="../../../assets/img/overdue.png" alt="">
					</view>
					<view class="have-used" v-if="item.status=='eaab19ae-893f-40e7-b730-85a13af00137'" >
						<img src="../../../assets/img/overend.png" alt="">
					</view>
			 	</view>
			 	<view class="pictures">
			 		<img v-if="item.pic1" @click="previewImage(item.pic1)"  :src="item.pic1" alt="">
			 		<img v-if="item.pic2"  @click="previewImage(item.pic2)"  :src="item.pic2" alt="">
			 		<img v-if="item.pic3"  @click="previewImage(item.pic3)"   :src="item.pic3" alt="">
			 		
			 	</view>
				<view class="introduce">
					{{item.synopsis}}
				</view>
				<view class="to-detail" >
					<view class="tag" >
						{{item.typeName}}
					</view>
					<view class="click">
						<text>点击查看活动详情</text>
						<text><u-icon name="arrow-right" color="#777777"></u-icon></text>
					</view>
				</view>
				
				
			 </view>
			 
			
		</view>
		<u-divider :isnone="list.length==0" nonetext="没有找到相关内容" bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
		<view class="bottom" v-if="false">
			<img src="../../../assets/img/riFill-camera-fill@2x.png">
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/activity.js'
	import * as API_share from '@/apis/pagejs/share.js'
	
	export default {
		data() {
			return {
				listForm:{
					pageIndex:1,
					pageSize:20,
					
				},
				current: 0,
				list:[],
				recordsTotal:0,
					tabList: [],
					year:null,
			}
		},
		onLoad(op){
			if(op.year){
				this.year=op.year
				this.listForm.year=op.year
				
			}
			this.getList()
			this.dataList()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			dataList(){
				
				
				API_share.dataList("活动类型").then((res) => {
				
					this.tabList=[
						{
							id:'',
							name:'全部'
						},
						...res.data
					]
					
				}).catch(error => {
					
				})
			},
			previewImage(pic) {
				let imgs = [pic];
				
				uni.previewImage({
					indicator:"default",
					loop:true,
					urls: imgs,
					current: 0
				})
			},
			ckItem(item){
				var url="/pages/staffHome/activityCenter/activityDetail?id="+item.id;
				uni.navigateTo({
					url:url
				})
			},
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getList();
			},
			change(index) {
				this.current = index;
			
				this.listForm.pageIndex = 1;
				this.listForm.typeId=this.tabList[index].id
				this.getList()
			},
			getList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.pageList(this.listForm).then((res) => {
					
					uni.hideLoading();
					//this.list=response.data.data
					if(this.listForm.pageIndex==1){
						this.list = res.data.data;
					}else{
						this.list = [
							...this.list,
							...res.data.data
						];
					}
					this.recordsTotal = res.data.recordsTotal;
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.have-used{
		  
		  width: 64px;
		  height: 0;
		  position: relative;
		  top: -30px;
		  top: -36px;
		  left: 520rpx;
		  right: 0;
		  img{
			  width: 100%;
			  //height: 100%;
		  }
	}
	.main{
		margin:24rpx 32rpx;
		
		.activity-item{
			background-color: #fff;
			padding: 24rpx;
			border-radius: 8px;
			margin-bottom: 24rpx;
			.title{
				color: rgba(51, 51, 51, 1);
				font-size: 18px;
				font-family: 'Medium';
			}
			.pictures {
				display: flex;
				justify-content: space-between;
				margin-top: 16rpx;
			
				img {
					width: 31.4%;
					height: 150rpx;
					border-radius: 16rpx;
				}
			}
			.introduce{
				color: rgba(119, 119, 119, 1);
				line-height: 20px;
				margin-top: 16rpx;
				font-family: 'Regular';
			}
			
		}
		.to-detail{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 16rpx;
			padding-top: 36rpx;
			border-top: 1px solid #F4F6F6;
			.tag{
				border-radius: 4px;
				color: rgba(31, 74, 153, 1);
				font-size: 12px;
				text-align: center;
				border: 1px solid rgba(31, 74, 153, 1);
				line-height: 18px;
				padding: 0 17rpx;
				font-family: 'Medium';
				
			}
			.tag2{
				color: rgba(238, 49, 56, 1);
				border: 1px solid rgba(238, 49, 56, 1);
			}
			.click{
				color: rgba(119, 119, 119, 1);
				font-family: 'Regular';
			}
		}
		
	}

   .bottom{
	   background: linear-gradient(223.81deg, rgba(0,90,217,1) 14.24%,rgba(0,52,148,1) 86.67%);
	   width: 104rpx;
	   height: 104rpx;
	   border-radius: 50px;
	   display: flex;
	   justify-content: center;
	   align-items: center;
	   position: fixed;
	   right: 72rpx;
	   bottom: 72rpx;
	   img{
		   width: 56rpx;
		   height: 56rpx;
		   
	   }
   }
</style>