Sherry 1 yıl önce
ebeveyn
işleme
3cbd87b07b

+ 5
- 0
src/fe/healthpassport/css/all.css Dosyayı Görüntüle

11382
   margin-bottom: 1.5em;
11382
   margin-bottom: 1.5em;
11383
   padding: 0.5em 0.55em;
11383
   padding: 0.5em 0.55em;
11384
 }
11384
 }
11385
+.passport__edit {
11386
+  width: 89%;
11387
+  margin: 0 auto;
11388
+  box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.2);
11389
+}
11385
 
11390
 
11386
 .methods p {
11391
 .methods p {
11387
   font-size: 1.3em;
11392
   font-size: 1.3em;

+ 1
- 1
src/fe/healthpassport/css/all.css.map
Dosya farkı çok büyük olduğundan ihmal edildi
Dosyayı Görüntüle


+ 5
- 0
src/fe/healthpassport/css/page/_passport.scss Dosyayı Görüntüle

112
             }
112
             }
113
         }
113
         }
114
     }
114
     }
115
+    &__edit {
116
+        width: 89%;
117
+        margin: 0 auto;
118
+        box-shadow: 0 0.2em 0.5em rgba(#000, 0.2);
119
+    }
115
 }
120
 }

+ 4
- 1
src/fe/healthpassport/index.html Dosyayı Görüntüle

362
                     <div class="label__checkbox"></div>
362
                     <div class="label__checkbox"></div>
363
                     <p>我同意<span class="goToActivity">個人資料使用方法</span></p>
363
                     <p>我同意<span class="goToActivity">個人資料使用方法</span></p>
364
                 </label>
364
                 </label>
365
-            </div>
365
+              </div>
366
               <div class="button form-submit">
366
               <div class="button form-submit">
367
                 <p>下一步</p>
367
                 <p>下一步</p>
368
               </div>
368
               </div>
436
                 <div class="tags"></div>
436
                 <div class="tags"></div>
437
               </div>
437
               </div>
438
             </div>
438
             </div>
439
+            <div class="button passport__edit">
440
+              <p>編輯健康護照</p>
441
+            </div>
439
           </div>
442
           </div>
440
         </section>
443
         </section>
441
       </main>
444
       </main>

+ 33
- 20
src/fe/healthpassport/js/base.js Dosyayı Görüntüle

38
 					
38
 					
39
 					if(userData === null) {
39
 					if(userData === null) {
40
 						register.LinePicHandler(profile.pictureUrl)
40
 						register.LinePicHandler(profile.pictureUrl)
41
-						sectionFadeIn(".register");
42
-						sectionFadeOut(".passport");
43
-						sectionFadeOut(".methods");
41
+						goToRegister();
44
 					}else {
42
 					}else {
45
-						sectionFadeIn(".passport");
46
-						sectionFadeOut(".methods");
47
-						sectionFadeOut(".register");
48
 						passport.buildPassportHandler(userData)
43
 						passport.buildPassportHandler(userData)
44
+						register.insertFromData(userData);
45
+						goToPassport();
49
 					}
46
 					}
50
 
47
 
51
 					// 測試用
48
 					// 測試用
52
-					// sectionFadeIn(".passport");
53
-					// sectionFadeOut(".methods");
54
-					// sectionFadeOut(".register");
49
+					// goToPassport();
55
 					// passport.buildPassportHandler(userData)
50
 					// passport.buildPassportHandler(userData)
56
-
51
+					// register.insertFromData(userData);
52
+					// ------------------------------------------
53
+					// goToRegister();
57
 					// register.LinePicHandler(profile.pictureUrl)
54
 					// register.LinePicHandler(profile.pictureUrl)
58
-					// sectionFadeIn(".register");
59
-					// sectionFadeOut(".passport");
60
-					// sectionFadeOut(".methods");
55
+
61
 				})
56
 				})
62
 		})
57
 		})
63
 
58
 
64
 		// 返回表單頁
59
 		// 返回表單頁
65
 		$(".backform").on("click", function(){
60
 		$(".backform").on("click", function(){
66
-			console.log("backform click")
67
-			sectionFadeOut(".methods");
68
-			sectionFadeIn(".register");
61
+			// console.log("backform click");
62
+			goToRegister();
69
 		});
63
 		});
70
 
64
 
71
 		// 前往活動辦法頁
65
 		// 前往活動辦法頁
72
 		$(".goToActivity").on("click", function(){
66
 		$(".goToActivity").on("click", function(){
73
-			console.log("backform click")
74
-			sectionFadeOut(".register");
75
-			sectionFadeIn(".methods");
67
+			// console.log("goToActivity click");
68
+			goToMethods();
76
 		});
69
 		});
77
 
70
 
78
 		
71
 		
109
 		$(".modal-backdrop.show").css("-webkit-backdrop-filter", "blur(2px)")
102
 		$(".modal-backdrop.show").css("-webkit-backdrop-filter", "blur(2px)")
110
 	}
103
 	}
111
 
104
 
105
+	function goToRegister() {
106
+		sectionFadeIn(".register");
107
+		sectionFadeOut(".passport");
108
+		sectionFadeOut(".methods");
109
+	}
110
+
111
+	function goToPassport() {
112
+		sectionFadeIn(".passport");
113
+		sectionFadeOut(".methods");
114
+		sectionFadeOut(".register");
115
+	}
116
+
117
+	function goToMethods() {
118
+		sectionFadeIn(".methods");
119
+		sectionFadeOut(".passport");
120
+		sectionFadeOut(".register");
121
+	}
122
+
112
 	// page進入動態
123
 	// page進入動態
