Skip to content

Y
ydLife
Commit f7bfc4f0 by Sweet Zhang
Options

首页优化

parent 519da4cd
Showing with 107 additions and 45 deletions
src/app/app.component.html
<!--The content below is only a placeholder and can be replaced.--> <!--The content below is only a placeholder and can be replaced.-->
<div ydlifeScroll> <div ydlifeScroll>
<router-outlet></router-outlet> <div style="padding-bottom: 49px;">
<router-outlet></router-outlet>
</div>
<ydlife-guide-page *ngIf="shareGuidePageEnable"></ydlife-guide-page> <ydlife-guide-page *ngIf="shareGuidePageEnable"></ydlife-guide-page>
<ydlife-alert *ngIf="isNeedAlert" [dialogInfo]="dialogInfo" (popInfo)="getPopInfo()"></ydlife-alert> <ydlife-alert *ngIf="isNeedAlert" [dialogInfo]="dialogInfo" (popInfo)="getPopInfo()"></ydlife-alert>
<div class="returnIndexBox" *ngIf="isShowIndexBtn" appDrag [routerLink]="'/'"> <!-- <div class="returnIndexBox" *ngIf="isShowIndexBtn" appDrag [routerLink]="'/'">
<div><i class="iconfont icon-shouye"></i></div> <div><i class="iconfont icon-shouye"></i></div>
<div>首页</div> <div>首页</div>
</div> </div> -->
<div class="questionContainer" id="menuContainer" *ngIf="iconShowFlag" appDrag> <div class="questionContainer" id="menuContainer" *ngIf="iconShowFlag" appDrag>
<div style="position: relation;" *ngIf="askIconFlag"> <div style="position: relation;" *ngIf="askIconFlag">
<div [routerLink]="'/underwriting_knowledge'"> <div [routerLink]="'/underwriting_knowledge'">
...@@ -15,4 +17,15 @@ ...@@ -15,4 +17,15 @@
<div class="closeIcon" (click)="close()">X</div> <div class="closeIcon" (click)="close()">X</div>
</div> </div>
</div> </div>
<footer>
<ul>
<li *ngFor="let item of menuLists" (click)="menuSelect(item)">
<div>
<img [src]="'./assets/images/indexIcons/'+item.icon + (selectedMenuKey===item.key ? 'Activated' : 'Inactivated') + '.png'" alt="" srcset="">
</div>
<div>{{item.name}}</div>
</li>
</ul>
</footer>
</div> </div>
\ No newline at end of file
src/app/app.component.scss
...@@ -31,4 +31,32 @@ ...@@ -31,4 +31,32 @@
&#menuContainer{ &#menuContainer{
transition: all 0.5s ease-out; transition: all 0.5s ease-out;
} }
} }
\ No newline at end of file footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 49px;
border-top: 1px solid #f5f5f5;
background: #fff;
color: #333;
font-size: 12px;
min-width: 320px;
max-width: 640px;
margin:0 auto;
ul{
display: flex;
align-items: center;
justify-content: space-around;
li{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
>div:first-child{
width: 30px;
}
}
}
}
\ No newline at end of file
src/app/app.component.ts
...@@ -36,7 +36,18 @@ export class AppComponent implements OnInit, OnDestroy { ...@@ -36,7 +36,18 @@ export class AppComponent implements OnInit, OnDestroy {
} }
public menuLists = [
{key:1,name:'首页',icon:'index',link:'/'},
{key:2,name:'产品库',icon:'product',link:'/product'},
{key:3,name:'日程',icon:'schedule',link:'/todo'},
{key:4,name:'我的',icon:'mine',link:'/mine'},
]
public selectedMenuKey:number=1;
// 点击底部菜单
menuSelect(item){
this.selectedMenuKey = item.key;
this.router.navigate([item.link]);
}
...@@ -56,6 +67,18 @@ export class AppComponent implements OnInit, OnDestroy { ...@@ -56,6 +67,18 @@ export class AppComponent implements OnInit, OnDestroy {
// 控制首页浮标显示与否 // 控制首页浮标显示与否
this.isShowIndexBtn = event.url != '/login'; this.isShowIndexBtn = event.url != '/login';
this.iconShowFlag = !!localStorage.getItem('lifeCustomerInfo'); this.iconShowFlag = !!localStorage.getItem('lifeCustomerInfo');
// 更新底部图标状态
if(event.url.indexOf('/product')===0){
this.selectedMenuKey = 2
}else if(event.url.indexOf('/todo')===0){
this.selectedMenuKey = 3
}else if(event.url == '/'){
this.selectedMenuKey = 1
}else if(event.url.indexOf('/mine')===0){
this.selectedMenuKey = 4
}else{
this.selectedMenuKey = 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';
import {Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {ToastService } from 'ng-zorro-antd-mobile'; import {ToastService } from 'ng-zorro-antd-mobile';
import { Plans } from '../../domain/plans'; import { Plans } from '../../domain/plans';
import { LocalStorage } from '../../domain/local.storage'; import { LocalStorage } from '../../domain/local.storage';
...@@ -24,18 +24,24 @@ export class ProductComponent implements OnInit { ...@@ -24,18 +24,24 @@ export class ProductComponent implements OnInit {
rightIds:Array<any> = []; rightIds:Array<any> = [];
rightTagIds:Array<any> = []; rightTagIds:Array<any> = [];
topAndright:Array<any> = []; topAndright:Array<any> = [];
queryName:string;
constructor(private myService: MyService, constructor(private myService: MyService,
public lifeCommonService: LifeCommonService, public lifeCommonService: LifeCommonService,
private router: Router, private router: Router,
private _toast: ToastService, private _toast: ToastService,
private route:ActivatedRoute,
private ls: LocalStorage) { private ls: LocalStorage) {
} }
ngOnInit() { ngOnInit() {
this.lifeCommonService.setTitle('产品库'); this.lifeCommonService.setTitle('产品库');
this.tagViewQuery(305); this.tagViewQuery(305,true);
this.tagViewQuery(309); this.tagViewQuery(309,true);
this.queryName = this.route.snapshot.params['queryName'];
}
clear() {
this.queryName = '';
} }
//type:1表示左侧筛选2表示右侧筛选 //type:1表示左侧筛选2表示右侧筛选
...@@ -72,7 +78,7 @@ export class ProductComponent implements OnInit { ...@@ -72,7 +78,7 @@ export class ProductComponent implements OnInit {
} }
//type：305左侧，309上侧，306筛选 //type：305左侧，309上侧，306筛选
tagViewQuery(type) { tagViewQuery(type,isFirstSearch=false) {
const param = { const param = {
isActive: 1, isActive: 1,
tagViewType: type tagViewType: type
...@@ -82,7 +88,16 @@ export class ProductComponent implements OnInit { ...@@ -82,7 +88,16 @@ export class ProductComponent implements OnInit {
if (type == 305) { if (type == 305) {
this.leftList = res['data']['tagViewQueryInfos']; this.leftList = res['data']['tagViewQueryInfos'];
//初始化查推荐产品 //初始化查推荐产品
this.switchCategory(1,this.leftList[0]) if(isFirstSearch){
if(this.queryName){
this.switchCategory(1,null);
}else{
this.switchCategory(1,this.leftList[0])
}
}else{
this.switchCategory(1,this.leftList[0])
}
} else if (type == 309) { } else if (type == 309) {
this.topList = res['data']['tagViewQueryInfos']; this.topList = res['data']['tagViewQueryInfos'];
} else { } else {
...@@ -121,7 +136,7 @@ export class ProductComponent implements OnInit { ...@@ -121,7 +136,7 @@ export class ProductComponent implements OnInit {
this.router.navigate(['/productData', productInfoItem.productId],{queryParams:{planId:productInfoItem.planId}}); this.router.navigate(['/productData', productInfoItem.productId],{queryParams:{planId:productInfoItem.planId}});
} }
//根据标签查询产品 //根据标签或名字查询产品
queryProductBox(){ queryProductBox(){
this.rightTagIds=[]; this.rightTagIds=[];
if(this.rightIds.length){ if(this.rightIds.length){
...@@ -138,7 +153,7 @@ export class ProductComponent implements OnInit { ...@@ -138,7 +153,7 @@ export class ProductComponent implements OnInit {
} }
} }
let tagIds = this.tagIds.concat(this.rightTagIds) let tagIds = this.tagIds.concat(this.rightTagIds)
this.myService.queryProductBox({tagIds:tagIds}).subscribe((res)=>{ this.myService.queryProductBox({tagIds:tagIds,queryName:this.queryName}).subscribe((res)=>{
if(res['success']){ if(res['success']){
this.productInfos = res['data']['productInfos']; this.productInfos = res['data']['productInfos'];
//截取两个特色 //截取两个特色
......
src/app/my/todo-list/todo-list.component.scss
...@@ -145,8 +145,8 @@ ul,ol{ ...@@ -145,8 +145,8 @@ ul,ol{
color: #fff; color: #fff;
text-align: center; text-align: center;
line-height: 50px; line-height: 50px;
bottom: 4%; bottom: 8%;
right: 8%; right: 4%;
z-index: 100; z-index: 100;
.iconfont{ .iconfont{
font-size: 30px; font-size: 30px;
......
src/styles.scss
...@@ -13,8 +13,7 @@ html, body { ...@@ -13,8 +13,7 @@ html, body {
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
background: #fff; background: #F5F5F5;
// -webkit-text-size-adjust: 100% !important;
} }
ol, ul { ol, ul {
...@@ -153,33 +152,6 @@ input::placeholder { ...@@ -153,33 +152,6 @@ input::placeholder {
background-color: transparent; background-color: transparent;
} }
} }
footer{
width: 100%;
background: #C81B1E;
color: #fff;
font-size: 18px;
font-weight: bold;
border-radius: 4px;
height: 40px;
line-height: 40px;
text-align: center;
margin: 0 auto;
margin-top: 15px;
}
footer.fixed{
min-width: 320px;
max-width: 640px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 56px;
line-height: 56px;
border-radius: 0;
z-index: 0;
margin: 0 auto;
}
.page_mark{ .page_mark{
width: 40px; width: 40px;
height: 20px; height: 20px;
...@@ -299,4 +271,13 @@ footer.fixed{ ...@@ -299,4 +271,13 @@ footer.fixed{
} }
html:not([data-scale]) .am-list-item:not(:last-child) .am-list-line::after{ html:not([data-scale]) .am-list-item:not(:last-child) .am-list-line::after{
background-color: #f9f9f9; background-color: #f9f9f9;
}
.indexSearchBar{
.am-search{
margin: 0 15px;
background-color: transparent;
}
.am-search-input{
border-radius: 26px;
}
} }
\ 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