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

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

const formRef = useTemplateRef('formRef');
const form = reactive({
    wechat: null,
    mobile: null,
    password: null,
    captcha: null,
    invite: null,
});

const rules = {
    wechat: [{
        required: true,
        message: '微信号不能为空',
    }],
    mobile: [{
        required: true,
        message: '手机号不能为空',
    }],
    password: [{
        required: true,
        message: '密码不能为空',
    }],
    captcha: [{
        required: true,
        message: '验证码不能为空',
    }],
}

const register = async () => {
    formRef.value.validate().then(async (res) => {
        if (res) {
            const firstKey = Object.keys(res)[0];
            Message.warning(res[firstKey].message);
        } else {
            const {msg} = await Api.merchant.register(form);
            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
                ref="formRef"
                :model="form"
                :rules="rules"
                layout="vertical">
                <a-form-item label="微信号" field="wechat">
                    <a-input v-model:model-value="form.wechat" placeholder="请输入微信号"></a-input>
                </a-form-item>
                <a-form-item label="手机号" field="mobile">
                    <a-input v-model:model-value="form.mobile" placeholder="请输入手机号"></a-input>
                </a-form-item>
                <a-form-item label="验证码" field="captcha">
                    <VerificationCode
                        :type="1"
                        :api="Api.merchant.sendSms"
                        :mobile="form.mobile"
                        v-model:verification-code="form.captcha">
                    </VerificationCode>
                </a-form-item>
                <a-form-item label="登陆密码" field="password">
                    <a-input v-model:model-value="form.password" placeholder="请输入登陆密码"></a-input>
                </a-form-item>
                <a-form-item label="邀请码（选填）">
                    <a-input v-model:model-value="form.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>
            <a-button
                @click="toPath('/loginSYS/login')"
                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);

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