SxsnWechat/pagesMy/information.vue

<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>