<div class="collection"> <el-button @click="toggleCollection">{{ isCollected ? '取消收藏' : '收藏' }}</el-button> </div> const isCollected = ref(false); // 是否已收藏 // 点击收藏按钮 async function collect() { try { // 调用收藏接口 await collectionKnowledge({ KNOWLEDGEID: detailContent.value.ID }); isCollected.value = true; // 更新状态 } catch (e) { console.error('收藏失败:', e); } } // 点击取消收藏按钮 async function cancelCollect() { try { // 调用取消收藏接口 await detelecollKnowledge({ knowledgeId: detailContent.value.ID }); isCollected.value = false; // 更新状态 } catch (e) { console.error('取消收藏失败:', e); } } // 切换收藏状态 function toggleCollection() { if (isCollected.value) { cancelCollect(); // 取消收藏 } else { collect(); // 收藏 } } // 新增知识收藏 const collectionKnowledge = async (item: AddKnowledgeCollect) => { const { RetCode } = await AddKnowledgeCollectApi(item); return RetCode === 1001; }; // 根据主键取消知识收藏 const detelecollKnowledge = async (item: DeleteKnowledge) => { const { RetCode } = await DeleteByKnowledgeApi(item); return RetCode === 1001; }; 如何实现点击收藏如果在页面中查看网络的预载返回的{RetCode: 2004, ReturnData: "当前登录用户为空"};则出现提示说该用户未登录,而且按钮还是收藏未改变,跳转登录页面;登录之后点击收藏之后,变成取消收藏,如果已经收藏了,刷新页面的状态还是取消收藏,不会刷新页面之后又将按钮变为初始状态
时间: 2024-02-23 14:00:52 浏览: 5
你可以在收藏和取消收藏的函数中加入判断用户是否已登录的代码,如下所示:
```
// 点击收藏按钮
async function collect() {
try {
// 检查用户是否已登录
if (!isUserLoggedIn()) {
showLoginPrompt();
return;
}
// 调用收藏接口
await collectionKnowledge({ KNOWLEDGEID: detailContent.value.ID });
isCollected.value = true; // 更新状态
} catch (e) {
console.error('收藏失败:', e);
}
}
// 点击取消收藏按钮
async function cancelCollect() {
try {
// 检查用户是否已登录
if (!isUserLoggedIn()) {
showLoginPrompt();
return;
}
// 调用取消收藏接口
await detelecollKnowledge({ knowledgeId: detailContent.value.ID });
isCollected.value = false; // 更新状态
} catch (e) {
console.error('取消收藏失败:', e);
}
}
// 检查用户是否已登录
function isUserLoggedIn() {
// TODO: 实现检查用户是否已登录的逻辑
return true; // 假设用户已登录
}
// 显示登录提示
function showLoginPrompt() {
// TODO: 实现显示登录提示的逻辑
alert('请先登录');
}
```
在 `isUserLoggedIn` 函数中,你需要实现检查用户是否已登录的逻辑。如果用户已登录,返回 `true`,否则返回 `false`。在 `showLoginPrompt` 函数中,你需要实现显示登录提示的逻辑,比如弹出一个模态框或者跳转到登录页面。
当用户点击收藏按钮时,首先会检查用户是否已登录。如果用户未登录,则会显示登录提示,不会执行收藏操作。如果用户已登录,则会调用收藏接口,并更新收藏状态。当用户点击取消收藏按钮时,也会先检查用户是否已登录,然后调用取消收藏接口,并更新收藏状态。在页面刷新之后,按钮的状态会根据当前知识是否已收藏来显示,不会恢复到初始状态。