Skip to content

A
allCampaign
Commit 1ac68250 by Sweet Zhang
Options

更新经纪人查询页面

parent a886cabf
Showing with 257 additions and 179 deletions
brokerQry/.angular-cli.json 0 → 100644
{
"$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": {}
}
}
brokerQry/angular.json
......@@ -27,7 +27,9 @@
"src/styles.css"
],
"scripts": [],
"es5BrowserSupport": true
"es5BrowserSupport": true,
"baseHref": "/brokerQry/",
"deployUrl": "/brokerQry/"
},
"configurations": {
"production": {
......@@ -53,6 +55,24 @@
"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"
}
]
}
}
},
......
brokerQry/package.json
{
"name": "broker-qry",
"name": "angular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
......
brokerQry/src/app/app-routing.module.ts
......@@ -5,9 +5,9 @@ import {BrokerQryComponent} from './broker-qry/broker-qry.component';
import {BrokerDetailComponent} from './broker-detail/broker-detail.component';
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}
];
@NgModule({
......
brokerQry/src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrokerQryComponent } from './broker-qry/broker-qry.component';
import { BrokerDetailComponent } from './broker-detail/broker-detail.component';
import { MobileNoFormatPipe } from './mobile-no-format.pipe';
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {BrokerQryComponent} from './broker-qry/broker-qry.component';
import {BrokerDetailComponent} from './broker-detail/broker-detail.component';
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({
declarations: [
......@@ -16,9 +20,12 @@ import { MobileNoFormatPipe } from './mobile-no-format.pipe';
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
AppRoutingModule
],
providers: [],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}, EventBusService],
bootstrap: [AppComponent]
})
export class AppModule { }
export class AppModule {
}
brokerQry/src/app/broker-detail/broker-detail.component.css
......@@ -24,7 +24,7 @@
}
.basicInfo .basicInfoWrapper {
width: 50%;
width: 75%;
}
.cerPhoto {
......@@ -44,7 +44,7 @@
.basicInfo .basicInfoWrapper > div > strong {
display: inline-block;
width: 60%;
width: 35%;
margin-right: 10px;
}
......@@ -54,18 +54,36 @@
align-content: space-between;
}
.honorList > div {
display: flex;
flex-direction: column;
align-items: center;
}
.honorList > div > img {
height: 100px;
margin-bottom: 5px;
}
.bioIntro {
text-align: justify;
}
.contactList > div {
width: 30%;
display: flex;
align-items: center;
}
.contactList > div > strong {
margin-right: 10px;
}
.contact .contactList .icon {
width: 30px;
margin-right: 10px;
}
.lifePhoto .lifePhotoList {
display: flex;
}
......@@ -129,14 +147,27 @@ footer {
width: 100%;
}
.practitionerRegNo {
font-size: 12px;
}
.cerPhoto {
width: 80px;
}
.contact .contactList {
flex-direction: column;
}
.contact .contactList .icon {
width: 25px;
}
.contact .contactList > div {
width: 100%;
height: 28px;
line-height: 28px;
margin-bottom: 12px;
}
.eqrocde > div {
......
brokerQry/src/app/broker-detail/broker-detail.component.html
<div class="container">
<div class="wrapper">
<h1 class="text-center">
<img src="assets/images/ydinsurance_logo.jpg" alt="">
<img src="assets/images/ydinsurance_logo.png" alt="">
</h1>
<!--经纪人基本信息-->
<section class="basicInfo flex-center">
<div class="basicInfoWrapper">
<div class="name">
<strong>姓名</strong>
<span>张三</span>
<span>{{userPractitionerInfo?.name}}</span>
</div>
<div class="practitionerRegNoWrapper">
<strong>执业编号</strong>
<span>##12345678##</span>
<span class="practitionerRegNo">{{userPractitionerInfo?.practitionerRegNo}}</span>
</div>
<div class="effectiveEndDateWrapper">
<strong>有效截至日期</strong>
<span>2020-02-02</span>
<span>{{userPractitionerInfo?.effectiveEndDate}}</span>
</div>
<div class="areaWrapper">
<strong>所属区域</strong>
<span>江苏省南京市</span>
<span>{{userPractitionerInfo?.provinceName}}{{userPractitionerInfo?.cityName}}</span>
</div>
</div>
<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>
</section>
<!--经纪人荣誉-->
<section class="honor">
<section class="honor" *ngIf="certificateList && certificateList.length>0">
<h4>荣誉</h4>
<div class="honorList">
<div *ngFor="let honorList of hornorLists">
<img src="{{honorList.path}}" alt="{{honorList.certName}}">
<div *ngFor="let certificateItem of certificateList">
<img src="{{certificateItem.imagePath}}" alt="{{certificateItem.certName}}">
<span>{{certificateItem.certName}}</span>
</div>
</div>
</section>
<!--自我简介-->
<section class="bioIntro">
<section class="bioIntro" *ngIf="userPractitionerInfo?.bioIntro">
<h4>自我简介</h4>
<p>
如果我办得到，我一定把“保险”这两个字写在家家户户的门上，每一个公务员的手册上，以及每个公司的章程上。因为我深信通过保险，每一个家庭，每一个公务员，每一个团体，只要付出微小的代价，就可以免遭万劫不复的
{{userPractitionerInfo?.bioIntro}}
</p>
</section>
<!--联系方式-->
<section class="contact">
<h4>联系方式</h4>
<div class="contactList">
<div>
<strong>手机号:</strong>
<span>13000000000</span>
<div *ngIf="userPractitionerInfo?.mobileNo">
<div class="icon">
<img src="assets/images/phone.png" alt="手机" class="img-responsive">
</div>
<span><a href="tel:{{userPractitionerInfo?.mobileNo}}">{{userPractitionerInfo?.mobileNo}}</a></span>
</div>
<div>
<strong>微信号:</strong>
<span>13000000000</span>
<div *ngIf="userPractitionerInfo?.wechatId">
<div class="icon">
<img src="assets/images/wx.png" alt="微信" class="img-responsive">
</div>
<span>{{userPractitionerInfo?.wechatId}}</span>
</div>
<div>
<strong>QQ号:</strong>
<span>13000000000</span>
<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>
</section>
<!--生活照片-->
<section class="lifePhoto">
<section class="lifePhoto" *ngIf="lifePhotoList && lifePhotoList.length>0">
<h4>生活照片</h4>
<div class="lifePhotoList">
<div class="mainPhoto">
<img src="https://yindun-images.oss-cn-shanghai-finance-1-pub.aliyuncs.com/broker/1/20190321205635.jpg" alt="" class="img-responsive">
<div class="mainPhoto" *ngFor="let lifePhotoItem of lifePhotoList.slice(0,1);">
<img src="{{lifePhotoItem.lifePhotoFilePath}}" alt="" class="img-responsive">
</div>
<div class="subPhoto">
<img src="https://yindun-images.oss-cn-shanghai-finance-1-pub.aliyuncs.com/broker/1/20190321205659.jpg" alt="" class="img-responsive">
<div class="subPhoto" *ngFor="let lifePhotoItem of lifePhotoList.slice(1);">
<img src="{{lifePhotoItem.lifePhotoFilePath}}" alt="" class="img-responsive">
</div>
</div>
</section>
<!--尾部-->
<footer>
<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.zuihuibi.cn/wp-content/uploads/2018/07/qrcode_zuihuibi.jpg" alt="" class="img-responsive"></div>
<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.zuihuibi.cn/wp-content/uploads/2018/07/qrcode_zuihuibi.jpg" alt=""
class="img-responsive"></div>
</div>
<div class="text-center" style="padding-top: 15px;font-size: 10px">上海银盾保险经纪有限公司</div>
</footer>
......
brokerQry/src/app/broker-detail/broker-detail.component.ts
import {Component, OnInit} from '@angular/core';
import {EventBusService} from '../event-bus.service';
import {ActivatedRoute} from '@angular/router';
@Component({
selector: 'app-broker-detail',
......@@ -6,40 +8,30 @@ import {Component, OnInit} from '@angular/core';
styleUrls: ['./broker-detail.component.css']
})
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() {
// 荣誉列表
this.hornorLists = [{
id: '1',
certName: 'RFC',
path: 'https://yindun-images.oss-cn-shanghai-finance-1-pub.aliyuncs.com/broker/cert/rfc.png'
},
{
id: '2',
certName: '人身保险经纪人',
path: 'https://yindun-images.oss-cn-shanghai-finance-1-pub.aliyuncs.com/broker/cert/human.png'
},
{
id: '3',
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'
}];
this.practitionerId = this.activatedRoute.snapshot.params['id'];
this.userPractitionerDetailQuery();
}
userPractitionerDetailQuery() {
const practitionerId = {
practitionerId: this.practitionerId
};
this.eventBusService.userPractitionerDetailQuery(practitionerId).then(res => {
if (res['success']) {
this.userPractitionerInfo = res['data'];
this.certificateList = this.userPractitionerInfo.certificateList;
this.lifePhotoList = this.userPractitionerInfo.lifePhotoList;
}
});
}
}
brokerQry/src/app/broker-qry/broker-qry.component.css
......@@ -57,7 +57,7 @@
}
.queryItem > div {
width: 60%;
width: 100%;
}
.mResultContainer .media-left {
......
brokerQry/src/app/broker-qry/broker-qry.component.html
......@@ -12,49 +12,29 @@
<div class="col-md-8 col-sm-12 queryItem">
<div class="input-group brokerName">
<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 class="col-md-4 col-sm-12">
<div class="search">查询</div>
<div class="search" (click)="userPractitionerQuery()">查询</div>
</div>
</div>
</div>
</div>
<!-- 查询结果-->
<div class="resultContainer">
<!-- <div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>操作</th>
<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="mResultContainer" *ngIf="userPractitionerQueryItemList && userPractitionerQueryItemList.length <1">
暂无结果
</div>
<div class="mResultContainer" *ngIf="userPractitionerQueryItemList">
<div class="media" *ngFor="let userPractitionerQueryItem of userPractitionerQueryItemList">
<div class="media-body">
<div><strong>姓名</strong><span>{{brokerList.name}}</span></div>
<div><strong>执业编号</strong><span>{{brokerList.practitionerRegNo}}</span></div>
<div><strong>所属区域</strong><span>{{brokerList.area}}</span></div>
<div><strong>手机号</strong><span>{{brokerList.mobileNo | mobileNoFormat}}</span></div>
<div><a class="viewDetail" (click)="viewDetail(brokerList.id)">查看</a></div>
<div><strong>姓名</strong><span>{{userPractitionerQueryItem.name}}</span></div>
<div><strong>执业编号</strong><span>{{userPractitionerQueryItem.practitionerRegNo}}</span></div>
<div><strong>所属区域</strong><span>{{userPractitionerQueryItem.provinceName}}{{userPractitionerQueryItem.cityName}}</span>
</div>
<div><strong>手机号</strong><span>{{userPractitionerQueryItem.mobileNo | mobileNoFormat}}</span></div>
<div><a class="viewDetail" (click)="viewDetail(userPractitionerQueryItem.id)">查看</a></div>
</div>
</div>
</div>
......
brokerQry/src/app/broker-qry/broker-qry.component.ts
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({
selector: 'app-broker-qry',
......@@ -8,52 +8,25 @@ import {Router} from "@angular/router";
styleUrls: ['./broker-qry.component.css']
})
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() {
// 假数据
this.brokerLists = [
{
}
id: '1',
name: '张三',
practitionerRegNo: '12345678912345',
effectiveEndDate: '2001-02-02',
area: '上海',
mobileNo: '13000000000'
}, {
id: '2',
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'
},
];
// 经纪人查询
userPractitionerQuery() {
const userPractitioner = {
name: this.practitionerName
};
this.eventBusService.userPractitionerQuery(userPractitioner).then(res => {
if (res['success']) {
this.userPractitionerQueryItemList = res['data'].userPractitionerQueryItemList;
}
});
}
// 经纪人详情信息查询
......
brokerQry/src/app/event-bus.service.ts
import {Injectable} from '@angular/core';
import {environment} from './../environments/environment';
import {HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
import {HttpClient, HttpHeaders} from '@angular/common/http';
@Injectable()
export class EventBusService {
private USER_API_URL = '';
private httpOptions;
constructor(private http: HttpClient) {
this.USER_API_URL = environment.apiUrl;
this.httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'X-Authorization': ''
})
};
}
/**
......@@ -21,33 +24,33 @@ export class EventBusService {
const ticketObj = {
ticket: 'brokerQry'
};
return this.http.post(url, JSON.stringify(ticketObj),{ observe: 'response' })
.pipe(
response => {
return response;
}
);
return this.http.post(url, JSON.stringify(ticketObj), this.httpOptions).toPromise();
}
/**
* 经纪人查询
*/
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) {
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', error.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
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.');
};
async userPractitionerDetailQuery(userPractitionerDetail) {
const url = this.USER_API_URL + '/user/userPractitionerDetailQuery';
const res = await this.obtainToken();
this.httpOptions.headers = this.httpOptions.headers.set('X-Authorization', res['data']['token'])
return this.http.post(url, JSON.stringify(userPractitionerDetail), this.httpOptions)
.toPromise().then(response => {
return response;
});
}
}
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