Authored by 李奇

奖品为空页添加

... ... @@ -2,6 +2,7 @@ import React, {PureComponent} from 'react';
import './index.scss'
import {prize} from '../../api';
import yaSDK from 'yoho-activity-sdk';
import config from '../../config';
import TipModal from '../components/tip-modal';
... ... @@ -10,19 +11,7 @@ export default class Prize extends PureComponent {
document.title ='我的奖品';
super(props);
this.state = {
prizes: [
{
id: 1,
type: 2
}, {
id: 2,
type: 3
}, {
id: 3,
type: 4
}
],
prizes: [],
showModal: false,
modalTip: '请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服',
modalBtnText: '确定'
... ... @@ -30,7 +19,6 @@ export default class Prize extends PureComponent {
}
detail = (event, prize) => {
console.log('查看详情');
const type = prize.type;
if (type === 4) {
... ... @@ -51,38 +39,41 @@ export default class Prize extends PureComponent {
});
};
backTry = (e) => {
yaSDK.link(e);
};
componentDidMount() {
yaSDK.getUid().then(uid => {
prize({
yaSDK.getUid().then(async uid => {
let result = await prize({
act_id: +yaSDK.getQueryObj().actId,
uid: uid || +yaSDK.getQueryObj().uid
})
});
this.setState({
prizes: result.data
});
})
}
render() {
let {showModal, modalTip, modalBtnText} = this.state;
let backUrl = `${document.location.protocol}//${document.location.host}${config.routerPath}/home.html?actId=${yaSDK.getQueryObj().actId}`;
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 小程序红包优惠券链接
}
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"}';
return (
<div className="my-prize-wrap">
{
this.state.prizes.length ? (
this.state.prizes.map(prize => {
return (
<div className="prize-item" key={prize.id}>
<div className="item-top">
<img src="http://img11.static.yhbimg.com/yhb-img01/2018/10/11/10/0157b624efd3c0db2e2b0c1c5b84a1fff7.png" className="prize-img"/>
<img src={prize.img} className="prize-img"/>
<div className="prize-info">
<div className="prize-name">OFF-WHITE x Nike Air and nnAir and nnAir and nnAir and nnAir and nnAir and nn</div>
<div className="prize-name">{prize.name}</div>
<div className="got-time">中奖时间:2018-10-12 20:20</div>
</div>
</div>
... ... @@ -95,7 +86,14 @@ export default class Prize extends PureComponent {
</div>
</div>
)
})
})) : (
<div className="empty-prize">
<img className="empty-img" src="http://img11.static.yhbimg.com/yhb-img01/2018/10/15/17/01a6e21ead7c45efdc7ba902de73218854.png" alt=""/>
<div className="empty-tip">您暂时没有奖品</div>
<div className="back-try" onClick={(event) => this.backTry(event)} data-type="other"
data-url={backUrl}>去抽奖</div>
</div>
)
}
{
showModal ? <TipModal tip={modalTip} btnText={modalBtnText} confirm={() => {this.confirm()}} /> : ''
... ...
... ... @@ -85,4 +85,37 @@ body {
height: 30px;
}
}
.empty-prize {
text-align: center;
padding-top: 272px;
.empty-img {
width: 180px;
height: 180px;
}
.empty-tip {
font-family: PingFang-SC-Regular;
font-size: 24px;
color: #444444;
letter-spacing: 0;
text-align: center;
margin-top: 60px;
}
.back-try {
height: 80px;
width: 426px;
margin: 130px auto 0;
background: #363636;
border-radius: 2px;
font-family: PingFang-SC-Regular;
font-size: 28px;
color: #FFFFFF;
letter-spacing: 0;
text-align: center;
line-height: 80px;
}
}
}
\ No newline at end of file
... ...