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

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

const route=useRoute()


let isCollect=ref(false)
async function getInitStatus(){
    const res=await apiChartIsCollect({
        unique_code:route.query.code||'',
        authorization:route.query.token||''
    })
    if(res.code===200){
        isCollect.value=res.data
    }
}
getInitStatus()

// 收藏状态修改
function handleCollectStatusChange(){
    if(isCollect.value){
        handleCollectCancel()
    }else{
        handleCollect()
    }
}

// 收藏
async function handleCollect(){
    const res=await apiChartCollect({
        unique_code:route.query.code||'',
        authorization:route.query.token||'',
        report_id:Number(route.query.reportId)||0,
        report_chapter_id:Number(route.query.chapterId)||0
    })
    if(res.code===200){
        ElMessage.success('收藏成功');
        isCollect.value=true
    }else{
        ElMessage.warning(res.msg);
    }
}

//取消收藏
async function handleCollectCancel(){
    const res=await apiChartCollectCancel({
        unique_code:route.query.code||'',
        authorization:route.query.token||''
    })
    if(res.code===200){
        ElMessage.success('取消收藏成功');
        isCollect.value=false
    }else{
        ElMessage.warning(res.msg);
    }
}

</script>

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

<style>

</style>