366 lines
6.7 KiB
Vue
366 lines
6.7 KiB
Vue
<template>
|
||
<div>
|
||
<mf-dialog
|
||
:visible="visible"
|
||
modal-class="login-dialog"
|
||
class="login-dialog-wrapper"
|
||
hideTitle
|
||
:footer="false"
|
||
unmountOnClose
|
||
@cancel="cancel"
|
||
width="500px">
|
||
<div class="login-close">
|
||
<mf-icon
|
||
value="icon-close"
|
||
@click="cancel" />
|
||
</div>
|
||
<div class="login-title">
|
||
{{ $t('common.loginAccount') }}
|
||
<!-- <div class="login-title-lang">
|
||
<div
|
||
:class="`login-title-lang-item ${
|
||
lang == 'zh_HK' ? 'active' : ''
|
||
}`"
|
||
@click="changeLang('zh_HK')">
|
||
繁中
|
||
</div>
|
||
<div class="login-title-lang-divider"></div>
|
||
<div
|
||
:class="`login-title-lang-item ${
|
||
lang == 'en_US' ? 'active' : ''
|
||
}`"
|
||
@click="changeLang('en_US')">
|
||
English
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
<mf-input
|
||
v-model="username"
|
||
class="login-input"
|
||
:placeholder="`${$t('common.userEmailPlaceholder')}`" />
|
||
<mf-input
|
||
v-model="password"
|
||
class="login-input"
|
||
inputType="password"
|
||
:placeholder="`${$t('common.passwordPlaceholder')}`" />
|
||
|
||
<div class="login-link">
|
||
<mf-button
|
||
class="grey"
|
||
type="text"
|
||
@click="showForgot">
|
||
{{ $t('common.forgotPassword') }}？
|
||
</mf-button>
|
||
</div>
|
||
<div class="login-submit">
|
||
<mf-button
|
||
size="large"
|
||
@click="showRegister">
|
||
{{ $t('common.register') }}
|
||
</mf-button>
|
||
<mf-button
|
||
size="large"
|
||
type="primary"
|
||
@click="login"
|
||
:loading="loading">
|
||
{{ $t('common.login') }}
|
||
</mf-button>
|
||
</div>
|
||
</mf-dialog>
|
||
<Forgot
|
||
v-if="forgotVisible"
|
||
:visible="forgotVisible"
|
||
@open="forgotVisible = true"
|
||
@back="back"
|
||
@cancel="forgotVisible = false" />
|
||
|
||
<Register
|
||
v-if="registerVisible"
|
||
:visible="registerVisible"
|
||
@cancel="registerVisible = false"
|
||
@back="backFormRegister"
|
||
@open="registerVisible = true" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Forgot from './Forgot.vue'
|
||
import Register from './Register.vue'
|
||
import { mapGetters } from 'vuex'
|
||
import i18n from '@/lang/i18n'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
email: '',
|
||
forgotVisible: false,
|
||
emailVisible: false,
|
||
registerVisible: false,
|
||
loading: false,
|
||
username: '',
|
||
password: ''
|
||
}
|
||
},
|
||
props: {
|
||
visible: Boolean,
|
||
register: Boolean
|
||
},
|
||
components: {
|
||
Forgot,
|
||
Register
|
||
},
|
||
computed: {
|
||
...mapGetters(['lang'])
|
||
},
|
||
mounted() {
|
||
// let loginInfo = this.$auth.getLogin()
|
||
// if (loginInfo) {
|
||
// loginInfo = JSON.parse(loginInfo)
|
||
// this.username = loginInfo.username
|
||
// this.password = loginInfo.password
|
||
// }
|
||
this.username = ""
|
||
this.password = ""
|
||
let { inviteCode } = this.$route.query || {}
|
||
if (inviteCode) {
|
||
this.showRegister()
|
||
}
|
||
},
|
||
methods: {
|
||
cancel() {
|
||
this.username = ''
|
||
this.password = ''
|
||
this.$emit('cancel')
|
||
},
|
||
showRegister() {
|
||
this.registerVisible = true
|
||
this.$emit('cancel')
|
||
},
|
||
changeLang(value) {
|
||
if (value != this.lang) {
|
||
this.$store.dispatch('main/setLanguage', value)
|
||
i18n.global.locale = value
|
||
}
|
||
},
|
||
back() {
|
||
this.forgotVisible = false
|
||
this.$emit('open')
|
||
},
|
||
backFormRegister() {
|
||
this.registerVisible = false
|
||
this.$emit('open')
|
||
},
|
||
login() {
|
||
if (!this.username) {
|
||
this.$message.error(this.$t('common.userEmailPlaceholder'))
|
||
return
|
||
}
|
||
if (!this.password) {
|
||
this.$message.error(this.$t('common.passwordPlaceholder'))
|
||
return
|
||
}
|
||
this.loading = true
|
||
this.$axios({
|
||
url: 'api/user/login',
|
||
method: 'POST',
|
||
data: {
|
||
username: this.username,
|
||
password: this.password
|
||
}
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
this.$store.dispatch('user/login', res).then((_) => {
|
||
this.loading = false
|
||
this.$message.success(
|
||
this.$t('common.loginSuccessfully')
|
||
)
|
||
this.$store.dispatch('user/setLoginInfo', {
|
||
username: this.username,
|
||
password: this.password
|
||
})
|
||
this.username = ""
|
||
this.password = ""
|
||
this.$emit('cancel')
|
||
})
|
||
} else {
|
||
this.loading = false
|
||
}
|
||
})
|
||
.catch((_) => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
showForgot() {
|
||
this.forgotVisible = true
|
||
this.$emit('cancel')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.login-dialog {
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
background: linear-gradient(
|
||
0deg,
|
||
rgba(39, 20, 51, 0.7) 0%,
|
||
rgba(230, 33, 122, 0.7) 49%
|
||
);
|
||
border-radius: 20px;
|
||
border: 2px solid #e6217a;
|
||
width: 500px;
|
||
height: 320px;
|
||
top: 45% !important;
|
||
transform: translateY(-45%) !important;
|
||
|
||
&-wrapper {
|
||
.arco-modal-mask {
|
||
/* 背景高斯模糊关键属性 */
|
||
backdrop-filter: blur(10px);
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
}
|
||
}
|
||
|
||
.arco-modal-body {
|
||
padding: 24px 30px 30px 30px;
|
||
}
|
||
|
||
.login-close {
|
||
position: absolute;
|
||
right: 12px;
|
||
top: 6px;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
|
||
.mf-icon {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.login-title {
|
||
font-size: 20px;
|
||
color: #ffffff;
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
&-lang {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 24px;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
border-radius: 5px;
|
||
|
||
&-divider {
|
||
height: 8px;
|
||
width: 1px;
|
||
background-color: rgba(#fff, 0.2);
|
||
}
|
||
|
||
&-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 16px;
|
||
font-size: 12px;
|
||
color: rgba(#ffffff, 0.3);
|
||
cursor: pointer;
|
||
|
||
&.active {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.login-input {
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 10px;
|
||
justify-content: center;
|
||
border-radius: 10px;
|
||
border: 1px solid rgba(#ffffff, 0.3);
|
||
height: 40px;
|
||
margin-top: 20px;
|
||
padding: 0 16px;
|
||
font-size: 14px;
|
||
color: #ffffff;
|
||
position: relative;
|
||
cursor: pointer;
|
||
background-color: transparent !important;
|
||
cursor: text;
|
||
font-size: 14px;
|
||
|
||
::placeholder {
|
||
color: rgba(#fff, 0.5);
|
||
}
|
||
|
||
&.arco-input-wrapper:focus-within {
|
||
background-color: transparent;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: transparent;
|
||
border-color: #fff;
|
||
}
|
||
|
||
.arco-image {
|
||
position: absolute;
|
||
left: 16px;
|
||
&-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
vertical-align: unset;
|
||
}
|
||
}
|
||
}
|
||
|
||
.login-submit {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 30px;
|
||
.mf-button {
|
||
width: 160px;
|
||
border-radius: 10px;
|
||
margin: 0 14px;
|
||
|
||
&:first-child {
|
||
color: #ffffff;
|
||
background-color: #1a1a1a;
|
||
&:hover {
|
||
background-color: #262626;
|
||
}
|
||
&:active {
|
||
background-color: #0d0d0d;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.login-link {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
color: #999;
|
||
margin-top: 10px;
|
||
.mf-button {
|
||
padding: 0;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
|
||
&:hover {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 576px) {
|
||
.login-dialog {
|
||
width: calc(100% - 16px) !important;
|
||
}
|
||
}
|
||
</style>
|