football/components/page-component/app-popup-ad/app-popup-ad.vue

<template>
    <view class="app-popup-ad">
        <block v-for="(item, index) in newList" :key="index">
            <template v-if="item && item.length > 0">
                <view class="modal dir-left-nowrap main-center cross-center"
                      :class="popupActive === index ? 'show' : ''">
                    <view class="body dir-top-nowrap cross-center">
                        <swiper circular autoplay indicator-dots class="app-popup-ad-wh" v-if="item.length > 1">
                            <swiper-item v-for="(modal, key) in item" :key="key" class="main-center">
                                <app-jump-button :url="modal.link.url" :open_type="modal.link.openType"
                                                 @click="closePopupModal">
                                    <image :src="modal.picUrl" mode="aspectFit" class="app-popup-ad-wh"></image>
                                </app-jump-button>
                            </swiper-item>
                        </swiper>
                        <template v-else>
                            <block v-for="(modal, key) in item" :key="key">
                                <app-jump-button :url="modal.link.url" :open_type="modal.link.openType"
                                                 @click="closePopupModal">
                                    <image :src="modal.picUrl" mode="aspectFit" class="app-popup-ad-wh"></image>
                                </app-jump-button>
                            </block>
                        </template>
                        <image src="../../../static/image/icon/icon-popup-close.png" class="close"
                               @click="closePopupModal"></image>
                    </view>
                </view>
            </template>
        </block>
    </view>
</template>

<script>
    import appJumpButton from "../../basic-component/app-jump-button/app-jump-button.vue";

    export default {
        name: "app-model-ad",
        components: {
            'app-jump-button': appJumpButton,
        },
        props: {
            opened: {
                type: Boolean,
                default() {
                    return true;
                }
            },
            times: {
                type: Number,
                default() {
                    return 1;
                }
            },
            list: {
                type: Array,
                default() {
                    return [];
                }
            },
            multiple: {
                type: Boolean,
                default() {
                    return false;
                }
            },
            mark: {
                type: String,
                default() {
                    return 'fxhb';
                }
            },
            is_storage: Boolean,
        },
        data() {
            return {
                newList: [],
                popupActive: -1,
            };
        },
        computed: {
            listenChange() {
                return {
                    multiple: this.multiple,
                    list: this.list,
                    is_storage: this.is_storage,
                    times: this.times,
                };
            }
        },
        watch: {
            listenChange: {
                handler(v) {
                    this.init()
                },
                immediate: true
            }
        },
        methods: {
            init() {
                if (!this.multiple) {
                    this.newList = [this.list];
                } else {
                    this.newList = this.list;
                }
                if (!this.opened) {
                    return;
                }
                if (typeof this.$popupAd.list[this.mark] === 'undefined') {
                    this.$popupAd.list[this.mark] = true;
                    this.$event.on(this.$const.EVENT_POPUP, false).then(mark => {
                        if (mark === this.mark) {
                            this.showPopupModal();
                        }
                    });
                }
                this.showPopupModal();
            },
            showPopupModal() {
                if (this.$popupAd.show) {
                    return;
                }
                let first = 'popUpFirst' + this.mark;
                this.$popupAd.show = this.mark;
                let active = -1;
                if (this.times === 0) {
                    active = 0;
                } else {
                    if (this.$popupAd.first[first]) {
                        active = -1;
                    } else {
                        active = 0;
                    }
                }
                if (!this.is_storage) {
                    this.$popupAd.first[first] = true;
                }
                this.popupActive = active;
                this.nextModal();
            },
            nextModal() {
                if (this.list.length <= this.popupActive || this.popupActive === -1) {
                    let list = this.$popupAd.list;
                    let next = false;
                    for (let i in list) {
                        if (next) {
                            next = false;
                            this.$event.trigger(this.$const.EVENT_POPUP, i);
                            break;
                        }
                        if (i === this.mark) {
                            next = true;
                        }
                    }
                    if (!next) {
                        this.$popupAd.show = null;
                    }
                }
            },
            closePopupModal() {
                let popupActive = this.popupActive;
                popupActive += 1;
                this.popupActive = popupActive;
                this.$popupAd.show = null;
                this.nextModal();
            }
        }
    }
</script>

<style scoped lang="scss">
    .modal {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1500;
        background-color: rgba(0, 0, 0, 0.4);
        transform: translateY(100%);
        opacity: 0;

        &.show {
            transform: translateY(0%);
            opacity: 1;
        }

        .body {
            .app-popup-ad-wh {
                width: #{650rpx};
                height: #{700rpx};
            }

            .close {
                width: #{30rpx};
                height: #{30rpx};
                display: block;
                margin-top: #{50rpx};
            }
        }
    }
</style>