Skip to content

Y
ydLife
Commit 3de4043d by zeyang
Options

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

parent 9349474d
Showing with 322 additions and 179 deletions
src/app/app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div ydlifeScroll>
<div [ngStyle]="{'padding-bottom':isShowIndexBtn ? '70px' : '0'}">
<div [ngStyle]="{'padding-bottom':isShowIndexBtn ? (isShowhead ? '70px':'0') : '0'}">
<router-outlet></router-outlet>
</div>
<ydlife-guide-page *ngIf="shareGuidePageEnable"></ydlife-guide-page>
......
src/app/my/activity-detail/activity-detail.component.html
<div class="content" id="content">
<div class="imgBox">
<img src="assets/images/activity/activityTitle.png">
<div class="agentBox" *ngIf="agentInfo">
<div class="headImagePath">
<img style="width: 40px;border-radius: 200px;" [src]="agentInfo.headImagePath ? agentInfo.headImagePath : 'assets/images/icons/meng.png'" alt="经纪人头像">
<div id="offsetHeight">
<div class="imgBox">
<img src="assets/images/activity/activityTitle.png">
<div class="agentBox" *ngIf="agentInfo">
<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 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 id="tabBox" class="tabBox">
<div *ngFor="let item of tabList" [ngClass]="item.select?'tabItemXz':'tabItem'" (click)="selectTab(item)">
{{item.name}}
<div id="tab1" class="imgBox">
<img src="assets/images/activity/activity01.png">
<div class="buttonBox" (click)="c_aiofp()">
点击了解AIOFP
</div>
</div>
</div>
<div id="tab1" class="imgBox">
<img src="assets/images/activity/activity01.png">
<div class="buttonBox" (click)="c_aiofp()">
点击了解AIOFP
</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="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 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" [ngClass]="shareCode?'maginT':'marginF'" >
<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="knowButtonBox">
<div class="knowButton" (click)="isShowSubmitBox=true">
了解考察
<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 class="knowButtonBox">
<div class="knowButton" (click)="isShowSubmitBox=true">
了解考察
</div>
</div>
</div>
</div>
<div class="submitBox" *ngIf="isShowSubmitBox">
<div class="closeButton">
<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 class="shareFixedBox" (click)="share()">
<div>
<span style="font-size: 15px;" class="iconfont icon-zhuanfaxian"></span>
</div>
<div class="line">
<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 style="font-size: 12px;margin-top: -4px;">
分享
</div>
</div>
<div class="submitButtonBox">
<div class="submitButton" (click)="c_submit()" >
提交申请
<div [ngClass]="shareCode?'submitBox':'submitBox2'" id="submitBox" *ngIf="isShowSubmitBox">
<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 class="shareCus" (click)="share()" *ngIf="this.lifeCommonService.checkDeviceType() == 3">
......@@ -74,15 +97,13 @@
</div> -->
<!--分享引导页-->
<div class="shareGuidePage" *ngIf="shareAbled" (click)="shareAbled=false">
<div class="guideBox">
<i class="iconfont icon-yindaojiantou"></i>
<div class="tips">
<p>请点击右上角菜单</p>
<p>分享给朋友</p>
</div>
</div>
<div class="guideBox">
<i class="iconfont icon-yindaojiantou"></i>
<div class="tips">
<p>请点击右上角菜单</p>
<p>分享给朋友</p>
</div>
</div>
</div>
<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{
-webkit-appearance: none;
background-color: #071999;
padding-bottom: 50px;
position: relative;
height: 100%;
height: calc(100%-500px);
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{
position: fixed;
bottom: 0;
......@@ -15,45 +27,50 @@
font-size: 18px;
color: #000;
border-radius:15px 15px 0 0;
.closeButton{
text-align: right;
padding-top: 7px;
padding-right: 10px;
margin-bottom: -10px;
}
.submitBoxTitle{
border-bottom: 1px solid #eee;
padding: 0 20px 2px;
}
.submitBoxContent{
padding:15px 20px 0;
font-size: 16px;
.line{
background-color: rgba(246, 246, 246, 1);
border-radius: 10px;
padding:10px 15px;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
.lineValue{
flex-grow: 0.8;
}
input::placeholder {
font-size: 16px;
}
}
.submitBoxTitle{
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #eee;
padding: 7px 20px 5px;
font-weight: bold;
font-size: 16px;
}
.submitBoxContent{
padding:15px 20px 0;
font-size: 16px;
.line{
background-color: rgba(246, 246, 246, 1);
border-radius: 10px;
padding:10px 15px;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
.lineLabel{
font-weight: bold;
}
}
.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 ;
.lineValue{
flex-grow: 0.8;
}
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{
......@@ -77,13 +94,29 @@
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{
display: flex;
flex-direction: row;
align-items: center;
overflow-x: scroll;
width: 100%;
padding: 2% 3.2%;
padding: 0% 3.2%;
height: 20%;
position: absolute;
bottom: 4%;
}
......@@ -110,7 +143,7 @@
color: transparent;
}
.tabItem{
margin: 0 0.5%;
margin: 0 2px;
color: #736253;
background-color: #fff;
border-radius: 200px;
......@@ -120,7 +153,7 @@
}
.tabItemXz{
position: relative;
margin: 0 0.5%;
margin: 0 2px;
color: #fff;
background-color: #e0a862;
border-radius: 200px;
......@@ -181,6 +214,18 @@
}
}
}
.maginT{
margin-bottom: 70px;
}
.marginF{
margin-bottom: 120px;
}
.content::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
@keyframes scale {
0% {
transform: scale(1);
......
src/app/my/activity-detail/activity-detail.component.ts
......@@ -75,7 +75,7 @@ export class ActivityDetailComponent implements OnInit, OnDestroy {
this.articleTrackSave();
}
} else {
document.getElementById("shareBox").style.bottom=70+'px';
document.getElementById("shareBox").style.bottom=70+'px';
this.practitionerFileSharingList(this.articleId, null);
}
......@@ -96,7 +96,7 @@ export class ActivityDetailComponent implements OnInit, OnDestroy {
let windowH = window.outerHeight;
document.getElementById("content").style.height=windowH+'px';
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 {
this.articleTrackSave();
sessionStorage.removeItem('articleTrackId');
}
document.removeEventListener('scroll', this.handleScroll, true);
document.getElementById("content").removeEventListener('scroll', this.handleScroll);
}
handleScroll() {
// this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
this.scrollTop=document.getElementById("content").scrollTop;
if(!this.offsetTop){
this.offsetTop = document.getElementById("tabBox").offsetTop;
selectTab(item) {
// document.getElementById(item.key).scrollIntoView({ behavior: 'auto',block:'center' });
document.getElementById("content").scrollTop = document.getElementById(item.key).offsetTop-300;
// 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(){
location.href='https://www.ydinsurance.cn/';
......@@ -224,7 +267,7 @@ export class ActivityDetailComponent implements OnInit, OnDestroy {
}
c_aiofp(){
document.removeEventListener('scroll', this.handleScroll, true);
document.getElementById("content").removeEventListener('scroll', this.handleScroll, true);
this.router.navigate(['/aiofp']);
}
......@@ -232,14 +275,13 @@ export class ActivityDetailComponent implements OnInit, OnDestroy {
getWxUserInfo(trackId:any) {
this.myService.getWxUserInfo(trackId+'&type=activity').subscribe(res => {
if (res['success']) {
localStorage.setItem("activityBol",window.location.href);
this.paymentForm = res['data'].paymentForm;
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() {
......@@ -285,7 +327,8 @@ export class ActivityDetailComponent implements OnInit, OnDestroy {
channel: 1,
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 => {
});
......@@ -294,6 +337,7 @@ export class ActivityDetailComponent implements OnInit, OnDestroy {
// 保存客户痕迹:
// 有id就是出 没id就是进
articleTrackSave() {
const param = {
id: sessionStorage.getItem('articleTrackId') ? sessionStorage.getItem('articleTrackId') : null,
shareCode: this.shareCode,
......@@ -304,7 +348,7 @@ export class ActivityDetailComponent implements OnInit, OnDestroy {
};
this.myService.articleTrackSave(param).subscribe(res => {
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']);
}
})
......
src/app/my/activity/activity.component.ts
......@@ -94,7 +94,7 @@ export class ActivityComponent implements OnInit {
whoRead(activityItem){
if(activityItem.num > 0){
this.router.navigate(['/activity_read',activityItem.id])
this.router.navigate(['/article_read',activityItem.id])
}else{
const toast = ToastService.show('暂时无人阅读您分享的文章！', 0);
setTimeout(() => {
......
src/app/my/aiofp/aiofp.component.html
<div class="content" id="content">
<div class="imgBox">
<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>
src/app/my/aiofp/aiofp.component.scss
......@@ -6,7 +6,26 @@
.imgBox{
position: relative;
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';
import { MyService } from '../../my/my.service';
import { LifeCommonService } from '../../common/life-common.service';
import { OnDestroy } from "@angular/core";
import { Router } from "@angular/router";
import { Router } from "@angular/router";
@Component({
selector: 'ydlife-aiofp',
......@@ -10,20 +10,23 @@ import { Router } from "@angular/router";
styleUrls: ['./aiofp.component.scss']
})
export class AiofpComponent implements OnInit, OnDestroy {
constructor(private myService : MyService, public lifeCommonService : LifeCommonService, public router : Router,) {
// this.subscription = lifeCommonService.shareStatus$.subscribe(status => {
// this.shareAbled = !(status == '0');
// });
}
ngOnInit() {
let windowH = window.outerHeight;
document.getElementById("content").style.height=windowH+'px';
document.getElementById("content").style.height = windowH + 'px';
}
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 = [
{ path: 'articleDetail/:id',component:ArticleDetailComponent,data:[{title:'文章分享'}]},
{ path: 'activity/:mdDropOptionId', component:ActivityComponent,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: 'salary_detail',component:SalaryDetailComponent,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