Skip to content

M
mr-julyedu
Commit 4ab8124c by wangshuo
Options

精品特惠 赚奖学金 tab替换

parent c047e3d2
Showing with 103 additions and 86 deletions
src/components/preferential/index.js
...@@ -43,7 +43,8 @@ class Preferential extends Component { ...@@ -43,7 +43,8 @@ class Preferential extends Component {
http.get(`${API.home}/m/home/bargainZone`).then((res) => { http.get(`${API.home}/m/home/bargainZone`).then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
this.setState({ this.setState({
dataList: res.data.data dataList: res.data.data,
isLoading: false,
}) })
} else { } else {
Toast.info(res.data.msg, 2) Toast.info(res.data.msg, 2)
...@@ -55,7 +56,8 @@ class Preferential extends Component { ...@@ -55,7 +56,8 @@ class Preferential extends Component {
http.get(`${API.home}/m/home/grouponList`).then((res) => { http.get(`${API.home}/m/home/grouponList`).then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
this.setState({ this.setState({
dataList: res.data.data dataList: res.data.data,
isLoading: false,
}) })
} else { } else {
Toast.info(res.data.msg, 2) Toast.info(res.data.msg, 2)
...@@ -64,7 +66,10 @@ class Preferential extends Component { ...@@ -64,7 +66,10 @@ class Preferential extends Component {
} }
// tab 切换 // tab 切换
ontabclick = (tab, index) => { ontabclick = (tab, index) => {
this.state.courseStatus = index this.setState({
courseStatus: index,
isLoading: true,
})
switch (index) { switch (index) {
case 0: case 0:
this.specialSale() this.specialSale()
...@@ -104,66 +109,67 @@ class Preferential extends Component { ...@@ -104,66 +109,67 @@ class Preferential extends Component {
animated={false} animated={false}
onChange={(tab, index) => this.ontabclick(tab, index)} onChange={(tab, index) => this.ontabclick(tab, index)}
swipeable={false} swipeable={false}
page={this.state.courseStatus}
renderTabBar={props => <div className={'custom-tab-bar'}> renderTabBar={props => <div className={'custom-tab-bar'}>
<Tabs.DefaultTabBar {...props}/> <Tabs.DefaultTabBar {...props}/>
</div>} </div>}
> >
<div className='tabs'> </Tabs>
<ul> <div className='tabs'>
{this.state.dataList.map((item, index) => { <ul>
const Info = ( {this.state.dataList.map((item, index) => {
<div className="info"> const Info = (
<p className='title' onClick={() => this.toCourseDetail(item.course_id)}> <div className="info">
{/* <Link to={`/detail?id=${item.course_id}`}> */} <p className='title' onClick={() => this.toCourseDetail(item.course_id)}>
{item.course_title} {/* <Link to={`/detail?id=${item.course_id}`}> */}
{/* </Link> */} {item.course_title}
</p> {/* </Link> */}
<p className='contact text-overflow-2'>{item.course_desc}</p> </p>
<div className='des'> <p className='contact text-overflow-2'>{item.course_desc}</p>
{!item.is_buy && <div className='des'>
<p className="course-price"> {!item.is_buy &&
{this.state.courseStatus === 0 && <p className="course-price">
<span className='price'>特惠价：</span> {this.state.courseStatus === 0 &&
} <span className='price'>特惠价：</span>
<span className="new">¥{item.price1}</span>
<span className="old">¥{item.price0}</span>
</p>
}
{item.is_buy &&
<a className="isbuy">已购买</a>
} }
</div> <span className="new">¥{item.price1}</span>
</div> <span className="old">¥{item.price0}</span>
) </p>
const status = (
!item.is_buy &&
<div>
{this.state.courseStatus === 1 &&
<p className='course-status'>砍价减{item.bargain_price}元</p>
}
{this.state.courseStatus === 2 &&
<p className='course-status'>拼团价{item.price}元</p>
} }
{ {item.is_buy &&
item.is_aist && <span className='return_cash'></span> <a className="isbuy">已购买</a>
} }
</div> </div>
) </div>
return ( )
<VList const status = (
key={index} !item.is_buy &&
img={item.image_name} <div>
id={item.course_id} {this.state.courseStatus === 1 &&
status={status} <p className='course-status'>砍价减{item.bargain_price}元</p>
info={Info} }
toDetail={this.toCourseDetail} {this.state.courseStatus === 2 &&
/> <p className='course-status'>拼团价{item.price}元</p>
) }
})} {
</ul> item.is_aist && <span className='return_cash'></span>
}
</div>
)
return (
<VList
key={index}
img={item.image_name}
id={item.course_id}
status={status}
info={Info}
toDetail={this.toCourseDetail}
/>
)
})}
</ul>
</div> </div>
</Tabs>
<WhiteSpace/> <WhiteSpace/>
</div> </div>
</Loading> </Loading>
......
src/components/scholarship/index.js
...@@ -31,6 +31,7 @@ class _Scholarship extends Component { ...@@ -31,6 +31,7 @@ class _Scholarship extends Component {
isLoading: false, isLoading: false,
showNoData: false, showNoData: false,
hasMore: true, hasMore: true,
tab: 0,
} }
this.downImage = React.createRef(); this.downImage = React.createRef();
this.tabIndex = 0; this.tabIndex = 0;
...@@ -307,6 +308,7 @@ class _Scholarship extends Component { ...@@ -307,6 +308,7 @@ class _Scholarship extends Component {
isLoading: false, isLoading: false,
hasMore: true, hasMore: true,
dataSource: this.state.dataSource.cloneWithRows(this.rData), dataSource: this.state.dataSource.cloneWithRows(this.rData),
tab: index,
}, },
() => { () => {
this.onEndReached(); this.onEndReached();
...@@ -314,43 +316,52 @@ class _Scholarship extends Component { ...@@ -314,43 +316,52 @@ class _Scholarship extends Component {
); );
}} }}
> >
<div style={{ marginTop: '15px', backgroundColor: '#FFF' }}> </Tabs>
{ {
this.state.dataSource._cachedRowCount !== 0 ? ( this.state.tab === 0 ? (
<ListView <div style={{ marginTop: '15px', backgroundColor: '#FFF' }}>
useBodyScroll={this.state.useBodyScroll} {
dataSource={this.state.dataSource} this.state.dataSource._cachedRowCount !== 0 ? (
renderRow={row} <ListView
renderBodyComponent={() => <div />} useBodyScroll={this.state.useBodyScroll}
onEndReached={this.onEndReached} dataSource={this.state.dataSource}
pageSize={4} renderRow={row}
onEndReachedThreshold={100} renderBodyComponent={() => <div />}
/> onEndReached={this.onEndReached}
) : ( pageSize={4}
onEndReachedThreshold={100}
/>
) : (
null null
) )
} }
</div>
) : null
}
</div> {
<div> this.state.tab === 1 ? (
<Flex justify='center' align='center' className={'runtimeList'}>榜单实时更新，仅显示前50名</Flex> <div>
{ <Flex justify='center' align='center' className={'runtimeList'}>榜单实时更新，仅显示前50名</Flex>
this.state.dataSource._cachedRowCount !== 0 ? ( {
<ListView this.state.dataSource._cachedRowCount !== 0 ? (
useBodyScroll={this.state.useBodyScroll} <ListView
dataSource={this.state.dataSource} useBodyScroll={this.state.useBodyScroll}
renderRow={row1} dataSource={this.state.dataSource}
renderBodyComponent={() => <div />} renderRow={row1}
onEndReached={this.onEndReached} renderBodyComponent={() => <div />}
pageSize={4} onEndReached={this.onEndReached}
onEndReachedThreshold={100} pageSize={4}
/> onEndReachedThreshold={100}
) : ( />
) : (
null null
) )
} }
</div> </div>
</Tabs> ) : null
}
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment