remove ads

před 2 roky · 9f70fa840e
--- a/src/components/SwiperView.vue
+++ b/src/components/SwiperView.vue
@@ -1,193 +0,0 @@
 <template>
    <div class="recommendPage">
        <swiper v-if="initOrNot" ref="videoSwiper" :options="swiperOption">
            <swiper-slide v-for="(item, index) in mediaNews" :key="index">
                <video
                    v-if="item.type === 1"
                    controls
                    muted="muted"
                    autoplay="autoplay"
                    class="multimedia"
                    style="width: 100%;object-fit: cover"
                    @ended="endVideo(index)"
                >
                    <source :src="item.url" type="video/mp4" />
                </video>

                <img v-else :src="item.url" class="multimedia" style="width: 100%;object-fit: cover" />
            </swiper-slide>
        </swiper>
    </div>
 </template>
 <script>
 import { swiper, swiperSlide } from "vue-awesome-swiper";
 import "swiper/dist/css/swiper.css";
 var timer;

 export default {
    name: "SwiperView",
    components: {
        swiper,
        swiperSlide
    },
    data() {
        const files = require.context("@/assets/ads", true).keys();
        let ads = [];

        console.log(ads);
        for (let url in files) {
            let temp = {};
            console.log("../assets/ads/" + files[url]);
            temp.url = require("../assets/ads/" + files[url].substr(2));
            temp.type = 0;
            if (files[url].endsWith("mp4")) {
                temp.type = 1;
            }
            ads.push(temp);
        }
        return {
            swiperOption: {
                speed: 1000,
                loop: false,
                observer: true,
                observeParents: true,
                autoplayDisableOnInteraction: false,
                allowTouchMove: false,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true
                },
                on: {
                    slideChangeTransitionEnd: () => {
                        this.slideChangeTransitionEndHandle();
                    },
                    slideChangeTransitionStart: () => {
                        this.slideChangeTransitionStartHandle();
                    },
                    //控制第一个slide切换
                    init: () => {
                        this.initHandle();
                    }
                }
            },
            initOrNot: false,
            mediaLastIndex: 0,
            mediaNews: ads
        };
    },
    computed: {
        swiper() {
            return this.$refs.videoSwiper.swiper;
        }
    },
    watch: {
        mediaNews: {
            handler(newName, oldName) {
                if (newName.length > 0) {
                    this.initOrNot = false;
                    this.$nextTick(() => {
                        this.initOrNot = true;
                    });
                }
            },
            immediate: true,
            deep: true
        }
    },
    mounted() {},
    methods: {
        initHandle() {
            let that = this;
            timer && window.clearTimeout(timer);
            timer = setTimeout(function() {
                let swiper = that.$refs.videoSwiper.swiper;
                that.mediaNewsImgHandle(swiper);
            }, 200);
        },
        mediaNewsImgHandle(swiper) {
            //刚切换到的activeIndex
            let changePointActiveIndex = swiper.activeIndex;
            if (swiper.activeIndex < this.mediaNews.length - 1) {
                timer && window.clearTimeout(timer);
                timer = setTimeout(function() {
                    //要确认changePointActiveIndex是不是还是目前的activeIndex，是的话计时后执行，不是的话不执行
                    if (changePointActiveIndex === swiper.activeIndex) {
                        swiper.slideNext();
                    }
                }, 5000);
            } else {
                timer && window.clearTimeout(timer);
                timer = setTimeout(function() {
                    if (changePointActiveIndex === swiper.activeIndex) {
                        swiper.slideTo(0, 0);
                    }
                }, 5000);
            }
        },
        slideChangeTransitionStartHandle() {
            let swiper = this.$refs.videoSwiper.swiper;
            if (this.mediaNews[this.mediaLastIndex].type === 1) {
                document.getElementsByClassName("multimedia")[this.mediaLastIndex].currentTime = 0;
            }
        },
        slideChangeTransitionEndHandle() {
            console.log("end..");
            let that = this;
            let swiper = that.$refs.videoSwiper.swiper;
            if (this.mediaNews[swiper.activeIndex].type === 0) {
                this.mediaNewsImgHandle(swiper);
            } else {
                if (this.mediaLastIndex.type === 1) {
                    document.getElementsByClassName("multimedia")[this.mediaLastIndex].pause();
                }
                document.getElementsByClassName("multimedia")[swiper.activeIndex].removeAttribute("muted");
                document.getElementsByClassName("multimedia")[swiper.activeIndex].play();

                // this.playVideo(this.mediaNews[swiper.activeIndex].url);
            }
            this.mediaLastIndex = swiper.activeIndex;
        },
        endVideo(index) {
            let swiper = this.$refs.videoSwiper.swiper;
            if (index === swiper.activeIndex) {
                if (swiper.activeIndex < this.mediaNews.length - 1) {
                    swiper.slideNext();
                    if (this.mediaNews[swiper.activeIndex].type === 1) {
                        document.getElementsByClassName("multimedia")[swiper.activeIndex].removeAttribute("muted");
                        document.getElementsByClassName("multimedia")[swiper.activeIndex].play();
                        // this.playVideo(this.mediaNews[swiper.activeIndex].url);
                    }
                } else {
                    swiper.slideTo(0, 0);
                    if (this.mediaNews[swiper.activeIndex].type === 1) {
                        document.getElementsByClassName("multimedia")[swiper.activeIndex].removeAttribute("muted");
                        document.getElementsByClassName("multimedia")[swiper.activeIndex].play();
                        // this.playVideo(this.mediaNews[swiper.activeIndex].url);
                    }
                }
            }
        }
    }
 };
 </script>
 <style>
 .recommendPage .swiper-container {
    position: relative;
    width: 100%;
    height: 1920px;
    background: transparent;
 }

 .recommendPage .swiper-container .swiper-slide {
    width: 100%;
    //line-height: 1920px;
    background: transparent;
    color: #000;
    font-size: 16px;
    text-align: center;
 }

 swiper-slide img {
    object-fit: contain;
 }
 </style>
--- a/src/views/ApiDemo.vue
+++ b/src/views/ApiDemo.vue
@@ -69,14 +69,13 @@
                    <VisitorRegister />
                </div>
                <div v-else-if="tabIndex == 6">
                    <SwiperView />
                    <!--                    <SwiperView />-->
                </div>
            </div>
        </div>
    </div>
 </template>
 <script>
 import SwiperView from "../components/SwiperView";
 import MeetingAppoint from "./MeetingAppoint";
 import MeetingReserve from "./MeetingReserve";
 import MeetingCancel from "./MeetingCancel";
@@ -96,7 +95,6 @@ let initTimer2 = "";
 export default {
    name: "ApiDemo",
    components: {
        SwiperView,
        VisitorRegister,
        VisitorAppoint,
        MeetingCancel,