page12

questionnair/src/app/ask/ask.component.html

@@ -2,16 +2,52 @@
   <div class="wrapper layout">
     <!-- {{curPage}} -->
     <app-page1 [curPageData]="curPageData" *ngIf="curPage == 0"></app-page1>
-    <app-page2 [curPageData]="curPageData" *ngIf="curPage == 1"></app-page2>
-    <app-page3 [curPageData]="curPageData" *ngIf="curPage == 2"></app-page3>
-    <app-page4 [curPageData]="curPageData" *ngIf="curPage == 3"></app-page4>
-    <app-page5 [curPageData]="curPageData" *ngIf="curPage == 4"></app-page5>
+    <app-page2
+      [curPageData]="curPageData"
+      *ngIf="curPage == 1"
+      (getAllAnswer)="getAllAnswer($event)"
+    ></app-page2>
+    <app-page3
+      [curPageData]="curPageData"
+      *ngIf="curPage == 2"
+      (getAllAnswer)="getAllAnswer($event)"
+      [isShowChildAgeBtn]="isShowChildAgeBtn"
+    ></app-page3>
+    <app-page4
+      [curPageData]="curPageData"
+      *ngIf="curPage == 3"
+      (getAllAnswer)="getAllAnswer($event)"
+    ></app-page4>
+    <app-page5
+      [curPageData]="curPageData"
+      *ngIf="curPage == 4"
+      (getAllAnswer)="getAllAnswer($event)"
+    ></app-page5>
+    <!--过渡页-->
     <app-page6 [curPageData]="curPageData" *ngIf="curPage == 5"> </app-page6>
-    <app-page7 [curPageData]="curPageData" *ngIf="curPage == 6"></app-page7>
-    <app-page8 [curPageData]="curPageData" *ngIf="curPage == 7"></app-page8>
-    <app-page9 [curPageData]="curPageData" *ngIf="curPage == 8"></app-page9>
+    <app-page7
+      [curPageData]="curPageData"
+      *ngIf="curPage == 6"
+      (getAllAnswer)="getAllAnswer($event)"
+      [hasMate]="hasMate"
+    ></app-page7>
+    <app-page8
+      [curPageData]="curPageData"
+      *ngIf="curPage == 7"
+      (getAllAnswer)="getAllAnswer($event)"
+    ></app-page8>
+    <app-page9
+      [curPageData]="curPageData"
+      *ngIf="curPage == 8"
+      (getAllAnswer)="getAllAnswer($event)"
+      [hasMate]="hasMate"
+    ></app-page9>
     <app-page10 [curPageData]="curPageData" *ngIf="curPage == 9"></app-page10>
-    <app-page11 [curPageData]="curPageData" *ngIf="curPage == 10"></app-page11>
+    <app-page11
+      [curPageData]="curPageData"
+      *ngIf="curPage == 10"
+      (getAllAnswer)="getAllAnswer($event)"
+    ></app-page11>
     <app-page12 [curPageData]="curPageData" *ngIf="curPage == 11"></app-page12>
     <app-page13 [curPageData]="curPageData" *ngIf="curPage == 12"></app-page13>
     <app-page14 [curPageData]="curPageData" *ngIf="curPage == 13"></app-page14>

questionnair/src/app/ask/ask.component.ts

 import { Component, OnInit } from '@angular/core'
 import { CommonService } from '../common.service'
