Skip to content

Commit ac42493

Browse files
owen118zowen118z
committed
营销：适配商城装修组件【宫格导航】
1 parent 325e2e4 commit ac42493

File tree

5 files changed

+224
-6
lines changed

5 files changed

+224
-6
lines changed

‎src/components/DiyEditor/components/mobile/MenuGrid/config.ts

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
2+
import { cloneDeep } from 'lodash-es'
3+
4+
/** 宫格导航属性 */
5+
export interface MenuGridProperty {
6+
// 列数
7+
column: number
8+
// 导航菜单列表
9+
list: MenuGridItemProperty[]
10+
// 组件样式
11+
style: ComponentStyle
12+
}
13+
/** 宫格导航项目属性 */
14+
export interface MenuGridItemProperty {
15+
// 图标链接
16+
iconUrl: string
17+
// 标题
18+
title: string
19+
// 标题颜色
20+
titleColor: string
21+
// 副标题
22+
subtitle: string
23+
// 副标题颜色
24+
subtitleColor: string
25+
// 链接
26+
url: string
27+
// 角标
28+
badge: {
29+
// 是否显示
30+
show: boolean
31+
// 角标文字
32+
text: string
33+
// 角标文字颜色
34+
textColor: string
35+
// 角标背景颜色
36+
bgColor: string
37+
}
38+
}
39+
40+
export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
41+
title: '标题',
42+
titleColor: '#333',
43+
subtitle: '副标题',
44+
subtitleColor: '#bbb',
45+
badge: {
46+
show: false,
47+
textColor: '#fff',
48+
bgColor: '#FF6000'
49+
}
50+
} as MenuGridItemProperty
51+
52+
// 定义组件
53+
export const component = {
54+
id: 'MenuGrid',
55+
name: '宫格导航',
56+
icon: 'fa-solid:list',
57+
property: {
58+
column: 3,
59+
list: [cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY)],
60+
style: {
61+
bgType: 'color',
62+
bgColor: '#fff',
63+
marginBottom: 8,
64+
marginLeft: 8,
65+
marginRight: 8,
66+
padding: 8,
67+
paddingTop: 8,
68+
paddingRight: 8,
69+
paddingBottom: 8,
70+
paddingLeft: 8,
71+
borderRadius: 8,
72+
borderTopLeftRadius: 8,
73+
borderTopRightRadius: 8,
74+
borderBottomRightRadius: 8,
75+
borderBottomLeftRadius: 8
76+
} as ComponentStyle
77+
}
78+
} as DiyComponent<MenuGridProperty>

‎src/components/DiyEditor/components/mobile/MenuGrid/index.vue

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<div class="flex flex-row flex-wrap">
3+
<div
4+
v-for="(item, index) in property.list"
5+
:key="index"
6+
class="relative flex flex-col items-center p-b-14px p-t-20px"
7+
:style="{ width: `${100 * (1 / property.column)}%` }"
8+
>
9+
<!-- 右上角角标 -->
10+
<span
11+
v-if="item.badge?.show"
12+
class="absolute left-50% top-10px z-1 h-20px rounded-50% p-x-6px text-center text-12px leading-20px"
13+
:style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }"
14+
>
15+
{{ item.badge.text }}
16+
</span>
17+
<el-image v-if="item.iconUrl" class="h-28px w-28px" :src="item.iconUrl" />
18+
<span class="m-t-8px h-16px text-12px leading-16px" :style="{ color: item.titleColor }">
19+
{{ item.title }}
20+
</span>
21+
<span class="m-t-6px h-12px text-10px leading-12px" :style="{ color: item.subtitleColor }">
22+
{{ item.subtitle }}
23+
</span>
24+
</div>
25+
</div>
26+
</template>
27+
28+
<script setup lang="ts">
29+
import { MenuGridProperty } from './config'
30+
/** 宫格导航 */
31+
defineOptions({ name: 'MenuGrid' })
32+
defineProps<{ property: MenuGridProperty }>()
33+
</script>
34+
35+
<style scoped lang="scss"></style>

