ygoa_miniapp/pages/mine/edit/edit.vue

<template>
	<view class="container">
		<!-- 手机号码输入框 -->
		<!-- <view class="input-group">
			<text>手机号码：</text>
			<input type="number" maxlength="11" v-model="userInfo.desktopPhone" placeholder="请输入手机号码" />
		</view> -->

		<!-- 邮箱输入框 -->
		<!-- <view class="input-group">
			<text>邮箱：</text>
			<input type="text" v-model="userInfo.mail" placeholder="请输入邮箱地址" />
		</view> -->
		
		<!-- qq输入框 -->
		<view class="input-group">
			<text>qq：</text>
			<input type="text" v-model="userInfo.qq" placeholder="请输入qq" />
		</view>
		
		<!-- msn输入框 -->
		<view class="input-group">
			<text>msn：</text>
			<input type="text" v-model="userInfo.msn" placeholder="请输入msn" />
		</view>

		<!-- 用户生日输入框 -->
		<!-- <view class="input-group">
			<text>用户生日：</text>
			<view class="example-body">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="userInfo.birthday" @maskClick="maskClick" />
			</view>
		</view> -->
		
		<!-- 性别选择器 -->
		<!-- <view class="sex-selector">
			<radio-group @change="handleGenderChange">
				<text>性别：</text>
				<view class="sexLabel">
					<label>
						<radio value="M" :checked="userInfo.sex === 'M' " />男
					</label>
					<label>
						<radio value="F" :checked="userInfo.sex === 'F'" />女
					</label>
				</view>
			</radio-group>
		</view> -->

		<!-- 提交按钮 -->
		<view class="primaryBtn">
			<button type="primary" @click="handleSubmit">提交</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import { useUserStore } from '@/store/user';
	import { ModifyMe } from '@/api/mine';
	import $modal from '@/plugins/modal.js'
	// 定义用户信息的响应式对象
	const thisUser=useUserStore().user;
	let userInfo = reactive({
		staffId:thisUser.useId,
		// desktopPhone: thisUser.desktopPhone,
		// mail: thisUser.email,
		// sex: thisUser.sex,
		// birthday: thisUser.birthday,
		qq:thisUser.qqnum,
		msn:thisUser.msnnum
	});
	
	
	// function handleGenderChange(event) {
	// 	userInfo.sex = event.detail.value; // 更新性别
	// };
	
	// // 校验手机号码格式
	// function validatePhone(desktopPhone) {
	// 	const desktopPhoneRegex = /^1[3-9]\d{9}$/; // 手机号码格式正则（以1开头，11位数字）
	// 	return desktopPhoneRegex.test(desktopPhone);
	// }

	// // 校验邮箱格式
	// function validateEmail(mail) {
	// 	const mailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; // 邮箱格式正则
	// 	return mailRegex.test(mail);
	// }

	// 处理提交事件
	function handleSubmit() {
		// if (!validatePhone(userInfo.desktopPhone)) {
		// 	uni.showToast({
		// 		title: '手机号码格式不正确',
		// 		icon: 'none'
		// 	});
		// 	return; // 终止提交
		// }
		
		// if (!validateEmail(userInfo.mail)) {
		// 	uni.showToast({
		// 		title: '邮箱格式不正确',
		// 		icon: 'none'
		// 	});
		// 	return; // 终止提交
		// }
		ModifyMe(userInfo).then(res=>{
			// console.log(res);
			if("success"==res.returnMsg){
				$modal.showToast('修改成功');
				useUserStore().GetInfo().then(res=>{
					console.log("GetInfo",res);
				})
			}
			
		})

		
	}

</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
	}

	.input-group {
		margin-bottom: 10rpx;
	}

	.input-group input,
	.sexLabel {
		padding-left: 20rpx;
		margin: 20rpx auto;
		height: 70rpx;
	}

	.input-group input {
		border: 1rpx solid gainsboro; /* 修改边框样式 */
		background-color: white;
	}

	.input-group text {
		display: block;
		margin-bottom: 20rpx;
	}

	.sex-selector label {
		margin-right: 15rpx;
	}

	.primaryBtn {
		margin-top: 70rpx;
	}
</style>