SxsnWechat/pagesMy/achievement.vue

<template>
	<view class="common_page adffc" :style="{'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="userInfo?.avatarPath||'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/5dded84d-8594-4bbe-9204-c693098e7532.png'"></image>
				<div class="name">Hi~ {{userInfo?.realName??''}}</div>
				<div class="level adfac"><text>LV</text><text>{{userInfo?.userLevel??1}}</text></div>
			</div>
			<div class="info-num">收获勋章：{{numInfo?.myMedals??0}} <text>枚</text></div>
			<div class="info-memo">共参与<text>{{numInfo?.activityCount??0}}</text>次公益活动，累计义工时长<text>{{numInfo?.volunteerHours??0}}</text>小时</div>
		</div>
		<div class="tab adfacjc">
			<div class="tab-pre" :class="{'active':queryParams.obtained===''}" @tap="changeTab('')">全部</div>
			<div class="tab-pre" :class="{'active':queryParams.obtained===1}" @tap="changeTab(1)">已获得</div>
		</div>
		<div class="list" v-if="list.length">
			<div class="list-pre adffcac" v-for="(item,index) in list" :key="index" @tap="showSz(item)">
				<image :src="item.imageUrl??''"></image>
				<div class="p">{{item?.medalName||''}}</div>
				<div class="p tip" v-if="item?.lightUp">{{item?.lightUpDate2??''}}点亮</div>
				<div class="p tip" v-else>未获得</div>
			</div>
		</div>
		<div class="dataEmpty" v-else>
			<page-empty text="暂无勋章"></page-empty>
		</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 PageEmpty from '@/components/pageEmpty/index.vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, getCurrentInstance } from 'vue'
	const { proxy } = getCurrentInstance()
	
	const userInfo = ref(null)
	const numInfo = ref(null)
	const queryParams = ref({
		page:1,
		limit:-1,
		userId:'',
		obtained:''
	})
	const typeDict = ref({
		1:'公益萌新',
		2:'青铜公益',
		3:'白银公益',
		4:'黄金公益',
		5:'铂金公益',
		6:'公益王者',
		7:'公益活动能手',
		8:'公益活动达人',
		9:'月月公益达人'
	})
	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 => {
		queryParams.value.obtained = type;
		getList()
	}
	
	const showSz = item => {
		if(!item.date) return
		xzInfo.value = item;
		xzShow.value = true;
	}
	
	const showSave = () => {
		saveShow.value = true;
	}
	
	const getList = () => {
		proxy.$api.get('/core/love/value/record/obtainedMedalList',queryParams.value).then(({data:res})=>{
			if(res.code!==0) return proxy.$showToast(res.msg)
			list.value = res.data.list;
			list.value.forEach(l=>l.lightUpDate2 = new Date(l.lightUpDate).Format('yyyy-MM-dd'));
		})
	}
	
	onLoad((options)=>{
		userInfo.value = uni.getStorageSync('userInfo')&&JSON.parse(uni.getStorageSync('userInfo'));
		numInfo.value = options.numInfo&&JSON.parse(options.numInfo);
		queryParams.value.userId = userInfo.value&&userInfo.value.id;
		getList()
	})
</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;
			flex: 1;
			overflow-y: auto;
			&-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>