修改密码页

Canace22 · May 7, 2018 · ae6bd90 · ae6bd90
1 parent fb00977
commit ae6bd90
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 3 deletions.
diff --git a/src/api/index.js b/src/api/index.js
@@ -51,3 +51,12 @@ export function saveGroup (params) { // 保存分组信息
     data: data
   })
 }
+
+export function recoverPassword (params) { // 找回密码
+  const data = params
+  return fetch({
+    url: '/forget',
+    method: 'post',
+    data: data
+  })
+}
diff --git a/src/main.js b/src/main.js
@@ -8,13 +8,16 @@ import NProgress from 'nprogress' // 进度条
 // import 'nprogress/nprogress.css' // 进度条样式
 import './common/styles/my-nprogress.css' // 自定义 progress 样式
 import 'normalize.css/normalize.css' // normalize.css 样式格式化
-import { Notification, MessageBox, Loading, Message, Icon } from 'element-ui'
+import { Notification, MessageBox, Loading, Message, Icon, Input, Form, FormItem } from 'element-ui'
 import iconSvg from './components/iconSvg' // icon-svg 组件
 
 Vue.component('icon-svg', iconSvg) // 全局注册 icon-svg 组件
 
 Vue.use(Loading.directive)
 Vue.use(Icon)
+Vue.use(Input)
+Vue.use(Form)
+Vue.use(FormItem)
 
 Vue.prototype.$loading = Loading.service
 Vue.prototype.$notify = Notification

diff --git a/src/views/changePassword/index.vue b/src/views/changePassword/index.vue
@@ -1,14 +1,54 @@
 <template>
   <div>
-    <icon-svg name="biyanjing"></icon-svg>
+    <el-form :model="formData" :rules="rules">
+      <el-form-item prop="old">
+        <el-input type="password" v-model="formData.old" placeholder="原密码"></el-input>
+      </el-form-item>
+      <el-form-item prop="now">
+        <el-input :type="types" v-model="formData.now" placeholder="新密码">
+          <icon-svg slot="suffix" name="biyanjing"></icon-svg>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="again">
+        <el-input type="password" v-model="formData.again" placeholder="确认密码"></el-input>
+      </el-form-item>
+      <button @click="submit">提交</button>
+    </el-form>
   </div>
 </template>
 
 <script>
 export default {
   name: 'changePassword',
   data () {
-    return {}
+    var checkAgain = (rule, value, callback) => {
+      if (value !== this.formData.now) {
+        callback(new Error('新密码和确认密码不一致'))
+      }
+    }
+    return {
+      formData: {
+        old: '',
+        now: '',
+        again: ''
+      },
+      rules: {
+        old: [
+          { required: true, message: '原密码不能为空', trigger: 'blur' }
+        ],
+        now: [
+          { required: true, message: '新密码不能为空', trigger: 'blur' }
+        ],
+        again: [
+          { required: true, message: '确认密码不能为空', trigger: 'blur' },
+          { validator: checkAgain, trigger: 'blur' }
+        ]
+      },
+      types: 'password'
+    }
+  },
+  methods: {
+    submit () {}
   }
 }
 </script>