分享玩法组件包+轮播玩法组件包

5448dcfb · yanghui1 · 3d30ebf8 · 5448dcfb · 5448dcfb · 5448dcfb
Commit 5448dcfb authored May 27, 2022 by yanghui1
15 changed files
--- a/mock/common/doShare.js
+++ b/mock/common/doShare.js
+module.exports = {
+    "success": true,
+    "data": {
+        index: 2, // 第几次分享
+        shareCode: '111', // 分享码
+        sendPrize: true, // 是否发奖，true=已发奖
+        timestamp: 1653621623111, // 当前时间戳
+        options: [
+            {
+                ruleId: '111', // 规则ID
+                prizeId: '奖品名称', // 奖品ID
+                optionId: '1', // 奖品ID
+                optionName: '奖品名称', // 奖品名称
+                optionImg: '奖品图片', // 奖品图片
+                prizeType: 1, // 奖项类型
+                url: 'http://www.baidu.com', // 奖品详情页URL
+            },
+            {
+                ruleId: '111', // 规则ID
+                prizeId: '奖品名称', // 奖品ID
+                optionId: '2', // 奖品ID
+                optionName: '奖品名称', // 奖品名称
+                optionImg: '奖品图片', // 奖品图片
+                prizeType: 1, // 奖项类型
+                url: 'http://www.baidu.com', // 奖品详情页URL
+            }
+        ]
+    },
+}
\ No newline at end of file
--- a/mock/common/getCode.js
+++ b/mock/common/getCode.js
+module.exports = {
+    success: true,
+    code: 1234
+}
\ No newline at end of file
--- a/mock/common/getQuery.js
+++ b/mock/common/getQuery.js
+module.exports = {
+    success: true,
+    data: {
+        list: [
+            'http://localhost:8088/src/assets/%E5%9B%BE-%E7%99%BD%E5%A4%A9/IP%E5%8F%A3%E5%91%B3%E7%8E%8B%E8%89%B2%E7%B3%BB.png',
+            'http://localhost:8088/src/assets/%E5%9B%BE-%E7%99%BD%E5%A4%A9/IP%E5%8F%A3%E5%91%B3%E7%8E%8B%E8%89%B2%E7%B3%BB.png',
+            'http://localhost:8088/src/assets/%E5%9B%BE-%E7%99%BD%E5%A4%A9/IP%E5%8F%A3%E5%91%B3%E7%8E%8B%E8%89%B2%E7%B3%BB.png',
+            'http://localhost:8088/src/assets/%E5%9B%BE-%E7%99%BD%E5%A4%A9/IP%E5%8F%A3%E5%91%B3%E7%8E%8B%E8%89%B2%E7%B3%BB.png',
+        ]
+    }
+}
\ No newline at end of file
--- a/mock/common/queryCount.js
+++ b/mock/common/queryCount.js
+module.exports = {
+    "success": true,
+    "data": {
+        index: 1, // 第几次分享
+        startTimestamp: 20220112, // 组件开始时间
+        startTimestamp:20220312, // 组件开始时间
+        sendPrize: true, // 是否发奖，true=已发奖
+        timestamp: 1653621623, // 当前时间戳
+        options: [
+            {
+                ruleId: '111', // 规则ID
+                prizeId: '奖品名称', // 奖品ID
+                optionId: '1', // 奖项ID
+                optionName: '奖品名称', // 奖项名称
+                optionImg: 'http://localhost:8088/src/assets/%E5%9B%BE-%E7%99%BD%E5%A4%A9/%E5%91%A8%E4%BA%8C.png', // 奖项图片
+                prizeType: 1, // 奖项类型
+                position: 'http://www.baidu.com', // 奖项位置
+                url: 'http://www.baidu.com', // 奖品详情页URL
+            }
+        ]
+    },
+}
\ No newline at end of file
--- a/mock/index.js
+++ b/mock/index.js
@@ -2,10 +2,18 @@
 const rule = require("./common/rule");
 const drawNum = require("./common/drawNum");
 const coopFrontVariable = require("./common/coopFrontVariable");
