我的页面的爱心值和公益及其公益详情静态页完成

common/composables/useGlobalShare.js

@@ -1,24 +1,32 @@
 import { ref } from 'vue';
-import { onLoad } from '@dcloudio/uni-app';
+import { onLoad } from '@dcloudio/uni-app';
+import { useUserStore } from '@/common/stores/user';
+const userStore = useUserStore();
 
 export function useGlobalShare() {
-	// 1. 共享的数据
-	const shareData = ref('这是来自Composable的数据');
+	const isLogin = () => {
+		if(uni.getStorageSync('token')){
+			return true
+		}else {
+			uni.showModal({
+				title:'温馨提示',
+				content:'当前功能需要登录后使用，是否登录？',
+				success: (res) => {
+					if(res.confirm){
+						userStore.openLoginModal();
+					}else{
+						return false
+					}
+				}
+			})
+		}
+	}
 	
-	// 2. 共享的方法
-	const shareLog = (message) => {
-		console.log(`[来自Composable的LOG]: ${message}`);
-	};
-	
-	// 3. 共享的生命周期逻辑
 	onLoad(() => {
 		console.log('--- Composable onLoad 触发 (仅页面) ---');
-		shareLog('页面加载了');
 	});
 	
-	// 将需要暴露出去的数据和方法返回
 	return {
-		shareData,
-		shareLog
+		isLogin
 	};
 }

components/pages/archivesBox/index.vue

@@ -0,0 +1,126 @@
+<template>
+	<view class="cpage">
+		<div class="top adf">
+			<div class="top-left">
+				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/19ca20d9-9131-4234-9a1f-daf364ff63b4.png"></image>
+			</div>
+			<div class="top-right">
+				<p>{{'感恩有你 温暖前行'}}</p>
+				<div class="tip adf">
+					<div class="tip-left adfac">
+						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/201a4250-24a4-412d-9ec9-fc58071d10ea.png"></image>
+						<text>活动时间：</text>
+					</div>
+					<div class="tip-right">{{"2025-06-01 ～ 2025-06-01"}}</div>
+				</div>
+				<div class="tip adf">
+					<div class="tip-left adfac">
+						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/e9025f86-a59e-4f82-92f0-9d22e846193c.png"></image>
+						<text>活动地点：</text>
+					</div>
+					<div class="tip-right">{{"广东省深圳市南山区"}}</div>
+				</div>
+			</div>
+		</div>
+		<div class="bottom adfacjb">
+			<div class="bottom-left">限{{46}}人报名参加</div>
+			<div class="bottom-right" @tap="toDetail">查看档案</div>
+		</div>
+	</view>
+</template>
+
+<script setup name="ArchivesBox">
+	import { ref } from 'vue'
+	
+	const toDetail = () => {
+		uni.navigateTo({
+			url:'/pagesMy/archivesDetail'
+		})
+	}
+</script>
+
+<style scoped lang="scss">
+	.cpage{
+		background-color: #FFFFFF;
+		background-image: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/24/b72c473b-300d-4bef-966d-8dc67ba17a4c.png');
+		background-repeat: no-repeat;
+		background-size: 283rpx 286rpx;
+		background-position: top right;
+		border-radius: 24rpx;
+		margin-top: 20rpx;
+		padding: 36rpx 24rpx 32rpx 20rpx;
+		
+		.top{
+			&-left{
+				width: 158rpx;
+				height: 214rpx;
+				image{
+					width: 100%;
+					height: 100%;
+				}
+			}
+			&-right{
+				width: calc(100% - 158rpx);
+				padding-left: 20rpx;
+				box-sizing: border-box;
+				&>p{
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 32rpx;
+					color: #151B29;
+					line-height: 40rpx;
+					margin-bottom: 5rpx;
+				}
+				.tip{
+					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;
+							margin-left: 10rpx;
+						}
+					}
+					&-right{
+						width: calc(100% - 160rpx);
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #676775;
+						line-height: 24rpx;
+						margin-left: 10rpx;
+					}
+				}
+			}
+		}
+	
+		.bottom{
+			margin-top: 24rpx;
+			&-left{
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #676775;
+				line-height: 24rpx;
+			}
+			&-right{
+				background: #B7F358;
+				border-radius: 27rpx;
+				padding: 12rpx 30rpx;
+				font-family: PingFang-SC, PingFang-SC;
+				font-weight: bold;
+				font-size: 24rpx;
+				color: #151B29;
+				line-height: 30rpx;
+				letter-spacing: 2rpx;
+			}
+		}
+	}
+</style>

