Skip to content

Y
ydLife
Commit 1c98bb3c by Sweet Zhang
Options

文章分享

parent d0173023
Showing with 222 additions and 79 deletions
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
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 192.168.1.169 --port 4205",
"buildDev": "ng build -c=dev --prod",
"buildStage": "ng build -c=stage --prod",
"buildProd": "ng build -c=production --prod",
......@@ -32,6 +32,7 @@
"ng-zorro-antd-mobile": "^0.12.5",
"ngx-echarts": "^3.2.0",
"ngx-ueditor": "^2.1.3",
"node-sass": "^4.14.1",
"rxjs": "~6.3.3",
"save": "^2.4.0",
"signature_pad": "^3.0.0-beta.4",
......@@ -40,7 +41,7 @@
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular-devkit/build-angular": "^0.13.10",
"@angular/cli": "^7.3.9",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
......
src/app/common/life-common.service.ts
......@@ -110,14 +110,17 @@ export class LifeCommonService {
this.metaService.updateTag({ content: description }, 'name=description');
}
// 分享
wxShare(title: string, desc: string, link: string, imgUrl: string) {
const _this = this;
const shareData = {
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: () => {
this.shareStatusPublish(0);
alert(111)
_this.shareStatusPublish(0);
}
};
wx.ready(() => { // 需在用户可能点击分享按钮前就先调用
......
src/app/my/article-detail/article-detail.component.html
<div id="js_article" class="rich_media">
<div class="rich_media_inner">
<div id="page-content" class="rich_media_area_primary" >
<div class="rich_media_area_primary_inner">
<div id="img-content" class="rich_media_wrp">
<h2 class="rich_media_title" id="activity-name">
{{articleInfo.title}}
</h2>
<div id="meta_content" class="rich_media_meta_list">
<div class="rich_media_inner">
<div id="page-content" class="rich_media_area_primary">
<div class="rich_media_area_primary_inner">
<div id="img-content" class="rich_media_wrp">
<button (click)="getWxUserInfo()">getWxUserInfo</button>
<h2 class="rich_media_title" id="activity-name">
{{articleInfo.title}}
</h2>
<div id="meta_content" class="rich_media_meta_list">
<span class="rich_media_meta rich_media_meta_nickname" id="profileBt">
<a href="javascript:void(0);" id="js_name">银盾保险在线</a>
</span>
<em id="publish_time" class="rich_media_meta rich_media_meta_text">{{(articleInfo.updatedAt).substr(0,10)}}</em>
</div>
<div class="rich_media_content " id="js_content" style="visibility: visible;">
<div [innerHTML]="articleInfo.fileContent | safeHtml">
</div>
</div>
</div>
<em id="publish_time"
class="rich_media_meta rich_media_meta_text">{{(articleInfo.updatedAt).substr(0,10)}}</em>
</div>
<div class="rich_media_content " id="js_content" style="visibility: visible;">
<div [innerHTML]="articleInfo.fileContent | safeHtml">
</div>
</div>
</div>
</div>
</div>
</div>
<!--经纪人名片-->
<div class="agentInfoContainer">
<div style="display: flex">
<div class="portrait">
<img
[src]="agentInfo.headImagePath ? agentInfo.headImagePath : 'assets/images/icons/meng.png'" alt="经纪人头像"
class="img-circle">
</div>
<div class="agentInfo">
<p style="font-size: 18px;font-weight: 700; color: #333; letter-spacing: 1px;">{{this.agentInfo.agentName}}</p>
<p>{{this.agentInfo.insurerBranchName}}</p>
<p><a href="tel:{{this.agentInfo.mobileNo}}" style="color: #646464;">{{this.agentInfo.mobileNo}}</a></p>
</div>
</div>
<div class="qrcode">
<img [src]="agentInfo.qrCodePath ? agentInfo.qrCodePath : 'assets/images/online.jpg'" alt="经纪人二维码"
class="img-thumbnail">
</div>
</div>
</div>
<div class="shareCus" (click)="share()">
<span>分享获客</span>
</div>
<!--分享引导页-->
<div class="shareGuidePage" *ngIf="shareAbled" (click)="share()">
<div class="guideBox">
<i class="iconfont icon-yindaojiantou"></i>
<div class="tips">
<p>请点击右上角菜单</p>
<p>分享给朋友</p>
</div>
</div>
</div>
<div #payForm hidden></div>
......
src/app/my/article-detail/article-detail.component.scss
.rich_media {
padding-bottom: 68px;
}
.rich_media_area_primary {
background-color: #fff;
background-color: #fff;
}
.rich_media_area_primary{
padding: 20px 16px 12px;
padding: calc(20px + constant(safe-area-inset-top)) calc(16px + constant(safe-area-inset-right)) 12px calc(16px + constant(safe-area-inset-left));
padding: calc(20px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left));
.rich_media_area_primary {
padding: 20px 16px 12px;
padding: calc(20px + constant(safe-area-inset-top)) calc(16px + constant(safe-area-inset-right)) 12px calc(16px + constant(safe-area-inset-left));
padding: calc(20px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left));
}
.rich_media_inner {
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.rich_media_title {
font-size: 22px;
line-height: 1.4;
margin-bottom: 14px;
.rich_media_meta_list {
position: relative;
z-index: 1;
margin-bottom: 22px;
line-height: 20px;
font-size: 0;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
}
.rich_media_title {
font-size: 22px;
line-height: 1.4;
margin-bottom: 14px;
.rich_media_meta_list {
position: relative;
z-index: 1;
margin-bottom: 22px;
line-height: 20px;
font-size: 0;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
}
.rich_media_meta_nickname {
position: relative;
position: relative;
}
.rich_media_meta {
display: inline-block;
vertical-align: middle;
margin: 0 10px 10px 0;
font-size: 15px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
a{
color: #576b95;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
display: inline-block;
vertical-align: middle;
margin: 0 10px 10px 0;
font-size: 15px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
a {
color: #576b95;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
}
.rich_media_meta_list em {
font-style: normal;
font-style: normal;
}
.rich_media_meta_text {
color: rgba(0,0,0,0.3);
color: rgba(0, 0, 0, 0.3);
}
.rich_media_meta {
display: inline-block;
vertical-align: middle;
margin: 0 10px 10px 0;
font-size: 15px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
display: inline-block;
vertical-align: middle;
margin: 0 10px 10px 0;
font-size: 15px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.agentInfoContainer {
display: flex;
justify-content: space-between;
padding: 8px;
box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
margin: 0 8px;
.portrait {
width: 80px;
margin-right: 15px;
}
.qrcode {
width: 120px;
}
}
.shareCus {
position: fixed;
width: 100%;
height: 48px;
line-height: 48px;
bottom: 0;
left: 0;
background: #0d4d7a;
text-align: center;
letter-spacing: 1px;
color: #fff;
font-size: 15px;
font-weight: bold;
}
.shareGuidePage {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
color: #fff;
display: flex;
justify-content: flex-end;
z-index: 100000;
background: rgba(0, 0, 0, 0.8);
.guideBox {
margin: 20px auto;
.iconfont {
position: absolute;
right: 8%;
font-size: 40px;
top: 2px;
font-weight: bold;
}
.tips {
margin-top: 60%;
p {
font-size: 18px;
margin-top: 10px;
text-align: center;
letter-spacing: 1px;
}
}
}
}
src/app/my/article-detail/article-detail.component.ts
import { Component, OnInit , ElementRef, ViewChild} from '@angular/core';
import { MyService } from '../../my/my.service';
import { LifeCommonService } from '../../common/life-common.service';
import {Component, OnInit, ElementRef, ViewChild} from '@angular/core';
import {MyService} from '../../my/my.service';
import {LifeCommonService} from '../../common/life-common.service';
import {Subscription} from "rxjs/index";
import {OnDestroy} from "@angular/core";
declare const wx: any;
@Component({
selector: 'ydlife-article-detail',
templateUrl: './article-detail.component.html',
styleUrls: ['./article-detail.component.scss']
})
export class ArticleDetailComponent implements OnInit {
export class ArticleDetailComponent implements OnInit, OnDestroy {
@ViewChild('payForm') payForm: ElementRef;
articleInfo:any;
lifeCustomerInfo:any;
paymentForm:any;
customerId:number;
constructor(private myService:MyService,public lifeCommonService:LifeCommonService) { }
articleInfo: any;
lifeCustomerInfo: any;
paymentForm: any;
customerId: number;
agentInfo: any;
shareAbled: boolean = false;
subscription: Subscription;
constructor(private myService: MyService, public lifeCommonService: LifeCommonService) {
this.subscription = lifeCommonService.shareStatus$.subscribe(status => {
this.shareAbled = !(status == '0');
});
}
ngOnInit() {
this.articleInfo =JSON.parse(sessionStorage.getItem('articleInfo'));
this.lifeCustomerInfo = JSON.parse(localStorage.getItem('lifeCustomerInfo'))? JSON.parse(localStorage.getItem('lifeCustomerInfo')):null;
if(this.lifeCustomerInfo){
this.articleInfo = JSON.parse(sessionStorage.getItem('articleInfo'));
this.lifeCustomerInfo = JSON.parse(localStorage.getItem('lifeCustomerInfo')) ? JSON.parse(localStorage.getItem('lifeCustomerInfo')) : null;
if (this.lifeCustomerInfo) {
this.customerId = JSON.parse(localStorage.getItem('lifeCustomerInfo'))['customerId']
}else{
} else {
this.customerId = null;
}
if (this.lifeCommonService.checkDeviceType() == '3' && !this.customerId) {
this.agentInfo = {
headImagePath: this.lifeCustomerInfo.practitionerBasicInfo.headImagePath,
agentName: this.lifeCustomerInfo.practitionerBasicInfo.name,
insurerBranchName: this.lifeCustomerInfo.practitionerBasicInfo.insurerBranchName,
qrCodePath: this.lifeCustomerInfo.practitionerBasicInfo.qrCodePath,
mobileNo: this.lifeCustomerInfo.mobileNo
};
this.lifeCommonService.wxShare(this.articleInfo.title, `来自银盾经纪人${this.agentInfo.agentName}的分享`, `${window.location.href}`, this.articleInfo.coverUrl);
if (this.lifeCommonService.checkDeviceType() == '3' && !this.customerId) {
this.getWxUserInfo();
}
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
// 从后台获取到获取微信code的URL
getWxUserInfo() {
this.myService.getWxUserInfo(this.customerId).subscribe(res => {
this.myService.getWxUserInfo().subscribe(res => {
if (res['success']) {
this.paymentForm = res['data'].paymentForm;
alert(res['data']['userInfo']);
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);
}
})
}
// 点击分享
share() {
this.shareAbled = !this.shareAbled;
this.lifeCommonService.wxShare(this.articleInfo.title, `来自银盾经纪人${this.agentInfo.agentName}的分享`, `${window.location.href}`, this.articleInfo.coverUrl);
setTimeout(() => {
this.shareAbled = false;
}, 6000);
}
// 判断是get请求还是post请求进行支付请求
getOrPost(action, params, charset, actionType) {
let url = '';
......
src/app/my/my.service.ts
......@@ -352,7 +352,7 @@ export class MyService {
return this.http
.post(url, JSON.stringify(param));
}
//PEP得分查询
queryPEPScore(param){
const url = this.ydapi + '/practitioner/queryPEPScore';
......@@ -610,11 +610,9 @@ export class MyService {
/**
* 获取微信用户的详细信息
*/
getWxUserInfo(customerId) {
getWxUserInfo() {
const url = this.API + '/getWxUserInfo';
const cs = {
customerId: customerId
};
const cs = {};
return this.http.post(url, cs).pipe((res)=>{
return res;
});
......
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