Skip to content

A
allCampaign
Commit 67079ce8 by Sweet Zhang
Options

样式修改

parent 9fc8d2ae
Showing with 78 additions and 40 deletions
questionnaire/src/app/age/age.component.ts
...@@ -73,6 +73,13 @@ export class AgeComponent implements OnInit { ...@@ -73,6 +73,13 @@ export class AgeComponent implements OnInit {
// 如果有孩子，需要考虑是孩子几的年龄 // 如果有孩子，需要考虑是孩子几的年龄
if (this.curPageData['questions'][j]['questionSubId'] == this.curQues.questionSubId) { if (this.curPageData['questions'][j]['questionSubId'] == this.curQues.questionSubId) {
this.curPageData['questions'][j].optionName = options.optionName; 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 { ...@@ -98,10 +105,10 @@ export class AgeComponent implements OnInit {
this.curQues = question; this.curQues = question;
this.curQuesIndex = idx; this.curQuesIndex = idx;
console.log(question) console.log(question)
for(let i=0;i<question['options'].length;i++){ for (let i = 0; i < question['options'].length; i++) {
if(question.optionName == question['options'][i].optionName){ if (question.optionName == question['options'][i].optionName) {
question['options'][i]['selected'] = true question['options'][i]['selected'] = true
}else{ } else {
question['options'][i]['selected'] = false question['options'][i]['selected'] = false
} }
} }
......
questionnaire/src/app/family/family.component.css
.option_item { .option_item {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.option_item li {
display: flex; .option_item li {
flex-direction: column; display: flex;
align-items: center; flex-direction: column;
justify-content: center; align-items: center;
flex: 0 0 50%; justify-content: center;
margin-bottom: 20%; flex: 0 0 50%;
} margin-bottom: 20%;
.option_item li img { }
max-width: 55%;
} .option_item li .imgBox {
.option_item li img.selected { width: 120px;
border: 2px solid #ff0000; }
border-radius: 50%;
} .option_item li .imgBox img {
display: block;
\ No newline at end of file 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 @@ ...@@ -3,9 +3,11 @@
<div class="questionTitle">{{ curPageData?.pageName }}</div> <div class="questionTitle">{{ curPageData?.pageName }}</div>
<ul class="option_item" style="margin-top: 20%;"> <ul class="option_item" style="margin-top: 20%;">
<li *ngFor="let options of curPageData?.questions[0]['options']" (click)="selectedFamily(options)"> <li *ngFor="let options of curPageData?.questions[0]['options']" (click)="selectedFamily(options)">
<img [ngClass]="{ selected: options['selected'] }" <div class="imgBox">
src="assets/images/icon{{ options.optionId }}.png" <img [ngClass]="{ selected: options['selected'] }"
alt="{{ options.optionName }}"/> src="assets/images/icon{{ options.optionId }}.png"
alt="{{ options.optionName }}"/>
</div>
<span>{{ options.optionName }}</span> <span>{{ options.optionName }}</span>
</li> </li>
</ul> </ul>
......
questionnaire/src/app/family/family.component.ts
...@@ -12,6 +12,7 @@ export class FamilyComponent implements OnInit { ...@@ -12,6 +12,7 @@ export class FamilyComponent implements OnInit {
selectedOptionId: any; selectedOptionId: any;
// 上一次的答案 // 上一次的答案
lastQuestions: Array<any>; lastQuestions: Array<any>;
nextBtn: boolean = false;
constructor(private commonService: CommonService, private router: Router) { constructor(private commonService: CommonService, private router: Router) {
this.pageAnswers = { this.pageAnswers = {
...@@ -28,19 +29,19 @@ export class FamilyComponent implements OnInit { ...@@ -28,19 +29,19 @@ export class FamilyComponent implements OnInit {
this.lastQuestions = this.commonService.todosCopy.filter(item => item.pageId == 2).pop(); this.lastQuestions = this.commonService.todosCopy.filter(item => item.pageId == 2).pop();
this.commonService.surveyInfo().then(res => { this.commonService.surveyInfo().then(res => {
this.curPageData = res['data']['survey']['pages'].filter(item => item.pageId === 2).pop(); this.curPageData = res['data']['survey']['pages'].filter(item => item.pageId === 2).pop();
for (let i = 0; i < this.lastQuestions['questions'].length; i++) { // for (let i = 0; i < this.lastQuestions['questions'].length; i++) {
for (let j = 0; j < this.curPageData['questions'].length; j++) { // for (let j = 0; j < this.curPageData['questions'].length; j++) {
if (this.lastQuestions['questions'][i].questionId == this.curPageData['questions'][j].questionId) { // 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 m = 0; m < this.lastQuestions['questions'][i].options.length; m++) {
for (let n = 0; n < this.curPageData['questions'][i].options.length; n++) { // 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) { // if (this.lastQuestions['questions'][i].options[m].optionId == this.curPageData['questions'][i].options[n].optionId) {
this.selectedFamily(this.curPageData['questions'][i].options[n]); // this.selectedFamily(this.curPageData['questions'][i].options[n]);
} // }
} // }
} // }
} // }
} // }
} // }
// console.log(this.curPageData) // console.log(this.curPageData)
}); });
} }
...@@ -66,10 +67,22 @@ export class FamilyComponent implements OnInit { ...@@ -66,10 +67,22 @@ export class FamilyComponent implements OnInit {
}; };
this.commonService.addAnswer(this.pageAnswers); this.commonService.addAnswer(this.pageAnswers);
// console.log(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() { 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 { ...@@ -18,6 +18,7 @@ export class HealthComponent implements OnInit {
pageAnswers: any; pageAnswers: any;
// 暂存健康状况 // 暂存健康状况
questions: Array<any> = []; questions: Array<any> = [];
nextBtn: boolean = false;
constructor(private commonService: CommonService, constructor(private commonService: CommonService,
private router: Router, private router: Router,
...@@ -76,6 +77,13 @@ export class HealthComponent implements OnInit { ...@@ -76,6 +77,13 @@ export class HealthComponent implements OnInit {
}], }],
}; };
this.commonService.addAnswer(this.pageAnswers); this.commonService.addAnswer(this.pageAnswers);
if (this.pageAnswers.questions[0].options.every((item) => {
return item.selected;
})) {
this.nextBtn = true;
} else {
this.nextBtn = false;
}
} }
// 获取所有用户选择的健康选项 // 获取所有用户选择的健康选项
......
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