update

src/components/pages/data.vue

@@ -31,7 +31,12 @@
             </div>
           </div> -->
         </div>
+        <div class="data_nav">
+          <span @click="type = 1" :class="{ active: type == 1 }">我的资料</span>
+          <span @click="type = 2" :class="{ active: type == 2 }">修改密码</span>
+        </div>
         <el-form
+          v-if="type == 1"
           :model="ruleForm"
           :rules="rules"
           ref="ruleForm"
@@ -140,6 +145,30 @@
             >
           </el-form-item>
         </el-form>
+        <div class="password" v-if="type == 2">
+          <div class="input_box">
+            <span>原密码</span>
+            <el-input
+              class="input"
+              v-model="opassword"
+              placeholder="请输入原密码"
+            ></el-input>
+          </div>
+          <div class="input_box">
+            <span>修改密码</span>
+            <el-input
+              class="input"
+              v-model="password"
+              placeholder="请输入修改密码"
+            ></el-input>
+          </div>
+          <div class="input_box">
+            <span></span>
+            <div class="input">
+              <el-button type="primary" @click="updatePassword">修改</el-button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -169,6 +198,7 @@ export default {
       }
     };
     return {
+      type: 1,
       ruleForm: {
         name: "",
         type: "",
@@ -180,6 +210,8 @@ export default {
         org: "",
         headportrait: "",
       },
+      opassword: "",
+      password: "",
       tx: require("../../assets/avatar.png"),
       userinfo: "",
       schoolJuri: [],
@@ -287,7 +319,9 @@ export default {
           if (res.data[0][0]) {
             res.data[0][0].sex = res.data[0][0].sex ? "女" : "男";
             this.ruleForm = res.data[0][0];
-            this.ruleForm.org = res.data[0][0].org ? res.data[0][0].org.split(",")[0] : '';
+            this.ruleForm.org = res.data[0][0].org
+              ? res.data[0][0].org.split(",")[0]
+              : "";
             this.ruleForm.type = res.data[0][0].type == 1 ? "老师" : "学生";
             console.log(res.data[0][0]);
           }
@@ -296,6 +330,34 @@ export default {
           console.error(err);
         });
     },
+    updatePassword() {
+      if (this.password.length < 6) {
+        this.$message.error("密码长度不少于6位");
+        return;
+      }
+      let params = [
+        {
+          userid: this.userid,
+          opassword: this.opassword,
+          password: this.password,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "updatePassword", params)
+        .then((res) => {
+          if (res.data[0] && res.data[0].success == 1) {
+            this.$message.success("修改成功");
+            this.opassword = "";
+            this.password = "";
+          } else {
+            this.$message.error("修改失败,原密码不正确");
+          }
+        })
+        .catch((err) => {
+          this.$message.error("修改失败");
+          console.error(err);
+        });
+    },
   },
   created() {
     this.getSchool();
@@ -317,7 +379,7 @@ export default {
 }
 .tx {
   width: 100px;
-  margin-right: 15px;
+  /* margin-right: 15px; */
   min-width: 50px;
   min-height: 50px;
 }
@@ -368,4 +430,56 @@ export default {
 .demo-ruleForm >>> .el-form-item__content {
   width: 300px;
 }
+
+.data_nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 10px 0;
+}
+
+.data_nav span {
+  box-sizing: border-box;
+  padding: 8px 5px;
+  cursor: pointer;
+  color: #444444;
+  height: 35px;
+}
+
+.data_nav span + span {
+  margin-left: 10px;
+}
+
+.data_nav .active {
+  color: #4aa3ff;
+  border-bottom: 2px solid #409eff;
+}
+
+.password {
+  height: 511px;
+  padding: 50px 0 0 0;
+  box-sizing: border-box;
+  /* display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column; */
+}
+.input_box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.input_box span {
+  width: 100px;
+  font-size: 14px;
+  text-align: right;
+  padding: 0 12px 0 0;
+}
+.input_box .input {
+  width: 300px;
+}
+.input_box + .input_box {
+  margin-top: 20px;
+}
 </style>