Commit 4a12ac31 by Sweet Zhang

Merge branch 'master' of 139.224.139.2:Sweet/allCampaign

parents 2ae50f1a 9391fe3e
...@@ -34,6 +34,7 @@ export class EventBusService { ...@@ -34,6 +34,7 @@ export class EventBusService {
async userPractitionerQuery(userPractitioner) { async userPractitionerQuery(userPractitioner) {
const url = this.USER_API_URL + '/user/userPractitionerQuery'; const url = this.USER_API_URL + '/user/userPractitionerQuery';
const res = await this.obtainToken(); const res = await this.obtainToken();
console.log(res)
this.httpOptions.headers = this.httpOptions.headers.set('X-Authorization', res['data']['token']); this.httpOptions.headers = this.httpOptions.headers.set('X-Authorization', res['data']['token']);
return this.http.post(url, JSON.stringify(userPractitioner), this.httpOptions) return this.http.post(url, JSON.stringify(userPractitioner), this.httpOptions)
.toPromise().then(response => { .toPromise().then(response => {
......
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css" "src/styles.css"
], ],
"scripts": [], "scripts": [],
...@@ -122,6 +123,7 @@ ...@@ -122,6 +123,7 @@
"tsConfig": "src/tsconfig.spec.json", "tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js", "karmaConfig": "src/karma.conf.js",
"styles": [ "styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css" "src/styles.css"
], ],
"scripts": [], "scripts": [],
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -19,19 +19,22 @@ ...@@ -19,19 +19,22 @@
"@angular/platform-browser": "~7.2.0", "@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0", "@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0", "@angular/router": "~7.2.0",
"angular-in-memory-web-api": "^0.8.0",
"bootstrap": "^3.4.1",
"core-js": "^2.5.4", "core-js": "^2.5.4",
"ngx-bootstrap": "^4.1.1",
"rxjs": "~6.3.3", "rxjs": "~6.3.3",
"tslib": "^1.9.0", "tslib": "^1.9.0",
"zone.js": "~0.8.26" "zone.js": "~0.8.26"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "~0.13.0", "@angular-devkit/build-angular": "^0.13.9",
"@angular/cli": "~7.3.8", "@angular/cli": "~7.3.8",
"@angular/compiler-cli": "~7.2.0", "@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0", "@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8", "@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3", "@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0", "codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1", "jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1", "jasmine-spec-reporter": "~4.2.1",
......
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common'
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router'
import {AskComponent} from './ask/ask.component'; import { AskComponent } from './ask/ask.component'
import {AskdetailComponent} from './askdetail/askdetail.component';
import {PageTwoComponent} from './page-two/page-two.component';
import {PageThreeComponent} from './page-three/page-three.component';
const routes: Routes = [ const routes: Routes = [
{ {
path: '', redirectTo: '/index', pathMatch: 'full' path: '',
redirectTo: '/index',
pathMatch: 'full'
}, },
{path: 'index', component: AskComponent}, {
{path: 'askdetail/:id',component: AskdetailComponent }, path: 'index',
{path:'pageTwo',component:PageTwoComponent}, component: AskComponent
{path:'pageThree',component:PageThreeComponent} }
]
];
@NgModule({ @NgModule({
declarations: [], declarations: [],
imports: [ imports: [CommonModule, RouterModule.forRoot(routes)],
CommonModule, exports: [RouterModule]
RouterModule.forRoot(routes)
],
exports:[
RouterModule
]
}) })
export class AppRoutingModule { } export class AppRoutingModule {}
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { CommonService} from './common.service';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] styleUrls: ['./app.component.css']
}) })
export class AppComponent { export class AppComponent {
title = 'questionnair'; constructor(
private commonService:CommonService,
) {
}
} }
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core'
import { AppComponent } from './app.component'
import { AppComponent } from './app.component'; import { AskComponent } from './ask/ask.component'
import { AskComponent } from './ask/ask.component'; import { AppRoutingModule } from './app-routing.module'
import { AppRoutingModule } from './app-routing.module'; import { HttpClientModule } from '@angular/common/http'
import { AskdetailComponent } from './askdetail/askdetail.component'; import { CommonService } from './common.service'
import { PageTwoComponent } from './page-two/page-two.component'; import { LocalStorage } from './local.storage'
import { PageThreeComponent } from './page-three/page-three.component'; import { Page1Component } from './page1/page1.component'
import { Page2Component } from './page2/page2.component'
import { Page3Component } from './page3/page3.component'
import { Page4Component } from './page4/page4.component'
import { Page5Component } from './page5/page5.component'
import { Page6Component } from './page6/page6.component'
import { Page7Component } from './page7/page7.component'
import { Page8Component } from './page8/page8.component'
import { Page9Component } from './page9/page9.component'
import { Page10Component } from './page10/page10.component'
import { Page11Component } from './page11/page11.component'
import { Page12Component } from './page12/page12.component'
import { Page13Component } from './page13/page13.component'
import { Page14Component } from './page14/page14.component'
import { Page15Component } from './page15/page15.component'
import { Page16Component } from './page16/page16.component'
import { Page17Component } from './page17/page17.component'
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
AskComponent, AskComponent,
AskdetailComponent, Page1Component,
PageTwoComponent, Page2Component,
PageThreeComponent Page3Component,
], Page4Component,
imports: [ Page5Component,
BrowserModule, Page6Component,
AppRoutingModule Page7Component,
Page8Component,
Page9Component,
Page10Component,
Page11Component,
Page12Component,
Page13Component,
Page14Component,
Page15Component,
Page16Component,
Page17Component
], ],
providers: [], imports: [BrowserModule, AppRoutingModule, HttpClientModule],
providers: [CommonService, LocalStorage],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule {}
.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
<div class="wrapper"> <div class="container">
<div class="title"> <div class="wrapper layout">
<img src="assets/images/bg_1.png" alt=""> <!-- {{curPage}} -->
</div> <app-page1 [curPageData]="curPageData" *ngIf="curPage == 0"></app-page1>
<div class="tips"> <app-page2
<span style="color:red;">*</span> [curPageData]="curPageData"
<span>本测试仅需三分钟</span> *ngIf="curPage == 1"
</div> (getAllAnswer)="getAllAnswer($event)"
<div class="footer" (click)="viewDetail(1)"> ></app-page2>
<div>获取家庭分析报告</div> <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"
(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"
(getAllAnswer)="getAllAnswer($event)"
></app-page11>
<app-page12
[curPageData]="curPageData"
*ngIf="curPage == 11"
(getAllAnswer)="getAllAnswer($event)"
></app-page12>
<app-page13
[curPageData]="curPageData"
*ngIf="curPage == 12"
(getAllAnswer)="getAllAnswer($event)"
></app-page13>
<app-page14
[curPageData]="curPageData"
*ngIf="curPage == 13"
(getAllAnswer)="getAllAnswer($event)"
></app-page14>
<app-page15 [curPageData]="curPageData" *ngIf="curPage == 14"></app-page15>
<app-page16 [curPageData]="curPageData" *ngIf="curPage == 15"></app-page16>
<app-page17 [curPageData]="curPageData" *ngIf="curPage == 16"></app-page17>
<div class="footer" *ngIf="curPage == 0" (click)="addPage()">
<div>获取家庭分析报告</div>
</div>
<div class="content_footer" *ngIf="curPage != 0">
<div (click)="reducePage()">&lt;</div>
<div (click)="addPage()" class="next">下一步</div>
</div>
</div> </div>
</div> </div>
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core'
import {Router} from '@angular/router'; import { CommonService } from '../common.service'
import { Options } from 'selenium-webdriver/chrome'
@Component({ @Component({
selector: 'app-ask', selector: 'app-ask',
templateUrl: './ask.component.html', templateUrl: './ask.component.html',
styleUrls: ['./ask.component.css'] styleUrls: ['./ask.component.css']
}) })
export class AskComponent implements OnInit { export class AskComponent implements OnInit {
questionList:Array<any>; allQues: Array<any>
questionPageList = []; //分页后前台显示数据 curPage: number
pageNo = 1; //当前页码 totalPage: number
preShow = false; //上一页 curQues: string
nextShow = true; //下一页 curPageData: Object
pageSize = 1; //单页显示数 allAnswers: Array<any>
totalCount = 0; //总页数 isShowChildAgeBtn: boolean
pageSizes = [5, 10, 15]; hasMate: boolean
curPage = 1; //当前页 constructor(private commonService: CommonService) {}
constructor(private router: Router) { ngOnInit() {
this.curPage = 0
this.totalPage = 17
this.curPageData = []
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.setCurPageData()
} else {
return
}
}
ngOnInit() { addPage() {
if (this.curPage < 16) {
if (
this.curPage == 0 ||
this.allAnswers[this.curPage] ||
this.curPage == 5 ||
this.curPage == 9
) {
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
const page2Answer = this.allAnswers[1]
if (this.curPage == 2) {
this.filterPage2(
page2Answer.questions[0].options[0].optionId,
thePateData
)
}
if (this.curPage == 4) {
this.filterPage5(
page2Answer.questions[0].options[0].optionId,
thePateData
)
}
if (this.curPage == 11) {
this.filterPage12(
page2Answer.questions[0].options[0].optionId,
thePateData
)
}
if (this.curPage == 12) {
this.filterPage13(
page2Answer.questions[0].options[0].optionId,
thePateData
)
}
console.log('page start', this.curPage)
if (this.curPage == 13) {
console.log('page end', this.curPage)
this.filterPage14(
page2Answer.questions[0].options[0].optionId,
this.allQues[this.curPage]
)
}
}
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) {
//page5判断是否显示配偶工作页
//1单身 3单亲
if (optionId == 1 || optionId == 3) {
this.curPage++
console.log('page5', this.curPage, this.curPageData)
this.curPageData = this.allQues[this.curPage]
}
}
//pege12判断是否显示配偶健康
filterPage12(optionId, thePateData) {
if (optionId == 1 || optionId == 3) {
this.curPage++
this.curPageData = this.allQues[this.curPage]
}
}
//page13判断是否显示孩子健康
filterPage13(optionId, thePateData) {
//单身或二人世界
if (optionId == 1 || optionId == 2) {
this.curPage++
}
}
//page14判断option内容
filterPage14(optionId, thePateData) {
//如果单身或者单亲选择相中没有配偶选项
if (optionId == 1) {
this.curPageData = {
...thePateData,
questions: [
{
...thePateData.questions[0],
options: thePateData.questions[0]['options'].filter(option => {
return option.optionId == 106 || option.optionId == 107
})
}
]
}
}
if (optionId == 2) {
this.curPageData = {
...thePateData,
questions: [
{
...thePateData.questions[0],
options: thePateData.questions[0]['options'].filter(option => {
return (
option.optionId == 108 ||
option.optionId == 109 ||
option.optionId == 111
)
})
}
]
}
}
if (optionId == 3) {
this.curPageData = {
...thePateData,
questions: [
{
...thePateData.questions[0],
options: thePateData.questions[0]['options'].filter(option => {
return (
option.optionId == 108 ||
option.optionId == 110 ||
option.optionId == 111
)
})
}
]
}
}
if (optionId == 4) {
this.curPageData = {
...thePateData,
questions: [
{
...thePateData.questions[0],
options: thePateData.questions[0]['options'].filter(option => {
return (
option.optionId == 108 ||
option.optionId == 109 ||
option.optionId == 110 ||
option.optionId == 111
)
})
}
]
}
} }
viewDetail(id){
this.router.navigate(['askdetail',id])
} }
} }
<!-- <div class="layout">
<div class="content" *ngFor='let questions of this.list'>
<div class="questionTitle">{{questions.questionName}}</div>
<ul class="option_item">
<li *ngFor="let options of questions.options">
<img src="assets/images/icon{{options.optionId}}.png" alt="" srcset="" *ngIf="questions.questionId==1">
<span>{{options.optionName}}</span>
</li>
</ul>
</div>
<div class="bottom">
<span>&lt;</span> <div>下一步</div>
</div>
</div> -->
<div class="layout">
<div class="content">
<div class="questionTitle">您的家庭结构</div>
<ul class="option_item">
<li>
<img src="assets/images/icon1.png" alt="单身贵族" >
<span>单身贵族</span>
</li>
<li>
<img src="assets/images/icon2.png" alt="单身贵族" >
<span>二人世界</span>
</li>
<li>
<img src="assets/images/icon3.png" alt="独立带娃" >
<span>带娃世界</span>
</li>
<li>
<img src="assets/images/icon4.png" alt="多口之家" >
<span>多口之家</span>
</li>
</ul>
</div>
<div class="content_footer">
<div routerLink="/index">&lt;</div>
<div routerLink="/pageTwo" class="next">下一步</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import {CommonService} from '../common.service';
@Component({
selector: 'app-askdetail',
templateUrl: './askdetail.component.html',
styleUrls: ['./askdetail.component.css']
})
export class AskdetailComponent implements OnInit {
list:Array<any>;
constructor(
private commservice:CommonService,
) {
}
ngOnInit() {
this.list =this.commservice.questionList.filter(item=>
item.pageId=='1'
).pop().questions
}
}
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import {environment} from './../environments/environment';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {LocalStorage} from './local.storage';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class CommonService { export class CommonService {
questionList:Array<any> private USER_API_URL = '';
constructor() { private httpOptions;
this.questionList = [ questionList:Array<any>;
{ constructor(private http: HttpClient,
"pageId": "1", private ls: LocalStorage
"pageName": "了解一下您的家庭情况,以便分析您的家庭风险", ) {
"pageOrder": "1", this.USER_API_URL = environment.apiUrl;
"questions": this.httpOptions = {
[ headers: new HttpHeaders({
{ 'Content-Type': 'application/json',
"questionId": "1", 'X-Authorization': ''
"questionName": "您的家庭结构", })
"optionType": "1", };
"questionOrder": "1",
"options":
[
{
"optionId": "1",
"optionName": "单身贵族",
"optionOrder": "1",
"optionIdSelected": "",
"customerInput": ""
},
{
"optionId": "2",
"optionName": "二人世界",
"optionOrder": "2",
"optionIdSelected": "",
"customerInput": ""
},
{
"optionId": "3",
"optionName": "独立带娃",
"optionOrder": "3",
"optionIdSelected": "",
"customerInput": ""
},
{
"optionId": "4",
"optionName": "多口之家",
"optionOrder": "4",
"optionIdSelected": "",
"customerInput": ""
}
]
},
{
"questionId": "2",
"questionName": "您的家庭成员年龄",
"optionType": "3",
"questionOrder": "2",
"options":
[
{
"optionId": "5",
"optionName": "您的年龄",
"optionOrder": "1",
"optionIdSelected": "",
"customerInput": ""
},
{
"optionId": "6",
"optionName": "配偶年龄",
"optionOrder": "2",
"optionIdSelected": "",
"customerInput": ""
},
{
"optionId": "7",
"optionName": "孩子年龄",
"optionOrder": "3",
"optionIdSelected": "",
"customerInput": ""
}
]
}
]
},
{
"pageId": "2",
"pageName": "了解一下您的家庭收入情况,以便定制适合的保险配置",
"pageOrder": "2",
"questions":
[
{
"questionId": "5",
"questionName": "您的年收入(税前) ?",
"optionType": "1",
"questionOrder": "1",
"options":
[
{
"optionId": "21",
"optionName": "10万以下",
"optionOrder": "1",
"optionIdSelected": "",
"customerInput": ""
},
{
"optionId": "22",
"optionName": "10~25",
"optionOrder": "2",
"optionIdSelected": "",
"customerInput": ""
},
{
"optionId": "23",
"optionName": "25~40",
"optionOrder": "3",
"optionIdSelected": "",
"customerInput": ""
},
{
"optionId": "24",
"optionName": "40~60",
"optionOrder": "4",
"optionIdSelected": "",
"customerInput": ""
},
{
"optionId": "25",
"optionName": "60万以上",
"optionOrder": "5",
"optionIdSelected": "",
"customerInput": ""
}
]
},
{
"questionId": "6",
"questionName": "您配偶的年收入(税前) ?",
"optionType": "1",
"questionOrder": "2",
"options":
[
{
"optionId": "26",
"optionName": "10万以下",
"optionOrder": "1",
"optionIdSelected": "",
"customerInput": ""
},
{
"optionId": "27",
"optionName": "10~25",
"optionOrder": "2",
"optionIdSelected": "",
"customerInput": ""
},
{
"optionId": "28",
"optionName": "25~40",
"optionOrder": "3",
"optionIdSelected": "",
"customerInput": ""
},
{
"optionId": "29",
"optionName": "40~60",
"optionOrder": "4",
"optionIdSelected": "",
"customerInput": ""
},
{
"optionId": "30",
"optionName": "60万以上",
"optionOrder": "5",
"optionIdSelected": "",
"customerInput": ""
}
]
}
]
}
]
} }
async surveyInfo() {
const url = this.USER_API_URL + '/survey/surveyInfo';
const res = await this.obtainToken();
this.httpOptions.headers = this.httpOptions.headers.set('X-Authorization', res['data']['token']);
return this.http
.post(url, JSON.stringify({}),this.httpOptions).toPromise().then(response => {
return response;
});
}
// async getAllInfo(){
// const res = await this.surveyInfo()
// if(res['success']){
// this.questionList = res['data']['survey'].pages
// }
// }
/**
* 获取TOKEN
*/
obtainToken() {
const url = this.USER_API_URL + '/authorize/obtainToken';
const ticketObj = {
ticket: 'questionnair'
};
return this.http.post(url, JSON.stringify(ticketObj), this.httpOptions).toPromise();
}
provinceqry(objParam){
const url = this.USER_API_URL + '/partner/provinceqry';
return this.http.post(url,JSON.stringify(objParam),this.httpOptions).pipe(res => {
return res;
})
}
getCityqry(objParam){
const url = this.USER_API_URL + '/partner/cityqry';
return this.http
.post(url,JSON.stringify(objParam),this.httpOptions)
.pipe(res => {
return res;
})
}
} }
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();
});
});
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;
}
}
/**
* Created by Jerold Chen on 2018/4/13.
*/
export class LocalStorage {
public localStorage: any;
constructor() {
if (!localStorage) {
throw new Error('Current browser does not support Local Storage');
}
this.localStorage = localStorage;
}
public set(key: string, value: string): void {
this.localStorage[key] = value;
}
public get(key: string): string {
return this.localStorage[key] || false;
}
public setObject(key: string, value: any): void {
this.localStorage[key] = JSON.stringify(value);
}
public getObject(key: string): any {
return JSON.parse(this.localStorage[key] || '{}');
}
public remove(key: string): any {
this.localStorage.removeItem(key);
}
}
.jobContent{
width: 100%;
}
.jobContent li{
width: 100%;
height: 60px;
line-height: 60px;
border: 1px #8a8a8a solid;
margin-bottom: 10px;
border-radius: 4px;
box-sizing: border-box;
padding-left: 5%;
}
.jobContent li.selected{
border: 1px #ff0000 solid;
}
\ No newline at end of file
<div class="layout">
<div class="content">
<div class="questionTitle">您从事哪种职业</div>
<ul class="jobContent">
<li class="selected">
室内轻体力(办公室人员、教师、医生等)
</li>
<li>
室内重体力(经常加班,程序员等)
</li>
<li>
室内复杂作业(装修类,生产线作业等)
</li>
<li>
户外简单工作(经常出差、销售、司机、导游等)
</li>
<li>
户外复杂工作(施工工程师,建筑工人等)
</li>
<li>
家庭主妇/家庭主夫
</li>
</ul>
</div>
<div class="content_footer">
<div routerLink="/pageTwo">&lt;</div>
<div routerLink="/pageThree" class="next">下一步</div>
</div>
</div>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-page-three',
templateUrl: './page-three.component.html',
styleUrls: ['./page-three.component.css']
})
export class PageThreeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<div class="layout">
<div class="content">
<div class="questionTitle">您的家庭成员年龄</div>
<ul class="ageContent">
<li>
<div>您的年龄</div>
<span>35<b>&gt;</b></span>
</li>
</ul>
<ul class="ageContent">
<li>
<div>配偶的年龄</div>
<span>35<b>&gt;</b></span>
</li>
</ul>
<ul class="ageContent">
<li>
<div>孩子的年龄</div>
<span>35<b>&gt;</b></span>
</li>
</ul>
</div>
<div class="addChild">
<div class="icon">+</div>
<div>增加孩子年龄</div>
</div>
<div class="content_footer">
<div routerLink="/askdetail/1">&lt;</div>
<div routerLink="/pageThree" class="next">下一步</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-page-two',
templateUrl: './page-two.component.html',
styleUrls: ['./page-two.component.css']
})
export class PageTwoComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<div class="limbo">
<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>
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AskdetailComponent } from './askdetail.component'; import { Page1Component } from './page1.component';
describe('AskdetailComponent', () => { describe('Page1Component', () => {
let component: AskdetailComponent; let component: Page1Component;
let fixture: ComponentFixture<AskdetailComponent>; let fixture: ComponentFixture<Page1Component>;
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ AskdetailComponent ] declarations: [ Page1Component ]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {
fixture = TestBed.createComponent(AskdetailComponent); fixture = TestBed.createComponent(Page1Component);
component = fixture.componentInstance; component = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();
}); });
......
import { Component, OnInit, Input } from '@angular/core'
@Component({
selector: 'app-page1',
templateUrl: './page1.component.html',
styleUrls: ['./page1.component.css']
})
export class Page1Component implements OnInit {
@Input() curPageData: Array<any>
constructor() {}
ngOnInit() {}
}
<div class="limbo">
<div class="title">
<img src="assets/images/bg_10.png" />
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PageThreeComponent } from './page-three.component'; import { Page10Component } from './page10.component';
describe('PageThreeComponent', () => { describe('Page10Component', () => {
let component: PageThreeComponent; let component: Page10Component;
let fixture: ComponentFixture<PageThreeComponent>; let fixture: ComponentFixture<Page10Component>;
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ PageThreeComponent ] declarations: [ Page10Component ]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {
fixture = TestBed.createComponent(PageThreeComponent); fixture = TestBed.createComponent(Page10Component);
component = fixture.componentInstance; component = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();
}); });
......
import { Component, OnInit, Input } from '@angular/core'
@Component({
selector: 'app-page10',
templateUrl: './page10.component.html',
styleUrls: ['./page10.component.css']
})
export class Page10Component implements OnInit {
@Input() curPageData: Array<any>
constructor() {}
ngOnInit() {
console.log(this.curPageData)
}
}
<div class="container">
<div class="layout">
<div class="content">
<div class="questionTitle">
{{ this.curPageData['questions'][0]['questionName'] }}
</div>
<ul class="jobContent">
<li
*ngFor="let options of this.curPageData['questions'][0]['options']"
[ngClass]="{ selected: options['selected'] == true }"
(click)="getAnswer(options)"
>
{{ options.optionName }}
</li>
</ul>
</div>
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PageTwoComponent } from './page-two.component'; import { Page11Component } from './page11.component';
describe('PageTwoComponent', () => { describe('Page11Component', () => {
let component: PageTwoComponent; let component: Page11Component;
let fixture: ComponentFixture<PageTwoComponent>; let fixture: ComponentFixture<Page11Component>;
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ PageTwoComponent ] declarations: [ Page11Component ]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {
fixture = TestBed.createComponent(PageTwoComponent); fixture = TestBed.createComponent(Page11Component);
component = fixture.componentInstance; component = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();
}); });
......
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({
selector: 'app-page11',
templateUrl: './page11.component.html',
styleUrls: ['./page11.component.css']
})
export class Page11Component implements OnInit {
@Input() curPageData: Array<any>
@Output() getAllAnswer = new EventEmitter<any>()
// allOption: object
allOptions: Array<any>
constructor() {}
ngOnInit() {
// this.allOption = {}
this.allOptions = []
console.log(this.curPageData)
}
getAnswer(options) {
options['selected'] = !options['selected']
for (let i = 0; i < this.allOptions.length; i++) {
if (options['optionId'] == this.allOptions[i]['optionId']) {
let index = this.allOptions.indexOf(this.allOptions[i])
if (index > -1) {
this.allOptions.splice(index, 1)
}
}
}
this.allOptions.push(options)
for (let i = 0; i < this.allOptions.length; i++) {
if (!this.allOptions[i]['selected']) {
let index = this.allOptions.indexOf(this.allOptions[i])
if (index > -1) {
this.allOptions.splice(index, 1)
}
}
}
console.log(this.allOptions)
// if (!this.allOption[options['optionId']]) {
// this.allOption[options['optionId']] = {}
// }
// console.log(this.allOption)
// 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: this.allOptions
}
]
}
this.getAllAnswer.emit(ret)
}
}
<div class="container">
<div class="layout">
<div class="content">
<div class="questionTitle">
{{ this.curPageData['questions'][0]['questionName'].substring(0, 1) }}
<span>
{{
this.curPageData['questions'][0]['questionName'].substring(1, 3)
}}</span
>
{{ this.curPageData['questions'][0]['questionName'].substring(3, 8) }}
</div>
<ul class="jobContent">
<li
*ngFor="let options of this.curPageData['questions'][0]['options']"
[ngClass]="{ selected: options['selected'] == true }"
(click)="getAnswer(options)"
>
{{ options.optionName }}
</li>
</ul>
</div>
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Page12Component } from './page12.component';
describe('Page12Component', () => {
let component: Page12Component;
let fixture: ComponentFixture<Page12Component>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ Page12Component ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Page12Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({
selector: 'app-page12',
templateUrl: './page12.component.html',
styleUrls: ['./page12.component.css']
})
export class Page12Component implements OnInit {
@Input() curPageData: Array<any>
@Output() getAllAnswer = new EventEmitter<any>()
allOptions: Array<any>
constructor() {}
ngOnInit() {
this.allOptions = []
console.log(this.curPageData)
}
getAnswer(options) {
options['selected'] = !options['selected']
for (let i = 0; i < this.allOptions.length; i++) {
if (options['optionId'] == this.allOptions[i]['optionId']) {
let index = this.allOptions.indexOf(this.allOptions[i])
if (index > -1) {
this.allOptions.splice(index, 1)
}
}
}
this.allOptions.push(options)
for (let i = 0; i < this.allOptions.length; i++) {
if (!this.allOptions[i]['selected']) {
let index = this.allOptions.indexOf(this.allOptions[i])
if (index > -1) {
this.allOptions.splice(index, 1)
}
}
}
console.log(this.allOptions)
const ret = {
pageId: this.curPageData['pageId'],
questions: [
{
questionId: this.curPageData['questions'][0].questionId,
options: this.allOptions
}
]
}
this.getAllAnswer.emit(ret)
}
}
<div class="container">
<div class="layout">
<div class="content">
<div class="questionTitle">
{{ this.curPageData['questions'][0]['questionName'] }}
</div>
<ul class="jobContent">
<li
class="selected"
*ngFor="let options of this.curPageData['questions'][0]['options']"
[ngClass]="{ selected: options['selected'] == true }"
(click)="getAnswer(options)"
>
{{ options.optionName }}
</li>
</ul>
</div>
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Page13Component } from './page13.component';
describe('Page13Component', () => {
let component: Page13Component;
let fixture: ComponentFixture<Page13Component>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ Page13Component ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Page13Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({
selector: 'app-page13',
templateUrl: './page13.component.html',
styleUrls: ['./page13.component.css']
})
export class Page13Component implements OnInit {
@Input() curPageData: Array<any>
@Output() getAllAnswer = new EventEmitter<any>()
allOptions: Array<any>
constructor() {}
ngOnInit() {
this.allOptions = []
console.log(this.curPageData)
}
getAnswer(options) {
options['selected'] = !options['selected']
for (let i = 0; i < this.allOptions.length; i++) {
if (options['optionId'] == this.allOptions[i]['optionId']) {
let index = this.allOptions.indexOf(this.allOptions[i])
if (index > -1) {
this.allOptions.splice(index, 1)
}
}
}
this.allOptions.push(options)
for (let i = 0; i < this.allOptions.length; i++) {
if (!this.allOptions[i]['selected']) {
let index = this.allOptions.indexOf(this.allOptions[i])
if (index > -1) {
this.allOptions.splice(index, 1)
}
}
}
console.log(this.allOptions)
const ret = {
pageId: this.curPageData['pageId'],
questions: [
{
questionId: this.curPageData['questions'][0].questionId,
options: this.allOptions
}
]
}
this.getAllAnswer.emit(ret)
}
}
<div class="container">
<div class="layout">
<div class="content">
<div class="questionTitle hospitalTitle">
{{ this.curPageData['pageName'] }}
</div>
<ul class="jobContent">
<li
class="selected"
*ngFor="let options of this.curPageData['questions'][0]['options']"
(click)="getAnswer(options)"
>
{{ options.optionName }}
</li>
</ul>
</div>
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Page14Component } from './page14.component';
describe('Page14Component', () => {
let component: Page14Component;
let fixture: ComponentFixture<Page14Component>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ Page14Component ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Page14Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit ,Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'app-page14',
templateUrl: './page14.component.html',
styleUrls: ['./page14.component.css']
})
export class Page14Component 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)
}
}
<div class="container">
<div class="layout">
<div class="content">
<div class="questionTitle smokeTitle">
{{ this.curPageData['questions'][0]['questionName'] }}
</div>
<ul class="jobContent">
<li
class="selected"
*ngFor="let options of this.curPageData['questions'][0]['options']"
(click)="getAnswer(options)"
>
{{ options.optionName }}
</li>
</ul>
</div>
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Page15Component } from './page15.component';
describe('Page15Component', () => {
let component: Page15Component;
let fixture: ComponentFixture<Page15Component>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ Page15Component ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Page15Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit,Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'app-page15',
templateUrl: './page15.component.html',
styleUrls: ['./page15.component.css']
})
export class Page15Component implements OnInit {
@Input() curPageData: Array<any>
@Output() getAllAnswer = new EventEmitter<any>()
curQues: Object
curAllQues: Object
constructor() { }
ngOnInit() {
console.log(this.curPageData)
}
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: 15,
questions
}
this.getAllAnswer.emit(ret)
}
}
<div class="container">
<div class="layout ">
<div class="content">
<div class="questionTitle">
{{ this.curPageData['questions'][0]['questionName'] }}
</div>
<ul class="cityContent">
<li *ngFor="let provinces of this.provinceList" (click)="showToast()">
{{ provinces.provinceAbbr }}
</li>
</ul>
</div>
</div>
<div class="toastWrapper toast" *ngIf="isShow">
<div class="toastContent">
<div class="live">所在地区</div>
<ul class="city">
<li class="selected" (click)="closeToast()">舟山市</li>
<li>台州市</li>
<li>宁波市</li>
<li>杭州市</li>
<li>温州市</li>
<li>嘉兴市</li>
<li>湖州市</li>
<li>绍兴市</li>
</ul>
</div>
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Page16Component } from './page16.component';
describe('Page16Component', () => {
let component: Page16Component;
let fixture: ComponentFixture<Page16Component>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ Page16Component ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Page16Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input } from '@angular/core'
import { CommonService } from '../common.service'
@Component({
selector: 'app-page16',
templateUrl: './page16.component.html',
styleUrls: ['./page16.component.css']
})
export class Page16Component implements OnInit {
@Input() curPageData: Array<any>
isShow: boolean
provinceList: Array<any>
cityList: Array<any>
provinceId: number
constructor(private commonService: CommonService) {}
ngOnInit() {
console.log(this.curPageData)
this.provinceqry()
}
showToast() {
this.isShow = true
}
closeToast() {
this.isShow = false
}
provinceqry() {
this.commonService.provinceqry({ insurerId: 14 }).subscribe(res => {
if (res['success']) {
this.provinceList = res['data'].provinceList
console.log(this.provinceList)
}
})
}
getCityqry() {
const param = {
insurerId: 14,
provinceId: this.provinceId
}
this.commonService.provinceqry(param).subscribe(res => {
if (res['success']) {
console.log(res)
}
})
}
}
<div class="limbo">
<div class="title">
<img src="assets/images/bg_17.png" />
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Page17Component } from './page17.component';
describe('Page17Component', () => {
let component: Page17Component;
let fixture: ComponentFixture<Page17Component>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ Page17Component ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Page17Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input } from '@angular/core'
@Component({
selector: 'app-page17',
templateUrl: './page17.component.html',
styleUrls: ['./page17.component.css']
})
export class Page17Component implements OnInit {
@Input() curPageData: Array<any>
constructor() {}
ngOnInit() {
console.log(this.curPageData)
}
}
.option_item {
.option_item{ display: flex;
display: flex; flex-wrap: wrap;
flex-wrap: wrap;
} }
.option_item li{ .option_item li {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content:center; justify-content: center;
flex: 0 0 50%; flex: 0 0 50%;
margin-bottom: 20%; margin-bottom: 20%;
}
.option_item li img {
max-width: 55%;
}
.option_item li img.selected {
border: 1px solid #ff0000;
border-radius: 50%;
} }
.option_item li img{
max-width: 55%;
}
\ No newline at end of file
<div class="layout">
<div class="content">
<div class="questionTitle">{{ this.curPageData['pageName'] }}</div>
<ul class="option_item">
<li
*ngFor="let options of this.curPageData['questions'][0].options"
(click)="getAnswer(options)"
>
<img
[ngClass]="{'selected':this.selectedNum === options.optionId}"
(click)="changeStyle(options.optionId)"
src="assets/images/icon{{ options.optionId }}.png"
alt="{{ options.optionName }}"
/>
<span>{{ options.optionName }}</span>
</li>
</ul>
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Page2Component } from './page2.component';
describe('Page2Component', () => {
let component: Page2Component;
let fixture: ComponentFixture<Page2Component>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ Page2Component ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Page2Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({
selector: 'app-page2',
templateUrl: './page2.component.html',
styleUrls: ['./page2.component.css']
})
export class Page2Component implements OnInit {
@Input() curPageData: Array<any>
@Output() getAllAnswer = new EventEmitter<any>()
selectedNum:number;
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)
}
changeStyle(optionId){
//当前选中项
this.selectedNum = optionId
}
}
.ageContent{ @@ -1,46 +0,0 @@
display: flex; .ageContent {
display: flex;
flex-wrap: wrap;
} }
.ageContent li{ .ageContent li {
display: flex; width: 100%;
width: 100%; height: 60px;
height: 60px; line-height: 60px;
line-height: 60px; border-bottom: 1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc; display: flex;
justify-content: space-between;
} }
.ageContent li div{
flex: 0 0 50%; .ageContent li span b {
margin-left: 10px;
} }
.ageContent li span{ .addChild {
flex:1; /* display: flex;
text-align: right;
}
.ageContent li span b{
margin-left: 10px;
}
.addChild{
/* display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; */ align-items: center; */
width: 72%; width: 72%;
margin: 10% auto 0 auto; margin: 10% auto 0 auto;
text-align: center; text-align: center;
height: 70px; height: 70px;
line-height: 70px; line-height: 70px;
border:1px #ff0000 solid; border: 1px #ff0000 solid;
border-radius: 40px; border-radius: 40px;
position: relative; position: relative;
}
.addChild div {
float: left;
color: #ec2d37;
font-size: 22px;
} }
.addChild div{ .addChild div.icon {
float: left; font-weight: bold;
color: #ec2d37; width: 50px;
font-size: 22px; height: 50px;
border: 2px #ec2d37 solid;
border-radius: 50%;
font-size: 45px;
line-height: 38px;
margin: 3% 10% 0 10%;
} }
.addChild div.icon{
font-weight: bold;
width: 50px;
height:50px;
border:2px #ec2d37 solid;
border-radius:50%;
font-size: 45px;
line-height:38px;
margin:3% 10% 0 10%;
}
\ No newline at end of file
<div class="layout">
<div class="content">
<div class="questionTitle">{{ this.curPageData['pageName'] }}</div>
<ul class="ageContent">
<li *ngFor="let optionsList of this.curPageData['questions']; index as i">
<div>{{ optionsList.questionName }}</div>
<b (click)="showToast(optionsList, i)">
<span>{{ optionsList.name }}</span
>&gt;
</b>
</li>
</ul>
</div>
<div class="addChild" *ngIf="isShowChildAgeBtn" (click)="addChild()">
<div class="icon">+</div>
<div data-toggle="modal">增加孩子年龄</div>
</div>
<div class="toastWrapper toast" *ngIf="isShow">
<div class="toastContent">
<ul>
<li
[ngClass]="{ selected: this.selectedNum === options.optionId }"
*ngFor="let options of curQues.options"
(click)="
closeToast();
getAnswer(options);
changeStyle(options, options.optionId)
"
>
{{ options.optionName }}
</li>
</ul>
</div>
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Page3Component } from './page3.component';
describe('Page3Component', () => {
let component: Page3Component;
let fixture: ComponentFixture<Page3Component>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ Page3Component ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Page3Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({
selector: 'app-page3',
templateUrl: './page3.component.html',
styleUrls: ['./page3.component.css']
})
export class Page3Component implements OnInit {
@Input() curPageData: Array<any>
@Input() isShowChildAgeBtn: boolean
@Output() getAllAnswer = new EventEmitter<any>()
isShow: boolean
curQues: Object
curAllQues: Object
selectedNum: number
options: Array<any>
curQuesIndex: number
//当前问题长度
curQuesLen: number
//增加孩子点击次数
addChildCount: number
constructor() {}
ngOnInit() {
this.curQues = {}
this.curAllQues = {}
this.curQuesLen = this.curPageData['questions'].length
//初始化增加孩子按钮可以点2次
this.addChildCount = 2
}
showToast(question, idx) {
this.isShow = true
this.curQues = question
this.curQuesIndex = idx
}
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)
}
changeStyle(options, optionId) {
//当前选中项
this.curPageData['questions'][this.curQuesIndex]['name'] =
options.optionName
this.selectedNum = optionId
// for (let i = 0; i < this.curQuesLen; i++) {
// for (
// let j = 0;
// j < this.curPageData['questions'][i]['options'].length;
// j++
// ) {
// if (
// options.optionId ==
// this.curPageData['questions'][i].options[j].optionId
// ) {
// this.curPageData['questions'][i]['name'] = this.curPageData[
// 'questions'
// ][i].options[j].optionName
// }
// }
// }
}
addChild() {
this.addChildCount--
if (this.addChildCount >= 0) {
this.curPageData['questions'][this.curQuesLen++] = {
questionId: 4,
questionName: `孩子${this.addChildCount == 1 ? '1' : '2'}年龄`,
optionType: 1,
questionOrder: 4,
options: [
{
optionId: 22,
optionName: '95后',
optionOrder: 1,
customerInput: null
},
{
optionId: 23,
optionName: '90后',
optionOrder: 2,
customerInput: null
},
{
optionId: 24,
optionName: '85后',
optionOrder: 3,
customerInput: null
},
{
optionId: 25,
optionName: '80后',
optionOrder: 4,
customerInput: null
},
{
optionId: 26,
optionName: '75后',
optionOrder: 5,
customerInput: null
},
{
optionId: 27,
optionName: '70后',
optionOrder: 6,
customerInput: null
},
{
optionId: 28,
optionName: '65后',
optionOrder: 7,
customerInput: null
},
{
optionId: 29,
optionName: '60后',
optionOrder: 8,
customerInput: null
}
]
}
}
console.log(this.curPageData['questions'])
}
}
<div class="container">
<div class="layout">
<div class="content">
<div class="questionTitle">{{ this.curPageData['pageName'] }}</div>
<ul class="jobContent">
<li
[ngClass]="{'selected':this.selectedNum === options.optionId}"
*ngFor="let options of this.curPageData['questions'][0].options"
(click)="getAnswer(options);changeStyle(options.optionId)"
>
{{ options.optionName }}
</li>
</ul>
</div>
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Page4Component } from './page4.component';
describe('Page4Component', () => {
let component: Page4Component;
let fixture: ComponentFixture<Page4Component>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ Page4Component ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Page4Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({
selector: 'app-page4',
templateUrl: './page4.component.html',
styleUrls: ['./page4.component.css']
})
export class Page4Component implements OnInit {
@Input() curPageData: Array<any>
@Output() getAllAnswer = new EventEmitter<any>()
selectedNum:number;
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)
}
changeStyle(optionId){
//当前选中项
this.selectedNum = optionId
}
}
<div class="container">
<div class="layout">
<div class="content">
<div class="questionTitle">
{{ this.curPageData['pageName'].substring(0, 1) }}
<span>{{ this.curPageData['pageName'].substring(1, 3) }}</span>
{{ this.curPageData['pageName'].substring(3, 10) }}
</div>
<ul class="jobContent">
<li
[ngClass]="{'selected':this.selectedNum === options.optionId}"
*ngFor="let options of this.curPageData['questions'][0]['options']"
(click)="getAnswer(options);changeStyle(options.optionId)"
>
{{ options.optionName }}
</li>
</ul>
</div>
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Page5Component } from './page5.component';
describe('Page5Component', () => {
let component: Page5Component;
let fixture: ComponentFixture<Page5Component>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ Page5Component ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Page5Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({
selector: 'app-page5',
templateUrl: './page5.component.html',
styleUrls: ['./page5.component.css']
})
export class Page5Component implements OnInit {
@Input() curPageData: Array<any>
@Output() getAllAnswer = new EventEmitter<any>()
selectedNum:number;
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)
}
changeStyle(optionId){
//当前选中项
this.selectedNum = optionId
}
}
<div class="limbo">
<div class="title">
<img src="assets/images/bg_6.png" />
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Page6Component } from './page6.component';
describe('Page6Component', () => {
let component: Page6Component;
let fixture: ComponentFixture<Page6Component>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ Page6Component ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Page6Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input } from '@angular/core'
@Component({
selector: 'app-page6',
templateUrl: './page6.component.html',
styleUrls: ['./page6.component.css']
})
export class Page6Component implements OnInit {
@Input() curPageData: Array<any>
constructor() {}
ngOnInit() {
console.log(this.curPageData)
}
}
<div class="container">
<div class="layout">
<div class="content">
<div class="questionTitle">
{{ this.curPageData['questions'][0]['questionName'] }}
</div>
<ul class="income">
<li
[ngClass]="{'selected':this.selectedNum === options.optionId}"
*ngFor="let options of this.curPageData['questions'][0].options"
(click)="getAnswer(this.curPageData['questions'][0], options);
changeStyle(options.optionId)"
>
{{ options.optionName }}
</li>
</ul>
<div class="questionTitle" *ngIf="hasMate">
{{ this.curPageData['questions'][1]['questionName']}}
</div>
<ul class="income" *ngIf="hasMate">
<li
[ngClass]="{'selected':this.selectedTwo === options.optionId}"
*ngFor="let options of this.curPageData['questions'][1]['options']"
(click)="getAnswer(this.curPageData['questions'][1], options);
changeStyle2(options.optionId)"
>
{{ options.optionName }}
</li>
</ul>
</div>
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Page7Component } from './page7.component';
describe('Page7Component', () => {
let component: Page7Component;
let fixture: ComponentFixture<Page7Component>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ Page7Component ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Page7Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({
selector: 'app-page7',
templateUrl: './page7.component.html',
styleUrls: ['./page7.component.css']
})
export class Page7Component implements OnInit {
@Input() curPageData: Array<any>
@Input() hasMate: boolean
@Output() getAllAnswer = new EventEmitter<any>()
curAllQues: Object
selectedNum:number;
//第二个问题的选择
selectedTwo:number;
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)
}
changeStyle(optionId){
this.selectedNum = optionId
}
changeStyle2(optionId){
this.selectedTwo = optionId
}
}
<div class="container">
<div class="layout">
<div class="content">
<div class="questionTitle">
{{ this.curPageData['questions'][0]['questionName'] }}
</div>
<ul class="income">
<li
[ngClass]="{'selected':this.selectedNum === options.optionId}"
*ngFor="let options of this.curPageData['questions'][0]['options']"
(click)="getAnswer(this.curPageData['questions'][0], options);
changeStyle(options.optionId)"
>
{{ options.optionName }}
</li>
</ul>
<div class="questionTitle">
{{ this.curPageData['questions'][1]['questionName'] }}
</div>
<ul class="income">
<li
[ngClass]="{'selected':this.selectedTwo === options.optionId}"
*ngFor="let options of this.curPageData['questions'][1]['options']"
(click)="getAnswer(this.curPageData['questions'][1], options);
changeStyle2(options.optionId)"
>
{{ options.optionName }}
</li>
</ul>
</div>
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Page8Component } from './page8.component';
describe('Page8Component', () => {
let component: Page8Component;
let fixture: ComponentFixture<Page8Component>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ Page8Component ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Page8Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({
selector: 'app-page8',
templateUrl: './page8.component.html',
styleUrls: ['./page8.component.css']
})
export class Page8Component implements OnInit {
@Input() curPageData: Array<any>
@Output() getAllAnswer = new EventEmitter<any>()
curAllQues: Object
selectedNum:number;
selectedTwo:number;
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)
}
changeStyle(optionId){
this.selectedNum = optionId
}
changeStyle2(optionId){
this.selectedTwo = optionId
}
}
<div class="container">
<div class="layout">
<div class="content">
<div class="questionTitle">
{{ this.curPageData['questions'][0]['questionName'] }}
</div>
<ul class="jobContent">
<li
[ngClass]="{ selected: options['selected'] == true }"
*ngFor="let options of this.curPageData['questions'][0]['options']"
(click)="getAnswer(this.curPageData['questions'][0], options)"
>
{{ options.optionName }}
</li>
</ul>
<div class="questionTitle" *ngIf="hasMate">
{{ this.curPageData['questions'][1]['questionName'] }}
</div>
<ul class="jobContent" *ngIf="hasMate">
<li
[ngClass]="{ selected: options['selected'] == true }"
*ngFor="let options of this.curPageData['questions'][1]['options']"
(click)="getAnswer(this.curPageData['questions'][1], options)"
>
{{ options.optionName }}
</li>
</ul>
</div>
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Page9Component } from './page9.component';
describe('Page9Component', () => {
let component: Page9Component;
let fixture: ComponentFixture<Page9Component>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ Page9Component ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Page9Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({
selector: 'app-page9',
templateUrl: './page9.component.html',
styleUrls: ['./page9.component.css']
})
export class Page9Component implements OnInit {
@Input() curPageData: Array<any>
@Input() hasMate: boolean
@Output() getAllAnswer = new EventEmitter<any>()
curAllQues: Object
selectedObj: Object
constructor() {}
ngOnInit() {
this.curAllQues = {}
this.selectedObj = {}
this.setOptionSelected()
}
getAnswer(question, options) {
const questionId = question['questionId']
console.log('select', this.selectedObj, options)
if (!this.selectedObj[questionId]) {
this.selectedObj[questionId] = options
options['selected'] = true
} else {
if (this.selectedObj[questionId].optionId != options.optionId) {
this.selectedObj[questionId]['selected'] = false
options['selected'] = true
this.selectedObj[questionId] = options
}
}
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)
}
setOptionSelected() {
const questions = this.curPageData['questions']
if (!questions) {
return
}
questions.map(question => {
question['options'].forEach(option => {
if (option['selected']) {
this.selectedObj[question['questionId']] = option
}
})
})
}
}

566 KB | W: | H:

389 KB | W: | H:

questionnair/src/assets/images/bg_1.png
questionnair/src/assets/images/bg_1.png
questionnair/src/assets/images/bg_1.png
questionnair/src/assets/images/bg_1.png
  • 2-up
  • Swipe
  • Onion skin

7.55 KB | W: | H:

8.11 KB | W: | H:

questionnair/src/assets/images/icon1.png
questionnair/src/assets/images/icon1.png
questionnair/src/assets/images/icon1.png
questionnair/src/assets/images/icon1.png
  • 2-up
  • Swipe
  • Onion skin

14 KB | W: | H:

12 KB | W: | H:

questionnair/src/assets/images/icon2.png
questionnair/src/assets/images/icon2.png
questionnair/src/assets/images/icon2.png
questionnair/src/assets/images/icon2.png
  • 2-up
  • Swipe
  • Onion skin

10.3 KB | W: | H:

10.9 KB | W: | H:

questionnair/src/assets/images/icon3.png
questionnair/src/assets/images/icon3.png
questionnair/src/assets/images/icon3.png
questionnair/src/assets/images/icon3.png
  • 2-up
  • Swipe
  • Onion skin

15.9 KB | W: | H:

16.5 KB | W: | H:

questionnair/src/assets/images/icon4.png
questionnair/src/assets/images/icon4.png
questionnair/src/assets/images/icon4.png
questionnair/src/assets/images/icon4.png
  • 2-up
  • Swipe
  • Onion skin
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
*{ *{
margin: 0;padding:0; margin: 0;padding:0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} }
html, body { html, body {
position: relative; position: relative;
...@@ -15,19 +17,70 @@ img{ ...@@ -15,19 +17,70 @@ img{
ul li,ol li{ ul li,ol li{
list-style: none; list-style: none;
} }
.container{
padding:0;
}
.wrapper{
display: flex;
flex-direction: column;
}
.layout{ .layout{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
padding:10px; padding:0 10px;
height:100%;
}
.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;
} */
.content{ .content{
height: 100%; max-height: 580px;
overflow: auto;
} }
/* .layout.cityLayout .questionTitle{
margin:0 10px;
} */
.questionTitle{ .questionTitle{
color:#ec2d37; color:#ec2d37;
font-size: 26px; font-size: 26px;
margin-bottom: 15%; height: 70px;
line-height: 70px;
width: 100%;
display: flex;
}
.questionTitle span{
color: rgba(3,177, 153)
}
.questionTitle.hospitalTitle{
line-height: unset;
margin: 25px auto 15px auto;
}
.questionTitle.smokeTitle{
line-height: unset;
margin: 25px auto 55px auto;
} }
.content_footer{ .content_footer{
display: flex; display: flex;
...@@ -51,4 +104,124 @@ ul li,ol li{ ...@@ -51,4 +104,124 @@ ul li,ol li{
.content_footer div:nth-child(2){ .content_footer div:nth-child(2){
flex: 0 0 60%; flex: 0 0 60%;
font-weight: 500; font-weight: 500;
}
.jobContent,.income,.cityContent{
width: 100%;
}
.jobContent li,.income li,.cityContent li{
width: 100%;
height: 55px;
line-height: 55px;
border: 1px #8a8a8a solid;
margin-bottom: 15px;
border-radius: 4px;
box-sizing: border-box;
padding-left: 5%;
}
.jobContent li.selected,.income li.selected{
border: 1px #ff0000 solid;
}
.cityContent{
display: flex;
flex-wrap: wrap;
margin-top: 15%;
}
.income{
display: flex;
flex-wrap: wrap;
}
.income li{
width: 49%;
float: left;
margin-right: 2%;
text-align: center;
padding-left: 0;
}
.income li:nth-child(2),.income li:nth-child(4),.income li:nth-child(6){
margin-right: 0;
}
.cityContent li{
width:12%;
height: 46px;
line-height: 46px;
text-align: center;
padding-left: 0;
margin-left: 1%;
margin-right: 1%;
border:none;
-moz-box-shadow:0px 3px 7px rgb(206, 208, 210);
-webkit-box-shadow:0px 3px 7px rgb(206, 208, 210);
box-shadow:0px 3px 7px rgb(206, 208, 210);
}
.cityContent li:nth-child(7),.cityContent li:nth-child(14),.cityContent li:nth-child(21),.cityContent li:nth-child(28){
margin-right: 0;
}
.cityContent li.selected{
background: rgba(148,209, 204)
}
.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;
z-index: 1;
}
.toastContent{
position: absolute;
bottom: 0;
width: 100%;
height: 40%;
background-color: #fff;
z-index: 20;
}
.toastContent .live{
display: flex;
height: 40px;
line-height: 40px;
text-align: center;
justify-content: center;
border-bottom: 1px rgb(220, 220, 220) solid;
font-size: 16px;
}
.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;
}
.toastContent ul.city {
margin: 0;
}
.toastContent ul.city li{
width: 100%;
border:none;
border-bottom: 1px rgb(220, 220, 220) solid;
border-radius: 0;
margin: 0;
height:35px;
line-height:35px;
} }
\ No newline at end of file
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