play-with-pc/src/pages/talking/components/room-queue-gift/mixins/handle.ts

import {nextTick} from "vue";

export default {

    data(){
        return {
            queueTime:0
        }
    },

    methods:{

        // 播放礼物动画
        pushGift(item,uid:Array<string | number> | string | number,sendUid){

            if (item.pcplay_image || item.play_image){

                let type = item.gift_type.toString();

                if (type === '1') {

                    let resultUid:Array<string | number> = [];
                    if (!(uid instanceof Array)) {
                        resultUid = [uid]
                    } else {
                        resultUid = uid;
                    }

                    let queueData = [];

                    // 获取礼物布局信息
                    let giftOffsets = this.getInfoOffset('gift-active-'+item.gid);

                    if (giftOffsets) {
                        if (item.translate) {
                            giftOffsets.x = giftOffsets.x + item.translate;
                        }
                    } else if (!giftOffsets) {
                        giftOffsets = this.getInfoOffset('room-gift-container');
                    }

                    // 获取用户布局信息结果
                    resultUid.map((item)=>{
                        let result = this.getInfoOffset('user-'+item);

                        if (result) {
                            if (giftOffsets) {
                                queueData.push({
                                    offset:result,
                                    giftOffsets,
                                    ...giftOffsets
                                });
                            } else {
                                queueData.push({
                                    ...result,
                                });
                            }
                        }

                        return result;
                    });

                    if (queueData.length > 0) {
                        this.pushQueue({
                            type:type,
                            data:queueData,
                            item,
                            play:!giftOffsets,
                            draw:!giftOffsets
                        },sendUid);
                    } else {
                        this.pushQueue({
                            type:'2',
                            item
                        },sendUid);
                    }
                } else {
                    this.pushQueue({
                        type:type,
                        item
                    },sendUid);
                }
            }

        },

        triggerChangeQueue(useQueueItem){
            if (useQueueItem && useQueueItem.type === '1' && !useQueueItem.play) {

                setTimeout(()=>{
                    useQueueItem.data = useQueueItem.data.map((item)=>{
                        return {
                            ...item,
                            ...item.offset,
                        }
                    });
                    useQueueItem.draw = true;

                    setTimeout(()=>{
                        useQueueItem.play = true;
                    },1500);

                },10);
            }

        },

        // 获取用户位置信息
        getInfoOffset(id){

            if (id) {
                let el = document.getElementById(id);
                if (el) {
                    return {
                        x: this.getOffset(el,'offsetLeft'),
                        y: this.getOffset(el,'offsetTop'),
                        width: el.offsetWidth,
                        height: el.offsetHeight
                    }
                }
            }

            return null;

        },

        getOffset(el,offset='offsetLeft'){

            let offsetValue = el[offset] || 0;
            let target = el;
            while (target.offsetParent) {
                offsetValue += target.offsetParent[offset];
                target = target.offsetParent;
            }
            return offsetValue;
        }

    }

}