位置:首页 > web前端 > vue

托拉拽页面回显文档

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: '营销组件'
            }
          ]
        }
      ],


24人点赞 返回栏目 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

手机扫码查看 手机扫码查看