Skip to content

A
allCampaign
Commit c14b643d by Sweet Zhang
Options

问卷页面增加分享功能

parent 8f8ba37a
Showing with 334 additions and 80 deletions
questionnaire/angular.json
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
"deployUrl": "/questionnaire/" "deployUrl": "/questionnaire/"
}, },
"configurations": { "configurations": {
"production": { "prod": {
"fileReplacements": [ "fileReplacements": [
{ {
"replace": "src/environments/environment.ts", "replace": "src/environments/environment.ts",
...@@ -179,4 +179,4 @@ ...@@ -179,4 +179,4 @@
} }
}, },
"defaultProject": "questionnaire" "defaultProject": "questionnaire"
} }
\ No newline at end of file
questionnaire/package.json
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve", "start": "ng serve",
"build": "ng build", "build": "ng build -c=dev --prod",
"test": "ng test", "test": "ng test",
"lint": "ng lint", "lint": "ng lint",
"e2e": "ng e2e" "e2e": "ng e2e"
......
questionnaire/src/app/common.service.ts
...@@ -71,6 +71,42 @@ export class CommonService { ...@@ -71,6 +71,42 @@ export class CommonService {
} }
/** /**
* 分享码保存
*/
async shareCallBack(shareCode) {
const url = this.USER_API_URL + '/shareCallBack';
const res = await this.obtainToken();
this.httpOptions.headers = this.httpOptions.headers.set('X-Authorization', res['data']['token']);
return this.http.post(url, JSON.stringify(shareCode), this.httpOptions).toPromise();
}
/**
* 微信分享配置接口
* @param Currenturl
* @returns {Promise<any|TResult2|TResult1>}
*/
async getWXJsInitConfig(Currenturl) {
const url = this.USER_API_URL + '/wxConfig';
const res = await this.obtainToken();
this.httpOptions.headers = this.httpOptions.headers.set('X-Authorization', res['data']['token']);
const postUrl = {
url: Currenturl
};
return this.http.post(url, JSON.stringify(postUrl), this.httpOptions).toPromise();
}
/**
* 微信分享自定义标题带分享码
* @param shareCode
*/
async defineWxContent(shareCode) {
const shareCallBack = await this.shareCallBack(shareCode);
return shareCallBack;
}
/**
* 获取TOKEN * 获取TOKEN
*/ */
obtainToken() { obtainToken() {
......
questionnaire/src/app/transit/transit.component.css
.specialContent{ .specialContent {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 28px; font-size: 28px;
/* box-shadow: 0 1px 5px #e4dfdf; */ /* box-shadow: 0 1px 5px #e4dfdf; */
border-radius: 5px; border-radius: 5px;
border: 1px #d3d9ef solid; border: 1px #d3d9ef solid;
} }
.part1{
height: 120px; .part1 {
margin-bottom: 20px; height: 120px;
position: relative; margin-bottom: 20px;
} position: relative;
.part1 .iconfont{ }
color:#2806b1;
margin-right: 20px; .part1 .iconfont {
font-size: 40px!important; color: #2806b1;
} margin-right: 20px;
font-size: 40px !important;
.part1,.part2,.part3{ }
flex-direction: column;
padding: 20px; .part1, .part2, .part3 {
position: relative; flex-direction: column;
} padding: 20px;
.part1 div:nth-child(2),.part2 div:nth-child(2){ position: relative;
margin-top: 20px; }
}
.part1{ .part1 div:nth-child(2), .part2 div:nth-child(2) {
background: #f7f7f2; margin-top: 20px;
} }
.part1 div:nth-child(2){
color: #3e4768; .part1 {
display: flex; background: #f7f7f2;
align-items: center; }
}
.part2{ .part1 div:nth-child(2) {
background: #033984; color: #3e4768;
/* background: linear-gradient(to bottom right, #2806b1, #6571c7); */ display: flex;
color: #fff; align-items: center;
} }
.gifts{
position: absolute; .part2 {
left: 0; background: #033984;
font-size: 20px; /* background: linear-gradient(to bottom right, #2806b1, #6571c7); */
top: 0px; color: #fff;
width: 85px; }
height: 35px;
background: #ec2d37; .gifts {
color: #fff; position: absolute;
border-radius: 5px 0px 40px 0px; left: 0;
line-height: 35px; font-size: 20px;
padding-left: 10px; top: 0px;
} width: 85px;
height: 35px;
.part3 .iconfont{ background: #ec2d37;
color:rgb(250, 253, 3); color: #fff;
margin-right: 5px; border-radius: 5px 0px 40px 0px;
font-size: 20px; line-height: 35px;
} padding-left: 10px;
.part3 li{ }
width: 100%;
text-align: left; .part3 .iconfont {
font-size: 20px; color: rgb(250, 253, 3);
margin-bottom: 5px; margin-right: 5px;
} font-size: 20px;
\ No newline at end of file }
.part3 li {
width: 100%;
text-align: left;
font-size: 20px;
margin-bottom: 5px;
}
.share {
background: #55a3e4;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
color: #fff;
letter-spacing: 1px;
padding: 5px 10px;
display: inline-flex;
}
.share > span {
margin-left: 8px;
}
.markbox, .dialog {
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);
}
.guideImgBox {
margin: 20px auto;
}
.guideTips {
margin-top: 60%;
}
.guideTips p {
font-size: 18px;
margin-top: 10px;
text-align: center;
letter-spacing: 1px;
}
.dialog {
justify-content: center;
align-items: center;
}
questionnaire/src/app/transit/transit.component.html
<div class="limbo"> <div class="limbo">
<div class="title" *ngIf="!picFlag"> <div class="title" *ngIf="!picFlag">
<img src="assets/images/bg_1.png" /> <img src="assets/images/bg_1.png"/>
</div> </div>
<div class="specialWrapper" *ngIf="picFlag"> <div class="specialWrapper" *ngIf="picFlag">
<div class="specialContent part1"> <div class="specialContent part1">
...@@ -27,11 +27,33 @@ ...@@ -27,11 +27,33 @@
<span style="color:red;">*</span> <span style="color:red;">*</span>
<span>了解一下您的家庭情况</span> <span>了解一下您的家庭情况</span>
</div> </div>
<div *ngIf="deviceType === 3" style="display: flex;justify-content: flex-end;margin: 10px 0;">
<div class="share" (click)="wxShare()">
<div style="width: 20px"><img src="assets/images/shareBtn.png" alt=""></div>
<span>分享给朋友</span>
</div>
</div>
<div class="tips" *ngIf="!picFlag"> <div class="tips" *ngIf="!picFlag">
<span style="color:red;">*</span> <span style="color:red;">*</span>
<span>本问卷大约需要1分钟</span> <span>本问卷大约需要1分钟</span>
</div> </div>
<div class="footer" routerLink="/family"> <div class="footer" routerLink="/family">
<div>进入</div> <div>开始评测</div>
</div>
</div>
<!--分享引导页-->
<div class="markbox" (click)="wxShareFlag = false" *ngIf="wxShareFlag">
<div class="guideImgBox">
<div style="width: 60px;position: absolute;right: 15px;"><img src="assets/images/tips.png" alt=""></div>
<div class="guideTips">
<p>请点击右上角菜单</p>
<p>分享给朋友</p>
</div>
</div> </div>
</div> </div>
\ No newline at end of file
<!--分享成功弹窗-->
<div class="dialog" *ngIf="alertFlag">
<span style="margin-top: -60%;font-size: 22px">{{dialogTips}}</span>
</div>
questionnaire/src/app/transit/transit.component.ts
import { Component, OnInit } from '@angular/core'; import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
import { CommonService } from "../common.service"; import {CommonService} from "../common.service";
import {ActivatedRoute} from "@angular/router";
import {environment} from "../../environments/environment";
import set = Reflect.set;
declare const wx: any;
@Component({ @Component({
selector: 'app-transit', selector: 'app-transit',
templateUrl: './transit.component.html', templateUrl: './transit.component.html',
...@@ -8,10 +11,17 @@ import { CommonService } from "../common.service"; ...@@ -8,10 +11,17 @@ import { CommonService } from "../common.service";
}) })
export class TransitComponent implements OnInit { export class TransitComponent implements OnInit {
picFlag: boolean; picFlag: boolean;
constructor(private commonService: CommonService) { wxShareFlag: boolean;
alertFlag: boolean;
customerId: string;
deviceType: number;
dialogTips: string;
constructor(private commonService: CommonService, private activatedRoute: ActivatedRoute, private changeDetectorRef: ChangeDetectorRef) {
} }
ngOnInit() { ngOnInit() {
this.customerId = this.activatedRoute.snapshot.queryParams['customerId'];
this.commonService.surveyInfo().then(); this.commonService.surveyInfo().then();
const activityCode = this.commonService.getQueryString('activityCode'); const activityCode = this.commonService.getQueryString('activityCode');
if (activityCode == 'mmh') { if (activityCode == 'mmh') {
...@@ -20,5 +30,136 @@ export class TransitComponent implements OnInit { ...@@ -20,5 +30,136 @@ export class TransitComponent implements OnInit {
} else { } else {
this.picFlag = false; this.picFlag = false;
} }
this.deviceType = this.checkDeviceType();
if (this.deviceType === 3) {
this.configWX();
}
}
// 分享给朋友
wxShare() {
this.wxShareFlag = true;
if (this.customerId) {
const shareCode = {
shareCode: Math.random().toString(36).substr(2, 15),
destinationType: null,
destinationId: null,
destinationName: null,
adultCount: null,
childCount: null,
eldCount: null,
effectiveStartDate: null,
effectiveEndDate: null,
dayCount: null,
shareType: 4,
customerId: this.customerId,
planId: 464,
productId: 767,
os: this.checkOs(),
channel: 0,
url: window.location.href,
isOrder: 0,
jsonParams: null
};
this.commonService.defineWxContent(shareCode).then(res => {
let _this = this;
// 默认的分享信息
const shareData = {
title: '分享标题',
link: `${environment.hostName}/questionnaire/#/index?campaign=AIRobot&task=AItask1`,
desc: '分享描述',
imgUrl: 'https://ajb-images.oss-cn-shanghai-finance-1-pub.aliyuncs.com/9/ydshare.jpg',
success: function () {
_this.wxShareFlag = false;
_this.alertFlag = true;
if (res['success'] === true) {
_this.dialogTips = '分享成功';
} else {
_this.dialogTips = '分享失败';
}
setTimeout(() => {
_this.alertFlag = false;
_this.changeDetectorRef.markForCheck();
_this.changeDetectorRef.detectChanges();
}, 500)
_this.changeDetectorRef.markForCheck();
_this.changeDetectorRef.detectChanges();
}
};
wx.ready(function () {
wx.onMenuShareAppMessage(shareData); // 分享微信
wx.onMenuShareTimeline(shareData); // 分享到朋友圈
wx.onMenuShareQQ(shareData); // 分享到QQ
wx.onMenuShareQZone(shareData); // 分享到QQ空间
});
});
}
}
// 配置分享
private configWX() {
const url = encodeURIComponent(location.href.split('#')[0]);
this.commonService.getWXJsInitConfig(url).then(res => {
const data = res['data'];
wx.config({
debug: false,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: data.jsApiList,
beta: true
});
});
}
/**
* 检测操作系统
*/
checkOs() {
let os;
const isWin = (navigator.platform === 'Win32') || (navigator.platform === 'Windows');
const isMac = (navigator.platform === 'Mac68K') ||
(navigator.platform === 'MacPPC') ||
(navigator.platform === 'Macintosh') ||
(navigator.platform === 'MacIntel');
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
os = 1;
return os; // 这是iOS平台下浏览器
} else if (/android/i.test(navigator.userAgent)) {
os = 2;
return os; // 这是Android平台下浏览器
} else if (isWin) {
os = 3;
return os; // 这是Android平台下浏览器
} else if (isMac) {
os = 4;
return os; // 这是mac系统
} else if (/Linux/i.test(navigator.userAgent)) {
os = 5;
return os; // 这是Linux平台下浏览器
} else {
os = 6;
return os;
}
}
/**
* 检测设备信息
* deviceType:PC为1,移动端为2,微信为3
*/
checkDeviceType() {
let deviceType = null;
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
deviceType = 3;
} else {
deviceType = 2;
}
} else {
deviceType = 1;
}
return deviceType;
} }
} }
questionnaire/src/index.html
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<app-root></app-root> <app-root></app-root>
</body> </body>
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script> <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script> <script>
var _hmt = _hmt || []; var _hmt = _hmt || [];
(function () { (function () {
......
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