# 表单基础功能实现(上)
<template>
<view>
<!-- 状态栏, 手机状态栏 -->
<uniStatusBar bgcolor="#ffe933"></uniStatusBar>
<!-- 关闭按钮 -->
<view class="icon iconfont icon-guanbi" @tap="back"></view>
<!-- 引入背景图 -->
<image class="loginhead" src="../../static/common/loginhead.png" lazy-load mode="widthFix"></image>
<!-- 登录 -->
<view class="body">
<!-- 账号密码登录 -->
<template v-if="!status">
<input type="text" class="uni-input common-input" placeholder="昵称/手机号/邮箱" v-model="username">
<view class="login-input-box">
<input type="text" class="uni-input common-input" placeholder="请输入密码" v-model="password">
<view class="forget u-f-ajc">忘记密码</view>
</view>
</template>
<!-- 手机号登录 -->
<template v-else>
<view class="login-input-box">
<view class="phone u-f-ajc">+86</view>
<input type="text" class="uni-input common-input phone-input" placeholder="手机号" v-model="phone">
</view>
<view class="login-input-box">
<input type="text" class="uni-input common-input" placeholder="请输入验证码" v-model="checknum">
<view class="forget u-f-ajc yanzhengma">
<view class="u-f-ajc">获取验证码</view>
</view>
</view>
</template>
<button class="user-set-btn " :loading="loading" :class="{'user-set-btn-disable':disabled}" type="primary" @tap="submit"
:disabled="disabled">登录</button>
</view>
<!-- 登录状态切换 -->
<view class="login-status u-f-ajc login-padding" @tap="changeStatus">
{{status?'账号密码登录':'验证码登录'}}
<view class="icon iconfont icon-jinru login-font-color"></view>
</view>
<!-- 第三方登录 -->
<view class="other-login-title u-f-ajc login-padding login-font-color">第三方登录</view>
<otherLogin></otherLogin>
<!-- 协议 -->
<view class="login-rule u-f-ajc login-padding login-font-color">
注册即代表您同意 <view>《星城百科协议》</view>
</view>
</view>
</template>
<script>
import uniStatusBar from '../../components/uni-status-bar/uni-status-bar.vue'
import otherLogin from '../../components/home/other-login.vue'
export default {
components: {
uniStatusBar,
otherLogin
},
data() {
return {
status: false, // false代表账号密码登录 true代表验证码登录
disabled: true,
loading: false,
username: '', ⭐⭐⭐
password: '',
phone: '',
checknum: ''
}
},
watch: { ⭐⭐⭐
username(val) {
this.onBtnChange()
},
password(val) {
this.onBtnChange()
},
phone(val) {
this.onBtnChange()
},
checknum(val) {
this.onBtnChange()
}
},
methods: {
// 初始化表单 ⭐⭐⭐
initInput() {
this.username = '',
this.password = '',
this.phone = '',
this.checknum = ''
},
// 切换按钮状态 ⭐⭐⭐
onBtnChange() {
if((this.username && this.password) || (this.phone && this.checknum)) {
this.disabled = false
return
}
this.disabled = true
},
// 登录状态切换
changeStatus() {
this.initInput() ⭐⭐⭐
this.status = !this.status
}
}
}
</script>
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
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