Skip to content

Y
ydLife
Commit ecea6eb3 by Sweet Zhang
Options

产品介绍

parent 566c09cc
Showing with 430 additions and 75 deletions
package.json
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
"version": "0.0.0", "version": "0.0.0",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve --host 192.168.1.25 --port 4205", "start": "ng serve --host 0.0.0.0 --port 4205 -o",
"buildDev": "ng build -c=dev --prod", "buildDev": "ng build -c=dev --prod",
"buildStage": "ng build -c=stage --prod", "buildStage": "ng build -c=stage --prod",
"buildProd": "ng build -c=production --prod", "buildProd": "ng build -c=production --prod",
......
src/app/my/my-routing.module.ts
...@@ -55,6 +55,7 @@ import { ArticleReadComponent } from './article-read/article-read.component'; ...@@ -55,6 +55,7 @@ import { ArticleReadComponent } from './article-read/article-read.component';
import { SalaryDetailComponent } from './salary-detail/salary-detail.component'; import { SalaryDetailComponent } from './salary-detail/salary-detail.component';
import { SalaryFirstYearComponent } from './salary-first-year/salary-first-year.component'; import { SalaryFirstYearComponent } from './salary-first-year/salary-first-year.component';
import { ProductComponent } from './product/product.component'; import { ProductComponent } from './product/product.component';
import {ProductDataComponent} from "./product-data/product-data.component";
const myRoutes: Routes = [ const myRoutes: Routes = [
...@@ -117,7 +118,8 @@ const myRoutes: Routes = [ ...@@ -117,7 +118,8 @@ const myRoutes: Routes = [
{ path: 'article_read/:id',component:ArticleReadComponent,canActivate:[AuthGuard]}, { path: 'article_read/:id',component:ArticleReadComponent,canActivate:[AuthGuard]},
{ path: 'salary_detail',component:SalaryDetailComponent,canActivate:[AuthGuard]}, { path: 'salary_detail',component:SalaryDetailComponent,canActivate:[AuthGuard]},
{ path: 'salary_detail/:id',component:SalaryFirstYearComponent,canActivate:[AuthGuard]}, { path: 'salary_detail/:id',component:SalaryFirstYearComponent,canActivate:[AuthGuard]},
{ path: 'product',component:ProductComponent,canActivate:[AuthGuard]} { path: 'product',component:ProductComponent,canActivate:[AuthGuard]},
{ path: 'productData',component:ProductDataComponent,canActivate:[AuthGuard]},
]; ];
@NgModule({ @NgModule({
......
src/app/my/my.module.ts
...@@ -68,9 +68,10 @@ import { SalaryDetailComponent } from './salary-detail/salary-detail.component'; ...@@ -68,9 +68,10 @@ import { SalaryDetailComponent } from './salary-detail/salary-detail.component';
import { SalaryFirstYearComponent } from './salary-first-year/salary-first-year.component'; import { SalaryFirstYearComponent } from './salary-first-year/salary-first-year.component';
import { DetailModalComponent } from '../common/detail-modal/detail-modal.component'; import { DetailModalComponent } from '../common/detail-modal/detail-modal.component';
import { ProductComponent } from './product/product.component'; import { ProductComponent } from './product/product.component';
import { ProductDataComponent } from './product-data/product-data.component';
@NgModule({ @NgModule({
declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, MyToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent, AddTaskComponent, MedicalServiceComponent, InvitationComponent, RegisterComponent, EmployeeInfoComponent, EmployeeBasicInfoComponent, WorkExperienceComponent, PersonalPhotosComponent, EmployeeIdCardComponent, EmployeeEducationComponent, PersonalStatementComponent, SignatureComponent, EmployeeSubmitComponent, BankCardComponent, MemberDetailComponent, ApprovalListComponent, ApprovalCommentsComponent, ApprovalResultListComponent, MyApplicationComponent, SuggestionComponent, EmployeeSalaryComponent, HistoricalRankComponent, TeamAreaPanelComponent, ArticleComponent, ArticleDetailComponent, ArticleReadComponent,SalaryDetailComponent,SalaryFirstYearComponent,DetailModalComponent, ProductComponent], declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, MyToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent, AddTaskComponent, MedicalServiceComponent, InvitationComponent, RegisterComponent, EmployeeInfoComponent, EmployeeBasicInfoComponent, WorkExperienceComponent, PersonalPhotosComponent, EmployeeIdCardComponent, EmployeeEducationComponent, PersonalStatementComponent, SignatureComponent, EmployeeSubmitComponent, BankCardComponent, MemberDetailComponent, ApprovalListComponent, ApprovalCommentsComponent, ApprovalResultListComponent, MyApplicationComponent, SuggestionComponent, EmployeeSalaryComponent, HistoricalRankComponent, TeamAreaPanelComponent, ArticleComponent, ArticleDetailComponent, ArticleReadComponent,SalaryDetailComponent,SalaryFirstYearComponent,DetailModalComponent, ProductComponent, ProductDataComponent],
imports: [ imports: [
CommonModule, CommonModule,
LifeCommonModule, LifeCommonModule,
......
src/app/my/order-detail/order-detail.component.html
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
</li> </li>
<li class="list-group-item" *ngIf="this.insured?.birthDay"> <li class="list-group-item" *ngIf="this.insured?.birthDay">
<span>出生日期</span> <span>出生日期</span>
<span>{{ '****-'+this.insured?.birthDay.substr(5)}}</span> <span>{{this.insured?.birthDay}}</span>
</li> </li>
<li class="list-group-item" *ngIf="insured?.idInfo?.idType"> <li class="list-group-item" *ngIf="insured?.idInfo?.idType">
<span>证件类型</span> <span>证件类型</span>
...@@ -160,8 +160,8 @@ ...@@ -160,8 +160,8 @@
<span style="color: #c9af71;">佣金</span> <span style="color: #c9af71;">佣金</span>
<span class="light-color">￥{{policyInfo?.referralInfo?.referralAmount | number:'1.2-2'}}</span> <span class="light-color">￥{{policyInfo?.referralInfo?.referralAmount | number:'1.2-2'}}</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
src/app/my/product-data/product-data.component.html 0 → 100644
<div class="productDataContainer">
<div class="productPoster">
<h3>产品海报</h3>
<div>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="productDataContent">
<h3>产品资料</h3>
<div>
<ul>
<li *ngFor="let productDataMenuItem of productDataMenuLists">
<div>
<img src="./assets/images/productData/{{productDataMenuItem['iconPath']}}" alt="">
</div>
<div>{{productDataMenuItem.name}}</div>
</li>
</ul>
</div>
</div>
</div>
src/app/my/product-data/product-data.component.scss 0 → 100644
.productDataContainer{
padding:15px;
.productDataContent {
h3{
color: #444;
font-size: 18px;
font-weight: 400;
}
ul {
display: flex;
flex-wrap: wrap;
li {
flex: 1;
max-width: 25%;
text-align: center;
min-width: 25%;
margin-bottom: 15px;
display: flex;
flex-direction: column;
align-items: center;
>div:first-child{
width:35px;
height: 35px;
}
}
}
}
}
src/app/my/product-data/product-data.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProductDataComponent } from './product-data.component';
describe('ProductDataComponent', () => {
let component: ProductDataComponent;
let fixture: ComponentFixture<ProductDataComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ProductDataComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProductDataComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/my/product-data/product-data.component.ts 0 → 100644
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'ydlife-product-data',
templateUrl: './product-data.component.html',
styleUrls: ['./product-data.component.scss']
})
export class ProductDataComponent implements OnInit {
productDataMenuLists: Array<any>;
constructor() {
// 产品资料菜单
this.productDataMenuLists = [
{id: 1, iconPath: 'comIntro.png', name: '保司介绍', active: 1},
{id: 2, iconPath: 'feature.png', name: '产品特色', active: 1},
{id: 3, iconPath: 'item.png', name: '产品条款', active: 1},
{id: 4, iconPath: 'priceRate.png', name: '费率现价表', active: 1},
{id: 5, iconPath: 'notice.png', name: '投保须知', active: 1},
{id: 6, iconPath: 'markting.png', name: '营销资料', active: 1},
{id: 7, iconPath: 'e-insure.png', name: '微投保资料', active: 1},
{id: 8, iconPath: 'commission.png', name: '公告佣金', active: 1},
{id: 9, iconPath: 'other.png', name: '其它', active: 1}
];
}
ngOnInit() {
}
}
src/app/my/product/product.component.html
...@@ -13,7 +13,123 @@ ...@@ -13,7 +13,123 @@
{{topItem.tagName}} {{topItem.tagName}}
<span class="iconfont icon-xiangxia"></span> <span class="iconfont icon-xiangxia"></span>
</li> </li>
<li>筛选 <img src="assets/images/product_select.png" alt="筛选" style="width: 16px;height:16px;" (click)="tagViewQuery(3)"></li> <li>筛选 <img src="assets/images/product_select.png" alt="筛选" style="width: 16px;height:16px;"
(click)="allFilter()"></li>
</ul>
<div class="mask" *ngIf="filterSelectedFlag" (click)="filterSelectedFlag=false"></div>
<ul class="select_all slowRight" *ngIf="filterSelectedFlag">
<li *ngFor="let rightItem of rightList">
<h5>{{rightItem.tagName}}</h5>
<div class="optionLists">
<div *ngFor="let optItem of rightItem.tagViewQueryInfos">{{optItem.tagName}}</div>
</div>
</li>
</ul>
<ul class="productLists">
<li>
<div class="productInfoContent">
<h3>京东安联滑雪运动保障计划</h3>
<div class="featureContent">
<div>续保至99周岁</div>
<div>200万保额0免赔</div>
</div>
<div class="insuranceRulesContent">
<p>投保年龄：20-50周岁</p>
<p>投保期限：1年</p>
</div>
<div class="priceContent">
<span>￥</span><strong>48</strong><span>元起 | 每人每年</span>
</div>
</div>
<div class="dataContent">
<div>资料</div>
<div>可售</div>
</div>
</li>
<li>
<div class="productInfoContent">
<h3>京东安联滑雪运动保障计划</h3>
<div class="featureContent">
<div>续保至99周岁</div>
<div>200万保额0免赔</div>
</div>
<div class="insuranceRulesContent">
<p>投保年龄：20-50周岁</p>
<p>投保期限：1年</p>
</div>
<div class="priceContent">
<span>￥</span><strong>48</strong><span>元起 | 每人每年</span>
</div>
</div>
<div class="dataContent">
<div>资料</div>
<div>可售</div>
</div>
</li>
<li>
<div class="productInfoContent">
<h3>京东安联滑雪运动保障计划</h3>
<div class="featureContent">
<div>续保至99周岁</div>
<div>200万保额0免赔</div>
</div>
<div class="insuranceRulesContent">
<p>投保年龄：20-50周岁</p>
<p>投保期限：1年</p>
</div>
<div class="priceContent">
<span>￥</span><strong>48</strong><span>元起 | 每人每年</span>
</div>
</div>
<div class="dataContent">
<div>资料</div>
<div>可售</div>
</div>
</li>
<li>
<div class="productInfoContent">
<h3>京东安联滑雪运动保障计划</h3>
<div class="featureContent">
<div>续保至99周岁</div>
<div>200万保额0免赔</div>
</div>
<div class="insuranceRulesContent">
<p>投保年龄：20-50周岁</p>
<p>投保期限：1年</p>
</div>
<div class="priceContent">
<span>￥</span><strong>48</strong><span>元起 | 每人每年</span>
</div>
</div>
<div class="dataContent">
<div>资料</div>
<div>可售</div>
</div>
</li>
<li>
<div class="productInfoContent">
<h3>京东安联滑雪运动保障计划</h3>
<div class="featureContent">
<div>续保至99周岁</div>
<div>200万保额0免赔</div>
</div>
<div class="insuranceRulesContent">
<p>投保年龄：20-50周岁</p>
<p>投保期限：1年</p>
</div>
<div class="priceContent">
<span>￥</span><strong>48</strong><span>元起 | 每人每年</span>
</div>
</div>
<div class="dataContent">
<div>资料</div>
<div>可售</div>
</div>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
src/app/my/product/product.component.scss
.scrollContainer{ .scrollContainer {
height: 100%;
.issueContainer {
display: flex;
height: 100%; height: 100%;
.issueContainer { .left {
width: 90px;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
background: #F6F6F6;
position: fixed;
left: 0;
top: 0;
li {
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 43px;
line-height: 43px;
text-align: center;
}
li:before {
content: "";
display: block;
position: absolute;
left: 22px;
top: 42px;
width: 60%;
// height: 1px;
background: rgba(220, 220, 220, 0.4);
}
li.actived {
background-color: #fff;
color: #F16A5D;
}
li.actived:after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 4px;
height: 50%;
font-size: 0;
background-color: #F16A5D;
margin: auto 0;
}
}
.right {
width: calc(100% - 90px);
position: relative;
margin-left: 90px;
.mask {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.right_header {
display: flex; display: flex;
padding: 0 15px;
width: calc(100% - 90px);
height: 44px;
justify-content: space-between;
align-items: center;
color: #333;
border-bottom: 1px #f5f5f5 solid;
position: fixed;
right: 0;
top: 0;
background: #fff;
.iconfont {
color: #666;
font-size: 10px;
}
}
.select_all {
position: absolute;
right: 0;
top: 0;
background: #fff;
width: 100%;
height: 100%; height: 100%;
.left { padding: 20px 0 20px 10px;
width: 90px; > li {
height: 100%; margin-bottom: 15px;
overflow-x: hidden; h5 {
overflow-y: scroll; font-size: 16px;
-webkit-overflow-scrolling: touch; font-weight: bold;
background:#F6F6F6; color: #333;
li { margin-bottom: 10px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 43px;
line-height: 43px;
text-align: center;
} }
li:before { .optionLists {
content: ""; display: flex;
display: block; width: 100%;
position: absolute; flex-wrap: wrap;
left: 22px; > div {
top: 42px; margin-right: 10px;
width: 60%; flex: 1;
// height: 1px; background: #ececec;
background: rgba(220, 220, 220, 0.4); height: 38px;
line-height: 38px;
text-align: center;
margin-bottom: 10px;
min-width: 29%;
max-width: 30%;
}
} }
}
li.actived { }
background-color: #fff; .productLists {
margin-top:44px;
> li {
padding-left: 16px;
border-bottom: 1px solid #dcdcdc;
}
.productInfoContent {
h3 {
font-size: 18px;
color: #444;
font-weight: bold;
padding-top: 14px;
padding-bottom: 8px;
} }
li.actived:after { .featureContent {
content: ""; display: flex;
position: absolute; margin-bottom: 10px;
left: 0; > div {
top: 0; padding: 6px;
bottom: 0; background: #FCF2F1;
right: 0; color: #F16A5D;
width: 4px; border-radius: 3px;
height: 50%; margin-right: 6px;
font-size: 0; }
background-color: #F16A5D;
margin: auto 0;
} }
} .insuranceRulesContent {
.right { }
width: 100%; .priceContent {
.right_header{ strong {
display: flex; color: #F16A5D;
padding: 0 15px; font-size: 20px;
width: 100%; margin-right: 3px;
height: 44px;
justify-content: space-between;
align-items: center;
color: #333;
border-bottom: 1px #f5f5f5 solid;
.iconfont{
color: #666;
font-size: 10px;
}
} }
span {
font-size: 12px;
}
}
}
.dataContent {
display: flex;
justify-content: space-between;
padding-right: 15px;
> div:first-child {
width: 55px;
height: 21px;
text-align: center;
border: 1px solid #F16A5D;
border-radius: 10px;
color: #F16A5D;
font-size: 13px;
}
> div:last-child {
background: #FDF5F4;
color: #F16A5D;
font-size: 12px;
border-radius: 3px;
padding: 5px 6px;
}
} }
} }
}
}
} }
.slowRight {
\ No newline at end of file animation: slowRight .3s ease-in-out both;
}
@keyframes slowRight {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%)
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
src/app/my/product/product.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { LifeCommonService } from '../../common/life-common.service'; import { LifeCommonService } from '../../common/life-common.service';
import { MyService } from '../../my/my.service'; import { MyService } from '../../my/my.service';
@Component({ @Component({
selector: 'ydlife-product', selector: 'ydlife-product',
...@@ -12,12 +12,14 @@ export class ProductComponent implements OnInit { ...@@ -12,12 +12,14 @@ export class ProductComponent implements OnInit {
topList:Array<any>; topList:Array<any>;
rightList:Array<any>; rightList:Array<any>;
leftSelectedId:number = null; leftSelectedId:number = null;
filterSelectedFlag:boolean = false;
constructor(private myService:MyService,public lifeCommonService:LifeCommonService) { } constructor(private myService:MyService,public lifeCommonService:LifeCommonService) { }
ngOnInit() { ngOnInit() {
this.lifeCommonService.setTitle('产品库'); this.lifeCommonService.setTitle('产品库');
this.tagViewQuery(2); this.tagViewQuery(305);
this.tagViewQuery(6); this.tagViewQuery(309);
this.tagViewQuery(306);
// this.leftList = [ // this.leftList = [
// {name:'全部',tagId:null}, // {name:'全部',tagId:null},
// {name:'推荐',tagId:1}, // {name:'推荐',tagId:1},
...@@ -38,7 +40,7 @@ export class ProductComponent implements OnInit { ...@@ -38,7 +40,7 @@ export class ProductComponent implements OnInit {
this.leftSelectedId = id; this.leftSelectedId = id;
} }
//type：2左侧，6上侧，3筛选 //type：305左侧，309上侧，306筛选
tagViewQuery(type){ tagViewQuery(type){
const param = { const param = {
isActive:1, isActive:1,
...@@ -46,15 +48,19 @@ export class ProductComponent implements OnInit { ...@@ -46,15 +48,19 @@ export class ProductComponent implements OnInit {
} }
this.myService.tagViewQuery(param).subscribe((res)=>{ this.myService.tagViewQuery(param).subscribe((res)=>{
if(res['success']){ if(res['success']){
if(type == 2){ if(type == 305){
this.leftList = res['data']['tagViewQueryInfos']; this.leftList = res['data']['tagViewQueryInfos'];
}else if(type == 6){ }else if(type == 309){
this.topList = res['data']['tagViewQueryInfos'] this.topList = res['data']['tagViewQueryInfos'];
}else{ }else{
this.rightList = res['data']['tagViewQueryInfos']; this.rightList = res['data']['tagViewQueryInfos'];
} }
} }
}) })
} }
// 筛选
allFilter(){
this.tagViewQuery(306);
this.filterSelectedFlag = true;
}
} }
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