pages.json

@@ -47,6 +47,29 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "pagesMy",
+			"pages": [
+				{
+					"path": "heartNumber",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "archives",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "archivesDetail",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {

pages/my.vue

@@ -36,7 +36,7 @@
 		<div class="box" style="margin-top: 40rpx;">
 			<div class="box-title">公益记录</div>
 			<div class="box-card adfacjb">
-				<div class="box-card-pre adffcac red">
+				<div class="box-card-pre adffcac red" @tap="handleTurnPage('/pagesMy/heartNumber')">
 					<image class="top" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/18/4e6e3db8-127f-433d-9644-66f1451a6d72.png"></image>
 					<div class="num">{{(heartNum||0).toFixed(2)}}</div>
 					<div class="text adf">
@@ -44,7 +44,7 @@
 						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/18/35df3e58-7b8c-4d3c-8f09-41f252cb3805.png"></image>
 					</div>
 				</div>
-				<div class="box-card-pre adffcac purple">
+				<div class="box-card-pre adffcac purple" @tap="handleTurnPage('/pagesMy/archives')">
 					<image class="top" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/18/dc26c6af-2617-47b7-ab38-9ccbf2016c5c.png"></image>
 					<div class="num">{{(fileNum||0).toFixed(2)}}</div>
 					<div class="text adf">
@@ -98,9 +98,12 @@
 
 <script setup name="">
 	import CusTabbar from '@/components/CusTabbar/index.vue'
-	import { ref } from 'vue'
+	import { ref, getCurrentInstance } from 'vue'
+	const { proxy } = getCurrentInstance();
 	import { useUserStore } from '@/common/stores/user';
 	const userStore = useUserStore();
+	import { useGlobalShare } from '@/common/composables/useGlobalShare';
+	const { isLogin } = useGlobalShare();
 	
 	const userInfo = ref(null)
 	const heartNum = ref(0)
@@ -111,6 +114,11 @@
 	const showLogin = () => {
 		userStore.openLoginModal();
 	}
+	
+	const handleTurnPage = (url) => {
+		if(!isLogin()) return
+		uni.navigateTo({ url })
+	}
 </script>
 
 <style scoped lang="scss">

pagesMy/archives.vue

@@ -0,0 +1,25 @@
+<template>
+	<view class="common_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
+		<cus-header title="我的档案" bgColor="#FFFFFF"></cus-header>
+		<div class="list">
+			<ArchivesBox v-for="(item,index) in list" :key="index"></ArchivesBox>
+		</div>
+	</view>
+</template>
+
+<script setup name="">
+	import CusHeader from '@/components/CusHeader/index.vue'
+	import ArchivesBox from '@/components/pages/archivesBox/index.vue'
+	import { ref } from 'vue'
+	import { onReachBottom } from '@dcloudio/uni-app';
+	
+	const list = ref([1,1,1,1,1])
+	
+	onReachBottom(()=>{
+		
+	})
+</script>
+
+<style scoped lang="scss">
+	
+</style>

pagesMy/archivesDetail.vue

@@ -0,0 +1,234 @@
+<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.{{4}}</div>
+					<div class="name-tip">昵称/NAME</div>
+					<div class="name">{{'周晓瑾'}}</div>
+					<div class="kh-tip">家庭公益口号</div>
+					<div class="kh">{{'公益献爱心，真情暖人心'}}</div>
+					<div class="memo">亲爱的，从{{'2025年6月1日'}}至{{'2025年7月30日'}}，您的每一分善意都让世界更温暖！</div>
+					<div class="gx-tip">爱心贡献/CONTRIBUTION</div>
+					<div class="num" style="margin-top: 28rpx;">捐赠爱心值<text>{{5000}}</text></div>
+					<div class="num">获得义工时长<text>{{2}}</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">
+				{{'参加这次沙漠沙沙树种植活动，我深刻体会到环保行动的意义。在炎热的沙漠中，亲手栽下一棵棵沙沙树，不仅为荒漠增添了一抹绿色，更让我感受到保护生态环境的紧迫性。团队协作让效率倍增，大家的热情也让我深受鼓舞。这次活动让我明白，小小的行动也能为地球带来改变。未来，我会继续参与环保事业，号召更多人加入，共同守护我们的家园。'}}
+			</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" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/e1d9a1e2-d0fd-4503-bc06-8d8509efde01.png" mode="widthFix"></image>
+			</div>
+		</div>
+		<div class="back" @tap="goBack">返回</div>
+	</view>
+</template>
+
+<script setup name="">
+	import CusHeader from '@/components/CusHeader/index.vue'
+	import { ref } from 'vue'
+	
+	const goBack = () => {
+		uni.navigateBack();
+	}
+</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>

pagesMy/heartNumber.vue

@@ -0,0 +1,134 @@
+<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/24/19f555c2-ee0a-437b-8871-42b5605f8a8b.png" class="top_bg_img" mode="widthFix"></image>
+		<div class="top">
+			<div class="num">{{800}}</div>
+			<div class="text">我的爱心值</div>
+		</div>
+		<div class="list">
+			<div class="list-item" v-for="(item,index) in list" :key="index">
+				<div class="time">{{'2025-07-30 14:00:32'}}</div>
+				<div class="content adfacjb">
+					<div class="left adfac">
+						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/24/d5b79c0e-bcda-49ff-8cc5-5f6275b6bac1.png"></image>
+						<div class="texts">
+							<div class="p">{{'参与献爱心'}}</div>
+							<div class="p tip">{{'报名参与公益实践活动'}}</div>
+						</div>
+					</div>
+					<div class="right adfac">
+						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/24/9d038c9c-268c-44ae-a396-949039c77f47.png" v-if="index%2===0"></image>
+						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/24/b6cbd075-f008-448a-ac9f-074787d08924.png" v-else></image>
+						<text :class="{'black':index%2===0,'red':index%2===1}">{{index%2===0?'-':'+'}}</text>
+						<text :class="{'black':index%2===0,'red':index%2===1}">{{800}}</text>
+					</div>
+				</div>
+			</div>
+		</div>
+	</view>
+</template>
+
+<script setup name="">
+	import CusHeader from '@/components/CusHeader/index.vue'
+	import { ref } from 'vue'
+	
+	const list = ref([1,1,1,1,1])
+</script>
+
+<style scoped lang="scss">
+	.common_page{
+		padding-bottom: 20rpx;
+		box-sizing: border-box;
+		.top{
+			padding: 93rpx 64rpx 0;
+			height: 296rpx;
+			box-sizing: border-box;
+			position: relative;
+			.num{
+				font-family: DINAlternate, DINAlternate;
+				font-weight: bold;
+				font-size: 88rpx;
+				color: #151B29;
+				line-height: 103rpx;
+			}
+			.text{
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #151B29;
+				line-height: 30rpx;
+				margin-top: 11rpx;
+			}
+		}
+		.list{
+			position: relative;
+			flex: 1;
+			overflow-y: auto;
+			width: calc(100% - 48rpx);
+			margin: 0 auto;
+			background: #FFFFFF;
+			border-radius: 24rpx;
+			padding: 6rpx 24rpx;
+			box-sizing: border-box;
+			&-item{
+				padding: 36rpx 0;
+				border-bottom: 1rpx solid #E7E7E7;
+				.time{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #989998;
+					line-height: 24rpx;
+				}
+				.content{
+					margin-top: 36rpx;
+					.left{
+						flex: 1;
+						image{
+							width: 64rpx;
+							height: 64rpx;
+						}
+						.texts{
+							margin-left: 20rpx;
+							.p{
+								font-family: PingFangSC, PingFang SC;
+								font-weight: 400;
+								font-size: 32rpx;
+								color: #151B29;
+								line-height: 32rpx;
+								&.tip{
+									font-size: 24rpx;
+									color: #676775;
+									line-height: 24rpx;
+									margin-top: 20rpx;
+								}
+							}
+						}
+					}
+					.right{
+						width: 200rpx;
+						justify-content: flex-end;
+						image{
+							width: 24rpx;
+							height: 22rpx;
+							margin-right: 10rpx;
+						}
+						text{
+							font-family: DINAlternate, DINAlternate;
+							font-weight: bold;
+							font-size: 36rpx;
+							line-height: 42rpx;
+							&.black{
+								color: #151B29;
+							}
+							&.red{
+								color: #F4657A;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>