-
 @Component({
   selector: 'app-ask',
   templateUrl: './ask.component.html',
@@ -13,29 +12,32 @@ export class AskComponent implements OnInit {
   curQues: string
   curPageData: Object
   allAnswers: Array<any>
+  isShowChildAgeBtn: boolean
+  hasMate: boolean
   constructor(private commonService: CommonService) {}
 
   ngOnInit() {
-    this.surveyInfo()
-    this.curPage = 0
+    this.curPage = 10
     this.totalPage = 17
     this.curPageData = []
-    setTimeout(() => {
-      this.curPageData = this.allQues[this.curPage]
-    }, 500)
+    this.allAnswers = []
+    this.isShowChildAgeBtn = true
+    this.hasMate = true
+    this.surveyInfo()
   }
 
   surveyInfo() {
     this.commonService.surveyInfo().then(res => {
       if (res['success']) {
         this.allQues = res['data']['survey'].pages
+        this.curPageData = this.allQues[this.curPage]
       }
     })
   }
   reducePage() {
     if (this.curPage > 0) {
       this.curPage--
-      this.curPageData = this.allQues[this.curPage]
+      this.setCurPageData()
     } else {
       return
     }
@@ -43,12 +45,96 @@ export class AskComponent implements OnInit {
 
   addPage() {
     if (this.curPage < 16) {
+      if (
+        this.curPage == 0 ||
+        this.allAnswers[this.curPage] ||
+        this.curPage == 5 ||
+        this.curPage == 9
+      ) {
         this.curPage++
-      this.curPageData = this.allQues[this.curPage]
+        this.setCurPageData()
+      }
     } else {
       this.curPage = 0
       return
     }
     console.log(this.curPage)
   }
+  getAllAnswer(e) {
+    this.allAnswers[this.curPage] = e
+    console.log(this.allAnswers)
+  }
+  setCurPageData() {
+    const thePateData = this.allQues[this.curPage]
+    console.log('thePateData------', this.curPage, thePateData)
+    this.curPageData = thePateData
+    if (this.curPage == 2) {
+      const page2Answer = this.allAnswers[1]
+      this.filterPage2(
+        page2Answer.questions[0].options[0].optionId,
+        thePateData
+      )
+    }
+    if (this.curPage == 4) {
+      const page2Answerswer = this.allAnswers[1]
+      console.log(page2Answerswer)
+      this.filterPage5(
+        page2Answerswer.questions[0].options[0].optionId,
+        thePateData
+      )
+    }
+  }
+  filterPage2(optionId, thePateData) {
+    //判断第二页选择家庭1单身2二人3独立带娃4多口
+    if (optionId == 1 || optionId == 2) {
+      this.isShowChildAgeBtn = false
+    } else {
+      this.isShowChildAgeBtn = true
+    }
+    if (optionId == 1 || optionId == 3) {
+      this.hasMate = false
+    } else {
+      this.hasMate = true
+    }
+    //单身贵族->您的年龄
+    if (optionId == 1) {
+      this.curPageData = {
+        ...thePateData,
+        questions: thePateData.questions.filter(question => {
+          return question.questionId == 2
+        })
+      }
+      return
+    }
+    //二人世界->您的年龄&配偶年龄
+    if (optionId == 2) {
+      this.curPageData = {
+        ...thePateData,
+        questions: thePateData.questions.filter(question => {
+          return question.questionId <= 3
+        })
+      }
+      return
+    }
+    //单亲->您的年龄&孩子年龄
+    if (optionId == 3) {
+      this.curPageData = {
+        ...thePateData,
+        questions: thePateData.questions.filter(question => {
+          return question.questionId == 2 || question.questionId == 4
+        })
+      }
+    }
+  }
+
+  filterPage5(optionId, thePateData) {
+    //判断是否显示配偶工作页
+    //1单身 3单亲
+    if (optionId == 1 || optionId == 3) {
+      this.curPage++
+      console.log('page5', this.curPage, this.curPageData)
+
+      this.curPageData = this.allQues[this.curPage]
+    }
+  }
 }

questionnair/src/app/page11/page11.component.html

@@ -8,6 +8,7 @@
         <li
           class="selected"
           *ngFor="let options of this.curPageData.questions[0].options"
+          (click)="getAnswer(options)"
         >
           {{ options.optionName }}
         </li>

questionnair/src/app/page11/page11.component.ts

-import { Component, OnInit ,Input} from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 
 @Component({
   selector: 'app-page11',
@@ -7,11 +7,41 @@ import { Component, OnInit ,Input} from '@angular/core';
 })
 export class Page11Component implements OnInit {
   @Input() curPageData: Array<any>
-  constructor() { }
+  @Output() getAllAnswer = new EventEmitter<any>()
+  allOption: object
+  constructor() {}
 
   ngOnInit() {
+    this.allOption = {}
     console.log(this.curPageData)
   }
-
-
+  getAnswer(options) {
+    console.log(options)
+    if (!this.allOption[options['optionId']]) {
+      this.allOption[options['optionId']] = {}
+    }
+    this.allOption[options['optionId']] = {
+      selected: !this.allOption[options['optionId']]['selected'],
+      options
+    }
+    const options_ret = Object.keys(this.allOption)
+      .filter(item => {
+        return this.allOption[item]['selected']
+      })
+      .map(questionId => {
+        return {
+          options: this.allOption[questionId]
+        }
+      })
+    const ret = {
+      pageId: this.curPageData['pageId'],
+      questions: [
+        {
+          questionId: this.curPageData['questions'][0].questionId,
+          options: options_ret
+        }
+      ]
+    }
+    this.getAllAnswer.emit(ret)
+  }
 }

questionnair/src/app/page2/page2.component.html

@@ -2,7 +2,10 @@
   <div class="content">
     <div class="questionTitle">{{ this.curPageData['pageName'] }}</div>
     <ul class="option_item">
-      <li *ngFor="let options of this.curPageData.questions[0].options">
+      <li
+        *ngFor="let options of this.curPageData.questions[0].options"
+        (click)="getAnswer(options)"
+      >
         <img
           class="selected"
           src="assets/images/icon{{ options.optionId }}.png"

questionnair/src/app/page2/page2.component.ts

-import { Component, OnInit, Input } from '@angular/core'
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 
 @Component({
   selector: 'app-page2',
@@ -7,9 +7,22 @@ import { Component, OnInit, Input } from '@angular/core'
 })
 export class Page2Component implements OnInit {
   @Input() curPageData: Array<any>
+  @Output() getAllAnswer = new EventEmitter<any>()
   constructor() {}
 
   ngOnInit() {
     console.log(this.curPageData)
   }
+  getAnswer(option) {
+    const ret = {
+      pageId: this.curPageData['pageId'],
+      questions: [
+        {
+          questionId: this.curPageData['questions'][0].questionId,
+          options: [option]
+        }
+      ]
+    }
+    this.getAllAnswer.emit(ret)
+  }
 }

questionnair/src/app/page3/page3.component.html

@@ -4,25 +4,24 @@
     <ul class="ageContent">
       <li *ngFor="let optionsList of this.curPageData.questions">
         <div>{{ optionsList.questionName }}</div>
-        <b (click)="showToast()">&gt;</b>
+        <b (click)="showToast(optionsList)">&gt;</b>
       </li>
     </ul>
   </div>
-  <div class="addChild">
+  <div class="addChild" *ngIf="isShowChildAgeBtn">
     <div class="icon">+</div>
     <div data-toggle="modal">增加孩子年龄</div>
   </div>
   <div class="toastWrapper toast" *ngIf="isShow">
     <div class="toastContent">
       <ul>
-        <li class="selected" (click)="closeToast()">60后</li>
-        <li>65后</li>
-        <li>70后</li>
-        <li>75后</li>
-        <li>80后</li>
-        <li>85后</li>
-        <li>90后</li>
-        <li>95后</li>
+        <li
+          class="selected"
+          *ngFor="let options of curQues.options"
+          (click)="closeToast(); getAnswer(options)"
+        >
+          {{ options.optionName }}
+        </li>
       </ul>
     </div>
   </div>

questionnair/src/app/page3/page3.component.ts

-import { Component, OnInit, Input } from '@angular/core'
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 
 @Component({
   selector: 'app-page3',
@@ -7,17 +7,38 @@ import { Component, OnInit, Input } from '@angular/core'
 })
 export class Page3Component implements OnInit {
   @Input() curPageData: Array<any>
-  isShow: boolean
+  @Input() isShowChildAgeBtn: boolean
+  @Output() getAllAnswer = new EventEmitter<any>()
 
+  isShow: boolean
+  curQues: Object
+  curAllQues: Object
   constructor() {}
 
   ngOnInit() {
+    this.curQues = {}
+    this.curAllQues = {}
+
     console.log(this.curPageData)
   }
-  showToast() {
+  showToast(question) {
     this.isShow = true
+    this.curQues = question
+    console.log(this.curQues)
   }
   closeToast() {
     this.isShow = false
   }
+  getAnswer(option) {
+    const questionId = this.curQues['questionId']
+    this.curAllQues[questionId] = option
+    const questions = Object.keys(this.curAllQues).map(questionId => {
+      return { questionId, options: this.curAllQues[questionId] }
+    })
+    const ret = {
+      pageId: 3,
+      questions
+    }
+    this.getAllAnswer.emit(ret)
+  }
 }

questionnair/src/app/page4/page4.component.html

@@ -6,6 +6,7 @@
         <li
           class="selected"
           *ngFor="let options of this.curPageData.questions[0].options"
+          (click)="getAnswer(options)"
         >
           {{ options.optionName }}
         </li>

questionnair/src/app/page4/page4.component.ts

-import { Component, OnInit, Input } from '@angular/core'
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 
 @Component({
   selector: 'app-page4',
@@ -7,9 +7,22 @@ import { Component, OnInit, Input } from '@angular/core'
 })
 export class Page4Component implements OnInit {
   @Input() curPageData: Array<any>
+  @Output() getAllAnswer = new EventEmitter<any>()
   constructor() {}
 
   ngOnInit() {
     console.log(this.curPageData)
   }
+  getAnswer(option) {
+    const ret = {
+      pageId: this.curPageData['pageId'],
+      questions: [
+        {
+          questionId: this.curPageData['questions'][0].questionId,
+          option: [option]
+        }
+      ]
+    }
+    this.getAllAnswer.emit(ret)
+  }
 }

questionnair/src/app/page5/page5.component.html

@@ -10,6 +10,7 @@
         <li
           class="selected"
           *ngFor="let options of this.curPageData.questions[0].options"
+          (click)="getAnswer(options)"
         >
           {{ options.optionName }}
         </li>

questionnair/src/app/page5/page5.component.ts

-import { Component, OnInit, Input } from '@angular/core'
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 
 @Component({
   selector: 'app-page5',
@@ -7,9 +7,22 @@ import { Component, OnInit, Input } from '@angular/core'
 })
 export class Page5Component implements OnInit {
   @Input() curPageData: Array<any>
+  @Output() getAllAnswer = new EventEmitter<any>()
   constructor() {}
 
   ngOnInit() {
     console.log(this.curPageData)
   }
+  getAnswer(option) {
+    const ret = {
+      pageId: this.curPageData['pageId'],
+      questions: [
+        {
+          questionId: this.curPageData['questions'][0].questionId,
+          option: [option]
+        }
+      ]
+    }
+    this.getAllAnswer.emit(ret)
+  }
 }

questionnair/src/app/page7/page7.component.html

@@ -8,17 +8,19 @@
         <li
           class="selected"
           *ngFor="let options of this.curPageData.questions[0].options"
+          (click)="getAnswer(this.curPageData.questions[0], options)"
         >
           {{ options.optionName }}
         </li>
       </ul>
-      <div class="questionTitle">
+      <div class="questionTitle" *ngIf="hasMate">
         {{ this.curPageData.questions[1].questionName }}
       </div>
-      <ul class="income">
+      <ul class="income" *ngIf="hasMate">
         <li
           class="selected"
           *ngFor="let options of this.curPageData.questions[1].options"
+          (click)="getAnswer(this.curPageData.questions[1], options)"
         >
           {{ options.optionName }}
         </li>

questionnair/src/app/page7/page7.component.ts

-import { Component, OnInit, Input } from '@angular/core'
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 
 @Component({
   selector: 'app-page7',
@@ -7,9 +7,27 @@ import { Component, OnInit, Input } from '@angular/core'
 })
 export class Page7Component implements OnInit {
   @Input() curPageData: Array<any>
+  @Input() hasMate: boolean
+  @Output() getAllAnswer = new EventEmitter<any>()
+  curAllQues: Object
   constructor() {}
 
   ngOnInit() {
+    this.curAllQues = {}
     console.log(this.curPageData)
+    console.log(this.hasMate)
+  }
+  getAnswer(question, options) {
+    console.log('page7', question, options)
+    const questionId = question['questionId']
+    this.curAllQues[questionId] = options
+    const questions = Object.keys(this.curAllQues).map(questionId => {
+      return { questionId, options: this.curAllQues[questionId] }
+    })
+    const ret = {
+      pageId: 7,
+      questions
+    }
+    this.getAllAnswer.emit(ret)
   }
 }

questionnair/src/app/page8/page8.component.html

@@ -8,6 +8,7 @@
         <li
           class="selected"
           *ngFor="let options of this.curPageData.questions[0].options"
+          (click)="getAnswer(this.curPageData.questions[0], options)"
         >
           {{ options.optionName }}
         </li>
@@ -19,6 +20,7 @@
         <li
           class="selected"
           *ngFor="let options of this.curPageData.questions[1].options"
+          (click)="getAnswer(this.curPageData.questions[1], options)"
         >
           {{ options.optionName }}
         </li>

questionnair/src/app/page8/page8.component.ts

-import { Component, OnInit, Input } from '@angular/core'
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 
 @Component({
   selector: 'app-page8',
@@ -7,9 +7,25 @@ import { Component, OnInit, Input } from '@angular/core'
 })
 export class Page8Component implements OnInit {
   @Input() curPageData: Array<any>
+  @Output() getAllAnswer = new EventEmitter<any>()
+  curAllQues: Object
   constructor() {}
 
   ngOnInit() {
+    this.curAllQues = {}
     console.log(this.curPageData)
   }
+  getAnswer(question, options) {
+    console.log('page8', question, options)
+    const questionId = question['questionId']
+    this.curAllQues[questionId] = options
+    const questions = Object.keys(this.curAllQues).map(questionId => {
+      return { questionId, options: this.curAllQues[questionId] }
+    })
+    const ret = {
+      pageId: 8,
+      questions
+    }
+    this.getAllAnswer.emit(ret)
+  }
 }

questionnair/src/app/page9/page9.component.html

@@ -8,17 +8,19 @@
         <li
           class="selected"
           *ngFor="let options of this.curPageData.questions[0].options"
+          (click)="getAnswer(this.curPageData.questions[0], options)"
         >
           {{ options.optionName }}
         </li>
       </ul>
-      <div class="questionTitle">
+      <div class="questionTitle" *ngIf="hasMate">
         {{ this.curPageData.questions[1].questionName }}
       </div>
-      <ul class="jobContent">
+      <ul class="jobContent" *ngIf="hasMate">
         <li
           class="selected"
           *ngFor="let options of this.curPageData.questions[1].options"
+          (click)="getAnswer(this.curPageData.questions[1], options)"
         >
           {{ options.optionName }}
         </li>

questionnair/src/app/page9/page9.component.ts

-import { Component, OnInit, Input } from '@angular/core'
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 
 @Component({
   selector: 'app-page9',
@@ -7,9 +7,26 @@ import { Component, OnInit, Input } from '@angular/core'
 })
 export class Page9Component implements OnInit {
   @Input() curPageData: Array<any>
+  @Input() hasMate: boolean
+  @Output() getAllAnswer = new EventEmitter<any>()
+  curAllQues: Object
   constructor() {}
 
   ngOnInit() {
+    this.curAllQues = {}
     console.log(this.curPageData)
   }
+  getAnswer(question, options) {
+    console.log('page9', question, options)
+    const questionId = question['questionId']
+    this.curAllQues[questionId] = options
+    const questions = Object.keys(this.curAllQues).map(questionId => {
+      return { questionId, options: this.curAllQues[questionId] }
+    })
+    const ret = {
+      pageId: 9,
+      questions
+    }
+    this.getAllAnswer.emit(ret)
+  }
 }