首次修改密码

src/modules/portal/views/home/Home.vue

@@ -125,6 +125,62 @@
         </el-tab-pane>
       </el-tabs>
     </el-dialog>
+    <el-dialog
+      title="修改密码"
+      width="500px"
+      :lock-scroll="true"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      :visible.sync="passWeakDialog"
+      @close="() => this.$refs.passWeakForm.clearValidate()"
+    >
+      <el-form
+        :inline="true"
+        inline-message
+        :model="passWeakForm"
+        ref="passWeakForm"
+        :rules="passWeakRules"
+        label-position="right"
+        label-width="80px"
+      >
+        <el-row>
+          <el-form-item label="密码" prop="pass">
+            <el-input
+              type="password"
+              style="width: 150px"
+              v-model="passWeakForm.pass"
+              auto-complete="off"
+              placeholder="请输入密码"
+            />
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="确认密码" prop="checkPass">
+            <el-input
+              type="password"
+              style="width: 150px"
+              v-model="passWeakForm.checkPass"
+              auto-complete="off"
+              placeholder="请输入确认密码"
+            />
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item
+            ><span class="passWeakInfo"
+              >*考虑您账户的安全，请新用户重新输入新密码，以防泄露</span
+            ></el-form-item
+          >
+        </el-row>
+        <el-row style="margin-left:100px">
+          <el-button type="primary" @click="submitPassWeakForm"
+            >确 认</el-button
+          >
+          <el-button @click="logout">取 消</el-button>
+        </el-row>
+      </el-form>
+    </el-dialog>
   </el-container>
 </template>
 
@@ -157,13 +213,40 @@ export default {
         callback();
       }
     };
+    var validatePassWeakPass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入密码"));
+      } else if (value.length < 6) {
+        callback(new Error("密码长度必须大于等于6位"));
+      } else {
+        if (this.passWeakForm.checkPass !== "") {
+          this.$refs.passWeakForm.validateField("checkPass");
+        }
+        callback();
+      }
+    };
+    var validatePassWeakPass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入确认密码"));
+      } else if (value !== this.passWeakForm.pass) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
     return {
       unreadMessageCount: 0,
       userDialog: false,
+      passWeakDialog: false,
       passForm: { pass: "", checkPass: "" },
+      passWeakForm: { pass: "", checkPass: "" },
       passRules: {
         pass: [{ validator: validatePass, trigger: "blur" }],
         checkPass: [{ validator: validatePass2, trigger: "blur" }]
+      },
+      passWeakRules: {
+        pass: [{ validator: validatePassWeakPass, trigger: "blur" }],
+        checkPass: [{ validator: validatePassWeakPass2, trigger: "blur" }]
       }
     };
   },
@@ -216,6 +299,31 @@ export default {
         }
       });
     },
+    submitPassWeakForm() {
+      this.$refs.passWeakForm.validate(valid => {
+        if (valid) {
+          var userId = this.user.userId;
+          var password = encodeURIComponent(this.passWeakForm.pass);
+          var url =
+            CORE_API +
+            "/user/password?userId=" +
+            userId +
+            "&password=" +
+            password;
+          this.$httpWithMsg.put(url).then(() => {
+            this.$notify({
+              type: "success",
+              message: "修改密码成功！"
+            });
+            this.$refs.passWeakForm.resetFields();
+            this.passWeakDialog = false;
+          });
+        } else {
+          console.log("error submit!");
+          return false;
+        }
+      });
+    },
     //重置
     resetForm() {
       this.$refs.passForm.resetFields();
@@ -254,6 +362,11 @@ export default {
           });
         });
     }
+  },
+  created() {
+    if (this.user.passwordWeak) {
+      this.passWeakDialog = true;
+    }
   }
 };
 </script>
@@ -326,4 +439,10 @@ body > .el-container {
   justify-self: flex-end;
   margin-left: -20px;
 }
+.passWeakInfo {
+  color: blue !important;
+}
+.passWeakErr {
+  color: red !important;
+}
 </style>