shuimu-planet/src/components/banner.vue

<template>
  <div id="banner_container">
    <!--    <img src="https://img.shuimuai.com/mp/banners/banner1%402x.png" class="full_img main_banner" alt="">-->
    <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
          :src="item.src"
          mode="aspectFill"
          class="full_img main_banner"
        >
        <button
          class="cu-btn bg-yellow text-white join_button"
          @click="to_none(item.url)"
        >{{
          item.button_text
          }}
        </button>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
import {getBannerList} from "../requests/user";

var $this;
export default {
  name: "HomeBanner",
  data() {
    return {
      banners: [
        {
          id: 1,
          src: "https://img.shuimuai.com/mp/banner1_new.png",
          // src: "",
          url: "/pages/none/main",
          button_text: "关于水母星球",
        },
        {
          id: 2,
          src: "https://img.shuimuai.com/mp/banners/banner3%402x.png",
          url: "/pages/competition/main",
          button_text: "参加比赛",
        },
        {
          id: 3,
          src: "https://img.shuimuai.com/banner_blue.png",
          // src: "",
          url: "/pages/joint/main",
          button_text: "我要联名",
        },
      ],
    };
  },
  methods: {
    to_none($url) {
      mpvue.navigateTo({
        url: $url,
      });
    },
    getBanners() {
      getBannerList().then((res) => {
        if(res.data.code == 0){
          console.log("活动列表ID：", res);
          let $res = res.data;
          let $activities = $res.data;
          let $new_act = $activities.pop();
          console.log("轮播图", $new_act);

          $this.banners[1].src = $new_act["img"]
            ? "https://img.shuimuai.com/" + $new_act["img"]
            : "https://img.shuimuai.com/banner_activity_may_1.png";

          $this.banners[1].url =
            "/pages/competition/main?activity_id=" + $new_act["activity_id"];
        } else {
          $this.banners.splice(1, 1);
        }
      });
    },

  },
  mounted() {
    $this.getBanners();
    // $this.jointBanner()
  },
  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>