1

.eslintrc.js

+module.exports = {
+    "parser": "babel-eslint",
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ],
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "no-await-in-loop": "error", // Possible Errors
+        // "no-extra-parens": "error", // Possible Errors
+        "no-template-curly-in-string": "error", // Possible Errors
+        // "no-console": "error", // Possible Errors
+        "react/prop-types": "off", // react
+        "no-extra-semi": "off", // Possible Errors
+        "no-unused-vars": "off", // Variables 禁止出现未使用过的变量
+        // "no-useless-escape": "off", // Best Practices 禁用不必要的转义字符
+        "complexity": "off", // Best Practices
+        "no-param-reassign": "off", // Best Practices
+        "no-else-return": "off", // Best Practices
+        "no-useless-return": "off", // Best Practices
+        "no-magic-numbers": "off", // Best Practices
+        "prefer-const": "off", // ES6
+        "no-var": "off", // ES6
+        // "no-mixed-spaces-and-tabs": "off" // Stylistic Issues
+    }
+};
\ No newline at end of file

.gitignore

+node_modules
\ No newline at end of file

MD.js

+import {MD} from '@spark/utils';
+
+let appId = CFG.appID;
+const dcm = '202.' + CFG.projectId + '.0.0';
+const domain = '//embedlog.duiba.com.cn';
+let type = "";
+if(window.navigator.userAgent.toLowerCase().indexOf("micromessenger") > -1){
+  type = "wx";
+}else {
+  type = "app";
+}
+
+
+let MDList = [
+  {
+    ele: `.md1`,
+    data: {
+      dpm: `${appId}.110.1.1`,
+      dcm,
+      dom: `${type}.0.0.0`,
+      domain,
+      appId
+    },
+    once: false
+  },
+  {
+    ele: `.md2`,
+    data: {
+      dpm: `${appId}.110.2.1`,
+      dcm,
+      dom: `${type}.0.0.0`,
+      domain,
+      appId
+    },
+    once: false
+  },
+  {
+    ele: `.md3`,
+    data: {
+      dpm: `${appId}.110.3.1`,
+      dcm,
+      dom: `${type}.0.0.0`,
+      domain,
+      appId
+    },
+    once: false
+  },
+  {
+    ele: `.md4`,
+    data: {
+      dpm: `${appId}.110.4.1`,
+      dcm,
+      dom: `${type}.0.0.0`,
+      domain,
+      appId
+    },
+    once: false
+  },
+  {
+    ele: `.md5`,
+    data: {
+      dpm: `${appId}.110.5.1`,
+      dcm,
+      dom: `${type}.0.0.0`,
+      domain,
+      appId
+    },
+    once: false
+  },
+  {
+    ele: `.md6`,
+    data: {
+      dpm: `${appId}.110.6.1`,
+      dcm,
+      dom: `${type}.0.0.0`,
+      domain,
+      appId
+    },
+    once: false
+  },
+  {
+    ele: `.md7`,
+    data: {
+      dpm: `${appId}.110.7.1`,
+      dcm,
+      domain,
+      appId
+    },
+    once: false
+  },
+  {
+    ele: `.md8`,
+    data: {
+      dpm: `${appId}.110.8.1`,
+      dcm,
+      domain,
+      appId
+    },
+    once: false
+  },
+  {
+    ele: `.md9`,
+    data: {
+      dpm: `${appId}.110.9.1`,
+      dcm,
+      domain,
+      appId
+    },
+    once: false
+  },
+  {
+    ele: `.md10`,
+    data: {
+      dpm: `${appId}.110.10.1`,
+      dcm,
+      domain,
+      appId
+    },
+    once: false
+  },
+  {
+    ele: `.md11`,
+    data: {
+      dpm: `${appId}.110.11.1`,
+      dcm,
+      domain,
+      appId
+    },
+    once: false
+  },
+  {
+    ele: `.md12`,
+    data: {
+      dpm: `${appId}.110.12.1`,
+      dcm,
+      domain,
+      appId
+    },
+    once: false
+  },
+  
+];
+
+export default () =>
+  MD({
+    show: MDList, // 曝光
+    click: MDList // 点击
+  });

README.md

-# eslintdemo
+# playground
+# 打包注意：
+
+## 活动页
+  app.jsx 
+    注释掉 分享落地页组件
+  utils/share.js 
+    start().then() 方法里，需注释掉 wxShare(null,1) 
+  public/index.html 
+    注释掉 var isSharePage = true;
+
+## 分享落地页
+  app.jsx 
+    注释掉 首页组件
+  utils/share.js 
+    start().then() 方法里，需注释掉 EventBus.emit("shareInit")
+  public/index.html 
+    活动时间是写死的，定义在全局变量 CFG.activeTime 中
+    放开注释 var isSharePage = true;
+
 

mock/index.js

+/**
+ * Created by rockyl on 2021/1/13.
+ */
+
+module.exports = Object.assign({},
+	require('./main'),  //业务mock
+	require('./common'),  //通用接口mock
+);

mock/main.js

+/**
+ * Created by rockyl on 2021/1/13.
+ */
+
+module.exports = {
+	'POST /join.do': {
+		success: true,
+		data: {
+			imgUrl: '//yun.duiba.com.cn/spark/assets/3f8175325f76e92087d64cb60936d23967656de6.png',
+		}
+	},
+}

package.json

+{
+  "name": "sparkproject-1614590528477",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "spark dev --type h5",
+    "prod": "spark build --type h5 --env prod",
+    "build": "spark build --type h5 --env build",
+    "tb": "spark build --type taobao"
+  },
+  "dependencies": {
+    "@spark/api-base": "^2.0.7",
+    "@spark/projectx": "^2.0.5",
+    "@spark/share": "^2.0.41",
+    "@spark/ui": "^2.0.8",
+    "@spark/utils": "^2.0.17",
+    "css-loader": "^3.6.0",
+    "duiba-utils": "^1.0.2",
+    "postcss-loader": "^3.0.0",
+    "prettier": "^2.0.5",
+    "qs": "^6.9.4",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-redux": "^5.0.7",
+    "redux": "^4.0.0",
+    "redux-thunk": "^2.3.0",
+    "style-loader": "^1.2.1",
+    "svgaplayerweb": "^2.3.1"
+  },
+  "eslintConfig": {
+    "parser": "babel-eslint"
+  },
+  "devDependencies": {
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.22.0",
+    "eslint-plugin-react": "^7.22.0",
+    "mockjs": "^1.1.0"
+  }
+}

public/index.html

