fe / yoho-activitys · Commits

Go to a project

Authored by huangyi
Commit d7a9a0d892030bfcc27200725b58fd9e53c07ad1 2 parents 670e61e8 6c4bba6a

Merge branch 'feature/wheel-surf' of http://git.yoho.cn/fe/yoho-activitys into feature/wheel-surf

Inline Side-by-side
Showing 4 changed files with 64 additions and 59 deletions
@@ -4,7 +4,7 @@ module.exports = { @@ -4,7 +4,7 @@ module.exports = {
4 domain: 'https://action.yoho.cn' 4 domain: 'https://action.yoho.cn'
5 }, 5 },
6 development: { 6 development: {
7 - routerPath: '/test/2018/10/wheelSurf', 7 + routerPath: '/html5/test/2018/10/wheelSurf',
8 domain: '//yoho-activity-platform.test3.ingress.dev.yohocorp.com' 8 domain: '//yoho-activity-platform.test3.ingress.dev.yohocorp.com'
9 } 9 }
10 }[process.env.NODE_ENV || 'development'] 10 }[process.env.NODE_ENV || 'development']
@@ -19,9 +19,9 @@ export default class wheelSurf extends PureComponent { @@ -19,9 +19,9 @@ export default class wheelSurf extends PureComponent {
19 super(props); 19 super(props);
20 this.state = { 20 this.state = {
21 uid: 0, 21 uid: 0,
  22 + expIdx: 1,
22 query: {}, 23 query: {},
23 canStart: true, // 可以抽奖 24 canStart: true, // 可以抽奖
24 - pending: false, // 抽奖中  
25 slowEnding: false, // 减速结束 25 slowEnding: false, // 减速结束
26 startEnded: false, // 已结束 26 startEnded: false, // 已结束
27 27
@@ -108,6 +108,7 @@ export default class wheelSurf extends PureComponent { @@ -108,6 +108,7 @@ export default class wheelSurf extends PureComponent {
108 if (result.code === 200) { 108 if (result.code === 200) {
109 this.setState({ 109 this.setState({
110 conf: result.data.conf, 110 conf: result.data.conf,
  111 + expIdx: result.data.prize_idx,
111 totalParts: result.data.prize, 112 totalParts: result.data.prize,
112 remainCount: result.data.residueCount, 113 remainCount: result.data.residueCount,
113 dayLeftTimesTip: result.data.conf.btm_tip_one, 114 dayLeftTimesTip: result.data.conf.btm_tip_one,
@@ -122,12 +123,13 @@ export default class wheelSurf extends PureComponent { @@ -122,12 +123,13 @@ export default class wheelSurf extends PureComponent {
122 }; 123 };
123 124
124 setWxShare = () => { 125 setWxShare = () => {
125 - // TODO 分享信息 126 + const {conf} = this.state;
  127 +
126 yaSDK.wxShare({ 128 yaSDK.wxShare({
127 - title: 'haha',  
128 - imgUrl: '',  
129 - desc: '描述',  
130 - link: '' 129 + title: conf.share_title,
  130 + imgUrl: `${conf.share_img}?imageView2/1/w/200/h/200`,
  131 + desc: conf.share_desc,
  132 + link: conf.share_url
131 }); 133 });
132 }; 134 };
133 135
@@ -142,13 +144,17 @@ export default class wheelSurf extends PureComponent { @@ -142,13 +144,17 @@ export default class wheelSurf extends PureComponent {
142 let result = await start({ 144 let result = await start({
143 act_id: +this.state.query.actId, 145 act_id: +this.state.query.actId,
144 uid: cookie.load('uid'), 146 uid: cookie.load('uid'),
145 - sessionKey: cookie.load('session_key'), 147 + sessionKey: cookie.load('app_session_key'),
146 sessionType: cookie.load('app_client_type'), 148 sessionType: cookie.load('app_client_type'),
147 appVersion: cookie.load('app_version') 149 appVersion: cookie.load('app_version')
148 }); 150 });
149 151
150 if (result.code !== 200) { 152 if (result.code !== 200) {
151 - console.log(result.message); 153 + result = {
  154 + data: {
  155 + prize_idx: this.state.expIdx
  156 + }
  157 + }
152 } 158 }
153 159
154 let timer = setTimeout(() => { 160 let timer = setTimeout(() => {
@@ -158,7 +164,9 @@ export default class wheelSurf extends PureComponent { @@ -158,7 +164,9 @@ export default class wheelSurf extends PureComponent {
158 this.setState({ 164 this.setState({
159 slowEnding: true 165 slowEnding: true
160 }); 166 });
161 - }, 2000); 167 + this.state.angle = this.state.stopAngle;
  168 + this.stop(this.state.stopAngle);
  169 + }, 4000);
162 }; 170 };
163 171
164 calcStopAngle = idx => { 172 calcStopAngle = idx => {
@@ -198,19 +206,37 @@ export default class wheelSurf extends PureComponent { @@ -198,19 +206,37 @@ export default class wheelSurf extends PureComponent {
198 this.rotate(); 206 this.rotate();
199 }; 207 };
200 208
  209 + stop = angle => {
  210 + let rotateDeg = angle + 360 * 5;
  211 + let randCssName = 'stop_' + (new Date()).getTime();
  212 + let randCssContent = '{' +
  213 + 'transform: rotateZ(' + rotateDeg + 'deg) !important;' +
  214 + '-webkit-transform: rotateZ(' + rotateDeg + 'deg) !important;' +
  215 + '-webkit-transition: transform 4s ease-out;' +
  216 + '}';
  217 +
  218 + document.getElementsByTagName('style')[0].innerHTML += ('.' + randCssName + ' ' + randCssContent);
  219 + document.getElementById('rotateWheel').className = 'wheel-bg ' + randCssName;
  220 + document.getElementById('rotateWheel').style.webkitTransform = 'rotateZ(' + angle + 'deg)';
  221 +
  222 +
  223 + let timer = setTimeout(() => {
  224 + this.setState({
  225 + startEnded: true
  226 + });
  227 + clearTimeout(timer);
  228 + }, 4000);
  229 + };
  230 +
201 rotate = () => { 231 rotate = () => {
202 - let {slowEnding, startEnded, remainCount} = this.state; 232 + let {slowEnding, startEnded} = this.state;
203 233
204 if (startEnded) { 234 if (startEnded) {
205 return; 235 return;
206 } 236 }
207 237
208 if (!slowEnding) { 238 if (!slowEnding) {
209 - this.setState({  
210 - pending: true  
211 - });  
212 -  
213 - if (this.state.speed < 20) { 239 + if (this.state.speed < 16) {
214 this.state.speed += 0.2; 240 this.state.speed += 0.2;
215 } 241 }
216 242
@@ -218,45 +244,9 @@ export default class wheelSurf extends PureComponent { @@ -218,45 +244,9 @@ export default class wheelSurf extends PureComponent {
218 if (this.state.angle >= 360) { 244 if (this.state.angle >= 360) {
219 this.state.angle -= 360; 245 this.state.angle -= 360;
220 } 246 }
221 - } else {  
222 - this.state.angle = parseInt(this.state.angle);  
223 -  
224 - if (this.state.angle >= 360 ) {  
225 - this.state.angle -= 360;  
226 - }  
227 - if (!this.state.setStopAngle) {  
228 - this.state.angle += 3;  
229 -  
230 - if (this.state.angle >= 359) {  
231 - this.state.angle = 0;  
232 - this.state.setStopAngle = true;  
233 - }  
234 - }  
235 - if (this.state.setStopAngle) {  
236 - let diff = this.state.stopAngle - this.state.angle;  
237 -  
238 - switch (true) {  
239 - case (diff > 200):  
240 - this.state.angle += 4;  
241 - break;  
242 - case (diff > 100):  
243 - this.state.angle += 2;  
244 - break;  
245 - default:  
246 - this.state.angle += 1;  
247 - }  
248 -  
249 - if (this.state.angle >= this.state.stopAngle) {  
250 - this.state.setStopAngle = false;  
251 -  
252 - this.setState({  
253 - startEnded: true  
254 - });  
255 - }  
256 - }  
257 } 247 }
258 248
259 - if (!this.state.startEnded) { 249 + if (!this.state.slowEnding) {
260 document.getElementById('rotateWheel').style.webkitTransform = 'rotateZ(' + this.state.angle + 'deg)'; 250 document.getElementById('rotateWheel').style.webkitTransform = 'rotateZ(' + this.state.angle + 'deg)';
261 requestAnimationFrame(this.rotate) 251 requestAnimationFrame(this.rotate)
262 } 252 }
@@ -295,6 +285,7 @@ export default class wheelSurf extends PureComponent { @@ -295,6 +285,7 @@ export default class wheelSurf extends PureComponent {
295 startEnded: false, 285 startEnded: false,
296 speed: 0 286 speed: 0
297 }); 287 });
  288 + document.getElementById('rotateWheel').className = 'wheel-bg';
298 }; 289 };
299 290
300 shareInApp = () => { 291 shareInApp = () => {
@@ -3,7 +3,9 @@ import './index.scss' @@ -3,7 +3,9 @@ import './index.scss'
3 import {prize} from '../../api'; 3 import {prize} from '../../api';
4 import yaSDK from 'yoho-activity-sdk'; 4 import yaSDK from 'yoho-activity-sdk';
5 import config from '../../config'; 5 import config from '../../config';
  6 +import wx from 'weixin-js-sdk';
6 import TipModal from '../components/tip-modal'; 7 import TipModal from '../components/tip-modal';
  8 +import moment from 'moment';
7 9
8 10
9 export default class Prize extends PureComponent { 11 export default class Prize extends PureComponent {
@@ -12,6 +14,7 @@ export default class Prize extends PureComponent { @@ -12,6 +14,7 @@ export default class Prize extends PureComponent {
12 super(props); 14 super(props);
13 this.state = { 15 this.state = {
14 prizes: [], 16 prizes: [],
  17 + pending: true,
15 showModal: false, 18 showModal: false,
16 modalTip: '请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服', 19 modalTip: '请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服',
17 modalBtnText: '确定' 20 modalBtnText: '确定'
@@ -30,6 +33,11 @@ export default class Prize extends PureComponent { @@ -30,6 +33,11 @@ export default class Prize extends PureComponent {
30 33
31 if (yaSDK.env !== 'miniprogram') { 34 if (yaSDK.env !== 'miniprogram') {
32 yaSDK.link(event); 35 yaSDK.link(event);
  36 + } else {
  37 + wx.miniProgram.navigateTo({url: {
  38 + 2: '/page/subPackage/pages/allowance/allowance',
  39 + 3: '/page/subPackage/pages/couponList/couponList'
  40 + }[type]});
33 } 41 }
34 }; 42 };
35 43
@@ -51,20 +59,26 @@ export default class Prize extends PureComponent { @@ -51,20 +59,26 @@ export default class Prize extends PureComponent {
51 }); 59 });
52 60
53 this.setState({ 61 this.setState({
  62 + pending: false,
54 prizes: result.data 63 prizes: result.data
55 }); 64 });
56 - }) 65 + });
57 } 66 }
58 67
59 render() { 68 render() {
60 - let {showModal, modalTip, modalBtnText} = this.state; 69 + let {showModal, modalTip, modalBtnText, pending} = this.state;
61 let backUrl = `${document.location.protocol}//${document.location.host}${config.routerPath}/home.html?actId=${yaSDK.getQueryObj().actId}`; 70 let backUrl = `${document.location.protocol}//${document.location.host}${config.routerPath}/home.html?actId=${yaSDK.getQueryObj().actId}`;
62 71
63 let couponLink = 'https://m.yohobuy.com/home/coupons?openby:yohobuy={"action":"go.coupon"}'; 72 let couponLink = 'https://m.yohobuy.com/home/coupons?openby:yohobuy={"action":"go.coupon"}';
64 let redEnvelopeLink = 'https://activity.yoho.cn/feature/3221.html?title=我的红包&openby:yohobuy={"action":"go.mineredpackage"}'; 73 let redEnvelopeLink = 'https://activity.yoho.cn/feature/3221.html?title=我的红包&openby:yohobuy={"action":"go.mineredpackage"}';
65 74
  75 + this.state.prizes.map(prize => {
  76 + prize.createTime = moment(new Date(prize.createTime).getTime()).format('YYYY-MM-DD HH:mm');
  77 + });
  78 +
66 return ( 79 return (
67 - <div className="my-prize-wrap"> 80 + pending ? '' :
  81 + (<div className="my-prize-wrap">
68 { 82 {
69 this.state.prizes.length ? ( 83 this.state.prizes.length ? (
70 this.state.prizes.map(prize => { 84 this.state.prizes.map(prize => {
@@ -74,7 +88,7 @@ export default class Prize extends PureComponent { @@ -74,7 +88,7 @@ export default class Prize extends PureComponent {
74 <img src={prize.img} className="prize-img"/> 88 <img src={prize.img} className="prize-img"/>
75 <div className="prize-info"> 89 <div className="prize-info">
76 <div className="prize-name">{prize.name}</div> 90 <div className="prize-name">{prize.name}</div>
77 - <div className="got-time">中奖时间：2018-10-12 20:20</div> 91 + <div className="got-time">中奖时间：{prize.createTime}</div>
78 </div> 92 </div>
79 </div> 93 </div>
80 <div className="item-bottom"> 94 <div className="item-bottom">
@@ -98,7 +112,7 @@ export default class Prize extends PureComponent { @@ -98,7 +112,7 @@ export default class Prize extends PureComponent {
98 { 112 {
99 showModal ? <TipModal tip={modalTip} btnText={modalBtnText} confirm={() => {this.confirm()}} /> : '' 113 showModal ? <TipModal tip={modalTip} btnText={modalBtnText} confirm={() => {this.confirm()}} /> : ''
100 } 114 }
101 - </div> 115 + </div>)
102 ) 116 )
103 } 117 }
104 } 118 }
@@ -9,7 +9,7 @@ export default { @@ -9,7 +9,7 @@ export default {
9 }, 9 },
10 development: { 10 development: {
11 routerPath: { 11 routerPath: {
12 - wheelSurf: '/test/2018/10/wheelSurf', 12 + wheelSurf: '/html5/test/2018/10/wheelSurf',
13 }, 13 },
14 domain: '//yoho-activity-platform.test3.ingress.dev.yohocorp.com', 14 domain: '//yoho-activity-platform.test3.ingress.dev.yohocorp.com',
15 currentApp 15 currentApp