营销：增加商城装修组件【视频播放】

src/components/DiyEditor/components/ComponentContainerProperty.vue

@@ -26,7 +26,7 @@
                 :label="data.label"
                 :prop="data.prop"
                 :label-width="node.level === 1 ? '80px' : '62px'"
-                class="tree-form-item w-full m-b-0!"
+                class="w-full m-b-0!"
               >
                 <el-slider
                   v-model="formData[data.prop]"
@@ -40,6 +40,7 @@
               </el-form-item>
             </template>
           </el-tree>
+          <slot name="style" :formData="formData"></slot>
         </el-form>
       </el-card>
     </el-tab-pane>
@@ -153,12 +154,10 @@ const handleSliderChange = (prop: string) => {
 </script>
 
 <style scoped lang="scss">
-.tree-form-item {
-  :deep(.el-slider__runway) {
-    margin-right: 16px;
-  }
-  :deep(.el-input-number) {
-    width: 50px;
-  }
+:deep(.el-slider__runway) {
+  margin-right: 16px;
+}
+:deep(.el-input-number) {
+  width: 50px;
 }
 </style>

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

@@ -0,0 +1,37 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 视频播放属性 */
+export interface VideoPlayerProperty {
+  // 视频链接
+  videoUrl: string
+  // 封面链接
+  posterUrl: string
+  // 是否自动播放
+  autoplay: boolean
+  // 组件样式
+  style: VideoPlayerStyle
+}
+
+// 视频播放样式
+export interface VideoPlayerStyle extends ComponentStyle {
+  // 视频高度
+  height: number
+}
+
+// 定义组件
+export const component = {
+  id: 'VideoPlayer',
+  name: '视频播放',
+  icon: 'ep:video-play',
+  property: {
+    videoUrl: '',
+    posterUrl: '',
+    autoplay: false,
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+      height: 300
+    } as ComponentStyle
+  }
+} as DiyComponent<VideoPlayerProperty>

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

@@ -0,0 +1,30 @@
+<template>
+  <div class="w-full" :style="{ height: `${property.style.height}px` }">
+    <el-image class="w-full w-full" :src="property.posterUrl" v-if="property.posterUrl" />
+    <video
+      v-else
+      class="w-full w-full"
+      :src="property.videoUrl"
+      :poster="property.posterUrl"
+      :autoplay="property.autoplay"
+      controls
+    ></video>
+  </div>
+</template>
+<script setup lang="ts">
+import { VideoPlayerProperty } from './config'
+
+/** 视频播放 */
+defineOptions({ name: 'VideoPlayer' })
+
+defineProps<{ property: VideoPlayerProperty }>()
+</script>
+
+<style scoped lang="scss">
+/* 图片 */
+img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+</style>

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

@@ -0,0 +1,55 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <template #style="{ formData }">
+      <el-form-item label="高度" prop="height">
+        <el-slider
+          v-model="formData.height"
+          :max="500"
+          :min="100"
+          show-input
+          input-size="small"
+          :show-input-controls="false"
+        />
+      </el-form-item>
+    </template>
+    <el-form label-width="80px" :model="formData">
+      <el-form-item label="上传视频" prop="videoUrl">
+        <UploadFile
+          v-model="formData.videoUrl"
+          :file-type="['mp4']"
+          :limit="1"
+          :file-size="100"
+          class="min-w-80px"
+        />
+      </el-form-item>
+      <el-form-item label="上传封面" prop="posterUrl">
+        <UploadImg
+          v-model="formData.posterUrl"
+          draggable="false"
+          height="80px"
+          width="100%"
+          class="min-w-80px"
+        >
+          <template #tip> 建议宽度750 </template>
+        </UploadImg>
+      </el-form-item>
+      <el-form-item label="自动播放" prop="autoplay">
+        <el-switch v-model="formData.autoplay" />
+      </el-form-item>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { VideoPlayerProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+
+// 视频播放属性面板
+defineOptions({ name: 'VideoPlayerProperty' })
+
+const props = defineProps<{ modelValue: VideoPlayerProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+</script>
+
+<style scoped lang="scss"></style>

src/components/DiyEditor/util.ts

@@ -109,7 +109,7 @@ export const PAGE_LIBS = [
       'TitleBar'
     ]
   },
-  { name: '图文组件', extended: true, components: ['ImageBar', 'Carousel'] },
+  { name: '图文组件', extended: true, components: ['ImageBar', 'Carousel', 'VideoPlayer'] },
   { name: '商品组件', extended: true, components: ['ProductCard'] },
   {
     name: '会员组件',