营销：适配商城装修组件【广告魔方】
This commit is contained in:
owen
parent
55b477acdb
commit
49ebadd748
@ -135,8 +135,11 @@ $toolbar-position: -55px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
/* 用于包裹组件，为组件提供 组件名称、工具栏、边框等样式 */
|
||||
.component-wrap {
|
||||
z-index: 0;
|
||||
// 不可以被点击
|
||||
// component-wrap会遮挡组件，导致组件不能触发鼠标事件，所以这里要先禁用，然后在组件名称、工具栏上开启。
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -146,6 +149,8 @@ $toolbar-position: -55px;
|
||||
height: 100%;
|
||||
/* 左侧：组件名称 */
|
||||
.component-name {
|
||||
// 可以被点击
|
||||
pointer-events: auto;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
@ -174,6 +179,8 @@ $toolbar-position: -55px;
|
||||
}
|
||||
/* 右侧：组件操作工具栏 */
|
||||
.component-toolbar {
|
||||
// 可以被点击
|
||||
pointer-events: auto;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
</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"
|
||||
class="absolute bottom-10px right-10px rounded-xl bg-black p-x-8px p-y-2px text-10px text-white opacity-40"
|
||||
>{{ currentIndex }} / {{ property.items.length }}</div
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,48 @@
|
||||
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 广告魔方属性 */
|
||||
export interface MagicCubeProperty {
|
||||
// 上圆角
|
||||
borderRadiusTop: number
|
||||
// 下圆角
|
||||
borderRadiusBottom: number
|
||||
// 间隔
|
||||
space: number
|
||||
// 导航菜单列表
|
||||
list: MagicCubeItemProperty[]
|
||||
// 组件样式
|
||||
style: ComponentStyle
|
||||
}
|
||||
/** 广告魔方项目属性 */
|
||||
export interface MagicCubeItemProperty {
|
||||
// 图标链接
|
||||
imgUrl: string
|
||||
// 链接
|
||||
url: string
|
||||
// 宽
|
||||
width: number
|
||||
// 高
|
||||
height: number
|
||||
// 上
|
||||
top: number
|
||||
// 左
|
||||
left: number
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'MagicCube',
|
||||
name: '广告魔方',
|
||||
icon: 'fluent:puzzle-cube-piece-20-filled',
|
||||
property: {
|
||||
borderRadiusTop: 0,
|
||||
borderRadiusBottom: 0,
|
||||
space: 0,
|
||||
list: [],
|
||||
style: {
|
||||
bgType: 'color',
|
||||
bgColor: '#fff',
|
||||
marginBottom: 8
|
||||
} as ComponentStyle
|
||||
}
|
||||
} as DiyComponent<MagicCubeProperty>
|
||||
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative"
|
||||
:style="{ height: `${rowCount * CUBE_SIZE}px`, width: `${4 * CUBE_SIZE}px` }"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in property.list"
|
||||
:key="index"
|
||||
class="absolute"
|
||||
:style="{
|
||||
width: `${item.width * CUBE_SIZE - property.space * 2}px`,
|
||||
height: `${item.height * CUBE_SIZE - property.space * 2}px`,
|
||||
margin: `${property.space}px`,
|
||||
top: `${item.top * CUBE_SIZE}px`,
|
||||
left: `${item.left * CUBE_SIZE}px`
|
||||
}"
|
||||
>
|
||||
<el-image
|
||||
class="h-full w-full"
|
||||
fit="cover"
|
||||
:src="item.imgUrl"
|
||||
:style="{
|
||||
borderTopLeftRadius: `${property.borderRadiusTop}px`,
|
||||
borderTopRightRadius: `${property.borderRadiusTop}px`,
|
||||
borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
|
||||
borderBottomRightRadius: `${property.borderRadiusBottom}px`
|
||||
}"
|
||||
>
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<div
|
||||
class="flex items-center justify-center"
|
||||
:style="{
|
||||
width: `${item.width * CUBE_SIZE}px`,
|
||||
height: `${item.height * CUBE_SIZE}px`
|
||||
}"
|
||||
>
|
||||
<Icon icon="ep-picture" color="gray" :size="CUBE_SIZE" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { MagicCubeProperty } from './config'
|
||||
|
||||
/** 广告魔方 */
|
||||
defineOptions({ name: 'MagicCube' })
|
||||
const props = defineProps<{ property: MagicCubeProperty }>()
|
||||
// 一个方块的大小
|
||||
const CUBE_SIZE = 93.75
|
||||
/**
|
||||
* 计算方块的行数
|
||||
* 行数用于计算魔方的总体高度，存在以下情况：
|
||||
* 1. 没有数据时，默认就只显示一行的高度
|
||||
* 2. 底部的空白不算高度，例如只有第一行有数据，那么就只显示一行的高度
|
||||
* 3. 顶部及中间的空白算高度，例如一共有四行，只有最后一行有数据，那么也显示四行的高度
|
||||
*/
|
||||
const rowCount = computed(() => {
|
||||
let count = 0
|
||||
if (props.property.list.length > 0) {
|
||||
// 最大行号
|
||||
count = Math.max(...props.property.list.map((item) => item.bottom))
|
||||
}
|
||||
// 行号从 0 开始，所以加 1
|
||||
return count + 1
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<ComponentContainerProperty v-model="formData.style">
|
||||
<!-- 表单 -->
|
||||
<el-form label-width="80px" :model="formData" class="m-t-8px">
|
||||
<el-text tag="p"> 魔方设置 </el-text>
|
||||
<el-text type="info" size="small"> 每格尺寸187 * 187 </el-text>
|
||||
<MagicCubeEditor
|
||||
class="m-y-16px"
|
||||
v-model="formData.list"
|
||||
:rows="4"
|
||||
:cols="4"
|
||||
@hot-area-selected="handleHotAreaSelected"
|
||||
/>
|
||||
<template v-for="(hotArea, index) in formData.list" :key="index">
|
||||
<template v-if="selectedHotAreaIndex === index">
|
||||
<el-form-item label="上传图片" :prop="`list[${index}].imgUrl`">
|
||||
<UploadImg v-model="hotArea.imgUrl" height="80px" width="80px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="链接" :prop="`list[${index}].url`">
|
||||
<el-input v-model="hotArea.url" placeholder="请输入链接" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
<el-form-item label="上圆角" prop="borderRadiusTop">
|
||||
<el-slider
|
||||
v-model="formData.borderRadiusTop"
|
||||
:max="100"
|
||||
:min="0"
|
||||
show-input
|
||||
input-size="small"
|
||||
:show-input-controls="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="下圆角" prop="borderRadiusBottom">
|
||||
<el-slider
|
||||
v-model="formData.borderRadiusBottom"
|
||||
:max="100"
|
||||
:min="0"
|
||||
show-input
|
||||
input-size="small"
|
||||
:show-input-controls="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="间隔" prop="space">
|
||||
<el-slider
|
||||
v-model="formData.space"
|
||||
:max="100"
|
||||
:min="0"
|
||||
show-input
|
||||
input-size="small"
|
||||
:show-input-controls="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ComponentContainerProperty>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||
import { MagicCubeProperty } from '@/components/DiyEditor/components/mobile/MagicCube/config'
|
||||
|
||||
/** 广告魔方属性面板 */
|
||||
defineOptions({ name: 'MagicCubeProperty' })
|
||||
|
||||
const props = defineProps<{ modelValue: MagicCubeProperty }>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||
|
||||
// 选中的热区
|
||||
const selectedHotAreaIndex = ref(-1)
|
||||
const handleHotAreaSelected = (_: any, index: number) => {
|
||||
selectedHotAreaIndex.value = index
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -105,7 +105,7 @@ export const PAGE_LIBS = [
|
||||
{
|
||||
name: '图文组件',
|
||||
extended: true,
|
||||
components: ['ImageBar', 'Carousel', 'TitleBar', 'VideoPlayer', 'Divider']
|
||||
components: ['ImageBar', 'Carousel', 'TitleBar', 'VideoPlayer', 'Divider', 'MagicCube']
|
||||
},
|
||||
{ name: '商品组件', extended: true, components: ['ProductCard'] },
|
||||
{
|
||||
|
||||
270
src/components/MagicCubeEditor/index.vue
Normal file
270
src/components/MagicCubeEditor/index.vue
Normal file
@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<div class="relative">
|
||||
<table class="cube-table">
|
||||
<!-- 底层：魔方矩阵 -->
|
||||
<tbody>
|
||||
<tr v-for="(rowCubes, row) in cubes" :key="row">
|
||||
<td
|
||||
v-for="(cube, col) in rowCubes"
|
||||
:key="col"
|
||||
:class="['cube', { active: cube.active }]"
|
||||
:style="{
|
||||
width: `${cubeSize}px`,
|
||||
height: `${cubeSize}px`
|
||||
}"
|
||||
@click="handleCubeClick(row, col)"
|
||||
@mouseenter="handleCellHover(row, col)"
|
||||
>
|
||||
<Icon icon="ep-plus" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<!-- 顶层：热区 -->
|
||||
<div
|
||||
v-for="(hotArea, index) in hotAreas"
|
||||
:key="index"
|
||||
class="hot-area"
|
||||
:style="{
|
||||
top: `${cubeSize * hotArea.top}px`,
|
||||
left: `${cubeSize * hotArea.left}px`,
|
||||
height: `${cubeSize * hotArea.height}px`,
|
||||
width: `${cubeSize * hotArea.width}px`
|
||||
}"
|
||||
@click="handleHotAreaSelected(hotArea, index)"
|
||||
@mouseover="exitHotAreaSelectMode"
|
||||
>
|
||||
<!-- 右上角热区删除按钮 -->
|
||||
<div
|
||||
v-if="selectedHotAreaIndex === index"
|
||||
class="btn-delete"
|
||||
@click="handleDeleteHotArea(index)"
|
||||
>
|
||||
<Icon icon="ep:circle-close-filled" />
|
||||
</div>
|
||||
{{ `${hotArea.width}×${hotArea.height}` }}
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import * as vueTypes from 'vue-types'
|
||||
import { Point, Rect, isContains, isOverlap, createRect } from './util'
|
||||
|
||||
// 魔方编辑器
|
||||
// 有两部分组成：
|
||||
// 1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
|
||||
// 操作方法：
|
||||
// 1.1 点击其中一个方块就会进入热区选择模式
|
||||
// 1.2 再次点击另外一个方块时，结束热区选择模式
|
||||
// 1.3 在两个方块中间的区域创建热区
|
||||
// 如果两次点击的都是同一方块，就只创建一个格子的热区
|
||||
// 2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
|
||||
defineOptions({ name: 'MagicCubeEditor' })
|
||||
|
||||
/**
|
||||
* 方块
|
||||
* @property active 是否激活
|
||||
*/
|
||||
type Cube = Point & { active: boolean }
|
||||
|
||||
// 定义属性
|
||||
const props = defineProps({
|
||||
// 热区列表
|
||||
modelValue: vueTypes.array<any>().isRequired,
|
||||
// 行数，默认 4 行
|
||||
rows: propTypes.number.def(4),
|
||||
// 列数，默认 4 列
|
||||
cols: propTypes.number.def(4),
|
||||
// 方块大小，单位px，默认75px
|
||||
cubeSize: propTypes.number.def(75)
|
||||
})
|
||||
|
||||
// 魔方矩阵：所有的方块
|
||||
const cubes = ref<Cube[][]>([])
|
||||
// 监听行数、列数变化
|
||||
watch(
|
||||
() => [props.rows, props.cols],
|
||||
() => {
|
||||
// 清空魔方
|
||||
cubes.value = []
|
||||
if (!props.rows || !props.cols) return
|
||||
|
||||
// 初始化魔方
|
||||
for (let row = 0; row < props.rows; row++) {
|
||||
cubes.value[row] = []
|
||||
for (let col = 0; col < props.cols; col++) {
|
||||
cubes.value[row].push({ x: col, y: row, active: false })
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 热区列表
|
||||
const hotAreas = ref<Rect[]>([])
|
||||
// 初始化热区
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => (hotAreas.value = props.modelValue || []),
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 热区起始方块
|
||||
const hotAreaBeginCube = ref<Cube>()
|
||||
// 是否开启了热区选择模式
|
||||
const isHotAreaSelectMode = () => !!hotAreaBeginCube.value
|
||||
/**
|
||||
* 处理鼠标点击方块
|
||||
*
|
||||
* @param currentRow 当前行号
|
||||
* @param currentCol 当前列号
|
||||
*/
|
||||
const handleCubeClick = (currentRow: number, currentCol: number) => {
|
||||
const currentCube = cubes.value[currentRow][currentCol]
|
||||
// 情况1：进入热区选择模式
|
||||
if (!isHotAreaSelectMode()) {
|
||||
hotAreaBeginCube.value = currentCube
|
||||
hotAreaBeginCube.value.active = true
|
||||
return
|
||||
}
|
||||
|
||||
// 情况2：结束热区选择模式
|
||||
hotAreas.value.push(createRect(hotAreaBeginCube.value!, currentCube))
|
||||
// 结束热区选择模式
|
||||
exitHotAreaSelectMode()
|
||||
// 创建后就选中热区
|
||||
let hotAreaIndex = hotAreas.value.length - 1
|
||||
handleHotAreaSelected(hotAreas.value[hotAreaIndex], hotAreaIndex)
|
||||
// 发送热区变动通知
|
||||
emitUpdateModelValue()
|
||||
}
|
||||
/**
|
||||
* 处理鼠标经过方块
|
||||
*
|
||||
* @param currentRow 当前行号
|
||||
* @param currentCol 当前列号
|
||||
*/
|
||||
const handleCellHover = (currentRow: number, currentCol: number) => {
|
||||
// 当前没有进入热区选择模式
|
||||
if (!isHotAreaSelectMode()) return
|
||||
|
||||
// 当前已选的区域
|
||||
const currentSelectedArea = createRect(
|
||||
hotAreaBeginCube.value!,
|
||||
cubes.value[currentRow][currentCol]
|
||||
)
|
||||
// 热区不允许重叠
|
||||
for (const hotArea of hotAreas.value) {
|
||||
// 检查是否重叠
|
||||
if (isOverlap(hotArea, currentSelectedArea)) {
|
||||
// 结束热区选择模式
|
||||
exitHotAreaSelectMode()
|
||||
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 激活选中区域内部的方块
|
||||
eachCube((_, __, cube) => {
|
||||
cube.active = isContains(currentSelectedArea, cube)
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 处理热区删除
|
||||
*
|
||||
* @param index 热区索引
|
||||
*/
|
||||
const handleDeleteHotArea = (index: number) => {
|
||||
hotAreas.value.splice(index, 1)
|
||||
// 结束热区选择模式
|
||||
exitHotAreaSelectMode()
|
||||
// 发送热区变动通知
|
||||
emitUpdateModelValue()
|
||||
}
|
||||
|
||||
// 发送模型更新
|
||||
const emit = defineEmits(['update:modelValue', 'hotAreaSelected'])
|
||||
// 发送热区变动通知
|
||||
const emitUpdateModelValue = () => emit('update:modelValue', hotAreas)
|
||||
|
||||
// 热区选中
|
||||
const selectedHotAreaIndex = ref(-1)
|
||||
const handleHotAreaSelected = (hotArea: Rect, index: number) => {
|
||||
selectedHotAreaIndex.value = index
|
||||
emit('hotAreaSelected', hotArea, index)
|
||||
}
|
||||
|
||||
/**
|
||||
* 结束热区选择模式
|
||||
*/
|
||||
function exitHotAreaSelectMode() {
|
||||
// 移除方块激活标记
|
||||
eachCube((_, __, cube) => {
|
||||
if (cube.active) {
|
||||
cube.active = false
|
||||
}
|
||||
})
|
||||
|
||||
// 清除起点
|
||||
hotAreaBeginCube.value = undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* 迭代魔方矩阵
|
||||
* @param callback 回调
|
||||
*/
|
||||
const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
|
||||
for (let x = 0; x < cubes.value.length; x++) {
|
||||
for (let y = 0; y < cubes.value[x].length; y++) {
|
||||
callback(x, y, cubes.value[x][y])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.cube-table {
|
||||
position: relative;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
.cube {
|
||||
border: 1px solid var(--el-border-color);
|
||||
text-align: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
&.active {
|
||||
background: var(--el-color-primary-light-9);
|
||||
}
|
||||
}
|
||||
|
||||
.hot-area {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-8);
|
||||
color: var(--el-color-primary);
|
||||
box-sizing: border-box;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
cursor: pointer;
|
||||
|
||||
.btn-delete {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
72
src/components/MagicCubeEditor/util.ts
Normal file
72
src/components/MagicCubeEditor/util.ts
Normal file
@ -0,0 +1,72 @@
|
||||
// 坐标点
|
||||
export interface Point {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
|
||||
// 矩形
|
||||
export interface Rect {
|
||||
// 左上角 X 轴坐标
|
||||
left: number
|
||||
// 左上角 Y 轴坐标
|
||||
top: number
|
||||
// 右下角 X 轴坐标
|
||||
right: number
|
||||
// 右下角 Y 轴坐标
|
||||
bottom: number
|
||||
// 矩形宽度
|
||||
width: number
|
||||
// 矩形高度
|
||||
height: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断两个矩形是否重叠
|
||||
* @param a 矩形 A
|
||||
* @param b 矩形 B
|
||||
*/
|
||||
export const isOverlap = (a: Rect, b: Rect): boolean => {
|
||||
return (
|
||||
a.left < b.left + b.width &&
|
||||
a.left + a.width > b.left &&
|
||||
a.top < b.top + b.height &&
|
||||
a.height + a.top > b.top
|
||||
)
|
||||
}
|
||||
/**
|
||||
* 检查坐标点是否在矩形内
|
||||
* @param hotArea 矩形
|
||||
* @param point 坐标
|
||||
*/
|
||||
export const isContains = (hotArea: Rect, point: Point): boolean => {
|
||||
return (
|
||||
point.x >= hotArea.left &&
|
||||
point.x < hotArea.right &&
|
||||
point.y >= hotArea.top &&
|
||||
point.y < hotArea.bottom
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 在两个坐标点中间，创建一个矩形
|
||||
*
|
||||
* 存在以下情况：
|
||||
* 1. 两个坐标点是同一个位置，只占一个位置的正方形，宽高都为 1
|
||||
* 2. X 轴坐标相同，只占一行的矩形，高度为 1
|
||||
* 3. Y 轴坐标相同，只占一列的矩形，宽度为 1
|
||||
* 4. 多行多列的矩形
|
||||
*
|
||||
* @param a 坐标点一
|
||||
* @param b 坐标点二
|
||||
*/
|
||||
export const createRect = (a: Point, b: Point): Rect => {
|
||||
// 计算矩形的范围
|
||||
const [left, left2] = [a.x, b.x].sort()
|
||||
const [top, top2] = [a.y, b.y].sort()
|
||||
const right = left2 + 1
|
||||
const bottom = top2 + 1
|
||||
const height = bottom - top
|
||||
const width = right - left
|
||||
|
||||
return { left, right, top, bottom, height, width }
|
||||
}
|
||||
@ -78,7 +78,6 @@ const handleTemplateItemChange = () => {
|
||||
currentFormData.value = formData.value!.pages.find(
|
||||
(page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
|
||||
)
|
||||
console.log(currentFormData.value)
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
|
||||
Loading…
Reference in New Issue
Block a user