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

src/views/mall/promotion/diy/page/decorate.vue

@@ -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）提交的按钮禁用

src/views/mall/promotion/diy/template/decorate.vue

@@ -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
   )