samehome/pages/login/register.vue

<template>
    <view class="main" >
        <navigation>{{ i18n.SignUp }}</navigation>
        <view class="body">
            <view class="welcomeText">{{ i18n.registerWelcomeText }}</view>
            <view class="signInText">{{ i18n.registerCreate }}</view>
            <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" 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" v-model="userInfo.confirmPassword" color="#fff" fontSize="32rpx"
                        border="none" :placeholder="i18n.confirmPasswordText">
                    </u-input>
                </u-form-item>
                <!-- 取款密码 -->
                <u-form-item class="input-item" prop="withdrawalPassword" ref="item1">
                    <u-icon class="icon"
                        :name="userInfo.withdrawalPassword ? '../../static/login/WithdrawalPassword_pr.png' : '../../static/login/WithdrawalPassword_de.png'"
                        size="48rpx" width="48rpx"></u-icon>
                    <u-input class="input" v-model="userInfo.withdrawalPassword" color="#fff" fontSize="32rpx"
                        border="none" :placeholder="i18n.withdrawalPasswordText">
                    </u-input>
                </u-form-item>
                <!-- 邀请码 -->
                <u-form-item class="input-item" prop="InvitationCode" ref="item1">
                    <u-icon class="icon"
                        :name="userInfo.InvitationCode ? '../../static/login/Invitation_pr.png' : '../../static/login/Invitation_de.png'"
                        size="48rpx" width="48rpx"></u-icon>
                    <u-input class="input" v-model="userInfo.InvitationCode" color="#fff" fontSize="32rpx" border="none"
                        :placeholder="i18n.InvitationCodeText">
                    </u-input>
                </u-form-item>
            </u--form>
            <view class="agree">
                <u-icon class="check" @click="agreeFlag = !agreeFlag"
                    :name="agreeFlag ? '../../static/login/Checkbox_pr.png' : '../../static/login/Checkbox_de.png'"
                    size="48rpx" width="48rpx"></u-icon>
                <view class="text">{{ i18n.agreeText }}<span>{{ i18n.Terms }}</span>{{ i18n.and }}<span>{{
                        i18n.Conditions
                }}</span></view>
            </view>
            <u-button class="button" color="#00E8A2" throttleTime="500" :disabled="!agreeFlag">{{ i18n.SignUp }}
            </u-button>
            <view class="signUp">{{ i18n.haveAccount }}<navigator class="navigator" url="./index">{{ i18n.Login }}
                </navigator>
            </view>
        </view>


    </view>
</template>

<script>
import UButton from '../../uview-ui/components/u-button/u-button.vue'
export default {
    name: "register",
    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;

        .welcomeText {
            margin-top: 48rpx;
            font-size: 48rpx;
            font-weight: 800;
            text-align: center;
        }

        .signInText {
            font-size: 32rpx;
            text-align: center;
            color: #A2A0A8;
        }

        .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;
                }
            }
        }

        .agree {
            font-size: 28rpx;

            .check {
                display: inline-block;
                vertical-align: top;
                margin-right: 32rpx;
            }

            .text {
                display: inline-block;
                width: 542rpx;
            }

            span {
                cursor: pointer;
                color: #00E8A2;
                padding: 0 10rpx;

            }
        }

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

        .signUp {
            margin: 48rpx 0;
            text-align: center;
            font-size: 32rpx;

            .navigator {
                display: inline;
                color: #00E8A2;
                padding: 0 10rpx;
            }

        }
    }

}
</style>