Skip to content

Commit 325e2e4

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

File tree

5 files changed

+205
-2
lines changed

5 files changed

+205
-2
lines changed

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
2+
3+
/** 列表导航属性 */
4+
export interface MenuListProperty {
5+
// 导航菜单列表
6+
list: MenuListItemProperty[]
7+
// 组件样式
8+
style: ComponentStyle
9+
}
10+
/** 列表导航项目属性 */
11+
export interface MenuListItemProperty {
12+
// 图标链接
13+
iconUrl: string
14+
// 标题
15+
title: string
16+
// 标题颜色
17+
titleColor: string
18+
// 副标题
19+
subtitle: string
20+
// 副标题颜色
21+
subtitleColor: string
22+
// 链接
23+
url: string
24+
}
25+
26+
// 定义组件
27+
export const component = {
28+
id: 'MenuList',
29+
name: '列表导航',
30+
icon: 'fa-solid:list',
31+
property: {
32+
list: [],
33+
style: {
34+
bgType: 'color',
35+
bgColor: '#fff',
36+
marginBottom: 8
37+
} as ComponentStyle
38+
}
39+
} as DiyComponent<MenuListProperty>

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="min-h-42px flex flex-col">
3+
<div
4+
v-for="(item, index) in property.list"
5+
:key="index"
6+
class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px"
7+
>
8+
<div class="flex flex-1 flex-row items-center gap-8px">
9+
<el-image v-if="item.iconUrl" class="h-16px w-16px" :src="item.iconUrl" />
10+
<span class="text-16px" :style="{ color: item.titleColor }">{{ item.title }}</span>
11+
</div>
12+
<div class="item-center flex flex-row justify-center gap-4px">
13+
<span class="text-12px" :style="{ color: item.subtitleColor }">{{ item.subtitle }}</span>
14+
<Icon icon="ep-arrow-right" color="#000" :size="16" />
15+
</div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script setup lang="ts">
21+
import { MenuListProperty } from './config'
22+
/** 列表导航 */
23+
defineOptions({ name: 'MenuList' })
24+
defineProps<{ property: MenuListProperty }>()
25+
</script>
26+
27+
<style scoped lang="scss">
28+
.item + .item {
29+
border-top: 1px solid #eee;
30+
}
31+
</style>

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

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

‎src/components/DiyEditor/util.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,9 @@ export const PAGE_LIBS = [
103103
components: [
104104
'SearchBar',
105105
'NoticeBar',
106-
'GridNavigation',
107-
'ListNavigation',
106+
'MenuSwiper',
107+
'MenuGrid',
108+
'MenuList',
108109
'Divider',
109110
'TitleBar'
110111
]

‎src/components/InputWithColor/index.vue

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<el-input v-model="valueRef" v-bind="$attrs">
3+
<template #append>
4+
<el-color-picker v-model="colorRef" :predefine="COLORS" />
5+
</template>
6+
</el-input>
7+
</template>
8+
9+
<script lang="ts" setup>
10+
import { propTypes } from '@/utils/propTypes'
11+
12+
/**
13+
* 带颜色选择器输入框
14+
*/
15+
defineOptions({ name: 'InputWithColor' })
16+
17+
const props = defineProps({
18+
modelValue: propTypes.string.def('').isRequired,
19+
color: propTypes.string.def('').isRequired
20+
})
21+
22+
watch(
23+
() => props.modelValue,
24+
(val: string) => {
25+
if (val === unref(valueRef)) return
26+
valueRef.value = val
27+
}
28+
)
29+
30+
const emit = defineEmits(['update:modelValue', 'update:color'])
31+
32+
// 输入框的值
33+
const valueRef = ref(props.modelValue)
34+
watch(
35+
() => valueRef.value,
36+
(val: string) => {
37+
emit('update:modelValue', val)
38+
}
39+
)
40+
// 颜色
41+
const colorRef = ref(props.color)
42+
watch(
43+
() => colorRef.value,
44+
(val: string) => {
45+
emit('update:color', val)
46+
}
47+
)
48+
</script>
49+
<style scoped lang="scss">
50+
:deep(.el-input-group__append) {
51+
padding: 0;
52+
.el-color-picker__trigger {
53+
padding: 0;
54+
border-left: none;
55+
border-radius: 0 var(--el-input-border-radius) var(--el-input-border-radius) 0;
56+
}
57+
}
58+
</style>

0 commit comments

Comments
 (0)