memberLogin.vue
3.88 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<template>
<div class="member_login">
<img src="@/assets/icon/bg_login_2.png" />
<NafmHeader navClass="nafmii-head-bg1" bgColor="transparent" title=" " />
<main class="login_content">
<van-form class="login_form">
<van-field v-model="code" :left-icon="shtyxydmIcon" placeholder="请输入社会信用代码或组织机构代码">
</van-field>
<van-field v-model="password" :left-icon="passwordIcon" type="password" placeholder="请输入密码">
</van-field>
<van-field v-model="checkCode" :left-icon="verificationIcon" placeholder="请输入验证码">
<template #button>
<span class="verfication_code">111111</span>
</template>
</van-field>
<p v-show="isLogin" class="wraning_tip">
提示：请输入贵单位会员系统的登录名及密码登录（单位会员）
</p>
<div>
<van-button :class="isLogin ? 'login_btn' : 'act_btn login_btn'" block type="info" native-type="submit" @click="loginSubmit">登录</van-button>
</div>
</van-form>
</main>
<div class="membership_about">
<van-cell title="入会指南" is-link to="/member/membershipGuide" />
<van-cell title="会籍办理常见问题" is-link to="/member/membershipGuide" />
<van-cell title="会员管理规则" is-link to="/member/membershipGuide" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
code: '',
password: '',
checkCode: '',
passwordIcon: require('@/assets/icon/password.png'),
verificationIcon: require('@/assets/icon/verification.png'),
shtyxydmIcon: require('@/assets/icon/shtyxydm.png'),
}
},
computed: {
isLogin() {
return !this.code || this.code === '' || !this.password || this.password === '' || !this.checkCode || this.checkCode === ''
}
},
methods: {
loginSubmit() {
if (!this.code || this.code === '') {
return Toast('请输入社会信用统一代码或组织机构代码')
}
if (!this.password || this.password === '') {
return Toast('请输入密码')
}
if (!this.checkCode || this.checkCode === '') {
return Toast('请输入验证码')
}
}
}
}
</script>
<style lang="less" scoped>
.member_login {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.login_content {
display: flex;
align-items: center;
justify-content: center;
.login_form {
margin-top: 20px;
width: 330px;
background-color: #ffffff;
::v-deep .van-cell:not(:last-child)::after {
border-bottom: 1px solid #efefef;
}
::v-deep .van-cell {
padding-right: 0 !important;
padding-left: 0 !important;
border-bottom: 1px solid #ebedf0;
}
::v-deep .van-cell:not(:last-child)::after {
border: none;
}
::v-deep .van-field__control {
font-size: 14px;
color: #333333;
}
input::-webkit-input-placeholder {
color: #8f9196;
}
input::-moz-input-placeholder {
color: #8f9196;
}
input::-ms-input-placeholder {
color: #8f9196;
}
.wraning_tip {
color: #ea5c6d;
font-size: 12px;
text-align: justify;
margin-top: 16px;
}
.login_btn {
width: 100%;
border-radius: 5px;
text-align: center;
height: 45px;
line-height: 45px;
color: #fff;
font-size: 16px;
margin-top: 20px;
background-image: linear-gradient(to right, #25a3df, #106abc);
// background: linear-gradient(to right, #25a3df, #106abc);
border: none;
opacity: 0.3;
}
.act_btn {
opacity: 1;
}
}
}
.membership_about {
margin: 20px 0;
.van-cell {
background-color: #f6f6f6;
font-size: 14px;
}
}
}
</style>