Skip to content

Y
ydLife
Commit 3de4043d by zeyang
Options

1.增加活动分享页面和活动详情

parent 9349474d
Showing with 524 additions and 372 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>
<div [ngStyle]="{'padding-bottom':isShowIndexBtn ? '70px' : '0'}"> <div [ngStyle]="{'padding-bottom':isShowIndexBtn ? (isShowhead ? '70px':'0') : '0'}">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
<ydlife-guide-page *ngIf="shareGuidePageEnable"></ydlife-guide-page> <ydlife-guide-page *ngIf="shareGuidePageEnable"></ydlife-guide-page>
......
src/app/app.component.ts
...@@ -2,203 +2,211 @@ import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core'; ...@@ -2,203 +2,211 @@ import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
import { AuthService } from "./auth/auth.service"; import { AuthService } from "./auth/auth.service";
import { LifeCommonService } from "./common/life-common.service"; import { LifeCommonService } from "./common/life-common.service";
import { Subscription } from "rxjs/index"; import { Subscription } from "rxjs/index";
import {Router, NavigationStart, ActivatedRoute, NavigationEnd, ActivationEnd} from '@angular/router'; import { Router, NavigationStart, ActivatedRoute, NavigationEnd, ActivationEnd } from '@angular/router';
import { MyService } from './my/my.service'; import { MyService } from './my/my.service';
declare var wx: any; declare var wx : any;
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss']
}) })
export class AppComponent implements OnInit, OnDestroy { export class AppComponent implements OnInit, OnDestroy {
shareGuidePageEnable: boolean; shareGuidePageEnable : boolean;
subscription: Subscription; subscription : Subscription;
currentVersion: any; currentVersion : any;
isNeedAlert: boolean; isNeedAlert : boolean;
dialogInfo: any; dialogInfo : any;
// 是否显示首页浮标 // 是否显示首页浮标
isShowIndexBtn: boolean; isShowIndexBtn : boolean;
loginId:any; loginId : any;
// 提问icon显示隐藏 // 提问icon显示隐藏
askIconFlag:boolean = true; askIconFlag : boolean = true;
iconShowFlag:boolean = true; iconShowFlag : boolean = true;
// 0是未看 1是已看
viewStatus:number; isShowhead : boolean = true;
lifeCustomerInfo:any;
constructor(private router: Router, // 0是未看 1是已看
private authService: AuthService, viewStatus : number;
private lifeCommonService: LifeCommonService, lifeCustomerInfo : any;
private activatedRoute:ActivatedRoute, constructor(private router : Router,
private myService:MyService, private authService : AuthService,
private el:ElementRef) { private lifeCommonService : LifeCommonService,
this.subscription = lifeCommonService.shareStatus$.subscribe(status => { private activatedRoute : ActivatedRoute,
this.shareGuidePageEnable = status == '1'; private myService : MyService,
}) private el : ElementRef) {
this.subscription = lifeCommonService.shareStatus$.subscribe(status => {
this.shareGuidePageEnable = status == '1';
})
}
public menuLists = [
{key:1,name:'首页',icon:'index',link:'/'}, }
{key:2,name:'产品库',icon:'product',link:'/product'},
{key:3,name:'日程',icon:'schedule',link:'/todo'}, public menuLists = [
{key:4,name:'我的',icon:'mine',link:'/mine'}, { key: 1, name: '首页', icon: 'index', link: '/' },
] { key: 2, name: '产品库', icon: 'product', link: '/product' },
public selectedMenuKey:number=1; { key: 3, name: '日程', icon: 'schedule', link: '/todo' },
// 点击底部菜单 { key: 4, name: '我的', icon: 'mine', link: '/mine' },
menuSelect(item){ ]
this.selectedMenuKey = item.key; public selectedMenuKey : number = 1;
this.router.navigate([item.link]); // 点击底部菜单
} menuSelect(item) {
this.selectedMenuKey = item.key;
closeDialog(e){ this.router.navigate([item.link]);
if(e.target.className.indexOf('tipsInfoContainer')>-1){ }
this.viewStatus = 1;
sessionStorage.setItem('hadView','true') closeDialog(e) {
} if (e.target.className.indexOf('tipsInfoContainer') > -1) {
} this.viewStatus = 1;
viewDetail(){ sessionStorage.setItem('hadView', 'true')
this.viewStatus = 1;
sessionStorage.setItem('hadView','true');
this.router.navigate(['/renewal_reminder'])
}
ngOnInit() {
sessionStorage.setItem('iconShowFlag','true');
this.lifeCustomerInfo = JSON.parse(localStorage.getItem('lifeCustomerInfo')) ? JSON.parse(localStorage.getItem('lifeCustomerInfo')) : null;
this.loginId = this.lifeCustomerInfo ? this.lifeCustomerInfo.mobileNo:null;
this.authService.obtainToken(this.loginId).subscribe(res => {
if (res['success']) {
localStorage.setItem('lifeToken', res['data']['token']);
this.ydWxConfig();
}
});
this.getVersion();
this.router.events.forEach((event) => {
if (event instanceof NavigationStart) {
// 控制首页浮标显示与否和底部菜单
this.isShowIndexBtn = event.url.indexOf('/login') < 0;
this.iconShowFlag = !!localStorage.getItem('lifeCustomerInfo');
if((event.url.indexOf('/activityDetail') >=0 && event.url.indexOf('shareCode') >=0)
|| event.url.indexOf('/aiofp')>=0
){
this.iconShowFlag=false;
} }
if(event.url.indexOf('/material/')>=0 }
|| event.url.indexOf('/inviter')>=0 viewDetail() {
|| event.url.indexOf('/register')>=0 this.viewStatus = 1;
|| event.url.indexOf('/invitees')>=0 sessionStorage.setItem('hadView', 'true');
|| event.url.indexOf('/video/')>=0 this.router.navigate(['/renewal_reminder'])
|| (event.url.indexOf('/activityDetail') >=0 && event.url.indexOf('shareCode') >=0) }
|| event.url.indexOf('/aiofp')>=0
){ ngOnInit() {
this.isShowIndexBtn = false; sessionStorage.setItem('iconShowFlag', 'true');
} this.lifeCustomerInfo = JSON.parse(localStorage.getItem('lifeCustomerInfo')) ? JSON.parse(localStorage.getItem('lifeCustomerInfo')) : null;
// 更新底部图标状态 this.loginId = this.lifeCustomerInfo ? this.lifeCustomerInfo.mobileNo : null;
if(event.url.indexOf('/product')===0){ this.authService.obtainToken(this.loginId).subscribe(res => {
this.selectedMenuKey = 2 if (res['success']) {
}else if(event.url.indexOf('/todo')===0){ localStorage.setItem('lifeToken', res['data']['token']);
this.selectedMenuKey = 3 this.ydWxConfig();
}else if(event.url == '/' || event.url == '/my'){ }
this.selectedMenuKey = 1 });
// 查询是否有续期提醒订单
if(sessionStorage.getItem('hadView')){ this.getVersion();
this.viewStatus = 1; this.router.events.forEach((event) => {
}else{ if (event instanceof NavigationStart) {
if(this.lifeCustomerInfo){ // 控制首页浮标显示与否和底部菜单
this.queryNoticeList(); this.isShowIndexBtn = event.url.indexOf('/login') < 0;
} this.iconShowFlag = !!localStorage.getItem('lifeCustomerInfo');
} if ((event.url.indexOf('/activityDetail') >= 0 && event.url.indexOf('shareCode') >= 0)
}else if(event.url.indexOf('/mine')===0){ || event.url.indexOf('/aiofp') >= 0
this.selectedMenuKey = 4 ) {
}else{ this.iconShowFlag = false;
this.selectedMenuKey = 0; }
} if (event.url.indexOf('/material/') >= 0
} || event.url.indexOf('/inviter') >= 0
|| event.url.indexOf('/register') >= 0
if(event instanceof ActivationEnd){ || event.url.indexOf('/invitees') >= 0
this.lifeCommonService.setTitle(`${event.snapshot.data[0] && event.snapshot.data[0].title ? event.snapshot.data[0].title : '银盾保险经纪'}`) || event.url.indexOf('/video/') >= 0
} || (event.url.indexOf('/activityDetail') >= 0 && event.url.indexOf('shareCode') >= 0)
}); || event.url.indexOf('/aiofp') >= 0
} ) {
this.isShowIndexBtn = false;
ngOnDestroy() { }
this.subscription.unsubscribe(); if (event.url.indexOf('/activityDetail') >= 0) {
} this.isShowhead = false;
}
// 微信JS-SDK注册
ydWxConfig() {
const url = encodeURIComponent(location.href.split('#')[0]); // 更新底部图标状态
this.authService.ydWxConfig(url).subscribe(res => { if (event.url.indexOf('/product') === 0) {
const data = res['data']; this.selectedMenuKey = 2
wx.config({ } else if (event.url.indexOf('/todo') === 0) {
debug: false, this.selectedMenuKey = 3
appId: data.appId, } else if (event.url == '/' || event.url == '/my') {
timestamp: data.timestamp, this.selectedMenuKey = 1
nonceStr: data.nonceStr, // 查询是否有续期提醒订单
signature: data.signature, if (sessionStorage.getItem('hadView')) {
jsApiList: data.jsApiList, this.viewStatus = 1;
beta: true } else {
}); if (this.lifeCustomerInfo) {
}); this.queryNoticeList();
} }
}
// 获取是否有续期提醒订单 } else if (event.url.indexOf('/mine') === 0) {
queryNoticeList(){ this.selectedMenuKey = 4
this.myService.queryNoticeList({practitionerId:this.lifeCustomerInfo.practitionerId,status:0}).subscribe(res=>{ } else {
if(res['success']){ this.selectedMenuKey = 0;
if(res['data']['list'] && res['data']['list'].length > 0){ }
this.viewStatus = 0; }
}else{
sessionStorage.setItem('hadView','true') if (event instanceof ActivationEnd) {
} this.lifeCommonService.setTitle(`${event.snapshot.data[0] && event.snapshot.data[0].title ? event.snapshot.data[0].title : '银盾保险经纪'}`)
} }
}) });
} }
// 关闭弹窗 ngOnDestroy() {
getPopInfo() { this.subscription.unsubscribe();
this.isNeedAlert = false; }
let { search, href } = window.location;
href = href.replace(/&?t_reload=(\d+)/g, ''); // 微信JS-SDK注册
window.location.href = href + (search ? '&' : '?') + 't_reload=' + new Date().getTime(); ydWxConfig() {
localStorage.setItem('Version', this.currentVersion) const url = encodeURIComponent(location.href.split('#')[0]);
} this.authService.ydWxConfig(url).subscribe(res => {
const data = res['data'];
getVersion() { wx.config({
this.authService.currentVersionQuery().subscribe((res) => { debug: false,
if (res['data']['currentVersion']) { appId: data.appId,
this.currentVersion = res['data']['currentVersion']; timestamp: data.timestamp,
} nonceStr: data.nonceStr,
//只在微信端判断缓存 signature: data.signature,
if (this.lifeCommonService.checkDeviceType() === '3') { jsApiList: data.jsApiList,
//如果本地没有版本号设置缓存 beta: true
if (!localStorage.getItem('Version')) { });
localStorage.setItem('Version', this.currentVersion); });
} else { }
const Version = localStorage.getItem('Version');
//如果缓存有版本号对比本地和接口版本 // 获取是否有续期提醒订单
if (Version != this.currentVersion) { queryNoticeList() {
localStorage.clear(); this.myService.queryNoticeList({ practitionerId: this.lifeCustomerInfo.practitionerId, status: 0 }).subscribe(res => {
this.isNeedAlert = true; if (res['success']) {
this.dialogInfo = { if (res['data']['list'] && res['data']['list'].length > 0) {
title: null, this.viewStatus = 0;
content: { value: '检测到新版本', align: 'center' }, } else {
footer: [{ value: '更新', routerLink: '', className: 'weui-dialog__btn_primary' }], sessionStorage.setItem('hadView', 'true')
}; }
} }
} })
} }
}) // 关闭弹窗
} getPopInfo() {
this.isNeedAlert = false;
close(){ let { search, href } = window.location;
this.askIconFlag=this.iconShowFlag=false href = href.replace(/&?t_reload=(\d+)/g, '');
sessionStorage.setItem('iconShowFlag',this.iconShowFlag+'') window.location.href = href + (search ? '&' : '?') + 't_reload=' + new Date().getTime();
} localStorage.setItem('Version', this.currentVersion)
} }
getVersion() {
this.authService.currentVersionQuery().subscribe((res) => {
if (res['data']['currentVersion']) {
this.currentVersion = res['data']['currentVersion'];
}
//只在微信端判断缓存
if (this.lifeCommonService.checkDeviceType() === '3') {
//如果本地没有版本号设置缓存
if (!localStorage.getItem('Version')) {
localStorage.setItem('Version', this.currentVersion);
} else {
const Version = localStorage.getItem('Version');
//如果缓存有版本号对比本地和接口版本
if (Version != this.currentVersion) {
localStorage.clear();
this.isNeedAlert = true;
this.dialogInfo = {
title: null,
content: { value: '检测到新版本', align: 'center' },
footer: [{ value: '更新', routerLink: '', className: 'weui-dialog__btn_primary' }],
};
}
}
}
})
}
close() {
this.askIconFlag = this.iconShowFlag = false
sessionStorage.setItem('iconShowFlag', this.iconShowFlag + '')
}
}
\ No newline at end of file
src/app/my/activity-detail/activity-detail.component.html
<div class="content" id="content"> <div class="content" id="content">
<div class="imgBox"> <div id="offsetHeight">
<img src="assets/images/activity/activityTitle.png"> <div class="imgBox">
<div class="agentBox" *ngIf="agentInfo"> <img src="assets/images/activity/activityTitle.png">
<div class="headImagePath"> <div class="agentBox" *ngIf="agentInfo">
<img style="width: 40px;border-radius: 200px;" [src]="agentInfo.headImagePath ? agentInfo.headImagePath : 'assets/images/icons/meng.png'" alt="经纪人头像"> <div class="headImagePath">
<img style="width: 40px;border-radius: 200px;"
[src]="agentInfo.headImagePath ? agentInfo.headImagePath : 'assets/images/icons/meng.png'"
alt="经纪人头像">
</div>
<div class="agentName">
<span style="color:#ff9700">{{agentInfo.agentName}}</span>邀请您一起
</div>
</div> </div>
<div class="agentName">
<span style="color:#ff9700">{{agentInfo.agentName}}</span>邀请您一起 <div id="tabBox" class="tabBox">
<div *ngFor="let item of tabList" [ngClass]="item.select?'tabItemXz':'tabItem'"
(click)="selectTab(item)">
{{item.name}}
</div>
</div> </div>
</div> </div>
<div id="tabBox" class="tabBox"> <div id="tab1" class="imgBox">
<div *ngFor="let item of tabList" [ngClass]="item.select?'tabItemXz':'tabItem'" (click)="selectTab(item)"> <img src="assets/images/activity/activity01.png">
{{item.name}} <div class="buttonBox" (click)="c_aiofp()">
点击了解AIOFP
</div> </div>
</div> </div>
</div> <div id="tab2" class="imgBox"><img src="assets/images/activity/activity02.png"></div>
<div id="tab3" class="imgBox"><img src="assets/images/activity/activity03.png"></div>
<div id="tab1" class="imgBox"> <div id="tab4" class="imgBox"><img src="assets/images/activity/activity04.png"></div>
<img src="assets/images/activity/activity01.png"> <div id="tab5" class="imgBox"><img src="assets/images/activity/activity05.png"></div>
<div class="buttonBox" (click)="c_aiofp()"> <div id="tab6" class="imgBox"><img src="assets/images/activity/activity06.png"></div>
点击了解AIOFP <div class="imgBox" [ngClass]="shareCode?'maginT':'marginF'" >
</div> <img src="assets/images/activity/activity07.png">
</div> <div (click)="c_guanw()" class="buttonBox" style="left: 8.5%;bottom:20%;padding: 2px 10px;">
<div id="tab2" class="imgBox"><img src="assets/images/activity/activity02.png"></div> 银盾官网了解更多
<div id="tab3" class="imgBox"><img src="assets/images/activity/activity03.png"></div>
<div id="tab4" class="imgBox"><img src="assets/images/activity/activity04.png"></div>
<div id="tab5" class="imgBox"><img src="assets/images/activity/activity05.png"></div>
<div id="tab6" class="imgBox"><img src="assets/images/activity/activity06.png"></div>
<div class="imgBox">
<img src="assets/images/activity/activity07.png">
<div (click)="c_guanw()" class="buttonBox" style="left: 8.5%;bottom:20%;padding: 2px 10px;">
银盾官网了解更多
</div>
</div>
<div class="shareBox" id="shareBox">
<div (click)="share()" style="color: #000;text-align: center;">
<span style="font-size: 20px;" class="iconfont icon-zhuanfaxian" ></span>
<div >
分享
</div> </div>
</div> </div>
<div class="knowButtonBox"> <div class="shareBox" id="shareBox">
<div class="knowButton" (click)="isShowSubmitBox=true"> <div (click)="share()" style="color: #000;text-align: center;">
了解考察 <span style="font-size: 20px;" class="iconfont icon-zhuanfaxian"></span>
<div>
分享
</div>
</div>
<div class="knowButtonBox">
<div class="knowButton" (click)="isShowSubmitBox=true">
了解考察
</div>
</div> </div>
</div> </div>
</div> <div class="shareFixedBox" (click)="share()">
<div class="submitBox" *ngIf="isShowSubmitBox"> <div>
<div class="closeButton"> <span style="font-size: 15px;" class="iconfont icon-zhuanfaxian"></span>
<span (click)="isShowSubmitBox=false" style="font-size: 24px;color: #b0b0b0;" class="iconfont icon-guanbi" ></span>
</div>
<div class="submitBoxTitle">了解考察</div>
<div class="submitBoxContent">
<div class="line">
<div class="lineLabel">姓名</div>
<div class="lineValue"><input [(ngModel)]="reName" style="border: 0px;background-color: rgba(246, 246, 246, 1);text-align: right;width: 100%;" type="text" placeholder="请输入姓名" ></div>
</div> </div>
<div class="line"> <div style="font-size: 12px;margin-top: -4px;">
<div class="lineLabel">电话</div> 分享
<div class="lineValue"><input [(ngModel)]="mobileNo" style="border: 0px;background-color: rgba(246, 246, 246, 1);text-align: right;width: 100%;" type="number" placeholder="请输入手机号"></div>
</div> </div>
</div> </div>
<div class="submitButtonBox"> <div [ngClass]="shareCode?'submitBox':'submitBox2'" id="submitBox" *ngIf="isShowSubmitBox">
<div class="submitButton" (click)="c_submit()" > <div class="submitBoxTitle">
提交申请 <div>
了解考察
</div>
<div>
<span (click)="isShowSubmitBox=false" style="font-size: 24px;color: #b0b0b0;font-weight: bolder;"
class="iconfont icon-guanbi"></span>
</div>
</div>
<div class="submitBoxContent">
<div class="line">
<div class="lineLabel">姓名</div>
<div class="lineValue"><input [(ngModel)]="reName" maxlength="30"
style="border: 0px;background-color: rgba(246, 246, 246, 1);text-align: right;width: 100%;"
type="text" placeholder="请输入姓名"></div>
</div>
<div class="line">
<div class="lineLabel">手机</div>
<div class="lineValue"><input [(ngModel)]="mobileNo" maxlength="11"
style="border: 0px;background-color: rgba(246, 246, 246, 1);text-align: right;width: 100%;"
type="tel" placeholder="请输入手机号"></div>
</div>
</div>
<div class="submitButtonBox">
<div class="submitButton" (click)="c_submit()">
提交申请
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="shareCus" (click)="share()" *ngIf="this.lifeCommonService.checkDeviceType() == 3"> <!-- <div class="shareCus" (click)="share()" *ngIf="this.lifeCommonService.checkDeviceType() == 3">
...@@ -74,15 +97,13 @@ ...@@ -74,15 +97,13 @@
</div> --> </div> -->
<!--分享引导页--> <!--分享引导页-->
<div class="shareGuidePage" *ngIf="shareAbled" (click)="shareAbled=false"> <div class="shareGuidePage" *ngIf="shareAbled" (click)="shareAbled=false">
<div class="guideBox"> <div class="guideBox">
<i class="iconfont icon-yindaojiantou"></i> <i class="iconfont icon-yindaojiantou"></i>
<div class="tips"> <div class="tips">
<p>请点击右上角菜单</p> <p>请点击右上角菜单</p>
<p>分享给朋友</p> <p>分享给朋友</p>
</div> </div>
</div> </div>
</div> </div>
<ydlife-toast *ngIf="toastDialog" [toastInfo]="toastInfo"></ydlife-toast> <ydlife-toast *ngIf="toastDialog" [toastInfo]="toastInfo"></ydlife-toast>
<div #payForm hidden></div> <div #payForm hidden></div>
\ No newline at end of file
src/app/my/activity-detail/activity-detail.component.scss
.content{ .content{
-webkit-appearance: none;
background-color: #071999; background-color: #071999;
padding-bottom: 50px;
position: relative; position: relative;
height: 100%; height: calc(100%-500px);
overflow: auto; overflow: auto;
scroll-behavior: smooth;
.submitBox2{
position: fixed;
bottom: 70px;
left: 0;
z-index: 999;
background-color: #fff;
width: 100%;
font-size: 18px;
color: #000;
border-radius:15px 15px 0 0;
}
.submitBox{ .submitBox{
position: fixed; position: fixed;
bottom: 0; bottom: 0;
...@@ -15,45 +27,50 @@ ...@@ -15,45 +27,50 @@
font-size: 18px; font-size: 18px;
color: #000; color: #000;
border-radius:15px 15px 0 0; border-radius:15px 15px 0 0;
.closeButton{ }
text-align: right;
padding-top: 7px; .submitBoxTitle{
padding-right: 10px; display: flex;
margin-bottom: -10px; align-items: center;
} justify-content: space-between;
.submitBoxTitle{ border-bottom: 1px solid #eee;
border-bottom: 1px solid #eee; padding: 7px 20px 5px;
padding: 0 20px 2px; font-weight: bold;
} font-size: 16px;
.submitBoxContent{ }
padding:15px 20px 0; .submitBoxContent{
font-size: 16px; padding:15px 20px 0;
.line{ font-size: 16px;
background-color: rgba(246, 246, 246, 1); .line{
border-radius: 10px; background-color: rgba(246, 246, 246, 1);
padding:10px 15px; border-radius: 10px;
display: flex; padding:10px 15px;
justify-content: space-between; display: flex;
margin-bottom: 10px; justify-content: space-between;
.lineValue{ margin-bottom: 10px;
flex-grow: 0.8;
} .lineLabel{
input::placeholder { font-weight: bold;
font-size: 16px;
}
} }
} .lineValue{
.submitButtonBox{ flex-grow: 0.8;
width: 100%;
.submitButton{
text-align: center;
color: #fff;
font-size: 20px;
background: linear-gradient(90deg, rgba(224, 168, 98, 1) 0%, rgba(228, 176, 110, 1) 52.08%, rgba(224, 168, 98, 1) 100%);
padding: 8px 0;
border-radius: 200px;
margin:20px 50px 40px ;
} }
input::placeholder {
font-size: 16px;
}
}
}
.submitButtonBox{
width: 100%;
.submitButton{
text-align: center;
color: #fff;
font-size: 20px;
background: linear-gradient(90deg, rgba(224, 168, 98, 1) 0%, rgba(228, 176, 110, 1) 52.08%, rgba(224, 168, 98, 1) 100%);
padding: 8px 0;
border-radius: 200px;
margin:20px 50px 40px ;
} }
} }
.shareBox{ .shareBox{
...@@ -77,13 +94,29 @@ ...@@ -77,13 +94,29 @@
margin-left: 30px; margin-left: 30px;
} }
} }
.shareFixedBox{
color: #fff;
background-color: #071999;
z-index: 999;
position: fixed;
bottom:170px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tabBox{ .tabBox{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
overflow-x: scroll; overflow-x: scroll;
width: 100%; width: 100%;
padding: 2% 3.2%; padding: 0% 3.2%;
height: 20%;
position: absolute; position: absolute;
bottom: 4%; bottom: 4%;
} }
...@@ -110,7 +143,7 @@ ...@@ -110,7 +143,7 @@
color: transparent; color: transparent;
} }
.tabItem{ .tabItem{
margin: 0 0.5%; margin: 0 2px;
color: #736253; color: #736253;
background-color: #fff; background-color: #fff;
border-radius: 200px; border-radius: 200px;
...@@ -120,7 +153,7 @@ ...@@ -120,7 +153,7 @@
} }
.tabItemXz{ .tabItemXz{
position: relative; position: relative;
margin: 0 0.5%; margin: 0 2px;
color: #fff; color: #fff;
background-color: #e0a862; background-color: #e0a862;
border-radius: 200px; border-radius: 200px;
...@@ -181,6 +214,18 @@ ...@@ -181,6 +214,18 @@
} }
} }
} }
.maginT{
margin-bottom: 70px;
}
.marginF{
margin-bottom: 120px;
}
.content::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
@keyframes scale { @keyframes scale {
0% { 0% {
transform: scale(1); transform: scale(1);
......
src/app/my/activity-detail/activity-detail.component.ts
...@@ -75,7 +75,7 @@ export class ActivityDetailComponent implements OnInit, OnDestroy { ...@@ -75,7 +75,7 @@ export class ActivityDetailComponent implements OnInit, OnDestroy {
this.articleTrackSave(); this.articleTrackSave();
} }
} else { } else {
document.getElementById("shareBox").style.bottom=70+'px'; document.getElementById("shareBox").style.bottom=70+'px';
this.practitionerFileSharingList(this.articleId, null); this.practitionerFileSharingList(this.articleId, null);
} }
...@@ -96,7 +96,7 @@ export class ActivityDetailComponent implements OnInit, OnDestroy { ...@@ -96,7 +96,7 @@ export class ActivityDetailComponent implements OnInit, OnDestroy {
let windowH = window.outerHeight; let windowH = window.outerHeight;
document.getElementById("content").style.height=windowH+'px'; document.getElementById("content").style.height=windowH+'px';
let bindhandleScroll = this.handleScroll.bind(this); let bindhandleScroll = this.handleScroll.bind(this);
document.addEventListener('scroll',bindhandleScroll, true); document.getElementById("content").addEventListener('scroll',bindhandleScroll);
} }
...@@ -105,65 +105,108 @@ export class ActivityDetailComponent implements OnInit, OnDestroy { ...@@ -105,65 +105,108 @@ export class ActivityDetailComponent implements OnInit, OnDestroy {
this.articleTrackSave(); this.articleTrackSave();
sessionStorage.removeItem('articleTrackId'); sessionStorage.removeItem('articleTrackId');
} }
document.removeEventListener('scroll', this.handleScroll, true); document.getElementById("content").removeEventListener('scroll', this.handleScroll);
} }
handleScroll() { selectTab(item) {
// this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset; // document.getElementById(item.key).scrollIntoView({ behavior: 'auto',block:'center' });
this.scrollTop=document.getElementById("content").scrollTop;
if(!this.offsetTop){ document.getElementById("content").scrollTop = document.getElementById(item.key).offsetTop-300;
this.offsetTop = document.getElementById("tabBox").offsetTop; // console.log(document.getElementById("content").scrollTop);
// console.log(document.getElementById(item.key).offsetTop);
}
handleScroll() {
//盒子高度
let clientHeight = document.getElementById("offsetHeight").clientHeight - document.getElementById("content").clientHeight+(this.shareCode?70:120);
//滑动是否是横向
if(this.scrollTop==document.getElementById("content").scrollTop){
}else{
//滑动距离顶部高度
this.scrollTop=document.getElementById("content").scrollTop;
//高度滑动百分比
let scrollTopBfb = this.scrollTop / clientHeight;
//窗口宽度
let winWidth=document.getElementById("content").clientWidth;
//可滚动宽度
let clientWidth= (78*6)-winWidth;
document.getElementById("tabBox").scrollLeft = clientWidth*scrollTopBfb;
//滚动到顶判断
if(this.scrollTop==0){
document.getElementById("content").scrollTo({
top:1
});
}
//滚动到底判断
if(clientHeight==this.scrollTop){
document.getElementById("content").scrollTo({
top:this.scrollTop-1
});
}
if(!this.offsetTop){
this.offsetTop = document.getElementById("tabBox").offsetTop;
}
if (this.scrollTop > this.offsetTop) {
document.getElementById("tabBox").classList.add('tabBoxXd');
document.getElementById("tabBox").classList.remove('tabBox');
} else {
document.getElementById("tabBox").classList.add('tabBox');
document.getElementById("tabBox").classList.remove('tabBoxXd');
}
//获取六张图片的距离顶部高度
if(!this.tab1DistanceTop){
this.tab1DistanceTop = document.getElementById("tab1").offsetTop;
}
if(!this.tab2DistanceTop){
this.tab2DistanceTop = document.getElementById("tab2").offsetTop;
}
if(!this.tab3DistanceTop){
this.tab3DistanceTop = document.getElementById("tab3").offsetTop;
}
if(!this.tab4DistanceTop){
this.tab4DistanceTop = document.getElementById("tab4").offsetTop;
}
if(!this.tab5DistanceTop){
this.tab5DistanceTop = document.getElementById("tab5").offsetTop;
}
if(!this.tab6DistanceTop){
this.tab6DistanceTop = document.getElementById("tab6").offsetTop;
}
if (this.scrollTop+300 >= this.tab1DistanceTop) {
this.tabList.map(item => item.select = false);
this.tabList[0].select = true;
}
if (this.scrollTop+300 >= this.tab2DistanceTop) {
this.tabList.map(item => item.select = false);
this.tabList[1].select = true;
}
if (this.scrollTop+300 >= this.tab3DistanceTop) {
this.tabList.map(item => item.select = false);
this.tabList[2].select = true;
}
if (this.scrollTop+300 >= this.tab4DistanceTop) {
this.tabList.map(item => item.select = false);
this.tabList[3].select = true;
}
if (this.scrollTop+300 >= this.tab5DistanceTop) {
this.tabList.map(item => item.select = false);
this.tabList[4].select = true;
}
if (this.scrollTop+300 >= this.tab6DistanceTop) {
this.tabList.map(item => item.select = false);
this.tabList[5].select = true;
}
} }
if (this.scrollTop > this.offsetTop) {
document.getElementById("tabBox").classList.add('tabBoxXd');
document.getElementById("tabBox").classList.remove('tabBox');
} else {
document.getElementById("tabBox").classList.add('tabBox');
document.getElementById("tabBox").classList.remove('tabBoxXd');
}
//获取六张图片的距离顶部高度
if(!this.tab1DistanceTop){
this.tab1DistanceTop = document.getElementById("tab1").offsetTop;
}
if(!this.tab2DistanceTop){
this.tab2DistanceTop = document.getElementById("tab2").offsetTop;
}
if(!this.tab3DistanceTop){
this.tab3DistanceTop = document.getElementById("tab3").offsetTop;
}
if(!this.tab4DistanceTop){
this.tab4DistanceTop = document.getElementById("tab4").offsetTop;
}
if(!this.tab5DistanceTop){
this.tab5DistanceTop = document.getElementById("tab5").offsetTop;
}
if(!this.tab6DistanceTop){
this.tab6DistanceTop = document.getElementById("tab6").offsetTop;
}
if (this.scrollTop+300 >= this.tab1DistanceTop) {
this.tabList.map(item => item.select = false);
this.tabList[0].select = true;
}
if (this.scrollTop+300 >= this.tab2DistanceTop) {
this.tabList.map(item => item.select = false);
this.tabList[1].select = true;
}
if (this.scrollTop+300 >= this.tab3DistanceTop) {
this.tabList.map(item => item.select = false);
this.tabList[2].select = true;
}
if (this.scrollTop+300 >= this.tab4DistanceTop) {
this.tabList.map(item => item.select = false);
this.tabList[3].select = true;
}
if (this.scrollTop+300 >= this.tab5DistanceTop) {
this.tabList.map(item => item.select = false);
this.tabList[4].select = true;
}
if (this.scrollTop+300 >= this.tab6DistanceTop) {
this.tabList.map(item => item.select = false);
this.tabList[5].select = true;
}
} }
c_guanw(){ c_guanw(){
location.href='https://www.ydinsurance.cn/'; location.href='https://www.ydinsurance.cn/';
...@@ -224,7 +267,7 @@ export class ActivityDetailComponent implements OnInit, OnDestroy { ...@@ -224,7 +267,7 @@ export class ActivityDetailComponent implements OnInit, OnDestroy {
} }
c_aiofp(){ c_aiofp(){
document.removeEventListener('scroll', this.handleScroll, true); document.getElementById("content").removeEventListener('scroll', this.handleScroll, true);
this.router.navigate(['/aiofp']); this.router.navigate(['/aiofp']);
} }
...@@ -232,14 +275,13 @@ export class ActivityDetailComponent implements OnInit, OnDestroy { ...@@ -232,14 +275,13 @@ export class ActivityDetailComponent implements OnInit, OnDestroy {
getWxUserInfo(trackId:any) { getWxUserInfo(trackId:any) {
this.myService.getWxUserInfo(trackId+'&type=activity').subscribe(res => { this.myService.getWxUserInfo(trackId+'&type=activity').subscribe(res => {
if (res['success']) { if (res['success']) {
localStorage.setItem("activityBol",window.location.href);
this.paymentForm = res['data'].paymentForm; this.paymentForm = res['data'].paymentForm;
this.getOrPost(this.paymentForm.action, this.paymentForm.param, this.paymentForm.charset, this.paymentForm.actionType); this.getOrPost(this.paymentForm.action, this.paymentForm.param, this.paymentForm.charset, this.paymentForm.actionType);
} }
}) })
} }
selectTab(item) {
document.getElementById(item.key).scrollIntoView({ behavior: 'smooth',block:'center' });
}
// 点击分享 // 点击分享
share() { share() {
...@@ -285,7 +327,8 @@ export class ActivityDetailComponent implements OnInit, OnDestroy { ...@@ -285,7 +327,8 @@ export class ActivityDetailComponent implements OnInit, OnDestroy {
channel: 1, channel: 1,
url: window.location.href url: window.location.href
}; };
this.lifeCommonService.wxShare(this.articleInfo.title, this.lifeCommonService.getTwenty(this.agentInfo.agentName+this.articleInfo.digest, 38), `${window.location.origin}${window.location.pathname}?shareCode=${this.articleShareCodeSaveInfo.shareCode}`, this.articleInfo.coverUrl); // this.lifeCommonService.wxShare(this.articleInfo.title, this.lifeCommonService.getTwenty(this.agentInfo.agentName+this.articleInfo.digest, 38), `${window.location.origin}${window.location.pathname}?shareCode=${this.articleShareCodeSaveInfo.shareCode}`, this.articleInfo.coverUrl);
this.lifeCommonService.wxShare(this.articleInfo.title, (this.agentInfo.agentName+this.articleInfo.digest), `${window.location.origin}${window.location.pathname}?shareCode=${this.articleShareCodeSaveInfo.shareCode}`, this.articleInfo.coverUrl);
this.myService.articleShareCodeSave(this.articleShareCodeSaveInfo).subscribe(res => { this.myService.articleShareCodeSave(this.articleShareCodeSaveInfo).subscribe(res => {
}); });
...@@ -294,6 +337,7 @@ export class ActivityDetailComponent implements OnInit, OnDestroy { ...@@ -294,6 +337,7 @@ export class ActivityDetailComponent implements OnInit, OnDestroy {
// 保存客户痕迹: // 保存客户痕迹:
// 有id就是出 没id就是进 // 有id就是出 没id就是进
articleTrackSave() { articleTrackSave() {
const param = { const param = {
id: sessionStorage.getItem('articleTrackId') ? sessionStorage.getItem('articleTrackId') : null, id: sessionStorage.getItem('articleTrackId') ? sessionStorage.getItem('articleTrackId') : null,
shareCode: this.shareCode, shareCode: this.shareCode,
...@@ -304,7 +348,7 @@ export class ActivityDetailComponent implements OnInit, OnDestroy { ...@@ -304,7 +348,7 @@ export class ActivityDetailComponent implements OnInit, OnDestroy {
}; };
this.myService.articleTrackSave(param).subscribe(res => { this.myService.articleTrackSave(param).subscribe(res => {
sessionStorage.setItem('articleTrackId', res['data']['id']); sessionStorage.setItem('articleTrackId', res['data']['id']);
if (this.lifeCommonService.getQueryString('state') != '1') { if (this.state != '1' && localStorage.getItem("activityBol")!=window.location.href) {
this.getWxUserInfo(res['data']['id']); this.getWxUserInfo(res['data']['id']);
} }
}) })
......
src/app/my/activity/activity.component.ts
...@@ -94,7 +94,7 @@ export class ActivityComponent implements OnInit { ...@@ -94,7 +94,7 @@ export class ActivityComponent implements OnInit {
whoRead(activityItem){ whoRead(activityItem){
if(activityItem.num > 0){ if(activityItem.num > 0){
this.router.navigate(['/activity_read',activityItem.id]) this.router.navigate(['/article_read',activityItem.id])
}else{ }else{
const toast = ToastService.show('暂时无人阅读您分享的文章！', 0); const toast = ToastService.show('暂时无人阅读您分享的文章！', 0);
setTimeout(() => { setTimeout(() => {
......
src/app/my/aiofp/aiofp.component.html
<div class="content" id="content"> <div class="content" id="content">
<div class="imgBox"> <div class="imgBox">
<img src="assets/images/activity/aiofp.png"> <img src="assets/images/activity/aiofp.png">
<div class="backFixedBox" (click)="back()">
<div class="tuichuBox">
<span style="font-size: 15px;" class="iconfont icon-arrow-right-bottom" ></span>
</div>
<div style="font-size: 12px;margin-top: -4px;">
返回
</div>
</div>
</div> </div>
</div> </div>
src/app/my/aiofp/aiofp.component.scss
...@@ -6,7 +6,26 @@ ...@@ -6,7 +6,26 @@
.imgBox{ .imgBox{
position: relative; position: relative;
width: 100%; width: 100%;
.backFixedBox{
color: #fff;
background-color: #071999;
z-index: 999;
position: absolute;
bottom:23%;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.tuichuBox{
transform: rotate(180deg);
}
}
} }
} }
......
src/app/my/aiofp/aiofp.component.ts
...@@ -2,7 +2,7 @@ import { Component, OnInit, } from '@angular/core'; ...@@ -2,7 +2,7 @@ import { Component, OnInit, } from '@angular/core';
import { MyService } from '../../my/my.service'; import { MyService } from '../../my/my.service';
import { LifeCommonService } from '../../common/life-common.service'; import { LifeCommonService } from '../../common/life-common.service';
import { OnDestroy } from "@angular/core"; import { OnDestroy } from "@angular/core";
import { Router } from "@angular/router"; import { Router } from "@angular/router";
@Component({ @Component({
selector: 'ydlife-aiofp', selector: 'ydlife-aiofp',
...@@ -10,20 +10,23 @@ import { Router } from "@angular/router"; ...@@ -10,20 +10,23 @@ import { Router } from "@angular/router";
styleUrls: ['./aiofp.component.scss'] styleUrls: ['./aiofp.component.scss']
}) })
export class AiofpComponent implements OnInit, OnDestroy { export class AiofpComponent implements OnInit, OnDestroy {
constructor(private myService : MyService, public lifeCommonService : LifeCommonService, public router : Router,) { constructor(private myService : MyService, public lifeCommonService : LifeCommonService, public router : Router,) {
// this.subscription = lifeCommonService.shareStatus$.subscribe(status => { // this.subscription = lifeCommonService.shareStatus$.subscribe(status => {
// this.shareAbled = !(status == '0'); // this.shareAbled = !(status == '0');
// }); // });
} }
ngOnInit() { ngOnInit() {
let windowH = window.outerHeight; let windowH = window.outerHeight;
document.getElementById("content").style.height=windowH+'px'; document.getElementById("content").style.height = windowH + 'px';
} }
ngOnDestroy() { ngOnDestroy() {
} }
back() {
window.history.back();
}
} }
\ No newline at end of file
src/app/my/my-routing.module.ts
...@@ -159,7 +159,7 @@ const myRoutes: Routes = [ ...@@ -159,7 +159,7 @@ const myRoutes: Routes = [
{ path: 'articleDetail/:id',component:ArticleDetailComponent,data:[{title:'文章分享'}]}, { path: 'articleDetail/:id',component:ArticleDetailComponent,data:[{title:'文章分享'}]},
{ path: 'activity/:mdDropOptionId', component:ActivityComponent,data:[{title:'活动分享'}]}, { path: 'activity/:mdDropOptionId', component:ActivityComponent,data:[{title:'活动分享'}]},
{ path: 'activityDetail/:id',component:ActivityDetailComponent,data:[{title:'加入银盾创投计划'}]}, { path: 'activityDetail/:id',component:ActivityDetailComponent,data:[{title:'加入银盾创投计划'}]},
{ path: 'aiofp',component:AiofpComponent,data:[{title:'AIOFO'}]}, { path: 'aiofp',component:AiofpComponent,data:[{title:'AIOFP详细介绍'}]},
{ path: 'article_read/:id',component:ArticleReadComponent,canActivate:[AuthGuard],data:[{title:'文章分享'}]}, { path: 'article_read/:id',component:ArticleReadComponent,canActivate:[AuthGuard],data:[{title:'文章分享'}]},
{ path: 'salary_detail',component:SalaryDetailComponent,canActivate:[AuthGuard],data:[{title:'薪资详情'}]}, { path: 'salary_detail',component:SalaryDetailComponent,canActivate:[AuthGuard],data:[{title:'薪资详情'}]},
{ path: 'salary_detail/:id',component:SalaryFirstYearComponent,canActivate:[AuthGuard],data:[{title:'薪资详情'}]}, { path: 'salary_detail/:id',component:SalaryFirstYearComponent,canActivate:[AuthGuard],data:[{title:'薪资详情'}]},
......
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