‎src/components/DiyEditor/components/mobile/MenuGrid/property.vue

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<template>
2+
<ComponentContainerProperty v-model="formData.style">
3+
<!-- 表单 -->
4+
<el-form label-width="80px" :model="formData" class="m-t-8px">
5+
<el-form-item label="每行数量" prop="column">
6+
<el-radio-group v-model="formData.column">
7+
<el-radio :label="3">3个</el-radio>
8+
<el-radio :label="4">4个</el-radio>
9+
</el-radio-group>
10+
</el-form-item>
11+
12+
<el-text tag="p"> 菜单设置 </el-text>
13+
<el-text type="info" size="small"> 拖动左侧的小圆点可以调整顺序 </el-text>
14+
<template v-if="formData.list.length">
15+
<VueDraggable
16+
class="m-t-8px"
17+
:list="formData.list"
18+
item-key="index"
19+
handle=".drag-icon"
20+
:forceFallback="true"
21+
:animation="200"
22+
>
23+
<template #item="{ element, index }">
24+
<div class="mb-4px flex flex-col gap-4px rounded bg-gray-100 p-8px">
25+
<div class="flex flex-row justify-between">
26+
<Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
27+
<Icon icon="ep:delete" class="text-red-500" @click="handleDeleteMenu(index)" />
28+
</div>
29+
<el-form-item label="图标" prop="iconUrl">
30+
<UploadImg v-model="element.iconUrl" height="80px" width="80px">
31+
<template #tip> 建议尺寸：44 * 44 </template>
32+
</UploadImg>
33+
</el-form-item>
34+
<el-form-item label="标题" prop="title">
35+
<InputWithColor v-model="element.title" v-model:color="element.titleColor" />
36+
</el-form-item>
37+
<el-form-item label="副标题" prop="subtitle">
38+
<InputWithColor v-model="element.subtitle" v-model:color="element.subtitleColor" />
39+
</el-form-item>
40+
<el-form-item label="链接" prop="url">
41+
<el-input v-model="element.url" />
42+
</el-form-item>
43+
<el-form-item label="显示角标" prop="badge.show">
44+
<el-switch v-model="element.badge.show" />
45+
</el-form-item>
46+
<template v-if="element.badge.show">
47+
<el-form-item label="角标内容" prop="badge.text">
48+
<InputWithColor
49+
v-model="element.badge.text"
50+
v-model:color="element.badge.textColor"
51+
/>
52+
</el-form-item>
53+
<el-form-item label="背景颜色" prop="badge.bgColor">
54+
<ColorInput v-model="element.badge.bgColor" />
55+
</el-form-item>
56+
</template>
57+
</div>
58+
</template>
59+
</VueDraggable>
60+
</template>
61+
<el-form-item label-width="0">
62+
<el-button @click="handleAddMenu" type="primary" plain class="m-t-8px w-full">
63+
<Icon icon="ep:plus" class="mr-5px" /> 添加菜单
64+
</el-button>
65+
</el-form-item>
66+
</el-form>
67+
</ComponentContainerProperty>
68+
</template>
69+
70+
<script setup lang="ts">
71+
import VueDraggable from 'vuedraggable'
72+
import { usePropertyForm } from '@/components/DiyEditor/util'
73+
import {
74+
EMPTY_MENU_GRID_ITEM_PROPERTY,
75+
MenuGridProperty
76+
} from '@/components/DiyEditor/components/mobile/MenuGrid/config'
77+
import { cloneDeep } from 'lodash-es'
78+
79+
/** 宫格导航属性面板 */
80+
defineOptions({ name: 'MenuGridProperty' })
81+
82+
const props = defineProps<{ modelValue: MenuGridProperty }>()
83+
const emit = defineEmits(['update:modelValue'])
84+
const { formData } = usePropertyForm(props.modelValue, emit)
85+
86+
/* 添加菜单 */
87+
const handleAddMenu = () => {
88+
formData.value.list.push(cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY))
89+
}
90+
/* 删除菜单 */
91+
const handleDeleteMenu = (index: number) => {
92+
formData.value.list.splice(index, 1)
93+
}
94+
</script>
95+
96+
<style scoped lang="scss"></style>

‎src/components/DiyEditor/components/mobile/MenuList/config.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
2+
import { cloneDeep } from 'lodash-es'
23

34
/** 列表导航属性 */
45
export interface MenuListProperty {
@@ -23,13 +24,20 @@ export interface MenuListItemProperty {
2324
url: string
2425
}
2526

27+
export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
28+
title: '标题',
29+
titleColor: '#333',
30+
subtitle: '副标题',
31+
subtitleColor: '#bbb'
32+
}
33+
2634
// 定义组件
2735
export const component = {
2836
id: 'MenuList',
2937
name: '列表导航',
3038
icon: 'fa-solid:list',
3139
property: {
32-
list: [],
40+
list: [cloneDeep(EMPTY_MENU_LIST_ITEM_PROPERTY)],
3341
style: {
3442
bgType: 'color',
3543
bgColor: '#fff',

‎src/components/DiyEditor/components/mobile/MenuList/property.vue

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,11 @@
4949
<script setup lang="ts">
5050
import VueDraggable from 'vuedraggable'
5151
import { usePropertyForm } from '@/components/DiyEditor/util'
52-
import { MenuListProperty } from '@/components/DiyEditor/components/mobile/MenuList/config'
52+
import {
53+
EMPTY_MENU_LIST_ITEM_PROPERTY,
54+
MenuListProperty
55+
} from '@/components/DiyEditor/components/mobile/MenuList/config'
56+
import { cloneDeep } from 'lodash-es'
5357
5458
/** 列表导航属性面板 */
5559
defineOptions({ name: 'MenuListProperty' })
@@ -60,10 +64,7 @@ const { formData } = usePropertyForm(props.modelValue, emit)
6064
6165
/* 添加菜单 */
6266
const handleAddMenu = () => {
63-
formData.value.list.push({
64-
titleColor: '#333',
65-
subtitleColor: '#bbb'
66-
})
67+
formData.value.list.push(cloneDeep(EMPTY_MENU_LIST_ITEM_PROPERTY))
6768
}
6869
/* 删除菜单 */
6970
const handleDeleteMenu = (index: number) => {

0 commit comments

Comments
 (0)