dz-app/pages/topic-center/paper-entry/components/ie-paper-collect.vue

<template>
    <mx-tag-button :text="collected?'已收藏':'收藏'" :icon="collected?'heart-fill':'heart'" @click="handleToggle"/>
</template>

<script setup>
import {computed} from 'vue'
import {createPropDefine} from "@/utils";
import {toast} from "@/uni_modules/uv-ui-tools/libs/function";
import {paperCancelCollect, paperCollect} from "@/api/webApi/webQue";

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

const id = computed(() => props.paper.paperId || props.paper.id)
const collected = computed(() => props.paper.collect)
let loading = false

const handleToggle = async () => {
    if (loading) return toast('请稍候')
    try {
        loading = true
        const op = collected.value ? paperCancelCollect : paperCollect
        await op(id.value)
        props.paper.collect = !collected.value
        emits('change', props.paper.collect)
    } finally {
        loading = false
    }
}
</script>

<style scoped>

</style>