rxjs

questionnair/src/app/app.module.ts

@@ -24,6 +24,7 @@ import { Page14Component } from './page14/page14.component';
 import { Page15Component } from './page15/page15.component';
 import { Page16Component } from './page16/page16.component';
 import { Page17Component } from './page17/page17.component';
+import { Limbo1Component } from './limbo1/limbo1.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -44,7 +45,8 @@ import { Page17Component } from './page17/page17.component';
     Page14Component,
     Page15Component,
     Page16Component,
-    Page17Component
+    Page17Component,
+    Limbo1Component
   ],
   imports: [
     BrowserModule,

questionnair/src/app/ask/ask.component.css

-.wrapper{
-    display: flex;
-    flex-direction: column;
-}
-.tips{
-    display: flex;
-    justify-content: center;
-    height: 5.5em;
-    align-items: center;
-}
-.footer{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 20px;
-    height: 3em;
-    width: 90%;
-    margin: 0 auto;
-    background: #ec2d37;
-    color: #fff;
-    border-radius: 10px;
-    box-shadow: 0px 15px 16px -8px #f4bbbe;
-}
\ No newline at end of file

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

 <div class="container">
   <div class="wrapper layout">
-    <div class="limbo">
-        <div class="title">
-            <img  src="assets/images/bg_1.png">
+      <div class="limbo" *ngIf="!this.question1Status">
+          <div class="title">
+              <img  src="assets/images/bg_1.png">
+          </div>
+          <div class="tips">
+            <span style="color:red;">*</span>
+            <span>本测试仅需三分钟</span>
+          </div>
+          <div class="footer" routerLink="/question1">
+            <div>获取家庭分析报告</div>
+          </div>
         </div>
-        <div class="tips">
-          <span style="color:red;">*</span>
-          <span>本测试仅需三分钟</span>
-        </div>
-        <div class="footer" routerLink="/question1">
-          <div>获取家庭分析报告</div>
-        </div>
-    </div>
-    <!-- <app-askdetail></app-askdetail>
-    <app-page-two></app-page-two>
+    <!--<app-limbo1></app-limbo1>
+    <app-askdetail></app-askdetail>
+     <app-page-two></app-page-two>
     <app-page-three></app-page-three>
     <app-page-four></app-page-four>
     <app-page-five></app-page-five>

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

 import { Component, OnInit } from '@angular/core';
-import {Router} from '@angular/router';
 import {CommonService} from '../common.service';
 
 @Component({
@@ -9,25 +8,23 @@ import {CommonService} from '../common.service';
 })
 export class AskComponent implements OnInit {
   questionList:Array<any>;
-  picNum:number;
-  constructor(private router: Router,
+  constructor(
     private commonService:CommonService
     ) {
 
    }
 
   ngOnInit() {
-    this.surveyInfo()
+    this.surveyInfo();
   }
 
   surveyInfo(){
     this.commonService.surveyInfo().then(res=>{
       if(res['success']){
-        this.questionList = res['data']['survey'].pages
+        this.questionList = res['data']['survey'].pages[0];
+        
+        console.log(this.questionList)
       }
-      console.log(this.questionList)
     })
   }
-
-  
 }

questionnair/src/app/askdetail/askdetail.component.css

@@ -13,4 +13,8 @@
 }
 .option_item li img{
     max-width: 55%;
-}
\ No newline at end of file
+}
+.option_item li img.selected{
+    border: 1px solid #ff0000;
+    border-radius: 50%;
+}

questionnair/src/app/askdetail/askdetail.component.html

@@ -17,7 +17,7 @@
     <div class="questionTitle">您的家庭结构</div>
     <ul class="option_item">
       <li>
-        <img src="assets/images/icon1.png" alt="单身贵族" >
+        <img class="selected" src="assets/images/icon1.png" alt="单身贵族" >
         <span>单身贵族</span>
       </li>
       <li>

questionnair/src/app/askdetail/askdetail.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy} from '@angular/core';
 import {CommonService} from '../common.service';
-
+import {Subscription}   from 'rxjs';
+import {DataService} from '../data.service';
 @Component({
   selector: 'app-askdetail',
   templateUrl: './askdetail.component.html',
   styleUrls: ['./askdetail.component.css']
 })
