pointsMall/src/views/HomeView/DrawCarouselGame/DrawCarouselGame.vue

<template>
    <div class="timeline-container">
        <div class="timeline-content">
            <div class="timeline-entry-list">
                <div class="gameBox">
                    <iframe id="iframe"  frameborder="0" :src="src" style="width: 100%;height: 100%;"></iframe>
                </div>
            </div>
            <SiderInfo></SiderInfo>
        </div>
    </div>
</template>
<script>
import SiderInfo from '@/components/SiderInfo.vue'
import { getToken } from '@/utils/auth'
export default{
  components: {
    SiderInfo
  },
  data() {
    return {
            src: this.$route.query.actId == 37 ? './dailyDrawCarousel.html' : this.$route.query.actId == 8 || this.$route.query.actId == 49 ? './monthlyDrawCarousel.html' : this.$route.query.actId == 47 ? './newYearDrawCarousel.html' : '', //需要加载的子页面url
            actId:this.$route.query.actId
        };
  },
  created(){},
  async mounted(){
	    var that = this
	    this.iframe = document.getElementById('iframe');
	    this.iframe.onload = function(){
	        // iframe加载完成后要进行的操作
	        that.postMsg()
	    };
        window.getUserInfo = this.getUserInfo;// 这里需要暴露给全局，这样的话，子页面才能调用相对应的方法
	},
	methods: {
        async postMsg() {
        	//将token传递给子页面
            let token = getToken();
            let actId = this.actId;
            let param = {
                token,
                actId
            }
          	this.iframe.contentWindow.postMessage(param,'*')
        },
        getUserInfo(){
            this.$store.dispatch('GetUserInfo');
        }
    }
}
</script>
<style scoped>
.timeline-container{
    margin: 0 auto;
}
.timeline-entry-list{
    margin-right: 17.5rem;
    border-radius: 2px;
    
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.timeline-entry-list .gameBox{
    width: 720px;
    height: 720px;
    background-color: #fff;
}
</style>