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

<script setup>
import {reactive} from 'vue';
import VerificationCode from "../../components/VerificationCode/index.vue";
import Api from "../../api/index.js";
import {Message} from "@arco-design/web-vue";

const from = reactive({
    wechat: null,
    mobile: null,
    password: null,
    captcha: null,
    invite: null,
});

const register = async () => {
    const {msg} = await Api.merchant.register(from);
    Message.success(msg);
}
</script>

<template>
    <div class="p-[50px] rounded-[12px] bg-white w-[460px] box-border card">
        <div class="text-[24px] text-center text2">账号注册</div>
        <div class="mt-[30px] flex flex-col gap-[20px]">
            <a-form layout="vertical">
                <a-form-item label="微信号">
                    <a-input v-model:model-value="from.wechat" placeholder="请输入微信号"></a-input>
                </a-form-item>
                <a-form-item label="手机号">
                    <a-input v-model:model-value="from.mobile" placeholder="请输入手机号"></a-input>
                </a-form-item>
                <a-form-item label="验证码">
                    <VerificationCode
                        :api="Api.merchant.sendSms"
                        :mobile="from.mobile"
                        v-model:verification-code="from.captcha">
                    </VerificationCode>
                </a-form-item>
                <a-form-item label="登陆密码">
                    <a-input v-model:model-value="from.password" placeholder="请输入登陆密码"></a-input>
                </a-form-item>
                <a-form-item label="邀请码（选填）">
                    <a-input v-model:model-value="from.invite" placeholder="请输入邀请码"></a-input>
                </a-form-item>
            </a-form>
        </div>
        <div class="flex flex-col mt-[30px] gap-[32px]">
            <a-button type="primary" @click="register">确认注册</a-button>
        </div>
    </div>
</template>

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

    :deep(.arco-form-item-label-col) {
        line-height: 20px;
    }
}

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