SxsnWechat/pagesMy/archivesDetail.vue

<template>
	<view class="common_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title="公益档案" bgColor="transparent"></cus-header>
		<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/b8876bf2-6bec-4ab2-99f1-6316c9d3deff.png" class="top_bg_img" mode="widthFix"></image>
		<div class="box box1">
			<div class="content">
				<div class="card">
					<div class="avatar">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/d3dbdf00-6fee-40ca-96d2-8b95a004d9e7.png"></image>
					</div>
					<image class="logo" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/59a63fde-bbd8-4419-a65a-b714790f6b0a.png"></image>
					<image class="heart" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/234c696f-a538-45c3-ab11-c0946305f2c2.png"></image>
					<div class="level">Lv.{{info?.userLevel||1}}</div>
					<div class="name-tip">昵称/NAME</div>
					<div class="name">{{info?.memberName||''}}</div>
					<div class="kh-tip">家庭公益口号</div>
					<div class="kh">{{info?.welfareSlogan||''}}</div>
					<div class="memo">亲爱的，从{{info?.activityStartTime||''}}至{{info?.activityEndTime||''}}，您的每一分善意都让世界更温暖！</div>
					<div class="gx-tip">爱心贡献/CONTRIBUTION</div>
					<div class="num" style="margin-top: 28rpx;">捐赠爱心值<text>{{info?.valueLimit||0}}</text></div>
					<div class="num">获得义工时长<text>{{info?.serviceHours||0}}</text>小时</div>
				</div>
			</div>
		</div>
		<div class="box box2">
			<image class="box-title" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/6cbc5700-77f4-4ae8-b4eb-28c4e7748029.png"></image>
			<div class="content">{{info?.experience||''}}</div>
		</div>
		<div class="box box2">
			<image class="box-title" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/56ffd9a5-b42a-4eb5-879d-b38a2c05bdae.png"></image>
			<div class="content">
				<image class="img" v-for="(item,index) in imgs" :key="index" :src="item" mode="widthFix"></image>
			</div>
		</div>
		<div class="back" @tap="goBack">返回</div>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, getCurrentInstance } from 'vue'
	const { proxy } = getCurrentInstance()
	
	const info = ref(null)
	const imgs = ref([])
	
	const goBack = () => {
		uni.navigateBack();
	}
	
	onLoad(options=>{
		proxy.$api.get(`/core/activity/signup/getMemberProfile/${options?.activityId}/${options?.memberId}`).then(({data:res})=>{
			if(res.code!==0) return proxy.$showToast(res.msg)
			info.value = res.data;
			imgs.value = res.data.activityFile&&res.data.activityFile.split(';');
		})
	})
</script>

<style scoped lang="scss">
	.common_page{
		background: #F9FEFD;
		padding-bottom: 64rpx;
		box-sizing: border-box;
		
		.box{
			background: #D9F9E9;
			border-radius: 48rpx;
			position: relative;
			margin-top: 40rpx;
			padding: 14rpx;
			
			&-title{
				width: 263rpx;
				height: 79rpx;
				position: absolute;
				top: 0;
				left: 50%;
				margin-left: -131.5rpx;
			}
			
			&.box1{
				margin-top: 30rpx;
				.content{
					border-radius: 32rpx;
					padding: 0 18rpx 18rpx;
					background-color: #EFFDF2;
					background-image: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/64746c13-7ddc-4224-a1d4-060d126e7a71.png');
					background-repeat: no-repeat;
					background-size: 337rpx 450rpx;
					background-position: top right;
					overflow: hidden;
					border: 6rpx solid #FFFFFF;
					.card{
						position: relative;
						border-radius: 24rpx;
						padding: 63rpx 39rpx;
						box-sizing: border-box;
						margin-top: 142rpx;
						background: #FFFFFF;
						
						.avatar{
							width: 116rpx;
							height: 116rpx;
							border: 6rpx solid #FFFFFF;
							border-radius: 50%;
							position: absolute;
							left: 39rpx;
							top: -74rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.logo{
							width: 159rpx;
							height: 40rpx;
							position: absolute;
							top: 40rpx;
							right: 24rpx;
						}
						.name-tip{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #B2B2B2;
							line-height: 24rpx;
						}
						.name{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #252525;
							line-height: 32rpx;
							margin-top: 16rpx;
						}
						.kh-tip{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #B2B2B2;
							line-height: 24rpx;
							margin-top: 44rpx;
						}
						.kh{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: 800;
							font-size: 44rpx;
							color: #70CF52;
							line-height: 44rpx;
							margin-top: 24rpx;
						}
						.memo{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #B2B2B2;
							line-height: 39rpx;
							margin-top: 64rpx;
						}
						.gx-tip{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #B2B2B2;
							line-height: 36rpx;
							margin-top: 112rpx;
						}
						.num{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #151B29;
							line-height: 36rpx;
							margin-top: 20rpx;
							text{
								font-family: AaHouDiHei;
								font-size: 26rpx;
								font-weight: bold;
								color: #70CF52;
								line-height: 36rpx;
								margin: 10rpx;
							}
						}
						.heart{
							width: 235rpx;
							height: 230rpx;
							position: absolute;
							right: 0;
							bottom: 64rpx;
						}
						.level{
							width: 250rpx;
							height: 64rpx;
							background: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/f547998f-f2c2-4098-a908-e2b70d16d60c.png') no-repeat;
							background-repeat: no-repeat;
							background-size: 100% 100%;
							position: absolute;
							right: 0;
							bottom: 0;
							font-family: PingFang-SC, PingFang-SC;
							font-weight: 800;
							font-size: 48rpx;
							color: #FFFFFF;
							line-height: 64rpx;
							text-align: center;
						}
					}
				}
			}
		
			&.box2{
				.content{
					background: #FFFFFF;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #4E5969;
					line-height: 48rpx;
					padding: 96rpx 32rpx 46rpx;
					border-radius: 32rpx;
					img{
						width: 100%;
					}
				}
			}
		}
	
		.back{
			width: 100%;
			height: 90rpx;
			background: #B7F358;
			border-radius: 45rpx;
			margin-top: 40rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #151B29;
			line-height: 90rpx;
			text-align: center;
			letter-spacing: 2rpx;
		}
	}
</style>