LocalLivingServicesUniapp/pages/login/resetpassword.vue

<template>

    <view>
        <!-- 基础表单校验 -->
        <cu-custom :isBack="true">
            <block slot="content">忘记密码</block>
        </cu-custom>
        <view class="box  ">
            <view class="box-user flex align-center " style="border-bottom: 1px solid #EFEFEF;"
                :class="[shape == 'round' ? 'round' : '']">
                <image src="../../static/login/Frame (27).png" mode='aspectFit' class="zai-logo "></image>
                <input placeholder="请输入手机号" name="input" v-model="phoneNo"></input>
            </view>
            <view class="box-user flex align-center" style="border-bottom: 1px solid #EFEFEF;"
                :class="[shape == 'round' ? 'round' : '']">
                <image src="../../static/login/Frame (28).png" mode='aspectFit' class="zai-logo "></image>
                <input class="uni-input" placeholder="请输入验证码" v-model="smsCode" />
                <view class="action">
                    <text class="text-color" :disabled="!isSendSMSEnable" @click="onSMSSend"> {{ getSendBtnText
                        }}</text>
                </view>
            </view>
            <view class="box-user flex align-center" style="border-bottom: 1px solid #EFEFEF;"
                :class="[shape == 'round' ? 'round' : '']">
                <image src="../../static/login/Frame (26).png" mode='aspectFit' class="zai-logo "></image>
                <input placeholder="请输入新密码" :password="!showPassword" v-model="password"></input>
                <view class="action text-lg">
                    <text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']"
                        @click="changePassword"></text>
                </view>
            </view>
            <view class="box-user flex align-center" :class="[shape == 'round' ? 'round' : '']">
                <image src="../../static/login/Frame (26).png" mode='aspectFit' class="zai-logo "></image>
                <input placeholder="请再次输入新密码" :password="!showPassword1" v-model="password1"></input>
                <view class="action text-lg">
                    <text :class="[showPassword1 ? 'cuIcon-attention' : 'cuIcon-attentionforbid']"
                        @click="changePassword1"></text>
                </view>
            </view>
            <view class="footer">
                <button type="primary" class="p-button round" @click="onSMSLogin()">确认修改并登录</button>

                <!-- <button  class="cu-btn round lg  bg-blue " style="display: flex;" :loading="loading" :class="[shape=='round'?'round':'']"
							@tap="onSMSLogin"><text space="emsp">{{loading ? "注册中...":" 注册 "}}</text>
						</button> -->
            </view>

        </view>
        <!-- <view  class="example">
        <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" label-width="100px">
            <uni-forms-item label="手机号" required name="phoneNo">
                <view class="cu-form-group   shadow-warp" >
                    <input class="u-input" placeholder="请输入手机号" v-model="valiFormData.phoneNo"/>
                </view>
            </uni-forms-item>
            <uni-forms-item label="验证码" required name="smsCode">
            <view class="cu-form-group   shadow-warp" >
                <input class="u-input" placeholder="请输入验证码" v-model="valiFormData.smsCode"/>
                <text style="color: #0081ff;" :disabled="!isSendSMSEnable" @click="onSMSSend">{{ getSendBtnText }}</text>
            </view>
            </uni-forms-item>
            <uni-forms-item label="新密码" required name="age">
                <view class="cu-form-group   shadow-warp" >
                    <input class="u-input" placeholder="请输入新密码" v-model="valiFormData.phoneNo"/>
                </view>
            </uni-forms-item>
            <uni-forms-item label="确认密码" required name="age">
                <view class="cu-form-group   shadow-warp" >
                    <input class="u-input" placeholder="请输入新密码" v-model="valiFormData.phoneNo"/>
                </view>
            </uni-forms-item>
        </uni-forms>
        <button type="primary"  class="p-button"  @click="submit('valiForm')">确认修改并登录</button>
    </view> -->
    </view>

