09.21 页面装修功能说明

介绍

装修模块的目录说明, 主要逻辑就是在后台端进行装修, 移动端进行显示

• 后台页面需要定义好装修组件的数据和字段, 并编写装修时的显示预览组件和设置组件
• 移动端页面需要定义好显示组件(组件样式内容可复制后台页面的显示组件后稍微修改即可)

装修目录文件夹结构说明

主入口文件 /src/views/mall/pagedevise/devise/views/index.vue

.
├── assets # 静态资源
├── components # 视图组件
│   ├── base 公共组件
│   ├── settings # 移动端设置组件
│   │   ├── shop # 移动端店铺单独的组件
│   ├── settings-pc # PC设置组件
│   │   ├── shop # PC店铺单独的组件
│   ├── show # 移动端显示组件
│   │   ├── shop # 移动端店铺单独的组件
│   │   ├── user # 移动端个人中心单独的组件目录
│   ├── show-pc # PC显示组件
│   │   ├── shop # PC店铺单独的组件单独的组件
├── const # 默认的装修数据及字段定义
│   ├── mobile # 移动端组件默认的装修数据及字段定义
│   ├── pc # PC端组件默认的装修数据及字段定义
│   ├── appPageUrls.ts # 商城端页面路径
│   ├── pageDeviseData.ts # 移动端首页默认装修数据
│   ├── pageDeviseDataPcPc # PC端首页默认装修数据
│   ├── pdThemeConfig.ts # 主题配置默认数据
├── hooks # 公共调用方法
│   ├── pageDeviseConfig.ts # 装修组件加载及配置选项
│   ├── useCompSettingHooks.ts # 组件设置公共数据方法
│   ├── useCompShowHooks.ts # 组件显示公共数据方法
│   ├── usePageDeviseHooks.ts # 装修页面公共数据方法
├── layout # 装修布局组件
├── store # 正在装修数据的管理
├── utils # 工具
├── views # 页面
│   ├── preview # 预览页面
│   ├── index.vue # 装修编辑时的页面主文件

如何创建一个新的组件

• 提示： 移动端和pc端和店铺端组件类似原理，只是目录不相同
• 注意： 组件名称不要和第三方库或者公共组件名称相同,比如 swiper/search, 约定： 组件名称后缀Pd，示例: swiperPd, searchPd
  • 自定义组件中的watch事件的处理参考 pd-top-nav.vue

示例：创建一个移动端标题文本组件

1. 在 const 目录下 mobile 新建一个文件，命名为 title-text.ts

• 该文件是用来定义新的移动端组件的数据字段

  // 默认的装修数据及字段定义
    {
        // 开启样式设置，默认开启，如果不开启，则不显示样式
        stylesEnabled: true,
        // 组件外部的 css 样式, css支持的样式都可以写在这里面，默认是支持背景色及内外边距和圆角
        styles: {}
        // 其他字段数据...
    }
  

2. 在 components 目录下show新建一个文件，命名为 title-text.vue ,内容参考: title-text.vue

• 该文件是用来定义新的移动端组件显示效果

3. 在 components 目录下setting新建一个文件,约定名称为 组件名称+setting，命名为 title-text-setting.vue,内容参考: title-text-setting.vue

• 该文件是用来定义组件设置操作显示

4. 在 hooks/pageDeviseConfig.ts 的divpageComponentConfig数据中，添加 (注意: 后缀为 Component)

• 将组件添加到左侧可选择的组件中,需要做好分类,如果只能是店铺页面组件才能使用的请添加 isShopComponent 判断

      {
        name: "标题文字", // 组件名称
        componentName: "titleTextComponent", // 组件名称格式为驼峰(驼峰对应组件名的中横线-)+Component
        img: new URL("../assets/images/icon/ic_tittle.png", import.meta.url).href, // 组件图标
        // isShopComponent: false, // 判断是否支持店铺可用组件，true表示只支持店铺可用组件，false表示不支持店铺可用组件，不配置则都支持
      }
  

5. 移动端开发

• 然后在移动端项目中的/components/page-devise/components目录下开发相应的显示组件，建议可以直接复制 show 目录下组件稍微修改即可

  1. 新建组件目录：pd-title-text, 然后在该目录下新建 index.vue 文件,并编写组件内容
  2. 在/components/page-devise/views 目录下对应的文件引入组件即可

6. 代码开发部分已经完成

数据字段约定的字段名称和数据

开发新的组件时，需要定义数据字段，建议使用下面约定的字段名称和数据类型。

styles: {}, // 所有css支持的style字段
show: "0", // 0 不显示 1 显示
pageUrl: "", //页面地址
imageUrl: "" // 图片地址

其他

为什么不用mixin

vue3官方不建议使用