12

src/components/page/Retrieveact.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="login-wrap">
+        <div class="ms-login">
+            <div class="ms-title">修改密码</div>
+            <el-form
+                :model="param"
+                :rules="rules"
+                ref="retrieveact"
+                label-width="0px"
+                class="ms-content"
+            >
+                <el-form-item prop="password">
+                    <el-input v-model="param.password" placeholder="password">
+                        <i slot="prefix" class="el-icon-key" />
+                    </el-input>
+                </el-form-item>
+                <el-form-item prop="repassword">
+                    <el-input v-model="param.repassword" placeholder="repassword">
+                        <i slot="prefix" class="el-icon-key" />
+                    </el-input>
+                </el-form-item>
+                <div class="login-btn">
+                    <el-button type="primary" @click="submitForm">提交</el-button>
+                </div>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data: function() {
+        var validatePass2 = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('Please repeat enter your password'));
+            } else if (value !== this.param.password) {
+                callback(new Error('The two input passwords are inconsistent!'));
+            } else {
+                callback();
+            }
+        };
+        return {
+            param: {
+                actkey: this.$route.query.actkey,
+                password: '',
+                repassword: ''
+            },
+            rules: {
+                password: [{ required: true, message: 'Please enter your password.', trigger: 'blur' }],
+                repassword: [{ required: true, validator: validatePass2, trigger: 'blur' }]
+            }
+        };
+    },
+    created: function() {
+        this.check_key();
+    },
+    methods: {
+        check_key() {
+            this.$api
+                .post('api/user/checkActkey', { actkey: this.param.actkey })
+                .then(res => {
+                    if (res.code == 1) {
+                        this.$alert('无效的连接参数', '非法访问', {
+                            confirmButtonText: '确定',
+                            callback: action => {
+                                this.$router.push('/');
+                            }
+                        });
+                    }
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        submitForm() {
+            this.$refs.retrieveact.validate(valid => {
+                if (valid) {
+                    this.$api
+                        .post('api/user/retrieve', this.param)
+                        .then(res => {
+                            if (res.code == 0) {
+                                this.$message({
+                                    type: 'success',
+                                    message: 'success'
+                                });
+                                this.$router.push('/');
+                            } else {
+                                this.$message({
+                                    type: 'info',
+                                    message: res.msg
+                                });
+                            }
+                        })
+                        .catch(err => {
+                            console.log(err);
+                        });
+                } else {
+                    this.$message.error('Please enter the correct account and password.');
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.login-wrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-image: url(../../assets/img/login-bg.jpg);
+    background-size: 100%;
+}
+.ms-title {
+    width: 100%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 20px;
+    color: #fff;
+    border-bottom: 1px solid #ddd;
+}
+.ms-login {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 350px;
+    margin: -190px 0 0 -175px;
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.3);
+    overflow: hidden;
+}
+.ms-content {
+    padding: 30px 30px;
+}
+.login-btn {
+    text-align: center;
+}
+.login-btn button {
+    width: 40%;
+    height: 36px;
+    margin-bottom: 10px;
+}
+.login-tips {
+    font-size: 12px;
+    line-height: 30px;
+    color: #fff;
+}
+.captchaimg {
+    margin-top: 2px;
+    margin-left: 4px;
+}
+.backlink {
+    text-align: left;
+    padding-top: 12px;
+}
+</style>