zzzz
2024-03-20 d25a45190cee44b36296693d5022a0ce9ae9b698
src/components/ioe-swiper/index.vue
@@ -1,116 +1,152 @@
<template>
  <div class="ioe-swiper h-304 ">
    <van-swipe ref="swipe" :autoplay="3000" :show-indicators="false" lazy-render>
      <van-swipe-item v-for="(item,index) in bannerList" :key="index + language" class="w-full h-304">
        <img :src="item.image" alt="" title="" @click="toPath(item.url)" class="h-304 border bannerimg w-full" />
        <!-- <div class="w-full h-420 absolute top-1 flex flex-col text-white"
             :class="item.subTitle ? 'pl-60' : 'items-center'">
          <template v-if="$i18n.locale === 'CN' || $i18n.locale === 'zh-CN'">
            <p :class="item.subTitle ? 'font-60 mt-124 mb-16' : 'font-48  mt-140 mb-54'">{{item.title}}</p>
          </template>
          <template v-else>
            <p :class="item.subTitle ? 'font-45 mt-124 mb-16' : 'font-48  mt-140 mb-54'">{{item.title}}</p>
          </template>
          <p v-show="item.subTitle" class="font-25 mb-50">{{item.subTitle}}</p>
          <p class="font-35 btn w-222 h-65 btnMain flex justify-center items-center">{{item.btnText}}</p>
        </div> -->
  <div class="ioe-swiper h-304">
    <van-swipe
      ref="swipe"
      :autoplay="3000"
      :show-indicators="false"
      lazy-render
    >
      <van-swipe-item
        v-for="(item, index) in bannerList"
        :key="index + language"
        class="w-full h-304"
      >
        <img
          :src="item.image"
          alt=""
          title=""
          @click="toPath(item.url)"
          class="h-304 border bannerimg w-full"
        />
      </van-swipe-item>
    </van-swipe>
    <div class="guanggao">
      <slot />
    </div>
  </div>
</template>
<script>
import { Swipe, SwipeItem } from 'vant';
import { mapGetters } from 'vuex';
import { Swipe, SwipeItem } from "vant";
import { mapGetters } from "vuex";
import Axios from "@/API/userCenter.js";
export default {
    name: 'IndexSwiper',
    components: {
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem
  name: "IndexSwiper",
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
  props: {
    keyNum: {
      type: Number,
      default: 1,
    },
    props: {
      keyNum: {
        type: Number,
        default: 1
      },
      type: {
        type: String,
        default: 'home'
      }
    type: {
      type: String,
      default: "home",
    },
    data(){
      return{
        bannerList:[],
        timer:null
      }
  },
  data() {
    return {
      bannerList: [],
      timer: null,
    };
  },
  computed: {
    ...mapGetters("language", ["language"]),
    imgList() {
      return this.type === "home"
        ? [
            {
              id: 1,
              img: "swiper_item",
              title: this.$t("參與挖礦贏大獎"),
              subTitle: this.$t("加入我們,收益超乎你的想像!"),
              btnText: this.$t("立即加入"),
            },
            {
              id: 2,
              img: "swiper_item",
              title: this.$t("收益更簡單,免費領空投!"),
              subTitle: "",
              btnText: this.$t("立即加入"),
            },
            // { id: 3, img: 'swiper_item', title: this.$t('收益更簡單,免費領空投!'), subTitle: '', btnText: this.$t('立即加入') }
          ]
        : [{ id: 3, img: "swiper_item" }];
    },
    computed: {
      ...mapGetters('language', ['language']),
      imgList () {
        return this.type === 'home' ? [
          { id: 1, img: 'swiper_item', title: this.$t('參與挖礦贏大獎'), subTitle: this.$t('加入我們,收益超乎你的想像!'), btnText: this.$t('立即加入')},
          { id: 2, img: 'swiper_item', title: this.$t('收益更簡單,免費領空投!'), subTitle: '', btnText: this.$t('立即加入')},
          // { id: 3, img: 'swiper_item', title: this.$t('收益更簡單,免費領空投!'), subTitle: '', btnText: this.$t('立即加入') }
        ] : [
           { id: 3, img: 'swiper_item'},
        ]
      },
      language(){
        this.getBanner();
        return this.$i18n.locale;
      }
    },
    mounted(){
    language() {
      this.getBanner();
      return this.$i18n.locale;
    },
    activated() {
      this.getBanner()
      this.timer = setTimeout(() => {
        this.$refs.swipe.resize()
      }, 300);
    },
    deactivated(){
      clearTimeout(this.timer)
    },
    methods:{
      toPath(url) {
        if (url) {
          this.$router.push(url)
        }
      },
      getBanner(){
        let language
        if (this.$i18n.locale === 'en-US') {
          language = 'en'
        } else if (this.$i18n.locale.indexOf('CN') >= 0) {
          language = 'CN'
        } else {
          language = this.$i18n.locale
        }
        Axios.getBanner({
          model:'top',
          language
        }).then((res) => {
          this.bannerList = res.data
        }).catch((error) => {
          if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时!'));}
          else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}
        });
  },
  mounted() {
    this.getBanner();
  },
  activated() {
    this.getBanner();
    this.timer = setTimeout(() => {
      this.$refs.swipe.resize();
    }, 300);
  },
  deactivated() {
    clearTimeout(this.timer);
  },
  methods: {
    toPath(url) {
      if (url) {
        this.$router.push(url);
      }
    },
}
    getBanner() {
      let language;
      if (this.$i18n.locale === "en-US") {
        language = "en";
      } else if (this.$i18n.locale.indexOf("CN") >= 0) {
        language = "CN";
      } else {
        language = this.$i18n.locale;
      }
      Axios.getBanner({
        model: "top",
        language,
      })
        .then((res) => {
          this.bannerList = res.data;
        })
        .catch((error) => {
          if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时!"));
          } else if (error.msg !== undefined) {
            this.$toast(this.$t(error.msg));
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.ioe-swiper{
.ioe-swiper {
  position: relative;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.btn {
  border-radius: 55px;
}
.bannerimg{
.bannerimg {
  border-radius: 9px;
}
.guanggao {
  width: calc(100% - 30px);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9999;
  padding-left: 30px;
  color: aliceblue;
  background-color: rgba($color: #000000, $alpha: 0.3);
}
</style>