YXGJ/components/slideshow.vue

<template>
  <view>
    <view v-if="list.length">
      <swiper
        :style="{
          width: tovw(width),
          height: tovw(height),
          marginBottom: tovw(marginBottom),
        }"
        :autoplay="autoplay"
        :interval="interval"
        circular
      >
        <swiper-item
          class="swiper-item"
          v-for="(item, index) in list"
          :key="item.list"
        >
          <u--image
            @click="onClick(index)"
            :src="item.cover"
            :width="tovw(width)"
            :height="tovw(height)"
            mode="aspectFill"
            :lazy-load="true"
          >
            <template v-slot:loading>
              <u-loading-icon color="red"></u-loading-icon>
            </template>
          </u--image>
        </swiper-item>
      </swiper>
    </view>
    <view style="height: 10px" v-else-if="empty" />
  </view>
</template>

<script>
import { viewImage } from "../utils/settleFiles";

export default {
  name: "slideshow",
  props: {
    autoplay: {
      type: Boolean,
      default: true,
    },
    interval: {
      type: [Number, String],
      default: 5000,
    },
    empty: {
      type: Boolean,
      default: false,
    },
    marginBottom:{
      type: [Number, String],
      default: 0,
    }
  },
  data() {
    return {
      width: 375,
      height: 500,
      list: [],
    };
  },
  methods: {
    getBanners(locations, systemclient = "marketingtool") {
      return new Promise((resolve, reject) => {
        this.$Http
          .basic({
            id: "20240426154302",
            content: {
              systemclient,
              locations,
              date: Date.now(),
            },
          })
          .then((res) => {
            console.log("获取广告位" + locations, res);
            resolve(res.msg);
            if (this.cutoff(res.msg)) return;
            try {
              let list = res.data[locations[0]];
              if (list.length) {
                if (list[0].dimensional) {
                  let dimensional = list[0].dimensional.split("*");
                  this.width = dimensional[0] - 0;
                  this.height = dimensional[1] - 0;
                }
                this.list = list.map((v) => {
                  v.cover = this.getSpecifiedImage(v.attinfos[0], "compressed");
                  return v;
                });
              }
            } catch (error) {}
          });
      });
    },
    onClick(index) {
      let item = this.list[index];
      console.log("点击广告图", index, item);
      if (item.hyperlink) {
        uni.navigateTo({
          url: item.hyperlink,
          fail: (fail) => {
            console.log("跳转失败原因", fail);
            viewImage(item.attinfos[0].url);
          },
        });
      } else {
        viewImage(item.attinfos[0].url);
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>