+const doShare = require("./common/doShare"); // 引入common里的doShare.js里的测试数据
+const queryCount = require("./common/queryCount");
+const getCode = require("./common/getCode");
+const getQuery = require("./common/getQuery");

 const proxy = {
  "GET /projectRule.query": rule,
  "GET /drawNum.query": drawNum,
-  "GET /coop_frontVariable.query": coopFrontVariable
+  "GET /coop_frontVariable.query": coopFrontVariable,
+  "POST /Yh/doShare.do": doShare,
+  "GET /Yh/queryCount.do": queryCount,
+  "GET /Yh/sendSmsCode.do": getCode,
+  "GET /Yh/query.do": getQuery,
 };
 module.exports = proxy;
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,10 @@
            "version": "3.5.3",
            "dependencies": {
                "@spark/api-base": "^2.0.7",
+                "@spark/api-bindPhone": "^1.0.47",
+                "@spark/api-carousel": "^1.0.9",
+                "@spark/api-share": "^1.0.36",
+                "@spark/api-task": "^1.0.38",
                "@spark/projectx": "^2.0.5",
                "@spark/svgaplayer": "^2.0.3",
                "@spark/ui": "^2.0.8",
@@ -30,6 +34,7 @@
                "redux-thunk": "^2.3.0",
                "spark-utils": "^0.0.12",
                "style-loader": "^1.2.1",
+                "swiper": "^3.4.2",
                "webpack-bundle-analyzer": "^4.5.0"
            },
            "devDependencies": {
@@ -2772,6 +2777,43 @@
                "html-shot": "^1.0.13"
            }
        },
+        "node_modules/@spark/api-bindPhone": {
+            "version": "1.0.47",
+            "resolved": "http://npm.dui88.com:80/@spark%2fapi-bindPhone/-/api-bindPhone-1.0.47.tgz",
+            "integrity": "sha512-EO/mPeBy1N7cy2dyJUJ6GEMw1tTFUXbOEJfdNma3zcB0IPHJeMzYhHfyVCW+JJzJd+LY2IW5CJhHUPlD/in1nQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@spark/common-helpers": "^1.0.18",
+                "@spark/utils": "^2.0.33"
+            }
+        },
+        "node_modules/@spark/api-carousel": {
+            "version": "1.0.9",
+            "resolved": "http://npm.dui88.com:80/@spark%2fapi-carousel/-/api-carousel-1.0.9.tgz",
+            "integrity": "sha512-5IQmsDSZAIxG+HMOLCi0CZi14w2DUhS/tzyRCk14gnpE51SBnDVGc8080W0HaXwa8Px64xEdr1/DFCMhFobPkA==",
+            "license": "MIT",
+            "dependencies": {
+                "@spark/common-helpers": "^1.0.18"
+            }
+        },
+        "node_modules/@spark/api-share": {
+            "version": "1.0.36",
+            "resolved": "http://npm.dui88.com:80/@spark%2fapi-share/-/api-share-1.0.36.tgz",
+            "integrity": "sha512-ryP8w3ye0GNJWcfojxA5ANn2XJ1vHVFTwAVZMOYswdfKPe5UhokDakx88fXoUEToL+ASELXw+TZTENoPl2pF4g==",
+            "license": "MIT",
+            "dependencies": {
+                "@spark/common-helpers": "^1.0.18"
+            }
+        },
+        "node_modules/@spark/api-task": {
+            "version": "1.0.38",
+            "resolved": "http://npm.dui88.com:80/@spark%2fapi-task/-/api-task-1.0.38.tgz",
+            "integrity": "sha512-fV33nItSm7/KAkGcBj7Bdr3t0hKd6KXzCpGvWRwVbtAilEMKMyPLYvSrpiYBGpEBjspluROrHZjjXESeUdEbOA==",
+            "license": "MIT",
+            "dependencies": {
+                "@spark/common-helpers": "^1.0.18"
+            }
+        },
        "node_modules/@spark/code-inspector": {
            "version": "0.0.1-beta.13",
            "resolved": "http://npm.dui88.com:80/@spark%2fcode-inspector/-/code-inspector-0.0.1-beta.13.tgz",
@@ -17848,6 +17890,15 @@
                "url": "https://github.com/sponsors/ljharb"
            }
        },
