123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- <style lang="less">
- @import "./reset.less";
- </style>
- <template>
- <div class="main">
- <navbar :user="user"></navbar>
- <div style="margin: 50px auto;">
- <el-form :model="regForm" status-icon :rules="rules" label-width="80px" ref="regForm" class="reset">
- <el-form-item label="手机号" prop="phone" class="pr">
- <div class="reset-phone">
- <el-input prop="phone" type="text" v-model="regForm.phone" placeholder="输入手机号码"></el-input>
- </div>
- <div class="reset-code">
- <el-button @click="getCode(regForm)" class="code-btn ml10" type="primary" v-if="show">发送</el-button>
- <el-button class="code-btn" type="primary" disabled v-else>{{count}} s</el-button>
- </div>
- </el-form-item>
- <el-form-item label="验证码" prop="code" class="pr">
- <el-input prop="code" v-model="regForm.code" placeholder="验证码" auto-complete="off"></el-input>
- </el-form-item>
- <el-form-item label="新密码" prop="pass" class="pr">
- <el-input prop="pass" type="password" v-model="regForm.pass" placeholder="登入密码" auto-complete="off"></el-input>
- </el-form-item>
- <el-form-item label="确认密码" prop="rePass" class="pr">
- <el-input prop="rePass" type="password" v-model="regForm.rePass" placeholder="确认密码" auto-complete="off"></el-input>
- </el-form-item>
- <div class="submit">
- <el-button type="primary" class="submit-btn" @click="submitForm('regForm')">重置密码</el-button>
- <el-button type="primary" class="submit-btn" @click="goLogin">回到登入</el-button>
- </div>
- </el-form>
- </div>
- </div>
- </template>
- <script>
- import {httpServer} from "@/components/httpServer/httpServer.js";
- import navbar from "@/components/nav/navbar.vue";
- import data from "@/components/data/data.js";
- export default {
- data() {
- return {
- show: true,
- count: 0,
- regForm: {
- phone: "",
- code: "",
- pass: "",
- rePass: ""
- },
- user:{},
- rules: data.rulesData( this.validatePass )
- };
- },
- components:{navbar},
- methods: {
- validatePass(rule, value, callback) {
- if (value == this.regForm.pass) {
- callback();
- } else {
- callback(new Error("两次密码不服"));
- }
- },
- goLogin(){
- this.$router.push('/');
- },
- getCode() {
- if (this.checkPhone() == false) {
- return false;
- } else {
- let {phone} = this.regForm;
- httpServer("Auth.getCode", {phone}).then(res => {
- if( res.code == 200){
- this.$message.successMsg("发送成功", 2);
- this.show = false
- const TIME_COUNT = 60; //更改倒计时时间
- if (!this.timer) {
- this.count = TIME_COUNT;
- this.timer = setInterval(() => {
- if (this.count > 0 && this.count <= TIME_COUNT) {
- this.count--;
- } else {
- this.show = true;
- clearInterval(this.timer); // 清除定时器
- this.timer = null;
- }
- }, 1000)
- }
- }
- })
- }
- },
- checkPhone() {
- let phone = this.regForm.phone;
- if (!/^1[3456789]\d{9}$/.test(phone)) {
- this.$message.error("请填写正确的手机号");
- return false;
- }
- return true
- },
- submitForm(formName) {
- let that = this;
- this.$refs[formName].validate(valid => {
- if (!valid) {
- return false;
- }
- let {phone,code,pass} = this.regForm;
- let param = {phone,code, pass: this.$md5(pass)};
- httpServer("Auth.resetPass", param).then(res => {
- if( res.code == 200){
- this.$msgbox({
- title: "重置密码",
- message: "密码重置成功",
- showCancelButton: false,
- confirmButtonText: "回到登入页面",
- beforeClose: (action, instance, done) => {
- that.$router.push('/');
- done();
- }
- })
- }
- });
- })
- }
- }
- };
- </script>
|