营销：适配商城装修组件【轮播图】

sheep/components/s-block-item/s-block-item.vue

@@ -1,7 +1,7 @@
 <template>
   <view>
     <s-image-block v-if="type === 'ImageBar'" :data="data" :styles="styles" />
-    <s-image-banner v-if="type === 'imageBanner'" :data="data" :styles="styles" />
+    <s-image-banner v-if="type === 'Carousel'" :data="data" :styles="styles" />
     <s-video-block v-if="type === 'VideoPlayer'" :data="data" :styles="styles" />
     <s-image-cube v-if="type === 'imageCube'" :data="data" :styles="styles" />
 

sheep/components/s-image-banner/s-image-banner.vue

@@ -1,12 +1,13 @@
 <template>
   <su-swiper
     :list="imgList"
-    :dotStyle="dotMap[data.indicator]"
+    :dotStyle="data.indicator === 'dot' ? 'long' : 'tag'"
-    imageMode="widthFix"
+    imageMode="scaleToFill"
     dotCur="bg-mask-40"
     :seizeHeight="300"
     :autoplay="data.autoplay"
-    :interval="Number(data.interval)"
+    :interval="data.interval * 1000"
+    :mode="data.type"
   />
 </template>
 
@@ -14,10 +15,7 @@
   import { computed } from 'vue';
   import sheep from '@/sheep';
 
-  const dotMap = {
+  // 轮播图
-    1: 'long',
-    2: 'tag',
-  };
   const props = defineProps({
     data: {
       type: Object,
@@ -30,11 +28,15 @@
   });
 
   const imgList = computed(() =>
-    props.data.list.map((item) => ({
+      props.data.items.map((item) => {
-      ...item,
+        const src = item.type === 'img' ? item.imgUrl : item.videoUrl;
-      src: sheep.$url.cdn(item.src),
+        return {
-      poster: sheep.$url.cdn(item.poster),
+          ...item,
-    })),
+          type: item.type === 'img' ? 'image' : 'video',
+          src: sheep.$url.cdn(src),
+          poster: sheep.$url.cdn(item.imgUrl),
+        };
+      }),
   );
 </script>