SxsnWechat/components/pages/nonprofitItem/index.vue

<template>
	<view class="ni" v-if="item" @click.prevent="toDetail(item)">
		<view class="ni-top adfacjb">
			<view class="ni-top-left adfac">
				<image class="avatar" src="https://oss.familydaf.cn/sxsnfile/20251218/3821654e080945998d464f3c3aa64122.png"></image>
				<view class="name">{{item?.memberName||''}}</view>
				<image class="sex" v-if="item?.gender==1" src="https://oss.familydaf.cn/sxsnfile/20251218/473d5677fbdb4106acdb9a163377d27f.png"></image>
				<image class="sex" v-else-if="item?.gender==0" src="https://oss.familydaf.cn/sxsnfile/20251218/02bc40a1c47b40f1a36b55cd0553211c.png"></image>
				<view class="age" :class="{'women':item?.gender==1,'man':item?.gender==0}">{{item?.age||0}}岁</view>
			</view>
			<view class="ni-top-right" :class="{'grey':item.signupState==-1||item.signupState==3}">{{statusDict[item?.signupState]||''}}</view>
		</view>
		<view class="ni-info adfacjb">
			<view class="ni-info-left">
				<image :src="item?.coverFile||''"></image>
			</view>
			<view class="ni-info-right">
				<view class="title">{{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?.activityStartTime||''}} ～ {{item?.activityEndTime||''}}</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 class="bottom adfac">
					<view class="btn" @click.stop="handleCancel" v-if="(item.activeState==1||item.activeState===0)&&item.signupState==1">取消报名</view>
					<view class="btn" @click.stop="toDetail(item)" v-if="item.activeState==1&&item.signupState==-1">立即报名</view>
					<view class="btn" @click.stop="handleSignup" v-if="item.activeState==2&&item.signupState==1">去签到</view>
					<view class="btn" @click.stop="handleFill" v-if="(item.activeState==2||item.activeState==3)&&(item.signupState==1||item.signupState==2)">写档案</view>
					<view class="btn" @click.stop="handleReview" v-if="item.activeState==3&&item.signupState==3">查看档案</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup name="NonprofitItem">
	import { ref, getCurrentInstance } from 'vue'
	const { proxy } = getCurrentInstance()
	
	const props = defineProps({
		item:{
			typeof:Object,
			default:null
		}
	})
	
	const statusDict = ref({
		'-1':'已取消',
		1:'已报名',
		2:'已签到',
		3:'已完成'
	})
	const btnTextDict = ref({
		1:'取消报名',
		2:'去签到',
		3:'填写公益档案'
	})
	
	const toDetail = item => {
		uni.navigateTo({
			url:'/pagesNonprofit/nonprofitDetail?memberSignupId='+item?.memberSignupId
		})
	}
	
	
	const emits = defineEmits(['handleCancel'])
	const handleCancel = () => {
		uni.showModal({
			title:'温馨提示',
			content:'确认取消本次报名吗？取消后可再次报名本活动。',
			success: (res) => {
				if(res.confirm){
					proxy.$api.get(`/core/activity/signup/cancelSignupBySingle/${props.item?.memberSignupId}`).then(({data:res})=>{
						if(res.code!==0) return proxy.$showToast(res.msg)
						emits('handleCancel')
					})
				}
			}
		})
	}
	
	const handleSignup = () => {
		try{
			uni.scanCode({
				success: (res) => {
					if(res.errMsg=='scanCode:ok'){
						let r = res.result.replace(/^\uFEFF/, '');
						let d = JSON.parse(r);
						if(!d.hasOwnProperty('id')||!d) return proxy.$showToast('请扫描正确的活动签到码');
						
						let { id } = d;
						const userId = JSON.parse(uni.getStorageSync('userInfo'))?.id||'';
						proxy.$api.post('/core/activity/signup/signinBySingle',{
							activityId:id||'',
							memberSignupId:props.item?.memberSignupId,
							userId
						}).then(({data:res})=>{
							if(res.code!==0) return proxy.$showToast('签到失败,请稍后再试')
							uni.navigateTo({
								url:'/pagesHome/signSuccess'
							})
						})
					}else proxy.$showToast(res.errMsg)
				},
				fail: (err) => {
					proxy.$showToast('扫描异常,请稍后再试')
				}
			})
		}catch(e){
			proxy.$showToast('签到异常,请稍后再试')
		}
	}
	
	const handleFill = () => {
		uni.navigateTo({
			url:'/pagesHome/fillNonprofitArchives?activity='+encodeURIComponent(JSON.stringify(props.item))
		})
	}
	
	const handleReview = () => {
		uni.navigateTo({
			url:'/pagesMy/archivesDetail?activityId='+props.item?.activityId+'&memberId='+props.item?.memberId
		})
	}
</script>

<style scoped lang="scss">
	.ni{
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx 24rpx 32rpx;
		margin-top: 20rpx;
		
		&-top{
			&-left{
				.avatar{
					width: 48rpx;
					height: 48rpx;
				}
				.name{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #151B29;
					line-height: 32rpx;
					margin-left: 16rpx;
				}
				.sex{
					width: 44rpx;
					height: 32rpx;
					margin-left: 10rpx;
				}
				.age{
					border-radius: 13rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 24rpx;
					padding: 4rpx 10rpx;
					margin-left: 13rpx;
					&.women{
						background: rgba(244,101,122,0.14);
						color: #F4657A;
					}
					&.man{
						background: rgba(5,169,254,0.12);
						color: #05A9FE;
					}
				}
			}
			&-right{
				background: rgba(183, 243, 88, .2);
				border-radius: 27rpx;
				padding: 12rpx 18rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #70CF52;
				line-height: 24rpx;
				&.grey{
					background: #F0F2F8;
					color: #646464;
				}
			}
		}
		
		&-info{
			margin-top: 40rpx;
			&-left{
				width: 158rpx;
				height: 214rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
			}
			&-right{
				width: calc(100% - 158rpx);
				padding-left: 20rpx;
				box-sizing: border-box;
				.title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #151B29;
					line-height: 40rpx;
					margin-bottom: 5rpx;
				}
				.tip{
					align-items: flex-start;
					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;
					}
				}
				.bottom{
					margin-top: 30rpx;
					justify-content: flex-end;
				}
				.btn{
					background: #B7F358;
					border-radius: 27rpx;
					padding: 12rpx 26rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #252525;
					line-height: 30rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>