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 @@
"version": "0.0.0",
"scripts": {
"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",
"buildStage": "ng build -c=stage --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';
import { SalaryDetailComponent } from './salary-detail/salary-detail.component';
import { SalaryFirstYearComponent } from './salary-first-year/salary-first-year.component';
import { ProductComponent } from './product/product.component';
import {ProductDataComponent} from "./product-data/product-data.component";
const myRoutes: Routes = [
......@@ -117,7 +118,8 @@ const myRoutes: Routes = [
{ path: 'article_read/:id',component:ArticleReadComponent,canActivate:[AuthGuard]},
{ path: 'salary_detail',component:SalaryDetailComponent,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({
......
src/app/my/my.module.ts
......@@ -68,9 +68,10 @@ import { SalaryDetailComponent } from './salary-detail/salary-detail.component';
import { SalaryFirstYearComponent } from './salary-first-year/salary-first-year.component';
import { DetailModalComponent } from '../common/detail-modal/detail-modal.component';
import { ProductComponent } from './product/product.component';
import { ProductDataComponent } from './product-data/product-data.component';
@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: [
CommonModule,
LifeCommonModule,
......
src/app/my/order-detail/order-detail.component.html
......@@ -110,7 +110,7 @@
</li>
<li class="list-group-item" *ngIf="this.insured?.birthDay">
<span>出生日期</span>
<span>{{ '****-'+this.insured?.birthDay.substr(5)}}</span>
<span>{{this.insured?.birthDay}}</span>
</li>
<li class="list-group-item" *ngIf="insured?.idInfo?.idType">
<span>证件类型</span>
......@@ -160,8 +160,8 @@
<span style="color: #c9af71;">佣金</span>
<span class="light-color">￥{{policyInfo?.referralInfo?.referralAmount | number:'1.2-2'}}</span>
</li>
</ul>
</div>
</div>
</div>
\ No newline at end of file
</div>
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 @@
{{topItem.tagName}}
<span class="iconfont icon-xiangxia"></span>
</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>
</div>
</div>
......
src/app/my/product/product.component.scss
.scrollContainer{
.scrollContainer {
height: 100%;
.issueContainer {
display: flex;
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;
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%;
.left {
width: 90px;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
background:#F6F6F6;
li {
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 43px;
line-height: 43px;
text-align: center;
padding: 20px 0 20px 10px;
> li {
margin-bottom: 15px;
h5 {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
li:before {
content: "";
display: block;
position: absolute;
left: 22px;
top: 42px;
width: 60%;
// height: 1px;
background: rgba(220, 220, 220, 0.4);
.optionLists {
display: flex;
width: 100%;
flex-wrap: wrap;
> div {
margin-right: 10px;
flex: 1;
background: #ececec;
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 {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 4px;
height: 50%;
font-size: 0;
background-color: #F16A5D;
margin: auto 0;
.featureContent {
display: flex;
margin-bottom: 10px;
> div {
padding: 6px;
background: #FCF2F1;
color: #F16A5D;
border-radius: 3px;
margin-right: 6px;
}
}
}
.right {
width: 100%;
.right_header{
display: flex;
padding: 0 15px;
width: 100%;
height: 44px;
justify-content: space-between;
align-items: center;
color: #333;
border-bottom: 1px #f5f5f5 solid;
.iconfont{
color: #666;
font-size: 10px;
}
.insuranceRulesContent {
}
.priceContent {
strong {
color: #F16A5D;
font-size: 20px;
margin-right: 3px;
}
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;
}
}
}
}
}
}
\ No newline at end of file
.slowRight {
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 { LifeCommonService } from '../../common/life-common.service';
import { MyService } from '../../my/my.service';
import { MyService } from '../../my/my.service';
@Component({
selector: 'ydlife-product',
......@@ -12,12 +12,14 @@ export class ProductComponent implements OnInit {
topList:Array<any>;
rightList:Array<any>;
leftSelectedId:number = null;
filterSelectedFlag:boolean = false;
constructor(private myService:MyService,public lifeCommonService:LifeCommonService) { }
ngOnInit() {
this.lifeCommonService.setTitle('产品库');
this.tagViewQuery(2);
this.tagViewQuery(6);
this.tagViewQuery(305);
this.tagViewQuery(309);
this.tagViewQuery(306);
// this.leftList = [
// {name:'全部',tagId:null},
// {name:'推荐',tagId:1},
......@@ -38,7 +40,7 @@ export class ProductComponent implements OnInit {
this.leftSelectedId = id;
}
//type：2左侧，6上侧，3筛选
//type：305左侧，309上侧，306筛选
tagViewQuery(type){
const param = {
isActive:1,
......@@ -46,15 +48,19 @@ export class ProductComponent implements OnInit {
}
this.myService.tagViewQuery(param).subscribe((res)=>{
if(res['success']){
if(type == 2){
if(type == 305){
this.leftList = res['data']['tagViewQueryInfos'];
}else if(type == 6){
this.topList = res['data']['tagViewQueryInfos']
}else if(type == 309){
this.topList = res['data']['tagViewQueryInfos'];
}else{
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