顶部修改密码

src/pages/shells/index/index.vue

@@ -21,22 +21,69 @@
           <div class="elec-qty"></div>
         </div>
         <div class="elec-txt">90%</div>
-        <div class="iconfont icon_admin"></div>
-        <div class="elec-txt">{{ username }}</div>
+        <div class="header_user_wraper">
+          <div class="header_user_wraper_inn" @click="showDropdown">
+            <div class="iconfont icon_admin"></div>
+            <div class="elec-txt">{{ username }}</div>
+          </div>
+          <div v-show="dropdown" class="header_dropdown_wraper">
+            <ul>
+              <li @click="showDialog">修改密码</li>
+              <li @click="toEixt">退出</li>
+            </ul>
+            <div class="popper__arrow"></div>
+          </div>
+        </div>
       </div>
       <div class="time-container">
         <jxTime></jxTime>
       </div>
     </div>
     <router-view></router-view>
+    <jxDialog
+    ref="child"
+    title="修改密码"
+    :unclick="unclick"
+    @toSure="toSureDialog"
+    >
+      <div class="form_wraper">
+        <div class="form">
+          <div class="form_item">
+            <div class="form_item__label"><i>*</i>旧的密码</div>
+            <div class="form_item__content">
+              <input type="password" class="form_item__input" v-model="oldpassword">
+            </div>
+          </div>
+        </div>
+        <div class="form">
+          <div class="form_item">
+            <div class="form_item__label"><i>*</i>新的密码</div>
+            <div class="form_item__content">
+              <input type="password" class="form_item__input" v-model="newpassword1">
+            </div>
+          </div>
+        </div>
+        <div class="form">
+          <div class="form_item">
+            <div class="form_item__label"><i>*</i>新的密码</div>
+            <div class="form_item__content">
+              <input type="password" class="form_item__input" v-model="newpassword2">
+            </div>
+          </div>
+        </div>
+      </div>
+    </jxDialog>
   </div>
 </template>
 
 <script>
 import jxTime from '@components/time.vue'
+import jxDialog from '@components/dialog.vue'
+import { updatePass } from '@config/getData2.js'
 export default {
   components: {
-    jxTime
+    jxTime,
+    jxDialog
   },
   data () {
     return {
@@ -70,16 +117,95 @@ export default {
         label: '系统管理',
         index: '7',
         router: '/user'
-      }]
+      }],
+      dropdown: false,
+      oldpassword: '',
+      newpassword1: '',
+      newpassword2: '',
+      unclick: false
+    }
+  },
+  watch: {
+    oldpassword (val) {
+      if (val === '' || this.newpassword1 === '' || this.newpassword2 === '') {
+        this.unclick = true
+      } else {
+        this.unclick = false
+      }
+    },
+    newpassword1 (val) {
+      if (val === '' || this.oldpassword === '' || this.newpassword2 === '') {
+        this.unclick = true
+      } else {
+        this.unclick = false
+      }
+    },
+    newpassword2 (val) {
+      if (val === '' || this.oldpassword === '' || this.newpassword1 === '') {
+        this.unclick = true
+      } else {
+        this.unclick = false
+      }
     }
   },
   methods: {
     handleSelect (key) {
       this.activeIndex = key
       this.$store.dispatch('getDefaultActive', key)
+      this.dropdown = false
       this.$router.push({
         path: this.menus[Number(key) - 1].router
       })
+    },
+    showDropdown () {
+      this.dropdown = !this.dropdown
+    },
+    showDialog () {
+      this.dropdown = false
+      this.$refs.child.active = true
+      this.oldpassword = ''
+      this.newpassword1 = ''
+      this.newpassword2 = ''
+      this.unclick = true
+    },
+    toSureDialog () {
+      this._updatePass()
+    },
+    async _updatePass () {
+      this.$refs.child.disabled = true
+      if (!this.oldpassword) {
+        this.toast('旧密码不能为空')
+        this.$refs.child.disabled = false
+        return
+      }
+      if (!this.newpassword1) {
+        this.toast('新密码不能为空')
+        this.$refs.child.disabled = false
+        return
+      }
+      if (!this.newpassword2) {
+        this.toast('输入新密码')
+        this.$refs.child.disabled = false
+        return
+      }
+      if (this.newpassword1 !== this.newpassword2) {
+        this.toast('新密码输入不一致，请重新输入')
+        this.$refs.child.disabled = false
+        return
+      }
+      try {
+        let res = await updatePass(this.newpassword1, this.oldpassword)
+        this.toast(res.desc)
+        this.$refs.child.active = false
+        this.$refs.child.disabled = false
+      } catch (e) {
+        this.$refs.child.active = false
+        this.$refs.child.disabled = false
+      }
+    },
+    toEixt () {
+      this.$store.dispatch('setSignOut')
+      this.$router.push('/login')
     }
   }
 }
@@ -137,10 +263,65 @@ export default {
   // background-color #fa6400
 .elec-txt
   _font(15px, 25px, #909399,,left)
-  margin-right 10px
 .icon_admin
   _font(20px, 25px, #54C0B3,,left)
   margin-right 2px
 >>>.el-menu
   border-right none
+.header_user_wraper
+  padding 0 10px
+  height 59px
+  margin 0 10px
+  position relative
+  &:hover
+    background-color #f0f0f0
+.header_user_wraper_inn
+  _fj()
+  _wh(100%, 100%)
+.header_dropdown_wraper
+  position absolute
+  top 52px
+  left 0
+  z-index 1000
+  width 100%
+  background-color #fff
+  border 1px solid #ebeef5
+  border-radius 4px
+  box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
+  padding 10px 0
+  ul
+    width 100%
+    li
+      width 100%
+      _font(14px, 36px, #909399,,center)
+      padding 0 10px
+      &:hover
+        background-color #ffc3a7
+        color #fd6a35
+.popper__arrow
+  position absolute
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 6px;
+  filter: drop-shadow(0 2px 12px rgba(0,0,0,.03))
+  top: -6px;
+  left: 32px;
+  margin-right: 3px;
+  border-top-width: 0;
+  border-bottom-color: #ebeef5;
+  &:after
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    content: " ";
+    border-width: 6px;
+    top: 1px;
+    margin-left: -6px;
+    border-top-width: 0;
+    border-bottom-color: #fff;
 </style>