dz-app/pages/major-library/detail/components/major-item-collect.vue

<template>
    <view class="fx-col fx-cen-cen min-w-90" @click="handleToggle">
        <uv-icon size="19" :name="collected?'heart-fill':'heart'" color="var(--primary-color)"/>
        <text class="text-xs text-primary">{{ collected ? '已收藏' : '收藏' }}</text>
    </view>
</template>

<script setup>
import {ref, computed} from 'vue';
import {createPropDefine} from "@/utils";
import {toast} from "@/uni_modules/uv-ui-tools/libs/function";
import {
    addConcernMajor,
    removeConcernedMajor,
    concernedMajors
} from "@/api/webApi/career-other";
import {useCacheStore} from "@/hooks/useCacheStore";

const props = defineProps({
    code: createPropDefine(''),
    model: createPropDefine({}, Object)
})
const emits = defineEmits(['change'])

const {removeCache} = useCacheStore()
const collected = computed(() => props.model.isCollect)
let loading = false

const handleToggle = async () => {
    if (loading) return toast('请稍候')
    try {
        loading = true
        const op = collected.value ? removeConcernedMajor : addConcernMajor
        await op({code: props.code})
        props.model.isCollect = !collected.value
        emits('change', props.model.isCollect)

        // 需要清除收藏列表的缓存才能更新收藏状态
        removeCache(concernedMajors) // 不清楚目标，只能全清
    } finally {
        loading = false
    }
}
</script>

<style scoped>

</style>