+        "node_modules/swiper": {
+            "version": "3.4.2",
+            "resolved": "http://npm.dui88.com:80/swiper/-/swiper-3.4.2.tgz",
+            "integrity": "sha1-Oda0ELGjmDPh9y07cpmd9fXjg5I=",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 4.7.0"
+            }
+        },
        "node_modules/tapable": {
            "version": "1.1.3",
            "resolved": "http://npm.dui88.com:80/tapable/-/tapable-1.1.3.tgz",
@@ -21941,6 +21992,39 @@
                }
            }
        },
+        "@spark/api-bindPhone": {
+            "version": "1.0.47",
+            "resolved": "http://npm.dui88.com:80/@spark%2fapi-bindPhone/-/api-bindPhone-1.0.47.tgz",
+            "integrity": "sha512-EO/mPeBy1N7cy2dyJUJ6GEMw1tTFUXbOEJfdNma3zcB0IPHJeMzYhHfyVCW+JJzJd+LY2IW5CJhHUPlD/in1nQ==",
+            "requires": {
+                "@spark/common-helpers": "^1.0.18",
+                "@spark/utils": "^2.0.33"
+            }
+        },
+        "@spark/api-carousel": {
+            "version": "1.0.9",
+            "resolved": "http://npm.dui88.com:80/@spark%2fapi-carousel/-/api-carousel-1.0.9.tgz",
+            "integrity": "sha512-5IQmsDSZAIxG+HMOLCi0CZi14w2DUhS/tzyRCk14gnpE51SBnDVGc8080W0HaXwa8Px64xEdr1/DFCMhFobPkA==",
+            "requires": {
+                "@spark/common-helpers": "^1.0.18"
+            }
+        },
+        "@spark/api-share": {
+            "version": "1.0.36",
+            "resolved": "http://npm.dui88.com:80/@spark%2fapi-share/-/api-share-1.0.36.tgz",
+            "integrity": "sha512-ryP8w3ye0GNJWcfojxA5ANn2XJ1vHVFTwAVZMOYswdfKPe5UhokDakx88fXoUEToL+ASELXw+TZTENoPl2pF4g==",
+            "requires": {
+                "@spark/common-helpers": "^1.0.18"
+            }
+        },
+        "@spark/api-task": {
+            "version": "1.0.38",
+            "resolved": "http://npm.dui88.com:80/@spark%2fapi-task/-/api-task-1.0.38.tgz",
+            "integrity": "sha512-fV33nItSm7/KAkGcBj7Bdr3t0hKd6KXzCpGvWRwVbtAilEMKMyPLYvSrpiYBGpEBjspluROrHZjjXESeUdEbOA==",
+            "requires": {
+                "@spark/common-helpers": "^1.0.18"
+            }
+        },
        "@spark/code-inspector": {
            "version": "0.0.1-beta.13",
            "resolved": "http://npm.dui88.com:80/@spark%2fcode-inspector/-/code-inspector-0.0.1-beta.13.tgz",
@@ -32966,6 +33050,11 @@
                }
            }
        },
+        "swiper": {
+            "version": "3.4.2",
+            "resolved": "http://npm.dui88.com:80/swiper/-/swiper-3.4.2.tgz",
+            "integrity": "sha1-Oda0ELGjmDPh9y07cpmd9fXjg5I="
+        },
        "tapable": {
            "version": "1.1.3",
            "resolved": "http://npm.dui88.com:80/tapable/-/tapable-1.1.3.tgz",
--- a/package.json
+++ b/package.json
@@ -14,6 +14,10 @@
    },
    "dependencies": {
        "@spark/api-base": "^2.0.7",
+        "@spark/api-bindPhone": "^1.0.47",
+        "@spark/api-carousel": "^1.0.9",
+        "@spark/api-share": "^1.0.36",
+        "@spark/api-task": "^1.0.38",
        "@spark/projectx": "^2.0.5",
        "@spark/svgaplayer": "^2.0.3",
        "@spark/ui": "^2.0.8",
@@ -35,6 +39,7 @@
        "redux-thunk": "^2.3.0",
        "spark-utils": "^0.0.12",
        "style-loader": "^1.2.1",
+        "swiper": "^3.4.2",
        "webpack-bundle-analyzer": "^4.5.0"
    },
    "devDependencies": {

--- a/project.settings.json
+++ b/project.settings.json
+{"proSetting":{"projectxIDs":{"devId":"p33cf3c31","testId":"p447087ad","prodId":""},"skinVariables":[]},"envSetting":{}}
--- a/src/api/apicfg.js
+++ b/src/api/apicfg.js
@@ -6,6 +6,13 @@ const apiCfg = {
    uri: `join.do`,
    method: "post"
  },
+  doShare: {
+    uri: `Yh/doShare.do`,
+    method: "post"
+  },
+  queryCount: `/Yh/queryCount.do`,
+  getCode: `/Yh/sendSmsCode.do`,
+  getQuery: `/Yh/query.do`,
 }

 export default apiCfg;
