finish v1
This commit is contained in:
parent
875af37d63
commit
8bc56b312c
@ -4,13 +4,19 @@
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
"build": "vue-cli-service build",
|
||||
"buildsuper": "vue-cli-service build --modern"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.19.0",
|
||||
"core-js": "^3.6.4",
|
||||
"crypto-js": "^4.0.0",
|
||||
"element-ui": "^2.12.0",
|
||||
"register-service-worker": "^1.7.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue-clipboard2": "^0.3.1",
|
||||
"vue-router": "^3.1.6",
|
||||
"vue-svg-icon": "^1.2.9",
|
||||
"vuex": "^3.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 799 B After Width: | Height: | Size: 387 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 726 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 2.8 KiB |
@ -1,149 +1 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,16.000000) scale(0.000320,-0.000320)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M18 46618 c45 -75 122 -207 122 -211 0 -2 25 -45 55 -95 30 -50 55
|
||||
-96 55 -102 0 -5 5 -10 10 -10 6 0 10 -4 10 -9 0 -5 73 -135 161 -288 89 -153
|
||||
173 -298 187 -323 14 -25 32 -57 41 -72 88 -149 187 -324 189 -335 2 -7 8 -13
|
||||
13 -13 5 0 9 -4 9 -10 0 -5 46 -89 103 -187 175 -302 490 -846 507 -876 8 -16
|
||||
20 -36 25 -45 28 -46 290 -498 339 -585 13 -23 74 -129 136 -236 61 -107 123
|
||||
-215 137 -240 14 -25 29 -50 33 -56 5 -5 23 -37 40 -70 18 -33 38 -67 44 -75
|
||||
11 -16 21 -33 63 -109 14 -25 29 -50 33 -56 4 -5 21 -35 38 -65 55 -100 261
|
||||
-455 269 -465 4 -5 14 -21 20 -35 15 -29 41 -75 103 -180 24 -41 52 -88 60
|
||||
-105 9 -16 57 -100 107 -185 112 -193 362 -626 380 -660 8 -14 23 -38 33 -55
|
||||
11 -16 23 -37 27 -45 4 -8 26 -46 48 -85 23 -38 53 -90 67 -115 46 -81 64
|
||||
-113 178 -310 62 -107 121 -210 132 -227 37 -67 56 -99 85 -148 16 -27 32 -57
|
||||
36 -65 4 -8 15 -27 25 -42 9 -15 53 -89 96 -165 44 -76 177 -307 296 -513 120
|
||||
-206 268 -463 330 -570 131 -227 117 -203 200 -348 36 -62 73 -125 82 -140 10
|
||||
-15 21 -34 25 -42 4 -8 20 -37 36 -65 17 -27 38 -65 48 -82 49 -85 64 -111 87
|
||||
-153 13 -25 28 -49 32 -55 4 -5 78 -134 165 -285 87 -151 166 -288 176 -305
|
||||
10 -16 26 -43 35 -59 9 -17 125 -217 257 -445 132 -229 253 -441 270 -471 17
|
||||
-30 45 -79 64 -108 18 -29 33 -54 33 -57 0 -2 20 -37 44 -77 24 -40 123 -212
|
||||
221 -383 97 -170 190 -330 205 -355 16 -25 39 -65 53 -90 13 -25 81 -144 152
|
||||
-265 70 -121 137 -238 150 -260 12 -22 37 -65 55 -95 18 -30 43 -73 55 -95 12
|
||||
-22 48 -85 80 -140 77 -132 163 -280 190 -330 13 -22 71 -123 130 -225 59
|
||||
-102 116 -199 126 -217 10 -17 29 -50 43 -72 15 -22 26 -43 26 -45 0 -2 27
|
||||
-50 60 -106 33 -56 60 -103 60 -105 0 -2 55 -98 90 -155 8 -14 182 -316 239
|
||||
-414 13 -22 45 -79 72 -124 27 -46 49 -86 49 -89 0 -2 14 -24 30 -48 16 -24
|
||||
30 -46 30 -49 0 -5 74 -135 100 -176 5 -8 24 -42 43 -75 50 -88 58 -101 262
|
||||
-455 104 -179 199 -345 213 -370 14 -25 28 -49 32 -55 4 -5 17 -26 28 -45 10
|
||||
-19 62 -109 114 -200 114 -197 133 -230 170 -295 16 -27 33 -57 38 -65 17 -28
|
||||
96 -165 103 -180 4 -8 16 -28 26 -45 10 -16 77 -131 148 -255 72 -124 181
|
||||
-313 243 -420 62 -107 121 -209 131 -227 35 -62 323 -560 392 -678 38 -66 83
|
||||
-145 100 -175 16 -30 33 -59 37 -65 4 -5 17 -27 29 -47 34 -61 56 -100 90
|
||||
-156 17 -29 31 -55 31 -57 0 -2 17 -32 39 -67 21 -35 134 -229 251 -433 117
|
||||
-203 235 -407 261 -451 27 -45 49 -85 49 -88 0 -4 8 -19 19 -34 15 -21 200
|
||||
-341 309 -533 10 -19 33 -58 51 -87 17 -29 31 -54 31 -56 0 -2 25 -44 55 -94
|
||||
30 -50 55 -95 55 -98 0 -4 6 -15 14 -23 7 -9 27 -41 43 -71 17 -30 170 -297
|
||||
342 -594 171 -296 311 -542 311 -547 0 -5 5 -9 10 -9 6 0 10 -4 10 -10 0 -5
|
||||
22 -47 49 -92 27 -46 58 -99 68 -118 24 -43 81 -140 93 -160 5 -8 66 -114 135
|
||||
-235 69 -121 130 -227 135 -235 12 -21 259 -447 283 -490 10 -19 28 -47 38
|
||||
-62 11 -14 19 -29 19 -32 0 -3 37 -69 83 -148 99 -170 305 -526 337 -583 13
|
||||
-22 31 -53 41 -70 11 -16 22 -37 26 -45 7 -14 82 -146 103 -180 14 -24 181
|
||||
-311 205 -355 13 -22 46 -80 75 -130 29 -49 64 -110 78 -135 14 -25 51 -88 82
|
||||
-140 31 -52 59 -102 63 -110 4 -8 18 -33 31 -55 205 -353 284 -489 309 -535
|
||||
17 -30 45 -78 62 -106 18 -28 36 -60 39 -72 4 -12 12 -22 17 -22 5 0 9 -4 9
|
||||
-10 0 -5 109 -197 241 -427 133 -230 250 -431 259 -448 51 -90 222 -385 280
|
||||
-485 37 -63 78 -135 92 -160 14 -25 67 -117 118 -205 51 -88 101 -175 111
|
||||
-193 34 -58 55 -95 149 -257 51 -88 101 -173 110 -190 9 -16 76 -131 147 -255
|
||||
72 -124 140 -241 151 -260 61 -108 281 -489 355 -615 38 -66 77 -133 87 -150
|
||||
35 -63 91 -161 100 -175 14 -23 99 -169 128 -220 54 -97 135 -235 142 -245 4
|
||||
-5 20 -32 35 -60 26 -48 238 -416 276 -480 10 -16 26 -46 37 -65 30 -53 382
|
||||
-661 403 -695 10 -16 22 -37 26 -45 4 -8 26 -48 50 -88 24 -41 43 -75 43 -77
|
||||
0 -2 22 -40 50 -85 27 -45 50 -84 50 -86 0 -3 38 -69 83 -147 84 -142 302
|
||||
-520 340 -587 10 -19 34 -60 52 -90 18 -30 44 -75 57 -100 14 -25 45 -79 70
|
||||
-120 25 -41 56 -96 70 -121 14 -25 77 -133 138 -240 62 -107 122 -210 132
|
||||
-229 25 -43 310 -535 337 -581 11 -19 26 -45 34 -59 17 -32 238 -414 266 -460
|
||||
11 -19 24 -41 28 -49 3 -7 75 -133 160 -278 84 -146 153 -269 153 -274 0 -5 5
|
||||
-9 10 -9 6 0 10 -4 10 -10 0 -5 82 -150 181 -322 182 -314 201 -346 240 -415
|
||||
12 -21 80 -139 152 -263 71 -124 141 -245 155 -270 14 -25 28 -49 32 -55 6 -8
|
||||
145 -248 220 -380 37 -66 209 -362 229 -395 11 -19 24 -42 28 -49 4 -8 67
|
||||
-118 140 -243 73 -125 133 -230 133 -233 0 -2 15 -28 33 -57 19 -29 47 -78 64
|
||||
-108 17 -30 53 -93 79 -139 53 -90 82 -141 157 -272 82 -142 115 -199 381
|
||||
-659 142 -245 268 -463 281 -485 12 -22 71 -125 132 -230 60 -104 172 -298
|
||||
248 -430 76 -132 146 -253 156 -270 11 -16 22 -36 26 -44 3 -8 30 -54 60 -103
|
||||
29 -49 53 -91 53 -93 0 -3 18 -34 40 -70 22 -36 40 -67 40 -69 0 -2 37 -66 81
|
||||
-142 45 -77 98 -168 119 -204 20 -36 47 -81 58 -100 12 -19 27 -47 33 -62 6
|
||||
-16 15 -28 20 -28 5 0 9 -4 9 -9 0 -6 63 -118 140 -251 77 -133 140 -243 140
|
||||
-245 0 -2 18 -33 41 -70 22 -37 49 -83 60 -101 10 -19 29 -51 40 -71 25 -45
|
||||
109 -189 126 -218 7 -11 17 -29 22 -40 6 -11 22 -38 35 -60 14 -22 37 -62 52
|
||||
-90 14 -27 35 -62 45 -77 11 -14 19 -29 19 -32 0 -3 18 -35 40 -71 22 -36 40
|
||||
-67 40 -69 0 -2 19 -35 42 -72 23 -38 55 -94 72 -124 26 -47 139 -244 171
|
||||
-298 6 -9 21 -36 34 -60 28 -48 37 -51 51 -19 6 12 19 36 29 52 10 17 27 46
|
||||
38 65 11 19 104 181 208 360 103 179 199 345 213 370 14 25 42 74 64 109 21
|
||||
34 38 65 38 67 0 2 18 33 40 69 22 36 40 67 40 69 0 3 177 310 199 346 16 26
|
||||
136 234 140 244 2 5 25 44 52 88 27 44 49 81 49 84 0 2 18 34 40 70 22 36 40
|
||||
67 40 69 0 2 20 36 43 77 35 58 169 289 297 513 9 17 50 86 90 155 40 69 86
|
||||
150 103 180 16 30 35 62 41 70 6 8 16 24 22 35 35 64 72 129 167 293 59 100
|
||||
116 199 127 220 11 20 30 53 41 72 43 72 1070 1850 1121 1940 14 25 65 113
|
||||
113 195 48 83 96 166 107 185 10 19 28 50 38 68 11 18 73 124 137 235 64 111
|
||||
175 303 246 427 71 124 173 299 225 390 52 91 116 202 143 248 27 45 49 85 49
|
||||
89 0 4 6 14 14 22 7 9 28 43 46 76 26 47 251 436 378 655 11 19 29 51 40 70
|
||||
11 19 101 176 201 348 99 172 181 317 181 323 0 5 5 9 10 9 6 0 10 5 10 11 0
|
||||
6 8 23 18 37 11 15 32 52 49 82 16 30 130 228 253 440 122 212 234 405 248
|
||||
430 13 25 39 70 57 100 39 65 69 117 130 225 25 44 50 87 55 95 12 19 78 134
|
||||
220 380 61 107 129 224 150 260 161 277 222 382 246 425 15 28 47 83 71 123
|
||||
24 41 43 78 43 83 0 5 4 9 8 9 4 0 13 12 19 28 7 15 23 45 36 67 66 110 277
|
||||
478 277 483 0 3 6 13 14 21 7 9 27 41 43 71 17 30 45 80 63 110 34 57 375 649
|
||||
394 685 6 11 16 27 22 35 6 8 26 42 44 75 18 33 41 74 51 90 10 17 24 41 32
|
||||
55 54 97 72 128 88 152 11 14 19 28 19 30 0 3 79 141 175 308 96 167 175 305
|
||||
175 308 0 3 6 13 14 21 7 9 26 39 41 66 33 60 276 483 338 587 24 40 46 80 50
|
||||
88 4 8 13 24 20 35 14 23 95 163 125 215 11 19 52 91 92 160 40 69 80 139 90
|
||||
155 9 17 103 179 207 360 105 182 200 346 211 365 103 181 463 802 489 845 7
|
||||
11 15 27 19 35 4 8 29 51 55 95 64 110 828 1433 848 1470 9 17 24 41 33 55 9
|
||||
14 29 48 45 77 15 28 52 93 82 145 30 51 62 107 71 123 17 30 231 398 400 690
|
||||
51 88 103 179 115 202 12 23 26 48 32 55 6 7 24 38 40 68 17 30 61 107 98 170
|
||||
37 63 84 144 103 180 19 36 41 72 48 81 8 8 14 18 14 21 0 4 27 51 59 106 32
|
||||
55 72 124 89 154 16 29 71 125 122 213 51 88 104 180 118 205 13 25 28 50 32
|
||||
55 4 6 17 26 28 45 11 19 45 80 77 135 31 55 66 116 77 135 11 19 88 152 171
|
||||
295 401 694 620 1072 650 1125 11 19 87 152 170 295 83 143 158 273 166 288 9
|
||||
16 21 36 26 45 6 9 31 52 55 96 25 43 54 94 66 115 11 20 95 164 186 321 91
|
||||
157 173 299 182 315 9 17 26 46 37 65 12 19 66 114 121 210 56 96 108 186 117
|
||||
200 8 14 24 40 34 59 24 45 383 664 412 713 5 9 17 29 26 45 15 28 120 210
|
||||
241 419 36 61 68 117 72 125 4 8 12 23 19 34 35 57 245 420 262 453 11 20 35
|
||||
61 53 90 17 29 32 54 32 56 0 3 28 51 62 108 33 57 70 119 80 138 10 19 23 42
|
||||
28 50 5 8 32 53 59 100 27 47 149 258 271 470 122 212 234 405 248 430 30 53
|
||||
62 108 80 135 6 11 15 27 19 35 4 8 85 150 181 315 96 165 187 323 202 350 31
|
||||
56 116 202 130 225 5 8 25 42 43 75 19 33 92 159 162 280 149 257 157 271 202
|
||||
350 19 33 38 67 43 75 9 14 228 392 275 475 12 22 55 96 95 165 40 69 80 139
|
||||
90 155 24 42 202 350 221 383 9 15 27 47 41 72 14 25 75 131 136 236 61 106
|
||||
121 210 134 232 99 172 271 470 279 482 5 8 23 40 40 70 18 30 81 141 142 245
|
||||
60 105 121 210 135 235 14 25 71 124 127 220 56 96 143 247 194 335 51 88 96
|
||||
167 102 175 14 24 180 311 204 355 23 43 340 590 356 615 5 8 50 87 101 175
|
||||
171 301 517 898 582 1008 25 43 46 81 46 83 0 2 12 23 27 47 14 23 40 67 56
|
||||
97 16 30 35 62 42 70 7 8 15 22 18 30 4 8 20 38 37 65 16 28 33 57 37 65 6 12
|
||||
111 196 143 250 5 8 55 95 112 193 57 98 113 195 126 215 12 20 27 46 32 57 6
|
||||
11 14 27 20 35 5 8 76 130 156 270 80 140 165 287 187 325 23 39 52 90 66 115
|
||||
13 25 30 52 37 61 8 8 14 18 14 21 0 4 41 77 92 165 50 87 175 302 276 478
|
||||
101 176 208 360 236 408 28 49 67 117 86 152 19 35 41 70 48 77 6 6 12 15 12
|
||||
19 0 7 124 224 167 291 12 21 23 40 23 42 0 2 21 40 46 83 26 43 55 92 64 109
|
||||
54 95 327 568 354 614 19 30 45 75 59 100 71 128 82 145 89 148 4 2 8 8 8 13
|
||||
0 5 42 82 94 172 311 538 496 858 518 897 14 25 40 70 58 100 18 30 42 71 53
|
||||
90 10 19 79 139 152 265 73 127 142 246 153 265 10 19 43 76 72 125 29 50 63
|
||||
108 75 130 65 116 80 140 87 143 4 2 8 8 8 12 0 8 114 212 140 250 6 8 14 24
|
||||
20 35 5 11 54 97 108 190 l100 170 -9611 3 c-5286 1 -9614 -1 -9618 -5 -5 -6
|
||||
-419 -719 -619 -1068 -89 -155 -267 -463 -323 -560 -38 -66 -81 -140 -95 -165
|
||||
-31 -56 -263 -457 -526 -910 -110 -190 -224 -388 -254 -440 -29 -52 -61 -109
|
||||
-71 -125 -23 -39 -243 -420 -268 -465 -11 -19 -204 -352 -428 -740 -224 -388
|
||||
-477 -826 -563 -975 -85 -148 -185 -322 -222 -385 -37 -63 -120 -207 -185
|
||||
-320 -65 -113 -177 -306 -248 -430 -72 -124 -172 -297 -222 -385 -51 -88 -142
|
||||
-245 -202 -350 -131 -226 -247 -427 -408 -705 -65 -113 -249 -432 -410 -710
|
||||
-160 -278 -388 -673 -506 -877 -118 -205 -216 -373 -219 -373 -3 0 -52 82
|
||||
-109 183 -58 100 -144 250 -192 332 -95 164 -402 696 -647 1120 -85 149 -228
|
||||
396 -317 550 -212 365 -982 1700 -1008 1745 -10 19 -43 76 -72 125 -29 50 -64
|
||||
110 -77 135 -14 25 -63 110 -110 190 -47 80 -96 165 -110 190 -14 25 -99 171
|
||||
-188 325 -89 154 -174 300 -188 325 -13 25 -64 113 -112 195 -48 83 -140 242
|
||||
-205 355 -65 113 -183 317 -263 454 -79 137 -152 264 -163 282 -50 89 -335
|
||||
583 -354 614 -12 19 -34 58 -50 85 -15 28 -129 226 -253 440 -124 215 -235
|
||||
408 -247 430 -12 22 -69 121 -127 220 -58 99 -226 389 -373 645 -148 256 -324
|
||||
561 -392 678 -67 117 -134 232 -147 255 -13 23 -33 59 -46 80 l-22 37 -9615 0
|
||||
-9615 0 20 -32z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1582191167349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3270" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M921.6 716.75904L415.46752 210.66752a136.25344 136.25344 0 0 0-96.54272-39.99744c-70.93248 0-128.53248 54.272-135.19872 123.43296L102.4 375.43936h86.12864C210.59584 506.39872 294.57408 616.09984 409.6 673.49504v179.84512h68.27008V700.34432a405.18656 405.18656 0 0 0 68.25984 13.70112v139.30496H614.4V716.75904h307.2zM448.93184 340.6336L620.2368 511.95904h-39.95648c-75.27424 0-136.54016-61.22496-136.54016-136.52992-0.01024-12.12416 2.12992-23.63392 5.19168-34.79552z m-198.26688-33.46432a68.32128 68.32128 0 0 1 68.25984-68.22912c18.19648 0 35.36896 7.09632 48.27136 19.99872l28.4672 28.4672a202.37312 202.37312 0 0 0-20.20352 88.03328c0 112.92672 91.86304 204.8 204.8 204.8h108.22656l68.27008 68.25984H592.00512c-188.20096 0-341.34016-153.1392-341.34016-341.32992z" p-id="3271" fill="#bbdefb"></path></svg>
|
||||
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 1.2 KiB |
@ -5,7 +5,11 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<meta name="format-detection" content="telephone=yes"/>
|
||||
<meta itemprop="name" content="DB phonebook" />
|
||||
<meta itemprop="description" content="DBStudio电话本" />
|
||||
<meta itemprop="image" content="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/4610b912c8fcc3ce1d29212f9d45d688d53f20c5.jpg" />
|
||||
<title>DB phonebook</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
147
src/App.vue
147
src/App.vue
@ -1,32 +1,141 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div id="nav">
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
</div>
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
p,
|
||||
blockquote,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
pre,
|
||||
form,
|
||||
fieldset,
|
||||
legend,
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
th,
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: 12px/1.5tahoma, arial, \5b8b\4f53;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
}
|
||||
address,
|
||||
cite,
|
||||
dfn,
|
||||
em,
|
||||
var {
|
||||
font-style: normal;
|
||||
}
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: couriernew, courier, monospace;
|
||||
}
|
||||
small {
|
||||
font-size: 12px;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
sup {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
sub {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
legend {
|
||||
color: #000;
|
||||
}
|
||||
fieldset,
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
font-family: 'Roboto', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* text-align: center; */
|
||||
// color: #2c3e50;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.messageBox-rewrite {
|
||||
width:90% !important;
|
||||
max-width: 405px !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
.el-message-box {
|
||||
width: 90% !important;
|
||||
max-width: 405px !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
}
|
||||
.el-message,.el-message--info {
|
||||
width:90% !important;
|
||||
min-width: 0 !important;
|
||||
max-width: 405px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
src/assets/xiaohui.png
Normal file
BIN
src/assets/xiaohui.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
16
src/axios/api.js
Normal file
16
src/axios/api.js
Normal file
@ -0,0 +1,16 @@
|
||||
import { api, apirow } from "./fetch";
|
||||
var CryptoJS = require("crypto-js");
|
||||
|
||||
export function post(url, data) {
|
||||
let arg = JSON.parse(JSON.stringify(data))
|
||||
let sign = CryptoJS.MD5(JSON.stringify(arg).replace(/\"/g,"'")).toString().toUpperCase();
|
||||
arg.sign = sign
|
||||
let params = new URLSearchParams();
|
||||
params.append('data', JSON.stringify(arg));
|
||||
return api.post(url, params)
|
||||
}
|
||||
|
||||
//获取一言
|
||||
export function getYiyanInfo() {
|
||||
return apirow.get('https://v1.hitokoto.cn/')
|
||||
}
|
||||
31
src/axios/fetch.js
Normal file
31
src/axios/fetch.js
Normal file
@ -0,0 +1,31 @@
|
||||
import axios from 'axios'
|
||||
|
||||
export const api = axios.create({
|
||||
// baseURL: 'http://beta.lacus.site/v1/',
|
||||
baseURL: window.location.origin + '/v1/',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'Accept': 'application/json',
|
||||
'Access-Control-Allow-Origin': '*'
|
||||
},
|
||||
timeout: 30 * 1000
|
||||
})
|
||||
|
||||
export const apirow = axios.create({
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'Accept': 'application/vnd.toast.v1+json'
|
||||
},
|
||||
timeout: 10 * 1000
|
||||
})
|
||||
|
||||
//设置拦截器
|
||||
api.interceptors.response.use(
|
||||
(response) => {
|
||||
// console.log('拦截器:请求成功', response)
|
||||
return response
|
||||
}, (error) => {
|
||||
// console.log('拦截器:发生错误', error.response)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
65
src/main.js
65
src/main.js
@ -3,9 +3,74 @@ import App from './App.vue'
|
||||
import './registerServiceWorker'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import VueClipboard from 'vue-clipboard2'
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
VueClipboard.config.autoSetContainer = true
|
||||
Vue.use(VueClipboard)
|
||||
|
||||
// icon-loader
|
||||
import Icon from 'vue-svg-icon/Icon.vue'
|
||||
Vue.component('icon', Icon);
|
||||
|
||||
import {
|
||||
Input,
|
||||
InputNumber,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
RadioButton,
|
||||
Select,
|
||||
Option,
|
||||
OptionGroup,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Form,
|
||||
FormItem,
|
||||
Card,
|
||||
Loading,
|
||||
MessageBox,
|
||||
Message,
|
||||
Notification
|
||||
} from 'element-ui';
|
||||
|
||||
|
||||
Vue.use(Input);
|
||||
Vue.use(InputNumber);
|
||||
Vue.use(Radio);
|
||||
Vue.use(RadioGroup);
|
||||
Vue.use(RadioButton);
|
||||
Vue.use(Select);
|
||||
Vue.use(Option);
|
||||
Vue.use(OptionGroup);
|
||||
Vue.use(Button);
|
||||
Vue.use(ButtonGroup);
|
||||
Vue.use(Form);
|
||||
Vue.use(FormItem);
|
||||
Vue.use(Card);
|
||||
Vue.use(Loading.directive);
|
||||
Vue.prototype.$loading = Loading.service;
|
||||
Vue.prototype.$msgbox = MessageBox;
|
||||
Vue.prototype.$alert = MessageBox.alert;
|
||||
Vue.prototype.$confirm = MessageBox.confirm;
|
||||
Vue.prototype.$prompt = MessageBox.prompt;
|
||||
Vue.prototype.$notify = Notification;
|
||||
Vue.prototype.$message = Message;
|
||||
|
||||
// px2rem(移动端)
|
||||
window.onresize = setHtmlFontSize
|
||||
function setHtmlFontSize () {
|
||||
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
|
||||
const htmlDom = document.getElementsByTagName('html')[0]
|
||||
//自适应最大到500px浏览器宽度
|
||||
if(htmlWidth <= 400)
|
||||
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
|
||||
else
|
||||
htmlDom.style.fontSize = 400 / 10 + 'px';
|
||||
}
|
||||
setHtmlFontSize()
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
|
||||
@ -21,6 +21,7 @@ if (process.env.NODE_ENV === 'production') {
|
||||
},
|
||||
updated () {
|
||||
console.log('New content is available; please refresh.')
|
||||
window.location.reload(true)
|
||||
},
|
||||
offline () {
|
||||
console.log('No internet connection found. App is running in offline mode.')
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import Home from '../views/Home.vue'
|
||||
import Login from '../views/Login.vue'
|
||||
import Sign from '../views/Sign.vue'
|
||||
import Show from '../views/Show.vue'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
@ -11,13 +14,20 @@ Vue.use(VueRouter)
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
|
||||
}
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: Login
|
||||
},
|
||||
{
|
||||
path: '/sign',
|
||||
name: 'Sign',
|
||||
component: Sign
|
||||
},
|
||||
{
|
||||
path: '/show',
|
||||
name: 'Show',
|
||||
component: Show
|
||||
},
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
|
||||
@ -5,10 +5,34 @@ Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
user_info: {},
|
||||
user_list: {},
|
||||
},
|
||||
mutations: {
|
||||
// 设置用户信息
|
||||
SET_USERINFO(state, user_info) {
|
||||
state.user_info = user_info;
|
||||
},
|
||||
// 设置用户列表
|
||||
SET_USERLIST(state, user_list) {
|
||||
state.user_list = user_list;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
// 设置用户信息
|
||||
setUserInfo({
|
||||
commit
|
||||
}, arg) {
|
||||
commit('SET_USERINFO', arg[0]);
|
||||
localStorage.setItem("phonebook", JSON.stringify(arg[1].$store.state));
|
||||
},
|
||||
// 设置用户信息
|
||||
setUserList({
|
||||
commit
|
||||
}, arg) {
|
||||
commit('SET_USERLIST', arg[0]);
|
||||
localStorage.setItem("phonebook", JSON.stringify(arg[1].$store.state));
|
||||
},
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
|
||||
1
src/svg/canary.svg
Normal file
1
src/svg/canary.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1582191167349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3270" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M921.6 716.75904L415.46752 210.66752a136.25344 136.25344 0 0 0-96.54272-39.99744c-70.93248 0-128.53248 54.272-135.19872 123.43296L102.4 375.43936h86.12864C210.59584 506.39872 294.57408 616.09984 409.6 673.49504v179.84512h68.27008V700.34432a405.18656 405.18656 0 0 0 68.25984 13.70112v139.30496H614.4V716.75904h307.2zM448.93184 340.6336L620.2368 511.95904h-39.95648c-75.27424 0-136.54016-61.22496-136.54016-136.52992-0.01024-12.12416 2.12992-23.63392 5.19168-34.79552z m-198.26688-33.46432a68.32128 68.32128 0 0 1 68.25984-68.22912c18.19648 0 35.36896 7.09632 48.27136 19.99872l28.4672 28.4672a202.37312 202.37312 0 0 0-20.20352 88.03328c0 112.92672 91.86304 204.8 204.8 204.8h108.22656l68.27008 68.25984H592.00512c-188.20096 0-341.34016-153.1392-341.34016-341.32992z" p-id="3271" fill="#bbdefb"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
19
src/utils/aes.js
Normal file
19
src/utils/aes.js
Normal file
@ -0,0 +1,19 @@
|
||||
import CryptoJS from 'crypto-js'
|
||||
|
||||
// aes加密用户密码
|
||||
export function encryptMainCode(code) {
|
||||
let default_key = 'sM5jK5bU4mI8'
|
||||
return CryptoJS.AES.encrypt(code, CryptoJS.enc.Utf8.parse(default_key), {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
}).toString();
|
||||
}
|
||||
|
||||
// aes解密用户密码
|
||||
export function decryptMainCode(row_code) {
|
||||
let default_key = 'sM5jK5bU4mI8'
|
||||
return CryptoJS.AES.decrypt(row_code, CryptoJS.enc.Utf8.parse(default_key), {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
}).toString(CryptoJS.enc.Utf8);
|
||||
}
|
||||
15
src/utils/formatTime.js
Normal file
15
src/utils/formatTime.js
Normal file
@ -0,0 +1,15 @@
|
||||
export function formatDateTime(inputTime) {
|
||||
var date = new Date(inputTime);
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
var d = date.getDate();
|
||||
d = d < 10 ? "0" + d : d;
|
||||
var h = date.getHours();
|
||||
h = h < 10 ? "0" + h : h;
|
||||
var minute = date.getMinutes();
|
||||
var second = date.getSeconds();
|
||||
minute = minute < 10 ? "0" + minute : minute;
|
||||
second = second < 10 ? "0" + second : second;
|
||||
return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
|
||||
}
|
||||
7
src/utils/px2rem.js
Normal file
7
src/utils/px2rem.js
Normal file
@ -0,0 +1,7 @@
|
||||
//px2rem
|
||||
export function setHtmlFontSize() {
|
||||
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
|
||||
const htmlDom = document.getElementsByTagName('html')[0]
|
||||
if (htmlWidth >= 500) htmlDom.style.fontSize = 500 / 10 + 'px'
|
||||
else htmlDom.style.fontSize = htmlWidth / 10 + 'px'
|
||||
}
|
||||
22
src/utils/store.js
Normal file
22
src/utils/store.js
Normal file
@ -0,0 +1,22 @@
|
||||
export var department_list = [
|
||||
'团委组织部',
|
||||
'基层组织建设中心',
|
||||
'科技创新部',
|
||||
'志愿者工作部',
|
||||
'学生会秘书处',
|
||||
'学生会学习部',
|
||||
'学生会宣传部',
|
||||
'学生会文艺部',
|
||||
'学生会体育部',
|
||||
'学生会权益部',
|
||||
'DB工作室技术组',
|
||||
'DB工作室策划组',
|
||||
'DB工作室摄影组',
|
||||
'DB工作室文案组',
|
||||
'DB工作室运营组',
|
||||
'自管会主席团',
|
||||
'自管会秘书处',
|
||||
'自管会生活督察部',
|
||||
'自管会社区文化部',
|
||||
'自管会学习督察部',
|
||||
'E家人志愿者大队']
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
198
src/views/Card.vue
Normal file
198
src/views/Card.vue
Normal file
@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div @click="clickButton()">
|
||||
<el-card class="box-card" shadow="always" :class="class_content">
|
||||
<div class="item title">{{user.name}}</div>
|
||||
<template v-if="has_click && card_state">
|
||||
<div class="item">
|
||||
<i class="el-icon-male" v-if="user.sex == '男'"></i>
|
||||
<i class="el-icon-female" v-else></i>
|
||||
<p>{{user.sex}}</p>
|
||||
<i></i>
|
||||
</div>
|
||||
<div class="item">
|
||||
<i class="el-icon-mobile"></i>
|
||||
<p>{{user.tel}}</p>
|
||||
<a @click.stop="open('tel:'+user.tel)" style="width:20%; text-decoration:none; out-line: none;">
|
||||
<i class="el-icon-phone-outline" style="color:#409EFF; width:100%; height: 100%;display:block;"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="item">
|
||||
<i class="el-icon-data-line"></i>
|
||||
<p>{{user.department}}</p>
|
||||
<i></i>
|
||||
</div>
|
||||
<div class="item">
|
||||
<i class="el-icon-postcard"></i>
|
||||
<p>{{user.position}}</p>
|
||||
<i></i>
|
||||
</div>
|
||||
<div class="item" v-if="user.adds">
|
||||
<i class="el-icon-place"></i>
|
||||
<p>{{user.adds}}</p>
|
||||
<i></i>
|
||||
</div>
|
||||
<div class="item qq" v-if="user.qq">
|
||||
<i>QQ</i>
|
||||
<p>{{user.qq}}</p>
|
||||
<button @click.stop="copy(user.qq)" style="color:#409EFF;">复制</button>
|
||||
</div>
|
||||
<div class="item wx" v-if="user.wx">
|
||||
<i>微信</i>
|
||||
<p>{{user.wx}}</p>
|
||||
<button @click.stop="copy(user.wx)" style="color:#409EFF;">复制</button>
|
||||
</div>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "userCard",
|
||||
data() {
|
||||
return {
|
||||
// 是否被点击过
|
||||
has_click: false,
|
||||
// 当前应该的状态，true是展开
|
||||
card_state: false
|
||||
};
|
||||
},
|
||||
props: ["user"],
|
||||
computed: {
|
||||
class_content: function() {
|
||||
// 由于单纯靠一个变量最开始第一次加载的时候也会有动画
|
||||
// 所以设置两个变量来控制
|
||||
if (this.has_click) {
|
||||
if (this.card_state == true) {
|
||||
return "high";
|
||||
} else {
|
||||
return "low";
|
||||
}
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickButton() {
|
||||
this.has_click = true;
|
||||
this.card_state = !this.card_state;
|
||||
console.log(1)
|
||||
},
|
||||
//复制
|
||||
copy(content) {
|
||||
this.$copyText(content).then(
|
||||
res => {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "恭喜，复制成功"
|
||||
});
|
||||
},
|
||||
err => {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "抱歉，复制失败"
|
||||
});
|
||||
}
|
||||
);
|
||||
},
|
||||
// 跳转到电话
|
||||
open(url) {
|
||||
window.open(url)
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
activated() {
|
||||
// 用户重新点进来的时候避免动画
|
||||
this.has_click = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.item {
|
||||
padding: 0.3rem 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: .6rem;
|
||||
}
|
||||
|
||||
.box-area {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.item i {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.item p {
|
||||
width: 60%;
|
||||
text-align: left;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
|
||||
.box-card .item:first-of-type {
|
||||
padding: 0.3rem 0.5rem;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.box-card .qq i,
|
||||
.box-card .qq button {
|
||||
font-size: 0.35rem;
|
||||
line-height: 0.5rem;
|
||||
font-style: normal;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.box-card .wx i,
|
||||
.box-card .wx button {
|
||||
font-size: 0.35rem;
|
||||
font-style: normal;
|
||||
line-height: 0.5rem;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.condition {
|
||||
padding: 1rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.high {
|
||||
animation: toHigh 0.5s ease;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.low {
|
||||
animation: toLow 0.3s ease;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes toHigh {
|
||||
0% {
|
||||
height: 2rem;
|
||||
}
|
||||
100% {
|
||||
height: 10.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes toLow {
|
||||
0% {
|
||||
height: 3.1rem;
|
||||
}
|
||||
100% {
|
||||
height: 2.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,18 +1,396 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<div class="main-page">
|
||||
<!-- header start -->
|
||||
<header>
|
||||
<div class="content">
|
||||
<img src="../assets/xiaohui.png" alt />
|
||||
<p>DB PhoneBook</p>
|
||||
<i
|
||||
class="el-icon-edit"
|
||||
style="width:0.7rem;font-size:0.5rem;color:#409EFF;"
|
||||
@click="goToAddress('/sign')"
|
||||
></i>
|
||||
</div>
|
||||
</header>
|
||||
<!-- header end -->
|
||||
|
||||
<div style="height: 1.2rem;"></div>
|
||||
|
||||
<!-- home-page start -->
|
||||
<div class="home-page">
|
||||
<div class="yiyan">
|
||||
<p>「一言」</p>
|
||||
<p>{{content}}</p>
|
||||
<p>-「{{from}}」</p>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div class="box1" @click="goToPeoplePage()">
|
||||
<i class="el-icon-s-custom" style="color: #fff;font-size:2rem;"></i>
|
||||
<p>按姓名查找</p>
|
||||
</div>
|
||||
<div class="box2" @click="goToTeamPage()">
|
||||
<i class="el-icon-menu" style="color: #fff;font-size:2rem;"></i>
|
||||
<p>按部门查找</p>
|
||||
</div>
|
||||
<div class="box3" @click="goToAllPage()">
|
||||
<i class="el-icon-s-grid" style="color: #fff;font-size:2rem;"></i>
|
||||
<p>全部人员名单</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- home-page end -->
|
||||
<div class="copyRight">
|
||||
<p>QQ: 1144131090</p>
|
||||
<p>
|
||||
Design By
|
||||
<span>Rain Sun</span>
|
||||
</p>
|
||||
<p>©2020 All Rights Reserved.</p>
|
||||
<p @click="open('http://beian.miit.gov.cn')">吉ICP备18005655号</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
|
||||
import { Loading } from "element-ui";
|
||||
import { post, getYiyanInfo } from "../axios/api";
|
||||
import { mapState, mapActions } from "vuex";
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
HelloWorld
|
||||
name: "helloWord",
|
||||
data() {
|
||||
return {
|
||||
content: "",
|
||||
from: "",
|
||||
loading: "",
|
||||
rowData: ""
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user_info", "user_list"])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["setUserInfo", "setUserList"]),
|
||||
init() {
|
||||
this.$store.replaceState(
|
||||
Object.assign(
|
||||
this.$store.state,
|
||||
JSON.parse(localStorage.getItem("phonebook"))
|
||||
)
|
||||
);
|
||||
// 用户登录态过滤
|
||||
if (
|
||||
Object.keys(this.user_info).length != 0 &&
|
||||
this.user_info.has_active
|
||||
) {
|
||||
// 注册完成
|
||||
let now = new Date().getTime(); //毫秒级时间戳
|
||||
if (now - this.user_info.login_time < 1000 * 60 * 60 * 24 * 7) {
|
||||
// 修改个人信息
|
||||
this.getInfo();
|
||||
return;
|
||||
}
|
||||
}
|
||||
// 还没获取过账号密码
|
||||
this.$message.error("您还没登录过");
|
||||
this.$router.replace("/login");
|
||||
},
|
||||
|
||||
getInfo: function() {
|
||||
this.openLoading("拼命加载中");
|
||||
let flag = 0;
|
||||
getYiyanInfo()
|
||||
.then(res => {
|
||||
if (++flag == 2) {
|
||||
this.endLoading();
|
||||
}
|
||||
this.content = res.data.hitokoto;
|
||||
this.from = res.data.from;
|
||||
})
|
||||
.catch(err => {
|
||||
if (++flag == 2) {
|
||||
this.endLoading();
|
||||
}
|
||||
console.log(err);
|
||||
});
|
||||
let data = {
|
||||
openid: this.user_info.openid
|
||||
};
|
||||
let need_refresh = true;
|
||||
if (this.user_list.set_time) {
|
||||
let now = new Date().getTime();
|
||||
if (now - this.user_list.set_time < 1000 * 60 * 3) {
|
||||
need_refresh = false;
|
||||
if (++flag == 2) {
|
||||
this.endLoading();
|
||||
}
|
||||
}
|
||||
}
|
||||
if (need_refresh) {
|
||||
post("/get", data)
|
||||
.then(res => {
|
||||
let user_list = {
|
||||
set_time: new Date().getTime(),
|
||||
list: res.data.user_list
|
||||
};
|
||||
this.setUserList([user_list, this]);
|
||||
if (++flag == 2) {
|
||||
this.endLoading();
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
if (++flag == 2) {
|
||||
this.endLoading();
|
||||
}
|
||||
if (err.response && err.response.status != 500) {
|
||||
this.$message.error(
|
||||
`${err.response.status}: ${err.response.data}`
|
||||
);
|
||||
} else {
|
||||
this.$message.error("网络错误,请稍候重试");
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
//跳转路由
|
||||
goToAddress(url) {
|
||||
this.$router.push(url);
|
||||
},
|
||||
|
||||
//跳转个人查找弹窗
|
||||
goToPeoplePage() {
|
||||
this.$prompt("请输入姓名(已支持模糊查询)", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
|
||||
inputErrorMessage: "姓名格式不正确",
|
||||
customClass: "messageBox-rewrite"
|
||||
})
|
||||
.then(({ value }) => {
|
||||
this.openLoading("拼命搜索中");
|
||||
let userInfo = this.searchPeople(value);
|
||||
if (userInfo.length != 0) {
|
||||
this.endLoading();
|
||||
this.$router.push({
|
||||
name: "Show",
|
||||
params: { userInfo: userInfo, pagetype: 1 }
|
||||
});
|
||||
} else {
|
||||
this.endLoading();
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "抱歉，查无此人"
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "取消输入"
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
//找人
|
||||
searchPeople(userName) {
|
||||
var userInfo = [];
|
||||
for (var i in this.user_list.list) {
|
||||
if (this.generReg(userName).test(this.user_list.list[i].name)) {
|
||||
userInfo.push(this.user_list.list[i]);
|
||||
}
|
||||
}
|
||||
return userInfo;
|
||||
},
|
||||
|
||||
//正则匹配辅助轮
|
||||
generReg(val) {
|
||||
let head = "(.*)(";
|
||||
let tail = ")(.*)";
|
||||
let body = val.split("").join(")(.*)(");
|
||||
return new RegExp(head + body + tail, "i");
|
||||
},
|
||||
|
||||
//按组查
|
||||
goToTeamPage() {
|
||||
this.$router.push({
|
||||
name: "Show",
|
||||
params: { pagetype: 2 }
|
||||
});
|
||||
},
|
||||
|
||||
//全体
|
||||
goToAllPage() {
|
||||
this.$router.push({
|
||||
name: "Show",
|
||||
params: { pagetype: 3 }
|
||||
});
|
||||
},
|
||||
|
||||
//开始加载
|
||||
openLoading(text) {
|
||||
this.loading = Loading.service({
|
||||
lock: true,
|
||||
text: text,
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(255, 255, 255, 0.7)"
|
||||
});
|
||||
},
|
||||
|
||||
//结束加载
|
||||
endLoading() {
|
||||
this.loading.close();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
header {
|
||||
height: 1.2rem;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 2000;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
header .content {
|
||||
height: 1.2rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px #f2f6fc solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 0.3rem;
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
|
||||
header img {
|
||||
height: 0.7rem;
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 0.4rem;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title p:first-of-type {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.title p:nth-of-type(2) {
|
||||
color: #303133;
|
||||
font-size: 0.4rem;
|
||||
margin-top: 0.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.title p:nth-of-type(3) {
|
||||
font-size: 0.4rem;
|
||||
margin-top: 0.1rem;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.yiyan {
|
||||
padding: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.yiyan p:first-of-type {
|
||||
font-size: 0.5rem;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.yiyan p:nth-of-type(2) {
|
||||
font-size: 0.5rem;
|
||||
text-align: left;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.yiyan p:last-of-type {
|
||||
font-size: 0.3rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.tab > div {
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.8rem;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 0.1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tab > div > p {
|
||||
font-size: 0.4rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
.tab .box1 {
|
||||
background: #d9ecff;
|
||||
}
|
||||
|
||||
.tab .box1 p {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.tab .box2 {
|
||||
background: #e1f3d8;
|
||||
}
|
||||
|
||||
.tab .box2 p {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.tab .box3 {
|
||||
background: #faecd8;
|
||||
}
|
||||
|
||||
.tab .box3 p {
|
||||
color: #e6a23c;
|
||||
}
|
||||
|
||||
.add-page {
|
||||
padding-right: 1rem;
|
||||
padding-left: 0.8rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.copyRight {
|
||||
margin-bottom: .3rem;
|
||||
width: 100%;
|
||||
}
|
||||
.copyRight p {
|
||||
font-size: 0.25rem;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
226
src/views/Login.vue
Normal file
226
src/views/Login.vue
Normal file
@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div class="main-page">
|
||||
<!-- header start -->
|
||||
<header>
|
||||
<div class="content">
|
||||
<img src="../assets/xiaohui.png" alt="">
|
||||
<p>DB PhoneBook</p>
|
||||
<div style="height: .7rem; width: .7rem;"></div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- header end -->
|
||||
|
||||
<div style="height:1.2rem;"></div>
|
||||
|
||||
<!-- add-page start -->
|
||||
<div class="add-page">
|
||||
<icon class="logo" name="canary"></icon>
|
||||
<div style="height: 4rem;"></div>
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
label-width="1.5rem"
|
||||
class="demo-ruleForm"
|
||||
:status-icon="true"
|
||||
>
|
||||
<el-form-item label="账号" prop="cid">
|
||||
<el-input v-model="ruleForm.cid" placeholder="教务账号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="pwd">
|
||||
<el-input v-model="ruleForm.pwd" type="password" placeholder="教务密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">立即登录</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- add-page end -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Loading } from "element-ui";
|
||||
import { post } from "../axios/api";
|
||||
import { mapState, mapActions } from "vuex";
|
||||
import { encryptMainCode } from "../utils/aes";
|
||||
export default {
|
||||
name: "login",
|
||||
data() {
|
||||
return {
|
||||
loading: "",
|
||||
ruleForm: {
|
||||
cid: "",
|
||||
pwd: ""
|
||||
},
|
||||
rules: {
|
||||
cid: [
|
||||
{ required: true, message: "请输入账号", trigger: "blur" },
|
||||
{ min: 10, max: 10, message: "请输入正确的教务账号", trigger: "blur" }
|
||||
],
|
||||
pwd: [
|
||||
{ required: true, message: "请输入密码", trigger: "blur" },
|
||||
{ max: 20, message: "最多输入20个字符", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user_info", "user_list"])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["setUserInfo", "setUserList"]),
|
||||
init() {
|
||||
this.$store.replaceState(
|
||||
Object.assign(
|
||||
this.$store.state,
|
||||
JSON.parse(localStorage.getItem("phonebook"))
|
||||
)
|
||||
);
|
||||
// 用户登录态过滤
|
||||
if (Object.keys(this.user_info).length != 0) {
|
||||
if(this.user_info.has_active) {
|
||||
// 注册完成
|
||||
let now = new Date().getTime(); //毫秒级时间戳
|
||||
if (
|
||||
now - this.user_info.login_time < 1000 * 60 * 60 * 24 * 7
|
||||
) {
|
||||
// 刷新登录时间
|
||||
let user_info = this.user_info
|
||||
user_info.login_time = now
|
||||
this.setUserInfo([user_info, this])
|
||||
this.$router.replace('/')
|
||||
console.log('已登录拦截')
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
// 初始化user_info
|
||||
this.setUserInfo([{}, this])
|
||||
console.log('用户信息初始化完成')
|
||||
},
|
||||
//重置
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
},
|
||||
//提交
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.openLoading('拼命登录中');
|
||||
console.log(this.ruleForm)
|
||||
post('/login', this.ruleForm).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '恭喜，登录成功！'
|
||||
});
|
||||
let user_info = res.data.user_info
|
||||
user_info.login_time = new Date().getTime()
|
||||
user_info.has_active = true
|
||||
user_info.pwd = encryptMainCode(this.ruleForm.pwd),
|
||||
this.setUserInfo([user_info, this])
|
||||
this.$router.replace('/')
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
this.endLoading();
|
||||
if (err.response && err.response.status != 500 && err.response.status != 512) {
|
||||
this.$message.error(`${err.response.status}: ${err.response.data}`);
|
||||
} else if(err.response.status == 512){
|
||||
// 没注册过，跳转到注册
|
||||
let user_info = {
|
||||
name: err.response.data.name,
|
||||
id: err.response.data.id,
|
||||
has_active: false,
|
||||
login_time: new Date().getTime(),
|
||||
cid: this.ruleForm.cid,
|
||||
pwd: encryptMainCode(this.ruleForm.pwd),
|
||||
}
|
||||
this.setUserInfo([user_info, this])
|
||||
this.$message.success("您还未注册，请立即注册");
|
||||
this.$router.replace('/sign')
|
||||
} else {
|
||||
this.$message.error("网络错误,请稍候重试");
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//开始加载
|
||||
openLoading(text) {
|
||||
this.loading = Loading.service({
|
||||
lock: true,
|
||||
text: text,
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(255, 255, 255, 0.7)"
|
||||
});
|
||||
},
|
||||
|
||||
//结束加载
|
||||
endLoading() {
|
||||
this.loading.close();
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="scss" scoped>
|
||||
header {
|
||||
height: 1.2rem;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 2000;
|
||||
background: #fff;
|
||||
.content {
|
||||
height: 1.2rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px #eeeeee solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 0.3rem;
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
img {
|
||||
height: 0.7rem;
|
||||
}
|
||||
p {
|
||||
font-size: 0.4rem;
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
.add-page {
|
||||
padding-right: 1rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
position: relative;
|
||||
.logo {
|
||||
display: block;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -2rem;
|
||||
}
|
||||
.title {
|
||||
font-size: .5rem;
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
173
src/views/Show.vue
Normal file
173
src/views/Show.vue
Normal file
@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div class="main-page">
|
||||
<!-- header start -->
|
||||
<header>
|
||||
<div class="content">
|
||||
<i class="el-icon-back" style="width:0.7rem;font-size:0.6rem;color:#409EFF;" @click="goToLast()"></i>
|
||||
<p>DB PhoneBook</p>
|
||||
<div style="height: .7rem; width: .7rem;"></div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- header end -->
|
||||
|
||||
<div style="height:1.2rem;"></div>
|
||||
|
||||
<!-- condition start -->
|
||||
<div class="condition" v-if="pagetype!=1">
|
||||
<el-select v-model="value" placeholder="请选择" @change="change">
|
||||
<el-option
|
||||
v-for="item in department_list"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- condition start -->
|
||||
<div class="box-area" >
|
||||
<div v-for="user in userInfo" :key='user.openid'>
|
||||
<UserCard :user="user"></UserCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { department_list } from '../utils/store';
|
||||
import { mapState, mapActions } from "vuex";
|
||||
import UserCard from './Card'
|
||||
export default {
|
||||
name: 'sign',
|
||||
data () {
|
||||
return {
|
||||
pagetype: 1,
|
||||
userInfo: '',
|
||||
options: [],
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user_info", "user_list"]),
|
||||
department_list: function() {
|
||||
return department_list
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["setUserInfo", "setUserList"]),
|
||||
init() {
|
||||
this.pagetype = this.$route.params.pagetype;
|
||||
if(!this.pagetype) this.$router.replace('/')
|
||||
if(this.pagetype == 1) {
|
||||
this.userInfo = this.$route.params.userInfo;
|
||||
} else if (this.pagetype ==3) {
|
||||
this.userInfo = this.user_list.list;
|
||||
this.options.unshift({value:'全部',label:'全部'})
|
||||
}
|
||||
},
|
||||
goToAddress(url) {
|
||||
this.$router.push(url);
|
||||
},
|
||||
goToLast() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
|
||||
//查人
|
||||
change(e) {
|
||||
if(e == '全部') {
|
||||
this.userInfo = this.user_list.list;
|
||||
return;
|
||||
}
|
||||
var newArray = [];
|
||||
var length = this.user_list.list.length;
|
||||
for(var i = 0; i<length ;i++) {
|
||||
if(this.user_list.list[i].department == e) newArray.push(this.user_list.list[i]);
|
||||
}
|
||||
this.userInfo = newArray;
|
||||
if(this.userInfo.length == 0) {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: '暂无人员信息'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
created(){
|
||||
this.init()
|
||||
},
|
||||
components: {
|
||||
UserCard
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
header {
|
||||
height: 1.2rem;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 2000;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
header .content {
|
||||
height: 1.2rem;
|
||||
width:100%;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px #F2F6FC solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 0.3rem;
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
|
||||
header img {
|
||||
height: 0.7rem;
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 0.4rem;
|
||||
color:#409EFF;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 0.3rem 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.box-area {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.item i {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.item p {
|
||||
width:60%;
|
||||
text-align: left;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.condition {
|
||||
padding:1rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
397
src/views/Sign.vue
Normal file
397
src/views/Sign.vue
Normal file
@ -0,0 +1,397 @@
|
||||
<template>
|
||||
<div class="main-page">
|
||||
<!-- header start -->
|
||||
<header>
|
||||
<div class="content">
|
||||
<i
|
||||
class="el-icon-back"
|
||||
style="width:0.7rem;font-size:0.6rem;color:#409EFF;"
|
||||
@click="goToAddress('/')"
|
||||
></i>
|
||||
<p>DB PhoneBook</p>
|
||||
<i class="el-icon-edit" style="width:0.7rem;font-size:0.5rem;color:#409EFF;"></i>
|
||||
</div>
|
||||
</header>
|
||||
<!-- header end -->
|
||||
|
||||
<div style="height:1.2rem;"></div>
|
||||
|
||||
<!-- add-page start -->
|
||||
<div class="add-page">
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
label-width="1.5rem"
|
||||
class="demo-ruleForm"
|
||||
:status-icon="true"
|
||||
>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="ruleForm.name" :disabled="true"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-radio-group v-model="ruleForm.sex">
|
||||
<el-radio label="男"></el-radio>
|
||||
<el-radio label="女"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电话" prop="tel">
|
||||
<el-input v-model="ruleForm.tel"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="部门" prop="department">
|
||||
<el-select v-model="ruleForm.department" placeholder="请选择所在部门">
|
||||
<el-option
|
||||
v-for="item in department_list"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="职位" prop="position">
|
||||
<el-input v-model="ruleForm.position"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="寝室" prop="adds">
|
||||
<el-input v-model="ruleForm.adds" placeholder="例：2-434"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="QQ" prop="qq">
|
||||
<el-input v-model="ruleForm.qq"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="微信" prop="wx">
|
||||
<el-input v-model="ruleForm.wx"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="pagetype=='sign'">
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">立即注册</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-else>
|
||||
<el-button type="primary" @click="resubmitForm('ruleForm')">立即修改</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" @click="dleleteForm(userInfo.userId)">删除</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- add-page end -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Loading } from "element-ui";
|
||||
import { post } from "../axios/api";
|
||||
import { mapState, mapActions } from "vuex";
|
||||
import { decryptMainCode } from "../utils/aes";
|
||||
import { department_list } from '../utils/store';
|
||||
|
||||
export default {
|
||||
name: "sign",
|
||||
data() {
|
||||
return {
|
||||
loading: "",
|
||||
pagetype: 0,
|
||||
userInfo: "",
|
||||
ruleForm: {
|
||||
name: "",
|
||||
sex: "",
|
||||
tel: "",
|
||||
department: "",
|
||||
position: "",
|
||||
adds: "",
|
||||
qq: "",
|
||||
wx: ""
|
||||
},
|
||||
phonetest: (rule, value, callback) => {
|
||||
if (!/^1[3456789]\d{9}$/.test(value)) {
|
||||
callback(new Error("号码不正确"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "请输入姓名", trigger: "blur" },
|
||||
{ max: 20, message: "最多输入20个字符", trigger: "blur" }
|
||||
],
|
||||
sex: [{ required: true, message: "请选择性别", trigger: "change" }],
|
||||
tel: [
|
||||
{ required: true, message: "请输入电话", trigger: "blur" },
|
||||
{ min: 5, max: 20, message: "请输入正确的电话", trigger: "blur" }
|
||||
],
|
||||
department: [
|
||||
{ required: true, message: "请选择部门", trigger: "change" }
|
||||
],
|
||||
position: [
|
||||
{ required: true, message: "请输入职位", trigger: "blur" },
|
||||
{ max: 20, message: "最多输入20个字符", trigger: "blur" }
|
||||
],
|
||||
adds: [
|
||||
{ required: false },
|
||||
{ max: 15, message: "最多输入15个字符", trigger: "blur" }
|
||||
],
|
||||
qq: [
|
||||
{ required: false },
|
||||
{ max: 15, message: "最多输入15个字符", trigger: "blur" }
|
||||
],
|
||||
wx: [
|
||||
{ required: false },
|
||||
{ max: 20, message: "最多输入20个字符", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user_info", "user_list"]),
|
||||
department_list: function() {
|
||||
return department_list
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["setUserInfo", "setUserList"]),
|
||||
goToAddress(url) {
|
||||
this.$router.push(url);
|
||||
},
|
||||
goToLast() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
//提交
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
this.openLoading("拼命注册中");
|
||||
var f = this.ruleForm;
|
||||
f.cid = this.user_info.cid;
|
||||
f.pwd = decryptMainCode(this.user_info.pwd);
|
||||
f.id = this.user_info.id;
|
||||
console.log(f);
|
||||
post("/sign", f)
|
||||
.then(res => {
|
||||
this.$message.success("恭喜，注册成功");
|
||||
let user_info = res.data.user_info;
|
||||
user_info.pwd = this.user_info.pwd;
|
||||
user_info.has_active = true;
|
||||
user_info.login_time = new Date().getTime();
|
||||
this.setUserInfo([user_info, this]);
|
||||
this.$router.replace("/");
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
this.endLoading();
|
||||
if (
|
||||
err.response &&
|
||||
err.response.status != 500 &&
|
||||
err.response.status != 511
|
||||
) {
|
||||
this.$message.error(
|
||||
`${err.response.status}: ${err.response.data}`
|
||||
);
|
||||
} else if (err.response.status == 511) {
|
||||
// 已经注册过，不知道哪里可能出现混乱，直接重置应用
|
||||
this.setUserInfo([{}, this]);
|
||||
this.$router.replace("/login");
|
||||
this.$message.error("您已注册过，应用已被重置");
|
||||
} else {
|
||||
this.$message.error("网络错误,请稍候重试");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
//重置
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
},
|
||||
|
||||
//开始加载
|
||||
openLoading(text) {
|
||||
this.loading = Loading.service({
|
||||
lock: true,
|
||||
text: text,
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(255, 255, 255, 0.7)"
|
||||
});
|
||||
},
|
||||
|
||||
//结束加载
|
||||
endLoading() {
|
||||
this.loading.close();
|
||||
},
|
||||
|
||||
init() {
|
||||
this.$store.replaceState(
|
||||
Object.assign(
|
||||
this.$store.state,
|
||||
JSON.parse(localStorage.getItem("phonebook"))
|
||||
)
|
||||
);
|
||||
// 用户登录态过滤
|
||||
if (Object.keys(this.user_info).length != 0) {
|
||||
if (this.user_info.has_active) {
|
||||
// 注册完成
|
||||
let now = new Date().getTime(); //毫秒级时间戳
|
||||
if (now - this.user_info.login_time < 1000 * 60 * 60 * 24 * 7) {
|
||||
// 修改个人信息
|
||||
this.pagetype = "edit";
|
||||
this.rewrite();
|
||||
}
|
||||
} else {
|
||||
this.pagetype = "sign";
|
||||
}
|
||||
this.ruleForm.name = this.user_info.name;
|
||||
} else {
|
||||
// 还没获取过账号密码
|
||||
this.$message.error("您还没登录过");
|
||||
this.$router.replace("/login");
|
||||
}
|
||||
},
|
||||
|
||||
// 覆写表单内容
|
||||
rewrite() {
|
||||
let u = this.user_info;
|
||||
this.ruleForm = {
|
||||
name: u.name,
|
||||
sex: u.sex,
|
||||
tel: u.tel,
|
||||
department: u.department,
|
||||
position: u.position,
|
||||
adds: u.adds,
|
||||
qq: u.qq,
|
||||
wx: u.wx
|
||||
};
|
||||
},
|
||||
|
||||
//重提交
|
||||
resubmitForm(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
this.openLoading("拼命修改中");
|
||||
var f = this.ruleForm;
|
||||
f.cid = this.user_info.cid;
|
||||
f.pwd = decryptMainCode(this.user_info.pwd);
|
||||
f.openid = this.user_info.openid;
|
||||
f.id = this.user_info.id;
|
||||
console.log(f);
|
||||
post("/update", f)
|
||||
.then(res => {
|
||||
this.$message.success("恭喜，更新成功");
|
||||
let user_info = f;
|
||||
user_info.pwd = this.user_info.pwd;
|
||||
user_info.has_active = true;
|
||||
user_info.login_time = new Date().getTime();
|
||||
this.setUserInfo([user_info, this]);
|
||||
this.$router.replace("/");
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
this.endLoading();
|
||||
if (err.response && err.response.status != 500) {
|
||||
this.$message.error(
|
||||
`${err.response.status}: ${err.response.data}`
|
||||
);
|
||||
} else {
|
||||
this.$message.error("网络错误,请稍候重试");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//删除
|
||||
dleleteForm(userId) {
|
||||
this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
this.openLoading("拼命删除中");
|
||||
let data = {
|
||||
openid: this.user_info.openid
|
||||
};
|
||||
post("/del", data)
|
||||
.then(res => {
|
||||
this.endLoading();
|
||||
this.$message.success("恭喜，删除成功");
|
||||
this.setUserInfo([{}, this]);
|
||||
this.$router.replace("/login");
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
this.endLoading();
|
||||
if (err.response && err.response.status != 500) {
|
||||
this.$message.error(
|
||||
`${err.response.status}: ${err.response.data}`
|
||||
);
|
||||
} else {
|
||||
this.$message.error("网络错误,请稍候重试");
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除"
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
header {
|
||||
height: 1.2rem;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 2000;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
header .content {
|
||||
height: 1.2rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px #f2f6fc solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 0.3rem;
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
|
||||
header img {
|
||||
height: 0.7rem;
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 0.4rem;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.add-page {
|
||||
padding-right: 1rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
17
vue.config.js
Normal file
17
vue.config.js
Normal file
@ -0,0 +1,17 @@
|
||||
module.exports = {
|
||||
productionSourceMap: false,
|
||||
pwa: {
|
||||
name: 'phonebook',
|
||||
themeColor: '#ffffff',
|
||||
workboxOptions: {
|
||||
skipWaiting: true
|
||||
},
|
||||
iconPaths: {
|
||||
favicon32: 'favicon.ico',
|
||||
favicon16: 'favicon.ico',
|
||||
appleTouchIcon: 'favicon.ico',
|
||||
maskIcon: 'favicon.ico',
|
||||
msTileImage: 'favicon.ico'
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user