问卷页面增加分享功能

questionnaire/angular.json

@@ -32,7 +32,7 @@
             "deployUrl": "/questionnaire/"
           },
           "configurations": {
-            "production": {
+            "prod": {
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -179,4 +179,4 @@
     }
   },
   "defaultProject": "questionnaire"
-}
\ No newline at end of file
+}

questionnaire/package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build -c=dev --prod",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"

questionnaire/src/app/common.service.ts

@@ -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
    */
   obtainToken() {

questionnaire/src/app/transit/transit.component.css

-.specialContent{
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 28px;
-    /* box-shadow: 0 1px 5px #e4dfdf; */
-    border-radius: 5px;
-    border: 1px #d3d9ef solid;
-}
-.part1{
-    height: 120px;    
-    margin-bottom: 20px;
-    position: relative;
-}
-.part1 .iconfont{
-    color:#2806b1;
-    margin-right: 20px;
-    font-size: 40px!important;
-}
-
-.part1,.part2,.part3{
-    flex-direction: column;
-    padding: 20px;
-    position: relative;
-}
-.part1 div:nth-child(2),.part2 div:nth-child(2){
-    margin-top: 20px;
-}
-.part1{
-    background: #f7f7f2;    
-}
-.part1 div:nth-child(2){
-    color: #3e4768;
-    display: flex;
-    align-items: center;
-}
-.part2{
-    background: #033984;
-    /* background: linear-gradient(to bottom right, #2806b1, #6571c7); */
-    color: #fff;
-}
-.gifts{
-    position: absolute;
-    left: 0;
-    font-size: 20px;
-    top: 0px;
-    width: 85px;
-    height: 35px;
-    background: #ec2d37;
-    color: #fff;
-    border-radius: 5px 0px 40px 0px;
-    line-height: 35px;
-    padding-left: 10px;
-}
-
-.part3 .iconfont{
-    color:rgb(250, 253, 3);
-    margin-right: 5px;
-    font-size: 20px;
-}
-.part3 li{
-    width: 100%;
-    text-align: left;
-    font-size: 20px;
-    margin-bottom: 5px;
-}
\ No newline at end of file
+.specialContent {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 28px;
+  /* box-shadow: 0 1px 5px #e4dfdf; */
+  border-radius: 5px;
+  border: 1px #d3d9ef solid;
+}
+
+.part1 {
+  height: 120px;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.part1 .iconfont {
+  color: #2806b1;
+  margin-right: 20px;
+  font-size: 40px !important;
+}
+
+.part1, .part2, .part3 {
+  flex-direction: column;
+  padding: 20px;
+  position: relative;
+}
+
+.part1 div:nth-child(2), .part2 div:nth-child(2) {
+  margin-top: 20px;
+}
+
+.part1 {
+  background: #f7f7f2;
+}
+
+.part1 div:nth-child(2) {
+  color: #3e4768;
+  display: flex;
+  align-items: center;
+}
+
+.part2 {
+  background: #033984;
+  /* background: linear-gradient(to bottom right, #2806b1, #6571c7); */
+  color: #fff;
+}
+
+.gifts {
+  position: absolute;
+  left: 0;
+  font-size: 20px;
+  top: 0px;
+  width: 85px;
+  height: 35px;
+  background: #ec2d37;
+  color: #fff;
+  border-radius: 5px 0px 40px 0px;
+  line-height: 35px;
+  padding-left: 10px;
+}
+
+.part3 .iconfont {
+  color: rgb(250, 253, 3);
+  margin-right: 5px;
+  font-size: 20px;
+}
+
+.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="title" *ngIf="!picFlag">
-    <img src="assets/images/bg_1.png" />
+    <img src="assets/images/bg_1.png"/>
   </div>
   <div class="specialWrapper" *ngIf="picFlag">
     <div class="specialContent part1">
@@ -27,11 +27,33 @@
     <span style="color:red;">*</span>
     <span>了解一下您的家庭情况</span>
   </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">
     <span style="color:red;">*</span>
     <span>本问卷大约需要1分钟</span>
   </div>
   <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>
\ No newline at end of file
+</div>
+
+<!--分享成功弹窗-->
+<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 { CommonService } from "../common.service";
-
+import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
+import {CommonService} from "../common.service";
+import {ActivatedRoute} from "@angular/router";
+import {environment} from "../../environments/environment";
+import set = Reflect.set;
+declare const wx: any;
 @Component({
   selector: 'app-transit',
   templateUrl: './transit.component.html',
@@ -8,10 +11,17 @@ import { CommonService } from "../common.service";
 })
 export class TransitComponent implements OnInit {
   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() {
+    this.customerId = this.activatedRoute.snapshot.queryParams['customerId'];
     this.commonService.surveyInfo().then();
     const activityCode = this.commonService.getQueryString('activityCode');
     if (activityCode == 'mmh') {
@@ -20,5 +30,136 @@ export class TransitComponent implements OnInit {
     } else {
       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 @@
   <app-root></app-root>
 </body>
 <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>
   var _hmt = _hmt || [];
   (function () {