dz-app/pages/login/login.vue

<template>
    <view class="h-screen w-screen bg-register-bright bg-no-repeat bg-cover fx-col justify-center">
        <view class="pl-80">
            <uv-text size="28" text="您好，欢迎使用"/>
            <text class="font-[FZBangSKJW] text-[32px] text-primary-deep">单招一卡通</text>
        </view>
        <view class="mx-40 mt-60 px-40 py-50 shadow rounded-xl">
            <uv-form ref="form" :model="model" :rules="rules" label-position="top" error-type="toast">
                <mx-login-form-item v-model="model.username" prop="username" icon="account" label="账号"
                                    placeholder="请输入手机号/卡号"/>
                <mx-login-form-item v-model="model.password" :type="isPwdMode?'password':''" prop="password" icon="lock"
                                    label="密码">
                    <template #suffix>
                        <uv-icon :size="isPwdMode?16:18" :name="isPwdMode?'eye':'eye-off'"
                                 @click="isPwdMode=!isPwdMode"/>
                    </template>
                </mx-login-form-item>
            </uv-form>
            <view class="mt-30 fx-row fx-bet-cen">
                <text class="text-primary text-lg" @click="goRegister">账号注册</text>
                <text class="text-primary text-lg" @click="goForgetPwd">忘记密码?</text>
            </view>
        </view>
        <view class="mt-80 px-80">
            <uv-button :loading="loading" color="var(--primary-deep-color)" type="primary" size="large" shape="circle"
                       text="登陆" @click="handleLogin"/>
        </view>
        <agreement-view v-model="isAgree" class="mt-80"/>
    </view>
</template>

<script setup>
import {ref} from 'vue'
import {useUserStore} from "@/hooks/useUserStore";
import {useTransfer} from "@/hooks/useTransfer";
import {toast} from "@/uni_modules/uv-ui-tools/libs/function";
import mxConst from "@/common/mxConst";
import AgreementView from "@/pages/login/components/agreement-view.vue";
import {createLoginModelRules} from "@/pages/login/components/hooks/defineFormModels";
import {useProvideFormData} from "@/pages/login/components/hooks/useFormDataInjection";

// data
const {Login} = useUserStore()
const {transferTo, relaunch} = useTransfer()

const isAgree = ref(false)
const isPwdMode = ref(true)
const loading = ref(false)

// form related.
const [m, r, modelToCommit] = createLoginModelRules()
const [model, rules] = useProvideFormData(m, r)
const form = ref(null)

// methods
const handleLogin = async () => {
    await form.value.validate()
    if (!isAgree.value) return toast('请先勾选同意条款')

    if (loading.value) return
    loading.value = true
    const commit = modelToCommit()
    Login(commit)
        .then(res => relaunch())
        .finally(() => loading.value = false)
}

const goForgetPwd = () => {
    transferTo(mxConst.routes.forgetPwd)
}

const goRegister = () => {
    transferTo(mxConst.routes.register)
}
</script>

<style lang="scss" scoped>
::v-deep .uv-button__loading-text,
::v-deep .uv-button__text {
    font-size: 22px !important;
    letter-spacing: 8px;
}
</style>