You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

176 lines
3.7 KiB

<template>
<view class="main">
<view class="welcomeText">{{ i18n.welcomeText }}</view>
<view class="signInText">{{ i18n.signInText }}</view>
<u--form class="form" :model="userInfo" :rules="rules" ref="uForm" errorType="toast">
<u-form-item class="input-item" prop="email" ref="item1">
<u-icon class="icon"
:name="userInfo.email ? '../../static/login/email_pr.png' : '../../static/login/email_de.png'"
size="48rpx" width="48rpx"></u-icon>
<u-input class="input" v-model="userInfo.email" color="#fff" fontSize="32rpx" border="none"
:placeholder="i18n.emailInputText">
</u-input>
</u-form-item>
<u-form-item class="input-item" prop="password" ref="item1">
<u-icon class="icon"
:name="userInfo.password ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'"
size="48rpx" width="48rpx"></u-icon>
<u-input class="input" type="password" v-model="userInfo.password" color="#fff" fontSize="32rpx"
border="none" :placeholder="i18n.passwordInputText">
</u-input>
</u-form-item>
</u--form>
<navigator class="forget" url="./forget">{{ i18n.forgotText }}</navigator>
<u-button class="button" color="#00E8A2">{{ i18n.Login }}</u-button>
<view class="signUp" @click.native="$u.throttle(login, 500)">{{ i18n.notAccountText }}
<navigator class="navigator" url="./register">{{ i18n.SignUp }}
</navigator>
</view>
</view>
</template>
<script>
export default {
name: 'login',
data() {
return {
userInfo: {
name: '',
password: '',
},
rules: {
email: {
type: 'string',
required: true,
message: this.$t('login.emailInputMessage'),
trigger: ['blur', 'change'],
},
password: {
type: 'string',
required: true,
message: this.$t('login.passwordInputMessage'),
trigger: ['blur', 'change']
},
},
}
},
computed: {
i18n() {
return this.$t('login')
},
},
onLoad() {
// console.log(this.$t('login.emailInputMessage'));
},
onShow() {},
methods: {
// 注册
login() {
this.$refs.uForm.validate().then(res => {
this.$api.login(this.userInfo).then(res => {
if (res.errCode === 'SUCCESS') {
setTimeout(() => {
uni.showToast({
title: this.$t("login.loginSuccess")
})
}, 600)
uni.switchTab({
url: '/pages/home/index'
})
} else {
uni.$u.toast(res.msg)
}
})
}).catch(errors => {
console.log('err')
})
},
},
}
</script>
<style lang="scss" scoped>
page {
height: 100%;
background: url(../../static/public/BG.png) no-repeat fixed;
background-size: cover;
}
.main {
padding: 0 64rpx;
overflow: hidden;
.welcomeText {
margin-top: 240rpx;
font-size: 48rpx;
font-weight: 800;
text-align: center;
}
.signInText {
font-size: 32rpx;
text-align: center;
color: #A2A0A8;
}
.form {
font-size: 32rpx;
margin-top: 48rpx;
.input-item {
height: 112rpx;
line-height: 112rpx;
background: #211F32;
margin-bottom: 48rpx;
border-radius: 32rpx;
&:nth-child(2) {
margin-bottom: 38rpx;
}
.icon {
margin: 0 24rpx;
}
/deep/.u-form-item__body {
padding: 0;
}
.input {
height: 112rpx;
}
}
}
.forget {
font-size: 32rpx;
text-align: right;
color: #00E8A2;
cursor: pointer;
}
.button {
margin-top: 64rpx;
height: 112rpx;
line-height: 112rpx;
border-radius: 32rpx;
font-size: 32rpx;
color: #15141F !important;
}
.signUp {
margin: 48rpx 0;
text-align: center;
font-size: 32rpx;
navigator {
display: inline;
color: #00E8A2;
padding: 0 10rpx;
}
}
}
</style>