托拉拽页面回显文档
dearweb
发布：2021-11-27 16:16:56阅读：
托拉拽页面回显文档
pageSetting: {
pageName: '哥弟商元', // 页面名称
shareTitle: '分享标题', // 分享标题
shareDoc: '分享标题', // 分享描述
shareImg: '', // 分享图片
},
/* id 组件id
componentType: 1, 1 一般组件 2 营销组件 组件类别
name: 'Hot', 组件名称
type: 6, 组件类型 1 搜索框 2 文本标题 3 图文导航 4 轮播图 5 图片 6 商品 7 商品分组 8 辅助分割线
checked true/false 是否选中
linkType：1 , 跳转类型 1 功能页面 2 商品 3 商品分组 4 装修页面 5 活动营销 6 自定义
styleObj:{} 样式 top ：距离顶部的距离
*/
componentArea: [
{
id: 1,
titleCom: '搜索',
name: 'SearchCom',
componentType: 1,
type: 1,
checked: false,
presetTxt: '搜索', //搜索框预设内容
icon: 'font_family icon-dianpuzhuangxiu-sousuo' // 图标
},
{
id: 2,
titleCom: '文本标题',
name: 'TextCom', // 文本
componentType: 1,
type: 2,
checked: false,
icon: 'font_family icon-wenben1',
alignType: 1, // 1居左 2居中
showIconType: '1', // 1显示 2不显示
titleTextarea: '文本内容', // 标题内容
linkType: '', // 跳转类型
linkTitle: '', // 跳转标题
linkUrl: '' // 跳转地址
},
{
id: 3,
titleCom: '图文导航',
name: 'TextImgCom', // 图文
componentType: 1,
type: 3,
checked: false,
icon: 'font_family icon-tuwendaohang', //
styleObj: {
top: ''
},
itemImgList: [
{
id: 8,
title: '导航1', // 标题
imgSrc: 'http://www.dearweb.cn/skin/new2021/images/logo.png', // 图片链接
linkType: '1', // 跳转类型
linkTitle: '', // 跳转标题
linkUrl: 'jrrr' // 跳转地址
},
{
id: 2,
title: '导航2', // 标题
imgSrc: 'http://www.dearweb.cn/skin/new2021/images/logo.png', // 图片链接
linkType: '', // 跳转类型
linkTitle: '', // 跳转标题
linkUrl: '' // 跳转地址
},
{
id: 3,
title: '导航3', // 标题
imgSrc: 'http://www.dearweb.cn/skin/new2021/images/logo.png', // 图片链接
linkType: '', // 跳转类型
linkTitle: '', // 跳转标题
linkUrl: '' // 跳转地址
},
{
id: 4,
title: '导航4', // 标题
imgSrc: 'http://www.dearweb.cn/skin/new2021/images/logo.png', // 图片链接
linkType: '', // 跳转类型
linkTitle: '', // 跳转标题
linkUrl: '' // 跳转地址
}
]
},
{
id: 4,
titleCom: '轮播图',
name: 'BannerCom', // 轮播图片
componentType: 1,
type: 4,
checked: false,
icon: 'font_family icon-lunbotu',
alignType: 1, // 1 纵向 2 轮播图
styleObj: {
top: ''
},
// 上传图片
itemImgList: [
{
id: 1,
title: '', // 标题
imgSrc: '', // 图片链接
linkType: '', // 跳转类型
linkTitle: '', // 跳转标题
linkUrl: '' // 跳转地址
},
{
id: 2,
title: '', // 标题
imgSrc:'', // 图片链接
linkType: '', // 跳转类型
linkTitle: '', // 跳转标题
linkUrl: '' // 跳转地址
}
]
},
{
id: 5,
titleCom: '图片',
name: 'ImageCom', // 图片
componentType: 1,
// alignType: 1, // 1 单链接 2 热区 // 为了兼容组件
type: 5,
checked: false,
icon: 'font_family icon-tupian1',
styleObj: {},
itemImgList: [
{
id: 1,
name: 'images',
alignType: 1, // 1 单链接 2 热区
imgSrc:'', // 图片地址
linkType: '', // 跳转类型
linkTitle: '', // 跳转标题
linkUrl: '', // 跳转地址
imgListHot: [
{
id: 1,
name: 'Hot',
linkType: '', // 跳转类型
linkTitle:'', // 跳转标题
linkUrl: '', // 跳转地址
y: 50, // 距离顶部距离
x: 165, // 距离左侧距离
width: 50, // 宽度
height: 50 // 高度
}
]
}
]
},
{
id: 6,
titleCom: '商品',
name: 'GoodsCom', // 商品
componentType: 1,
type: 6,
checked: false,
icon: 'font_family icon-shangpin1',
alignType: 2, // 1 一行一个 2 一行2个 3 详细列表
styleObj: {
top: ''
},
goodsList: [
{
goodsId: 1, // 商品id
goodsName: '我是商品1', // 商品标题
goodsReferencePrice: '258.25', // 划线价格
minCounterPrice: '188' // 销量价格
},
]
},
{
id: 7,
titleCom: '商品分组',
name: 'GoodsTabCom', // 商品分组
componentType: 1,
type: 7,
checked: false,
icon: 'font_family icon-shangpinfenzu1',
styleObj: {
top: ''
},
itemImgList: [
{
id: 1, // id
title: 't名称1', //
goodsList: [
{
goodsId: 6, // 商品id
goodsName: '我是商品6', // 商品标题
goodsReferencePrice: '999', // 划线价格
minCounterPrice: '68.88' // 销量价格
}
]
},
]
},
{
id: 8,
titleCom: '辅助分割',
name: 'CutUpLineCom', // 分割线
componentType: 1,
type: 8,
checked: false,
icon: 'font_family icon-fengexian1',
alignType: 2, // 1 空白分割 2 分割线
styleObj: {
top: ''
}
},
// 营销组件
{
id: 9,
titleCom: '优惠券',
name: 'MarketingCom', // 营销组件
componentType: 2,
type: 9,
checked: false,
icon: 'font_family icon-youhuiquan1',
styleObj: {
top: ''
},
alignType: 2, // 1 空白分割 2 分割线
// 营销组件
itemImgList: [
{
id: 1,
name: '营销组件'
},
{
id: 2,
name: '营销组件'
},
{
id: 3,
name: '营销组件'
}
]
}
],小礼物走一波，支持作者
赏还没有人赞赏，支持一波吧
