个人中心

src/api/user.js

@@ -27,3 +27,13 @@ export function registerUser(data) {
 export function GetUserList_ID(data) {
   return http.post(`${process.env.VUE_APP_EepServer}?MethodName=user_manager-GetUserList_ID`, data);
 }
+
+// 得到我的用户信息
+export function getMyUserInfo() {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=user_manager-GetMyUserInfo`);
+}
+
+// 更改我的用户密码
+export function updatePwd(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=user_manager-UpdateMyUserPassword`,data);
+}

src/views/personal_center/index.vue

@@ -1,14 +1,291 @@
 <template>
-  <div class="personal-center"></div>
+  <div class="personal-center">
+    <div class="personal-box" v-if="info">
+      <div class="personal-item">
+        <label>用户名：</label>
+        <span>{{ info.user_name }}</span>
+      </div>
+      <div class="personal-item">
+        <label>真实姓名：</label>
+        <span>{{ info.real_name }}</span>
+      </div>
+      <div class="personal-item">
+        <label>邮箱：</label>
+        <span>{{ info.email }}</span>
+      </div>
+      <div class="personal-item">
+        <label>电话：</label>
+        <span>{{ info.phone }}</span>
+      </div>
+      <div class="personal-item">
+        <label>所属机构：</label>
+        <span>{{ info.org_name }}</span>
+      </div>
+      <div class="personal-item">
+        <label>身份：</label>
+        <span>{{ info.role }}</span>
+      </div>
+      <div class="personal-item">
+        <label>注册时间：</label>
+        <span>{{ info.register_time }}</span>
+      </div>
+      <div class="personal-item">
+        <label>密码：</label>
+        <span>******</span>
+        <el-button type="primary" size="mini" @click="handleChangePwd">更改密码</el-button>
+      </div>
+    </div>
+    <el-dialog
+      title="更改密码"
+      :visible="changePwdFlag"
+      width="500px"
+      :close-on-click-modal="false"
+      class="audit-dialog"
+      @close="dialogClose"
+    >
+      <el-form ref="personalForm" :model="form" :rules="rules" label-width="100px" inline>
+        <el-form-item prop="password_old" label="原始密码">
+          <el-input
+            v-model="form.password_old"
+            :type="password_type"
+            maxlength="12"
+            @input="trimInput('password_old')"
+            style="width: 334px"
+          />
+          <img
+            v-show="password_type == 'password'"
+            :class="['rightimg']"
+            src="@/assets/password1.png"
+            alt=""
+            @click="lookParssowrd(0)"
+          />
+          <img
+            v-show="password_type == 'text'"
+            :class="['rightimg']"
+            src="@/assets/password2.png"
+            alt=""
+            @click="lookParssowrd(0)"
+          />
+        </el-form-item>
+        <el-form-item prop="password_new" label="修改密码">
+          <el-input
+            v-model="form.password_new"
+            :type="two_password_type"
+            maxlength="12"
+            @change="changeParssword"
+            @input="trimInput('password_new')"
+          />
+          <img
+            v-show="two_password_type == 'password'"
+            :class="['rightimg']"
+            src="@/assets/password1.png"
+            alt=""
+            @click="lookParssowrd(1)"
+          />
+          <img
+            v-show="two_password_type == 'text'"
+            :class="['rightimg']"
+            src="@/assets/password2.png"
+            alt=""
+            @click="lookParssowrd(1)"
+          />
+          <p :class="password_rrror ? 'textRed' : 'psswordHint'">请输入8-12位大写字母、小写字母和数字组合。</p>
+        </el-form-item>
+        <el-form-item prop="password_new_confirm" label="再次输入">
+          <el-input
+            v-model="form.password_new_confirm"
+            :type="two_password_confirm_type"
+            maxlength="12"
+            @change="changetowpassword"
+            @input="trimInput('password_new_confirm')"
+          />
+          <img
+            v-show="two_password_confirm_type == 'password'"
+            :class="['rightimg']"
+            src="@/assets/password1.png"
+            alt=""
+            @click="lookParssowrd(2)"
+          />
+          <img
+            v-show="two_password_confirm_type == 'text'"
+            :class="['rightimg']"
+            src="@/assets/password2.png"
+            alt=""
+            @click="lookParssowrd(2)"
+          />
+          <p :class="two_password_error ? 'textRed' : 'psswordHint'">请再次输入密码。这两项必须相同。</p>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="dialogClose">取消</el-button>
+        <el-button type="primary" :loading="submit_loading" @click="sureChangePwd"> 确定 </el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import { getMyUserInfo, updatePwd } from '@/api/user';
 export default {
   name: 'PersonalCenter',
   data() {
-    return {};
+    return {
+      info: null,
+      changePwdFlag: false, // 更改密码弹窗
+      submit_loading: false,
+      form: {
+        password_old: '', // 旧密码
+        password_new: '', // 新密码
+        password_new_confirm: '', // 再次输入
+      },
+      rules: {
+        password_old: [
+          {
+            required: true,
+            message: '请输入旧密码',
+            trigger: 'blur',
+          },
+        ],
+        password_new: [
+          {
+            required: true,
+            message: '请输入新密码',
+            trigger: 'blur',
+          },
+        ],
+        password_new_confirm: [
+          {
+            required: true,
+            message: '请再次输入密码',
+            trigger: 'blur',
+          },
+        ],
+      },
+      password_type: 'password',
+      two_password_type: 'password',
+      two_password_confirm_type: 'password',
+      password_rrror: false,
+      two_password_error: false,
+    };
+  },
+  methods: {
+    // 获取信息
+    getInfo() {
+      getMyUserInfo().then((res) => {
+        if (res.status === 1) {
+          this.info = res.user_info;
+        }
+      });
+    },
+    // 点击修改密码按钮
+    handleChangePwd() {
+      this.changePwdFlag = true;
+    },
+    dialogClose() {
+      this.changePwdFlag = false;
+      this.$refs.personalForm.resetFields();
+      this.password_type = 'password';
+      this.two_password_type = 'password';
+      this.two_password_confirm_type = 'password';
+      this.password_rrror = false;
+      this.two_password_error = false;
+    },
+    // 确定修改密码
+    sureChangePwd() {
+      this.$refs.personalForm.validate((valid) => {
+        if (valid) {
+          if (this.form.password_new !== this.form.password_new_confirm) {
+            this.$message.warning('两次密码不一致');
+            return;
+          }
+          if (this.password_rrror) {
+            this.$message.warning('密码格式不正确');
+            return;
+          }
+          this.submit_loading = true;
+          updatePwd({
+            password_old: this.form.password_old,
+            password_new: this.form.password_new,
+          })
+            .then((res) => {
+              this.submit_loading = false;
+              if (res.status === 1) {
+                this.changePwdFlag = false;
+                this.$message.success('更改成功!');
+                setTimeout(() => {
+                  this.$store.dispatch('user/signOut');
+                  this.$router.push('/login');
+                }, 1000);
+
+                // this.$refs.personalForm.resetFields();
+                // this.password_type = 'password';
+                // this.two_password_type = 'password';
+                // this.two_password_confirm_type = 'password';
+                // this.password_rrror = false;
+                // this.two_password_error = false;
+              }
+            })
+            .catch(() => {
+              this.submit_loading = false;
+            });
+        } else {
+          return;
+        }
+      });
+    },
+    // 查看密码
+    lookParssowrd(number) {
+      if (number === 0) {
+        if (this.password_type === 'text') {
+          this.password_type = 'password';
+        } else {
+          this.password_type = 'text';
+        }
+      } else if (number === 1) {
+        if (this.two_password_type === 'text') {
+          this.two_password_type = 'password';
+        } else {
+          this.two_password_type = 'text';
+        }
+      } else {
+        if (this.two_password_confirm_type === 'text') {
+          this.two_password_confirm_type = 'password';
+        } else {
+          this.two_password_confirm_type = 'text';
+        }
+      }
+    },
+    // 验证密码
+    changeParssword() {
+      if (this.form.password_new) {
+        // let reg = /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{8,12}$/;
+        let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{8,12}$/;
+        let result = reg.test(this.form.password_new);
+        if (result) {
+          this.password_rrror = false;
+        } else {
+          this.password_rrror = true;
+        }
+      }
+    },
+    // 验证第二次密码是否一样
+    changetowpassword() {
+      if (this.form.password_new_confirm) {
+        if (this.form.password_new_confirm !== this.form.password_new) {
+          this.two_password_error = true;
+          return;
+        }
+        this.two_password_error = false;
+      }
+    },
+    // 去除空格
+    trimInput(key) {
+      this.form[key] = this.form[key].trim();
+    },
+  },
+  created() {
+    this.getInfo();
   },
-  methods: {},
 };
 </script>
 
@@ -17,5 +294,61 @@ export default {
 
 .personal-center {
   @include page-base;
+
+  .personal-box {
+    width: 900px;
+    padding: 50px 20px;
+    margin: 0 auto;
+
+    .personal-item {
+      display: flex;
+      align-items: center;
+      margin: 15px 0;
+
+      label {
+        width: 120px;
+        text-align: right;
+      }
+
+      .el-button {
+        margin-left: 30px;
+      }
+    }
+  }
+
+  .rightimg {
+    position: absolute;
+    top: 6px;
+    right: 10px;
+    width: 20px;
+    cursor: pointer;
+
+    &.posLeft {
+      right: auto;
+      left: 10px;
+    }
+  }
+
+  .psswordHint {
+    width: 334px;
+    padding: 0;
+    margin: 0;
+    margin-top: 5px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #000;
+    opacity: 0.3;
+  }
+
+  .textRed {
+    width: 334px;
+    padding: 0;
+    margin: 0;
+    margin-top: 5px;
+    font-size: 14px;
+    line-height: 20px;
+    color: red;
+    opacity: 1;
+  }
 }
 </style>