源文件

jeepay-ui-uapp-agent/components/JeepayAdStart/JeepayAdStart.vue

@@ -0,0 +1,237 @@
+<template>
+  <view class="start" v-if="show">
+    <view class="skip" :style="skipPositionStyle" @click="onSkip">跳过 {{ time2 }}</view>
+    <swiper class="swiper" :interval="interval" :autoplay="list.length > 1" @change="onChangeSwiper">
+      <swiper-item v-for="(item, index) in list" :key="index">
+        <view class="swiper-item" :style="bgStyle">
+          <image class="image" :src="item.imgUrl" mode="aspectFill" @tap="toAdH5(item)"></image>
+          <view class="after" :style="afterStyle"></view>
+        </view>
+      </swiper-item>
+      <!-- autoplay -->
+    </swiper>
+    <view class="swiper-dot" v-if="list.length > 1">
+      <view class="view" :style="index === current ? currentStyle : ''" :class="{ active: index === current }"
+        v-for="(item, index) in list" :key="index" />
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      },
+      required: true,
+    },
+    hasTabbar: {
+      type: Boolean,
+      default: false,
+    },
+    hasNavbar: {
+      type: Boolean,
+      default: false,
+    },
+    interval: {
+      type: Number,
+      default: 3000,
+    },
+    time: {
+      type: Number,
+      default: 3,
+    },
+    url: {
+      type: String,
+      default: '',
+    },
+    bgColor: {
+      type: String,
+      default: '#fff',
+    },
+    afterColor: {
+      type: String,
+      default: '',
+    },
+    currentColor: {
+      type: String,
+      default: '#BB1219',
+    },
+  },
+  data() {
+    return {
+      current: 0,
+      show: true,
+      timer: null,
+      time2: this.time,
+    }
+  },
+  watch: {
+    time2(val) {
+      if (val <= 0) {
+        this.onSkip()
+      }
+    },
+  },
+  computed: {
+    bgStyle() {
+      return this.obj2strStyle({
+        'background-color': this.bgColor,
+      })
+    },
+    afterStyle() {
+      return this.obj2strStyle({
+        'background-color': this.afterColor,
+      })
+    },
+    currentStyle() {
+      return this.obj2strStyle({
+        'background-color': this.currentColor,
+      })
+    },
+    skipPositionStyle() {
+      const { statusBarHeight } = uni.getSystemInfoSync()
+      if (!this.hasNavbar) {
+        return this.obj2strStyle({
+          top: `${statusBarHeight * 2 + 88 + 30}rpx`,
+        })
+      }
+      return this.obj2strStyle({
+        top: '30rpx',
+      })
+    },
+  },
+  created() {
+    this.$emit('openInt', this.onStart)
+  },
+  mounted() {
+    if (this.hasTabbar) {
+      uni.hideTabBar()
+    }
+  },
+  methods: {
+    onStart() {
+      this.timer = setInterval(() => {
+        this.time2--
+      }, 1000)
+    },
+    onPause() {
+      clearInterval(this.timer)
+    },
+    obj2strStyle(obj) {
+      let style = ''
+      for (let key in obj) {
+        style += `${key}:${obj[key]};`
+      }
+      return style
+    },
+    onSkip() {
+      const { url, hasTabbar, timer } = this
+      clearTimeout(timer)
+      this.show = false
+      if (hasTabbar) {
+        uni.showTabBar()
+      }
+      if (url) {
+        uni.reLaunch({
+          url: url,
+        })
+      }
+    },
+    onChangeSwiper(e) {
+      this.current = e.detail.current
+    },
+    toAdH5(ite) {
+      if (!ite.linkUrl) return
+      clearInterval(this.timer)
+      uni.navigateTo({
+        url: '/pages/adH5/adH5?url=' + ite.linkUrl,
+      })
+    },
+  },
+}
+</script>
+
+<style scoped>
+/* $nav-height: 44px; */
+.start {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+}
+
+.skip {
+  position: absolute;
+  z-index: 2;
+  background-color: rgba(0, 0, 0, 0.1);
+  color: #fff;
+  right: 30rpx;
+  font-size: 28rpx;
+  width: 133rpx;
+  height: 60rpx;
+  border-radius: 44rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.swiper {
+  height: 100vh;
+  width: 100vw;
+}
+
+.swiper-item {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  background-color: transparent;
+}
+
+.swiper-item .after {
+  width: 100vw;
+  height: 500rpx;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
+.swiper-item .image {
+  height: 100vh;
+  width: 100vw;
+  display: block;
+  position: relative;
+  z-index: 2;
+}
+
+.swiper-dot {
+  position: absolute;
+  width: 100vw;
+  left: 0;
+  bottom: 100rpx;
+  z-index: 3;
+  display: flex;
+  justify-content: center;
+}
+
+.swiper-dot .view {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 100%;
+  background-color: rgba(0, 0, 0, 0.2);
+  margin: 0 12rpx;
+}
+
+.swiper-dot .view.active {
+  width: 30rpx;
+  border-radius: 24rpx;
+}
+</style>