SIGN UP
@@ -42,6 +43,7 @@
@login="onLogin"
@register="onRegister"
@submit-email-code="onSubmitEmailCode"
+ @back="onBack"
:name="data.name"
:email="data.email"
:password="data.password"
@@ -58,6 +60,8 @@
import login from './login.vue'
import register from './register.vue'
import emailVerify from './email-verify.vue'
+ import registerSuccess from './register-success.vue'
+ import retrievePassword from './retrieve-password.vue'
import myEvent from '@/utils/myEvent'
const data = ref({
name: '',
@@ -65,11 +69,11 @@
password: '',
type: ''
})
- const show = ref(false)
const TabNames = {
login: 'login',
- sign_up: 'sign_up',
+ register: 'register',
email_verify: 'email_verify',
+ register_success: 'register_success',
retrieve_password: 'retrieve_password'
}
const tabList = markRaw([
@@ -78,7 +82,7 @@
component: login
},
{
- name: TabNames.sign_up,
+ name: TabNames.register,
component: register
},
{
@@ -89,15 +93,20 @@
{
name: TabNames.retrieve_password,
title: 'RETRIEVE PASSWORD',
- component: login
+ component: retrievePassword
+ },
+ {
+ name: TabNames.register_success,
+ component: registerSuccess
}
])
+ const show = ref(false)
const currentTab = ref(TabNames.login)
const curentTabInfo = computed(() => tabList.find((v) => v.name === currentTab.value))
const lastTab = ref('')
watch(currentTab, (v, o) => (lastTab.value = o))
const onBack = () => {
- if (lastTab.value) currentTab.value = lastTab.value
+ currentTab.value = lastTab.value || TabNames.login
}
const open = (type?: string) => {
currentTab.value = TabNames[type] || TabNames.login
@@ -118,13 +127,17 @@
}
const onRegister = (res: any) => {
data.value = res
- data.value.type = TabNames.sign_up
+ data.value.type = TabNames.register
currentTab.value = TabNames.email_verify
}
const onSubmitEmailCode = (code: string) => {
- // data.value.code = code
- console.log(code)
- show.value = false
+ if (data.value.type === TabNames.login) {
+ console.log('登录', code)
+ show.value = false
+ } else {
+ console.log('注册', code)
+ currentTab.value = TabNames.register_success
+ }
}
@@ -147,14 +160,16 @@
height: 100%;
overflow: hidden;
position: relative;
+ background: url('@/assets/images/login/bg.jpg') no-repeat center center / 100% 100%;
+ > *:not(.content) {
+ position: absolute;
+ }
> .bg {
width: 100%;
height: 100%;
display: block;
}
- > * {
- position: absolute;
- }
+
> .logo {
width: auto;
height: 4rem;
@@ -170,9 +185,10 @@
}
> .content {
width: 34rem;
- top: 5rem;
- right: 6rem;
height: calc(100% - 10rem);
+ margin: 5rem 6rem auto auto;
+ display: flex;
+ flex-direction: column;
> .header {
--padding-bottom: 1.2rem;
padding-bottom: var(--padding-bottom);
diff --git a/src/views/login/password-tip.vue b/src/views/login/password-tip.vue
index 0ca3f14..4f7f087 100644
--- a/src/views/login/password-tip.vue
+++ b/src/views/login/password-tip.vue
@@ -40,15 +40,15 @@
.password-tip {
background: #404040;
color: #fff;
- font-size: 1.4rem;
- padding: 2rem;
- border-radius: 2rem;
+ font-size: 1.1rem;
+ padding: 1.5rem;
+ border-radius: 1.5rem;
line-height: normal;
> div {
display: flex;
align-items: center;
- margin-bottom: 0.5rem;
+ margin-bottom: 1rem;
&:last-child {
margin-bottom: 0;
}
diff --git a/src/views/login/register-success.vue b/src/views/login/register-success.vue
new file mode 100644
index 0000000..d619448
--- /dev/null
+++ b/src/views/login/register-success.vue
@@ -0,0 +1,113 @@
+
+
+
+
+
+
+
+
diff --git a/src/views/login/retrieve-password.vue b/src/views/login/retrieve-password.vue
index 1f65234..30a657e 100644
--- a/src/views/login/retrieve-password.vue
+++ b/src/views/login/retrieve-password.vue
@@ -1,120 +1,183 @@
Welcome to Stylish Parade!
+ Please switch to the Login tab to log in.
+
+
-
- 
- 
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/src/views/main-header.vue b/src/views/main-header.vue
index 406d949..54f3a83 100644
--- a/src/views/main-header.vue
+++ b/src/views/main-header.vue
@@ -124,7 +124,7 @@
}
const onSettings = () => {
hideProfilePopover()
- console.log('settings')
+ router.push('/settings')
}
const onLogout = () => {
hideProfilePopover()
diff --git a/src/views/setting/components/Radio.vue b/src/views/setting/components/Radio.vue
new file mode 100644
index 0000000..7c05e54
--- /dev/null
+++ b/src/views/setting/components/Radio.vue
@@ -0,0 +1,103 @@
+
+
+
+
+
+
+
diff --git a/src/views/setting/index.vue b/src/views/setting/index.vue
new file mode 100644
index 0000000..1a8eed3
--- /dev/null
+++ b/src/views/setting/index.vue
@@ -0,0 +1,798 @@
+
+
-
-
- 
-
-
-
-
-
-
-
-
-
- {{
- $t('submit')
- }}
-
-
-
-
-
+
+
+
-
- {{ $t('Login.retrievePassword') }}
- -
-
+
+
+ Enter a new password for
+ {{ formData.email }} +
+ + {{ formData.email }} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Profile
+
+ Update your display name, avatar, social links and account security.
+
+
+
+
+
+
+
+ 
+
+
+
+
+ {{ fullName }}
+ {{ displayData.email }}
+
+
+
+
+
+
+
+ FIRST NAME
+ {{ displayData.firstName }}
+
+
+
+
+ LAST NAME
+ {{ displayData.lastName }}
+
+
+
+
+ USERNAME
+ {{ displayData.username }}
+
+
+ Your public username on Stylish Parade.
+
+
+
+ ROLE
+
+
+ Select up to 2 labels that suit you.
+
+
+
+
+
+
+
+
+
+
+ Security
+ Manage your login email and password.
+
+
+
+
+
+
+
+
+ EMAIL
+ {{ displayData.email }}
+
+
+
+
+
+
+ NEW EMAIL ADDRESS
+
+
+ Verify
+
+
+
+
+
+ PASSWORD
+ .........
+
+
+
+
+ NEW PASSWORD
+
+
+ You must satisfy ALL password conditions to register.
+
+
+
+ CURRENT PASSWORD
+
+
+
+
+
+
+
+
+
+
+ Language & Region
+ Set your preferred language, region and currency display.
+
+
+
+
+
+ DISPLAY LANGUAGE
+
+ {{ displayData.language }}
+
+
+
+
+
+
+
+ REGION
+
+ {{ displayData.region }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+