SxsnWechat/components/pages/nonprofitActivety/index.vue

<template>
	<view class="nonprofit-activety" @click="handleDetail(item)" v-if="item" :style="{'margin-top':index===0?0:'20rpx'}">
		<view class="na-top adf">
			<view class="na-top-left">
				<image :src="item.coverFile"></image>
				<view class="na-top-left-status">{{statusCfg[item.activeState]}}</view>
			</view>
			<view class="na-top-right">
				<view class="p">{{item.activityName||''}}</view>
				<view class="tip adf">
					<view class="tip-left adfac">
						<image src="https://oss.familydaf.cn/sxsnfile/20251218/762878799914422d835e505291b9d4c6.png"></image>
						<text>截止报名：</text>
					</view>
					<!-- <view class="tip-right">{{item.endTimeText}}</view> -->
					<view class="tip-right">{{item.signupEndTime||''}}</view>
				</view>
				<view class="tip adf">
					<view class="tip-left adfac">
						<image src="https://oss.familydaf.cn/sxsnfile/20251218/57539643ab974aef9401d76818e1bf3b.png"></image>
						<text>活动地点：</text>
					</view>
					<view class="tip-right">{{item.provinceName||''}}{{item.cityName||''}}</view>
				</view>
			</view>
		</view>
		<view class="na-bottom adfacjb" v-if="item.activeState!==-1">
			<view class="na-bottom-left adf">
				{{ signupText }}
			</view>
			<!-- <view class="na-bottom-right" @click.stop="toApply">立即报名</view> -->
		</view>
	</view>
</template>

<script setup name="nonprofitActivety">
	import { ref, computed } from 'vue'
	const props = defineProps({
		item:{
			typeof:Object,
			default:null
		},
		index:{
			typeof:Number,
			default:0
		}
	})
	const statusCfg = ref({
        '-1': '已取消',
		0:'未开始',
		1:'报名中',
		2:'报名已截止',
		3:'已结束'
	})

	// 报名未满时只显示状态，避免出现「报名中 · 已报0/12人」
	const signupText = computed(() => {
		const it = props.item || {}
		const status = statusCfg.value[it.activeState] || ''
		const now = Number(it.recruitmentNow) || 0
		const max = Number(it.recruitmentMax) || 0
		if (it.activeState === 1 && (!max || now < max)) return status
		return `${status} · 已报${now}${max ? '/' + max : ''}人`
	})

	const handleDetail = item => {
		uni.navigateTo({
			url:'/pagesHome/activityDetail?id='+item.id
		})
	}
</script>

<style scoped lang="scss">
	.nonprofit-activety{
		background: linear-gradient( 45deg, #FFFFFF 80%, #F2FFE8 100%);
		border-radius: 16rpx;
		padding: 36rpx 24rpx 32rpx;
		margin-top: 20rpx;
		
		.na-top{
			&-left{
				width: 158rpx;
				height: 214rpx;
				position: relative;
				border-radius: 16rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
				&-status{
					width: 108rpx;
					height: 40rpx;
					background: url('https://oss.familydaf.cn/sxsnfile/20251218/c2a2c624e39e4c719841c9c13b0836be.png') no-repeat;
					background-size: 100% 100%;
					background-position: -1rpx -1rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #151B29;
					line-height: 39rpx;
					position: absolute;
					left: 0;
					top: 0;
					border-radius: 16rpx 0 0 0;
					text-indent: 12rpx;
				}
			}
			&-right{
				width: calc(100% - 158rpx);
				padding-left: 20rpx;
				box-sizing: border-box;
				.p{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #151B29;
					line-height: 40rpx;
					margin-bottom: 5rpx;
				}
				.tip{
					margin-top: 25rpx;
					&-left{
						width: 160rpx;
						image{
							width: 24rpx;
							height: 24rpx;
						}
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #676775;
							line-height: 24rpx;
							padding-left: 10rpx;
							box-sizing: border-box;
						}
					}
					&-right{
						width: calc(100% - 160rpx);
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #676775;
						line-height: 24rpx;
						box-sizing: border-box;
					}
				}
			}
		}
		
		.na-bottom{
			margin-top: 24rpx;
			&-left{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #676775;
				line-height: 24rpx;
			}
			&-status{
				color: #70CF52;
			}
			&-count{
				color: #70CF52;
			}
			&-right{
				background: #B7F358;
				border-radius: 27rpx;
				padding: 12rpx 30rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #151B29;
				line-height: 30rpx;
			}
		}
	}
</style>