hongze_yb_xcx/components/collectBox/collectBox.vue

<template>
    <view class="collect-box" @click.stop.prevent="handleClick">
        <image class="icon" :src="cid>0?require('@/static/collect-s.png'):require('@/static/collect.png')" mode="aspectFill" />
    </view>
</template>

<script>
import {apiSetCollect,apiCancelCollect} from '@/api/user'
export default {
    props:{
        type:{//收藏类型：1-研报; 2-视频社区; 3-微路演视频
            type:Number,
            default:0
        },
        primaryId:{// 藏类型主ID(如报告id,视频id)
            default:0
        },
        extendId:{//扩展ID-如研报章节ID
            default:0
        },
        collectId:{//收藏的id 大于0说明收藏了
            default:0,
        }
    },
    data() {
        return {
            cid:this.collectId
        }
    },
    methods: {
        handleClick(){
            if(this.cid>0){
                apiCancelCollect({
                    collection_id:Number(this.cid)
                }).then(res=>{
                    if(res.code===200){
                        uni.showToast({
                            title:'取消收藏!',
                            icon:'none'
                        })
                        this.cid=0
                    }
                })
            }else{
                apiSetCollect({
                    collection_type:this.type,
                    primary_id:Number(this.primaryId),
                    extend_id:Number(this.extendId)
                }).then(res=>{
                    if(res.code===200){
                        uni.showToast({
                            title:'收藏成功!',
                            icon:'none'
                        })
                        this.cid=res.data
                    }
                })
            }
        }
    },

}
</script>

<style lang="scss" scoped>
.collect-box{
    .icon{
        width: 34rpx;
        height: 34rpx;
    }
}
</style>