113
 	function sectionFadeIn(el) {
124
 	function sectionFadeIn(el) {
114
 		$(el).show();
125
 		$(el).show();
147
 			myAlert(_msg);
158
 			myAlert(_msg);
148
 		},
159
 		},
149
 		getProfile,
160
 		getProfile,
150
-
161
+		goToRegister,
162
+		goToPassport,
163
+		goToMethods,
151
 	};
164
 	};
152
 };
165
 };
153
 
166
 

+ 4
- 2
src/fe/healthpassport/js/passport.js Dosyayı Görüntüle

25
 			}
25
 			}
26
 		});
26
 		});
27
 
27
 
28
-		
28
+		$(".passport__edit").on("click", function(){
29
+			base.goToRegister();
30
+		});
29
 	}
31
 	}
30
 
32
 
31
 	function getTagData(){
33
 	function getTagData(){
37
 
39
 
38
 	function buildPassportHandler(_data){
40
 	function buildPassportHandler(_data){
39
 		let data = _data;
41
 		let data = _data;
40
-		console.log(data);
42
+		// console.log(data);
41
 
43
 
42
 		setTimeout(()=>{
44
 		setTimeout(()=>{
43
 
45
 

+ 56
- 0
src/fe/healthpassport/js/register.js Dosyayı Görüntüle

220
 		
220
 		
221
 	}
221
 	}
222
 
222
 
223
+	function insertFromData(data) {
224
+		resetRegister();
225
+		let formData = data.filler_content;
226
+		// console.log(formData)
227
+		
228
+		// 健康行動
229
+		formData.healthAction.forEach((val)=>{
230
+			$(`.form__item-healthAction input[value=${val}]`).prop("checked", true);
231
+			$(`.form__item-healthAction input[value=${val}]`).parents(".form__options__item").addClass("checked");
232
+		});
233
+
234
+		// 對什麼健康話題有興趣
235
+		formData.healthTopic.forEach((val)=>{
236
+			$(`.form__item-healthTopic input[value=${val}]`).prop("checked", true);
237
+			$(`.form__item-healthTopic input[value=${val}]`).parents(".form__options__item").addClass("checked");
238
+		});
239
+
240
+		// 身體狀況如何
241
+		$(`input[value=${formData.healthStatus}]`).prop("checked",true);
242
+		$(`input[value=${formData.healthStatus}]`).parents(".form__options__item").addClass("checked");
243
+
244
+		// 最符合你的應對
245
+		$(`input[value=${formData.healthAdapt}]`).prop("checked",true);
246
+		$(`input[value=${formData.healthAdapt}]`).parents(".form__options__item").addClass("checked");
247
+
248
+		// 符合你的想法
249
+		formData.healthThought.forEach((val)=>{
250
+			$(`.form__item-healthThought input[value=${val}]`).prop("checked", true);
251
+			$(`.form__item-healthThought input[value=${val}]`).parents(".form__options__item").addClass("checked");
252
+		});
253
+
254
+		// 你的年齡
255
+		$(`input[value=${formData.healthAge}]`).prop("checked",true);
256
+		$(`input[value=${formData.healthAge}]`).parents(".form__options__item").addClass("checked");
223
 
257
 
258
+		// 暱稱
259
+		$(`input[id="nickName"]`).val(data.nickname);
260
+
261
+		// 性別
262
+		$(`select[id="gender"]`).val(formData.healthGender);
263
+
264
+		// 頭貼
265
+		$(".register .photo__img").append(`
266
+			<img src=${data.head_sticker} />
267
+		`);
268
+	}
269
+
270
+
271
+	// 取得選取的checkbox
224
 	function getCheckboxVal(name) {
272
 	function getCheckboxVal(name) {
225
 
273
 
226
 		let vals = $(".register input[type=checkbox][name="+name+"]:checked").map(function() {
274
 		let vals = $(".register input[type=checkbox][name="+name+"]:checked").map(function() {
230
 		return vals;
278
 		return vals;
231
 	}
279
 	}
232
 
280
 
281
+	// 取得選取的radio
233
 	function getRadioVal(name){
282
 	function getRadioVal(name){
234
 		return $("input[name="+name+"]:checked").val();
283
 		return $("input[name="+name+"]:checked").val();
235
 	}
284
 	}
236
 
285
 
286
+	// 確認註冊表單
237
 	function checkRegister(){
287
 	function checkRegister(){
238
 		let isComplete = true;
288
 		let isComplete = true;
239
 		registerAlert = "";
289
 		registerAlert = "";
314
 		return isComplete;
364
 		return isComplete;
315
 	}
365
 	}
316
 
366
 
367
+	// 送出表單
317
 	function sendRegister() {
368
 	function sendRegister() {
318
 
369
 
319
 		// 測試用
370
 		// 測試用
357
 			})
408
 			})
358
 	}
409
 	}
359
 
410
 
411
+	// 重設表單
360
 	function resetRegister() {
412
 	function resetRegister() {
361
 		$('.register .form input[type=checkbox], .register .form input[type=radio]').prop('checked', false);
413
 		$('.register .form input[type=checkbox], .register .form input[type=radio]').prop('checked', false);
362
 		$('.register .form input[type=text], .register .form select').val('');
414
 		$('.register .form input[type=text], .register .form select').val('');
415
+
363
 	}
416
 	}
364
 	
417
 	
365
 
418
 
386
 		},
439
 		},
387
 		selectImage: function() {
440
 		selectImage: function() {
388
 			selectImage();
441
 			selectImage();
442
+		},
443
+		insertFromData: function(data) {
444
+			insertFromData(data);
389
 		}
445
 		}
390
 	};
446
 	};
391
 };
447
 };