import React, { Component } from "react" import { http } from "src/utils" import { Tabs } from "antd-mobile" import ListFrame from "./../listFrame/index" import "./index.scss" class LuckDraw extends Component { constructor(props) { super(props) this.state = { tabs: [], prizes: [], } } componentDidMount() { this.fetchActivityPrize() } fetchActivityPrize = () => { http.get(`${API.home}/sys/activity/prize_data`).then((res) => { const { code, data: { list = [] }, } = res.data if (code === 200) { this.setState({ tabs: list.map((item) => { return { title: item.date, } }), prizes: list, }) } }) } render() { const { tabs, prizes } = this.state return ( <div className="luck-draw__container"> <Tabs swipeable={false} tabs={tabs} tabBarBackgroundColor="transparent" tabBarUnderlineStyle={{ display: "none", }} > {prizes.map(({ son }, index) => { return ( <div className="tab__body" key={index}> {son.map((val) => ( <div key={val.id}> <h2 className="prize__label"> <i className="prize__label-icon"></i> <span>{val.time}</span> </h2> <div className="prize__content"> {val.data.map((v, k) => ( <div className="prize__container" key={`${val.id}-${k}`} > <div className="prize__image"> {/* eslint-disable-next-line jsx-a11y/alt-text */} <img src={v.img} /> </div> <p className="prize__desc">{v.name}</p> <p className="prize__desc">(*{v.num})</p> </div> ))} </div> </div> ))} </div> ) })} </Tabs> </div> ) } } export default ListFrame(LuckDraw)