+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <link rel="shortcut icon" type="image/x-icon" href="//yun.duiba.com.cn/editor/spark/favicon.ico">
+  <title>惊喜盲盒-赢壕礼</title>
+  <script src="//yun.duiba.com.cn/js-libs/rem/1.1.3/rem.min.js"></script>
+  <script src="//yun.duiba.com.cn/h5/lib/zepto.min.js"></script>
+  <script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
+  <script src="//rmrbyfb-statics.peopleapp.com/bridge/bridge.js"></script>
+  <script src="//yun.duiba.com.cn/js-libs/vConsole/3.3.4/vconsole.min.js"></script>
+
+  <script>
+    new VConsole();
+    function getApp() {
+      return {
+        cloud: {},
+        cloudName: "clientTemplate2C",
+        requestType: "mock"
+      }
+    }
+    // 落地页打包需要
+    // var isSharePage = true;
+
+    var CFG = CFG || {};
+    CFG.projectId = location.pathname.split('/')[2] || '1';
+    function getUrlParam(name) {
+      const search = window.location.search;
+      const matched = search
+        .slice(1)
+        .match(new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'));
+      return search.length ? matched && matched[2] : null;
+    }
+
+    CFG.appID = '${APPID}';
+    if (!getUrlParam("appID")) {
+      // alert("【警告】检测到活动url中没有appID参数\n缺少该参数会导致埋点、分享、app信息获取错误。")
+    }
+    CFG.activeTime="2021.3.5-2021.4.5";
+    // 测试地址
+    // CFG.homePageUrl = "http://activity.m.duibatest.com.cn/projectx/pe6e5cf94/index.html"; // 活动首页地址
+    // CFG.prizePageUrl = `http://activity.m.duibatest.com.cn/projectx/${CFG.projectId}/f286e6863.html`; // 我的奖品页面地址
+    // CFG.globalShareUrl = `http://activity.m.duibatest.com.cn/projectx/${CFG.projectId}/pageshare.html?appKey=NAP5tQvYdRhFHA29ysJZyHs9mua&openBs=openbs`;   
+
+    // 线上测试或者正式
+    CFG.homePageUrl = "https://79476.activity-1.m.duiba.com.cn/projectx/" + CFG.projectId + "/index.html?appID=79476"; // 活动首页地址
+    CFG.prizePageUrl = "http://79476.activity-1.m.duiba.com.cn/projectx/" + CFG.projectId + "/f286e6863.html"; // 我的奖品页面地址
+    CFG.globalShareUrl = "http://79476.activity-1.m.duiba.com.cn/projectx/" + CFG.projectId + "/pageshare.html?appKey=2Qii11uUs7hDKeRchKmBeEB3y1zk&openBs=openbs";
+    CFG.isWx = false;
+    CFG.appShareType = 1;   // 端内分享的类型，1--好友，2--朋友圈
+    CFG.isFromWx = false;   // 是否从微信分享页进入
+    if(getUrlParam("isFromWx")==1){
+      CFG.isFromWx = true;
+    }
+
+    if(window.navigator.userAgent.toLowerCase().indexOf("micromessenger") > -1){
+      console.log("========>>> 微信内")
+      CFG.isWx = true;
+    }
+
+    // console.log(111,getLoginPageUrl())
+    function getLoginPageUrl(){
+      // 活动地址，需要拼上 分享召回的参数，以及isFromWx=1
+      var url = CFG.homePageUrl + "&isFromWx=1&is_from_share=0";
+      var redirect = encodeURIComponent(url);
+      var inviteCode = getUrlParam("inviteCode");
+      var timestamp = Date.now();
+      // var loginPage = "http://zhixiao.yhfund.com.cn/user/register/?redirect=" + redirect + "&inviteCode=" + inviteCode + "&timestamp=" + timestamp + "&source=duiba&activity=toybox";
+      // var loginPage = "http://dev-zhixiao.yhfund.com.cn/fund/detail/?fundCode=180012&redirect=" + redirect + "&inviteCode=" + inviteCode + "&timestamp=" + timestamp + "&source=duiba&activity=toybox";
+      var loginPage = "https://dev-zhixiao.yhfund.com.cn/user/register/?redirect=" + redirect + "&inviteCode=" + inviteCode + "&timestamp=" + timestamp + "&source=duiba&activity=toybox";
+      return loginPage;
+    }
+
+  </script>
+</head>
+
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+
+</html>

sparkrc.js

+module.exports = {
+  OUTPUT_DIR: "dist",
+  SOURCE_DIR: "src",
+  TEMP_DIR: "./.temp",
+  ENTRY: "src/app.jsx",
+  TEMPLATE: "./public/index.html",
+  API_MOCK: true
+};

src/api/apicfg.js

+const projectId = CFG.projectId
+// const mockOrigin = `https://docs.dui88.com/mock/115/projectx/2`;
+// const mockOrigin1= `https://docs.dui88.com/mock/110/projectx/2`;
+const mockOrigin = `/projectx/${projectId}`;
+const mockOrigin1 = `/projectx/${projectId}`;
+const apiCfg = {
+  getRule: `${mockOrigin1}/projectRule.query`,
+  doJoin: {
+    uri: `join.do`,
+    method: "post",
+    withToken: true, //携带星速台token
+    secret: true, //开启接口加密
+    secretKey: 'duibaduiba123', //接口加密key
+  },
+  homeInfo: `${mockOrigin}/blindBox/homeInfo.do`,
+  join: {
+    uri: `${mockOrigin}/blindBox/join.do`,
+    withToken: true
+  },
+  getCode: `${mockOrigin}/fundBox/createItem.do`,
+  recordShareGuide: `${mockOrigin}/blindBox/recordShareGuide.do`,
+  buriedPoint: `${mockOrigin1}/buriedPoint`
+
+}
+
+export default apiCfg;
\ No newline at end of file

src/api/index.js

+import apiCfg from './apicfg';
+import {getPxToken} from "@spark/projectx";
+import {callApi} from '@spark/api-base'
+import {Toast} from '@spark/ui'
+
+import {isFromShare, newUser} from 'duiba-utils';
+
+let mergeData = {
+	user_type: newUser ? '0' : '1',
+	is_from_share: isFromShare ? '0' : '1',
+}
+
+const apiList = {
+	...apiCfg
+}
+
+
+const API = generateAPI(apiList);
+export default API;
+
+function getRequestParams(value) {
+	if (typeof value === 'string') {
+		return {
+			uri: value,
+			method: 'get'
+		}
+	} else if (typeof value === 'object') {
+		const {uri, method = 'get', headers, withToken, secret, secretKey, contentType = 'form'} = value;
+		return {
+			uri,
+			method,
+			headers,
+			withToken,
+			secret,
+			secretKey,
+			contentType,
+		}
+	} else {
+		console.error('getRequestParams: 传参有误');
+	}
+}
+
+
+function generateAPI(apiList) {
+	const api = {};
+	for (let key in apiList) {
+		let value = apiList[key];
+
+		const {method, uri, headers: mHeaders, withToken, secret, secretKey, contentType} = getRequestParams(value);
+		api[key] = async (params = {}, headers) => {
+			let token;
+			if (withToken) {
+				try {
+					token = await getPxToken();
+				} catch (e) {
+					Toast('星速台token获取失败，***请补全该处理逻辑***');
+					return;
+				}
+			}
+
+			let mergedHeaders = {...mHeaders, ...headers}
+			if (withToken && token) {
+				params.token = token;
+			}
+
+			params = {...params, ...mergeData};
+
+			const result = await callApi(uri, params, method, mergedHeaders, false, secret, secretKey, contentType)
+				.catch(e => {
+					//捕获网络异常
+					// Toast((e.message || '网络异常'));
+				});
+			if (result) {
+				//判断接口错误
+				if (!result.success) {
+					// Toast((result.message || '接口错误'));
+				}
+				//返回整个结果
+				return result;
+			}
+		}
+	}
+
+	return api;
+}

src/app.jsx

+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import "./app.less";
+import MD from '../MD';
+MD();
+//此处为spark-cli动态生成
+import Pagehome from "./pages/pagehome/pagehome.jsx";
+import Pageshare from "./pages/pageshare/pageshare.jsx";
+class App extends Component {
+
+  render() {
+    return (
+      <div>
+        <div id="diabox" ></div>
+        {/* 活动页 */}
+        <Pagehome></Pagehome>
+
+        {/* 分享落地页 */}
+        {/* <Pageshare></Pageshare> */}
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));

src/app.less

+* {
+  margin: 0;
+  padding: 0;
+}
+html,
+body {
+  font-size: 24px;
+  width: 100%;
+  height: 100%;
+}
+#root{
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  // background:  rgb(255,215,154);
+}
+#diabox{
+  position: fixed;
+  top:0%;
+  left: 0%;
+  bottom: 0%;
+  right: 0%;
+  // background-color: rgba(0,0, 0, 0.7);
+  margin: auto;
+  z-index: 1;  // js中动态控制z-index
+}
+#topbox{
+  // position: fixed;
+  // top:0%;
+  // left: 0%;
+  // bottom: 0%;
+  // right: 0%;
+  // margin: auto;
+  // overflow: hidden;
+  width: 750px;
+  height: 1624px;
+  position: absolute;
+  top: 50%;
+  margin-top: -812px;
+  overflow: hidden;
+}
+.popcontainer {
+  position: fixed;
+  width: calc(100%); //750px;
+  height: calc(100%); //1624px;
+  background: rgba(0, 0, 0, 0.7);
+}
+.comPop_zoom {
+  transform-origin: center center;
+  animation: zoom 0.24s linear 0s 1;
+}
+
+.comPop_zoom_from0 {
+  transform-origin: center center;
+  opacity: 0;
+  transform: scale(0);
+  animation: zoomfrom0 0.22s linear 0.44s 1 forwards;
+}
+@keyframes zoom {
+  0% {
+    transform: scale(0.75);
+  }
+
+  50% {
+    transform: scale(1.08)
+  }
+
+  100% {
+    transform: scale(1)
+  }
+}
+
+@keyframes zoomfrom0 {
+  0% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+
+  80% {
+    opacity: 1;
+    transform: scale(1.12)
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1)
+  }
+}
+
+.paulse{
+  animation: 1s paulse linear 0s infinite;
+}
+
+@keyframes paulse{
+  from{
+    transform: scale(1);
+    transform-origin: center;
+  }
+  25%{
+    transform: scale(1.05);
+    transform-origin: center;
+  }
+
+  50%{
+    transform: scale(0.95);
+    transform-origin: center;
+  }
+
+  75%{
+    transform: scale(1.05);
+    transform-origin: center;
+  }
+
+  to{
+    transform: scale(1);
+    transform-origin: center;
+  }
+}
+
+.diacontmidpos{
+  position: fixed;
+  top:0%;
+  left: 0%;
+  bottom: 0%;
+  right: 0%;
+  margin: auto;
+  transform-origin: 50% 50%;
+}
+.blackmengceng{
+  background-color: rgba(0, 0, 0, 0.7);
+}
+.diacontbotpos{
+  position: fixed;
+  left: 0%;
+  bottom: 0%;
+  right: 0%;
+  margin: auto;
+}
+
+.modal-bg {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.canvas-part{
+  width: 750px;
+  height: 1624px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+.canvasDiv{
+  width: 100%;
+  height: 1624px;
+}

src/components/comaddcount/comaddcount.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comaddcount.less';
+class Comaddcount extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+
+  openBlindBox = () => {
+    this.closeDia();
+    this.props.call && this.props.call();
+  }
+
+  closeDia = () => {
+    const { closeWin } = this.props;
+    closeWin && closeWin();
+  }
+
+  render() {
+    const { addTimes } = this.props.data;
+    console.log(this.props.data)
+    return (
+      <div className="addcount ">
+        <div className="addcount_page ">
+          <img className="biao_ti " src={this.state.resList['f5d3c252-018e-4a01-9a05-37d021bac403'].url} />
+          <img className="an_niu md9" onClick={this.openBlindBox} src={this.state.resList['ca3a31f1-8f51-42cb-88db-b56e6721e086'].url} />
+          <img className="guan_bi " onClick={this.closeDia} src={this.state.resList['d3cb848a-92ec-40c3-9684-5edd63eae927'].url} />
+          <span className="text ">
+            {addTimes}位好友已将帮您赢得{addTimes}次<br / >开盲盒机会
+          </span>
+        </div>
+      </div>
+    );
+  }
+}
+export default Comaddcount;

src/components/comaddcount/comaddcount.less

+.addcount {
+  width: 750px;
+  height: 100%;
+  opacity: 1;
+  position: absolute;
+  transform-origin: 0px 0px 0px;
+  .addcount_page {
+    width: 678px;
+    height: 805px;
+    opacity: 1;
+    left: 36px;
+    top: 40%;
+    transform: translateY(-50%);
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+  .biao_ti {
+    width: 678px;
+    height: 805px;
+    opacity: 1;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+  .an_niu {
+    width: 427px;
+    height: 112px;
+    opacity: 1;
+    left: 126px;
+    top: 631px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+  .guan_bi {
+    width: 46px;
+    height: 47px;
+    opacity: 0.5019607843137255;
+    left: 575px;
+    top: 195px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+  .text {
+    width: 100%;
+    opacity: 1;
+    top: 456px;
+    text-align: center;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+    font-size: 30px;
+    color: rgba(253, 235, 175, 1);
+  }
+}

src/components/comaddonechance/comaddonechance.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comaddonechance.less';
+class Comaddonechance extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+
+  componentDidMount(){
+
+  }
+  
+  openBlindBox = () => {
+    this.closeDia();
+    this.props.call && this.props.call();
+  }
+
+  closeDia = () => {
+    const { closeWin } = this.props;
+    closeWin && closeWin();
+  }
+
+  render() {
+    return (
+      <div className="addonechance ">
+        <img className="biao_ti " src={this.state.resList['9b9b55f0-87a8-4667-9067-12c346f1d948'].url} />
+        <img className="an_niu md8" onClick={this.openBlindBox} src={this.state.resList['cbefada8-024a-46dc-a319-e893cb64e790'].url} />
+        <img className="guan_bi " onClick={this.closeDia} src={this.state.resList['d3cb848a-92ec-40c3-9684-5edd63eae927'].url} />
+        <span className="text ">已经帮好友赢得1次<br />开盲盒机会</span>
+      </div>
+    );
+  }
+}
+export default Comaddonechance;

src/components/comaddonechance/comaddonechance.less

+.addonechance {
+  width: 678px;
+  height: 794px;
+  opacity: 1;
+  left: 36px;
+  top: 40%;
+  transform: translateY(-50%);
+  position: absolute;
+  transform-origin: 0px 0px 0px;
+  .biao_ti {
+    width: 678px;
+    height: 794px;
+    opacity: 1;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+  .an_niu {
+    width: 427px;
+    height: 112px;
+    opacity: 1;
+    left: 126px;
+    top: 620px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+  .guan_bi {
+    width: 46px;
+    height: 47px;
+    opacity: 0.5019607843137255;
+    left: 575px;
+    top: 184px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+  .text {
+    width: 100%;
+    opacity: 1;
+    top: 445px;
+    text-align: center;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+    font-size: 30px;
+    color: rgba(253, 235, 175, 1);
+  }
+}

src/components/comgetprize/comgetprize.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comgetprize.less';
+import { getSVGA } from "../../utils/svga.js";
+import { Toast, showLoading, hideLoading, configLoading, DefaultIcon, RainbowIcon, SlackIcon, WaveIcon } from '@spark/ui'
+
+configLoading(RainbowIcon);
+let flag = true;
+class Comgetprize extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      resList: resList,
+      openPrizeStatus: true,
+      showAni: false
+    };
+  }
+
+  componentDidMount() {
+    this.initSvga()
+  }
+
+  goPrizePage = () => {
+    this.closeDia();
+    this.props.call && this.props.call();
+  }
+
+  initSvga = () => {
+    const boxUrl = '//yun.duiba.com.cn/spark/assets/9da04f37d08ba98d64a90699df596ce9476753d8.svga';
+    getSVGA(boxUrl, '.box-svga', this.showPrize);
+  }
+  showPrize = () => {
+    const diaUrl = '//yun.duiba.com.cn/aurora/assets/c58972678b52d74c97f7cd856d7934eba3d856cf.svga';
+    getSVGA(diaUrl, '.man-svga');
+
+    document.getElementsByClassName("prize_box_show")[0].style.animationName = "showAni"
+  }
+
+  closeDia = () => {
+    const { closeWin } = this.props;
+    closeWin && closeWin();
+  }
+
+  //去除防连点
+  removeEnabled = (time=2000) => {
+    setTimeout(() => {
+      flag = true;
+    }, time);
+  }
+
+  render() {
+    const { optionName, optionImg, url} = this.props.data;
+    return (
+      <div className="getprize ">
+        {/*  */}
+        <div className="box-mc " >
+          <div className="box-svga " ></div>
+        </div>
+        <div className="man-mc " >
+          <div className="man-svga " ></div>
+        </div>
+        <div className="prize_box prize_box_show">
+          <img className="biao_ti " src={this.state.resList['221d2e2b-7c3f-46b3-8a0d-e437d8b5934b'].url} />
+          <img className="an_niu " onClick={this.goPrizePage} src={this.state.resList['b3b4b908-2332-4256-bf2e-e4d9977d85fe'].url} />
+          {/* <span className="text_tip ">可在【我的奖品】中查看</span> */}
+          <span className="text_prize ">开出{optionName}奖品！</span>
+          <img className="guan_bi " onClick={this.closeDia} src={this.state.resList['d3cb848a-92ec-40c3-9684-5edd63eae927'].url} />
+          <img className="prize_img " src={optionImg} />
+        </div>
+
+
+      </div>
+    );
+  }
+}
+export default Comgetprize;

src/components/comgetprize/comgetprize.less

+.getprize {
+  width: 750px;
+  height: 100%;
+  opacity: 1;
+  position: absolute;
+  transform-origin: 0px 0px 0px;
+
+  .prize_box {
+    width: 678px;
+    height: 943px;
+    left: 36px;
+    opacity: 0;
+    top: calc(45% - 943px / 2);
+    position: absolute;
+  }
+
+  .prize_box_show {
+    animation-duration: .5s;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease;
+  }
+
+  .qu_xian_3758 {
+    width: 678px;
+    height: 776px;
+    opacity: 1;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+
+  .biao_ti {
+    width: 566px;
+    height: 665px;
+    opacity: 1;
+    left: 56px;
+    top: 278px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+
+  .an_niu {
+    width: 400px;
+    height: 112px;
+    opacity: 1;
+    left: 139px;
+    top: 771px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+
+  .text_tip {
+    width: 100%;
+    height: 25px;
+    opacity: 1;
+    top: 454px;
+    text-align: center;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+    font-size: 14.22501px;
+    color: rgba(250, 200, 95, 1);
+  }
+
+  .text_prize {
+    width: 100%;
+    height: 34px;
+    opacity: 1;
+    top: 420px;
+    text-align: center;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+    font-size: 30px;
+    color: rgba(253, 235, 175, 1);
+  }
+
+  .guan_bi {
+    width: 46px;
+    height: 47px;
+    opacity: 0.5019607843137255;
+    left: 575px;
+    top: 193px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+
+  .prize_img {
+    width: 223px;
+    height: 223px;
+    opacity: 1;
+    left: 227px;
+    top: 499px;
+    background-color: rgb(255, 240, 216);
+    border-radius: 20px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+
+  .box-mc {
+    width: 750px;
+    height: 1624px;
+    top: calc(50% - 1624px / 2);
+    position: absolute;
+
+    .box-svga {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+    }
+  }
+
+  .man-mc {
+    width: 750px;
+    height: 1624px;
+    top: calc(50% - 1624px / 2);
+    position: absolute;
+
+    .man-svga {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: -188px;
+    }
+  }
+}
+
+@keyframes showAni {
+  0% {
+    opacity: 1;
+    transform: scale(0.2);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
\ No newline at end of file

src/components/commissprize/commissprize.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './commissprize.less';
+import { getSVGA } from "../../utils/svga.js";
+
+let flag = true;
+class Commissprize extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { 
+      resList: resList,
+      show: ""
+     };
+  }
+
+  componentDidMount() {
+    this.initSvga();
+  }
+
+  initSvga = () => {
+    const boxUrl = '//yun.duiba.com.cn/spark/assets/9da04f37d08ba98d64a90699df596ce9476753d8.svga';
+    getSVGA(boxUrl, '.box-svga',this.showMain);
+  }
+
+  showMain = () => {
+    this.setState({
+      show: "show"
+    })
+  }
+
+  playAgain = () => {
+    if (!flag) return; flag = false;
+    this.removeEnabled(2000);
+    this.closeDia();
+    this.props.call && this.props.call();
+  }
+
+  closeDia = () => {
+    const { closeWin } = this.props;
+    closeWin && closeWin();
+  }
+
+  //去除防连点
+  removeEnabled = (time=2000) => {
+    setTimeout(() => {
+      flag = true;
+    }, time);
+  }
+
+  render() {
+    const { show } = this.state;
+    return (
+      <div className="miss_prize_page">
+        <div className="box-mc " >
+          <div className="box-svga " ></div>
+        </div>
+        <div className={"missprize " + show}>
+          <img className="biao_ti " src={this.state.resList['8e6023ae-a6ee-4f01-8041-e008a776321e'].url} />
+          <img className="an_niu md4" onClick={this.playAgain} src={this.state.resList['7ac99197-c1c9-47e3-a535-03bad2683578'].url} />
+          <span className="text ">未能开出奖品<br />下次继续努力～</span>
+          <img className="guan_bi " onClick={this.closeDia} src={this.state.resList['d3cb848a-92ec-40c3-9684-5edd63eae927'].url} />
+        </div>
+      </div>
+    );
+  }
+}
+export default Commissprize;

src/components/commissprize/commissprize.less

+.miss_prize_page {
+  width: 750px;
+  height: 100%;
+  opacity: 1;
+  position: absolute;
+  transform-origin: 0px 0px 0px;
+
+  .missprize {
+    width: 678px;
+    height: 819px;
+    opacity: 1;
+    left: 36px;
+    top: 40%;
+    transform: translateY(-50%);
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+    opacity: 0;
+  }
+  .show {
+    opacity:1
+  }
+
+  .box-mc {
+    width: 750px;
+    height: 1624px;
+    top: calc(50% - 1624px / 2);
+    position: absolute;
+
+    .box-svga {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+    }
+  }
+
+  .biao_ti {
+    width: 677px;
+    height: 819px;
+    opacity: 1;
+    left: -18px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+
+  .an_niu {
+    width: 427px;
+    height: 112px;
+    opacity: 1;
+    left: 125px;
+    top: 631px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+
+  .text {
+    width: 100%;
+    height: 81px;
+    opacity: 1;
+    top: 487px;
+    text-align: center;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+    font-size: 30px;
+    color: rgba(253, 235, 175, 1);
+  }
+
+  .guan_bi {
+    width: 46px;
+    height: 47px;
+    opacity: 0.5019607843137255;
+    left: 592px;
+    top: 173px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+}
\ No newline at end of file

src/components/comneedshare/comneedshare.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comneedshare.less';
+
+let flag = true;
+class Comneedshare extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+
+  componentDidMount(){
+  }
+
+  handleInvite = () => {
+    this.closeDia();
+    this.props.call && this.props.call();
+  }
+  
+  closeDia = () => {
+    const { closeWin } = this.props;
+    closeWin && closeWin();
+  }
+  
+  //去除防连点
+  removeEnabled = (time=2000) => {
+    setTimeout(() => {
+      flag = true;
+    }, time);
+  }
+
+  render() {
+    return (
+      <div className="needshare ">
+          <img
+            className="text "
+            src={this.state.resList['857df60f-9643-4706-84ac-baa97ff7cea0'].url}
+          />
+          <img className="guan_bi " onClick={this.closeDia} src={this.state.resList['b2a0defc-96bb-4dd4-a593-8c6f06ec6ec2'].url} />
+          <img className="an_niu md5" onClick={this.handleInvite} src={this.state.resList['d5c736a3-be0e-4bdf-9271-707f875602cc'].url} />
+          <img className="biao_ti " src={this.state.resList['5313d9ca-26b4-4891-8266-8e9613fe0afc'].url} />
+      </div>
+    );
+  }
+}
+export default Comneedshare;

src/components/comneedshare/comneedshare.less

+.needshare {
+  width: 678px;
+  height: 836px;
+  opacity: 1;
+  left: 36px;
+  top: 40%;
+  transform: translateY(-50%);
+  position: absolute;
+  transform-origin: 0px 0px 0px;
+ 
+    .text {
+      width: 678px;
+      height: 836px;
+      opacity: 1;
+      position: absolute;
+      transform-origin: 0px 0px 0px;
+    }
+    .guan_bi {
+      width: 46px;
+      height: 47px;
+      opacity: 0.5019607843137255;
+      left: 573px;
+      top: 190px;
+      position: absolute;
+      transform-origin: 0px 0px 0px;
+    }
+    .an_niu {
+      width: 427px;
+      height: 112px;
+      opacity: 1;
+      left: 124px;
+      top: 648px;
+      position: absolute;
+      transform-origin: 0px 0px 0px;
+    }
+    .biao_ti {
+      width: 357px;
+      height: 51px;
+      opacity: 1;
+      left: 158px;
+      top: 398px;
+      position: absolute;
+      transform-origin: 0px 0px 0px;
+    }
+}

src/components/comnocount/comnocount.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comnocount.less';
+class Comnocount extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+
+  componentDidMount(){
+
+  }
+
+  closeDia = () => {
+    const { closeWin } = this.props;
+    closeWin && closeWin();
+  }
+  
+  render() {
+    return (
+      <div className="nocount ">
+        <img className="biao_ti " src={this.state.resList['79a29530-8dee-4dab-93d8-5e87e344026e'].url} />
+        <img className="an_niu md6" onClick={this.closeDia} src={this.state.resList['ebffc693-1de6-4100-9e18-3eae5b11a712'].url} />
+        <span className="text ">明天再来吧～</span>
+        <img className="guan_bi " onClick={this.closeDia} src={this.state.resList['d3cb848a-92ec-40c3-9684-5edd63eae927'].url} />
+      </div>
+    );
+  }
+}
+export default Comnocount;

src/components/comnocount/comnocount.less

+.nocount {
+  width: 678px;
+  height: 773px;
+  opacity: 1;
+  left: 36px;
+  top: 40%;
+  transform: translateY(-50%);
+  position: absolute;
+  transform-origin: 0px 0px 0px;
+  .biao_ti {
+    width: 677px;
+    height: 773px;
+    opacity: 1;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+  .an_niu {
+    width: 427px;
+    height: 112px;
+    opacity: 1;
+    left: 126px;
+    top: 592px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+  .text {
+    width: 100%;
+    height: 30px;
+    opacity: 1;
+    top: 496px;
+    text-align: center;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+    font-size: 30px;
+    color: rgba(253, 235, 175, 1);
+  }
+  .guan_bi {
+    width: 46px;
+    height: 47px;
+    opacity: 0.5019607843137255;
+    left: 575px;
+    top: 192px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+}

src/components/comnologin/comnologin.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comnologin.less';
+class Comnologin extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+  // 强登，这个页面用不上
+
+  componentDidMount(){
+
+  }
+
+  closeDia = () => {
+    const { closeWin } = this.props;
+    closeWin && closeWin();
+    this.props.call && this.props.call();
+  }
+  
+  render() {
+    return (
+      <div className="nologin ">
+        <img className="xing_zhuang_819 " src={this.state.resList['6193ef15-a5e0-4352-8640-fa5dbd8a5318'].url} />
+        <img className="an_niu " src={this.state.resList['45ee0280-1483-401d-9c5a-b0dd50bec188'].url} />
+        <img className="guan_bi " onClick={this.closeDia} src={this.state.resList['d3cb848a-92ec-40c3-9684-5edd63eae927'].url} />
+      </div>
+    );
+  }
+}
+export default Comnologin;

src/components/comnologin/comnologin.less

+.nologin {
+  width: 678px;
+  height: 730px;
+  opacity: 1;
+  left: 36px;
+  top: 40%;
+  transform: translateY(-50%);
+  position: absolute;
+  transform-origin: 0px 0px 0px;
+  .xing_zhuang_819 {
+    width: 677px;
+    height: 730px;
+    opacity: 1;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+  .an_niu {
+    width: 427px;
+    height: 112px;
+    opacity: 1;
+    left: 128px;
+    top: 549px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+  .guan_bi {
+    width: 46px;
+    height: 47px;
+    opacity: 0.5019607843137255;
+    left: 577px;
+    top: 149px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+}

src/components/comrule/comrule.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comrule.less';
+class Comrule extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+
+  componentDidMount(){
+    document.getElementById("text").innerHTML = this.props.data;
+  }
+
+  closeDia = () => {
+    const { closeWin } = this.props;
+    closeWin && closeWin();
+    this.props.call && this.props.call();
+  }
+  
+  render() {
+    return (
+      <div className="rule ">
+        <img className="biao_ti " src={this.state.resList['8056bb59-f8b9-471f-bb6d-b91b5a9d6c03'].url} />
+        <div className="text " id="text">
+         
+        </div>
+        <img className="guan_bi " onClick={this.closeDia} src={this.state.resList['d3cb848a-92ec-40c3-9684-5edd63eae927'].url} />
+      </div>
+    );
+  }
+}
+export default Comrule;

src/components/comrule/comrule.less

+.rule {
+  width: 678px;
+  height: 1107px;
+  opacity: 1;
+  left: 36px;
+  top: 40%;
+  transform: translateY(-50%);
+  position: absolute;
+  transform-origin: 0px 0px 0px;
+  .biao_ti {
+    width: 678px;
+    height: 1107px;
+    opacity: 1;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+  .text {
+    width: 468px;
+    height: 675px;
+    opacity: 1;
+    left: 106px;
+    top: 338px;
+    position: absolute;
+    overflow: auto;
+    transform-origin: 0px 0px 0px;
+    font-size: 26px;
+    color: rgba(253, 235, 175, 1);
+  }
+  .guan_bi {
+    width: 46px;
+    height: 47px;
+    opacity: 0.5019607843137255;
+    left: 575px;
+    top: 132px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+}

src/components/comsharebg/comsharebg.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comsharebg.less';
+class Comsharebg extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+
+  componentDidMount(){
+    setTimeout(()=>{
+      this.closeDia();
+    },5000)
+  }
+
+  closeDia = () => {
+    const { closeWin } = this.props;
+    closeWin && closeWin();
+    this.props.call && this.props.call();
+  }
+  
+  render() {
+    return (
+      <div className="sharebg " onClick={this.closeDia}>
+        <img className="xing_zhuang_819 " src="//yun.duiba.com.cn/spark/assets/c457e274c61e43e4c04b13452f73f1b27d46e1a1.png" />
+      </div>
+    );
+  }
+}
+export default Comsharebg;

src/components/comsharebg/comsharebg.less

+.sharebg {
+  width: 750px;
+  height: 100%;
+  opacity: 1;
+  position: absolute;
+  transform-origin: 0px 0px 0px;
+  .xing_zhuang_819 {
+    width: 630px;
+    opacity: 1;
+    position: absolute;
+    right:40px;
+    top:20px;
+    transform-origin: 0px 0px 0px;
+  }
+  
+}

src/components/comsharepanel/comsharepanel.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comsharepanel.less';
+import { appShare } from "../../utils/share.js"
+class Comsharepanel extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+
+  componentDidMount() {
+    console.log(this.props.data)
+  }
+
+  clickShare = (num) => {
+    appShare(this.props.data,num);
+    console.log("num",num)
+    setTimeout(()=>{
+      this.closeDia();
+      this.props.call && this.props.call();
+    },5000)
+  }
+
+  closeDia = () => {
+    const { closeWin } = this.props;
+    closeWin && closeWin();
+  }
+
+  render() {
+    return (
+      <div className="sharepanel ">
+        <div className="share_box">
+          <div className="left" onClick={(e)=>this.clickShare("0",e)}>
+            <div className="img_box">
+              <img className="share_1" src="//yun.duiba.com.cn/spark/assets/c8e44e6099ddf90ee60c0476e1f8c0a6bc2b82da.png" alt="" />
+            </div>
+            <div>微信</div>
+          </div>
+          <div className="right" onClick={(e)=>this.clickShare("1",e)}>
+            <div className="img_box">
+             <img className="share_2" src="//yun.duiba.com.cn/spark/assets/6b9820207e9e124317b2dc78cd104af792655d87.png" alt="" />
+            </div>
+            <div>朋友圈</div>
+          </div>
+          <div className="cancle" onClick={this.closeDia}>取消</div>
+        </div>
+      </div>
+    );
+  }
+}
+export default Comsharepanel;

src/components/comsharepanel/comsharepanel.less

+.sharepanel {
+  width: 750px;
+  height: 100%;
+  opacity: 1;
+  top: 0;
+  position: absolute;
+  transform-origin: 0px 0px 0px;
+
+  .share_box{
+    width: 750px;
+    height:380px;
+    background: #fff;
+    position: absolute;
+    bottom:0;
+    left: 0;
+    // padding:20px 80px;
+    box-sizing: border-box;
+
+    .left {
+      margin-left: 80px;
+    }
+
+    .left,.right{
+      width:295px;
+      float:left;
+      text-align: center;
+      box-sizing: border-box;
+      margin-top:20px;
+      
+      
+      .img_box {
+        height:160px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  
+    img {
+      width:110px;
+      line-height: 110px;
+
+    }
+
+    .cancle{
+      width:100%;
+      height:100px;
+      font-size: 32px;
+      border-top:2px solid gray;
+      position: absolute;
+      bottom:0;
+      text-align: center;
+      line-height: 100px;
+    }
+   
+  }
+ 
+}

src/components/comsharesuccess/comsharesuccess.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comsharesuccess.less';
+class Comsharesuccess extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+
+  componentDidMount(){
+    //  这个组件不用
+  }
+
+  closeDia = () => {
+    const { closeWin } = this.props;
+    closeWin && closeWin();
+    this.props.call && this.props.call();
+  }
+  
+  render() {
+    return (
+      <div className="sharesuccess ">
+        <img className="tu_ceng_831_kao_bei " src={this.state.resList['8b56a8b0-dd9b-4a2b-9222-46e9cb7b8870'].url} />
+        <img className="an_niu " src={this.state.resList['2ecfe067-cd86-4a2b-bdbe-5ca655b87914'].url} />
+        <img className="guan_bi " onClick={this.closeDia} src={this.state.resList['56136f76-f061-4138-9586-b67b5c14eb41'].url} />
+        <span className="text ">获得1次开盲盒机会</span>
+      </div>
+    );
+  }
+}
+export default Comsharesuccess;

src/components/comsharesuccess/comsharesuccess.less

+.sharesuccess {
+  left: 0px;
+  width: 750px;
+  height: 1624px;
+  display: block;
+  top: 50%;
+  transform: translateY(-50%);
+  position: absolute;
+  .tu_ceng_831_kao_bei {
+    width: 678px;
+    height: 806px;
+    opacity: 1;
+    left: 36px;
+    top: 301px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+  .an_niu {
+    width: 427px;
+    height: 112px;
+    opacity: 1;
+    left: 163px;
+    top: 933px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+  .guan_bi {
+    width: 46px;
+    height: 47px;
+    opacity: 0.5019607843137255;
+    left: 612px;
+    top: 497px;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+  }
+  .text {
+    width: 100%;
+    height: 31px;
+    opacity: 1;
+    top: 780px;
+    text-align: center;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+    font-size: 30px;
+    color: rgba(253, 235, 175, 1);
+  }
+}

src/pages/pagehome/pagehome.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+import API from '../../api';
+
+import './pagehome.less';
+import { ViewCtrl, Dia } from "../../utils/viewCtrl.js";
+import { Toast } from '@spark/ui';
+import { showToast } from "../../utils/toast.js"
+import { wxShare, appShare } from "../../utils/share.js"
+import EventBus from "../../utils/eventBus.js"
+
+let flag = true;
+class Pagehome extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      resList: resList,
+      todayRemainTimes: null,
+      sumTimes: null,
+      activityStartTime: "", //开始时间
+      activityEndTime: "",  // 结束时间
+      byInvite: false,  // 能否通过邀请获得次数
+      addPop: false, // 是否有新增助力人数
+      addTimes: null, // 新增助力数量
+      assistPop: null, // 是否助力他人成功
+      isNew: false,
+      openBtnNoClick: true,
+      inviteCode: "",
+      joinLimitFlag:false,
+      shareGuide:false,
+      shareBtnNoClick: true,
+      isFromWx: false,
+      afterShareToast: ""
+    };
+  }
+
+  componentDidMount() {
+    this.getRule();
+    this.getHomeInfo();
+
+    this.setState({
+      isFromWx: CFG.isFromWx
+    })
+    EventBus.on("shareInit",()=>{
+      this.shareInit();
+    })
+  }
+
+  getHomeInfo = () => {
+    API.homeInfo().then(res => {
+      if (res.success) {
+        this.setState({
+          todayRemainTimes: res.data.todayRemainTimes,
+          sumTimes: res.data.sumTimes,
+          activityStartTime: this.formatDate(res.data.activityStartTime),
+          activityEndTime: this.formatDate(res.data.activityEndTime),
+          byInvite: res.data.byInvite,
+          addPop: res.data.addPop,
+          addTimes: res.data.addTimes,
+          assistPop: res.data.assistPop,
+          isNew: res.data.isNew,
+          joinLimitFlag: res.data.joinLimitFlag,
+          shareGuide: res.data.shareGuide
+        })
+        // 助力他人弹框
+        if (res.data.assistPop === "1") {
+          ViewCtrl.showWin(Dia.comAddOneChance, null, () => {
+            this.doJoin();
+          })
+        }else if(res.data.assistPop === "2"){
+          Toast("您的好友已达助力上限");
+        }else{
+          // 其他情况，不弹
+        }
+        // 自己被助力弹框
+        if (res.data.addPop) {
+          ViewCtrl.showWin(Dia.comAddCount,res.data,()=>{
+            this.doJoin();
+          })
+        }
+
+      } else {
+        showToast(res.code)
+      }
+    })
+  }
+
+  shareInit = () => {
+    API.getCode().then(res => {
+      if(res.success){
+        this.setState({
+          inviteCode: res.data
+        })
+        wxShare(res.data)
+      }else {
+        showToast(res.code)
+      }
+    })
+  }
+
+  openBlindBox = () => {
+    if (!flag) return; flag = false;
+    this.removeEnabled(2000);
+    this.setState({
+      openBtnNoClick: false
+    })
+    
+    const { joinLimitFlag, todayRemainTimes, byInvite} = this.state;
+    if(joinLimitFlag){
+       // 今日次数已达上限5次
+       ViewCtrl.showWin(Dia.comNoCount)
+      return;
+    }
+    if(todayRemainTimes){
+      this.doJoin();
+    }else{
+      if(byInvite){
+        // 可以通过邀请增加次数
+        ViewCtrl.showWin(Dia.comNeedShare,null,()=>{
+          // 邀请好友
+          flag = true;
+          this.handleShare();
+        })
+      }else{
+        Toast("今日次数用完，明天再来");
+      }
+    }
+  }
+
+  // 直接抽盲盒;差一点中奖弹框的【继续开盲盒】按钮；帮好友助力成功弹框的【我也要开盲盒】按钮；自己被助力成功的【去开盲盒】按钮
+  doJoin = () => {
+    API.join().then(res => {
+      if (res.success) {
+        this.setState({
+          todayRemainTimes: res.data.todayRemainTimes,
+          sumTimes: res.data.sumTimes,
+          byInvite: res.data.byInvite,
+          shareGuide: res.data.shareGuide,
+          joinLimitFlag: res.data.joinLimitFlag
+
+        })
+        if (res.data.optionId === "thanks") {
+          ViewCtrl.showWin(Dia.comMissPrize, null, () => {
+            this.doJoin();
+          })
+        } else {
+          ViewCtrl.showWin(Dia.comGetPrize, res.data, () => {
+
+             // 跳转奖品详情页
+              window.location.href = location.origin + res.data.url;
+          })
+        }
+        
+      } else {
+        showToast(res.code)
+      }
+    })
+  }
+  
+  // 分享
+  handleShare = async() => {
+    if (!flag) return; flag = false;
+    this.removeEnabled(2000);
+
+    this.setState({
+      shareBtnNoClick: false
+    })
+    this.recordShareGuide();
+
+    let res = await API.getCode().catch(()=>{showToast()})
+    if(res.success){
+      let inviteCode = res.data;
+      if(CFG.isWx){
+        // 如果是在微信内，调用微信的分享方法
+        wxShare(inviteCode);
+        ViewCtrl.showWin(Dia.comShareBg,null,()=>{
+          // 关闭蒙层
+          Toast(this.state.afterShareToast ? this.state.afterShareToast : "分享成功");
+          this.getHomeInfo();
+        });
+      }else{
+        // TODO 端内分享
+        ViewCtrl.showWin(Dia.comSharePanel,inviteCode,()=>{
+          // 关闭蒙层
+          Toast(this.state.afterShareToast ? this.state.afterShareToast : "分享成功");
+          this.getHomeInfo();
+        })
+        
+      }
+    }else{
+      showToast(res.code);
+    }
+  }
+
+  // 记录点击了 邀请按钮
+  recordShareGuide = () => {
+    API.recordShareGuide().then(res => {
+      if(res.success){
+        if(res.data){
+          this.setState({
+            afterShareToast: "分享成功，增加一次抽盲盒机会"
+          })
+        }else{
+          this.setState({
+            afterShareToast: "分享成功"
+          })
+        }
+      }else{
+
+      }
+    })
+  }
+
+  showRule = () => {
+    ViewCtrl.showWin(Dia.comRule, this.state.rule)
+  }
+
+  goToMyPrize = () => {
+    window.location.href = CFG.prizePageUrl;
+  }
+
+  //去除防连点
+  removeEnabled = (time=2000) => {
+    setTimeout(() => {
+      flag = true;
+    }, time);
+  }
+
+  getRule = () => {
+    API.getRule().then(res => {
+      if (res.success) {
+        this.setState({
+          rule: res.data
+        })
+      } else {
+        // showToastres.code);
+      }
+    })
+  }
+
+  formatDate = (time) => {
+    if(!time) return;
+    time = time.substr(0,10).replace(/-/g,"/");
+    let date = new Date(time);
+    let year = date.getFullYear();
+    let month = date.getMonth() + 1;
+    let day = date.getDate();
+    return year + "." + month + "." + day;
+  }
+
+  render() {
+    const { activityStartTime, activityEndTime, todayRemainTimes, sumTimes, isNew, openBtnNoClick,shareGuide, shareBtnNoClick, isFromWx } = this.state;
+    let homePageClass = isFromWx ? "md10" : "";
+    let openBtnClass = isFromWx ? "md11" : "";
+    let shareBtnClass = isFromWx ? "md12" : "";
+    return (
+      <div className={"home md1 " + homePageClass}>
+        <div className="home_page ">
+          <img className="logo " src="//yun.duiba.com.cn/spark/assets/b57ef3caf52805b78a18b3d6c2c71483b59276c5.png" />
+          <img className="font_bg " src="//yun.duiba.com.cn/spark/assets/75eceb130da92def576abcfe553ffe67127b9d6e.png" />
+
+          <img className="rule " onClick={this.showRule} src="//yun.duiba.com.cn/spark/assets/ccad83d62dc0d3e19dbf16a63bf68712bd5915d2.png" />
+          <img className="myPrize " onClick={this.goToMyPrize} src="//yun.duiba.com.cn/spark/assets/f9e4929724068cf37b8492ff078577fe47e1b9e7.png" />
+
+          <div className="time"><span className="text">活动时间：</span><br />
+            <span>{activityStartTime}--{activityEndTime}</span></div>
+          <div className="btn_box ">
+            <div className={"open md2 " + openBtnClass} onClick={this.openBlindBox}>
+              <img className="open_bg " src="//yun.duiba.com.cn/spark/assets/8f03ae190954e5915c3db3e03f3f71254978cb2a.png" />
+              <div className="open_btn_ani">
+                <img className="open_btn " src="//yun.duiba.com.cn/spark/assets/f1ad64f578ec7c7765d7eb75170cf0895f093fb9.png" />
+                <div className="game_count">{sumTimes}</div>
+              </div>
+            </div>
+            <img className={"share md3 " + shareBtnClass} onClick={this.handleShare} src={this.state.resList['78ce50ed-9b59-4c17-8c1d-b2330b16b166'].url} />
+
+            {isNew && openBtnNoClick && <img className="hand hand_ani" src="//yun.duiba.com.cn/spark/assets/87d0490f20be697a436bb25bebad1323f01fe46a.png" />}
+
+            {shareGuide && shareBtnNoClick && <img className="share_hand hand_ani" src="//yun.duiba.com.cn/spark/assets/87d0490f20be697a436bb25bebad1323f01fe46a.png" />}
+
+          </div>
+          <div className="text_tip " >
+            <span className="num ">{todayRemainTimes}</span>
+            <img className="text_img" src={this.state.resList['08aab2d3-d617-401f-aea2-f5bf30bfcf4e'].url} />
+          </div>
+        </div>
+
+      </div>
+    );
+  }
+}
+export default Pagehome;

src/pages/pagehome/pagehome.less

+.home {
+  top: 0px;
+  left: 0px;
+  width: 750px;
+  height: 100%;
+  display: block;
+  position: absolute;
+  overflow: hidden;
+  z-index: 99;
+  .home_page {
+    width: 750px;
+    height: 1624px;
+    opacity: 1;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+    top:calc(50% - 1624px / 2);
+    .logo {
+      width: 750px;
+      height: 1624px;
+      opacity: 1;
+      position: absolute;
+      transform-origin: 0px 0px 0px;
+    }
+    .font_bg{
+      position: absolute;
+      bottom:0;
+      width:750px;
+      z-index: 98;
+    }
+    .rule {
+      width:120px;
+      height:45px;
+      position: absolute;
+      left:0;
+      top:290px;
+    }
+    .myPrize {
+      width:120px;
+      height:45px;
+      position: absolute;
+      right:0;
+      top:266px;
+    }
+    .time{
+      width:100%;
+      text-align: center;
+      position: absolute;
+      top:472px;
+      color:#fff;
+      font-size: 30px;
+      line-height: 30px;
+      .text{
+        font-size: 24px;
+      }
+    }
+    .btn_box {
+      width: 580px;
+      height: 89px;
+      opacity: 1;
+      left: 87px;
+      top: 1212px;
+      position: absolute;
+      transform-origin: 0px 0px 0px;
+      z-index: 98;
+      .open {
+        width: 225px;
+        height: 89px;
+        opacity: 1;
+        position: absolute;
+        transform-origin: 0px 0px 0px;
+        .open_bg {
+          width: 225px;
+          position: absolute;
+          bottom:0;
+        }
+        .open_btn_ani{
+          width: 225px;
+          height: 89px;
+          position: absolute;
+          animation: openBtnAni 1s ease infinite;
+        }
+        .open_btn{
+          width:211px;
+          position: absolute;
+          bottom: 7px;
+          left:7px;
+          
+        }
+        .game_count{
+          width:50px;
+          height:45px;
+          position: absolute;
+          right:36px;
+          top:6px;
+          line-height: 45px;
+          text-align: center;
+          font-size:32px;
+          font-weight: 600;
+          color:rgb(179,39,26);
+        }
+      }
+      .share {
+        width: 317px;
+        height: 89px;
+        opacity: 1;
+        left: 263px;
+        position: absolute;
+        transform-origin: 0px 0px 0px;
+      }
+      .invite {
+        width: 317px;
+        height: 89px;
+        opacity: 1;
+        left: 263px;
+        position: absolute;
+        transform-origin: 0px 0px 0px;
+      }
+      .hand {
+        width: 90px;
+        height: 111px;
+        opacity: 1;
+        position: absolute;
+        transform-origin: 50% 50%;
+        left:140px;
+        top:40px;
+        z-index: 99;
+      }
+      .share_hand{
+        width: 90px;
+        height: 111px;
+        opacity: 1;
+        position: absolute;
+        transform-origin: 50% 50%;
+        right:20px;
+        top:40px;
+        z-index: 99;
+      }
+      .hand_ani{
+        animation: handAni 1s ease infinite;
+      }
+    }
+    
+    .text_tip {
+      width: 201px;
+      height: 62px;
+      opacity: 1;
+      left: 70px;
+      top: 1140px;
+      position: absolute;
+      transform-origin: 0px 0px 0px;
+      .text_img{
+        width:100%;
+      }
+      .num {
+        position: absolute;
+        right: 20px;
+        font-size: 26px;
+        top:16px;
+        color: rgba(255, 255, 255, 1);
+      }
+    }
+  }
+ 
+}
+
+@keyframes openBtnAni {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(.95);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes handAni {
+  0% {
+    transform: scale(1);
+  }
+  70% {
+    transform: scale(.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
\ No newline at end of file

src/pages/pageshare/pageshare.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import API from '../../api';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pageshare.less';
+class Pageshare extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { 
+      resList: resList,
+      time: ""
+     };
+     console.log(CFG.activeTime)
+  }
+
+  componentDidMount(){
+    // let pageBizId = 506;
+    // API.buriedPoint({pageBizId});
+    this.setState({
+      time: CFG.activeTime
+    })
+  }
+
+  openGame = () => {
+    console.log(getLoginPageUrl())
+    window.location.href = getLoginPageUrl();
+  }
+  render() {
+    const { time } = this.state;
+    return (
+      <div className="share ">
+        <div className="share_page ">
+          <img className="share_bg " src="//yun.duiba.com.cn/spark/assets/6458855ad7ca1f080589e4ada39455d333f6acdb.png" />
+          <img className="kai_mang_he md7"  onClick={this.openGame} src={this.state.resList['73ede311-026c-4287-9f52-a991aa6a7cab'].url} />
+          <div className="time"><span className="text">活动时间：</span><br />{time}</div>
+          <div className="info_box ">
+            <img className="avatar " src="//yun.duiba.com.cn/spark/assets/0e7d553ede77a1f1a2724bd9aabf8e73660c09e1.png" />
+            <img
+              className="text "
+              src={this.state.resList['b11d34bb-46ab-4862-aeb8-888f9db6bf38'].url}
+            />
+
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+export default Pageshare;

src/pages/pageshare/pageshare.less

+.share {
+  top: 0px;
+  left: 0px;
+  width: 750px;
+  height: 100%;
+  overflow: hidden;
+  display: block;
+  position: absolute;
+  z-index: 99;
+  .share_page {
+    width: 750px;
+    height: 1624px;
+    opacity: 1;
+    position: absolute;
+    transform-origin: 0px 0px 0px;
+    top:calc(50% - 1624px / 2);
+    .share_bg {
+      width: 750px;
+      height: 1624px;
+      opacity: 1;
+      position: absolute;
+      top:0;
+      transform-origin: 0px 0px 0px;
+    }
+    .kai_mang_he {
+      width: 278px;
+      height: 99px;
+      opacity: 1;
+      left: 236px;
+      top: 1216px;
+      position: absolute;
+      transform-origin: 0px 0px 0px;
+    }
+    .time{
+      width:100%;
+      text-align: center;
+      position: absolute;
+      top:486px;
+      color:#fff;
+      font-size: 30px;
+      line-height: 30px;
+      .text{
+        font-size: 24px;
+      }
+    }
+    .hand {
+      width: 90px;
+      height: 111px;
+      opacity: 1;
+      position: absolute;
+      transform-origin: 50% 50%;
+      left:410px;
+      top:1260px;
+    }
+    .hand_ani{
+      animation: handAni 1s ease infinite;
+    }
+    .info_box {
+      width: 445px;
+      height: 90px;
+      opacity: 1;
+      left: 152px;
+      top: 1020px;
+      position: absolute;
+      transform-origin: 0px 0px 0px;
+      .avatar {
+        width: 87px;
+        height: 87px;
+        opacity: 1;
+        top: 1px;
+        position: absolute;
+        transform-origin: 0px 0px 0px;
+      }
+      .text{
+        width: 334px;
+        height: 90px;
+        opacity: 1;
+        left: 111px;
+        position: absolute;
+        transform-origin: 0px 0px 0px;
+      }
+    }
+  }
+}
+
+@keyframes handAni {
+  0% {
+    transform: scale(1);
+  }
+  70% {
+    transform: scale(.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

src/resconfig/res.js

+
+/**
+ * 目前没有用到
+ * @param {*} resList 
+ * @param {*} uuid 
+ */
+const getSrcByUuid = (resList, uuid) => {
+    resList = resList || [];
+    for (let i = 0; i < resList.length; i++) {
+        if (resList[i].uuid == uuid) {
+            return resList[i].url
+        }
+    }
+}
+module.exports = {
+    getSrcByUuid
+}
\ No newline at end of file

src/utils/eventBus.js

+let eventMap = {};
+
+const Bus = {
+  on(name, callbacl) {
+    eventMap[name] = callbacl;
+  },
+  emit(name,data) {
+    eventMap[name] && eventMap[name](data)
+  },
+  remove(name){
+    if(eventMap[name]){
+      delete eventMap[name]
+    }
+  }
+};
+
+export default Bus

src/utils/share.js

+import {start, updateShare, callShare, showShareGuide, hideShareGuide} from '@spark/share'
+import {Weixin, notWeixin, Yinhuajijin} from '@spark/share'
+
+import EventBus from "../utils/eventBus.js";
+
+//直接使用非微信环境来处理
+Yinhuajijin.testEnv = notWeixin;
+
+start([Weixin,Yinhuajijin], (way, success, payload)=>{
+  console.log('分享' + success ? '成功' : '失败')
+}).then(()=>{
+  console.log("start().then")
+  // TODO 首页需要
+  EventBus.emit("shareInit")
+
+  // TODO 分享落地页打包需要
+  // wxShare(null,1)
+});
+
+
+console.log(CFG.globalShareUrl)
+
+// todo 需要修改地址
+export const wxShare = (inviteCode,type) => {
+  //被动分享
+  console.log("进入init方法")
+  let url = "";
+  if(type && type === 1){
+    // 如果是落地页的二次分享
+    url = window.location.href;
+  }else{
+    url = CFG.globalShareUrl + "&inviteCode=" + inviteCode; 
+  }
+  updateShare({
+    title: "银华基金-惊喜盲盒 赢壕礼", //分享标题
+    content: "银华基金-惊喜盲盒 赢壕礼", //分享内容
+    url: url, //分享链接
+    thumbnail: 'http://yun.duiba.com.cn/spark/assets/57fea324c2c3119d61a897a1c5f0a72d2dc45e40.png', //分享缩略图
+  });
+}
+
+export const appShare = (inviteCode,type) => {
+  //主动唤起分享功能，比如一些APP能唤起分享面板
+  let url = CFG.globalShareUrl + "&inviteCode=" + inviteCode;
+
+  callShare({
+    title: "银华基金-惊喜盲盒 赢壕礼", //分享标题
+    content: "银华基金-惊喜盲盒 赢壕礼", //分享内容
+    url: url, //分享链接
+    thumbnail: 'http://yun.duiba.com.cn/spark/assets/57fea324c2c3119d61a897a1c5f0a72d2dc45e40.png', //分享缩略图
+  },{
+    shareType: type
+  });
+}
+
+
+
+

src/utils/svga.js

+
+import { Toast, showLoading, hideLoading, configLoading, DefaultIcon, RainbowIcon, SlackIcon, WaveIcon } from '@spark/ui';
+
+const  SVGA = require("svgaplayerweb");
+var svgaParser = new SVGA.Parser();
+
+configLoading(RainbowIcon);
+
+/**
+ * 快速加载svga资源，但不装载
+ * @param url 资源URL
+ */
+export const loadSVGA = (url) => {
+    return new Promise((resolve, reject) => {
+        svgaParser.load(url, (videoItem) => {
+            resolve(videoItem)
+        }, (err) => {
+            reject(err)
+        })
+    })
+}
+/**
+ * 快速装载一个svga动画
+ * @param url 资源URL
+ * @param className 挂载元素的class name
+ * @param loops 播放次数。默认为空，循环播放。
+ * @param clearsAfterStop 
+ */
+export const getSVGA = async (url, className, callback) => {
+    showLoading("loading")
+    const videoItem = await loadSVGA(url);
+    hideLoading();
+    var svga = new SVGA.Player(className);
+    svga.loops = 1;
+    svga.clearsAfterStop = false;
+    svga.setVideoItem(videoItem);
+    svga.startAnimation();
+    svga.onFinished(()=>{
+      callback && callback();
+    })
+    return svga
+}
\ No newline at end of file