kailin_mp/components/Banner/index.vue

<template>
  <ComponentsHeader v-bind="$props" />

  <view class="banner" :style="{ padding: `0 ${gap}px` }">
    <!-- 单图模式 -->
    <view v-if="mode === 'single'" class="single-image">
      <image :src="images[0]?.image || `http://iph.href.lu/400x200?text=1`" :style="{ borderRadius: `${radius}px` }" mode="aspectFill" @click="_handleClick(images[0].urlMap?.internal_url)" />
    </view>

    <!-- 轮播图模式 -->
    <swiper
      v-else-if="mode === 'swiper' || mode === 'swiper-no-dots'"
      :autoplay="true"
      :interval="swiperDuration"
      :circular="true"
      :indicator-dots="mode === 'swiper'"
      class="swiper"
      :style="{ borderRadius: `${radius}px` }"
    >
      <swiper-item v-for="(item, index) in images" :key="index">
        <image @click="_handleClick(item.urlMap?.internal_url)" :src="item.image || `http://iph.href.lu/400x200?text=${index}`" :style="{ borderRadius: `${radius}px` }" mode="aspectFill" />
      </swiper-item>
    </swiper>

    <!-- 网格模式 -->
    <view v-else-if="mode === 'grid'" class="grid-container" :style="{ borderRadius: `${radius}px` }">
      <view v-for="(item, index) in images.slice(0, 4)" :key="index" class="grid-item">
        <image @click="_handleClick(item.urlMap?.internal_url)" :src="item.image || `http://iph.href.lu/400x200?text=${index}`" mode="widthFix" :style="{ borderRadius: `${radius}px` }" />
      </view>
    </view>

    <!-- 双图模式 -->
    <view v-else-if="mode === 'double'" class="double-container" :style="{ borderRadius: `${radius}px` }">
      <view v-for="(item, index) in images.slice(0, 2)" :key="index" class="double-item">
        <image @click="_handleClick(item.urlMap?.internal_url)" :src="item.image || `http://iph.href.lu/400x200?text=${index}`" :style="{ borderRadius: `${radius}px` }" mode="aspectFill" />
      </view>
    </view>
  </view>
</template>

<script setup>
import ComponentsHeader from '../ComponentsHeader';
defineProps({
  images: {
    type: Array,
    default: () => [],
  },
  mode: {
    type: String,
    default: 'single',
    validator: (value) => ['single', 'swiper', 'swiper-no-dots', 'grid', 'double'].includes(value),
  },
  radius: {
    type: Number,
    default: 0,
  },
  swiperDuration: {
    type: Number,
    default: 3000,
  },
  gap: {
    type: Number,
    default: 0,
  },
  title: {
    type: String,
    default: '',
  },
  showTitle: {
    type: Boolean,
    default: false,
  },
});

const _handleClick = (url) => {
  if (url) {
    uni.navigateTo({
      url,
      fail: (err) => {
        uni.switchTab({
          url,
        });
      },
    });
  }
};
</script>

<style lang="less" scoped>
.navigator {
  width: 100%;
  height: 100%;
}
.banner {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;

  .single-image {
    width: 100%;
    height: 150px;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .swiper {
    width: 100%;
    height: 150px;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .grid-container {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    width: 100%;

    .grid-item {
      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .double-container {
    display: flex;
    gap: 4px;
    width: 100%;

    .double-item {
      flex: 1;
      height: 150px;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>