</template>
<script>
export default {
    computed: {

        isSendSMSEnable() {
            return this.smsCountDown <= 0 && this.valiFormData.phoneNo.length > 4;
        },
        getSendBtnText() {
            if (this.smsCountDown > 0) {
                return this.smsCountDown + '秒后发送';
            } else {
                return '发送验证码';
            }
        },

    },
    data() {
        return {
            showPassword: false, //是否显示明文
            showPassword1: false, //是否显示明文
            shape: '',//round 圆形
            smsCountDown: 0,
            // 校验表单数据
            valiFormData: {
                phoneNo: '',
                smsCode: '',
                introduction: '',
            },
            // 校验规则
            rules: {
                phoneNo: {
                    rules: [{
                        required: true,
                        errorMessage: '姓名不能为空'
                    }]
                },
                smsCode: {
                    rules: [{
                        required: true,
                        errorMessage: '年龄不能为空'
                    }, {
                        format: 'number',
                        errorMessage: '年龄只能输入数字'
                    }]
                }
            },
            password1: '',
            password: '',
            phoneNo: '',
            smsCode: '',
        }
    },
    methods: {
        changePassword() {
            this.showPassword = !this.showPassword;
        },
        changePassword1() {
            this.showPassword1 = !this.showPassword1;
        },
        onSMSSend() {
            // let smsParams = {};
            // smsParams.phone=this.phoneNo;
            // smsParams.smsmode="0";
            let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
            if (!this.phoneNo || this.phoneNo.length == 0) {
                this.$tip.toast('请输入手机号');
                return false
            }
            if (!checkPhone.test(this.phoneNo)) {
                this.$tip.toast('请输入正确的手机号');
                return false
            }
            this.$http.get("/merchant/app/sendMsg", { params: { phone: this.phoneNo } }).then(res => {
                if (res.data.success) {
                    this.smsCountDown = 60;
                    this.startSMSTimer();
                } else {
                    this.smsCountDown = 0;
                    this.$tip.toast(res.data.message);
                }
            });
        },
        startSMSTimer() {
            this.smsCountInterval = setInterval(() => {
                this.smsCountDown--;
                if (this.smsCountDown <= 0) {
                    clearInterval(this.smsCountInterval);
                }
            }, 1000);
        },
        onSMSLogin() {
            let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);

            if (!this.phoneNo || this.phoneNo.length == 0) {
                this.$tip.toast('请填写手机号');
                return;
            }
            if (!checkPhone.test(this.phoneNo)) {
                this.$tip.toast('请输入正确的手机号');
                return false
            }
            if (!this.smsCode || this.smsCode.length == 0) {
                this.$tip.toast('请填短信验证码');
                return;
            }
            if (this.password !== this.password1) {
                this.$tip.toast('请确定密码是否一致');
                return;
            }
            let loginParams = {
                phone: this.phoneNo,
                passWord: this.password,
                code: this.smsCode
            };
            this.$http.post("/merchant/app/updatePassWord", loginParams).then(res => {
                if (res.data.success) {
                    this.$Router.push({name:"login"})
                } else {
                    this.$tip.error(res.data.message);
                }
            }).catch((err) => {
                let msg = ((err.response || {}).data || {}).message || err.data.message || "请求出现错误，请稍后再试"
                this.$tip.error(msg);
            });
        },
        submit(ref) {
            this.$refs[ref].validate().then(res => {
                console.log('success', res);
                uni.showToast({
                    title: `校验通过`
                })
            }).catch(err => {
                console.log('err', err);
            })
        },
    }

}
</script>
<style scoped lang="scss">
page {
    background: #FFFFFF;
    height: 100%;
}

.text-color {
    color: #449AFF;
    margin: 0 5px;
}

.zai-logo {
    width: 20px;
    height: 20px;
}
.box{
    padding: 30px 17px;
}
.box-user {
    min-height: 45px;

    image {
        margin-right: 10px;
    }

    input {
        font-size: 14px;
        flex: 1;
    }
}

.example {
    padding: 20px;
}

.shadow-warp {
    min-height: 38px;
    font-size: 12px;
}

.u-input {
    font-size: 12px;
    color: #999;
}

.p-button {
    background: #449AFF;
    font-size: 14px;
}
.footer{
		position: fixed;
		bottom: 30px;
        width: 92%;
  text-align: center; /* 按钮居中 */
		// font-size: 14px;
		// color: #999999;
		// left: 50%;
		// transform: translateX(-50%);
	}
</style>