...
|
...
|
@@ -19,9 +19,9 @@ export default class wheelSurf extends PureComponent { |
|
|
super(props);
|
|
|
this.state = {
|
|
|
uid: 0,
|
|
|
expIdx: 1,
|
|
|
query: {},
|
|
|
canStart: true, // 可以抽奖
|
|
|
pending: false, // 抽奖中
|
|
|
slowEnding: false, // 减速结束
|
|
|
startEnded: false, // 已结束
|
|
|
|
...
|
...
|
@@ -108,6 +108,7 @@ export default class wheelSurf extends PureComponent { |
|
|
if (result.code === 200) {
|
|
|
this.setState({
|
|
|
conf: result.data.conf,
|
|
|
expIdx: result.data.prize_idx,
|
|
|
totalParts: result.data.prize,
|
|
|
remainCount: result.data.residueCount,
|
|
|
dayLeftTimesTip: result.data.conf.btm_tip_one,
|
...
|
...
|
@@ -122,12 +123,13 @@ export default class wheelSurf extends PureComponent { |
|
|
};
|
|
|
|
|
|
setWxShare = () => {
|
|
|
// TODO 分享信息
|
|
|
const {conf} = this.state;
|
|
|
|
|
|
yaSDK.wxShare({
|
|
|
title: 'haha',
|
|
|
imgUrl: '',
|
|
|
desc: '描述',
|
|
|
link: ''
|
|
|
title: conf.share_title,
|
|
|
imgUrl: `${conf.share_img}?imageView2/1/w/200/h/200`,
|
|
|
desc: conf.share_desc,
|
|
|
link: conf.share_url
|
|
|
});
|
|
|
};
|
|
|
|
...
|
...
|
@@ -142,13 +144,17 @@ export default class wheelSurf extends PureComponent { |
|
|
let result = await start({
|
|
|
act_id: +this.state.query.actId,
|
|
|
uid: cookie.load('uid'),
|
|
|
sessionKey: cookie.load('session_key'),
|
|
|
sessionKey: cookie.load('app_session_key'),
|
|
|
sessionType: cookie.load('app_client_type'),
|
|
|
appVersion: cookie.load('app_version')
|
|
|
});
|
|
|
|
|
|
if (result.code !== 200) {
|
|
|
console.log(result.message);
|
|
|
result = {
|
|
|
data: {
|
|
|
prize_idx: this.state.expIdx
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
let timer = setTimeout(() => {
|
...
|
...
|
@@ -158,7 +164,9 @@ export default class wheelSurf extends PureComponent { |
|
|
this.setState({
|
|
|
slowEnding: true
|
|
|
});
|
|
|
}, 2000);
|
|
|
this.state.angle = this.state.stopAngle;
|
|
|
this.stop(this.state.stopAngle);
|
|
|
}, 4000);
|
|
|
};
|
|
|
|
|
|
calcStopAngle = idx => {
|
...
|
...
|
@@ -197,66 +205,48 @@ export default class wheelSurf extends PureComponent { |
|
|
this.begin();
|
|
|
this.rotate();
|
|
|
};
|
|
|
|
|
|
stop = angle => {
|
|
|
let rotateDeg = angle + 360 * 5;
|
|
|
let randCssName = 'stop_' + (new Date()).getTime();
|
|
|
let randCssContent = '{' +
|
|
|
'transform: rotateZ(' + rotateDeg + 'deg) !important;' +
|
|
|
'-webkit-transform: rotateZ(' + rotateDeg + 'deg) !important;' +
|
|
|
'-webkit-transition: transform 4s ease-out;' +
|
|
|
'}';
|
|
|
|
|
|
document.getElementsByTagName('style')[0].innerHTML += ('.' + randCssName + ' ' + randCssContent);
|
|
|
document.getElementById('rotateWheel').className = 'wheel-bg ' + randCssName;
|
|
|
document.getElementById('rotateWheel').style.webkitTransform = 'rotateZ(' + angle + 'deg)';
|
|
|
|
|
|
|
|
|
let timer = setTimeout(() => {
|
|
|
this.setState({
|
|
|
startEnded: true
|
|
|
});
|
|
|
clearTimeout(timer);
|
|
|
}, 4000);
|
|
|
};
|
|
|
|
|
|
rotate = () => {
|
|
|
let {slowEnding, startEnded, remainCount} = this.state;
|
|
|
let {slowEnding, startEnded} = this.state;
|
|
|
|
|
|
if (startEnded) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (!slowEnding) {
|
|
|
this.setState({
|
|
|
pending: true
|
|
|
});
|
|
|
|
|
|
if (this.state.speed < 20) {
|
|
|
this.state.speed += 0.2;
|
|
|
if (this.state.speed < 16) {
|
|
|
this.state.speed += 0.2;
|
|
|
}
|
|
|
|
|
|
|
|
|
this.state.angle += this.state.speed;
|
|
|
if (this.state.angle >= 360) {
|
|
|
this.state.angle -= 360;
|
|
|
}
|
|
|
} else {
|
|
|
this.state.angle = parseInt(this.state.angle);
|
|
|
|
|
|
if (this.state.angle >= 360 ) {
|
|
|
this.state.angle -= 360;
|
|
|
}
|
|
|
if (!this.state.setStopAngle) {
|
|
|
this.state.angle += 3;
|
|
|
|
|
|
if (this.state.angle >= 359) {
|
|
|
this.state.angle = 0;
|
|
|
this.state.setStopAngle = true;
|
|
|
}
|
|
|
}
|
|
|
if (this.state.setStopAngle) {
|
|
|
let diff = this.state.stopAngle - this.state.angle;
|
|
|
|
|
|
switch (true) {
|
|
|
case (diff > 200):
|
|
|
this.state.angle += 4;
|
|
|
break;
|
|
|
case (diff > 100):
|
|
|
this.state.angle += 2;
|
|
|
break;
|
|
|
default:
|
|
|
this.state.angle += 1;
|
|
|
}
|
|
|
|
|
|
if (this.state.angle >= this.state.stopAngle) {
|
|
|
this.state.setStopAngle = false;
|
|
|
|
|
|
this.setState({
|
|
|
startEnded: true
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (!this.state.startEnded) {
|
|
|
if (!this.state.slowEnding) {
|
|
|
document.getElementById('rotateWheel').style.webkitTransform = 'rotateZ(' + this.state.angle + 'deg)';
|
|
|
requestAnimationFrame(this.rotate)
|
|
|
}
|
...
|
...
|
@@ -295,6 +285,7 @@ export default class wheelSurf extends PureComponent { |
|
|
startEnded: false,
|
|
|
speed: 0
|
|
|
});
|
|
|
document.getElementById('rotateWheel').className = 'wheel-bg';
|
|
|
};
|
|
|
|
|
|
shareInApp = () => {
|
...
|
...
|
|