xl-root/src/pages/login/Login.vue

<script setup>
import {reactive, ref} from 'vue';
import {toPath} from "../../utils/index.js";
import VerificationCode from '../../components/VerificationCode/index.vue';
import {useUserStore} from "../../pinia/UserStore/index.js";
import {Message} from "@arco-design/web-vue";
import {useSystemStore} from "../../pinia/SystemStore/index.js";
import Api from "../../api/index.js";

const {login} = useUserStore();
const {BUILD_MODE} = useSystemStore();

const MODE = {
    PHONE: 'PHONE',
    PASSWORD: 'PASSWORD'
}

const from = reactive({
    mobile: null,
    code: null,
    password: null,
});

const mode = ref(MODE.PHONE);

const loginSYS = (isRoot, form) => {
    if (!from.mobile || from.mobile === '') {
        Message.warning('手机号不能为空');
        return;
    }
    if (mode.value === MODE.PHONE) {
        if (!from.code || from.code === '') {
            Message.warning('验证码不能为空');
            return;
        }
    } else {
        if (!from.password || from.password === '') {
            Message.warning('密码不能为空');
            return;
        }
    }
    login(isRoot, form);
}
</script>

<template>
    <div class="p-[50px] rounded-[12px] bg-white w-[460px] min-h-[540px] box-border card">
        <div class="text-[24px] text-center text2">欢迎登录系统</div>
        <div class="mt-[57px] flex gap-[32px]">
            <div @click="mode = MODE.PHONE" :class="['text1', mode===MODE.PHONE?'text1-cur':null]">手机号登陆</div>
            <div @click="mode = MODE.PASSWORD" :class="['text1', mode===MODE.PASSWORD?'text1-cur':null]">账号密码登陆
            </div>
        </div>
        <div class="mt-[38px] flex flex-col gap-[20px]">
            <a-input v-model:model-value="from.mobile" placeholder="手机号"></a-input>
            <VerificationCode
                :type="2"
                :api="BUILD_MODE==='merchant'?Api.merchant.sendSms:Api.admin.sendSms"
                v-if="mode === MODE.PHONE"
                :mobile="from.mobile"
                v-model:verification-code="from.code">
            </VerificationCode>
            <a-input v-else v-model:model-value="from.password" placeholder="密码" type="password">
                <template #append>
                    <a-link @click="toPath('/loginSYS/forgot')" :hoverable="false">忘记密码?</a-link>
                </template>
            </a-input>
        </div>
        <div class="flex flex-col mt-[50px] gap-[32px]">
            <a-button v-if="BUILD_MODE==='merchant'" @click="loginSYS(false, from)" type="primary">
                登陆商户端
            </a-button>
            <a-button v-if="BUILD_MODE==='admin'" @click="loginSYS(true, from)" type="primary">
                登陆管理端
            </a-button>
            <a-button
                @click="toPath('/loginSYS/register')"
                type="text">
                去注册
                <icon-arrow-right class="ml-[5px]"/>
            </a-button>
        </div>
    </div>
</template>

<style scoped>
.card {
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
}

.text2 {
    color: rgb(29, 33, 41);
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0;
    text-align: center;
}

.text1 {
    /* 14/CN-Regular */
    color: rgb(78, 89, 105);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
    cursor: pointer;
    transition: 500ms;

    &::after {
        content: '';
        display: block;
        width: 100%;
        height: 2px;
        background-color: rgb(22, 93, 255);
        margin-top: 12px;
        opacity: 0;
        transition: 500ms;
    }
}

.text1-cur {
    color: rgb(22, 93, 255);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;

    &::after {
        opacity: 1;
    }
}
</style>