samehome/pages/login/forget.vue

<template>
    <view class="main">
        <navigation>{{ i18n.ForgotPassword }}</navigation>
        <view class="body">
            <u--form class="form" :model="userInfo" :rules="rules" ref="form1" errorType="toast">
                <!-- 邮箱 -->
                <u-form-item class="input-item" prop="email" ref="item1">
                    <u-icon class="icon"
                        :name="userInfo.email ? '../../static/login/email_pr.png' : '../../static/login/email_de.png'"
                        size="48rpx" width="48rpx"></u-icon>
                    <u-input class="input" v-model="userInfo.email" color="#fff" fontSize="32rpx" border="none"
                        :placeholder="i18n.emailInputText">
                    </u-input>
                </u-form-item>
                <!-- 验证码 -->
             <u-form-item class="input-item vCode" prop="code" ref="item1">
             	<u-icon class="icon"
             		:name="userInfo.code ? '../../static/login/code_pr.png' : '../../static/login/code_de.png'"
             		size="48rpx" width="48rpx"></u-icon>
             	<u-input class="input" v-model="userInfo.code" color="#fff" fontSize="32rpx" border="none"
             		:placeholder="i18n.registerWelcomeText" maxlength="6">
             	</u-input>
             	<u-code startText="Get code" :seconds="seconds" ref="uCode" keep-running unique-key="login"
             		@change="codeChange">
             	</u-code>
             	<u-button class="getVCodeBtn" color="#323045" @tap="getCode">{{tips}}</u-button>
             </u-form-item>
                <!-- 密码 -->
                <u-form-item class="input-item" prop="password" ref="item1">
                    <u-icon class="icon"
                        :name="userInfo.password ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'"
                        size="48rpx" width="48rpx"></u-icon>
                    <u-input class="input" type="password" v-model="userInfo.password" color="#fff" fontSize="32rpx" border="none"
                        :placeholder="i18n.passwordText">
                    </u-input>
                </u-form-item>
                <!-- 重复密码 -->
                <u-form-item class="input-item" prop="confirmPassword" ref="item1">
                    <u-icon class="icon"
                        :name="userInfo.confirmPassword ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'"
                        size="48rpx" width="48rpx"></u-icon>
                    <u-input class="input" type="password" v-model="userInfo.confirmPassword" color="#fff" fontSize="32rpx"
                        border="none" :placeholder="i18n.confirmPasswordText">
                    </u-input>
                </u-form-item>

            </u--form>
            <u-button class="button" color="#00E8A2" throttleTime="500" :disabled="!agreeFlag">{{ i18n.Save }}
            </u-button>
        </view>


    </view>
</template>

<script>
import UButton from '../../uview-ui/components/u-button/u-button.vue'
export default {
    name: "ForgotPassword",
    data() {
        return {
			// 验证码倒计时
			tips: '',
			seconds: 60,
			// 邮箱号码是否正确
			isCanGetCode: false,
            userInfo: {
                name: "",
                password: "",
            },
            rules: {
                email: {
                    type: "string",
                    required: true,
                    message: this.$t("login.emailInputMessage"),
                    trigger: ["blur", "change"],
                },
                code: {
                    type: "string",
                    required: true,
                    message: this.$t("login.verificationCodeMessage"),
                    trigger: ["blur", "change"]
                },
                password: {
                    type: "string",
                    required: true,
                    message: this.$t("login.passwordInputMessage"),
                    trigger: ["blur", "change"]
                },
            },
            agreeFlag: false,
        };
    },
    computed: {
        i18n() {
            return this.$t("login");
        },
    },
	watch: {
		'userInfo.email': {
			handler(newValue) {
				this.isCanGetCode = uni.$u.test.email(newValue);
			}
		}
	},
    onLoad() {
        // console.log(this.$t('login.emailInputMessage'));
    },
    onShow() { },
    methods: {
		// 验证码相关
		codeChange(text) {
			this.tips = text;
		},
		// 验证码获取
		getCode() {
			if (!this.userInfo.email) {
				uni.$u.toast(this.$t("login.Emailempty"))
				return
			}
			if (!this.isCanGetCode) {
				uni.$u.toast(this.$t("login.Emailincorrect"))
				return
			}
			if (this.$refs.uCode.canGetCode) {
				const data = {
					email: this.userInfo.email,
					type: 0,
				}
				// 模拟向后端请求验证码
				uni.showLoading({
					title: this.$t("login.GettingVerificationCode")
				})
				this.$api.sendEmailCode(data).then(res => {
					if (res.code === 200) {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast(this.$t("login.CodeHasSent"));
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					} else {
						uni.$u.toast(res.msg)
					}
				})
			} else {
				uni.$u.toast(this.$t("login.SendAfter"));
			}
		},
	},
    components: { UButton }
}
</script>

<style lang="scss" scoped>
.main {

    .body {
        margin-top: 204rpx;
        padding: 0 64rpx;
        overflow: hidden;

        .form {
            font-size: 32rpx;
            margin-top: 48rpx;

            .input-item {
                height: 112rpx;
                line-height: 112rpx;
                background: #211F32;
                margin-bottom: 48rpx;
                border-radius: 32rpx;

                .icon {
                    margin: 0 24rpx;
                }

                /deep/.u-form-item__body {
                    padding: 0;
                }

                .input {
                    height: 112rpx;
                }
            }

            .vCode {

                .getVCodeBtn {
                    // position: absolute;
                    width: 154rpx;
                    height: 56rpx;
                    right: 28rpx;
                    // top: 14px;
                    border-radius: 8px;
                    line-height: 56rpx;
                    font-size: 24rpx;
                    color: #00E8A2 !important;
                    padding: 0;
                }
            }
        }

        .button {
            margin-top: 64rpx;
            height: 112rpx;
            line-height: 112rpx;
            border-radius: 32rpx;
            font-size: 32rpx;
            color: #15141F !important;
        }


    }

}
</style>