|
|
@@ -2,30 +2,20 @@
|
|
2
|
2
|
<div class="register">
|
|
3
|
3
|
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
|
|
4
|
4
|
<h3 class="title">若依后台管理系统</h3>
|
|
5
|
|
- <el-form-item prop="username">
|
|
6
|
|
- <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
|
|
|
5
|
+ <el-form-item prop="userName">
|
|
|
6
|
+ <el-input v-model="registerForm.userName" type="text" auto-complete="off" placeholder="账号">
|
|
7
|
7
|
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
|
8
|
8
|
</el-input>
|
|
9
|
9
|
</el-form-item>
|
|
10
|
|
- <el-form-item prop="password">
|
|
11
|
|
- <el-input
|
|
12
|
|
- v-model="registerForm.password"
|
|
13
|
|
- type="password"
|
|
14
|
|
- auto-complete="off"
|
|
15
|
|
- placeholder="密码"
|
|
16
|
|
- @keyup.enter.native="handleRegister"
|
|
17
|
|
- >
|
|
|
10
|
+ <el-form-item prop="passWord">
|
|
|
11
|
+ <el-input v-model="registerForm.passWord" type="password" auto-complete="off" placeholder="密码"
|
|
|
12
|
+ @keyup.enter.native="handleRegister">
|
|
18
|
13
|
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
|
19
|
14
|
</el-input>
|
|
20
|
15
|
</el-form-item>
|
|
21
|
16
|
<el-form-item prop="confirmPassword">
|
|
22
|
|
- <el-input
|
|
23
|
|
- v-model="registerForm.confirmPassword"
|
|
24
|
|
- type="password"
|
|
25
|
|
- auto-complete="off"
|
|
26
|
|
- placeholder="确认密码"
|
|
27
|
|
- @keyup.enter.native="handleRegister"
|
|
28
|
|
- >
|
|
|
17
|
+ <el-input v-model="registerForm.confirmPassword" type="password" auto-complete="off" placeholder="确认密码"
|
|
|
18
|
+ @keyup.enter.native="handleRegister">
|
|
29
|
19
|
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
|
30
|
20
|
</el-input>
|
|
31
|
21
|
</el-form-item>
|
|
|
@@ -44,17 +34,21 @@
|
|
44
|
34
|
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
|
45
|
35
|
</el-input>
|
|
46
|
36
|
</el-form-item>
|
|
|
37
|
+ <el-form-item prop="roleId">
|
|
|
38
|
+ <el-select v-model="registerForm.roleId" placeholder="请选择角色" auto-complete="off" style="width: 100%;">
|
|
|
39
|
+ <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
|
|
40
|
+ <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId">
|
|
|
41
|
+
|
|
|
42
|
+ </el-option>
|
|
|
43
|
+ </el-select>
|
|
|
44
|
+ </el-form-item>
|
|
47
|
45
|
<el-form-item prop="phone">
|
|
48
|
|
- <el-input
|
|
49
|
|
- v-model="registerForm.phone"
|
|
50
|
|
- auto-complete="off"
|
|
51
|
|
- placeholder="手机号"
|
|
52
|
|
- style="width: 63%"
|
|
53
|
|
- >
|
|
|
46
|
+ <el-input v-model="registerForm.phone" auto-complete="off" placeholder="手机号" style="width: 63%">
|
|
54
|
47
|
<svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon" />
|
|
55
|
48
|
</el-input>
|
|
56
|
49
|
<div class="register-code">
|
|
57
|
|
- <el-button type="primary" :disabled="codeDisabled" @click="getCodeNumber(registerForm.phone)">{{codeText}}</el-button>
|
|
|
50
|
+ <el-button type="primary" :disabled="codeDisabled" @click="getCodeNumber(registerForm.phone)">{{ codeText
|
|
|
51
|
+ }}</el-button>
|
|
58
|
52
|
</div>
|
|
59
|
53
|
</el-form-item>
|
|
60
|
54
|
<el-form-item prop="verifyCode">
|
|
|
@@ -63,27 +57,17 @@
|
|
63
|
57
|
</el-input>
|
|
64
|
58
|
</el-form-item>
|
|
65
|
59
|
<el-form-item prop="code" v-if="captchaEnabled">
|
|
66
|
|
- <el-input
|
|
67
|
|
- v-model="registerForm.code"
|
|
68
|
|
- auto-complete="off"
|
|
69
|
|
- placeholder="验证码"
|
|
70
|
|
- style="width: 63%"
|
|
71
|
|
- @keyup.enter.native="handleRegister"
|
|
72
|
|
- >
|
|
|
60
|
+ <el-input v-model="registerForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
|
|
|
61
|
+ @keyup.enter.native="handleRegister">
|
|
73
|
62
|
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
|
74
|
63
|
</el-input>
|
|
75
|
64
|
<div class="register-code">
|
|
76
|
|
- <img :src="codeUrl" @click="getCode" class="register-code-img"/>
|
|
|
65
|
+ <img :src="codeUrl" @click="getCode" class="register-code-img" />
|
|
77
|
66
|
</div>
|
|
78
|
67
|
</el-form-item>
|
|
79
|
68
|
<el-form-item style="width:100%;">
|
|
80
|
|
- <el-button
|
|
81
|
|
- :loading="loading"
|
|
82
|
|
- size="medium"
|
|
83
|
|
- type="primary"
|
|
84
|
|
- style="width:100%;"
|
|
85
|
|
- @click.native.prevent="handleRegister"
|
|
86
|
|
- >
|
|
|
69
|
+ <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
|
|
|
70
|
+ @click.native.prevent="handleRegister">
|
|
87
|
71
|
<span v-if="!loading">注 册</span>
|
|
88
|
72
|
<span v-else>注 册 中...</span>
|
|
89
|
73
|
</el-button>
|
|
|
@@ -101,12 +85,12 @@
|
|
101
|
85
|
|
|
102
|
86
|
<script>
|
|
103
|
87
|
import { getCodeImg, register, sendCode, wxregister } from "@/api/login";
|
|
104
|
|
-
|
|
|
88
|
+import { listRoleNotoken } from "@/api/system/role.js"
|
|
105
|
89
|
export default {
|
|
106
|
90
|
name: "Register",
|
|
107
|
91
|
data() {
|
|
108
|
92
|
const equalToPassword = (rule, value, callback) => {
|
|
109
|
|
- if (this.registerForm.password !== value) {
|
|
|
93
|
+ if (this.registerForm.passWord !== value) {
|
|
110
|
94
|
callback(new Error("两次输入的密码不一致"));
|
|
111
|
95
|
} else {
|
|
112
|
96
|
callback();
|
|
|
@@ -114,12 +98,12 @@ export default {
|
|
114
|
98
|
};
|
|
115
|
99
|
return {
|
|
116
|
100
|
codeText: "发送验证码",
|
|
117
|
|
- codeDisabled:false,
|
|
|
101
|
+ codeDisabled: false,
|
|
118
|
102
|
codeUrl: "",
|
|
119
|
103
|
registerForm: {
|
|
120
|
|
- username: "",
|
|
121
|
|
- password: "",
|
|
122
|
|
- phone:"",
|
|
|
104
|
+ userName: "",
|
|
|
105
|
+ passWord: "",
|
|
|
106
|
+ phone: "",
|
|
123
|
107
|
confirmPassword: "",
|
|
124
|
108
|
code: "",
|
|
125
|
109
|
uuid: "",
|
|
|
@@ -137,16 +121,68 @@ export default {
|
|
137
|
121
|
{ required: true, trigger: "blur", message: "请再次输入您的密码" },
|
|
138
|
122
|
{ required: true, validator: equalToPassword, trigger: "blur" }
|
|
139
|
123
|
],
|
|
140
|
|
- code: [{ required: true, trigger: "change", message: "请输入验证码" }]
|
|
|
124
|
+ code: [{ required: true, trigger: "change", message: "请输入验证码" }],
|
|
|
125
|
+ identityNo: [
|
|
|
126
|
+ {
|
|
|
127
|
+ required: true,
|
|
|
128
|
+ message: '被申请人身份证号不能为空',
|
|
|
129
|
+ trigger: 'blur',
|
|
|
130
|
+ },
|
|
|
131
|
+ {
|
|
|
132
|
+ pattern:
|
|
|
133
|
+ /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
|
|
|
134
|
+ message: '请输入正确的身份证号码',
|
|
|
135
|
+ trigger: 'blur',
|
|
|
136
|
+ },
|
|
|
137
|
+ ],
|
|
|
138
|
+ email: [
|
|
|
139
|
+ { required: true, trigger: "blur", message: "请再次输入您的密码" },
|
|
|
140
|
+ {
|
|
|
141
|
+ pattern:
|
|
|
142
|
+ /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
|
|
|
143
|
+ message: '请输入正确的邮箱地址',
|
|
|
144
|
+ trigger: 'blur',
|
|
|
145
|
+ },
|
|
|
146
|
+ ],
|
|
|
147
|
+ name: [
|
|
|
148
|
+ { required: true, trigger: "blur", message: "请输入用户名" },
|
|
|
149
|
+ ],
|
|
|
150
|
+ roleId: [
|
|
|
151
|
+ { required: true, trigger: "blur", message: "请选择角色" },
|
|
|
152
|
+ ],
|
|
|
153
|
+ phone: [
|
|
|
154
|
+ {
|
|
|
155
|
+ required: true,
|
|
|
156
|
+ message: '请输入手机号',
|
|
|
157
|
+ trigger: 'blur',
|
|
|
158
|
+ },
|
|
|
159
|
+ {
|
|
|
160
|
+ pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
|
|
|
161
|
+ message: '请输入正确的手机号码',
|
|
|
162
|
+ trigger: 'blur',
|
|
|
163
|
+ },
|
|
|
164
|
+ ],
|
|
|
165
|
+ verifyCode: [
|
|
|
166
|
+ { required: true, trigger: "blur", message: "请输入验证码" },
|
|
|
167
|
+ ],
|
|
141
|
168
|
},
|
|
142
|
169
|
loading: false,
|
|
143
|
|
- captchaEnabled: true
|
|
|
170
|
+ captchaEnabled: true,
|
|
|
171
|
+ roleList: []
|
|
144
|
172
|
};
|
|
145
|
173
|
},
|
|
146
|
174
|
created() {
|
|
147
|
175
|
this.getCode();
|
|
|
176
|
+ this.getListRole();
|
|
148
|
177
|
},
|
|
149
|
178
|
methods: {
|
|
|
179
|
+ /**获取角色 */
|
|
|
180
|
+ getListRole() {
|
|
|
181
|
+ listRoleNotoken().then(res => {
|
|
|
182
|
+ console.log(res, "PPPPPPPPPPPPPPPPPPPPPPPPPPPP");
|
|
|
183
|
+ this.roleList = res.data;
|
|
|
184
|
+ })
|
|
|
185
|
+ },
|
|
150
|
186
|
getCode() {
|
|
151
|
187
|
getCodeImg().then(res => {
|
|
152
|
188
|
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
|
|
|
@@ -167,7 +203,7 @@ export default {
|
|
167
|
203
|
type: 'success'
|
|
168
|
204
|
}).then(() => {
|
|
169
|
205
|
this.$router.push("/login");
|
|
170
|
|
- }).catch(() => {});
|
|
|
206
|
+ }).catch(() => { });
|
|
171
|
207
|
}).catch(() => {
|
|
172
|
208
|
this.loading = false;
|
|
173
|
209
|
if (this.captchaEnabled) {
|
|
|
@@ -178,29 +214,29 @@ export default {
|
|
178
|
214
|
});
|
|
179
|
215
|
},
|
|
180
|
216
|
getCodeNumber(data) {
|
|
181
|
|
- sendCode({
|
|
182
|
|
- phone: data
|
|
183
|
|
- }).then(res => {
|
|
184
|
|
- if (res.code != 200) {
|
|
185
|
|
- this.$modal.msgError(res.msg);
|
|
186
|
|
- return
|
|
187
|
|
- } else {
|
|
188
|
|
- this.$modal.msgSuccess('发送成功');
|
|
189
|
|
- let time = 60;
|
|
190
|
|
- let timer = setInterval(() => {
|
|
191
|
|
- time--;
|
|
192
|
|
- this.codeDisabled = true;
|
|
193
|
|
- this.codeText = time + 's重试'
|
|
194
|
|
- if (time == 0) {
|
|
195
|
|
- clearInterval(timer)
|
|
196
|
|
- this.codeText = '发送验证码'
|
|
197
|
|
- this.codeDisabled = false;
|
|
198
|
|
- }
|
|
199
|
|
- }, 1000)
|
|
200
|
|
- }
|
|
|
217
|
+ sendCode({
|
|
|
218
|
+ phone: data
|
|
|
219
|
+ }).then(res => {
|
|
|
220
|
+ if (res.code != 200) {
|
|
|
221
|
+ this.$modal.msgError(res.msg);
|
|
|
222
|
+ return
|
|
|
223
|
+ } else {
|
|
|
224
|
+ this.$modal.msgSuccess('发送成功');
|
|
|
225
|
+ let time = 60;
|
|
|
226
|
+ let timer = setInterval(() => {
|
|
|
227
|
+ time--;
|
|
|
228
|
+ this.codeDisabled = true;
|
|
|
229
|
+ this.codeText = time + 's重试'
|
|
|
230
|
+ if (time == 0) {
|
|
|
231
|
+ clearInterval(timer)
|
|
|
232
|
+ this.codeText = '发送验证码'
|
|
|
233
|
+ this.codeDisabled = false;
|
|
|
234
|
+ }
|
|
|
235
|
+ }, 1000)
|
|
|
236
|
+ }
|
|
201
|
237
|
|
|
202
|
|
- })
|
|
203
|
|
- },
|
|
|
238
|
+ })
|
|
|
239
|
+ },
|
|
204
|
240
|
}
|
|
205
|
241
|
};
|
|
206
|
242
|
</script>
|
|
|
@@ -214,6 +250,7 @@ export default {
|
|
214
|
250
|
background-image: url("../assets/images/login-background.jpg");
|
|
215
|
251
|
background-size: cover;
|
|
216
|
252
|
}
|
|
|
253
|
+
|
|
217
|
254
|
.title {
|
|
218
|
255
|
margin: 0px auto 30px auto;
|
|
219
|
256
|
text-align: center;
|
|
|
@@ -226,6 +263,7 @@ export default {
|
|
226
|
263
|
width: 400px;
|
|
227
|
264
|
height: 90%;
|
|
228
|
265
|
padding: 25px 25px 5px 25px;
|
|
|
266
|
+
|
|
229
|
267
|
// .el-input {
|
|
230
|
268
|
// height: 38px;
|
|
231
|
269
|
// input {
|
|
|
@@ -238,20 +276,24 @@ export default {
|
|
238
|
276
|
margin-left: 2px;
|
|
239
|
277
|
}
|
|
240
|
278
|
}
|
|
|
279
|
+
|
|
241
|
280
|
.register-tip {
|
|
242
|
281
|
font-size: 13px;
|
|
243
|
282
|
text-align: center;
|
|
244
|
283
|
color: #bfbfbf;
|
|
245
|
284
|
}
|
|
|
285
|
+
|
|
246
|
286
|
.register-code {
|
|
247
|
287
|
width: 33%;
|
|
248
|
288
|
height: 38px;
|
|
249
|
289
|
float: right;
|
|
|
290
|
+
|
|
250
|
291
|
img {
|
|
251
|
292
|
cursor: pointer;
|
|
252
|
293
|
vertical-align: middle;
|
|
253
|
294
|
}
|
|
254
|
295
|
}
|
|
|
296
|
+
|
|
255
|
297
|
.el-register-footer {
|
|
256
|
298
|
height: 40px;
|
|
257
|
299
|
line-height: 40px;
|
|
|
@@ -264,6 +306,7 @@ export default {
|
|
264
|
306
|
font-size: 12px;
|
|
265
|
307
|
letter-spacing: 1px;
|
|
266
|
308
|
}
|
|
|
309
|
+
|
|
267
|
310
|
.register-code-img {
|
|
268
|
311
|
height: 38px;
|
|
269
|
312
|
}
|
