Compare commits
No commits in common. 'dev' and 'main' have entirely different histories.
@ -1 +1 @@
|
|||||||
VITE_API_BASE_URL= 'http://localhost:8080/'
|
VITE_API_BASE_URL= 'http://localhost:8080'
|
||||||
@ -1,2 +0,0 @@
|
|||||||
{
|
|
||||||
}
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
export interface QueryParams {
|
|
||||||
pageNum: number;
|
|
||||||
pageSize: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ModelData {
|
|
||||||
modelName: string;
|
|
||||||
modelPrice: number;
|
|
||||||
remark: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IndexData {
|
|
||||||
serverUrl: string;
|
|
||||||
userKey: string;
|
|
||||||
serverUrl2: string;
|
|
||||||
userBalance: number;
|
|
||||||
userBalanceMonth: number;
|
|
||||||
modelList: ModelData[];
|
|
||||||
pushUrl: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface OrderData {
|
|
||||||
orderNo : string;
|
|
||||||
paymentPrice : number;
|
|
||||||
isPay : string;
|
|
||||||
createTime : string;
|
|
||||||
paymentWay : string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DataTable {
|
|
||||||
total: number;
|
|
||||||
rows: any[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface PayRreturn {
|
|
||||||
payUrl: string;
|
|
||||||
aoid: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取首页信息
|
|
||||||
export function getCertIndex() {
|
|
||||||
return axios.get<IndexData>('/cert/index');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 用户订单列表
|
|
||||||
export function currentUserListOrder(query: QueryParams) {
|
|
||||||
return axios.get<DataTable>('/cert/order/user/list');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 支付
|
|
||||||
export function payment(newOrder: OrderData) {
|
|
||||||
return axios.post<PayRreturn>('/order/payment', newOrder);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 支付状态刷新
|
|
||||||
export function refreshStatus(orderNo: string) {
|
|
||||||
return axios.post(`/order/payment/${orderNo}`);
|
|
||||||
}
|
|
||||||
|
Before Width: | Height: | Size: 60 KiB |
@ -0,0 +1,10 @@
|
|||||||
|
export default {
|
||||||
|
path: 'https://arco.design',
|
||||||
|
name: 'arcoWebsite',
|
||||||
|
meta: {
|
||||||
|
locale: 'menu.arcoWebsite',
|
||||||
|
icon: 'icon-link',
|
||||||
|
requiresAuth: true,
|
||||||
|
order: 8,
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -1,11 +1,19 @@
|
|||||||
export type RoleType = '' | '*' | 'admin' | 'user';
|
export type RoleType = '' | '*' | 'admin' | 'user';
|
||||||
export interface UserState {
|
export interface UserState {
|
||||||
userId: number;
|
name?: string;
|
||||||
userName: string;
|
avatar?: string;
|
||||||
nickName: string;
|
job?: string;
|
||||||
email: string;
|
organization?: string;
|
||||||
phonenumber: string;
|
location?: string;
|
||||||
sex: string;
|
email?: string;
|
||||||
avatar: string;
|
introduction?: string;
|
||||||
password: string;
|
personalWebsite?: string;
|
||||||
|
jobName?: string;
|
||||||
|
organizationName?: string;
|
||||||
|
locationName?: string;
|
||||||
|
phone?: string;
|
||||||
|
registrationDate?: string;
|
||||||
|
accountId?: string;
|
||||||
|
certification?: number;
|
||||||
|
role: RoleType;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,35 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-col class="banner">
|
|
||||||
<a-col :span="8">
|
|
||||||
<a-typography-title :heading="5" style="margin-top: 0">
|
|
||||||
{{ $t('workplace.welcome') }} {{ userInfo.name }}
|
|
||||||
</a-typography-title>
|
|
||||||
</a-col>
|
|
||||||
<a-divider class="panel-border" />
|
|
||||||
</a-col>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed } from 'vue';
|
|
||||||
import { useUserStore } from '@/store';
|
|
||||||
|
|
||||||
const userStore = useUserStore();
|
|
||||||
const userInfo = computed(() => {
|
|
||||||
return {
|
|
||||||
name: userStore.userName,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.banner {
|
|
||||||
width: 100%;
|
|
||||||
padding: 20px 20px 0 20px;
|
|
||||||
background-color: var(--color-bg-2);
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.arco-icon-home) {
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,139 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-grid :cols="24" :row-gap="16" class="panel">
|
|
||||||
<a-grid-item
|
|
||||||
class="panel-col"
|
|
||||||
:span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
|
|
||||||
>
|
|
||||||
<a-space>
|
|
||||||
<a-avatar :size="54" class="col-avatar">
|
|
||||||
<img
|
|
||||||
alt="avatar"
|
|
||||||
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image"
|
|
||||||
/>
|
|
||||||
</a-avatar>
|
|
||||||
<a-statistic
|
|
||||||
title="帐户余额"
|
|
||||||
:value="indexData?.userBalance"
|
|
||||||
:precision="2"
|
|
||||||
:value-from="0"
|
|
||||||
animation
|
|
||||||
show-group-separator
|
|
||||||
>
|
|
||||||
<template #suffix>
|
|
||||||
<span class="unit">元</span>
|
|
||||||
</template>
|
|
||||||
</a-statistic>
|
|
||||||
</a-space>
|
|
||||||
</a-grid-item>
|
|
||||||
<a-grid-item
|
|
||||||
class="panel-col"
|
|
||||||
:span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
|
|
||||||
>
|
|
||||||
<a-space>
|
|
||||||
<a-avatar :size="54" class="col-avatar">
|
|
||||||
<img
|
|
||||||
alt="avatar"
|
|
||||||
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image"
|
|
||||||
/>
|
|
||||||
</a-avatar>
|
|
||||||
<a-statistic
|
|
||||||
title="本月消费"
|
|
||||||
:value="indexData?.userBalanceMonth"
|
|
||||||
:precision="2"
|
|
||||||
:value-from="0"
|
|
||||||
animation
|
|
||||||
show-group-separator
|
|
||||||
>
|
|
||||||
<template #suffix>
|
|
||||||
<span class="unit">元</span>
|
|
||||||
</template>
|
|
||||||
</a-statistic>
|
|
||||||
</a-space>
|
|
||||||
</a-grid-item>
|
|
||||||
<a-grid-item :span="24">
|
|
||||||
<a-divider class="panel-border" />
|
|
||||||
</a-grid-item>
|
|
||||||
</a-grid>
|
|
||||||
<a-card class="general-card" title="推荐计划">
|
|
||||||
<a-space direction="vertical" fill :size="10">
|
|
||||||
<a-input-search :model-value="indexData?.pushUrl" readonly button-text="复制" search-button @search="handleCopy(indexData?.pushUrl)">
|
|
||||||
<template #prepend>
|
|
||||||
推荐链接
|
|
||||||
</template>
|
|
||||||
</a-input-search>
|
|
||||||
</a-space>
|
|
||||||
</a-card>
|
|
||||||
<a-card class="general-card" title="服务信息">
|
|
||||||
<a-space direction="vertical" fill>
|
|
||||||
<a-input-search :model-value="indexData?.serverUrl" readonly button-text="复制" search-button @search="handleCopy(indexData?.pushUrl)">
|
|
||||||
<template #prepend>
|
|
||||||
Api Server
|
|
||||||
</template>
|
|
||||||
</a-input-search>
|
|
||||||
<a-input-search :model-value="indexData?.userKey" readonly button-text="复制" search-button @search="handleCopy(indexData?.pushUrl)">
|
|
||||||
<template #prepend>
|
|
||||||
Api Key
|
|
||||||
</template>
|
|
||||||
</a-input-search>
|
|
||||||
<a-input-password :model-value="indexData?.serverUrl2" readonly button-text="复制" search-button @search="handleCopy(indexData?.pushUrl)">
|
|
||||||
<template #prepend>
|
|
||||||
Api Server备用
|
|
||||||
</template>
|
|
||||||
</a-input-password>
|
|
||||||
</a-space>
|
|
||||||
</a-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { Message } from '@arco-design/web-vue';
|
|
||||||
|
|
||||||
function handleCopy(id: string){
|
|
||||||
// 获取需要复制的元素以及元素内的文本内容
|
|
||||||
const text = id;
|
|
||||||
// 添加一个input元素放置需要的文本内容
|
|
||||||
const input = document.createElement("input");
|
|
||||||
input.value = text;
|
|
||||||
document.body.appendChild(input);
|
|
||||||
// 选中并复制文本到剪切板
|
|
||||||
input.select();
|
|
||||||
document.execCommand("copy");
|
|
||||||
// 移除input元素
|
|
||||||
document.body.removeChild(input);
|
|
||||||
Message.success("复制成功");
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: 'DataPanel',
|
|
||||||
props: {
|
|
||||||
indexData: {}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.arco-grid.panel {
|
|
||||||
margin-bottom: 0;
|
|
||||||
padding: 16px 20px 0 20px;
|
|
||||||
}
|
|
||||||
.panel-col {
|
|
||||||
padding-left: 43px;
|
|
||||||
border-right: 1px solid rgb(var(--gray-2));
|
|
||||||
}
|
|
||||||
.col-avatar {
|
|
||||||
margin-right: 12px;
|
|
||||||
background-color: var(--color-fill-2);
|
|
||||||
}
|
|
||||||
.up-icon {
|
|
||||||
color: rgb(var(--red-6));
|
|
||||||
}
|
|
||||||
.unit {
|
|
||||||
margin-left: 8px;
|
|
||||||
color: rgb(var(--gray-8));
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
:deep(.panel-border) {
|
|
||||||
margin: 4px 0 0 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,130 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="container">
|
|
||||||
<div class="left-side">
|
|
||||||
<div class="panel">
|
|
||||||
<Banner />
|
|
||||||
<DataPanel :indexData="indexData"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { getCertIndex } from '@/api/cert'
|
|
||||||
import Banner from './components/banner.vue';
|
|
||||||
import DataPanel from './components/data-panel.vue';
|
|
||||||
|
|
||||||
const modelList = ref([]);
|
|
||||||
const serverUrl = ref("");
|
|
||||||
const serverUrl2 = ref("");
|
|
||||||
const userKey = ref("");
|
|
||||||
const userBalance = ref(0);
|
|
||||||
const userBalanceMonth = ref(0);
|
|
||||||
const pushUrl = ref("");
|
|
||||||
const indexData = ref({});
|
|
||||||
|
|
||||||
|
|
||||||
const Init = async () => {
|
|
||||||
const res = await getCertIndex()
|
|
||||||
serverUrl.value = res.data.serverUrl;
|
|
||||||
indexData.value = res.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
Init();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: 'Main2',
|
|
||||||
components: {
|
|
||||||
'DataPanel': DataPanel
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.container {
|
|
||||||
background-color: var(--color-fill-2);
|
|
||||||
padding: 16px 20px;
|
|
||||||
padding-bottom: 0;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-side {
|
|
||||||
flex: 1;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-side {
|
|
||||||
width: 280px;
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
background-color: var(--color-bg-2);
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
:deep(.panel-border) {
|
|
||||||
margin-bottom: 0;
|
|
||||||
border-bottom: 1px solid rgb(var(--gray-2));
|
|
||||||
}
|
|
||||||
.moduler-wrap {
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: var(--color-bg-2);
|
|
||||||
:deep(.text) {
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
color: rgb(var(--gray-8));
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.wrapper) {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
.text {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
.icon {
|
|
||||||
color: rgb(var(--arcoblue-6));
|
|
||||||
background-color: #e8f3ff;
|
|
||||||
}
|
|
||||||
.text {
|
|
||||||
color: rgb(var(--arcoblue-6));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.icon) {
|
|
||||||
display: inline-block;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
color: rgb(var(--dark-gray-1));
|
|
||||||
line-height: 32px;
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
background-color: rgb(var(--gray-1));
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
// responsive
|
|
||||||
.mobile {
|
|
||||||
.container {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.right-side {
|
|
||||||
// display: none;
|
|
||||||
width: 100%;
|
|
||||||
margin-left: 0;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="container">
|
|
||||||
<a-spin style="width: 100%">
|
|
||||||
<a-card
|
|
||||||
class="general-card"
|
|
||||||
:header-style="{ paddingBottom: '0' }"
|
|
||||||
:body-style="{ padding: '17px 20px 21px 20px' }"
|
|
||||||
>
|
|
||||||
<template #title>
|
|
||||||
模型列表与定价
|
|
||||||
</template>
|
|
||||||
<a-table
|
|
||||||
:data="modelList"
|
|
||||||
:pagination="false"
|
|
||||||
:bordered="false"
|
|
||||||
:scroll="{ x: '100%', y: '264px' }"
|
|
||||||
>
|
|
||||||
<template #columns>
|
|
||||||
<a-table-column title="模型名称" data-index="modelName"></a-table-column>
|
|
||||||
<a-table-column title="提问价格" data-index="modelPrice">
|
|
||||||
<template #cell="{ record }">
|
|
||||||
￥{{NumFilter4(record.modelPrice*1000)}}/k
|
|
||||||
</template>
|
|
||||||
</a-table-column>
|
|
||||||
<a-table-column title="回答价格" data-index="modelPrice">
|
|
||||||
<template #cell="{ record }">
|
|
||||||
￥{{NumFilter4(record.modelPrice*1000)}}/k
|
|
||||||
</template>
|
|
||||||
</a-table-column>
|
|
||||||
<a-table-column title="备注" data-index="remark"></a-table-column>
|
|
||||||
</template>
|
|
||||||
</a-table>
|
|
||||||
</a-card>
|
|
||||||
</a-spin>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { getCertIndex } from '@/api/cert'
|
|
||||||
import type { ModelData } from '@/api/cert'
|
|
||||||
|
|
||||||
const modelList = ref();
|
|
||||||
|
|
||||||
const Init = async () => {
|
|
||||||
const res = await getCertIndex()
|
|
||||||
modelList.value = res.data.modelList as ModelData[];
|
|
||||||
}
|
|
||||||
|
|
||||||
function NumFilter4 (value: number) {
|
|
||||||
// 截取当前数据到小数点后两位
|
|
||||||
return parseFloat(`${value}`).toFixed(4)
|
|
||||||
}
|
|
||||||
|
|
||||||
Init();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: 'Model',
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.container {
|
|
||||||
background-color: var(--color-fill-2);
|
|
||||||
padding: 16px 20px;
|
|
||||||
padding-bottom: 0;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.general-card {
|
|
||||||
min-height: 395px;
|
|
||||||
}
|
|
||||||
:deep(.arco-table-tr) {
|
|
||||||
height: 44px;
|
|
||||||
.arco-typography {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.increases-cell {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
span {
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,216 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="login-form-wrapper">
|
|
||||||
<div class="login-form-title">{{ $t('register.form.title') }}</div>
|
|
||||||
<div class="login-form-sub-title">{{ $t('register.form.title') }}</div>
|
|
||||||
<div class="login-form-error-msg">{{ errorMessage }}</div>
|
|
||||||
<a-form
|
|
||||||
ref="registerForm"
|
|
||||||
:model="userInfo"
|
|
||||||
class="login-form"
|
|
||||||
layout="vertical"
|
|
||||||
@submit="handleSubmit"
|
|
||||||
>
|
|
||||||
<a-form-item
|
|
||||||
field="username"
|
|
||||||
:rules="[{ required: true, message: $t('register.form.userName.errMsg') }]"
|
|
||||||
:validate-trigger="['change', 'blur']"
|
|
||||||
hide-label
|
|
||||||
>
|
|
||||||
<a-input
|
|
||||||
v-model="userInfo.username"
|
|
||||||
:placeholder="$t('register.form.userName.placeholder')"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<icon-user />
|
|
||||||
</template>
|
|
||||||
</a-input>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
field="password"
|
|
||||||
:rules="[{ required: true, message: $t('register.form.password.errMsg') }]"
|
|
||||||
:validate-trigger="['change', 'blur']"
|
|
||||||
hide-label
|
|
||||||
>
|
|
||||||
<a-input-password
|
|
||||||
v-model="userInfo.password"
|
|
||||||
:placeholder="$t('register.form.password.placeholder')"
|
|
||||||
allow-clear
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<icon-lock />
|
|
||||||
</template>
|
|
||||||
</a-input-password>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
field="confirmPassword"
|
|
||||||
:rules="[{ required: true, message: $t('register.form.confirmPassword.errMsg') }]"
|
|
||||||
:validate-trigger="['change', 'blur']"
|
|
||||||
hide-label
|
|
||||||
>
|
|
||||||
<a-input-password
|
|
||||||
v-model="userInfo.confirmPassword"
|
|
||||||
:placeholder="$t('register.form.confirmPassword.placeholder')"
|
|
||||||
allow-clear
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<icon-lock />
|
|
||||||
</template>
|
|
||||||
</a-input-password>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
field="email"
|
|
||||||
:rules="[{ required: true, message: $t('register.form.email.errMsg') }]"
|
|
||||||
:validate-trigger="['change', 'blur']"
|
|
||||||
hide-label
|
|
||||||
>
|
|
||||||
<a-input
|
|
||||||
v-model="userInfo.email"
|
|
||||||
:placeholder="$t('register.form.email.placeholder')"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<icon-email />
|
|
||||||
</template>
|
|
||||||
</a-input>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
field="code"
|
|
||||||
:rules="[{ required: true, message: $t('register.form.code.errMsg') }]"
|
|
||||||
:validate-trigger="['change', 'blur']"
|
|
||||||
hide-label
|
|
||||||
>
|
|
||||||
<a-input
|
|
||||||
v-model="userInfo.code"
|
|
||||||
:placeholder="$t('register.form.code.placeholder')"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<icon-dice />
|
|
||||||
</template>
|
|
||||||
<template #append>
|
|
||||||
<a-button @click="getCode">获取邮箱验证码</a-button>
|
|
||||||
</template>
|
|
||||||
</a-input>
|
|
||||||
</a-form-item>
|
|
||||||
<a-space :size="16" direction="vertical">
|
|
||||||
<a-button type="primary" html-type="submit" long :loading="loading">
|
|
||||||
{{ $t('login.form.register') }}
|
|
||||||
</a-button>
|
|
||||||
<a-button type="text" long class="login-form-register-btn" href="/login">
|
|
||||||
{{ $t('login.form.login') }}
|
|
||||||
</a-button>
|
|
||||||
</a-space>
|
|
||||||
</a-form>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, reactive } from 'vue';
|
|
||||||
import { useRouter } from 'vue-router';
|
|
||||||
import { Message } from '@arco-design/web-vue';
|
|
||||||
import { ValidatedError } from '@arco-design/web-vue/es/form/interface';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
import useLoading from '@/hooks/loading';
|
|
||||||
import type { RegisterData } from '@/api/user';
|
|
||||||
import { getEmailCode, register } from '@/api/user';
|
|
||||||
import { getCookie } from '@/utils/index';
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const { t } = useI18n();
|
|
||||||
const errorMessage = ref('');
|
|
||||||
const { loading, setLoading } = useLoading();
|
|
||||||
|
|
||||||
const inviteCode = getCookie('inviteCode')
|
|
||||||
|
|
||||||
const userInfo = reactive({
|
|
||||||
username: '',
|
|
||||||
password: '',
|
|
||||||
confirmPassword: '',
|
|
||||||
email: '',
|
|
||||||
code: '',
|
|
||||||
uuid: ''
|
|
||||||
});
|
|
||||||
|
|
||||||
const getCode = async () => {
|
|
||||||
const emailRegex = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
|
|
||||||
if(userInfo.email === '' || !emailRegex.test(userInfo.email)){
|
|
||||||
Message.error(t('register.form.email.error'));
|
|
||||||
} else {
|
|
||||||
const res = await getEmailCode(userInfo.email);
|
|
||||||
userInfo.uuid = res.data.uuid;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async ({
|
|
||||||
errors,
|
|
||||||
values,
|
|
||||||
}: {
|
|
||||||
errors: Record<string, ValidatedError> | undefined;
|
|
||||||
values: Record<string, any>;
|
|
||||||
}) => {
|
|
||||||
if (loading.value) return;
|
|
||||||
if (userInfo.password !== userInfo.confirmPassword) {
|
|
||||||
Message.error(t('register.form.password.nomatch.error'));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(userInfo.password.length < 6){
|
|
||||||
Message.error('密码长度不能小于6位');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!errors) {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
values.inviteCode = inviteCode
|
|
||||||
const req = await register(values as RegisterData);
|
|
||||||
Message.success(`${userInfo.email} 注册成功`);
|
|
||||||
setTimeout(function(){
|
|
||||||
window.location.href = "/login";
|
|
||||||
}, 1500);
|
|
||||||
} catch (err) {
|
|
||||||
errorMessage.value = (err as Error).message;
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.login-code-img {
|
|
||||||
height: 40px;
|
|
||||||
padding-left: 12px;
|
|
||||||
}
|
|
||||||
.login-form {
|
|
||||||
&-wrapper {
|
|
||||||
width: 320px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-title {
|
|
||||||
color: var(--color-text-1);
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-sub-title {
|
|
||||||
color: var(--color-text-3);
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-error-msg {
|
|
||||||
height: 32px;
|
|
||||||
color: rgb(var(--red-6));
|
|
||||||
line-height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-password-actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-register-btn {
|
|
||||||
color: var(--color-text-3) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue