123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- <template>
-
- <view class="content">
- <swiper class="swiper" :class="advData.value.length==1?'on':''" :autoplay="autoplay" :duration="duration" @change="stopChange"
- v-if="advData.type == 'pic' && advData.value.length">
- <swiper-item v-for="(item,index) in advData.value" :key="index" @click="jump(item.link)">
- <view class="swiper-item">
- <view class="swiper-item-img">
- <image :src="item.img" mode="aspectFill"></image>
- </view>
- </view>
- </swiper-item>
- </swiper>
- <view class="video-box" v-else-if="advData.type == 'video' && advData.video_link">
- <video class="vid" :src="advData.video_link" :autoplay="true" :loop="true" :muted="true"
- :controls="false"></video>
- </view>
- <view class="jump-over" :style="{ top: navH + 'rpx' }" @tap="launchFlag()">跳过<text v-if="closeType == 1">{{time}}</text><slot name="bottom"></slot></view>
- </view>
- </template>
- <script>
- let app = getApp();
- export default {
- data() {
- return {
- autoplay: false,
- duration: 500,
- jumpover: '跳过',
- experience: '立即体验',
- time: this.advData.time,
- timecount: undefined,
- navH: 0
- }
- },
- props: {
- advData: {
- type: Object,
- default: () => {}
- },
-
- closeType: {
- type: Number,
- default: 1
- }
- },
- mounted() {
- this.timer()
-
- this.navH = app.globalData.navHeight;
-
-
- this.navH = 80;
-
- },
- methods: {
- stopChange(){
- if(this.advData.value.length == 1){
- return false
- }
- },
- timer() {
- var t = this.advData.time || 5
- this.timecount = setInterval(() => {
- t--
- this.time = t
- if (t <= 0) {
- clearInterval(this.timecount)
- this.launchFlag()
- }
- }, 1000)
- },
- launchFlag() {
- clearInterval(this.timecount)
- uni.switchTab({
- url: '/pages/index/index'
- });
- },
- jump(url) {
- if(url){
- clearInterval(this.timecount)
- this.$util.JumpPath(url);
- }
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- page,
- .content {
- width: 100%;
- height: 100%;
- background-size: 100% auto;
- padding: 0;
- }
- .swiper {
- width: 100%;
- height: 100vh;
- background: #FFFFFF;
- &.on{
- position: relative;
- &:after {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 2;
- }
- }
- }
- .swiper-item {
- width: 100%;
- height: 100%;
- text-align: center;
- position: relative;
- display: flex;
- /* justify-content: center; */
- align-items: flex-end;
- flex-direction: column-reverse
- }
- .swiper-item-img {
- width: 100vw;
- height: 100vh;
- margin: 0 auto;
- }
- .swiper-item-img image {
- width: 100%;
- height: 100%;
- }
- .jump-over {
- position: absolute;
- height: 45rpx;
- line-height: 45rpx;
- padding: 0 15rpx;
- border-radius: 30rpx;
- font-size: 24rpx;
- color: #b09e9a;
- border: 1px solid #b09e9a;
- z-index: 999;
- right: 30rpx;
- }
- .video-box {
- width: 100vw;
- height: 100vh;
- .vid {
- width: 100%;
- height: 100%;
- }
- }
- </style>
|