Skip to content

phsl / admin

Go to a project
Commit 4253173a by owen
Options

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

parent 6e9e1d08
Showing with 142 additions and 145 deletions
src/components/DiyEditor/components/mobile/Carousel/config.ts
import { DiyComponent } from '@/components/DiyEditor/util' import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
/** 轮播图属性 */ /** 轮播图属性 */
export interface CarouselProperty { export interface CarouselProperty {
// 选择模板 // 类型：默认 | 卡片
swiperType: number type: 'default' | 'card'
// 图片圆角 // 指示器样式：点 | 数字
borderRadius: number indicator: 'dot' | 'number'
// 页面边距 // 是否自动播放
pageMargin: number autoplay: boolean
// 图片边距 // 播放间隔
imageMargin: number interval: number
// 分页类型 // 轮播内容
pagingType: 'bullets' | 'fraction' | 'progressbar'
// 一行个数
rowIndividual: number
// 添加图片
items: CarouselItemProperty[] items: CarouselItemProperty[]
// 组件样式
style: ComponentStyle
} }
// 轮播内容属性
export interface CarouselItemProperty { export interface CarouselItemProperty {
title: string // 类型：图片 | 视频
type: 'img' | 'video'
// 图片链接
imgUrl: string imgUrl: string
link: string // 视频链接
videoUrl: string
// 跳转链接
url: string
} }
// 定义组件 // 定义组件
...@@ -30,15 +33,18 @@ export const component = { ...@@ -30,15 +33,18 @@ export const component = {
name: '轮播图', name: '轮播图',
icon: 'system-uicons:carousel', icon: 'system-uicons:carousel',
property: { property: {
swiperType: 0, // 选择模板 type: 'default',
borderRadius: 0, // 图片圆角 indicator: 'dot',
pageMargin: 0, // 页面边距 autoplay: false,
imageMargin: 0, // 图片边距 interval: 3,
pagingType: 'bullets', // 分页类型
rowIndividual: 2, // 一行个数
items: [ items: [
{ imgUrl: 'https://static.iocoder.cn/mall/banner-01.jpg' }, { type: 'img', imgUrl: 'https://static.iocoder.cn/mall/banner-01.jpg', videoUrl: '' },
{ imgUrl: 'https://static.iocoder.cn/mall/banner-02.jpg' } { type: 'img', imgUrl: 'https://static.iocoder.cn/mall/banner-02.jpg', videoUrl: '' }
] as CarouselItemProperty[] ] as CarouselItemProperty[],
style: {
bgType: 'color',
bgColor: '#fff',
marginBottom: 8
} as ComponentStyle
} }
} as DiyComponent<CarouselProperty> } as DiyComponent<CarouselProperty>
src/components/DiyEditor/components/mobile/Carousel/index.vue
...@@ -6,70 +6,38 @@ ...@@ -6,70 +6,38 @@
> >
<Icon icon="tdesign:image" class="text-gray-8 text-120px!" /> <Icon icon="tdesign:image" class="text-gray-8 text-120px!" />
</div> </div>
<!-- 一行一个 --> <div v-else class="relative">
<div <el-carousel
v-if="property.swiperType === 0" height="174px"
class="flex flex-col" :type="property.type === 'card' ? 'card' : ''"
:style="{ :autoplay="property.autoplay"
paddingLeft: property.pageMargin + 'px', :interval="property.interval * 1000"
paddingRight: property.pageMargin + 'px' :indicator-position="property.indicator === 'number' ? 'none' : undefined"
}" @change="handleIndexChange"
>
<div v-for="(item, index) in property.items" :key="index">
<div
class="img-item"
:style="{
marginBottom: property.imageMargin + 'px',
borderRadius: property.borderRadius + 'px'
}"
> >
<img alt="" :src="item.imgUrl" />
<div v-if="item.title" class="title">{{ item.title }}</div>
</div>
</div>
</div>
<el-carousel height="174px" v-else :type="property.swiperType === 3 ? 'card' : ''">
<el-carousel-item v-for="(item, index) in property.items" :key="index"> <el-carousel-item v-for="(item, index) in property.items" :key="index">
<div class="img-item" :style="{ borderRadius: property.borderRadius + 'px' }"> <el-image class="h-full w-full" :src="item.imgUrl" />
<img alt="" :src="item.imgUrl" />
<div v-if="item.title" class="title">{{ item.title }}</div>
</div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<div
v-if="property.indicator === 'number'"
class="absolute p-y-2px bottom-10px right-10px rounded-xl bg-black p-x-8px text-10px text-white opacity-40"
>{{ currentIndex }} / {{ property.items.length }}</div
>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { CarouselProperty } from './config' import { CarouselProperty } from './config'
/** 页面顶部导航栏 */ /** 轮播图 */
defineOptions({ name: 'NavigationBar' }) defineOptions({ name: 'Carousel' })
const props = defineProps<{ property: CarouselProperty }>() defineProps<{ property: CarouselProperty }>()
</script>
<style scoped lang="scss"> const currentIndex = ref(0)
.img-item { const handleIndexChange = (index: number) => {
width: 100%; currentIndex.value = index + 1
position: relative;
overflow: hidden;
&:last-child {
margin: 0 !important;
}
/* 图片 */
img {
width: 100%;
height: 100%;
display: block;
}
.title {
height: 36px;
width: 100%;
background-color: rgba(51, 51, 51, 0.8);
text-align: center;
line-height: 36px;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
}
} }
</style> </script>
<style scoped lang="scss"></style>
src/components/DiyEditor/components/mobile/Carousel/property.vue
<template> <template>
<ComponentContainerProperty v-model="formData.style">
<el-form label-width="80px" :model="formData"> <el-form label-width="80px" :model="formData">
<el-form-item label="选择模板" prop="swiperType"> <el-card header="样式设置" class="property-group" shadow="never">
<el-radio-group v-model="formData.swiperType"> <el-form-item label="样式" prop="type">
<el-tooltip class="item" content="一行一个" placement="bottom"> <el-radio-group v-model="formData.type">
<el-radio-button :label="0"> <el-tooltip class="item" content="默认" placement="bottom">
<Icon icon="icon-park-twotone:multi-picture-carousel" /> <el-radio-button label="default">
</el-radio-button>
</el-tooltip>
<el-tooltip class="item" content="轮播海报" placement="bottom">
<el-radio-button :label="1">
<Icon icon="system-uicons:carousel" /> <Icon icon="system-uicons:carousel" />
</el-radio-button> </el-radio-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" content="多图单行" placement="bottom"> <el-tooltip class="item" content="卡片" placement="bottom">
<el-radio-button :label="2"> <el-radio-button label="card">
<Icon icon="icon-park-twotone:carousel" />
</el-radio-button>
</el-tooltip>
<el-tooltip class="item" content="立体轮播" placement="bottom">
<el-radio-button :label="3">
<Icon icon="ic:round-view-carousel" /> <Icon icon="ic:round-view-carousel" />
</el-radio-button> </el-radio-button>
</el-tooltip> </el-tooltip>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="指示器" prop="indicator">
<el-text tag="p">添加图片</el-text> <el-radio-group v-model="formData.indicator">
<el-radio label="dot">小圆点</el-radio>
<el-radio label="number">数字</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否轮播" prop="autoplay">
<el-switch v-model="formData.autoplay" />
</el-form-item>
<el-form-item label="播放间隔" prop="interval" v-if="formData.autoplay">
<el-slider
v-model="formData.interval"
:max="10"
:min="0.5"
:step="0.5"
show-input
input-size="small"
:show-input-controls="false"
/>
<el-text type="info">单位：秒</el-text>
</el-form-item>
</el-card>
<el-card header="内容设置" class="property-group" shadow="never">
<el-text type="info" size="small"> 拖动左上角的小圆点可对其排序 </el-text> <el-text type="info" size="small"> 拖动左上角的小圆点可对其排序 </el-text>
<template v-if="formData.items[0]">
<!-- 图片广告 -->
<div v-if="formData.items[0]">
<draggable <draggable
:list="formData.items" :list="formData.items"
:force-fallback="true" :force-fallback="true"
:animation="200" :animation="200"
handle=".drag-icon" handle=".drag-icon"
class="m-t-8px" class="m-t-8px"
item-key="index"
> >
<template #item="{ element, index }"> <template #item="{ element, index }">
<div class="mb-4px flex flex-row gap-4px rounded bg-gray-100 p-8px"> <div class="content mb-4px flex flex-col gap-4px rounded bg-gray-50 p-8px">
<div class="flex flex-col items-start justify-between"> <div
class="m--8px m-b-8px flex flex-row items-center justify-between bg-gray-100 p-8px"
>
<Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" /> <Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
<Icon <Icon
icon="ep:delete" icon="ep:delete"
...@@ -48,7 +62,18 @@ ...@@ -48,7 +62,18 @@
v-if="formData.items.length > 1" v-if="formData.items.length > 1"
/> />
</div> </div>
<div class="flex flex-1 flex-col items-center justify-between gap-8px"> <el-form-item label="类型" prop="type" class="m-b-8px!" label-width="50px">
<el-radio-group v-model="element.type">
<el-radio label="img">图片</el-radio>
<el-radio label="video">视频</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label="图片"
class="m-b-8px!"
label-width="50px"
v-if="element.type === 'img'"
>
<UploadImg <UploadImg
v-model="element.imgUrl" v-model="element.imgUrl"
draggable="false" draggable="false"
...@@ -56,48 +81,40 @@ ...@@ -56,48 +81,40 @@
width="100%" width="100%"
class="min-w-80px" class="min-w-80px"
/> />
<!-- 标题 -->
<el-input v-model="element.title" placeholder="标题，选填" />
<!-- 输入链接 -->
<el-input placeholder="链接，选填" v-model="element.link" />
</div>
</div>
</template>
</draggable>
</div>
<el-button @click="handleAddImage" type="primary" plain class="w-full"> 添加图片 </el-button>
<el-form-item label="一行个数" prop="rowIndividual" v-show="formData.swiperType === 2">
<!-- 单选框 -->
<el-radio-group v-model="formData.rowIndividual">
<el-radio :label="2">2个</el-radio>
<el-radio :label="3">3个</el-radio>
<el-radio :label="4">4个</el-radio>
<el-radio :label="5">5个</el-radio>
<el-radio :label="6">6个</el-radio>
</el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="分页类型" prop="pagingType"> <template v-else>
<el-radio-group v-model="formData.pagingType"> <el-form-item label="封面" class="m-b-8px!" label-width="50px">
<el-radio :label="0">不显示</el-radio> <UploadImg
<el-radio label="bullets">样式一</el-radio> v-model="element.imgUrl"
<el-radio label="fraction">样式二</el-radio> draggable="false"
<el-radio label="progressbar">样式三</el-radio> height="80px"
</el-radio-group> width="100%"
</el-form-item> class="min-w-80px"
<el-form-item label="图片圆角" prop="borderRadius"> />
<el-slider v-model="formData.borderRadius" :max="30" />
</el-form-item> </el-form-item>
<el-form-item label="页面边距" prop="pageMargin" v-show="formData.swiperType === 0"> <el-form-item label="视频" class="m-b-8px!" label-width="50px">
<el-slider v-model="formData.pageMargin" :max="20" /> <UploadFile
v-model="element.videoUrl"
:file-type="['mp4']"
:limit="1"
:file-size="100"
class="min-w-80px"
/>
</el-form-item> </el-form-item>
<el-form-item </template>
label="图片边距" <el-form-item label="链接" class="m-b-8px!" label-width="50px">
prop="imageMargin" <el-input placeholder="链接" v-model="element.url" />
v-show="formData.swiperType === 0 || formData.swiperType === 2"
>
<el-slider v-model="formData.imageMargin" :max="20" />
</el-form-item> </el-form-item>
</div>
</template>
</draggable>
</template>
<el-button @click="handleAddImage" type="primary" plain class="w-full">
添加图片
</el-button>
</el-card>
</el-form> </el-form>
</ComponentContainerProperty>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
...@@ -117,7 +134,7 @@ const handleAddImage = () => { ...@@ -117,7 +134,7 @@ const handleAddImage = () => {
formData.value.items.push({} as CarouselItemProperty) formData.value.items.push({} as CarouselItemProperty)
} }
// 删除图片 // 删除图片
const handleDeleteImage = (index) => { const handleDeleteImage = (index: number) => {
formData.value.items.splice(index, 1) formData.value.items.splice(index, 1)
} }
</script> </script>
......
src/components/DiyEditor/index.vue
...@@ -385,12 +385,18 @@ $toolbar-height: 42px; ...@@ -385,12 +385,18 @@ $toolbar-height: 42px;
/* 属性面板分组 */ /* 属性面板分组 */
:deep(.property-group) { :deep(.property-group) {
margin: 0 -20px; margin: 0 -20px;
&.el-card {
border: none;
}
/* 属性分组名称 */ /* 属性分组名称 */
.el-card__header { .el-card__header {
border: none; border: none;
background: var(--el-bg-color-page); background: var(--el-bg-color-page);
padding: 8px 32px; padding: 8px 32px;
} }
.el-card__body {
border: none;
}
} }
} }
......
src/components/UploadFile/src/UploadFile.vue
...@@ -138,7 +138,7 @@ watch( ...@@ -138,7 +138,7 @@ watch(
// 情况1.1：逗号分隔的多值 // 情况1.1：逗号分隔的多值
if (props.modelValue.includes(',')) { if (props.modelValue.includes(',')) {
files.concat(props.modelValue.split(',')) files.concat(props.modelValue.split(','))
} else { } else if (props.modelValue.length > 0) {
files.push(props.modelValue) files.push(props.modelValue)
} }
} else if (isArray(props.modelValue)) { } else if (isArray(props.modelValue)) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment