<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": "当前登录用户为空", "Message": "数据校验失败" };则出现提示说该用户未登录,而且按钮还是收藏未改变,跳转登录页面;登录之后点击收藏之后,变成取消收藏,如果已经收藏了,刷新页面的状态还是取消收藏,不会刷新页面之后又将按钮变为初始状态
时间: 2024-02-23 22:02:11 浏览: 21
你可以在collect和cancelCollect方法中添加判断当前用户是否已登录的逻辑,如果未登录则弹出提示并跳转至登录页面。同时,在collect和cancelCollect方法执行完成后,需要重新获取收藏状态并更新按钮状态,可以通过调用获取收藏状态的接口实现。
具体实现如下:
1. 在collect和cancelCollect方法中添加判断当前用户是否已登录的逻辑:
```javascript
// 点击收藏按钮
async function collect() {
if (!isLogin()) { // 判断当前用户是否已登录
alert('请先登录!'); // 弹出提示
redirectToLogin(); // 跳转至登录页面
return;
}
try {
// 调用收藏接口
await collectionKnowledge({ KNOWLEDGEID: detailContent.value.ID });
isCollected.value = true; // 更新状态
} catch (e) {
console.error('收藏失败:', e);
}
}
// 点击取消收藏按钮
async function cancelCollect() {
if (!isLogin()) { // 判断当前用户是否已登录
alert('请先登录!'); // 弹出提示
redirectToLogin(); // 跳转至登录页面
return;
}
try {
// 调用取消收藏接口
await detelecollKnowledge({ knowledgeId: detailContent.value.ID });
isCollected.value = false; // 更新状态
} catch (e) {
console.error('取消收藏失败:', e);
}
}
// 判断当前用户是否已登录
function isLogin() {
// 判断用户是否已登录的逻辑
// 返回true表示已登录,false表示未登录
}
// 跳转至登录页面
function redirectToLogin() {
// 跳转至登录页面的逻辑
}
```
2. 在collect和cancelCollect方法执行完成后,重新获取收藏状态并更新按钮状态:
```javascript
// 点击收藏按钮
async function collect() {
if (!isLogin()) { // 判断当前用户是否已登录
alert('请先登录!'); // 弹出提示
redirectToLogin(); // 跳转至登录页面
return;
}
try {
// 调用收藏接口
await collectionKnowledge({ KNOWLEDGEID: detailContent.value.ID });
isCollected.value = true; // 更新状态
isCollected.value = await getCollectionStatus(); // 重新获取收藏状态并更新按钮状态
} catch (e) {
console.error('收藏失败:', e);
}
}
// 点击取消收藏按钮
async function cancelCollect() {
if (!isLogin()) { // 判断当前用户是否已登录
alert('请先登录!'); // 弹出提示
redirectToLogin(); // 跳转至登录页面
return;
}
try {
// 调用取消收藏接口
await detelecollKnowledge({ knowledgeId: detailContent.value.ID });
isCollected.value = false; // 更新状态
isCollected.value = await getCollectionStatus(); // 重新获取收藏状态并更新按钮状态
} catch (e) {
console.error('取消收藏失败:', e);
}
}
// 获取收藏状态
async function getCollectionStatus() {
// 调用获取收藏状态的接口,返回true表示已收藏,false表示未收藏
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<template> <el-row class="header"> <el-col :span="24"> 后台管理系统 注销 </el-col> </el-row> <el-row class="content"> <el-col :span="6" class="sidebar"> <el-menu :default-active="activeMenu" class="menu"> <el-menu-item index="1"> 首页 </el-menu-item> <el-menu-item index="/category"> 分类管理 <router-link to="/category"> <el-menu-item>分类管理</el-menu-item> </router-link> </el-menu-item> <el-menu-item index="3"> 系统设置 </el-menu-item> </el-menu> </el-col> <el-col :span="18" class="main"> <router-view ></router-view> </el-col> </el-row> <el-row class="footer"> <el-col :span="24"> 版权所有 © 2022 后台管理系统 </el-col> </el-row> </template>还是会跳到新页面
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)