jp-railway/pages/staffHome/activityReward/activityYear.vue

<template>
	<view>
		<u-navbar title="活动中心奖励"></u-navbar>
		
		
		<view class="commend-box" v-for="(item,i) in list" :key="i" @click="ckItem(item)">
			<view class="commend-content">
				<view class="title">
					<view class="title1">查看{{item}}年活动奖励<span v-if="listObj[item]!==''" style="margin-left: 8px;">( {{listObj[item]}} )</span></view>
					
				</view>
				
				
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/activity.js'
	
	export default {
		data() {
			return {
				title:'',
				type:'',
				listForm:{
					pageIndex:1,
					pageSize:20,
					
				},
				list:[],
				listObj:{},
				recordsTotal:0,
				tabList: [{
					name: '全部'
				}, {
					name: '荣誉类型'
				}, {
					name: '荣誉类型',
				}],
				current: 0
			}
		},
		onLoad(op){
			
			for (var i=2024;i>=2023;i--){
				this.list.push(i)
				this.getList(i)
			}
			 
		
		},
		onReachBottom() {
			
		},
		methods: {
			getList(key){
				
				
				API.pageList({
					pageIndex:1,
					pageSize:0,
					year:key,
					isTeam:this.listForm.isTeam
				}).then((res) => {
					this.listObj[key]=res.data.recordsTotal
					this.$forceUpdate()
					//var num=res.data.recordsTotal;
					
				}).catch(error => {
					
				})
			},
			ckItem(item){
				var url=`/pages/staffHome/activityReward/activityReward?year=${item}`;
				uni.navigateTo({
					url:url
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.tabs{
		background-color: rgba(255, 255, 255, 1);
		// /deep/.u-tabs{
		// 	width: 408rpx;
		// }
		margin-bottom: 24rpx;
	}
	
	.commend-box{
		background-color: #fff;
		border-radius: 8px;
	    margin: 24rpx 32rpx 24rpx 32rpx;
		padding: 36rpx;
		display: flex;
		justify-content: space-between;
		.commend-content{
			width: 100%;
			.title{
				color: rgba(51, 51, 51, 1);
				font-size: 42rpx;
				
				font-family: 'Medium';
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				.title1{
					
					min-width:  430rpx;
					//font-weight: bold;
					padding-left: 4px;
					//padding-bottom: 4px;
				}
				.title2{
					width: 30%;
					text-align: right;
				}
			}
			.commendation{
				color: rgba(119, 119, 119, 1);
				font-size: 12px;
				line-height: 17px;
				margin-top: 4rpx;
				padding: 8rpx 0px;
				//width: 430rpx;
			
			}
			.commendationMy{
				
				
			}
			.integralMain{
				display: flex;
				justify-content: space-between;
				.text2{
					vertical-align: middle;
					padding-top: 14rpx;
					margin-top: 10rpx;
					font-size: 32rpx;
				}
			}
			.integral{
				font-family: 'Regular';
				margin-top: 14rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(230, 239, 255, 1);
				//width: 260rpx;
				border-radius: 50px;
				height: 28px;
				font-size: 24rpx;
				.icon{
					width: 32rpx;
					height: 32rpx;
					img{
						width: 100%;
					}
				}
				.text{
					font-size: 24rpx;
					color: rgba(119, 119, 119, 1);
					
					
				}
				
			}
		}
	
	.gainer{
			
		img{
			width: 136rpx;
			height: 140rpx;
			border-radius: 50px;
		}
		.name{
			text-align: center;
			color: rgba(51, 51, 51, 1);
			font-family: 'Regular';
		
		}
	}
	}
</style>