feat: 用户登录注册， 工具收藏

src/components/Layout/DetailHeader/DetailHeader.vue

@@ -1,8 +1,55 @@
 <script setup lang="ts">
 // import { Star } from '@element-plus/icons-vue'
+import { onMounted, reactive } from 'vue';
+import { useRoute } from 'vue-router'
+import { useToolsStore } from '@/store/modules/tools'
+import { useUserStore } from '@/store/modules/user'
+import { ElMessage } from 'element-plus'
 const props = defineProps({
-  title: String
+  title: String,
+  id: Number
 })
+const route = useRoute()
+//查询参数
+const searchParam = reactive({
+  cateId: 0,
+  title: '',
+  route: ''
+})
+//store
+const toolsStore = useToolsStore()
+const userStore = useUserStore()
+
+//根据路由查询tool id
+const getToolInfo = async () => {
+  searchParam.route = route.path
+  await toolsStore.getToolInfo(searchParam)
+}
+
+//收藏
+const toolCollect = reactive({
+  toolId: 0
+})
+const collect = async (toolId) => {
+  try {
+    if (!userStore.isLogin()) {
+      //未登录,弹出登录窗口
+      ElMessage.error('请登录')
+      return 
+    }
+    toolCollect.toolId = toolId
+    await toolsStore.toolCollect(toolCollect)
+    // ElMessage.success('收藏成功')
+  } catch (error: any) {
+    ElMessage.error(error.message)
+  }
+  return
+}
+
+onMounted(() => {
+  getToolInfo()
+})
+
 </script>
 
 <template>
@@ -20,7 +67,7 @@ const props = defineProps({
       {{ props.title }}
     </div>
     <div>
-      <el-button type="primary" plain>收藏</el-button>
+      <el-button type="warning" :plain="!toolsStore.collectIds.includes(toolsStore.toolInfo.id)" @click="collect(toolsStore.toolInfo.id)">收藏</el-button>
       <!-- <el-button type="danger">取消收藏</el-button> -->
     </div>
   </div>