eta_chart_front/src/views/chartShow/components/collectBtnHT.vue

<script setup>
import {ref} from 'vue'
import {apiChartIsCollect} from '@/request/yb/api'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus';
import { ChartApi } from '@/request/api';

const route=useRoute()

let isCollect=ref(false)
async function getInitStatus(){
    const params={
        UniqueCode:route.query.code || '',
        MiniSource:'ht',
    }
    const { Data } = await ChartApi.chartDetail(params);
    isCollect.value=Data.IsCollect.value
}
getInitStatus()

// 收藏状态修改
async function handleCollectStatusChange(){
    localStorage.setItem('token', `Bearer ${route.query.token}`)
    const params={
        uniqueCode:route.query.code || '',
        source:'ht',
        // Token:route.query.token,
        action: isCollect.value ? 'unBookMark' : 'bookMark'
      }
      const res=await ChartApi.chartMiniBookMark(params)
      if(res.Ret===200){
        ElMessage.success(isCollect.value?'取消收藏成功':'收藏成功')
        isCollect.value=!isCollect.value
      }
}

</script>

<template>
    <div @click="handleCollectStatusChange">{{isCollect?'取消收藏':'收藏'}}</div>
</template>

<style>

</style>