update: 对接金币相关

src/pages/coin/components/ProductHeroSwiper.vue

@@ -1,18 +1,21 @@
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
-defineProps({
-  backgrounds: {
+const DEFAULT_PRODUCT_IMAGE = "/static/coin/product-hero-item.png";
+const props = defineProps({
+  images: {
     type: Array,
     default: () => [],
   },
-  productImage: {
-    type: String,
-    default: "",
-  },
 });
 
 const current = ref(0);
+const slideImages = computed(() => {
+  const images = props.images.filter(
+    (image) => typeof image === "string" && image.trim()
+  );
+  return images.length ? images : [DEFAULT_PRODUCT_IMAGE];
+});
 
 const onChange = (event) => {
   current.value = event.detail.current;
@@ -22,16 +25,20 @@ const onChange = (event) => {
 <template>
   <view class="hero-swiper">
     <swiper class="hero-swiper__body" :duration="260" @change="onChange">
-      <swiper-item v-for="(background, index) in backgrounds" :key="index">
+      <swiper-item v-for="(image, index) in slideImages" :key="index">
         <view class="hero-swiper__item">
-          <image class="hero-swiper__background" :src="background" mode="scaleToFill" />
-          <image class="hero-swiper__product" :src="productImage" mode="aspectFit" />
+          <image
+            class="hero-swiper__background"
+            src="/static/coin/product-hero-bg.png"
+            mode="scaleToFill"
+          />
+          <image class="hero-swiper__product" :src="image" mode="aspectFit" />
         </view>
       </swiper-item>
     </swiper>
     <view class="hero-swiper__dots">
       <view
-        v-for="(_, index) in backgrounds"
+        v-for="(_, index) in slideImages"
         :key="index"
         class="hero-swiper__dot"
         :class="{ 'hero-swiper__dot--active': current === index }"