React+AntdUi实现《好客租房系统》房屋详情05.1

我的收藏模块

检查房源是否收藏
收藏房源
检查房源是否收藏 
在state中添加状态,isFavorite(表示是否收藏),默认值是false
state= {
// 表示房源是否收藏
isFavorite: false
}

创建方法 checkFavorite,在进入房源详情页面时调用该方法
先调用isAuth方法,来判断是否登陆
如果未登录,直接return,不再检查是否收藏
如果已登陆,从路由参数中,获取当前房屋id
使用API调用接口,查询该房源是否收藏
如果返回状态码为200,就更新isFavorite;否则,不做任何处理

async checkFavorite() {
const isLogin = isAuth()

if (!isLogin) {
// 没有登录
return
}

// 已登录
const { id } = this.props.match.params
const res = await API.get(`/user/favorites/${id}`)

const { status, body } = res.data
if (status === 200) {
// 表示请求已经成功,需要更新 isFavorite 的值
this.setState({
isFavorite: body.isFavorite
})
}
}
{/*在页面结构中,通过状态isFavorite修改收藏按钮的文字和图片内容
 底部收藏按钮 */}
<Flex className={styles.fixedBottom}>
<Flex.Item>
<img
src={
BASE_URL + (isFavorite ? '/img/star.png' : '/img/unstar.png')
}
className={styles.favoriteImg}
alt="收藏"
/>
<span className={styles.favorite}>
{isFavorite ? '已收藏' : '收藏'}
</span>
</Flex.Item>
<Flex.Item>在线咨询</Flex.Item>
<Flex.Item>
<a href="tel:400-618-4000" className={styles.telephone}>
电话预约
</a>
</Flex.Item>
</Flex>

收藏房源
给收藏按钮绑定点击事件,创建方法handleFavorite作为事件处理程序
调用isAuth方法,判断是否登陆
如果未登录,则使用Modal.alert 提示用户是否去登陆
如果点击取消,则不做任何操作
如果点击去登陆,就跳转到登陆页面,同时传递state(登陆后,再回到房源收藏页面)

const isLogin = isAuth()
const { history, location, match } = this.props

if (!isLogin) {
// 未登录
return alert('提示', '登录后才能收藏房源,是否去登录?', [
{ text: '取消' },
{
text: '去登录',
onPress: () => history.push('/login', { from: location })
}
])
}

根据isFavorite判断,当前房源是否收藏
如果未收藏,就调用添加收藏接口,添加收藏
如果收藏了,就调用删除接口,删除收藏

if (isFavorite) {
// 已收藏,应该删除收藏
const res = await API.delete(`/user/favorites/${id}`)
// console.log(res)
this.setState({
isFavorite: false
})

if (res.data.status === 200) {
// 提示用户取消收藏
Toast.info('已取消收藏', 1, null, false)
} else {
// token 超时
Toast.info('登录超时,请重新登录', 2, null, false)
}
} else {
// 未收藏,应该添加收藏
const res = await API.post(`/user/favorites/${id}`)
// console.log(res)
if (res.data.status === 200) {
// 提示用户收藏成功
Toast.info('已收藏', 1, null, false)
this.setState({
isFavorite: true
})
} else {
// token 超时
Toast.info('登录超时,请重新登录', 2, null, false)
}
}
handleFavorite = async () => {
const isLogin = isAuth()
const { history, location, match } = this.props

if (!isLogin) {
// 未登录
return alert('提示', '登录后才能收藏房源,是否去登录?', [
{ text: '取消' },
{
text: '去登录',
onPress: () => history.push('/login', { from: location })
}
])
}

// 已登录
const { isFavorite } = this.state
const { id } = match.params

if (isFavorite) {
// 已收藏,应该删除收藏
const res = await API.delete(`/user/favorites/${id}`)
// console.log(res)
this.setState({
isFavorite: false
})

if (res.data.status === 200) {
// 提示用户取消收藏
Toast.info('已取消收藏', 1, null, false)
} else {
// token 超时
Toast.info('登录超时,请重新登录', 2, null, false)
}
} else {
// 未收藏,应该添加收藏
const res = await API.post(`/user/favorites/${id}`)
// console.log(res)
if (res.data.status === 200) {
// 提示用户收藏成功
Toast.info('已收藏', 1, null, false)
this.setState({
isFavorite: true
})
} else {
// token 超时
Toast.info('登录超时,请重新登录', 2, null, false)
}
}
}

 

本文参考react好租客项目Day10-检测是否登&退出&axios拦截器&鉴权路由&收藏模块_码化疼-CSDN博客

posted @ 2021-07-31 01:44  AoYeDDM  阅读(59)  评论(0编辑  收藏  举报