-export class AskdetailComponent implements OnInit {
-  list:Array<any>;
+export class AskdetailComponent implements OnInit , OnDestroy{
+  questionList:Array<any>;
+  answerList:Array<any>;
+  subscription: Subscription;
   constructor(
     private commonService:CommonService,
+    private dataService:DataService
   ) {
-   
+    this.answerList = this.dataService.answerList;
+    this.subscription = dataService.answerList$.subscribe(
+      answerList => {
+        this.answerList = answerList;
+      });
    }
 
-  ngOnInit() {
-    // this.list =this.commservice.questionList.filter(item=>
-    //   item.pageId=='1'
-    // ).pop().questions
-    // console.log(this.commonService.questionList)
+   ngOnInit() {
+    this.surveyInfo();
+  }
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
+  surveyInfo(){
+    this.commonService.surveyInfo().then(res=>{
+      if(res['success']){
+        this.questionList = res['data']['survey'].pages[1]
+        console.log(this.questionList)
+      }
+    })
   }
 }

questionnair/src/app/data.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { DataService } from './data.service';
+
+describe('DataService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: DataService = TestBed.get(DataService);
+    expect(service).toBeTruthy();
+  });
+});

questionnair/src/app/data.service.ts

+import { Injectable } from '@angular/core';
+import {Subject} from 'rxjs'; 
+@Injectable({
+  providedIn: 'root'
+})
+export class DataService {
+  private dataSource = new Subject<any>();
+  answerList$ = this.dataSource.asObservable();
+  answerList: Array<any> = []; // 选择结果列表
+  pageId:number;
+  constructor() { }
+  
+  // 添加answer
+  addAnswer(todo) {
+    if (this.answerList.length > 0) {
+      this.pageId = this.answerList[this.answerList.length - 1].id;
+    } else {
+      this.pageId = 0;
+    }
+    if (!todo.id) {
+      todo.id = ++this.pageId;
+    }
+    this.answerList.push(todo);
+    this.dataSource.next(this.answerList);
+    return this;
+  }
+
+  getAnswer() {
+    return this.answerList;
+  }
+}

questionnair/src/app/limbo1/limbo1.component.html

+<div class="limbo" *ngIf="!this.question1Status">
+  <div class="title">
+      <img  src="assets/images/bg_1.png">
+  </div>
+  <div class="tips">
+    <span style="color:red;">*</span>
+    <span>本测试仅需三分钟</span>
+  </div>
+  <!-- <div class="footer" routerLink="/question1">
+    <div>获取家庭分析报告</div>
+  </div> -->
+  <div class="footer" (click)="getStart()">
+    <div>获取家庭分析报告</div>
+  </div>
+</div>
\ No newline at end of file

questionnair/src/app/limbo1/limbo1.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Limbo1Component } from './limbo1.component';
+
+describe('Limbo1Component', () => {
+  let component: Limbo1Component;
+  let fixture: ComponentFixture<Limbo1Component>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ Limbo1Component ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Limbo1Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

questionnair/src/app/limbo1/limbo1.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-limbo1',
+  templateUrl: './limbo1.component.html',
+  styleUrls: ['./limbo1.component.css']
+})
+export class Limbo1Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

questionnair/src/app/page-two/page-two.component.css

 .ageContent{
     display: flex;
+    flex-wrap: wrap;
 }
 .ageContent li{
-    display: flex;
     width: 100%;
     height: 60px;
     line-height: 60px;
-    border-bottom:1px solid #dcdcdc;
-}
-.ageContent li div{
-    flex: 0 0 50%;
-}
-.ageContent li span{
-    flex:1;
-    text-align: right;
+    border-bottom: 1px solid #dcdcdc;
+    display: flex;
+    justify-content: space-between;
 }
+
 .ageContent li span b{
     margin-left: 10px;
 }
@@ -45,4 +41,47 @@
     font-size: 45px;
     line-height:38px;
     margin:3% 10% 0 10%;
+}
+.toastWrapper{
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    top: 0;
+}
+
+.toast{
+    position: fixed;
+    left: 0;
+    right: 0;
+    min-width: 320px;
+    max-width: 640px;
+    width: 100%;
+    margin: 0 auto;
+}
+
+.toastContent{
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 40%;
+    background-color: #fff;
+}
+.toastContent ul{
+    display: flex;
+    flex-wrap: wrap;
+    margin: 5% 0%;
+}
+.toastContent ul li{
+    width: 46%;
+    float: left;
+    text-align: center;
+    margin: 2%;
+    border: 1px #8a8a8a solid;
+    border-radius: 4px;
+    box-sizing: border-box;
+    height: 40px;
+    line-height: 40px;
+}
+.toastContent ul li.selected{
+
+    border: 1px #ff0000 solid;
 }
\ No newline at end of file

questionnair/src/app/page-two/page-two.component.html

 <div class="layout">
     <div class="content">
-      <div class="questionTitle">您的家庭成员年龄</div>
+      <div class="questionTitle">{{this.pageName}}</div>
       <ul class="ageContent">
-        <li>
-          <div>您的年龄</div>
-          <span>35<b>&gt;</b></span>
-          
+        <li *ngFor="let optionsList of this.optionsList ">
+          <div>{{optionsList.questionName}}</div>
+          <span>35<b (click)="showToast()">&gt;</b></span>
         </li>
-      </ul>
-      <ul class="ageContent">
-        <li>
-          <div>配偶的年龄</div>
-          <span>35<b>&gt;</b></span>
+        <!-- <li>
+          <div>您的年龄</div>
+          <span>35<b (click)="showToast()">&gt;</b></span>
         </li>
-      </ul>
-      <ul class="ageContent">
         <li>
-          <div>孩子的年龄</div>
-          <span>35<b>&gt;</b></span>
-        </li>
+            <div>配偶的年龄</div>
+            <span>35<b>&gt;</b></span>
+          </li>
+          <li>
+              <div>孩子的年龄</div>
+              <span>35<b>&gt;</b></span>
+          </li> -->
       </ul>
     </div>
     <div class="addChild">
@@ -29,4 +28,18 @@
       <div routerLink="/question1">&lt;</div>
       <div routerLink="/question3" class="next">下一步</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>
+          </ul>
+        </div>
+    </div>
   </div>

questionnair/src/app/page-two/page-two.component.ts

 import { Component, OnInit } from '@angular/core';
+import {CommonService} from '../common.service'
 @Component({
   selector: 'app-page-two',
   templateUrl: './page-two.component.html',
   styleUrls: ['./page-two.component.css']
 })
 export class PageTwoComponent implements OnInit {
-
-  constructor() { }
-
+  isShow:boolean;
+  constructor(private commonService:CommonService) { }
+  questionList:Array<any>;
+  pageName:string;
+  optionsList:Array<any>;
   ngOnInit() {
-    
+    this.surveyInfo();
   }
 
+  surveyInfo(){
+    this.commonService.surveyInfo().then(res=>{
+      if(res['success']){
+        this.questionList = res['data']['survey'].pages[2];console.log(this.questionList)
+        this.pageName = res['data']['survey'].pages[2].pageName;
+        this.optionsList = res['data']['survey'].pages[2].questions
+      }
+    })
+  }
+  showToast(){
+    this.isShow = true;
+  }
+  closeToast(){
+    this.isShow = false;
+  }
 }

questionnair/src/app/page16/page16.component.html

-<p>
-  page16 works!
-</p>
+<div class="limbo">
+  <div class="title">
+    <img  src="assets/images/bg_6.png">
+    <div class="content_footer">
+      <div routerLink="/question1">&lt;</div>
+      <div routerLink="/question3" class="next">下一步</div>  
+    </div>
+</div>

questionnair/src/styles.css

 /* You can add global styles to this file, and also import other style files */
 *{
     margin: 0;padding:0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
 }
 html, body {
     position: relative;
@@ -18,6 +20,10 @@ ul li,ol li{
 .container{
     padding:0;
 }
+.wrapper{
+    display: flex;
+    flex-direction: column;
+}
 .layout{
     display: flex;
     flex-direction: column;
@@ -28,6 +34,25 @@ ul li,ol li{
 .layout.wrapper{
     padding:0;
 }
+.tips{
+    display: flex;
+    justify-content: center;
+    height: 5.5em;
+    align-items: center;
+}
+.footer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    height: 3em;
+    width: 90%;
+    margin: 0 auto;
+    background: #ec2d37;
+    color: #fff;
+    border-radius: 10px;
+    box-shadow: 0px 15px 16px -8px #f4bbbe;
+}
 /* .layout.cityLayout{
     padding:10px 0;
 } */