Commit 1ac68250 by Sweet Zhang

更新经纪人查询页面

parent a886cabf
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "cserp"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [
"../node_modules/chart.js/dist/Chart.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"stage": "environments/environment.stage.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
...@@ -27,7 +27,9 @@ ...@@ -27,7 +27,9 @@
"src/styles.css" "src/styles.css"
], ],
"scripts": [], "scripts": [],
"es5BrowserSupport": true "es5BrowserSupport": true,
"baseHref": "/brokerQry/",
"deployUrl": "/brokerQry/"
}, },
"configurations": { "configurations": {
"production": { "production": {
...@@ -53,6 +55,24 @@ ...@@ -53,6 +55,24 @@
"maximumError": "5mb" "maximumError": "5mb"
} }
] ]
},
"dev": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
} }
} }
}, },
......
{ {
"name": "broker-qry", "name": "angular",
"version": "0.0.0", "version": "0.0.0",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
......
...@@ -5,9 +5,9 @@ import {BrokerQryComponent} from './broker-qry/broker-qry.component'; ...@@ -5,9 +5,9 @@ import {BrokerQryComponent} from './broker-qry/broker-qry.component';
import {BrokerDetailComponent} from './broker-detail/broker-detail.component'; import {BrokerDetailComponent} from './broker-detail/broker-detail.component';
const routes: Routes = [ const routes: Routes = [
{ {
path: '', redirectTo: '/brokerQry', pathMatch: 'full' path: '', redirectTo: '/index', pathMatch: 'full'
}, },
{path: 'brokerQry', component: BrokerQryComponent}, {path: 'index', component: BrokerQryComponent},
{path: 'brokerDetail/:id', component: BrokerDetailComponent} {path: 'brokerDetail/:id', component: BrokerDetailComponent}
]; ];
@NgModule({ @NgModule({
......
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 { AppRoutingModule } from './app-routing.module'; import {AppRoutingModule} from './app-routing.module';
import { BrokerQryComponent } from './broker-qry/broker-qry.component'; import {BrokerQryComponent} from './broker-qry/broker-qry.component';
import { BrokerDetailComponent } from './broker-detail/broker-detail.component'; import {BrokerDetailComponent} from './broker-detail/broker-detail.component';
import { MobileNoFormatPipe } from './mobile-no-format.pipe'; import {MobileNoFormatPipe} from './mobile-no-format.pipe';
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {EventBusService} from './event-bus.service';
@NgModule({ @NgModule({
declarations: [ declarations: [
...@@ -16,9 +20,12 @@ import { MobileNoFormatPipe } from './mobile-no-format.pipe'; ...@@ -16,9 +20,12 @@ import { MobileNoFormatPipe } from './mobile-no-format.pipe';
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
FormsModule,
HttpClientModule,
AppRoutingModule AppRoutingModule
], ],
providers: [], providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}, EventBusService],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule {
}
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
} }
.basicInfo .basicInfoWrapper { .basicInfo .basicInfoWrapper {
width: 50%; width: 75%;
} }
.cerPhoto { .cerPhoto {
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
.basicInfo .basicInfoWrapper > div > strong { .basicInfo .basicInfoWrapper > div > strong {
display: inline-block; display: inline-block;
width: 60%; width: 35%;
margin-right: 10px; margin-right: 10px;
} }
...@@ -54,18 +54,36 @@ ...@@ -54,18 +54,36 @@
align-content: space-between; align-content: space-between;
} }
.honorList > div {
display: flex;
flex-direction: column;
align-items: center;
}
.honorList > div > img {
height: 100px;
margin-bottom: 5px;
}
.bioIntro { .bioIntro {
text-align: justify; text-align: justify;
} }
.contactList > div { .contactList > div {
width: 30%; width: 30%;
display: flex;
align-items: center;
} }
.contactList > div > strong { .contactList > div > strong {
margin-right: 10px; margin-right: 10px;
} }
.contact .contactList .icon {
width: 30px;
margin-right: 10px;
}
.lifePhoto .lifePhotoList { .lifePhoto .lifePhotoList {
display: flex; display: flex;
} }
...@@ -129,14 +147,27 @@ footer { ...@@ -129,14 +147,27 @@ footer {
width: 100%; width: 100%;
} }
.practitionerRegNo {
font-size: 12px;
}
.cerPhoto {
width: 80px;
}
.contact .contactList { .contact .contactList {
flex-direction: column; flex-direction: column;
} }
.contact .contactList .icon {
width: 25px;
}
.contact .contactList > div { .contact .contactList > div {
width: 100%; width: 100%;
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
margin-bottom: 12px;
} }
.eqrocde > div { .eqrocde > div {
......
<div class="container"> <div class="container">
<div class="wrapper"> <div class="wrapper">
<h1 class="text-center"> <h1 class="text-center">
<img src="assets/images/ydinsurance_logo.jpg" alt=""> <img src="assets/images/ydinsurance_logo.png" alt="">
</h1> </h1>
<!--经纪人基本信息--> <!--经纪人基本信息-->
<section class="basicInfo flex-center"> <section class="basicInfo flex-center">
<div class="basicInfoWrapper"> <div class="basicInfoWrapper">
<div class="name"> <div class="name">
<strong>姓名</strong> <strong>姓名</strong>
<span>张三</span> <span>{{userPractitionerInfo?.name}}</span>
</div> </div>
<div class="practitionerRegNoWrapper"> <div class="practitionerRegNoWrapper">
<strong>执业编号</strong> <strong>执业编号</strong>
<span>##12345678##</span> <span class="practitionerRegNo">{{userPractitionerInfo?.practitionerRegNo}}</span>
</div> </div>
<div class="effectiveEndDateWrapper"> <div class="effectiveEndDateWrapper">
<strong>有效截至日期</strong> <strong>有效截至日期</strong>
<span>2020-02-02</span> <span>{{userPractitionerInfo?.effectiveEndDate}}</span>
</div> </div>
<div class="areaWrapper"> <div class="areaWrapper">
<strong>所属区域</strong> <strong>所属区域</strong>
<span>江苏省南京市</span> <span>{{userPractitionerInfo?.provinceName}}{{userPractitionerInfo?.cityName}}</span>
</div> </div>
</div> </div>
<div class="cerPhoto"> <div class="cerPhoto">
<img src="https://yindun-images.oss-cn-shanghai-finance-1-pub.aliyuncs.com/broker/1/head.jpg" alt="" class="img-responsive"> <img src="{{userPractitionerInfo?.headFilePath}}" alt="" class="img-responsive img-circle">
</div> </div>
</section> </section>
<!--经纪人荣誉--> <!--经纪人荣誉-->
<section class="honor"> <section class="honor" *ngIf="certificateList && certificateList.length>0">
<h4>荣誉</h4> <h4>荣誉</h4>
<div class="honorList"> <div class="honorList">
<div *ngFor="let honorList of hornorLists"> <div *ngFor="let certificateItem of certificateList">
<img src="{{honorList.path}}" alt="{{honorList.certName}}"> <img src="{{certificateItem.imagePath}}" alt="{{certificateItem.certName}}">
<span>{{certificateItem.certName}}</span>
</div> </div>
</div> </div>
</section> </section>
<!--自我简介--> <!--自我简介-->
<section class="bioIntro"> <section class="bioIntro" *ngIf="userPractitionerInfo?.bioIntro">
<h4>自我简介</h4> <h4>自我简介</h4>
<p> <p>
如果我办得到,我一定把“保险”这两个字写在家家户户的门上,每一个公务员的手册上,以及每个公司的章程上。因为我深信通过保险,每一个家庭,每一个公务员,每一个团体,只要付出微小的代价,就可以免遭万劫不复的 {{userPractitionerInfo?.bioIntro}}
</p> </p>
</section> </section>
<!--联系方式--> <!--联系方式-->
<section class="contact"> <section class="contact">
<h4>联系方式</h4> <h4>联系方式</h4>
<div class="contactList"> <div class="contactList">
<div> <div *ngIf="userPractitionerInfo?.mobileNo">
<strong>手机号:</strong> <div class="icon">
<span>13000000000</span> <img src="assets/images/phone.png" alt="手机" class="img-responsive">
</div> </div>
<div> <span><a href="tel:{{userPractitionerInfo?.mobileNo}}">{{userPractitionerInfo?.mobileNo}}</a></span>
<strong>微信号:</strong>
<span>13000000000</span>
</div> </div>
<div> <div *ngIf="userPractitionerInfo?.wechatId">
<strong>QQ号:</strong> <div class="icon">
<span>13000000000</span> <img src="assets/images/wx.png" alt="微信" class="img-responsive">
</div>
<span>{{userPractitionerInfo?.wechatId}}</span>
</div>
<div *ngIf="userPractitionerInfo?.qqId">
<div class="icon">
<img src="assets/images/qq.png" alt="QQ" class="img-responsive">
</div>
<span>{{userPractitionerInfo?.qqId}}</span>
</div> </div>
</div> </div>
</section> </section>
<!--生活照片--> <!--生活照片-->
<section class="lifePhoto"> <section class="lifePhoto" *ngIf="lifePhotoList && lifePhotoList.length>0">
<h4>生活照片</h4> <h4>生活照片</h4>
<div class="lifePhotoList"> <div class="lifePhotoList">
<div class="mainPhoto"> <div class="mainPhoto" *ngFor="let lifePhotoItem of lifePhotoList.slice(0,1);">
<img src="https://yindun-images.oss-cn-shanghai-finance-1-pub.aliyuncs.com/broker/1/20190321205635.jpg" alt="" class="img-responsive"> <img src="{{lifePhotoItem.lifePhotoFilePath}}" alt="" class="img-responsive">
</div> </div>
<div class="subPhoto"> <div class="subPhoto" *ngFor="let lifePhotoItem of lifePhotoList.slice(1);">
<img src="https://yindun-images.oss-cn-shanghai-finance-1-pub.aliyuncs.com/broker/1/20190321205659.jpg" alt="" class="img-responsive"> <img src="{{lifePhotoItem.lifePhotoFilePath}}" alt="" class="img-responsive">
</div> </div>
</div> </div>
</section> </section>
<!--尾部--> <!--尾部-->
<footer> <footer>
<div class="eqrocde"> <div class="eqrocde">
<div><img src="https://www.ydinsurance.cn/wp-content/uploads/2017/11/ydinsurance_qrcode.jpg" alt="" class="img-responsive"></div> <div><img src="https://www.ydinsurance.cn/wp-content/uploads/2017/11/ydinsurance_qrcode.jpg" alt=""
<div><img src="https://www.zuihuibi.cn/wp-content/uploads/2018/07/qrcode_zuihuibi.jpg" alt="" class="img-responsive"></div> class="img-responsive"></div>
<div><img src="https://www.zuihuibi.cn/wp-content/uploads/2018/07/qrcode_zuihuibi.jpg" alt=""
class="img-responsive"></div>
</div> </div>
<div class="text-center" style="padding-top: 15px;font-size: 10px">上海银盾保险经纪有限公司</div> <div class="text-center" style="padding-top: 15px;font-size: 10px">上海银盾保险经纪有限公司</div>
</footer> </footer>
......
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {EventBusService} from '../event-bus.service';
import {ActivatedRoute} from '@angular/router';
@Component({ @Component({
selector: 'app-broker-detail', selector: 'app-broker-detail',
...@@ -6,40 +8,30 @@ import {Component, OnInit} from '@angular/core'; ...@@ -6,40 +8,30 @@ import {Component, OnInit} from '@angular/core';
styleUrls: ['./broker-detail.component.css'] styleUrls: ['./broker-detail.component.css']
}) })
export class BrokerDetailComponent implements OnInit { export class BrokerDetailComponent implements OnInit {
hornorLists: Array<any>; certificateList: Array<any>;
lifePhotoList: Array<any>;
practitionerId: any;
userPractitionerInfo: any;
constructor() { constructor(private eventBusService: EventBusService, private activatedRoute: ActivatedRoute) {
} }
ngOnInit() { ngOnInit() {
// 荣誉列表 this.practitionerId = this.activatedRoute.snapshot.params['id'];
this.hornorLists = [{ this.userPractitionerDetailQuery();
id: '1', }
certName: 'RFC',
path: 'https://yindun-images.oss-cn-shanghai-finance-1-pub.aliyuncs.com/broker/cert/rfc.png' userPractitionerDetailQuery() {
}, const practitionerId = {
{ practitionerId: this.practitionerId
id: '2', };
certName: '人身保险经纪人', this.eventBusService.userPractitionerDetailQuery(practitionerId).then(res => {
path: 'https://yindun-images.oss-cn-shanghai-finance-1-pub.aliyuncs.com/broker/cert/human.png' if (res['success']) {
}, this.userPractitionerInfo = res['data'];
{ this.certificateList = this.userPractitionerInfo.certificateList;
id: '3', this.lifePhotoList = this.userPractitionerInfo.lifePhotoList;
certName: '产险', }
path: 'https://yindun-images.oss-cn-shanghai-finance-1-pub.aliyuncs.com/broker/cert/property.png' });
}, {
id: '4',
certName: '投资',
path: 'https://yindun-images.oss-cn-shanghai-finance-1-pub.aliyuncs.com/broker/cert/invest.png'
}, {
id: '5',
certName: '外币',
path: 'https://yindun-images.oss-cn-shanghai-finance-1-pub.aliyuncs.com/broker/cert/currency.png'
}, {
id: '6',
certName: '寿险',
path: 'https://yindun-images.oss-cn-shanghai-finance-1-pub.aliyuncs.com/broker/cert/life.png'
}];
} }
} }
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
} }
.queryItem > div { .queryItem > div {
width: 60%; width: 100%;
} }
.mResultContainer .media-left { .mResultContainer .media-left {
......
...@@ -12,49 +12,29 @@ ...@@ -12,49 +12,29 @@
<div class="col-md-8 col-sm-12 queryItem"> <div class="col-md-8 col-sm-12 queryItem">
<div class="input-group brokerName"> <div class="input-group brokerName">
<span class="glyphicon glyphicon-user"></span> <span class="glyphicon glyphicon-user"></span>
<input type="text" class="form-control" placeholder="请输入经纪人姓名"> <input type="text" class="form-control" placeholder="请输入经纪人姓名" [(ngModel)]="practitionerName">
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-12"> <div class="col-md-4 col-sm-12">
<div class="search">查询</div> <div class="search" (click)="userPractitionerQuery()">查询</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 查询结果--> <!-- 查询结果-->
<div class="resultContainer"> <div class="resultContainer">
<!-- <div class="table-responsive"> <div class="mResultContainer" *ngIf="userPractitionerQueryItemList && userPractitionerQueryItemList.length <1">
<table class="table table-bordered"> 暂无结果
<thead> </div>
<tr> <div class="mResultContainer" *ngIf="userPractitionerQueryItemList">
<th>操作</th> <div class="media" *ngFor="let userPractitionerQueryItem of userPractitionerQueryItemList">
<th>姓名</th>
<th>执业登记号</th>
<th>有效截止日</th>
<th>所属区域</th>
<th>手机号</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let brokerList of brokerLists">
<td><a class="viewDetail" (click)="viewDetail(brokerList.id)">查看</a></td>
<td>{{brokerList.name}}</td>
<td>{{brokerList.practitionerRegNo}}</td>
<td>{{brokerList.effectiveEndDate}}</td>
<td>{{brokerList.area}}</td>
<td>{{brokerList.mobileNo | mobileNoFormat}}</td>
</tr>
</tbody>
</table>
</div>-->
<div class="mResultContainer">
<div class="media" *ngFor="let brokerList of brokerLists">
<div class="media-body"> <div class="media-body">
<div><strong>姓名</strong><span>{{brokerList.name}}</span></div> <div><strong>姓名</strong><span>{{userPractitionerQueryItem.name}}</span></div>
<div><strong>执业编号</strong><span>{{brokerList.practitionerRegNo}}</span></div> <div><strong>执业编号</strong><span>{{userPractitionerQueryItem.practitionerRegNo}}</span></div>
<div><strong>所属区域</strong><span>{{brokerList.area}}</span></div> <div><strong>所属区域</strong><span>{{userPractitionerQueryItem.provinceName}}{{userPractitionerQueryItem.cityName}}</span>
<div><strong>手机号</strong><span>{{brokerList.mobileNo | mobileNoFormat}}</span></div> </div>
<div><a class="viewDetail" (click)="viewDetail(brokerList.id)">查看</a></div> <div><strong>手机号</strong><span>{{userPractitionerQueryItem.mobileNo | mobileNoFormat}}</span></div>
<div><a class="viewDetail" (click)="viewDetail(userPractitionerQueryItem.id)">查看</a></div>
</div> </div>
</div> </div>
</div> </div>
......
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {CommonService} from '../../common.service'; import {Router} from '@angular/router';
import {Router} from "@angular/router"; import {EventBusService} from '../event-bus.service';
@Component({ @Component({
selector: 'app-broker-qry', selector: 'app-broker-qry',
...@@ -8,52 +8,25 @@ import {Router} from "@angular/router"; ...@@ -8,52 +8,25 @@ import {Router} from "@angular/router";
styleUrls: ['./broker-qry.component.css'] styleUrls: ['./broker-qry.component.css']
}) })
export class BrokerQryComponent implements OnInit { export class BrokerQryComponent implements OnInit {
brokerLists: Array<any>; userPractitionerQueryItemList: Array<any>;
practitionerName: string;
constructor(private router: Router) { constructor(private router: Router, private eventBusService: EventBusService) {
} }
ngOnInit() { ngOnInit() {
// 假数据 }
this.brokerLists = [
{
id: '1', // 经纪人查询
name: '张三', userPractitionerQuery() {
practitionerRegNo: '12345678912345', const userPractitioner = {
effectiveEndDate: '2001-02-02', name: this.practitionerName
area: '上海', };
mobileNo: '13000000000' this.eventBusService.userPractitionerQuery(userPractitioner).then(res => {
}, { if (res['success']) {
id: '2', this.userPractitionerQueryItemList = res['data'].userPractitionerQueryItemList;
name: '张三', }
practitionerRegNo: '12345678912345', });
effectiveEndDate: '2001-02-02',
area: '上海',
mobileNo: '4009209291'
}, {
id: '3',
name: '张三',
practitionerRegNo: '12345678912345',
effectiveEndDate: '2001-02-02',
area: '上海',
mobileNo: '0216602026'
}, {
id: '4',
name: '张三',
practitionerRegNo: '12345678912345',
effectiveEndDate: '2001-02-02',
area: '上海',
mobileNo: '13000000000'
}, {
id: '5',
name: '张三',
practitionerRegNo: '12345678912345',
effectiveEndDate: '2001-02-02',
area: '上海',
mobileNo: '13000000000'
},
];
} }
// 经纪人详情信息查询 // 经纪人详情信息查询
......
import {Injectable} from '@angular/core'; import {Injectable} from '@angular/core';
import {environment} from './../environments/environment'; import {environment} from './../environments/environment';
import {HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http'; import {HttpClient, HttpHeaders} from '@angular/common/http';
import { Observable, throwError } from 'rxjs'; @Injectable()
import { catchError, retry } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class EventBusService { export class EventBusService {
private USER_API_URL = ''; private USER_API_URL = '';
private httpOptions;
constructor(private http: HttpClient) { constructor(private http: HttpClient) {
this.USER_API_URL = environment.apiUrl; this.USER_API_URL = environment.apiUrl;
this.httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'X-Authorization': ''
})
};
} }
/** /**
...@@ -21,33 +24,33 @@ export class EventBusService { ...@@ -21,33 +24,33 @@ export class EventBusService {
const ticketObj = { const ticketObj = {
ticket: 'brokerQry' ticket: 'brokerQry'
}; };
return this.http.post(url, JSON.stringify(ticketObj),{ observe: 'response' }) return this.http.post(url, JSON.stringify(ticketObj), this.httpOptions).toPromise();
.pipe(
response => {
return response;
} }
);
/**
* 经纪人查询
*/
async userPractitionerQuery(userPractitioner) {
const url = this.USER_API_URL + '/user/userPractitionerQuery';
const res = await this.obtainToken();
this.httpOptions.headers = this.httpOptions.headers.set('X-Authorization', res['data']['token']);
return this.http.post(url, JSON.stringify(userPractitioner), this.httpOptions)
.toPromise().then(response => {
return response;
});
} }
/** /**
* 错误信息处理 * 经纪人详细查询
* @param error
* @returns {Observable<never>}
*/ */
private handleError(error: HttpErrorResponse) { async userPractitionerDetailQuery(userPractitionerDetail) {
if (error.error instanceof ErrorEvent) { const url = this.USER_API_URL + '/user/userPractitionerDetailQuery';
// A client-side or network error occurred. Handle it accordingly. const res = await this.obtainToken();
console.error('An error occurred:', error.error.message); this.httpOptions.headers = this.httpOptions.headers.set('X-Authorization', res['data']['token'])
} else { return this.http.post(url, JSON.stringify(userPractitionerDetail), this.httpOptions)
// The backend returned an unsuccessful response code. .toPromise().then(response => {
// The response body may contain clues as to what went wrong, return response;
console.error( });
`Backend returned code ${error.status}, ` +
`body was: ${error.error}`);
} }
// return an observable with a user-facing error message
return throwError(
'Something bad happened; please try again later.');
};
} }
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