1. 头像修改密码

src/option/user/info.js

@@ -1,82 +1,89 @@
-export default {
-  tabs: true,
-  tabsActive: 1,
-  column: [{ label: "头像", prop: "avatar",display:false}],
-  group: [
-    {
-      label: "个人信息",
-      prop: "info",
-      column: [
-        {
-          label: "头像",
-          type: "upload",
-          listType: "picture-img",
+// import website from "../../config/website";
+import { Message } from 'element-ui';
+export const userInfoOption = {
+  column: [{
+    label: '头像',
+    prop: 'avatar',
+    type: 'upload',
+    listType: 'picture-img',
     propsHttp: {
-            res: "data",
-            url: "link",
+      res: 'data',
+      url: 'link',
     },
-          canvasOption: {
-            text: " ",
-            ratio: 0.1,
-          },
-          action: "/api/blade-resource/oss/endpoint/put-file",
-          tip: "只能上传jpg/png用户头像，且不超过500kb",
+    fileType: 'img',//img/video/audio,
+    accept: 'image/png, image/jpeg',
+    action: '/api/blade-resource/oss/endpoint/put-file',
+    tip: '只能上传jpg/png用户头像，且不超过500kb',
     span: 12,
     row: true,
-          prop: "avatar",
-        },
-        {
-          label: "姓名",
+    uploadBefore: (file, done, loading) => {
+      if (['image/png', 'image/jpeg'].indexOf(file.type) == -1) {
+        Message({
+          message: '只能上传jpg/png用户头像',
+          type: 'error'
+        });
+        loading();
+      }
+      else {
+        done();
+      }
+    }
+  }, {
+    label: '用户名',
     span: 12,
     row: true,
-          prop: "realName",
-        },
-        {
-          label: "用户名",
+    prop: 'realName'
+  }, {
+    label: '手机号',
     span: 12,
     row: true,
-          prop: "name",
-        },
-        {
-          label: "手机号",
+    prop: 'phone',
+  }, {
+    label: '邮箱',
+    prop: 'email',
     span: 12,
     row: true,
-          prop: "phone",
-        },
-        {
-          label: "邮箱",
-          prop: "email",
+  }]
+}
+export const userPwdOption = {
+  column: [{
+    label: '原密码',
     span: 12,
     row: true,
-        },
-      ],
-    },
-    {
-      label: "修改密码",
-      prop: "password",
-      column: [
-        {
-          label: "原密码",
+    type: 'password',
+    prop: 'oldPassword',
+    rules: [{
+      required: true,
+      message: "请输入原密码",
+      trigger: "blur"
+    }]
+  }, {
+    label: '新密码',
     span: 12,
     row: true,
-          type: "password",
-          prop: "oldPassword",
-        },
-        {
-          label: "新密码",
-          span: 12,
-          row: true,
-          type: "password",
-          prop: "newPassword",
-        },
-        {
-          label: "确认密码",
+    type: 'password',
+    prop: 'newPassword',
+    rules: [{
+      required: true,
+      message: "请输入新密码",
+      trigger: "blur"
+    }]
+  }, {
+    label: '确认密码',
     span: 12,
     row: true,
-          type: "password",
-          prop: "newPassword1",
-        },
-      ],
-    },
-  ],
+    type: 'password',
+    prop: 'newPassword1',
+    rules: [{ validator: validatePass2, trigger: 'blur' }]
+  }]
+}
+
+const validatePass2 = (rule, value, callback) => {
+  if (value === '') {
+    callback(new Error('请再次输入密码'));
+  } else if (value !== this.obj.password) {
+    callback(new Error('两次输入密码不一致!'));
+  } else {
+    callback();
+  }
 };

src/page/index/top/index.vue

@@ -14,7 +14,7 @@
         </div>
       </el-tooltip> -->
       <div class="avatar">
-        <img :src="userInfo.avatar" alt="" width="56px" height="56px" />
+        <img :src="userInfo.avatar" alt="" width="56px" height="56px" style="border-radius:50%;"/>
       </div>
       <!-- <div style="margin-right:10px;">
         {{userInfo.real_name}}
@@ -56,9 +56,6 @@ export default {
     topNotice,
   },
   created() {},
-  mounted() {
-    console.log(this.userInfo);
-  },
   computed: {
     ...mapGetters(["userInfo", "tag"]),
   },

src/store/modules/user.js

@@ -262,6 +262,8 @@ const user = {
       setStore({name: 'tenantId', content: state.tenantId})
     },
     SET_USER_INFO: (state, userInfo) => {
+      console.log(state)
+      console.log(userInfo)
       if (validatenull(userInfo.avatar)) {
         userInfo.avatar = "/img/bg/img-logo.png";
       }

src/views/system/userinfo.vue

@@ -1,75 +1,183 @@
 <template>
   <div>
     <basic-container>
-      <avue-form :option="option"
+      <avue-tabs :option="tabOption" @change="handleTabClick"></avue-tabs>
+      <div v-if="index === 0">
+        <avue-form
+          :option="userInfoOption"
           v-model="form"
-                 @tab-click="handleTabClick"
-                 @submit="handleSubmit"></avue-form>
+          @submit="handleSubmit"
+        ></avue-form>
+      </div>
+      <div v-else-if="index === 1">
+        <avue-form
+          ref="pwdForm"
+          :option="userPwdOption"
+          v-model="pwdform"
+          @submit="handleSubmit2"
+        >
+        </avue-form>
+      </div>
     </basic-container>
   </div>
 </template>
 
 <script>
-  import option from "@/option/user/info";
+import { userInfoOption } from "@/option/user/info";
 import { getUserInfo, updateInfo, updatePassword } from "@/api/system/user";
-  import md5 from 'js-md5';
+import md5 from "js-md5";
 import func from "@/util/func";
-
+import {mapGetters} from "vuex";
 
 export default {
   data() {
+    var validatePass = (rule, value, callback) => {
+      let reg =
+        /^(?=.*\d)(?=.*?[a-z])(?=.*?[A-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{6,18}$/;
+      if (value === "") {
+        callback(new Error("请输入新密码"));
+      } else if (!reg.test(value)) {
+        callback(
+          new Error("必须包含6-18位数字、大小写字母、特殊字符，不包含下划线")
+        );
+      } else {
+        callback();
+      }
+    };
+    var validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.pwdform.newPassword) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
     return {
       index: 0,
-        option: option,
-        form: {}
+      tabOption: {
+        column: [
+          {
+            label: "个人信息",
+            prop: "0",
+          },
+          {
+            label: "修改密码",
+            prop: "1",
+          },
+        ],
+      },
+      userInfoOption: userInfoOption,
+      userPwdOption: {
+        column: [
+          {
+            label: "原密码",
+            span: 12,
+            row: true,
+            prop: "oldPassword",
+            name: "oldPassWord",
+            rules: [
+              {
+                required: true,
+                message: "请输入原密码",
+                trigger: "blur",
+              },
+            ],
+          },
+          {
+            label: "新密码",
+            span: 12,
+            row: true,
+            type: "password",
+            prop: "newPassword",
+            rules: [
+              {
+                required: true,
+                message: "请输入新密码",
+                trigger: "blur",
+              },
+            ],
+          },
+          {
+            label: "确认密码",
+            span: 12,
+            row: true,
+            type: "password",
+            prop: "newPassword1",
+            rules: [
+              {
+                required: true,
+                message: "请输入确认密码",
+                trigger: "blur",
+              },
+              { validator: validatePass2, trigger: "blur" },
+            ],
+          },
+        ],
+      },
+      form: {},
+      pwdform: {},
     };
   },
   created() {
     this.handleWitch();
+  },
+    computed: {
+    ...mapGetters(["userInfo"]),
   },
   methods: {
     handleSubmit(form, done) {
-        if (this.index === 0) {
-          updateInfo(form).then(res => {
+      updateInfo(form).then(
+        (res) => {
           if (res.data.success) {
             this.$message({
               type: "success",
-                message: "修改信息成功!"
+              message: "修改信息成功!",
             });
+            this.handleWitch()
           } else {
             this.$message({
               type: "error",
-                message: res.data.msg
+              message: res.data.msg,
             });
           }
           done();
-          }, error => {
+        },
+        (error) => {
           window.console.log(error);
           done();
-          })
-        } else {
-          updatePassword(md5(form.oldPassword), md5(form.newPassword), md5(form.newPassword1)).then(res => {
+        }
+      );
+    },
+    handleSubmit2(form, done) {
+      updatePassword(
+        md5(form.oldPassword),
+        md5(form.newPassword),
+        md5(form.newPassword1)
+      ).then(
+        (res) => {
           if (res.data.success) {
             this.$message({
               type: "success",
-                message: "修改密码成功!"
+              message: "修改密码成功!",
             });
           } else {
             this.$message({
               type: "error",
-                message: res.data.msg
+              message: res.data.msg,
             });
           }
           done();
-          }, error => {
+        },
+        (error) => {
           window.console.log(error);
           done();
-          })
         }
+      );
     },
     handleWitch() {
       if (this.index === 0) {
-          getUserInfo().then(res => {
+        getUserInfo().then((res) => {
           const user = res.data.data;
           this.form = {
             id: user.id,
@@ -78,17 +186,23 @@
             realName: user.realName,
             phone: user.phone,
             email: user.email,
-            }
+          };
+          this.$store.commit("SET_USER_INFO", {
+           avatar: user.avatar,
+           real_name: user.realName,
+          });
         });
       }
     },
     handleTabClick(tabs) {
-        this.index = func.toInt(tabs.index);
-        this.handleWitch();
-      }
+      if (tabs.prop != "1") {
+        this.$refs.pwdForm.resetForm();
       }
+      this.index = func.toInt(tabs.prop);
+      this.handleWitch();
+    },
+  },
 };
 </script>
 
-<style>
-</style>
+<style></style>