SxsnWechat/pagesMy/achievement.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/29/8dbf51e7-85cb-496a-b3d0-d5816fa8ff34.png" class="top_bg_img" mode="widthFix"></image>
		<div class="info">
			<div class="info-top adfac">
				<image class="avatar" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/5dded84d-8594-4bbe-9204-c693098e7532.png"></image>
				<div class="name">Hi~ {{'周晓瑾'}}</div>
				<div class="level adfac"><text>LV</text><text>{{'04'}}</text></div>
			</div>
			<div class="info-num">收获勋章：{{3}} <text>枚</text></div>
			<div class="info-memo">共参与<text>{{8}}</text>次公益活动，累计义工时长<text>{{88}}</text>小时</div>
		</div>
		<div class="tab adfacjc">
			<div class="tab-pre" :class="{'active':tidx===''}" @tap="changeTab('')">全部</div>
			<div class="tab-pre" :class="{'active':tidx===1}" @tap="changeTab(1)">已获得</div>
		</div>
		<div class="list">
			<div class="list-pre adffcac" v-for="(item,index) in list" :key="index" @tap="showSz(item)">
				<image :src="item.img"></image>
				<div class="p">{{item.title}}</div>
				<div class="p tip">{{item.date?(item.date+'点亮'):'未获得'}}</div>
			</div>
		</div>
		<div class="btn" @tap="showSave">晒出我的成就</div>
		<div class="dialog adffcac" :style="{'height':'calc(100vh - '+mt+')px', 'top':mt+'px'}" v-if="xzShow">
			<div class="title">"恭喜您获得荣誉勋章"</div>
			<div class="img adfacjc">
				<image :src="xzInfo.img"></image>
			</div>
			<div class="name adfac">
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/902a8c25-9961-48fd-b869-8fd1ac47b271.png"></image>
				<text>{{xzInfo.title}}</text>
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/0f48d5d2-2961-4d95-9bf9-148b7f615227.png"></image>
			</div>
			<div class="heartnum">累计捐赠爱心值{{xzInfo.heartnum||10000}}</div>
			<div class="date">{{xzInfo.date}}获得</div>
			<div class="btn adfacjc">
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/4e76f71e-cd46-4380-8437-04b83eec40f3.png"></image>
				<text>炫耀一下</text>
			</div>
			<image class="close" @tap="xzShow=false;xzInfo=null" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/34582f76-ea26-4e83-8172-e1f81c0634aa.png"></image>
		</div>
		<div class="save adffcacjc" :style="{'height':'calc(100vh - '+mt+')px', 'top':mt+'px'}" v-if="saveShow">
			<div class="box">
				<image class="close" @tap="saveShow=false" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/d1bbde08-3c0f-44bb-bed6-a6c3fce72aa2.png"></image>
				<div class="top adfac">
					<image :src="'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/98671459-4599-44d2-a5ca-bb8200d42436.png'"></image>
					<text>{{'周晓瑾'}}的公益勋章墙</text>
				</div>
				<div class="num"><text>{{4}}</text> 枚公益勋章</div>
				<div class="xzimgs adfac">
					<div class="imgbox">
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation="true">
							<view class="scroll-view-item_H" v-for="(item,index) in xzImgList" :key="index">
								<view class="cl_item">
									<image :src="item"></image>
								</view>
							</view>
						</scroll-view>
					</div>
				</div>
				<div class="bottom adfacjb">
					<div class="left adfac">
						<div class="img">
							<image src=""></image>
						</div>
						<div class="texts adffc">
							<text>扫描二维码</text>
							<text>查看你的公益勋章</text>
						</div>
					</div>
					<div class="right">善行少年</div>
				</div>
			</div>
			<div class="text">长按图片，保存到手机</div>
		</div>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import { ref, onMounted } from 'vue'
	
	const tidx = ref('')
	const originData = ref([
		{
			img:'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/94bda1ce-50c2-4e49-90ed-90db9b98c390.png',
			title:'公益萌新',
			date:'2025-07-30'
		},
		{
			img:'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/7c0b9a7c-a095-495b-a3e9-d953417ebfb1.png',
			title:'黄金公益',
			date:''
		},
		{
			img:'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/94bda1ce-50c2-4e49-90ed-90db9b98c390.png',
			title:'公益萌新',
			date:'2025-07-30'
		},
		{
			img:'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/7c0b9a7c-a095-495b-a3e9-d953417ebfb1.png',
			title:'黄金公益',
			date:''
		},
		{
			img:'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/94bda1ce-50c2-4e49-90ed-90db9b98c390.png',
			title:'公益萌新',
			date:'2025-07-30'
		},
		{
			img:'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/7c0b9a7c-a095-495b-a3e9-d953417ebfb1.png',
			title:'黄金公益',
			date:''
		},
	])
	const list = ref([])
	const xzShow = ref(false)
	const xzInfo = ref(null)
	const saveShow = ref(false)
	const xzImgList = ref([
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/94bda1ce-50c2-4e49-90ed-90db9b98c390.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/7c0b9a7c-a095-495b-a3e9-d953417ebfb1.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/94bda1ce-50c2-4e49-90ed-90db9b98c390.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/7c0b9a7c-a095-495b-a3e9-d953417ebfb1.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/94bda1ce-50c2-4e49-90ed-90db9b98c390.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/7c0b9a7c-a095-495b-a3e9-d953417ebfb1.png',
	])
	
	const changeTab = type => {
		tidx.value = type;
		let yhd = originData.value.filter(d=>d.date);
		list.value = JSON.parse(JSON.stringify(type?yhd:originData.value));
	}
	
	const showSz = item => {
		if(!item.date) return
		xzInfo.value = item;
		xzShow.value = true;
	}
	
	const showSave = () => {
		saveShow.value = true;
	}
	
	onMounted(()=>{
		list.value = JSON.parse(JSON.stringify(originData.value));
	})
