| 
				
				
				
				 | 
			
			 | 
			@@ -1,37 +1,94 @@ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			<template> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  <div class="page flex"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  <div class="page"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    <div>用户名</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    <el-form | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      id="ruleForm" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      ref="ruleFormRef" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      :rules="rules" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      :label-position="labelPosition" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      label-width="100px" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      :model="formLabelAlign" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      style="max-width: 460px" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      label-width="120px" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      :model="formData" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      style="max-width: 500px" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    > | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <el-form-item label="Name"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <el-input v-model="formLabelAlign.name" /> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <el-form-item label="旧密码" prop="oldPassword"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <el-input v-model="formData.oldPassword" /> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      </el-form-item> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <el-form-item label="Activity zone"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <el-input v-model="formLabelAlign.region" /> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <el-form-item label="新密码" prop="newPassword"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <el-input v-model="formData.newPassword" /> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      </el-form-item> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <el-form-item label="Activity form"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <el-input v-model="formLabelAlign.type" /> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <el-form-item label="再次输入新密码" prop="newPassword2"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <el-input v-model="formData.newPassword2" /> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      </el-form-item> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <el-form-item> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <el-button type="primary" @click="submitForm(ruleFormRef)" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          >确认修改</el-button | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        > | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      </el-form-item> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    </el-form> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			</template> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			<script setup> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const labelPosition = ref("right"); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import { ref, reactive } from "vue"; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const formLabelAlign = reactive({ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  name: "", | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  region: "", | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  type: "", | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const labelPosition = ref("right"); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const formData = reactive({ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  oldPassword: "", | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  newPassword: "", | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  newPassword2: "", | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			}); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const validateNewPass = (rule, value, callback) => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  // 自定义校验规则,例如密码必须包含数字和字母 | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  if (!/^(?=.*[a-zA-Z])(?=.*\d).{8,}$/.test(value)) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    callback(new Error("密码必须包含数字和字母,且至少8位")); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  } else { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    callback(); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			}; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const validateNewPass2 = (rule, value, callback) => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  if (value !== formData.newPassword) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    callback(new Error("两次输入的新密码不一致")); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  } else { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    callback(); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			}; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const rules = { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  oldPassword: [ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    { required: true, message: "请输入旧密码", trigger: "blur" }, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    { validator: validateNewPass, trigger: "blur" }, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  ], | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  newPassword: [ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    { required: true, message: "请输入新密码", trigger: "blur" }, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    { validator: validateNewPass, trigger: "blur" }, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  ], | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  newPassword2: [ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    { required: true, message: "请再次输入新密码", trigger: "blur" }, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    { validator: validateNewPass2, trigger: "blur" }, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  ], | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			}; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const ruleFormRef = ref(); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			// 点击提交 | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const submitForm = async (formEl) => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  if (!formEl) return; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  await formEl.validate((valid) => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    if (valid) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      console.log("submit!"); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    } else { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      console.log("error submit!"); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  }); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			}; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			</script> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			<style lang="scss" scoped> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			<style scoped> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			.page { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  height: 887px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  padding: 20px 0 0 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  // height: calc(100vh - 84px); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  background-color: #fff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  border-radius: 25px 0 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			} | 
		
		
	
	
		
			
				| 
				
				
				
				 | 
			
			 | 
			
  |