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

src/components/DiyEditor/components/mobile/ImageBar/config.ts

+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>

src/components/DiyEditor/components/mobile/ImageBar/index.vue

+<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>

src/components/DiyEditor/components/mobile/ImageBar/property.vue

+<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>

src/components/DiyEditor/util.ts

@@ -3,16 +3,25 @@ import { PageConfigProperty } from '@/components/DiyEditor/components/mobile/Pag
 import { NavigationBarProperty } from '@/components/DiyEditor/components/mobile/NavigationBar/config'
 import { NavigationBarProperty } from '@/components/DiyEditor/components/mobile/NavigationBar/config'
 import { TabBarProperty } from '@/components/DiyEditor/components/mobile/TabBar/config'
 import { TabBarProperty } from '@/components/DiyEditor/components/mobile/TabBar/config'
 
 
+// 页面装修组件
 export interface DiyComponent<T> {
 export interface DiyComponent<T> {
+  // 组件唯一标识
   id: string
   id: string
+  // 组件名称
   name: string
   name: string
+  // 组件图标
   icon: string
   icon: string
+  // 组件属性
   property: T
   property: T
 }
 }
 
 
+// 页面装修组件库
 export interface DiyComponentLibrary {
 export interface DiyComponentLibrary {
+  // 组件库名称
   name: string
   name: string
+  // 是否展开
   extended: boolean
   extended: boolean
+  // 组件列表
   components: string[]
   components: string[]
 }
 }
 
 
@@ -85,3 +94,27 @@ export function usePropertyForm<T>(modelValue: T, emit: Function): { formData: R
 
 
   return { formData }
   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[]

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

@@ -3,7 +3,7 @@
     v-if="formData && !formLoading"
     v-if="formData && !formLoading"
     v-model="formData.property"
     v-model="formData.property"
     :title="formData.name"
     :title="formData.name"
-    :libs="componentLibs"
+    :libs="PAGE_LIBS"
     :show-page-config="true"
     :show-page-config="true"
     :show-navigation-bar="true"
     :show-navigation-bar="true"
     :show-tab-bar="false"
     :show-tab-bar="false"
@@ -13,35 +13,11 @@
 <script setup lang="ts">
 <script setup lang="ts">
 import * as DiyPageApi from '@/api/mall/promotion/diy/page'
 import * as DiyPageApi from '@/api/mall/promotion/diy/page'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { useTagsViewStore } from '@/store/modules/tagsView'
-import { DiyComponentLibrary } from '@/components/DiyEditor/util'
+import { PAGE_LIBS } from '@/components/DiyEditor/util'
 
 
 /** 装修页面表单 */
 /** 装修页面表单 */
 defineOptions({ name: 'DiyPageDecorate' })
 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 message = useMessage() // 消息弹窗
 
 
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 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 DiyTemplateApi from '@/api/mall/promotion/diy/template'
 import * as DiyPageApi from '@/api/mall/promotion/diy/page'
 import * as DiyPageApi from '@/api/mall/promotion/diy/page'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { useTagsViewStore } from '@/store/modules/tagsView'
-import { DiyComponentLibrary } from '@/components/DiyEditor/util'
+import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util'
 
 
 /** 装修模板表单 */
 /** 装修模板表单 */
 defineOptions({ name: 'DiyTemplateDecorate' })
 defineOptions({ name: 'DiyTemplateDecorate' })
@@ -62,29 +62,6 @@ const getPageDetail = async (id: any) => {
 
 
 // 模板组件库
 // 模板组件库
 const templateLibs = [] as DiyComponentLibrary[]
 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)
 const libs = ref<DiyComponentLibrary[]>(templateLibs)
 // 模板选项切换
 // 模板选项切换
@@ -97,7 +74,7 @@ const handleTemplateItemChange = () => {
   }
   }
 
 
   // 编辑页面
   // 编辑页面
-  libs.value = pageLibs
+  libs.value = PAGE_LIBS
   currentFormData.value = formData.value!.pages.find(
   currentFormData.value = formData.value!.pages.find(
     (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
     (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
   )
   )