样式修改

questionnaire/src/app/age/age.component.ts

@@ -73,6 +73,13 @@ export class AgeComponent implements OnInit {
         // 如果有孩子，需要考虑是孩子几的年龄
         if (this.curPageData['questions'][j]['questionSubId'] == this.curQues.questionSubId) {
           this.curPageData['questions'][j].optionName = options.optionName;
+          for (let m = 0; m < this.curPageData['questions'][j].options.length; m++) {
+            if (this.curPageData['questions'][j].options[m].optionId == options.optionId) {
+              this.curPageData['questions'][j].options[m]['selected'] = true;
+            } else {
+              this.curPageData['questions'][j].options[m]['selected'] = false;
+            }
+          }
         }
       }
     }
@@ -98,10 +105,10 @@ export class AgeComponent implements OnInit {
     this.curQues = question;
     this.curQuesIndex = idx;
     console.log(question)
-    for(let i=0;i<question['options'].length;i++){
-      if(question.optionName == question['options'][i].optionName){
+    for (let i = 0; i < question['options'].length; i++) {
+      if (question.optionName == question['options'][i].optionName) {
         question['options'][i]['selected'] = true
-      }else{
+      } else {
         question['options'][i]['selected'] = false
       }
     }

questionnaire/src/app/family/family.component.css

 .option_item {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .option_item li {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 50%;
-    margin-bottom: 20%;
-  }
-  .option_item li img {
-    max-width: 55%;
-  }
-  .option_item li img.selected {
-    border: 2px solid #ff0000;
-    border-radius: 50%;
-  }
-  
\ No newline at end of file
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.option_item li {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 50%;
+  margin-bottom: 20%;
+}
+
+.option_item li .imgBox {
+  width: 120px;
+}
+
+.option_item li .imgBox img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border: 2px solid transparent;
+}
+
+.option_item li .imgBox img.selected {
+  border: 2px solid #ff0000;
+  border-radius: 50%;
+}

questionnaire/src/app/family/family.component.html

@@ -3,9 +3,11 @@
     <div class="questionTitle">{{ curPageData?.pageName }}</div>
     <ul class="option_item" style="margin-top: 20%;">
       <li *ngFor="let options of curPageData?.questions[0]['options']" (click)="selectedFamily(options)">
-        <img [ngClass]="{ selected: options['selected'] }"
-             src="assets/images/icon{{ options.optionId }}.png"
-             alt="{{ options.optionName }}"/>
+        <div class="imgBox">
+          <img [ngClass]="{ selected: options['selected'] }"
+               src="assets/images/icon{{ options.optionId }}.png"
+               alt="{{ options.optionName }}"/>
+        </div>
         <span>{{ options.optionName }}</span>
       </li>
     </ul>

questionnaire/src/app/family/family.component.ts

@@ -12,6 +12,7 @@ export class FamilyComponent implements OnInit {
   selectedOptionId: any;
   // 上一次的答案
   lastQuestions: Array<any>;
+  nextBtn: boolean = false;
 
   constructor(private commonService: CommonService, private router: Router) {
     this.pageAnswers = {
@@ -28,19 +29,19 @@ export class FamilyComponent implements OnInit {
     this.lastQuestions = this.commonService.todosCopy.filter(item => item.pageId == 2).pop();
     this.commonService.surveyInfo().then(res => {
       this.curPageData = res['data']['survey']['pages'].filter(item => item.pageId === 2).pop();
-      for (let i = 0; i < this.lastQuestions['questions'].length; i++) {
-        for (let j = 0; j < this.curPageData['questions'].length; j++) {
-          if (this.lastQuestions['questions'][i].questionId == this.curPageData['questions'][j].questionId) {
-            for (let m = 0; m < this.lastQuestions['questions'][i].options.length; m++) {
-              for (let n = 0; n < this.curPageData['questions'][i].options.length; n++) {
-                if (this.lastQuestions['questions'][i].options[m].optionId == this.curPageData['questions'][i].options[n].optionId) {
-                  this.selectedFamily(this.curPageData['questions'][i].options[n]);
-                }
-              }
-            }
-          }
-        }
-      }
+      // for (let i = 0; i < this.lastQuestions['questions'].length; i++) {
+      //   for (let j = 0; j < this.curPageData['questions'].length; j++) {
+      //     if (this.lastQuestions['questions'][i].questionId == this.curPageData['questions'][j].questionId) {
+      //       for (let m = 0; m < this.lastQuestions['questions'][i].options.length; m++) {
+      //         for (let n = 0; n < this.curPageData['questions'][i].options.length; n++) {
+      //           if (this.lastQuestions['questions'][i].options[m].optionId == this.curPageData['questions'][i].options[n].optionId) {
+      //             this.selectedFamily(this.curPageData['questions'][i].options[n]);
+      //           }
+      //         }
+      //       }
+      //     }
+      //   }
+      // }
       // console.log(this.curPageData)
     });
   }
@@ -66,10 +67,22 @@ export class FamilyComponent implements OnInit {
     };
     this.commonService.addAnswer(this.pageAnswers);
     // console.log(this.pageAnswers)
+    if (this.pageAnswers.questions[0].options.every((item) => {
+        return item.selected;
+      })) {
+      this.nextBtn = true;
+    } else {
+      this.nextBtn = false;
+    }
   }
 
 //   下一步
   next() {
-    this.router.navigate(['/age'], {queryParams: {type: this.selectedOptionId}});
+    if (this.nextBtn) {
+      this.router.navigate(['/age'], {queryParams: {type: this.selectedOptionId}});
+    } else {
+      return;
+    }
+
   }
 }

questionnaire/src/app/health/health.component.ts

@@ -18,6 +18,7 @@ export class HealthComponent implements OnInit {
   pageAnswers: any;
   // 暂存健康状况
   questions: Array<any> = [];
+  nextBtn: boolean = false;
 
   constructor(private commonService: CommonService,
               private router: Router,
@@ -76,6 +77,13 @@ export class HealthComponent implements OnInit {
       }],
     };
     this.commonService.addAnswer(this.pageAnswers);
+    if (this.pageAnswers.questions[0].options.every((item) => {
+        return item.selected;
+      })) {
+      this.nextBtn = true;
+    } else {
+      this.nextBtn = false;
+    }
   }
 
   // 获取所有用户选择的健康选项