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="verificationCode" ref="item1">
                    <u-icon class="icon"
                        :name="userInfo.verificationCode ? '../../static/login/code_pr.png' : '../../static/login/code_de.png'"
                        size="48rpx" width="48rpx"></u-icon>
                    <u-input class="input" v-model="userInfo.verificationCode" color="#fff" fontSize="32rpx"
                        border="none" :placeholder="i18n.registerWelcomeText" maxlength="6">
                    </u-input>
                    <u-button class="getVCodeBtn" color="#323045">Get code</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 {
            userInfo: {
                name: "",
                password: "",
            },
            rules: {
                email: {
                    type: "string",
                    required: true,
                    message: this.$t("login.emailInputMessage"),
                    trigger: ["blur", "change"],
                },
                verificationCode: {
                    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");
        },
    },
    onLoad() {
        // console.log(this.$t('login.emailInputMessage'));
    },
    onShow() { },
    methods: {},
    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>