Authored by huangyi

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

... ... @@ -4,7 +4,7 @@ module.exports = {
domain: 'https://action.yoho.cn'
},
development: {
routerPath: '/test/2018/10/wheelSurf',
routerPath: '/html5/test/2018/10/wheelSurf',
domain: '//yoho-activity-platform.test3.ingress.dev.yohocorp.com'
}
}[process.env.NODE_ENV || 'development']
\ No newline at end of file
... ...
... ... @@ -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 = () => {
... ...
... ... @@ -3,7 +3,9 @@ import './index.scss'
import {prize} from '../../api';
import yaSDK from 'yoho-activity-sdk';
import config from '../../config';
import wx from 'weixin-js-sdk';
import TipModal from '../components/tip-modal';
import moment from 'moment';
export default class Prize extends PureComponent {
... ... @@ -12,6 +14,7 @@ export default class Prize extends PureComponent {
super(props);
this.state = {
prizes: [],
pending: true,
showModal: false,
modalTip: '请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服',
modalBtnText: '确定'
... ... @@ -30,6 +33,11 @@ export default class Prize extends PureComponent {
if (yaSDK.env !== 'miniprogram') {
yaSDK.link(event);
} else {
wx.miniProgram.navigateTo({url: {
2: '/page/subPackage/pages/allowance/allowance',
3: '/page/subPackage/pages/couponList/couponList'
}[type]});
}
};
... ... @@ -51,20 +59,26 @@ export default class Prize extends PureComponent {
});
this.setState({
pending: false,
prizes: result.data
});
})
});
}
render() {
let {showModal, modalTip, modalBtnText} = this.state;
let {showModal, modalTip, modalBtnText, pending} = this.state;
let backUrl = `${document.location.protocol}//${document.location.host}${config.routerPath}/home.html?actId=${yaSDK.getQueryObj().actId}`;
let couponLink = 'https://m.yohobuy.com/home/coupons?openby:yohobuy={"action":"go.coupon"}';
let redEnvelopeLink = 'https://activity.yoho.cn/feature/3221.html?title=我的红包&openby:yohobuy={"action":"go.mineredpackage"}';
this.state.prizes.map(prize => {
prize.createTime = moment(new Date(prize.createTime).getTime()).format('YYYY-MM-DD HH:mm');
});
return (
<div className="my-prize-wrap">
pending ? '' :
(<div className="my-prize-wrap">
{
this.state.prizes.length ? (
this.state.prizes.map(prize => {
... ... @@ -74,7 +88,7 @@ export default class Prize extends PureComponent {
<img src={prize.img} className="prize-img"/>
<div className="prize-info">
<div className="prize-name">{prize.name}</div>
<div className="got-time">中奖时间:2018-10-12 20:20</div>
<div className="got-time">中奖时间:{prize.createTime}</div>
</div>
</div>
<div className="item-bottom">
... ... @@ -98,7 +112,7 @@ export default class Prize extends PureComponent {
{
showModal ? <TipModal tip={modalTip} btnText={modalBtnText} confirm={() => {this.confirm()}} /> : ''
}
</div>
</div>)
)
}
}
\ No newline at end of file
... ...
... ... @@ -9,7 +9,7 @@ export default {
},
development: {
routerPath: {
wheelSurf: '/test/2018/10/wheelSurf',
wheelSurf: '/html5/test/2018/10/wheelSurf',
},
domain: '//yoho-activity-platform.test3.ingress.dev.yohocorp.com',
currentApp
... ...