--- a/src/components/sharePopup/sharePopup.jsx
+++ b/src/components/sharePopup/sharePopup.jsx
+'use strict';
+
+import React from 'react';
+import { RES_PATH } from '../../../sparkrc.js';
+import { observer } from 'mobx-react';
+import store from '../../store/index';
+import modalStore from '@src/store/modal';
+import API from '../../api';
+import { dateFormatter } from '../../utils/utils';
+import './sharePopup.less';
+
+@observer
+class SharePopUp extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const { res } = this.props.popData;
+        return (
+            <div className="sharePopup">
+                <p className='date'>{dateFormatter(res.timestamp, "yyyy-MM-dd")}</p>
+                <div className="shareCode">分享码：{res.shareCode}</div>
+                <div className="shareNum">第{res.index}次分享</div>
+                <div className="isIssuePrize">是否发奖：<span>{res.sendPrize ? '是' : '否'}</span></div>
+                <div className={'prizeDetail' + ' ' + (!res.sendPrize ? 'displayNone' : '')}>
+                    {
+                        res?.options?.map((item, index) => {
+                            return (
+                                <div className="prize" key={item.optionId}>
+                                    <div className="name">奖品名称：{item.optionName}</div>
+                                    <div className="img">奖品图片：{item.optionImg}</div>
+                                    <div className="style">奖品类型：{item.prizeType}</div>
+                                </div>
+                            )
+                        })
+                    }
+                </div>
+                <div className="delete" onClick={() => {
+                    modalStore.closePop('SharePopUp')
+                }}><span>x</span></div>
+            </div>
+        );
+    }
+}
+
+export default SharePopUp;
--- a/src/components/sharePopup/sharePopup.less
+++ b/src/components/sharePopup/sharePopup.less
+@import "../../res.less";
+.sharePopup {
+    width: 80%;
+    background-color: #ffaf10;
+    position:absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    text-align: center;
+    padding: 0.2rem 0;
+    box-sizing: border-box;
+    border-radius: 0.2rem;
+}
+.displayNone {
+    display: none;
+}
+.delete {
+    width: 0.5rem;
+    height: 0.5rem;
+    background-color: #000;
+    color: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    margin-top: 0.5rem;
+    span {
+        width: 100%;
+        padding-bottom: 0.06rem;
+        box-sizing: border-box;
+    }
+}
\ No newline at end of file
--- a/src/modal/modal.jsx
+++ b/src/modal/modal.jsx
@@ -3,7 +3,10 @@ import './modal.less';
 import { observer } from 'mobx-react';
 import modalStore from '../store/modal';
 import { toJS } from 'mobx';
