zouma-video/src/views/RegisterView.vue

<template>
    <div 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>
    </div>
</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'

const form = ref({
    email: '',
    username: '',
    password: '',
    password2: ''
})

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).then(res => {
        closeToast()
        showNotify({ type: 'success', message: 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;
    }

    /deep/.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>