提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
mars3d App开发暂时涉及到的业务都是纯前端部分,但是我们也为后端留有接口,其中就包括判定导航路线或者POI点是否被收藏。
一、业务需求
点击收藏POI点或者路线后,再次进入时能够判定是否已经被收藏,并且收藏图标发现改变。
合肥南站 POI点已经被收藏,下次再次进来是依然显示被收藏。
二、实现过程
1.接口部分
代码如下:
// 判断是否已经被收藏
export async function isCollectionPoint(currPoint) {
const result = await getCollectionPointList() //或者所有被收藏的数据
if (result.data) {
return result.data.some((point) => {
let samePoint = false
if (point.name === currPoint.name || point.positions === currPoint.positions) {
samePoint = true
}
return samePoint
})
}
}
第一步:首先拿到所有被收藏的POI点数据
第二步:currPoint是传入的当前POI点。
第三步:通过名字和坐标是否相同判断该POI点是否已经被收藏
2.取消收藏
代码如下
const deleteCollectionPointById = async () => {
const { status, data } = await api.getCollectionPointList()
if (status === 200) {
const deletePoint = data.filter((item) => item.name === point.name)
deletePoint.forEach(async (element) => {
const { status } = await api.deleteCollectionPointById(element.id)
if (status === 200) {
$message({
message: "已取消收藏",
type: "success"
})
icon.value = "clarity:star-line"
}
})
}
}
3、收藏
代码如下
const addCollectionPoint = async (e: any) => {
const { status, data } = await api.addCollectionPoint(e)
if (status === 200) {
$message({
message: "已收藏",
type: "success"
})
icon.value = "ant-design:star-filled"
pointId.value = data.id
}
}