zouma-short/src/views/RegisterPage.vue

<template>
    <ion-page>
        <ion-header>
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-back-button text="" default-href="#" @click="$router.back()"></ion-back-button>
                </ion-buttons>
            </ion-toolbar>
        </ion-header>
        <ion-content :fullscreen="true" class="login">
            <img src="@/assets/png-denglu-bg.png" class="top-bg !absolute w-full h-[200px] top-0 left-0 !z-0" alt="" />
            <div class="login-content h-full">
                <div class="text-white text-[26px] AlimamaShuHeiTi">Hi，歡迎來到走馬短劇</div>

                <!-- 可以使用 CellGroup 作为容器 -->
                <van-form @submit="onSubmit">
                    <van-cell-group :border="false">
                        <van-field
                            label-align="top"
                            clearable
                            v-model="form.email"
                            :rules="[
                                {
                                    required: true,
                                    pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
                                    message: '请输入正确内容'
                                }
                            ]"
                            :label="$t('login.email')"
                            :placeholder="$t('login.emailPla')"
                        >
                            <template #left-icon>
                                <img class="left-icon" src="@/assets/login_icon_zhanghao.png" alt="" />
                            </template>
                            <template #label>
                                <div class="text-white text-[14px]">{{ $t('login.email') }}</div>
                            </template>
                        </van-field>
                        <van-field
                            label-align="top"
                            clearable
                            v-model="form.username"
                            :label="$t('login.username')"
                            :placeholder="$t('login.usernamePla')"
                            :rules="[
                                {
                                    required: true,
                                    message: $t('login.usernamePla')
                                }
                            ]"
                        >
                            <template #left-icon>
                                <img class="left-icon" src="@/assets/login_icon_zhanghao.png" alt="" />
                            </template>
                            <template #label>
                                <div class="text-white text-[14px]">{{ $t('login.username') }}</div>
                            </template>
                        </van-field>

                        <van-field
                            label-align="top"
                            type="password"
                            clearable
                            v-model="form.password"
                            :label="$t('login.password')"
                            :placeholder="$t('login.passwordPla')"
                            :rules="[
                                {
                                    required: true,
                                    message: $t('login.passwordPla')
                                }
                            ]"
                        >
                            <template #left-icon>
                                <img class="left-icon" src="@/assets/login_icon_mima.png" alt="" />
                            </template>
                            <template #label>
                                <div class="text-white text-[14px]">{{ $t('login.password') }}</div>
                            </template>
                        </van-field>

                        <van-field
                            label-align="top"
                            type="password"
                            clearable
                            v-model="form.password2"
                            label="密碼"
                            :placeholder="$t('login.password2Pla')"
                            :rules="[
                                {
                                    validator,
                                    message: '两次密码输入不一致'
                                }
                            ]"
                        >
                            <template #left-icon>
                                <img class="left-icon" src="@/assets/login_icon_mima.png" alt="" />
                            </template>
                            <template #label>
                                <div class="text-white text-[14px]">{{ $t('login.password2') }}</div>
                            </template>
                        </van-field>

                        <!-- <div @click="loginCode = !loginCode" class="text-[#61657A] text-right text-xs underline pt-[10px]">
                    {{ loginCode ? '密碼登录' : '验证码登录' }}
                </div> -->

                        <div class="btn py-[64px] px-[17px]">
                            <van-button type="primary" class="AlimamaShuHeiTi" block round native-type="submit"
                                >注册</van-button
                            >

                            <div class="text-[#61657A] text-sm mt-[20px] text-center" @click="goLogin">
                                已有帳號，立即登入
                            </div>
                        </div>
                    </van-cell-group>
                </van-form>

                <div class="rule flex justify-center van-safe-area-bottom">
                    <van-checkbox v-model="checked">點擊同意注册協定</van-checkbox>
                </div>
            </div>
        </ion-content>
    </ion-page>
</template>
<script setup>
import { ref } from 'vue'
import { http } from '@/plugins/http'
import { useUserStore } from '../stores/user'
import { showNotify } from 'vant'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { showLoadingToast, closeToast } from 'vant'
import toast from '@/utils/toast'

const form = ref({
    email: '',
    username: '',
    password: '',
    password2: '',
    invitor: localStorage.getItem('invitor') || ''
})

const checked = ref(false)

const loginCode = ref(false)

function validator(val) {
    return form.value.password === val
}

const router = useRouter()
function goLogin() {
    router.back()
}
const { t } = useI18n()

const { register } = useUserStore()
showLoadingToast({
    message: t('loading'),
    forbidClick: true
})
function onSubmit() {
    register(form.value.email, form.value.username, form.value.password, form.value.invitor).then(res => {
        closeToast()
        toast.success(t('login.register'))
        router.go(-2)
    })
}
</script>

<style lang="less" scoped>
.login {
    .login-content {
        position: relative;
        z-index: 1;
        padding: 30px;
    }
}

.van-cell-group {
    --van-cell-group-background: transparent;
    --van-cell-background: transparent;
    --van-cell-border-color: #4d61657a;
    --van-field-placeholder-text-color: #61657a;
    :deep(.van-field__label--top) {
        margin-bottom: 14px;
    }

    :ddep(.van-cell__value) {
        line-height: 44px;
    }
    .van-cell {
        --van-cell-value-color: #fff;
        --van-cell-font-size: 14px;
        --van-field-input-text-color: #fff;
        --van-field-clear-icon-color: #404455;
        padding: 40px 0 0;
        &::after {
            left: 0;
            right: 0;
        }
    }

    .left-icon {
        width: 24px;
        height: 24px;
    }
}

.rule {
    // position: fixed;
    // bottom: 30px;
    // left: 50%;
    // transform: translateX(-50%);
    .van-checkbox {
        --van-checkbox-size: 16px;
        --van-checkbox-border-color: #61657a;
        --van-checkbox-label-color: #61657a;
        font-size: 12px;
    }
}
</style>