营销:增加商城装修组件【图片展示】
This commit is contained in:
parent
434aa864da
commit
fa710b560d
@ -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>
|
@ -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>
|
@ -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>
|
@ -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[]
|
||||
|
@ -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) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
|
||||
|
@ -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
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user