fe / yoho-activitys · Commits

Go to a project

Authored by 李奇
Commit b853ff7c2dd96a8c1e7f47164eff86cd4f0d56e7 1 parent 131064f4

UI dev

Inline Side-by-side
Showing 7 changed files with 156 additions and 165 deletions
  1 +import React from 'react';
  2 +
  3 +import './index.scss';
  4 +export default class BottomButtons extends React.Component {
  5 + constructor(props) {
  6 + super(props);
  7 + }
  8 +
  9 + render() {
  10 + return (
  11 + <div className="comp-bottom-btns-wrap">
  12 + <a href="" className="button-item">
  13 + <img className="btn-item-bg" src=""/>
  14 + </a>
  15 + <a href="" className="button-item"></a>
  16 + <a href="" className="button-item"></a>
  17 + </div>
  18 + )
  19 + }
  20 +}
  1 +.comp-bottom-btns-wrap {
  2 + display: flex;
  3 + position: absolute;
  4 + top: 1100px;
  5 + left: 0;
  6 + right: 0;
  7 + height: 88px;
  8 + padding: 0 40px;
  9 + box-sizing: border-box;
  10 +
  11 + .button-item {
  12 + display: inline-block;
  13 + flex: 1;
  14 + margin-left: 20px;
  15 + border: 1px solid red;
  16 + box-sizing: border-box;
  17 +
  18 + &:first-child {
  19 + margin-left: 0;
  20 + }
  21 + }
  22 +}
@@ -4,37 +4,34 @@ import {conf, start} from '../../api' @@ -4,37 +4,34 @@ import {conf, start} from '../../api'
4 import {getQueryObj, linkToMiniApp, invokeMethod, parseUrl} from '../../../../common/utils'; 4 import {getQueryObj, linkToMiniApp, invokeMethod, parseUrl} from '../../../../common/utils';
5 import wxshare from '../../../../common/wxshare' 5 import wxshare from '../../../../common/wxshare'
6 import wx from 'weixin-js-sdk'; 6 import wx from 'weixin-js-sdk';
  7 +import yaSDK from 'yoho-activity-sdk';
7 import config from '../../config'; 8 import config from '../../config';
8 import cookie from 'react-cookies'; 9 import cookie from 'react-cookies';
9 import LazyLoad from 'react-lazy-load' 10 import LazyLoad from 'react-lazy-load'
  11 +import {
  12 + Link
  13 +} from 'react-router-dom'
  14 +
  15 +import BottomButtons from '../components/bottom-buttons';
