shuimu-planet/src/components/index/banner.vue

<template>
  <div id="banner_container">
    <swiper class="screen-swiper round-dot full_img main_banner"
            :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">
      <swiper-item v-for="(item,index) in banners" :key="index" class="full_img main_banner">
        <img v-if="item" :src="item.src" mode="aspectFill" class="full_img main_banner" alt="">
        <button class="cu-btn bg-yellow text-white join_button" @click="pageTo(item.url)">{{item.button_text}}</button>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
import {getBannerList} from "../../requests/user";
let $this;
export default {
  name: "HomeBanner",
  data() {
    return {
      banners: [
        {
          id: 1,
          src: "https://img.shuimuai.com/mp/banner1_new.png",
          url: "/pages/none/main",
          button_text: "关于水母星球",
        },
        {
          id: 2,
          src: "https://img.shuimuai.com/FrbDe9MOSK7t4hxYkbXUNbek6fG8",
          url: "/pages/competition/main",
          button_text: "参加比赛",
        },
        {
          id: 3,
          src: "https://img.shuimuai.com/banner_blue.png",
          url: "/pages/joint/main",
          button_text: "我要联名",
        },
      ],
    };
  },
  methods: {
    pageTo($url) {
      mpvue.navigateTo({
        url: $url,
      });
    },
    getBanners() {
      getBannerList().then((res) => {
        if(res.data.code === 0){
          let $res = res.data.data.pop();
          console.log("轮播图活动banner", $res);
          $this.banners[1].src = "https://img.shuimuai.com/" + ($res["img"] || "FrbDe9MOSK7t4hxYkbXUNbek6fG8");
          $this.banners[1].url = "/pages/competition/main?activity_id=" + $res["activity_id"];
        } else {
          $this.banners.splice(1, 1);
        }
      });
    },
  },
  mounted() {
    $this.getBanners();
  },
  created() {
    $this = this;
  },
};
</script>

<style>
#banner_container {
  position: relative;
  width: 100%;
  z-index: 1;
}

.join_button {
  position: absolute;
  right: 33px;
  top: 110px;
  z-index: 2;
}
</style>