|
|
@@ -29,7 +29,7 @@
|
|
|
<span
|
|
|
@click="updatePass()"
|
|
|
style="cursor: pointer; color: #ffffff; font-size: 12px"
|
|
|
- >修改密码</span
|
|
|
+ >个人中心</span
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -294,46 +294,123 @@
|
|
|
</el-row>
|
|
|
|
|
|
<el-dialog
|
|
|
- title="修改密码"
|
|
|
+ title="个人中心"
|
|
|
:visible.sync="centerDialogPass"
|
|
|
width="45%"
|
|
|
center
|
|
|
>
|
|
|
- <el-form
|
|
|
- :model="ruleForm"
|
|
|
- :rules="rules"
|
|
|
- ref="ruleForm"
|
|
|
- label-width="100px"
|
|
|
- class="demo-ruleForm"
|
|
|
- >
|
|
|
- <el-form-item label="旧密码" prop="oldPass">
|
|
|
- <el-input
|
|
|
- type="password"
|
|
|
- v-model="ruleForm.oldPass"
|
|
|
- autocomplete="off"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="新密码" prop="pass">
|
|
|
- <el-input
|
|
|
- type="password"
|
|
|
- v-model="ruleForm.pass"
|
|
|
- autocomplete="off"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="确认密码" prop="checkPass">
|
|
|
- <el-input
|
|
|
- type="password"
|
|
|
- v-model="ruleForm.checkPass"
|
|
|
- autocomplete="off"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="centerDialogPass = false">取 消</el-button>
|
|
|
- <el-button type="primary" @click="submitForm('ruleForm')"
|
|
|
- >确 定</el-button
|
|
|
- >
|
|
|
- </span>
|
|
|
+ <el-tabs type="border-card">
|
|
|
+ <el-tab-pane label="个人信息">
|
|
|
+ <div>
|
|
|
+ <el-form
|
|
|
+ :model="ruleUserForm"
|
|
|
+ :rules="userRules"
|
|
|
+ ref="ruleUserForm"
|
|
|
+ label-width="100px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ >
|
|
|
+ <el-form-item label="昵称" prop="name">
|
|
|
+ <el-input
|
|
|
+ type="text"
|
|
|
+ v-model="ruleUserForm.name"
|
|
|
+ placeholder="请输入昵称"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="编号" prop="num">
|
|
|
+ <el-input
|
|
|
+ type="password"
|
|
|
+ v-model="ruleUserForm.num"
|
|
|
+ placeholder="请输入编号"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="年龄" prop="age">
|
|
|
+ <el-input
|
|
|
+ type="age"
|
|
|
+ v-model="ruleUserForm.age"
|
|
|
+ placeholder="请输入年龄"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="单位" prop="unit">
|
|
|
+ <el-input
|
|
|
+ type="unit"
|
|
|
+ v-model="ruleUserForm.unit"
|
|
|
+ placeholder="请输入单位"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="性别" class="registerInput" prop="sex">
|
|
|
+ <el-select
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="ruleUserForm.sex"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option label="女" value="0"></el-option>
|
|
|
+ <el-option label="男" value="1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="婚恋情况" prop="marriageSituation">
|
|
|
+ <el-select
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="ruleUserForm.marriageSituation"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option label="已婚" value="0"></el-option>
|
|
|
+ <el-option label="未婚" value="1"></el-option>
|
|
|
+ <el-option label="离异" value="2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="updatePassword">
|
|
|
+ <el-button @click="centerDialogPass = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitUserForm('ruleUserForm')"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="密码修改">
|
|
|
+ <div>
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ ref="ruleForm"
|
|
|
+ label-width="100px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ >
|
|
|
+ <el-form-item label="旧密码" prop="oldPass">
|
|
|
+ <el-input
|
|
|
+ type="password"
|
|
|
+ v-model="ruleForm.oldPass"
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="请输入旧密码"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="新密码" prop="pass">
|
|
|
+ <el-input
|
|
|
+ type="password"
|
|
|
+ v-model="ruleForm.pass"
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="请输入新密码"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="确认密码" prop="checkPass">
|
|
|
+ <el-input
|
|
|
+ type="password"
|
|
|
+ v-model="ruleForm.checkPass"
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="请输入确认密码"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="updatePassword">
|
|
|
+ <el-button @click="centerDialogPass = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm('ruleForm')"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -371,6 +448,36 @@ export default {
|
|
|
callback();
|
|
|
}
|
|
|
};
|
|
|
+ var checkName = (rule, value, callback) => {
|
|
|
+ if (!value) {
|
|
|
+ return callback(new Error("不能为空"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var checkNum = (rule, value, callback) => {
|
|
|
+ if (!value) {
|
|
|
+ return callback(new Error("编号不能为空"));
|
|
|
+ } else if (value.length > 20) {
|
|
|
+ return callback(new Error("编号不能超过20位"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var checkUnit = (rule, value, callback) => {
|
|
|
+ if (!value) {
|
|
|
+ return callback(new Error("单位不能为空"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var checkAge = (rule, value, callback) => {
|
|
|
+ if (!value) {
|
|
|
+ return callback(new Error("年龄不能为空"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
return {
|
|
|
//人机对话
|
|
|
rjdhUrl: "rjdh1.png",
|
|
|
@@ -416,9 +523,58 @@ export default {
|
|
|
checkPass: "",
|
|
|
},
|
|
|
rules: {
|
|
|
- oldPass: [{ validator: validateOldPass, trigger: "blur" }],
|
|
|
- pass: [{ validator: validatePass, trigger: "blur" }],
|
|
|
- checkPass: [{ validator: validateCheckPass, trigger: "blur" }],
|
|
|
+ oldPass: [
|
|
|
+ { validator: validateOldPass, trigger: "blur", required: true },
|
|
|
+ ],
|
|
|
+ pass: [{ validator: validatePass, trigger: "blur", required: true }],
|
|
|
+ checkPass: [
|
|
|
+ { validator: validateCheckPass, trigger: "blur", required: true },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ruleUserForm: {
|
|
|
+ name: "",
|
|
|
+ num: "",
|
|
|
+ age: "",
|
|
|
+ unit: "",
|
|
|
+ sex: "男",
|
|
|
+ marriageSituation: "0",
|
|
|
+ },
|
|
|
+ userRules: {
|
|
|
+ name: [
|
|
|
+ {
|
|
|
+ validator: checkName,
|
|
|
+ required: true,
|
|
|
+ message: "请填写昵称",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ num: [
|
|
|
+ {
|
|
|
+ validator: checkNum,
|
|
|
+ required: true,
|
|
|
+ message: "请填写编号",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ unit: [
|
|
|
+ {
|
|
|
+ validator: checkUnit,
|
|
|
+ required: true,
|
|
|
+ message: "请填写单位",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ age: [
|
|
|
+ {
|
|
|
+ validator: checkAge,
|
|
|
+ required: true,
|
|
|
+ message: "请填写年龄",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // marriageSituation: [
|
|
|
+ // { required: true, message: "请填写婚恋情况", trigger: "change" },
|
|
|
+ // ]
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
@@ -522,7 +678,7 @@ export default {
|
|
|
this.yhfkUrl = "yhfk.png";
|
|
|
this.yhfk = true;
|
|
|
this.yhsbUrl = "yhgy.png";
|
|
|
- this.yhsb = true;
|
|
|
+ this.yhsb = true;
|
|
|
}
|
|
|
if (val == "yhsb") {
|
|
|
this.yhsbUrl = "yhgy1.png";
|
|
|
@@ -633,7 +789,57 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ submitUserForm(formName) {
|
|
|
+ let that = this;
|
|
|
+ let num = sessionStorage.getItem("num");
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ //修改个人信息
|
|
|
+ that.$http.post(
|
|
|
+ `v1/user/change/user`,
|
|
|
+ {
|
|
|
+ name: that.ruleUserForm.name,
|
|
|
+ num: that.ruleUserForm.num,
|
|
|
+ unit: that.ruleUserForm.unit,
|
|
|
+ age: that.ruleUserForm.age,
|
|
|
+ sex: that.ruleUserForm.sex,
|
|
|
+ marriageSituation: that.ruleUserForm.marriageSituation,
|
|
|
+ },
|
|
|
+ (res) => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ that.centerDialogPass = false;
|
|
|
+ that.$message.success("修改成功");
|
|
|
+ that.$router.push("/");
|
|
|
+ } else {
|
|
|
+ this.$message.error("访问服务器失败！");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ queryUserInfo() {
|
|
|
+ let that =this;
|
|
|
+ that.$http.post(
|
|
|
+ `v1/user/change/user`,
|
|
|
+ {
|
|
|
+ num: that.ruleUserForm.num,
|
|
|
+ },
|
|
|
+ (res) => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ //修改文本
|
|
|
+ //将data赋予给数据
|
|
|
+ } else {
|
|
|
+ this.$message.error("访问服务器失败！");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
updatePass() {
|
|
|
+ //调用查询用户信息的方法
|
|
|
+ this.queryUserInfo();
|
|
|
this.centerDialogPass = true;
|
|
|
},
|
|
|
//销毁所有定时器
|
|
|
@@ -834,4 +1040,8 @@ ul {
|
|
|
.menu_text_cla {
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
+.updatePassword {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
</style>
|
