feat: 海报弹窗

index.html

@@ -84,10 +84,14 @@
 
     // 生产
     CFG.sensorUrl = 'https://xnjkfx.cpic.com.cn:8006/sa?project=SXGW';
+    // 海报二维码
+    CFG.qrCodeImg = 'https://yun.duiba.com.cn/aurora/assets/86edddb7cb2ab51fc7234a3e62279b2c6bfbc2ff.png'; // TODO
 
     if(location.href.indexOf("duibatest") > -1) {
       var vConsole = new VConsole();
       CFG.sensorUrl = 'https://xnjkfxsit.cpic.com.cn/sa?project=SXGW';
+      // 海报二维码
+      CFG.qrCodeImg = 'https://yun.duiba.com.cn/aurora/assets/86edddb7cb2ab51fc7234a3e62279b2c6bfbc2ff.png';
     }
 
 

mock/home.js

@@ -59,6 +59,7 @@ export const homeJs = [
               "babyCredits": 222
             },
           ],
+          newGetMedalInfoList: null,
           "babyCredits": 6676,
           "activityBaseInfo": {
             "rule": "<p>以下是游戏规则：手速要快，点击红包雨。。333。。。。。。。。。。。。。。。。。。。。11111111111111sadasdadadsad555555555777777777779999999999991111111111111111111111122222222222222222222222222222222222222222222222222222222222222233333333333333333333333333333333333333333333333333333333333331111111111111111111111111111111111111111111111111111111111111112222222222222222222222222222222222222222222222222222222222222223333333333333333333333333333333333333333333333333333333333333</p>",

src/components/longImgPop/longImgPop.jsx

@@ -10,9 +10,6 @@ class LongImgPop extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      activityList: [],
-    }
   }
 
   componentDidMount() {

src/components/posterPop/posterPop.jsx

+import React, { Component } from 'react';
+import './posterPop.less';
+import { _asyncThrottle, _throttle, waitTime } from '../../utils/utils';
+import skinStore from '../../store/newSkin';
+import { observer } from 'mobx-react';
+import modalStore from '../../store/modal';
+import { sensorMdExpouse } from '../../utils/sensorMd';
+import html2canvas from 'html2canvas';
+import Toast from '../toast';
+
+@observer
+class LongImgPop extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      posterImg: '',
+    }
+  }
+
+  async componentDidMount() {
+    await waitTime(300)
+    // 开始截图
+    html2canvas(document.querySelector("#posetBox"), {
+      backgroundColor: "transparent",
+      allowTaint: true,
+      scale: 1, // 添加的scale 参数
+      canvas: canvas, // 自定义 canvas
+      logging: true, // 日志开关，便于查看html2canvas的内部执行流程
+      width: scaleW, // dom 原始宽度
+      height: scaleH,
+      useCORS: true, // 【重要】开启跨域配置
+    }).then(canvas => {
+      const base64 = canvas.toDataURL("image/png")
+      this.setState({
+        posterImg: base64
+      }, () => {
+        Toast('请长按保存图片分享给好友吧～')
+      })
+    })
+  }
+
+  // 返回
+  backHandle = _asyncThrottle(() => {
+    modalStore.closePop();
+  })
+
+  render() {
+    const { close } = skinStore.common;
+    const { bg } = skinStore.posterPop;
+    return (
+      <div className="posterPop">
+        <div className="poster_box" id="posetBox">
+          <img className="bg" src={bg} alt="" />
+          <img className="code_img" src={CFG.qrCodeImg} alt="" />
+        </div>
+        {
+          this.state.posterImg && <img className="poster_img" src={this.state.posterImg}></img>
+        }
+        <div className="tip">长按保存海报分享</div>
+        <div className="close" onClick={this.backHandle} style={{ 'backgroundImage': `url(${close})` }}></div>
+      </div>
+    );
+  }
+}
+
+export default LongImgPop;

src/components/posterPop/posterPop.less

+@import url('../../res.less');
+
+.posterPop {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  overflow-y: auto;
+
+  .poster_img {
+    position: absolute;
+    left: 52px;
+    top: 264px;
+    width: 649px;
+    height: 1052px;
+  }
+  .poster_box {
+    position: absolute;
+    left: 52px;
+    top: 264px;
+    width: 649px;
+    height: 1052px;
+    .formatBg();
+
+    .bg {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 649px;
+      height: 1052px;
+      .formatBg();
+    }
+
+    .code_img {
+      position: absolute;
+      left: 257px;
+      top: 792px;
+      width: 144px;
+      height: 144px;
+      border-radius: 16px;
+    }
+  }
+
+  .tip {
+    width: 100%;
+    font-size: 22px;
+    color: rgb(255, 255, 255);
+    position: absolute;
+    left: 0px;
+    top: 1340px;
+    text-align: center;
+  }
+
+  .close {
+    position: absolute;
+    left: 346px;
+    top: 1400px;
+    width: 61px;
+    height: 62px;
+    .formatBg();
+  }
+
+}

src/modal/modal.jsx

@@ -9,6 +9,7 @@ import LightedPop from "../components/lightedPop/lightedPop";
 import LightGreyPop from "../components/lightGreyPop/lightGreyPop";
 import LightEndPop from "../components/lightEndPop/lightEndPop";
 import LightNewPop from "../components/lightNewPop/lightNewPop";
+import PosterPop from "../components/posterPop/posterPop";
 /**
  * 弹窗配置
 */
@@ -19,6 +20,7 @@ export const cfg = {
   LightGreyPop: LightGreyPop,
   LightEndPop: LightEndPop,
   LightNewPop: LightNewPop,
+  PosterPop: PosterPop,
 };
 
 

src/pages/homePage/homePage.jsx

@@ -22,6 +22,7 @@ class HomePage extends Component {
     sensorMdExpouse("activityPage", { pageName: `年鉴活动首页` })
     await store.getIndexInfo();
     await store.initSensorsMd();
+    modalStore.pushPop("PosterPop")
   }
 
   // 保贝值抽奖
@@ -55,8 +56,8 @@ class HomePage extends Component {
   })
   // 分享
   shareHandle = _asyncThrottle(() => {
-    // TODO 海报
     sensorMdClick("activityClick", { pageName: `年鉴活动首页`, buttonName: '分享' })
+    modalStore.pushPop("PosterPop")
   })
 
   // 切换tab

src/store/newSkin.js

@@ -94,6 +94,11 @@ const _lightNewPop = {
   prize_box: './assets/lightNewPop/prize_box.png',
 }
 
+// 海报
+const _posterPop = {
+  bg: './assets/posterPop/bg.png',
+}
+
 // 处理图片防止缓存
 const dealImg = (obj) => {
 
@@ -117,6 +122,7 @@ let lightedPop = dealImg(_lightedPop)
 let lightGreyPop = dealImg(_lightGreyPop)
 let lightEndPop = dealImg(_lightEndPop)
 let lightNewPop = dealImg(_lightNewPop)
+let posterPop = dealImg(_posterPop)
 
 const skinStore = makeAutoObservable({
   homePage,
@@ -129,5 +135,6 @@ const skinStore = makeAutoObservable({
   lightGreyPop,
   lightEndPop,
   lightNewPop,
+  posterPop,
 })
 export default skinStore;