营销:适配商城装修组件【轮播图】
parent
f0d54f4fec
commit
ee06d33962
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<s-image-block v-if="type === 'ImageBar'" :data="data" :styles="styles" />
|
<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-video-block v-if="type === 'VideoPlayer'" :data="data" :styles="styles" />
|
||||||
<s-image-cube v-if="type === 'imageCube'" :data="data" :styles="styles" />
|
<s-image-cube v-if="type === 'imageCube'" :data="data" :styles="styles" />
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<su-swiper
|
<su-swiper
|
||||||
:list="imgList"
|
:list="imgList"
|
||||||
:dotStyle="dotMap[data.indicator]"
|
:dotStyle="data.indicator === 'dot' ? 'long' : 'tag'"
|
||||||
imageMode="widthFix"
|
imageMode="scaleToFill"
|
||||||
dotCur="bg-mask-40"
|
dotCur="bg-mask-40"
|
||||||
:seizeHeight="300"
|
:seizeHeight="300"
|
||||||
:autoplay="data.autoplay"
|
:autoplay="data.autoplay"
|
||||||
:interval="Number(data.interval)"
|
:interval="data.interval * 1000"
|
||||||
|
:mode="data.type"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -14,10 +15,7 @@
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import sheep from '@/sheep';
|
import sheep from '@/sheep';
|
||||||
|
|
||||||
const dotMap = {
|
// 轮播图
|
||||||
1: 'long',
|
|
||||||
2: 'tag',
|
|
||||||
};
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
@ -30,11 +28,15 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
const imgList = computed(() =>
|
const imgList = computed(() =>
|
||||||
props.data.list.map((item) => ({
|
props.data.items.map((item) => {
|
||||||
|
const src = item.type === 'img' ? item.imgUrl : item.videoUrl;
|
||||||
|
return {
|
||||||
...item,
|
...item,
|
||||||
src: sheep.$url.cdn(item.src),
|
type: item.type === 'img' ? 'image' : 'video',
|
||||||
poster: sheep.$url.cdn(item.poster),
|
src: sheep.$url.cdn(src),
|
||||||
})),
|
poster: sheep.$url.cdn(item.imgUrl),
|
||||||
|
};
|
||||||
|
}),
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue