翻译

lxf

2025-07-16 fcb00a66b4053550b473a29d7299c7a4737eea75

 src/components/ioe-swiper/index.vue

@@ -1,8 +1,23 @@
<template>
  <div class="ioe-swiper h-240 " >
    <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-240">
        <img :src="item.image" alt="" title="" @click="toPath(item.url)" class="h-240 border bannerimg w-full" />
  <div class="ioe-swiper h-380">
    <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-380"
      >
        <img
          :src="item.image"
          alt=""
          title=""
          @click="toPath(item.url)"
          class="h-380 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'">
@@ -14,104 +29,120 @@
          <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> -->
      <img  src=""/>
        <img src="" />
      </van-swipe-item>
    </van-swipe>
  </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);
  },
  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)
      // }
    },
    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));}    
        });
    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 {
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.btn {
  border-radius: 55px;
}
.bannerimg{
.bannerimg {
  border-radius: 9px;
}
</style>