build

src/layout/components/Navbar.vue

@@ -74,7 +74,7 @@
           <router-link to="/person/change-phone">
             <el-dropdown-item>更换手机号</el-dropdown-item>
           </router-link> -->
-          <el-dropdown-item @click.native="$router.push('/person/change-password')">
+          <el-dropdown-item @click.native="visible = true">
             <span style="display: block">修改密码</span>
           </el-dropdown-item>
           <el-dropdown-item @click.native="logout">

src/layout/components/password-modal/index.vue

@@ -1,58 +1,58 @@
 <template>
-  <el-dialog :visible.sync="_visible" title="设置新登录密码" center append-to-body :close-on-click-modal="false" @close="_visible = false">
+  <el-dialog width="460px" :visible.sync="_visible" title="设置新登录密码" center append-to-body :close-on-click-modal="false" @close="_visible = false">
     <el-form
-          ref="loginForm"
-          :model="loginForm"
-          :rules="loginRules"
-          class="login-form"
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+      autocomplete="on"
+      label-position="left"
+      label-width="100px"
+    >
+      <el-form-item prop="oldPassword" label="旧密码：">
+        <el-input
+          ref="oldPassword"
+          v-model="loginForm.oldPassword"
+          placeholder="旧密码"
+          name="oldPassword"
+          type="password"
+          tabindex="1"
+          maxlength="16"
           autocomplete="on"
-          label-position="right"
-          label-width="100px"
-        >
-          <el-form-item prop="oldPassword" label="旧密码：">
-            <el-input
-              ref="oldPassword"
-              v-model="loginForm.oldPassword"
-              placeholder="旧密码"
-              name="oldPassword"
-              type="password"
-              tabindex="1"
-              maxlength="16"
-              autocomplete="on"
-            />
-          </el-form-item>
-          <el-form-item prop="newPassword" label="新密码：">
-            <el-input
-              ref="newPassword"
-              v-model="loginForm.newPassword"
-              placeholder="新密码"
-              name="newPassword"
-              type="password"
-              maxlength="16"
-              tabindex="1"
-              autocomplete="on"
-            />
-          </el-form-item>
-          <el-form-item prop="confirmPassword" label="确认密码：">
-            <el-input
-              ref="confirmPassword"
-              v-model="loginForm.confirmPassword"
-              placeholder="确认密码"
-              name="confirmPassword"
-              type="password"
-              maxlength="16"
-              tabindex="1"
-              autocomplete="on"
-            />
-          </el-form-item>
-          <el-button
-            :loading="loading"
-            type="primary"
-            round
-            style="width: 98%; margin: 0 auto"
-            @click.native.prevent="handleLogin"
-          >确认修改</el-button>
-        </el-form>
+        />
+      </el-form-item>
+      <el-form-item prop="newPassword" label="新密码：">
+        <el-input
+          ref="newPassword"
+          v-model="loginForm.newPassword"
+          placeholder="新密码"
+          name="newPassword"
+          type="password"
+          maxlength="16"
+          tabindex="1"
+          autocomplete="on"
+        />
+      </el-form-item>
+      <el-form-item prop="confirmPassword" label="确认密码：">
+        <el-input
+          ref="confirmPassword"
+          v-model="loginForm.confirmPassword"
+          placeholder="确认密码"
+          name="confirmPassword"
+          type="password"
+          maxlength="16"
+          tabindex="1"
+          autocomplete="on"
+        />
+      </el-form-item>
+      <el-button
+        :loading="loading"
+        type="primary"
+        round
+        style="width: 100%; margin: 0 auto"
+        @click.native.prevent="handleLogin"
+      >确认修改</el-button>
+    </el-form>
   </el-dialog>
 </template>
 
@@ -63,22 +63,12 @@ import resToken from '@/mixins/resToken'
 
 export default {
   name: 'PasswordModal',
+  mixins: [resToken],
   props: {
     visible: {
       type: Boolean
     }
   },
-  computed: {
-    _visible: {
-      get() {
-        return this.visible
-      },
-      set(newVal) {
-        this.$emit('update:visible', newVal)
-      }
-    }
-  },
-  mixins: [resToken],
   data() {
     const validateOldPassword = (rule, value, callback) => {
       if (value === '') {
@@ -154,6 +144,16 @@ export default {
       otherQuery: {}
     }
   },
+  computed: {
+    _visible: {
+      get() {
+        return this.visible
+      },
+      set(newVal) {
+        this.$emit('update:visible', newVal)
+      }
+    }
+  },
 
   methods: {
     async handleLogin() {