Commit 2a793f2b by Chao Sun

page12

parent 872f0c3e
...@@ -2,16 +2,52 @@ ...@@ -2,16 +2,52 @@
<div class="wrapper layout"> <div class="wrapper layout">
<!-- {{curPage}} --> <!-- {{curPage}} -->
<app-page1 [curPageData]="curPageData" *ngIf="curPage == 0"></app-page1> <app-page1 [curPageData]="curPageData" *ngIf="curPage == 0"></app-page1>
<app-page2 [curPageData]="curPageData" *ngIf="curPage == 1"></app-page2> <app-page2
<app-page3 [curPageData]="curPageData" *ngIf="curPage == 2"></app-page3> [curPageData]="curPageData"
<app-page4 [curPageData]="curPageData" *ngIf="curPage == 3"></app-page4> *ngIf="curPage == 1"
<app-page5 [curPageData]="curPageData" *ngIf="curPage == 4"></app-page5> (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-page6 [curPageData]="curPageData" *ngIf="curPage == 5"> </app-page6>
<app-page7 [curPageData]="curPageData" *ngIf="curPage == 6"></app-page7> <app-page7
<app-page8 [curPageData]="curPageData" *ngIf="curPage == 7"></app-page8> [curPageData]="curPageData"
<app-page9 [curPageData]="curPageData" *ngIf="curPage == 8"></app-page9> *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-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-page12 [curPageData]="curPageData" *ngIf="curPage == 11"></app-page12>
<app-page13 [curPageData]="curPageData" *ngIf="curPage == 12"></app-page13> <app-page13 [curPageData]="curPageData" *ngIf="curPage == 12"></app-page13>
<app-page14 [curPageData]="curPageData" *ngIf="curPage == 13"></app-page14> <app-page14 [curPageData]="curPageData" *ngIf="curPage == 13"></app-page14>
......
import { Component, OnInit } from '@angular/core' import { Component, OnInit } from '@angular/core'
import { CommonService } from '../common.service' import { CommonService } from '../common.service'
@Component({ @Component({
selector: 'app-ask', selector: 'app-ask',
templateUrl: './ask.component.html', templateUrl: './ask.component.html',
...@@ -13,29 +12,32 @@ export class AskComponent implements OnInit { ...@@ -13,29 +12,32 @@ export class AskComponent implements OnInit {
curQues: string curQues: string
curPageData: Object curPageData: Object
allAnswers: Array<any> allAnswers: Array<any>
isShowChildAgeBtn: boolean
hasMate: boolean
constructor(private commonService: CommonService) {} constructor(private commonService: CommonService) {}
ngOnInit() { ngOnInit() {
this.surveyInfo() this.curPage = 10
this.curPage = 0
this.totalPage = 17 this.totalPage = 17
this.curPageData = [] this.curPageData = []
setTimeout(() => { this.allAnswers = []
this.curPageData = this.allQues[this.curPage] this.isShowChildAgeBtn = true
}, 500) this.hasMate = true
this.surveyInfo()
} }
surveyInfo() { surveyInfo() {
this.commonService.surveyInfo().then(res => { this.commonService.surveyInfo().then(res => {
if (res['success']) { if (res['success']) {
this.allQues = res['data']['survey'].pages this.allQues = res['data']['survey'].pages
this.curPageData = this.allQues[this.curPage]
} }
}) })
} }
reducePage() { reducePage() {
if (this.curPage > 0) { if (this.curPage > 0) {
this.curPage-- this.curPage--
this.curPageData = this.allQues[this.curPage] this.setCurPageData()
} else { } else {
return return
} }
...@@ -43,12 +45,96 @@ export class AskComponent implements OnInit { ...@@ -43,12 +45,96 @@ export class AskComponent implements OnInit {
addPage() { addPage() {
if (this.curPage < 16) { if (this.curPage < 16) {
if (
this.curPage == 0 ||
this.allAnswers[this.curPage] ||
this.curPage == 5 ||
this.curPage == 9
) {
this.curPage++ this.curPage++
this.curPageData = this.allQues[this.curPage] this.setCurPageData()
}
} else { } else {
this.curPage = 0 this.curPage = 0
return return
} }
console.log(this.curPage) 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]
}
}
} }
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
<li <li
class="selected" class="selected"
*ngFor="let options of this.curPageData.questions[0].options" *ngFor="let options of this.curPageData.questions[0].options"
(click)="getAnswer(options)"
> >
{{ options.optionName }} {{ options.optionName }}
</li> </li>
......
import { Component, OnInit ,Input} from '@angular/core'; import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({ @Component({
selector: 'app-page11', selector: 'app-page11',
...@@ -7,11 +7,41 @@ import { Component, OnInit ,Input} from '@angular/core'; ...@@ -7,11 +7,41 @@ import { Component, OnInit ,Input} from '@angular/core';
}) })
export class Page11Component implements OnInit { export class Page11Component implements OnInit {
@Input() curPageData: Array<any> @Input() curPageData: Array<any>
constructor() { } @Output() getAllAnswer = new EventEmitter<any>()
allOption: object
constructor() {}
ngOnInit() { ngOnInit() {
this.allOption = {}
console.log(this.curPageData) 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)
}
} }
...@@ -2,7 +2,10 @@ ...@@ -2,7 +2,10 @@
<div class="content"> <div class="content">
<div class="questionTitle">{{ this.curPageData['pageName'] }}</div> <div class="questionTitle">{{ this.curPageData['pageName'] }}</div>
<ul class="option_item"> <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 <img
class="selected" class="selected"
src="assets/images/icon{{ options.optionId }}.png" src="assets/images/icon{{ options.optionId }}.png"
......
import { Component, OnInit, Input } from '@angular/core' import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({ @Component({
selector: 'app-page2', selector: 'app-page2',
...@@ -7,9 +7,22 @@ import { Component, OnInit, Input } from '@angular/core' ...@@ -7,9 +7,22 @@ import { Component, OnInit, Input } from '@angular/core'
}) })
export class Page2Component implements OnInit { export class Page2Component implements OnInit {
@Input() curPageData: Array<any> @Input() curPageData: Array<any>
@Output() getAllAnswer = new EventEmitter<any>()
constructor() {} constructor() {}
ngOnInit() { ngOnInit() {
console.log(this.curPageData) 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)
}
} }
...@@ -4,25 +4,24 @@ ...@@ -4,25 +4,24 @@
<ul class="ageContent"> <ul class="ageContent">
<li *ngFor="let optionsList of this.curPageData.questions"> <li *ngFor="let optionsList of this.curPageData.questions">
<div>{{ optionsList.questionName }}</div> <div>{{ optionsList.questionName }}</div>
<b (click)="showToast()">&gt;</b> <b (click)="showToast(optionsList)">&gt;</b>
</li> </li>
</ul> </ul>
</div> </div>
<div class="addChild"> <div class="addChild" *ngIf="isShowChildAgeBtn">
<div class="icon">+</div> <div class="icon">+</div>
<div data-toggle="modal">增加孩子年龄</div> <div data-toggle="modal">增加孩子年龄</div>
</div> </div>
<div class="toastWrapper toast" *ngIf="isShow"> <div class="toastWrapper toast" *ngIf="isShow">
<div class="toastContent"> <div class="toastContent">
<ul> <ul>
<li class="selected" (click)="closeToast()">60后</li> <li
<li>65后</li> class="selected"
<li>70后</li> *ngFor="let options of curQues.options"
<li>75后</li> (click)="closeToast(); getAnswer(options)"
<li>80后</li> >
<li>85后</li> {{ options.optionName }}
<li>90后</li> </li>
<li>95后</li>
</ul> </ul>
</div> </div>
</div> </div>
......
import { Component, OnInit, Input } from '@angular/core' import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({ @Component({
selector: 'app-page3', selector: 'app-page3',
...@@ -7,17 +7,38 @@ import { Component, OnInit, Input } from '@angular/core' ...@@ -7,17 +7,38 @@ import { Component, OnInit, Input } from '@angular/core'
}) })
export class Page3Component implements OnInit { export class Page3Component implements OnInit {
@Input() curPageData: Array<any> @Input() curPageData: Array<any>
isShow: boolean @Input() isShowChildAgeBtn: boolean
@Output() getAllAnswer = new EventEmitter<any>()
isShow: boolean
curQues: Object
curAllQues: Object
constructor() {} constructor() {}
ngOnInit() { ngOnInit() {
this.curQues = {}
this.curAllQues = {}
console.log(this.curPageData) console.log(this.curPageData)
} }
showToast() { showToast(question) {
this.isShow = true this.isShow = true
this.curQues = question
console.log(this.curQues)
} }
closeToast() { closeToast() {
this.isShow = false 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)
}
} }
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
<li <li
class="selected" class="selected"
*ngFor="let options of this.curPageData.questions[0].options" *ngFor="let options of this.curPageData.questions[0].options"
(click)="getAnswer(options)"
> >
{{ options.optionName }} {{ options.optionName }}
</li> </li>
......
import { Component, OnInit, Input } from '@angular/core' import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({ @Component({
selector: 'app-page4', selector: 'app-page4',
...@@ -7,9 +7,22 @@ import { Component, OnInit, Input } from '@angular/core' ...@@ -7,9 +7,22 @@ import { Component, OnInit, Input } from '@angular/core'
}) })
export class Page4Component implements OnInit { export class Page4Component implements OnInit {
@Input() curPageData: Array<any> @Input() curPageData: Array<any>
@Output() getAllAnswer = new EventEmitter<any>()
constructor() {} constructor() {}
ngOnInit() { ngOnInit() {
console.log(this.curPageData) 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)
}
} }
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
<li <li
class="selected" class="selected"
*ngFor="let options of this.curPageData.questions[0].options" *ngFor="let options of this.curPageData.questions[0].options"
(click)="getAnswer(options)"
> >
{{ options.optionName }} {{ options.optionName }}
</li> </li>
......
import { Component, OnInit, Input } from '@angular/core' import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({ @Component({
selector: 'app-page5', selector: 'app-page5',
...@@ -7,9 +7,22 @@ import { Component, OnInit, Input } from '@angular/core' ...@@ -7,9 +7,22 @@ import { Component, OnInit, Input } from '@angular/core'
}) })
export class Page5Component implements OnInit { export class Page5Component implements OnInit {
@Input() curPageData: Array<any> @Input() curPageData: Array<any>
@Output() getAllAnswer = new EventEmitter<any>()
constructor() {} constructor() {}
ngOnInit() { ngOnInit() {
console.log(this.curPageData) 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)
}
} }
...@@ -8,17 +8,19 @@ ...@@ -8,17 +8,19 @@
<li <li
class="selected" class="selected"
*ngFor="let options of this.curPageData.questions[0].options" *ngFor="let options of this.curPageData.questions[0].options"
(click)="getAnswer(this.curPageData.questions[0], options)"
> >
{{ options.optionName }} {{ options.optionName }}
</li> </li>
</ul> </ul>
<div class="questionTitle"> <div class="questionTitle" *ngIf="hasMate">
{{ this.curPageData.questions[1].questionName }} {{ this.curPageData.questions[1].questionName }}
</div> </div>
<ul class="income"> <ul class="income" *ngIf="hasMate">
<li <li
class="selected" class="selected"
*ngFor="let options of this.curPageData.questions[1].options" *ngFor="let options of this.curPageData.questions[1].options"
(click)="getAnswer(this.curPageData.questions[1], options)"
> >
{{ options.optionName }} {{ options.optionName }}
</li> </li>
......
import { Component, OnInit, Input } from '@angular/core' import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({ @Component({
selector: 'app-page7', selector: 'app-page7',
...@@ -7,9 +7,27 @@ import { Component, OnInit, Input } from '@angular/core' ...@@ -7,9 +7,27 @@ import { Component, OnInit, Input } from '@angular/core'
}) })
export class Page7Component implements OnInit { export class Page7Component implements OnInit {
@Input() curPageData: Array<any> @Input() curPageData: Array<any>
@Input() hasMate: boolean
@Output() getAllAnswer = new EventEmitter<any>()
curAllQues: Object
constructor() {} constructor() {}
ngOnInit() { ngOnInit() {
this.curAllQues = {}
console.log(this.curPageData) 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)
} }
} }
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
<li <li
class="selected" class="selected"
*ngFor="let options of this.curPageData.questions[0].options" *ngFor="let options of this.curPageData.questions[0].options"
(click)="getAnswer(this.curPageData.questions[0], options)"
> >
{{ options.optionName }} {{ options.optionName }}
</li> </li>
...@@ -19,6 +20,7 @@ ...@@ -19,6 +20,7 @@
<li <li
class="selected" class="selected"
*ngFor="let options of this.curPageData.questions[1].options" *ngFor="let options of this.curPageData.questions[1].options"
(click)="getAnswer(this.curPageData.questions[1], options)"
> >
{{ options.optionName }} {{ options.optionName }}
</li> </li>
......
import { Component, OnInit, Input } from '@angular/core' import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({ @Component({
selector: 'app-page8', selector: 'app-page8',
...@@ -7,9 +7,25 @@ import { Component, OnInit, Input } from '@angular/core' ...@@ -7,9 +7,25 @@ import { Component, OnInit, Input } from '@angular/core'
}) })
export class Page8Component implements OnInit { export class Page8Component implements OnInit {
@Input() curPageData: Array<any> @Input() curPageData: Array<any>
@Output() getAllAnswer = new EventEmitter<any>()
curAllQues: Object
constructor() {} constructor() {}
ngOnInit() { ngOnInit() {
this.curAllQues = {}
console.log(this.curPageData) 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)
}
} }
...@@ -8,17 +8,19 @@ ...@@ -8,17 +8,19 @@
<li <li
class="selected" class="selected"
*ngFor="let options of this.curPageData.questions[0].options" *ngFor="let options of this.curPageData.questions[0].options"
(click)="getAnswer(this.curPageData.questions[0], options)"
> >
{{ options.optionName }} {{ options.optionName }}
</li> </li>
</ul> </ul>
<div class="questionTitle"> <div class="questionTitle" *ngIf="hasMate">
{{ this.curPageData.questions[1].questionName }} {{ this.curPageData.questions[1].questionName }}
</div> </div>
<ul class="jobContent"> <ul class="jobContent" *ngIf="hasMate">
<li <li
class="selected" class="selected"
*ngFor="let options of this.curPageData.questions[1].options" *ngFor="let options of this.curPageData.questions[1].options"
(click)="getAnswer(this.curPageData.questions[1], options)"
> >
{{ options.optionName }} {{ options.optionName }}
</li> </li>
......
import { Component, OnInit, Input } from '@angular/core' import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({ @Component({
selector: 'app-page9', selector: 'app-page9',
...@@ -7,9 +7,26 @@ import { Component, OnInit, Input } from '@angular/core' ...@@ -7,9 +7,26 @@ import { Component, OnInit, Input } from '@angular/core'
}) })
export class Page9Component implements OnInit { export class Page9Component implements OnInit {
@Input() curPageData: Array<any> @Input() curPageData: Array<any>
@Input() hasMate: boolean
@Output() getAllAnswer = new EventEmitter<any>()
curAllQues: Object
constructor() {} constructor() {}
ngOnInit() { ngOnInit() {
this.curAllQues = {}
console.log(this.curPageData) 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)
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment