mirror of
https://github.com/certd/certd.git
synced 2026-05-15 20:47:31 +08:00
🔱: [client] sync upgrade with 21 commits [trident-sync]
Update README.md
This commit is contained in:
xiaojunnuo
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<a-result status="404" title="404" sub-title="Sorry, the page you visited does not exist.">
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="toHome">返回首页（ Back Home ） </a-button>
|
||||
</template>
|
||||
</a-result>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Exception404",
|
||||
methods: {
|
||||
toHome() {
|
||||
this.$router.push({ path: "/" });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<fs-page class="home—index">
|
||||
<page-cover />
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from "vue";
|
||||
import PageCover from "./page-cover/index.vue";
|
||||
export default defineComponent({
|
||||
components: { PageCover },
|
||||
setup() {}
|
||||
});
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
@@ -0,0 +1,31 @@
|
||||
export default {
|
||||
crud: ` columns: {
|
||||
date:{
|
||||
title: '姓名', //字段名称
|
||||
type: 'text', //字段类型，添加、修改、查询将自动生成相应表单组件
|
||||
},
|
||||
province: {
|
||||
title: '城市',
|
||||
type: 'dict-select', //选择框
|
||||
form: { //表单组件自定义配置，此处配置选择框为多选
|
||||
component: { //支持任何v-model组件
|
||||
filterable: true, multiple: true, clearable: true
|
||||
}
|
||||
},
|
||||
dict: dict({
|
||||
data: [ //本地数据字典
|
||||
{ value: 'sz', label: '深圳' },
|
||||
{ value: 'gz', label: '广州' },
|
||||
{ value: 'wh', label: '武汉' },
|
||||
{ value: 'sh', label: '上海' }
|
||||
]
|
||||
})
|
||||
},
|
||||
status: {
|
||||
title: '状态',
|
||||
type: 'dict-select', //选择框，默认单选
|
||||
dict: dict({ url: '/dicts/OpenStatusEnum' })//远程数据字典
|
||||
},
|
||||
}
|
||||
`
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
@@ -0,0 +1,178 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="210mm"
|
||||
height="210mm"
|
||||
viewBox="0 0 210 210"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="1.0.2-2 (e86c870879, 2021-01-15)"
|
||||
sodipodi:docname="logo.svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.45420139"
|
||||
inkscape:cx="628.76623"
|
||||
inkscape:cy="688.02672"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="svg8"
|
||||
inkscape:document-rotation="0"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1017"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:snap-bbox="true"
|
||||
inkscape:snap-nodes="false"
|
||||
inkscape:snap-bbox-edge-midpoints="false"
|
||||
inkscape:bbox-nodes="true"
|
||||
inkscape:bbox-paths="false"
|
||||
inkscape:snap-global="true"
|
||||
showguides="true"
|
||||
inkscape:guide-bbox="true">
|
||||
<sodipodi:guide
|
||||
position="-128.15534,201.26213"
|
||||
orientation="1,0"
|
||||
id="guide1012" />
|
||||
<sodipodi:guide
|
||||
position="333.7864,165.14563"
|
||||
orientation="1,0"
|
||||
id="guide1014" />
|
||||
<sodipodi:guide
|
||||
position="242.91262,73.689318"
|
||||
orientation="1,0"
|
||||
id="guide1016" />
|
||||
<sodipodi:guide
|
||||
position="105.83717,102.82499"
|
||||
orientation="1,0"
|
||||
id="guide1022" />
|
||||
<sodipodi:guide
|
||||
position="138.0814,102.82499"
|
||||
orientation="0,-1"
|
||||
id="guide1024" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="图层 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
style="display:inline">
|
||||
<path
|
||||
style="fill:#002255;stroke:none;stroke-width:0.625348"
|
||||
d="M 35.587501,69.766667 V 59.766664 h 70.000109 69.99991 v 10.000003 9.999997 H 105.58761 35.587501 Z"
|
||||
id="path12" />
|
||||
<rect
|
||||
style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
|
||||
id="rect22-2"
|
||||
width="32.244232"
|
||||
height="20"
|
||||
x="71.506088"
|
||||
y="106.64581" />
|
||||
<rect
|
||||
style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
|
||||
id="rect22-8-8"
|
||||
width="32.244232"
|
||||
height="20"
|
||||
x="107.42467"
|
||||
y="106.64581" />
|
||||
<rect
|
||||
style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
|
||||
id="rect22-8-5-8"
|
||||
width="32.244232"
|
||||
height="20"
|
||||
x="143.34325"
|
||||
y="106.64581" />
|
||||
<rect
|
||||
style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
|
||||
id="rect22-2-4"
|
||||
width="32.244232"
|
||||
height="20"
|
||||
x="71.506088"
|
||||
y="129.82079" />
|
||||
<rect
|
||||
style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
|
||||
id="rect22-8-8-3"
|
||||
width="32.244232"
|
||||
height="20"
|
||||
x="107.42467"
|
||||
y="129.82079" />
|
||||
<rect
|
||||
style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
|
||||
id="rect22-8-5-8-2"
|
||||
width="32.244232"
|
||||
height="20"
|
||||
x="143.34325"
|
||||
y="129.82079" />
|
||||
<rect
|
||||
style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
|
||||
id="rect22-2-7"
|
||||
width="32.244232"
|
||||
height="20"
|
||||
x="35.587502"
|
||||
y="106.64581" />
|
||||
<rect
|
||||
style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
|
||||
id="rect22-2-4-0"
|
||||
width="32.244232"
|
||||
height="20"
|
||||
x="35.587502"
|
||||
y="129.82079" />
|
||||
<rect
|
||||
style="display:inline;fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
|
||||
id="rect22-2-9"
|
||||
width="32.244232"
|
||||
height="20"
|
||||
x="71.506088"
|
||||
y="82.941666" />
|
||||
<rect
|
||||
style="display:inline;fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
|
||||
id="rect22-8-8-37"
|
||||
width="32.244232"
|
||||
height="20"
|
||||
x="107.42467"
|
||||
y="82.941666" />
|
||||
<rect
|
||||
style="display:inline;fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
|
||||
id="rect22-8-5-8-4"
|
||||
width="32.244232"
|
||||
height="20"
|
||||
x="143.34325"
|
||||
y="82.941666" />
|
||||
<rect
|
||||
style="display:inline;fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
|
||||
id="rect22-2-7-1"
|
||||
width="32.244232"
|
||||
height="20"
|
||||
x="35.587502"
|
||||
y="82.941666" />
|
||||
</g>
|
||||
<polygon
|
||||
points="75.3,174.4 103.1,103.6 79.8,103.6 112.6,41.3 156.4,41.3 129.9,90.5 148.1,90.5 "
|
||||
fill="#f6cc00"
|
||||
id="polygon276"
|
||||
transform="matrix(1.0930933,0,0,0.99853202,-17.517362,-0.52287941)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="d2-page-cover">
|
||||
<div class="d2-page-cover__title" @click="$open('https://github.com/fast-crud/fast-crud')">
|
||||
<div class="title-line">
|
||||
<img width="50" src="./image/logo.svg" />
|
||||
FsAdmin v{{ version }}
|
||||
</div>
|
||||
</div>
|
||||
<p class="d2-page-cover__sub-title">面向配置的crud编程，快速开发crud功能</p>
|
||||
<div class="exampleBox">
|
||||
<div class="left">
|
||||
<fs-highlight :code="helper.crud" lang="javascript" />
|
||||
</div>
|
||||
<div class="icon">
|
||||
<fs-icon :icon="$fsui.icons.arrowRight" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<img style="border: 1px solid #eee" src="./image/crud.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer_box">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div>如果觉得好用，请不要吝啬你的star哟！</div>
|
||||
<a href="https://gitee.com/fast-crud/fast-crud" target="_blank"
|
||||
><img src="https://gitee.com/fast-crud/fast-crud/badge/star.svg?theme=dark" alt="star"
|
||||
/></a>
|
||||
<a href="https://github.com/fast-crud/fast-crud" target="_blank"
|
||||
><img alt="GitHub stars" src="https://img.shields.io/github/stars/fast-crud/fast-crud?logo=github"
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import helper from "./helper";
|
||||
|
||||
import { defineComponent, ref } from "vue";
|
||||
export default defineComponent({
|
||||
name: "PageCover",
|
||||
setup() {
|
||||
const version = ref(import.meta.env.VITE_APP_VERSION);
|
||||
|
||||
return {
|
||||
version
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
helper: helper
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.d2-page-cover {
|
||||
.logo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.d2-page-cover__logo {
|
||||
img {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
.d2-page-cover__title {
|
||||
margin: 20px;
|
||||
font-weight: bold;
|
||||
display: -webkit-flex; /* Safari */
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.title-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.d2-page-cover__sub-title {
|
||||
margin: 0px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.d2-page-cover__build-time {
|
||||
margin: 0px;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.exampleBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 390px;
|
||||
width: 96%;
|
||||
padding: 5px;
|
||||
margin: auto;
|
||||
justify-content: center;
|
||||
.left {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
.icon {
|
||||
padding: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.right {
|
||||
height: 100%;
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.d2-highlight {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer_box {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.right {
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
& > * {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
class="user-layout-login"
|
||||
name="custom-validation"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
v-bind="layout"
|
||||
@finish="handleFinish"
|
||||
@finishFailed="handleFinishFailed"
|
||||
>
|
||||
<!-- <div class="login-title">登录</div>-->
|
||||
<a-tabs :active-key="formState.loginType" :tab-bar-style="{ textAlign: 'center', borderBottom: 'unset' }">
|
||||
<a-tab-pane key="password" tab="用户名密码登录">
|
||||
<a-alert v-if="isLoginError" type="error" show-icon style="margin-bottom: 24px" message="用户名或密码错误" />
|
||||
|
||||
<!-- <div class="login-title">登录</div>-->
|
||||
<a-form-item required has-feedback name="username">
|
||||
<a-input v-model:value="formState.username" placeholder="请输入用户名" size="large" autocomplete="off">
|
||||
<template #prefix>
|
||||
<span class="iconify" data-icon="ion:phone-portrait-outline" data-inline="false"></span>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item has-feedback name="password">
|
||||
<a-input-password
|
||||
v-model:value="formState.password"
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
autocomplete="off"
|
||||
>
|
||||
<template #prefix>
|
||||
<span class="iconify" data-icon="ion:lock-closed-outline" data-inline="false"></span>
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="smsCode" tab="短信验证码登录" :disabled="true" title="暂不支持">
|
||||
<a-form-item required has-feedback name="mobile">
|
||||
<a-input v-model:value="formState.mobile" placeholder="请输入手机号" size="large" autocomplete="off">
|
||||
<template #prefix>
|
||||
<span class="iconify" data-icon="ion:phone-portrait-outline" data-inline="false"></span>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item has-feedback name="imgCode">
|
||||
<a-row :gutter="16">
|
||||
<a-col class="gutter-row" :span="16">
|
||||
<a-input
|
||||
v-model:value="formState.imgCode"
|
||||
placeholder="请输入图片验证码"
|
||||
size="large"
|
||||
autocomplete="off"
|
||||
>
|
||||
<template #prefix>
|
||||
<span class="iconify" data-icon="ion:image-outline" data-inline="false"></span>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-col>
|
||||
<a-col class="gutter-row" :span="8">
|
||||
<img class="image-code" :src="imageCodeUrl" @click="resetImageCode" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="smsCode">
|
||||
<a-row :gutter="16">
|
||||
<a-col class="gutter-row" :span="16">
|
||||
<a-input v-model:value="formState.smsCode" size="large" placeholder="短信验证码">
|
||||
<template #prefix>
|
||||
<span class="iconify" data-icon="ion:mail-outline" data-inline="false"></span>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-col>
|
||||
<a-col class="gutter-row" :span="8">
|
||||
<a-button
|
||||
class="getCaptcha"
|
||||
tabindex="-1"
|
||||
:disabled="smsSendBtnDisabled"
|
||||
@click="sendSmsCode"
|
||||
v-text="smsTime <= 0 ? '发送' : smsTime + ' s'"
|
||||
></a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-item>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<a-form-item>
|
||||
<a-button type="primary" size="large" html-type="submit" :loading="loading" class="login-button">登录</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item class="user-login-other">
|
||||
<!-- <router-link class="register" :to="{ name: 'index' }"> 注册 </router-link>-->
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent, reactive, ref, toRaw, computed } from "vue";
|
||||
import { useUserStore } from "/src/store/modules/user";
|
||||
export default defineComponent({
|
||||
name: "Login",
|
||||
setup() {
|
||||
const loading = ref(false);
|
||||
const userStore = useUserStore();
|
||||
const formRef = ref();
|
||||
const formState = reactive({
|
||||
username: "admin",
|
||||
mobile: "",
|
||||
password: "123456",
|
||||
loginType: "password", //password
|
||||
imgCode: "",
|
||||
smsCode: ""
|
||||
});
|
||||
|
||||
const rules = {
|
||||
mobile: [
|
||||
{
|
||||
required: true,
|
||||
trigger: "change",
|
||||
message: "请输入登录手机号"
|
||||
}
|
||||
],
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
trigger: "change",
|
||||
message: "请输入用户名"
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
trigger: "change",
|
||||
message: "请输入登录密码"
|
||||
}
|
||||
],
|
||||
smsCode: [
|
||||
{
|
||||
required: true,
|
||||
trigger: "change",
|
||||
message: "请输入短信验证码"
|
||||
}
|
||||
]
|
||||
};
|
||||
const layout = {
|
||||
labelCol: {
|
||||
span: 0
|
||||
},
|
||||
wrapperCol: {
|
||||
span: 24
|
||||
}
|
||||
};
|
||||
|
||||
const handleFinish = async (values) => {
|
||||
console.log(values, formState);
|
||||
loading.value = true;
|
||||
try {
|
||||
const userInfo = await userStore.login(toRaw(formState));
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleFinishFailed = (errors) => {
|
||||
console.log(errors);
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
formRef.value.resetFields();
|
||||
};
|
||||
|
||||
const isLoginError = ref();
|
||||
|
||||
const imageCodeUrl = ref();
|
||||
function resetImageCode() {
|
||||
let url = "/basic/code";
|
||||
imageCodeUrl.value = url + "?t=" + new Date().getTime();
|
||||
}
|
||||
resetImageCode();
|
||||
|
||||
const smsTime = ref(0);
|
||||
const smsSendBtnDisabled = computed(() => {
|
||||
if (smsTime.value === 0) {
|
||||
return false;
|
||||
}
|
||||
return !!formState.smsCode;
|
||||
});
|
||||
function sendSmsCode() {
|
||||
//api.sendSmsCode();
|
||||
}
|
||||
return {
|
||||
loading,
|
||||
formState,
|
||||
formRef,
|
||||
rules,
|
||||
layout,
|
||||
handleFinishFailed,
|
||||
handleFinish,
|
||||
resetForm,
|
||||
isLoginError,
|
||||
imageCodeUrl,
|
||||
resetImageCode,
|
||||
smsTime,
|
||||
smsSendBtnDisabled,
|
||||
sendSmsCode
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../../style/theme/index.less";
|
||||
.user-layout-login {
|
||||
label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
color: @primary-color;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
margin: 20px;
|
||||
}
|
||||
.getCaptcha {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.forge-password {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button.login-button {
|
||||
padding: 0 15px;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-login-other {
|
||||
text-align: left;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
line-height: 22px;
|
||||
|
||||
.item-icon {
|
||||
font-size: 24px;
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
margin-left: 16px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.register {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.iconify {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
class="user-layout-login"
|
||||
name="custom-validation"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
v-bind="layout"
|
||||
@finish="handleFinish"
|
||||
@finishFailed="handleFinishFailed"
|
||||
>
|
||||
<a-form-item required has-feedback name="username">
|
||||
<a-input v-model:value="formState.username" size="large" autocomplete="off">
|
||||
<template #prefix>
|
||||
<span class="iconify" data-icon="ion:person" data-inline="false"></span>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item has-feedback name="password">
|
||||
<a-input-password v-model:value="formState.password" size="large" autocomplete="off">
|
||||
<template #prefix>
|
||||
<span class="iconify" data-icon="ion:lock-closed" data-inline="false"></span>
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-form-item has-feedback name="confirmPassword">
|
||||
<a-input-password v-model:value="formState.confirmPassword" size="large" autocomplete="off">
|
||||
<template #prefix>
|
||||
<span class="iconify" data-icon="ion:lock-closed" data-inline="false"></span>
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button type="primary" size="large" html-type="submit" class="login-button">注册</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item class="user-login-other">
|
||||
<router-link class="register" :to="{ name: 'login' }"> 登录 </router-link>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent, reactive, ref, toRaw } from "vue";
|
||||
import { useUserStore } from "/src/store/modules/user";
|
||||
export default defineComponent({
|
||||
name: "Register",
|
||||
setup() {
|
||||
const userStore = useUserStore();
|
||||
const formRef = ref();
|
||||
const formState = reactive({
|
||||
username: "",
|
||||
password: ""
|
||||
});
|
||||
|
||||
const rules = {
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
trigger: "change",
|
||||
message: "请输入用户名"
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
trigger: "change",
|
||||
message: "请输入密码"
|
||||
}
|
||||
],
|
||||
confirmPassword: [
|
||||
{
|
||||
required: true,
|
||||
trigger: "change",
|
||||
message: "请确认密码"
|
||||
}
|
||||
]
|
||||
};
|
||||
const layout = {
|
||||
labelCol: {
|
||||
span: 0
|
||||
},
|
||||
wrapperCol: {
|
||||
span: 24
|
||||
}
|
||||
};
|
||||
|
||||
const handleFinish = async (values) => {
|
||||
console.log(values, formState);
|
||||
const userInfo = await userStore.login(
|
||||
toRaw({
|
||||
password: formState.password,
|
||||
username: formState.username
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleFinishFailed = (errors) => {
|
||||
console.log(errors);
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
formRef.value.resetFields();
|
||||
};
|
||||
|
||||
return {
|
||||
formState,
|
||||
formRef,
|
||||
rules,
|
||||
layout,
|
||||
handleFinishFailed,
|
||||
handleFinish,
|
||||
resetForm
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../../style/theme/index.less";
|
||||
.user-layout-login {
|
||||
label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
color: @primary-color;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
margin: 20px;
|
||||
}
|
||||
.getCaptcha {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.forge-password {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button.login-button {
|
||||
padding: 0 15px;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-login-other {
|
||||
text-align: left;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
line-height: 22px;
|
||||
|
||||
.item-icon {
|
||||
font-size: 24px;
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
margin-left: 16px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.register {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.iconify {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user