优化个人中心表单验证和路由跳转

pages/personal-Center/index/info.vue

@@ -125,7 +125,7 @@
   fetchUserStatistics()
 
   const handleClick = () => {
-    router.push({ path: '/personal-Center/personal-profile' })
+    router.push({ path: '/personal-Center/account-management' })
   }
 
   const payVisible = ref(false)

pages/personal-Center/index/personal-profile.vue

@@ -22,7 +22,7 @@
         <!-- User avatar section -->
 
         <!-- User information section -->
-        <el-form-item label="用户名:" prop="nickname">
+        <el-form-item label="用户名:" prop="nickname" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
           <div class="flex items-center">
             <el-input v-model="userForm.nickname" class="w-[247px]" />
             <el-button type="primary" class="verify-btn" @click="handleVerify">实名认证</el-button>
@@ -36,14 +36,14 @@
           </div>
         </el-form-item> -->
 
-        <el-form-item label="手机号:" prop="phone">
+        <el-form-item label="手机号:" prop="phone" :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }]">
           <div class="flex items-center">
             <el-input v-model="userForm.phone" disabled class="w-[247px]" />
             <!-- <el-link type="primary" class="modify-link">修改</el-link> -->
           </div>
         </el-form-item>
 
-        <el-form-item label="电子邮箱:" prop="email">
+        <el-form-item label="电子邮箱:" prop="email" :rules="[{ required: true, message: '请输入电子邮箱', trigger: 'blur' }]">
           <div class="flex items-center">
             <el-input v-model="userForm.email" placeholder="请输入电子邮箱" class="w-[247px]" />
             <!-- <el-link type="primary" class="modify-link">绑定</el-link> -->
@@ -51,30 +51,30 @@
         </el-form-item>
 
         <div class="flex items-center">
-          <el-form-item label="所在地区:" prop="isDomestic">
+          <el-form-item label="所在地区:" prop="isDomestic" :rules="[{ required: true, message: '请选择所在地区', trigger: 'change' }]">
             <el-select v-model="userForm.isDomestic" placeholder="请选择" class="w-[120px]!" @change="handleCountryChange">
               <el-option label="国内" :value="1"></el-option>
               <el-option label="国外" :value="0"></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label-width="6px" prop="province">
+          <el-form-item label-width="6px" prop="province" :rules="[{ required: true, message: '请选择省份', trigger: 'change' }]">
             <el-select v-model="userForm.province" placeholder="请选择省份" class="w-[120px]!" @change="handleProvinceChange">
               <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id" />
             </el-select>
           </el-form-item>
-          <el-form-item label-width="6px" prop="city">
+          <el-form-item label-width="6px" prop="city" :rules="[{ required: true, message: '请选择城市', trigger: 'change' }]">
             <el-select v-model="userForm.city" placeholder="请选择城市" class="w-[120px]!" @change="handleCityChange">
               <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id" />
             </el-select>
           </el-form-item>
-          <el-form-item label-width="6px" prop="county">
+          <el-form-item label-width="6px" prop="county" :rules="[{ required: true, message: '请选择区县', trigger: 'change' }]">
             <el-select v-model="userForm.county" placeholder="请选择区县" class="w-[120px]!">
               <el-option v-for="item in countyList" :key="item.id" :label="item.name" :value="item.id" />
             </el-select>
           </el-form-item>
         </div>
 
-        <el-form-item label="技能标签:" prop="labels">
+        <el-form-item label="技能标签:" prop="labels" :rules="[{ required: true, message: '请选择技能标签', trigger: 'change' }]">
           <el-select
             v-model="userForm.labels"
             :remote-method="remoteMethod"
@@ -89,7 +89,7 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item label="技能证书:" prop="files">
+        <el-form-item label="技能证书:" prop="files" :rules="[{ required: true, message: '请上传技能证书', trigger: 'change' }]">
           <KlUploader
             v-model:file-list="userForm.files"
             list-type="picture-card"
@@ -104,7 +104,7 @@
           </KlUploader>
         </el-form-item>
 
-        <el-form-item label="个人简介:" prop="description">
+        <el-form-item label="个人简介:" prop="description" :rules="[{ required: true, message: '请输入个人简介', trigger: 'blur' }]">
           <el-input v-model="userForm.description" type="textarea" :rows="5" placeholder="请输入个人简介" class="full-width" />
         </el-form-item>