营销:增加商城装修组件【图片展示】

This commit is contained in:
owen 2023-11-05 20:42:50 +08:00
parent 434aa864da
commit fa710b560d
6 changed files with 122 additions and 51 deletions

View File

@ -0,0 +1,27 @@
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
/** 图片展示属性 */
export interface ImageBarProperty {
// 图片链接
imgUrl: string
// 跳转链接
url: string
// 组件样式
style: ComponentStyle
}
// 定义组件
export const component = {
id: 'ImageBar',
name: '图片展示',
icon: 'ep:picture',
property: {
imgUrl: '',
url: '',
style: {
bgType: 'color',
bgColor: '#fff',
marginBottom: 8
} as ComponentStyle
}
} as DiyComponent<ImageBarProperty>

View File

@ -0,0 +1,24 @@
<template>
<!-- 无图片 -->
<div class="h-50px flex items-center justify-center bg-gray-3" v-if="!property.imgUrl">
<Icon icon="ep:picture" class="text-gray-8 text-30px!" />
</div>
<el-image class="min-h-30px" v-else :src="property.imgUrl" />
</template>
<script setup lang="ts">
import { ImageBarProperty } from './config'
/** 图片展示 */
defineOptions({ name: 'ImageBar' })
defineProps<{ property: ImageBarProperty }>()
</script>
<style scoped lang="scss">
/* 图片 */
img {
width: 100%;
height: 100%;
display: block;
}
</style>

View File

@ -0,0 +1,34 @@
<template>
<ComponentContainerProperty v-model="formData.style">
<el-form label-width="80px" :model="formData">
<el-form-item label="上传图片" prop="imgUrl">
<UploadImg
v-model="formData.imgUrl"
draggable="false"
height="80px"
width="100%"
class="min-w-80px"
>
<template #tip> 建议宽度750 </template>
</UploadImg>
</el-form-item>
<el-form-item label="链接" prop="url">
<el-input placeholder="链接" v-model="formData.url" />
</el-form-item>
</el-form>
</ComponentContainerProperty>
</template>
<script setup lang="ts">
import { ImageBarProperty } from './config'
import { usePropertyForm } from '@/components/DiyEditor/util'
//
defineOptions({ name: 'ImageBarProperty' })
const props = defineProps<{ modelValue: ImageBarProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
</script>
<style scoped lang="scss"></style>

View File

@ -3,16 +3,25 @@ import { PageConfigProperty } from '@/components/DiyEditor/components/mobile/Pag
import { NavigationBarProperty } from '@/components/DiyEditor/components/mobile/NavigationBar/config'
import { TabBarProperty } from '@/components/DiyEditor/components/mobile/TabBar/config'
// 页面装修组件
export interface DiyComponent<T> {
// 组件唯一标识
id: string
// 组件名称
name: string
// 组件图标
icon: string
// 组件属性
property: T
}
// 页面装修组件库
export interface DiyComponentLibrary {
// 组件库名称
name: string
// 是否展开
extended: boolean
// 组件列表
components: string[]
}
@ -85,3 +94,27 @@ export function usePropertyForm<T>(modelValue: T, emit: Function): { formData: R
return { formData }
}
// 页面组件库
export const PAGE_LIBS = [
{
name: '基础组件',
extended: true,
components: [
'SearchBar',
'NoticeBar',
'GridNavigation',
'ListNavigation',
'Divider',
'TitleBar'
]
},
{ name: '图文组件', extended: true, components: ['ImageBar', 'Carousel'] },
{ name: '商品组件', extended: true, components: ['ProductCard'] },
{
name: '会员组件',
extended: true,
components: ['UserCard', 'OrderCard', 'WalletCard', 'CouponCard']
},
{ name: '营销组件', extended: true, components: ['Combination', 'Seckill', 'Point', 'Coupon'] }
] as DiyComponentLibrary[]

View File

@ -3,7 +3,7 @@
v-if="formData && !formLoading"
v-model="formData.property"
:title="formData.name"
:libs="componentLibs"
:libs="PAGE_LIBS"
:show-page-config="true"
:show-navigation-bar="true"
:show-tab-bar="false"
@ -13,35 +13,11 @@
<script setup lang="ts">
import * as DiyPageApi from '@/api/mall/promotion/diy/page'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { DiyComponentLibrary } from '@/components/DiyEditor/util'
import { PAGE_LIBS } from '@/components/DiyEditor/util'
/** 装修页面表单 */
defineOptions({ name: 'DiyPageDecorate' })
//
const componentLibs = [
{
name: '基础组件',
extended: true,
components: [
'SearchBar',
'NoticeBar',
'GridNavigation',
'ListNavigation',
'Divider',
'TitleBar'
]
},
{ name: '图文组件', extended: true, components: ['Carousel'] },
{ name: '商品组件', extended: true, components: ['ProductCard'] },
{
name: '会员组件',
extended: true,
components: ['UserCard', 'OrderCard', 'WalletCard', 'CouponCard']
},
{ name: '营销组件', extended: true, components: ['Combination', 'Seckill', 'Point', 'Coupon'] }
] as DiyComponentLibrary[]
const message = useMessage() //
const formLoading = ref(false) // 12

View File

@ -28,7 +28,7 @@
import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
import * as DiyPageApi from '@/api/mall/promotion/diy/page'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { DiyComponentLibrary } from '@/components/DiyEditor/util'
import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util'
/** 装修模板表单 */
defineOptions({ name: 'DiyTemplateDecorate' })
@ -62,29 +62,6 @@ const getPageDetail = async (id: any) => {
//
const templateLibs = [] as DiyComponentLibrary[]
//
const pageLibs = [
{
name: '基础组件',
extended: true,
components: [
'SearchBar',
'NoticeBar',
'GridNavigation',
'ListNavigation',
'Divider',
'TitleBar'
]
},
{ name: '图文组件', extended: true, components: ['Carousel'] },
{ name: '商品组件', extended: true, components: ['ProductCard'] },
{
name: '会员组件',
extended: true,
components: ['UserCard', 'OrderCard', 'WalletCard', 'CouponCard']
},
{ name: '营销组件', extended: true, components: ['Combination', 'Seckill', 'Point', 'Coupon'] }
] as DiyComponentLibrary[]
//
const libs = ref<DiyComponentLibrary[]>(templateLibs)
//
@ -97,7 +74,7 @@ const handleTemplateItemChange = () => {
}
//
libs.value = pageLibs
libs.value = PAGE_LIBS
currentFormData.value = formData.value!.pages.find(
(page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
)