我的成就静态页完成

pages.json

@@ -74,6 +74,12 @@
 					"style": {
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "achievement",
+					"style": {
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		}

pages/my.vue

@@ -62,7 +62,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="box">
+		<div class="box" @tap="handleTurnPage('/pagesMy/achievement')">
 			<div class="box-title">我的成就</div>
 			<div class="box-achievement adfacjb">
 				<div class="box-achievement-left">收获<span>{{achievement}}</span>项成就</div>

pagesMy/achievement.vue

@@ -0,0 +1,509 @@
+<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>