-export const cfg = {};
+import SharePopUp from '../components/sharePopup/sharePopup';
+export const cfg = {
+  SharePopUp
+};

 @observer
 class Modal extends Component {

--- a/src/pages/homePage/homePage.jsx
+++ b/src/pages/homePage/homePage.jsx
@@ -6,6 +6,10 @@ import { observer } from 'mobx-react';
 import store from '../../store/index';
 import modalStore from '@src/store/modal';
 import API from '../../api';
+import getShareApi from '@spark/api-share'; // 分享玩法组件包
+import getBindPhoneApi from '@spark/api-bindPhone'; // 绑定手机号玩法组件包
+import getCarouselApi from '@spark/api-carousel'; // 轮播玩法组件包
+import Swiper from 'swiper';
 import './homePage.less';

 @observer
@@ -14,14 +18,99 @@ class HomePage extends React.Component {
    super(props);
  }

+  componentDidMount() {
+    // 获取轮播数据
+    const carouselApi = getCarouselApi('Yh');
+    carouselApi.query()
+      .then(res => {
+        this.setState({
+          imgData: res.list,
+        })
+      })
+      .catch(err => {
+        console.log(err);
+      });
+
+    // 定时器，防止轮播图只播放一次就不播放了
+    setTimeout(() => {
+      // 初始化swiper
+      new Swiper(".swiper-container1", {
+        pagination: '.swiper-pagination',
+        paginationClickable: true,
+        autoplay: 1500,
+        loop: true,
+      });
+    }, 500)
+  }
+
+  isClick = false; // 判断是否点击了“获取验证码”
+
+  // 分享
+  onShare = () => {
+    const shareApi = getShareApi("Yh");
+
+    let obj = shareApi.doShare();
+    // console.log(obj); // 是个Promise对象-分享
+
+    shareApi.doShare()
+      .then(res => {
+        modalStore.pushPop('SharePopUp', { res })
+      })
+      .catch(err => {
+        console.log(err);
+      });
+
+    let obj1 = shareApi.queryCount();
+    // console.log(obj1); // 是个Promise对象-查询次数
+
+    shareApi.doShare()
+      .then(res => {
+        // console.log(res);
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  }
+
+  // 获取验证码
+  getCode = () => {
+    this.isClick = true;
+    const { username } = this;
+    let phoneNumber = username.value; // 获取到手机号
+    const bindPhoneApi = getBindPhoneApi('Yh');
+    bindPhoneApi.sendSmsCode();
+  }
+
  render() {
    return (
      <div className="homePage">
-        <span className="group8292"></span>
-        <span className="ipTasteKingColorSystem"></span>
-        <span className="checkinArea"></span>
-        <span className="tuesday"></span>
-        <span className="activityRules"></span>
+        <span className="activityRules" onClick={this.onShare}></span>
+        <div className="form">
+          <div className='marginBottom'>手机号：<input ref={(e) => { this.username = e }} type="text" name="phone" /></div>
+          <div>验证码：<input ref={(e) => { this.code = e }} type="text" name="verifyCode" />
+            {
+              <span className="btn" onClick={this.getCode}>获取验证码</span>
+            }
+          </div>
+        </div>
+        {/* Swiper */}
+        <div className="swiper-container swiper-container1">
+          <div className="swiper-wrapper">
+            {
+              this?.state?.imgData?.map((item, index) => {
+                return (
+                  <div className="swiper-slide swiper-slide1" key={index}>
+                    <div className="banner_img">
+                      <img src={item} alt="" />
+                    </div>
+                  </div>
+                )
+              })
+            }
+          </div>
+          {/* Add Pagination */}
+          <div className="swiper-pagination"></div>
+        </div>
      </div>
    );
  }

--- a/src/pages/homePage/homePage.less
+++ b/src/pages/homePage/homePage.less
 @import "../../res.less";
+@import "../../../node_modules/swiper/dist/css/swiper.css";
 .homePage {
  width: 750px;
  height: 1240px;
@@ -46,3 +47,67 @@
    .sparkBg("图-白天/活动规则.png");
  }
 }
+.marginBottom {
+  margin-bottom: 0.1rem;
+}
+.btn {
+  margin-left: 0.1rem;
+  background-color: #ffaf10;
+  color: #000;
+}
+
+.swiper-container {
+  width: 100%;
+  height: 100%;
+}
+.swiper-slide {
+  text-align: center;
+  font-size: 18px;
+  background: #fff;
+
+  /* Center slide text vertically */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+.swiper-container1 {
+  height: 200px;
+  margin-top: 2rem;
+}
+.swiper-slide1 {
+  width: 100%!important;
+  height: 200px;
+  .banner_img {
+    width: 680px;
+    height: 100%;
+    border-radius: 15px;
+    margin: auto;
+    background-color: pink;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 15px;
+    }
+    }
+}
+.swiper-pagination-bullet-active {
+  opacity: 1;
+  background: #fff!important;
+}
+.swiper-pagination-bullet {
+  width: 14px;
+  height: 14px;
+}
+.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
+  bottom: 8px;
+}
\ No newline at end of file
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,7 +4,7 @@ const store = makeAutoObservable({
  ruleInfo: '',
  frontVariable: {},
  //前端开发配置
-  curPage: 'loading',
+  curPage: 'homePage',
  setRule(ruleInfo) {
    this.ruleInfo = ruleInfo;
  },