10 16
11 const {actId} = getQueryObj(); 17 const {actId} = getQueryObj();
12 18
13 export default class wheelSurf extends PureComponent { 19 export default class wheelSurf extends PureComponent {
14 constructor(props) { 20 constructor(props) {
15 - document.title ='大转盘' 21 + document.title ='大转盘';
16 super(props); 22 super(props);
17 this.state = { 23 this.state = {
  24 + initial: true,
  25 + pending: false, // 抽奖中
  26 + startEnd: false,
  27 + isEnding: false, // 即将停止
  28 +
18 conf: { 29 conf: {
19 - // 默认数据 30 + loading: ''
20 } 31 }
21 }; 32 };
22 33
23 -  
24 - // this.collect = this.collect.bind(this);  
25 this.init(); 34 this.init();
26 -  
27 - // 微信分享  
28 - // let shareData={  
29 - // title: '国潮崛起年，中西碰撞博出位！',  
30 - // imgUrl: 'https://img01.yohoboys.com/o_1cnilugbs15ajak1gfo1d2h1p348.png?imageView2/1/w/200/h/200',  
31 - // desc: '这里有一份中西潮流榜单，请收好！',  
32 - // link: 'https://ad.yoho.cn/html5/2018/09/guochao/guochao.html',  
33 - // success: function () {  
34 - //  
35 - // }  
36 - // }  
37 - // wxshare(shareData);  
38 } 35 }
39 36
40 init = async () => { 37 init = async () => {
@@ -58,140 +55,57 @@ export default class wheelSurf extends PureComponent { @@ -58,140 +55,57 @@ export default class wheelSurf extends PureComponent {
58 } 55 }
59 }; 56 };
60 57
61 - collect = async (id) => {  
62 - //判断是否是clicked  
63 - if (this.state.storage[id]) {  
64 - return;  
65 - } else {  
66 - //判断用户登陆 未登陆跳登陆  
67 - if (!parseInt(getQueryObj().uid)) {  
68 - if (this.state.env === 'miniprogram') {  
69 - return wx.miniProgram.switchTab({url: '/pages/userCenter/userCenter'});  
70 - }  
71 - else {  
72 - return this.goLogin('http://ad.yoho.cn/html5/2018/09/guochao/guochao.html')  
73 - }  
74 - }  
75 -  
76 - //发送请求  
77 - let result = await collectApi({  
78 - id: id,  
79 - uid: cookie.load('app_uid') || getQueryObj().uid || 0,  
80 - sessionKey: cookie.load('app_session_key') || getQueryObj().session_key || '',  
81 - sessionType: cookie.load('app_client_type') || '',  
82 - appVersion: cookie.load('app_version') || ''  
83 - });  
84 - if (!result.result)  
85 - return;  
86 - //替换图标  
87 - let storage = this.state.storage;  
88 - storage[id] = true;  
89 - this.setState({  
90 - storage  
91 - })  
92 - this.forceUpdate();  
93 - }  
94 - };  
95 - goLogin = (refer, data) => {  
96 - let url;  
97 -  
98 - if (refer.indexOf('//') === 0) {  
99 - refer = location.protocol + refer;  
100 - }  
101 -  
102 - url = 'http://m.yohobuy.com/signin.html?refer=' + encodeURIComponent(refer);  
103 - refer = parseUrl(refer || location.href);  
104 - if (this.state.env == 'app') {  
105 - if (/Android/i.test(navigator.userAgent || '')) {  
106 - if (url.indexOf('?') < 0) {  
107 - url += '?appLogin=1';  
108 - }  
109 - if (location.href.indexOf('&openby') >= 0) {  
110 - url = url.substring(0, url.indexOf('&openby'));  
111 - }  
112 - url += '&';  
113 - } else {  
114 - if (location.href.indexOf('#openby') >= 0) {  
115 - url = url.substring(0, url.indexOf('#openby'));  
116 - }  
117 - url += '#';  
118 - }  
119 - url += 'openby:yohobuy=' + (data || JSON.stringify({  
120 - action: 'go.weblogin',  
121 - params: {  
122 - priority: 'N',  
123 - jumpurl: {  
124 - url: refer.path,  
125 - param: refer.query  
126 - },  
127 - needlogout: 'Y'  
128 - }  
129 - }));  
130 - }  
131 -  
132 - this.setState({url: url}, () => {  
133 - document.getElementById('url').click();  
134 - });  
135 - return false;  
136 - };  
137 componentDidMount = () => { 58 componentDidMount = () => {
138 window.addEventListener('scroll', this.handleScroll); 59 window.addEventListener('scroll', this.handleScroll);
139 - this.wxReady();  
140 }; 60 };
141 61
142 componentWillUnmount = () => { 62 componentWillUnmount = () => {
143 window.removeEventListener('scroll', this.handleScroll); 63 window.removeEventListener('scroll', this.handleScroll);
144 }; 64 };
145 -  
146 - handleScroll = () => {  
147 - let _this = this;  
148 - if (window.pageYOffset > 100) {  
149 - _this.setState({display: true});  
150 - } else {  
151 - _this.setState({display: false}); 65 +
  66 + start = async () => {
  67 + console.log('抽奖开始');
  68 + let uid = cookie.load('app_uid') || getQueryObj().uid || 0;
  69 + if(!uid || !parseInt(uid)){
  70 + return;
152 } 71 }
153 - };  
154 72
155 - wxReady = async () => {  
156 - let envFlag = window.__wxjs_environment;  
157 - if (!envFlag && navigator.userAgent.match(/yohobuy/i)) {  
158 - document.addEventListener('deviceready', function () {  
159 - });  
160 - this.setState({env: "app"});  
161 - } else if (!envFlag && navigator.userAgent.match(/miniProgram/i)) {  
162 - this.setState({env: "miniprogram"});  
163 - envFlag = true  
164 - } else {  
165 - this.setState({env: 'h5'})  
166 - }  
167 - if (envFlag == 'miniprogram') {  
168 - if (wx.miniProgram.postMessage) {  
169 - wx.miniProgram.postMessage({  
170 - data: {  
171 - title: '大转盘'  
172 - }  
173 - });  
174 - }  
175 - this.setState({env: "miniprogram"});  
176 - }  
177 - }; 73 + let result = await start({
  74 + actId,
  75 + uid: uid,
  76 + sessionKey: cookie.load('app_session_key') || getQueryObj().session_key || '',
  77 + sessionType: cookie.load('app_client_type') || '',
  78 + appVersion: cookie.load('app_version') || ''
  79 + });
178 80
179 - scrollTop = () => {  
180 - let _this = this;  
181 - let timer = setTimeout(function () {  
182 - window.scrollBy(0, -100);  
183 - if (window.pageYOffset <= 0) {  
184 - clearTimeout(timer);  
185 - } else {  
186 - _this.scrollTop();  
187 - }  
188 - }, 20); 81 + if (result.code === 200) {
  82 + this.setState({
  83 + conf: result.data
  84 + })
  85 + }
189 }; 86 };
190 87
191 render() { 88 render() {
  89 + const {conf, isEnding} = this.state;
  90 + if (!conf.id) {
  91 + return (
  92 + <div className="home-wrap">
  93 + <img className="main-bg" src={this.state.conf.loading + '?imageslim'}/>
  94 + </div>
  95 + )
  96 + }
  97 +
192 return ( 98 return (
193 <div className="home-wrap"> 99 <div className="home-wrap">
194 - <img className="main-bg" src={this.state.conf.main_bg + '?imageslim'}/> 100 + <img className="main-bg" src={conf.main_bg + '?imageslim'}/>
  101 + {conf.rule_btn_bg ? (<Link to={`${config.routerPath}/rule.html`}><img className="rule-btn" src={conf.rule_btn_bg + '?imageslim'}/></Link>) : ''}
  102 + {conf.share_btn_bg ? (<img className="share-btn" src={conf.share_btn_bg + '?imageslim'}/>): ''}
  103 + <img className="wheel-bg" src={conf.wheel_bg + '?imageslim'}/>
  104 + <img className="wheel-bg-surf-layer" src={conf.wheel_bg}/>
  105 + <img onClick={()=>{this.start()}} className="start-btn-bg" src={conf.prize_btn_bg}/>
  106 + {isEnding ? (<img className="prize-hit-bg" src={conf.win_prize_bg}/>) : ''}
  107 + {isEnding ? (<img className="prize-hit-start-bg" src={conf.prize_btn_bg}/>) : ''}
  108 + <BottomButtons className="button-btns"/>
195 </div> 109 </div>
196 ) 110 )
197 } 111 }
1 .home-wrap { 1 .home-wrap {
  2 + position: relative;
2 width: 100%; 3 width: 100%;
3 height: 100%; 4 height: 100%;
4 overflow-x: hidden; 5 overflow-x: hidden;
@@ -7,4 +8,52 @@ @@ -7,4 +8,52 @@
7 width: 750px; 8 width: 750px;
8 height: auto; 9 height: auto;
9 } 10 }
  11 +
  12 + .wheel-bg,
  13 + .wheel-bg-surf-layer {
  14 + position: absolute;
  15 + top: 280px;
  16 + left: 50%;
  17 + width: 630px;
  18 + height: 630px;
  19 + margin-left: -315px;
  20 + }
  21 +
  22 + .prize-hit-bg {
  23 + position: absolute;
  24 + top: 0;
  25 + width: 750px;
  26 + }
  27 +
  28 + .start-btn-bg, .prize-hit-start-bg {
  29 + position: absolute;
  30 + top: 486px;
  31 + left: 50%;
  32 + width: 200px;
  33 + height: 218px;
  34 + margin-left: -100px;
  35 + }
  36 +
  37 + .rule-btn {
  38 + position: absolute;
  39 + top: 14px;
  40 + left: 14px;
  41 + width: 154px;
  42 + height: 62px;
  43 + }
  44 +
  45 + .share-btn {
  46 + position: absolute;
  47 + top: 14px;
  48 + right: 14px;
  49 + width: 154px;
  50 + height: 62px;
  51 + }
  52 +
  53 + .bottom-btns {
  54 + position: absolute;
  55 + top: 1100px;
  56 + left: 0;
  57 + right: 0;
  58 + }
10 } 59 }
1 import React, {PureComponent} from 'react'; 1 import React, {PureComponent} from 'react';
2 import './index.scss' 2 import './index.scss'
3 3
4 -export default class wheelSurf extends PureComponent { 4 +export default class Rule extends PureComponent {
  5 + constructor(props) {
  6 + document.title ='活动规则说明';
  7 + super(props);
  8 + }
  9 +
5 render() { 10 render() {
6 return ( 11 return (
7 <div className="rule-wrap"> 12 <div className="rule-wrap">
@@ -45,7 +45,6 @@ @@ -45,7 +45,6 @@
45 "compression-webpack-plugin": "^1.1.11", 45 "compression-webpack-plugin": "^1.1.11",
46 "copy-webpack-plugin": "^4.5.1", 46 "copy-webpack-plugin": "^4.5.1",
47 "css-loader": "^0.28.11", 47 "css-loader": "^0.28.11",
48 - "mini-css-extract-plugin":"^0.4.3",  
49 "file-loader": "^1.1.11", 48 "file-loader": "^1.1.11",
50 "html-webpack-plugin": "^3.2.0", 49 "html-webpack-plugin": "^3.2.0",
51 "html-withimg-loader": "^0.1.16", 50 "html-withimg-loader": "^0.1.16",
@@ -64,7 +63,8 @@ @@ -64,7 +63,8 @@
64 "webpack": "^4.17.2", 63 "webpack": "^4.17.2",
65 "webpack-cli": "^3.1.2", 64 "webpack-cli": "^3.1.2",
66 "webpack-dev-server": "^3.1.3", 65 "webpack-dev-server": "^3.1.3",
67 - "webpack-merge": "^4.1.4" 66 + "webpack-merge": "^4.1.4",
  67 + "yoho-activity-sdk": "^1.0.2"
68 }, 68 },
69 "author": "陈峰 <feng.chen@yoho.cn>", 69 "author": "陈峰 <feng.chen@yoho.cn>",
70 "license": "ISC", 70 "license": "ISC",
@@ -363,12 +363,6 @@ async@^1.5.2: @@ -363,12 +363,6 @@ async@^1.5.2:
363 version "1.5.2" 363 version "1.5.2"
364 resolved "http://npm.yohops.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" 364 resolved "http://npm.yohops.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
365 365
366 -async@^2.4.1:  
367 - version "2.6.1"  
368 - resolved "http://npm.yohops.com/async/-/async-2.6.1.tgz#b245a23ca71930044ec53fa46aa00a3e87c6a610"  
369 - dependencies:  
370 - lodash "^4.17.10"  
371 -  
372 asynckit@^0.4.0: 366 asynckit@^0.4.0:
373 version "0.4.0" 367 version "0.4.0"
374 resolved "http://npm.yohops.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" 368 resolved "http://npm.yohops.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -2500,15 +2494,6 @@ extglob@^2.0.4: @@ -2500,15 +2494,6 @@ extglob@^2.0.4:
2500 snapdragon "^0.8.1" 2494 snapdragon "^0.8.1"
2501 to-regex "^3.0.1" 2495 to-regex "^3.0.1"
2502 2496
2503 -extract-text-webpack-plugin@^4.0.0-beta.0:  
2504 - version "4.0.0-beta.0"  
2505 - resolved "http://npm.yohops.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-4.0.0-beta.0.tgz#f7361d7ff430b42961f8d1321ba8c1757b5d4c42"  
2506 - dependencies:  
2507 - async "^2.4.1"  
2508 - loader-utils "^1.1.0"  
2509 - schema-utils "^0.4.5"  
2510 - webpack-sources "^1.1.0"  
2511 -  
2512 extsprintf@1.3.0: 2497 extsprintf@1.3.0:
2513 version "1.3.0" 2498 version "1.3.0"
2514 resolved "http://npm.yohops.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05" 2499 resolved "http://npm.yohops.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
@@ -2626,8 +2611,8 @@ flush-write-stream@^1.0.0: @@ -2626,8 +2611,8 @@ flush-write-stream@^1.0.0:
2626 readable-stream "^2.0.4" 2611 readable-stream "^2.0.4"
2627 2612
2628 follow-redirects@^1.0.0: 2613 follow-redirects@^1.0.0:
2629 - version "1.5.8"  
2630 - resolved "http://npm.yohops.com/follow-redirects/-/follow-redirects-1.5.8.tgz#1dbfe13e45ad969f813e86c00e5296f525c885a1" 2614 + version "1.5.9"
  2615 + resolved "http://npm.yohops.com/follow-redirects/-/follow-redirects-1.5.9.tgz#c9ed9d748b814a39535716e531b9196a845d89c6"
2631 dependencies: 2616 dependencies:
2632 debug "=3.1.0" 2617 debug "=3.1.0"
2633 2618
@@ -2988,8 +2973,8 @@ hpack.js@^2.1.6: @@ -2988,8 +2973,8 @@ hpack.js@^2.1.6:
2988 wbuf "^1.1.0" 2973 wbuf "^1.1.0"
2989 2974
2990 html-comment-regex@^1.1.0: 2975 html-comment-regex@^1.1.0:
2991 - version "1.1.1"  
2992 - resolved "http://npm.yohops.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e" 2976 + version "1.1.2"
  2977 + resolved "http://npm.yohops.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
2993 2978
2994 html-entities@^1.2.0: 2979 html-entities@^1.2.0:
2995 version "1.2.1" 2980 version "1.2.1"
@@ -3892,14 +3877,6 @@ mimic-fn@^1.0.0: @@ -3892,14 +3877,6 @@ mimic-fn@^1.0.0:
3892 version "1.2.0" 3877 version "1.2.0"
3893 resolved "http://npm.yohops.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022" 3878 resolved "http://npm.yohops.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
3894 3879
3895 -mini-css-extract-plugin@^0.4.3:  
3896 - version "0.4.3"  
3897 - resolved "http://npm.yohops.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.3.tgz#98d60fcc5d228c3e36a9bd15a1d6816d6580beb8"  
3898 - dependencies:  
3899 - loader-utils "^1.1.0"  
3900 - schema-utils "^1.0.0"  
3901 - webpack-sources "^1.1.0"  
3902 -  
3903 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1: 3880 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
3904 version "1.0.1" 3881 version "1.0.1"
3905 resolved "http://npm.yohops.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7" 3882 resolved "http://npm.yohops.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -6524,3 +6501,7 @@ yargs@^7.0.0: @@ -6524,3 +6501,7 @@ yargs@^7.0.0:
6524 which-module "^1.0.0" 6501 which-module "^1.0.0"
6525 y18n "^3.2.1" 6502 y18n "^3.2.1"
6526 yargs-parser "^5.0.0" 6503 yargs-parser "^5.0.0"
  6504 +
  6505 +yoho-activity-sdk@^1.0.2:
  6506 + version "1.0.2"
  6507 + resolved "http://npm.yohops.com/yoho-activity-sdk/-/yoho-activity-sdk-1.0.2.tgz#82f2e00c2bc11514b9243c9940273e2990d0c27c"