个人资料静态页画写完成

pages.json

@@ -51,6 +51,12 @@
 		{
 			"root": "pagesMy",
 			"pages": [
+				{
+					"path": "information",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				},
 				{
 					"path": "heartNumber",
 					"style": {

pages/my.vue

@@ -14,7 +14,7 @@
 						<div class="text-bottom" v-else @tap="showLogin">去登录注册&nbsp;>></div>
 					</div>
 				</div>
-				<div class="info-top-right">
+				<div class="info-top-right" @tap="handleTurnPage('/pagesMy/information')">
 					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/17/d0319d8d-1445-47d6-94fa-cb934e022ab8.png"></image>
 				</div>
 			</div>

pagesMy/information.vue

@@ -0,0 +1,192 @@
+<template>
+	<view class="common_page" :style="{'height':h+'px', 'padding-top':mt+'px'}">
+		<cus-header title="个人资料" bgColor="#FFFFFF"></cus-header>
+		<div class="form">
+			<div class="avatar">
+				<div class="title">头像</div>
+				<div class="imgbox">
+					<up-upload
+						:fileList="fileList"
+						@afterRead="afterRead"
+						@delete="deletePic"
+						multiple
+						:maxCount="1"
+						width="122rpx"
+						height="122rpx"
+					>
+						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/b04d6b0e-0d30-4043-a2b1-d639e15e2aac.png" 
+						mode="widthFix" style="width: 122rpx;height: 122rpx;"></image>
+					</up-upload>
+				</div>
+			</div>
+			<div class="item adfacjb">
+				<div class="left">用户名</div>
+				<div class="right">
+					<up-input v-model="userInfo.username" border="none" placeholder="请输入用户名"></up-input>
+				</div>
+			</div>
+			<div class="item adfacjb">
+				<div class="left">手机号码</div>
+				<div class="right">
+					<up-input v-model="userInfo.phone" border="none" placeholder="请输入手机号码"></up-input>
+				</div>
+			</div>
+			<div class="item adfacjb">
+				<div class="left">家庭公益名称</div>
+				<div class="right">
+					<up-input v-model="userInfo.nonprofitName" border="none" placeholder="请输入家庭公益名称"></up-input>
+				</div>
+			</div>
+			<div class="item adfacjb">
+				<div class="left">家庭公益口号</div>
+				<div class="right">
+					<up-input v-model="userInfo.nonprofitNo" border="none" placeholder="请输入家庭公益口号"></up-input>
+				</div>
+			</div>
+		</div>
+		<div class="btn" @tap="save">保存</div>
+	</view>
+</template>
+
+<script setup name="">
+	import CusHeader from '@/components/CusHeader/index.vue'
+	import { ref, onMounted, getCurrentInstance } from 'vue'
+	const { proxy } = getCurrentInstance()
+	
+	const fileList = ref([])
+	const userInfo = ref({
+		avatar:'',
+		username:'',
+		phone:'',
+		nonprofitName:'',
+		nonprofitNo:''
+	})
+	
+	const save = () => {
+		if(!userInfo.value.avatar) return proxy.$showToast('请上传用户头像')
+		if(!userInfo.value.username) return proxy.$showToast('请输入用户名')
+		if(!proxy.$reg.mobile(userInfo.value.phone)) return proxy.$showToast('请输入正确的手机号')
+		if(!userInfo.value.nonprofitName) return proxy.$showToast('请输入家庭公益名称')
+		if(!userInfo.value.nonprofitNo) return proxy.$showToast('请输入家庭公益口号')
+		console.log(userInfo.value,'userInfo');
+	}
+	
+	const deletePic = (event) => {
+	  fileList.value.splice(event.index, 1);
+	};
+	
+	// 新增图片
+	const afterRead = async (event) => {
+	  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
+	  let lists = [].concat(event.file);
+	  let fileListLen = fileList.value.length;
+	  lists.map((item) => {
+	    fileList.value.push({
+	      ...item,
+	      status: 'uploading',
+	      message: '上传中',
+	    });
+	  });
+	  for (let i = 0; i < lists.length; i++) {
+	    const result = await uploadFilePromise(lists[i].url);
+	    let item = fileList.value[fileListLen];
+	    fileList.value.splice(fileListLen, 1, {
+	      ...item,
+	      status: 'success',
+	      message: '',
+	      url: result,
+	    });
+	    fileListLen++;
+	  }
+	};
+	
+	const uploadFilePromise = (url) => {
+	  return new Promise((resolve, reject) => {
+	    let a = uni.uploadFile({
+	      url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
+	      filePath: url,
+	      name: 'file',
+	      formData: {
+	        user: 'test',
+	      },
+	      success: (res) => {
+	        setTimeout(() => {
+	          resolve(res.data.data);
+	        }, 1000);
+	      },
+	    });
+	  });
+	};
+	
+	onMounted(()=>{
+		
+	})
+</script>
+
+<style scoped lang="scss">
+	::v-deep .u-input__content input{
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		font-size: 30rpx !important;
+		color: #252525 !important;
+		line-height: 42rpx !important;
+		text-align: right !important;
+	}
+	
+	.common_page{
+		.form{
+			background: #FFFFFF;
+			border-radius: 24rpx;
+			padding: 14rpx 22rpx 0;
+			margin-top: 20rpx;
+			
+			.avatar{
+				.title{
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 30rpx;
+					color: #252525;
+					line-height: 42rpx;
+				}
+				.imgbox{
+					padding: 34rpx 0 47rpx;
+				}
+				border-bottom: 1rpx solid #E6E6E6;
+			}
+			.item{
+				height: 110rpx;
+				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E6E6E6;
+				.left{
+					width: 200rpx;
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 30rpx;
+					color: #252525;
+					line-height: 42rpx;
+					padding-right: 20rpx;
+					box-sizing: border-box;
+				}
+				.right{
+					width: calc(100% - 200rpx);
+				}
+			}
+		}
+		
+		.btn{
+			width: calc(100% - 80rpx);
+			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;
+			position: fixed;
+			left: 40rpx;
+			bottom: 64rpx;
+		}
+	}
+</style>