147 lines
4.0 KiB
Vue
147 lines
4.0 KiB
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);
|
|
toPath('/loginSYS/login');
|
|
}
|
|
});
|
|
}
|
|
</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>
|