</script>

<style scoped lang="scss">
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	
	.scroll-view-item_H {
		display: inline-block;
		width: 111rpx;
		height: 100%;
		margin-left: 23rpx;
		&:first-child{
			margin-left: 0;
		}
	}
	
	.common_page{
		background: #FFFFFF;
		overflow: hidden;
		
		.info{
			position: relative;
			margin-top: 31rpx;
			&-top{
				.avatar{
					width: 98rpx;
					height: 98rpx;
				}
				.name{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #252525;
					line-height: 54rpx;
					margin-left: 15rpx;
				}
				.level{
					width: 137rpx;
					height: 42rpx;
					background: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/acff6d97-0292-4d2d-9663-9761ac76ba3a.png') no-repeat;
					background-size: 100% 100%;
					margin-left: 20rpx;
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 26rpx;
						color: #FFFFFF;
						line-height: 26rpx;
						margin-left: 16rpx;
					}
				}
			}
			&-num{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 44rpx;
				color: #252525;
				line-height: 48rpx;
				margin-top: 24rpx;
				text{
					font-weight: 400;
					font-size: 24rpx;
					line-height: 40rpx;
				}
			}
			&-memo{
				margin-top: 29rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #252525;
				line-height: 28rpx;
				text{
					font-weight: bold;
					margin: 0 10rpx;
				}
			}
		}
	
		.tab{
			position: relative;
			margin-top: 92rpx;
			&-pre{
				padding: 0 65rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #676775;
				line-height: 48rpx;
				position: relative;
				&.active{
					font-weight: bold;
					font-size: 36rpx;
					color: #252525;
					&::after{
						content: '';
						width: 42rpx;
						height: 6rpx;
						background: #77F99B;
						border-radius: 3rpx;
						position: absolute;
						left: 50%;
						margin-left: -21rpx;
						bottom: -15rpx;
					}
				}
			}
		}
	
		.list{
			margin-left: -60rpx;
			overflow: hidden;
			&-pre{
				width: calc(100% / 3 - 60rpx);
				margin-top: 48rpx;
				float: left;
				margin-left: 60rpx;
				image{
					width: 180rpx;
					height: 176rpx;
				}
				.p{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #252525;
					line-height: 28rpx;
					text-align: center;
					margin-top: 24rpx;
					&.tip{
						font-weight: 400;
						font-size: 24rpx;
						color: #676775;
						line-height: 24rpx;
					}
				}
			}
		}
	
		.btn{
			width: 100%;
			height: 90rpx;
			background: #B7F358;
			border-radius: 45rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #151B29;
			line-height: 90rpx;
			text-align: center;
			letter-spacing: 2rpx;
			margin-top: 60rpx;
		}
	
		.dialog{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: #252525;
			
			.title{
				font-family: FZZCHJW--GB1, FZZCHJW--GB1;
				font-weight: normal;
				font-size: 36rpx;
				color: #FDE2B2;
				line-height: 44rpx;
				text-align: center;
				margin-top: 113rpx;
			}
			.img{
				width: 567rpx;
				height: 496rpx;
				background: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/e8c96426-1d12-47f1-a105-1fb2f6bf3a19.png') no-repeat;
				background-size: 100% 100%;
				margin-top: 27rpx;
				image{
					width: 279rpx;
					height: 275rpx;
				}
			}
			.name{
				margin-top: 18rpx;
				image{
					width: 53rpx;
					height: 67rpx;
				}
				text{
					font-family: FZZCHJW--GB1, FZZCHJW--GB1;
					font-weight: normal;
					font-size: 64rpx;
					color: #FDE2B2;
					line-height: 77rpx;
					text-align: center;
				}
			}
			.heartnum{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FDE2B2;
				line-height: 37rpx;
				text-align: center;
				margin-top: 13rpx;
			}
			.date{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #B2AB95;
				line-height: 37rpx;
				text-align: center;
				margin-top: 13rpx;
			}
			.btn{
				width: 368rpx;
				height: 88rpx;
				background: linear-gradient( 270deg, #F8D7AC 0%, #FEFAD9 100%);
				border-radius: 44rpx;
				margin-top: 89rpx;
				image{
					width: 30rpx;
					height: 25rpx;
				}
				text{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #252525;
					line-height: 45rpx;
					margin-left: 14rpx;
				}
			}
			.close{
				width: 48rpx;
				height: 48rpx;
				margin-top: 73rpx;
			}
		}
	
		.save{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, .8);
			
			.box{
				width: calc(100% - 128rpx);
				padding: 34rpx 36rpx 28rpx;
				box-sizing: border-box;
				background: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/bfdff5f5-e57f-4deb-8359-b12a0a6ee7dd.png') no-repeat;
				background-size: 100% 100%;
				position: relative;
				
				.close{
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					top: 0;
					right: 0;
				}
				.top{
					image{
						width: 90rpx;
						height: 90rpx;
					}
					text{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #FAE5B9;
						line-height: 45rpx;
						margin-left: 18rpx;
					}
				}
				.num{
					margin-top: 10rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					text{
						font-weight: bold;
						font-size: 40rpx;
						color: #FAE5B9;
						line-height: 56rpx;
					}
				}
				.xzimgs{
					margin-top: 48rpx;
					width: 100%;
					height: 328rpx;
					background: #222632;
					border-radius: 16rpx;
					padding: 0 26rpx;
					box-sizing: border-box;
					.imgbox{
						width: 100%;
						height: 111rpx;
						.cl_item{
							width: 111rpx;
							height: 111rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
					}
				}
				.bottom{
					margin-top: 26rpx;
					.left{
						.img{
							width: 100rpx;
							height: 100rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.texts{
							margin-left: 24rpx;
							text{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #FFFFFF;
								line-height: 20rpx;
								&:last-child{
									margin-top: 20rpx;
								}
							}
						}
					}
					.right{
						font-family: kuaikanshijieti;
						font-size: 22rpx;
						color: #FFFFFF;
						line-height: 38rpx;
						font-style: italic;
					}
				}
			}
			.text{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				text-align: center;
				margin-top: 44rpx;
			}
		}
	}
</style>