fe / yoho-activitys · Commits

Go to a project

Authored by 李奇
Commit 13d53c20ea0a82eb227580bf8189722a7fc293e2 1 parent a9a8168d

修改

Inline Side-by-side
Showing 8 changed files with 208 additions and 32 deletions
... ... @@ -3,6 +3,6 @@ import config from '../config'
let conf = params => httpService.postJson(config.domain + '/api/activity/wheelSurf/conf', params);
let start = params => httpService.postJson(config.domain + '/api/activity/wheelSurf/start', params);
let prize = query => httpService.get(config.domain + '/api/activity/wheelSurf/prize', query);
let prize = params => httpService.postJson(config.domain + '/api/activity/wheelSurf/user/prize', params);
let resource = query => httpService.get(config.domain + '/api/common/resource', query);
module.exports = {conf, start, resource};
\ No newline at end of file
module.exports = {conf, start, prize, resource};
\ No newline at end of file
... ...
... ... @@ -9,6 +9,7 @@ export default class BottomButton extends React.Component {
render() {
const linkArr = this.props.links;
const login = this.props.login || false;
if (!linkArr || !linkArr.length) {
return null;
... ... @@ -18,9 +19,22 @@ export default class BottomButton extends React.Component {
let $el = e.currentTarget;
let url = $el.getAttribute('data-url');
if (!url) {
return;
}
if (yaSDK.env !== 'app') {
const loginMatch = ['"islogin":"Y"', "'islogin':'Y'", 'islogin=Y'];
const filterMatch = loginMatch.filter(mch => {
return url.indexOf(mch) > -1;
});
if (filterMatch.length && !login) {
return yaSDK.goLogin();
}
}
yaSDK.link(e)
};
... ... @@ -29,10 +43,10 @@ export default class BottomButton extends React.Component {
{
linkArr.map((link, idx) => {
return (
<a data-type='other' data-url={link.url}
<span data-type='other' data-url={link.url}
className="button-item" key={idx} onClick={jump}>
<img className="btn-item-bg" src={link.bg}/>
</a>
</span>
)
})
}
... ...
import React from 'react';
import './index.scss';
export default class TipModal extends React.Component {
constructor(props) {
super(props);
this.state = {
floors: []
};
}
render() {
let {tip, btnText, confirm} = this.props;
return (
<div className="comp-tip-modal-wrap">
<div className="modal-bg"></div>
<div className="tip-wrap">
<div className="tip-body" dangerouslySetInnerHTML = {{ __html: tip}}></div>
<div className="tip-operation" onClick={confirm}>{btnText}</div>
</div>
</div>
)
}
}
\ No newline at end of file
... ...
.comp-tip-modal-wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
.modal-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.9;
background-color: #000000;
}
.tip-wrap {
position: absolute;
top: 360px;
left: 50%;
margin-left: -250px;
width: 500px;
background-color: #ffffff;
border-radius: 5px;
.tip-body {
padding: 20px 30px;
word-break: break-all;
border-bottom: 1px solid #e0e0e0;
font-family: PingFang-SC-Regular;
font-size: 28px;
color: #444444;
letter-spacing: 0;
text-align: center;
}
.tip-operation {
height: 88px;
line-height: 88px;
text-align: center;
font-family: PingFang-SC-Medium;
font-size: 28px;
color: #444444;
letter-spacing: 0;
}
}
}
\ No newline at end of file
... ...
... ... @@ -11,6 +11,7 @@ import {
import Resource from '../components/resource';
import BottomButton from '../components/bottom-button';
import TipModal from '../components/tip-modal';
export default class wheelSurf extends PureComponent {
constructor(props) {
... ... @@ -24,6 +25,7 @@ export default class wheelSurf extends PureComponent {
slowEnding: false, // 减速结束
startEnded: false, // 已结束
startType: true,
isLogin: false,
conf: {
... ... @@ -32,6 +34,11 @@ export default class wheelSurf extends PureComponent {
totalParts: '',
remainCount: '',
showTipModal: false,
modalTip: '',
modalBtnText: '',
gotDesc: '',
angle: 0, // 当前旋转角度
speed: 0, // 旋转速度
stopAngle: 0, // 停止的角度
... ... @@ -58,7 +65,7 @@ export default class wheelSurf extends PureComponent {
case 'h5':
if (!cookie.load('uid')) {
cookie.save('uid', this.state.uid);
cookie.save('session_key', this.state.query.session_key, { path: '/' });
cookie.save('app_session_key', this.state.query.session_key, { path: '/' });
cookie.save('app_client_type', this.state.query.app_client_type, { path: '/' });
cookie.save('app_version', this.state.query.app_version, { path: '/' });
}
... ... @@ -66,14 +73,14 @@ export default class wheelSurf extends PureComponent {
case 'miniprogram':
cookie.save('uid', this.state.uid);
cookie.save('session_key', this.state.query.session_key, { path: '/' });
cookie.save('app_session_key', this.state.query.session_key, { path: '/' });
cookie.save('app_client_type', this.state.query.client_type, { path: '/' });
cookie.save('app_version', '6.6.0', { path: '/' });
break;
case 'app':
cookie.save('uid', this.state.uid);
cookie.save('session_key', this.state.query.session_key, { path: '/' });
cookie.save('app_session_key', this.state.query.session_key, { path: '/' });
cookie.save('app_client_type', this.state.query.client_type, { path: '/' });
cookie.save('app_version', this.state.query.app_version, { path: '/' });
break;
... ... @@ -84,7 +91,7 @@ export default class wheelSurf extends PureComponent {
}
} else {
cookie.remove('uid');
cookie.remove('session_key');
cookie.remove('app_session_key');
cookie.remove('app_client_type');
cookie.remove('app_version');
}
... ... @@ -102,6 +109,8 @@ export default class wheelSurf extends PureComponent {
conf: result.data.conf,
totalParts: result.data.prize,
remainCount: result.data.residueCount,
startType: result.data.startType !== false,
startErrorMsg: result.data.errorMsg || ''
});
this.setWxShare();
} else {
... ... @@ -121,19 +130,17 @@ export default class wheelSurf extends PureComponent {
};
begin = async () => {
// 抽奖前验证是否可以抽奖
if (!this.state.remainCount) {
console.log('抽奖机会已经用完了');
return;
}
console.log('开始抽奖');
this.state.canStart = false;
this.setState({
remainCount: this.state.remainCount - 1
});
let result = await start({
act_id: +this.state.query.actId,
uid: cookie.load('uid'),
sessionKey: cookie.load('app_session_key'),
sessionKey: cookie.load('session_key'),
sessionType: cookie.load('app_client_type'),
appVersion: cookie.load('app_version')
});
... ... @@ -145,6 +152,7 @@ export default class wheelSurf extends PureComponent {
let timer = setTimeout(() => {
clearTimeout(timer);
this.state.stopAngle = this.calcStopAngle(result.data.prize_idx);
this.state.gotDesc = result.data.desc;
this.setState({
slowEnding: true
});
... ... @@ -161,6 +169,24 @@ export default class wheelSurf extends PureComponent {
if (!isLogin) {
return yaSDK.goLogin();
}
// 抽奖前验证是否可以抽奖
if (!this.state.startType) {
return this.setState({
showTipModal: true,
modalTip: '活动尚未开始',
modalBtnText: '确定'
});
}
// 抽奖前验证是否可以抽奖
if (!this.state.remainCount) {
return this.setState({
showTipModal: true,
modalTip: '您今天的抽奖次数已经用完<br/>请明天再来',
modalBtnText: '确定'
});
}
if (!canStart) {
return;
... ... @@ -173,7 +199,7 @@ export default class wheelSurf extends PureComponent {
rotate = () => {
let {slowEnding, startEnded, remainCount} = this.state;
if (startEnded || !remainCount) {
if (startEnded) {
return;
}
... ... @@ -270,17 +296,25 @@ export default class wheelSurf extends PureComponent {
};
shareInApp = () => {
const {conf} = this.state;
let shareData = {
title: '测试title',
link: 'http://www.baidu.com',
desc: '测试描述',
imgUrl: 'http://img11.static.yhbimg.com/yhb-img01/2018/10/11/10/0157b624efd3c0db2e2b0c1c5b84a1fff7.png',
title: conf.share_title,
link: conf.share_url,
desc: conf.share_desc,
imgUrl: conf.share_img,
hideType: ['7', '8', '9']
};
yaSDK.invokeMethod({method: 'go.showshareaction', args: shareData});
};
confirm = () => {
this.setState({
showTipModal: false
});
};
jump = e => {
let $el = e.currentTarget;
let url = $el.getAttribute('data-url');
... ... @@ -292,7 +326,7 @@ export default class wheelSurf extends PureComponent {
};
render() {
const {conf, slowEnding, isLogin, startEnded, remainCount, tryAgainTip} = this.state;
const {conf, slowEnding, isLogin, startEnded, remainCount} = this.state;
if (!conf.id) {
return (
... ... @@ -320,18 +354,21 @@ export default class wheelSurf extends PureComponent {
</div>) : ''
}
<BottomButton links={links}/>
<BottomButton links={links} login={isLogin}/>
<Resource code={conf.bottomContentCode}/>
{slowEnding ? (<img className="prize-hit-bg transition" src={conf.win_prize_bg}/>) : ''}
{startEnded ? (
<div className="got-tip">
<div className="prize-tip">{'恭喜您！中奖了'}</div>
<div className="prize-tip">{this.state.gotDesc}</div>
<span onClick={this.setCanStart} className="try-again">确定</span>
</div>
) : ''}
{slowEnding ? (<span onClick={this.setCanStart} className="close-prize-hit-bg">关闭</span>) : ''}
{slowEnding ? (<img className="prize-hit-start-bg" src={conf.prize_btn_bg}/>) : ''}
{
this.state.showTipModal ? <TipModal tip={this.state.modalTip} btnText={this.state.modalBtnText} confirm={() => {this.confirm()}} /> : ''
}
</div>
)
}
... ...
... ... @@ -29,6 +29,7 @@
.prize-hit-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
animation: showHitBg 2s 1;
}
... ...
import React, {PureComponent} from 'react';
import './index.scss'
import {prize} from '../../api'
import {prize} from '../../api';
import yaSDK from 'yoho-activity-sdk';
import TipModal from '../components/tip-modal';
export default class Prize extends PureComponent {
constructor(props) {
... ... @@ -9,23 +12,67 @@ export default class Prize extends PureComponent {
this.state = {
prizes: [
{
id: 1
id: 1,
type: 2
}, {
id: 2
id: 2,
type: 3
}, {
id: 3
id: 3,
type: 4
}
]
],
showModal: false,
modalTip: '请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服',
modalBtnText: '确定'
};
}
componentDidMount() {
detail = (event, prize) => {
console.log('查看详情');
const type = prize.type;
if (type === 4) {
this.setState({
showModal: true
});
return;
}
if (yaSDK.env !== 'miniprogram') {
yaSDK.link(event);
}
};
confirm = () => {
this.setState({
showModal: false
});
};
componentDidMount() {
yaSDK.getUid().then(uid => {
prize({
act_id: +yaSDK.getQueryObj().actId,
uid: uid || +yaSDK.getQueryObj().uid
})
})
}
render() {
let {showModal, modalTip, modalBtnText} = this.state;
let couponLink;
let redEnvelopeLink;
if (yaSDK.env !== 'miniprogram') {
couponLink = 'https://m.yohobuy.com/home/coupons?openby:yohobuy={"action":"go.coupon"}';
redEnvelopeLink = 'https://activity.yoho.cn/feature/3221.html?title=我的红包&openby:yohobuy={"action":"go.mineredpackage"}';
} else {
// TODO 小程序红包优惠券链接
}
return (
<div className="my-prize-wrap">
{
... ... @@ -40,7 +87,9 @@ export default class Prize extends PureComponent {
</div>
</div>
<div className="item-bottom">
<span className="detail">去查看
<span onClick={(event) => this.detail(event, prize)} data-type="other"
data-url={prize.type === 2 ? redEnvelopeLink : (prize.type === 3 ? couponLink : '')}
className="detail">去查看
<img className="detail-img" src="http://img10.static.yhbimg.com/yhb-img01/2018/10/13/10/0164db9af7f4b8c64573308b53a6ea409a.png"/>
</span>
</div>
... ... @@ -48,7 +97,9 @@ export default class Prize extends PureComponent {
)
})
}
{
showModal ? <TipModal tip={modalTip} btnText={modalBtnText} confirm={() => {this.confirm()}} /> : ''
}
</div>
)
}
... ...
... ... @@ -34,7 +34,6 @@ body {
margin-left: 230px;
height: 140px;
box-sizing: border-box;
border: 1px solid red;
}
.prize-name {
... ...