忘记密码

li-guang

2021-01-08 86773d61655cd653b3feb70401aa2edf242aa29c

忘记密码

 hive-app/pages/login/forgetPassword.vue

@@ -2,21 +2,87 @@
    <!-- 忘记密码 -->
    <view>
        <view class="input-box">
            <input placeholder="请输入手机号码" placeholder-class="placeholder" class="input-group-row"/>
            <input type="text" v-model="phone" placeholder="请输入手机号码" placeholder-class="placeholder" class="input-group-row"/>
            <view class="flex mt-10 ">
                <input placeholder="请输入验证码" placeholder-class="placeholder" class="input-group-row flex-1 mr-10"/>
                <navigator url="" hover-class="none" class="btn-box">
                    <button class="btn blue-btn">获取验证码</button>
                </navigator>
                <input type="text" v-model="code" value="" placeholder="请输入验证码" placeholder-class="placeholder" class="input-group-row flex-1 mr-10"/>
                <view url="" hover-class="none" class="btn-box">
                    <button class="btn blue-btn" :disabled="btnDisabled" @click="sendCode">{{btnTxt}}</button>
                </view>
            </view>
        </view>
        <navigator url="./newPassword" hover-class="none" class="sticky-footer">
            <button class="blue-btn">下一步</button>
        </navigator>
        <button class="blue-btn sticky-footer" @click="next">下一步</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                phone:'',
                code: '',
                btnTxt: '获取验证码',
                btnDisabled: false
            }
        },
        methods: {
            sendCode(){
                if (!this.$utils.checkPhone(this.phone)){
                    this.$toast.info('请输入正确的手机号');
                    return false;
                }
                this.btnDisabled = true;
                let second = 120;
                this.$httpUtils.request('/api/common/sendSmsCode',{
                    telphone: this.phone.trim()
                },'POST').then((res)=>{
                    console.log(res)
                    if(res.status==200){
                        this.btnTxt = second + 's';
                        this.timer = setInterval(() => {
                            if(second<=1){
                                this._reset()
                            }else{
                                second--;
                                this.btnTxt = second + 's';
                            }
                        }, 1000);
                        this.$toast.info(res.info);
                    } else {
                        this.$toast.info(res.info);
                        this.btnDisabled = false;
                    }
                }).catch((err) => {
                    this.$toast.info('发送失败');
                    this._reset()
                })
            },
            _reset(){
                this.timer && clearInterval(this.timer);
                this.timer = null;
                this.btnTxt = '发送验证码';
                this.btnDisabled = false;
            },
            valid(){
                if(!this.phone.trim()){
                    this.$toast.info('请输入手机号');
                    return false;
                }
                if(!this.code.trim()){
                    this.$toast.info('请输入验证码');
                    return false;
                }
            },
            next(){
                if(this.valid() === false){
                    return;
                }else{
                    uni.navigateTo({
                        url:'./newPassword?code=123456&phone='+this.phone
                    })
                }
            }
        }
    }
</script>

<style>

 hive-app/pages/login/newPassword.vue

@@ -2,16 +2,58 @@
    <!-- 新密码 -->
    <view>
        <view class="input-box">
            <input placeholder="请输入新密码" placeholder-class="placeholder" class="input-group-row"/>
            <input placeholder="请确认密码" placeholder-class="placeholder" class="input-group-row"/>
            <input type="password" v-model="newPassword" placeholder="请输入新密码" placeholder-class="placeholder" class="input-group-row"/>
            <input type="password" v-model="password" placeholder="请确认密码" placeholder-class="placeholder" class="input-group-row"/>
        </view>
        <navigator url="./" hover-class="none" class="sticky-footer">
            <button class="blue-btn">提交</button>
        </navigator>
        <button class="blue-btn sticky-footer" @click="submit">提交</button>
    </view>
</template>

<script>
    export default{
        data(){
            return{
                newPassword:'',
                password:'',
                sendCode:'',
                telphone:''
            }
        },
        onLoad(options) {
            this.sendCode = options.code;
            this.telphone = options.phone;
        },
        methods:{
            valid(){
                if(!this.newPassword.trim()){
                    this.$toast.info('请输入新密码');
                    return false;
                }
                if(this.password.trim()!==this.newPassword.trim()){
                    this.$toast.info('两次密码不一致');
                    return false;
                }
            },
            submit(){
                if(this.valid() === false){
                    return;
                }
                this.$httpUtils.request('/api/common/resetLoginPwd',{
                    code: this.sendCode,
                    newPwd: this.newPassword,
                    telphone: this.telphone
                },'POST').then((res)=>{
                    console.log(res)
                    if(res.status==200){
                        this.$toast.info(res.info);
                        uni.navigateBack();
                    }
                }).catch((err) => {
                    this.$toast.info(res.info);
                })
            }
        }
    }
</script>

<style>