index.vue
3.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
<view class="login-container">
<view class="login-title">手机号码或用户名登录</view>
<u-form :model="logForm" ref="logForm">
<u-form-item prop="username">
<u-input v-model="logForm.username" border="bottom" fontSize="36rpx" color="#333" :adjustPosition="false" placeholder="请输入用户名" />
</u-form-item>
<u-form-item prop="password">
<u-input v-model="logForm.password" border="bottom" fontSize="36rpx" color="#333" type="password" :adjustPosition="false" placeholder="请输入密码" />
</u-form-item>
<u-form-item>
<u-checkbox-group v-model="checked">
<u-checkbox shape="circle" size="16" activeColor="#333"></u-checkbox>
<text class="agreement">我已阅读并同意《用户协议》及《隐私协议》</text>
</u-checkbox-group>
</u-form-item>
</u-form>
<view class="btn" @click="submit">登录</view>
<view class="tip">
没有账号？<text style="color: #FFD900;" @click="goReg">去注册</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
logForm: { username: '', password: ''},
checked: [],
logRules: {
username: [
{ required: true, message: '请填写用户名', trigger: ['blur']},
// { pattern: /^[0-9a-zA-Z]*$/g, transform(value) { return String(value) }, message: '只能包含字母或数字', trigger: 'change' },
{ min: 4, max: 12, message: '长度在6-12个字符之间', trigger: 'change' }
],
password: [
{ required: true, message: '请填写密码', trigger: ['blur']},
// { pattern: /^(?=.*[A-Z])[a-zA-Z0-9]+$/, transform(value) { return String(value) }, message: '字母数字组成且必须包含大写字母', trigger: ['change', 'blur'] },
{ min: 6, max: 16, message: '长度在6-16个字符之间', trigger: ['change'] },
]
}
}
},
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
this.$refs.logForm.setRules(this.logRules);
},
methods: {
goReg(){
uni.navigateTo({
url: '/pages/register/register'
})
},
// 提交登录
submit() {
if(this.checked.length > 0) {
this.$refs.logForm.validate().then(valid => {
if (valid) {
this.$store.dispatch('Login', this.logForm).then(res => {
uni.switchTab({
url: '/pages/home/home'
})
})
}
})
} else {
uni.$u.toast('请勾选用户协议和隐私协议')
}
}
}
}
</script>
<style scoped lang="scss">
.login-container{
position: relative;
padding: 0 30rpx;
box-sizing: border-box;
height: calc(100vh - 88rpx);
max-height: 100vh;
.login-title{
color: #3d3d3d;
font-size: 56rpx;
margin: 40rpx 0 80rpx 0;
line-height: 74rpx;
font-weight: 500;
}
.agreement{
color: #333;
line-height: 38rpx;
font-size: 28rpx;
}
.btn{
width: 100%;
height: 88rpx;
text-align: center;
line-height: 88rpx;
font-size: 32rpx;
background-color: #333;
border-radius: 12rpx;
color: #fff;
margin-top: 30rpx;
}
.tip{
position: absolute;
bottom: 44rpx;
left: 50%;
font-size: 36rpx;
color: #333;
transform: translateX(-50%);
}
}
</style>