From e5b2600cc1532a228666cd7a4e31f0303d42752d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 6 Nov 2024 16:52:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=95=B0=E6=8D=AE=E9=AD=94?=
 =?UTF-8?q?=E6=96=B9=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{ => carousel}/magic-carousel.vue         |  0
 .../{ => carousel}/product-list-show.vue      |  0
 .../tabs-content.vue                          |  7 ++-
 .../{ => magic-cube-settings}/tabs-styles.vue |  0
 .../components/video/index.vue                | 52 +++++++++++++++++++
 src/components/model-data-magic/index.vue     | 10 ++++
 .../model-data-magic-content.vue              |  5 +-
 7 files changed, 72 insertions(+), 2 deletions(-)
 rename src/components/model-data-magic/components/{ => carousel}/magic-carousel.vue (100%)
 rename src/components/model-data-magic/components/{ => carousel}/product-list-show.vue (100%)
 rename src/components/model-data-magic/components/{ => magic-cube-settings}/tabs-content.vue (96%)
 rename src/components/model-data-magic/components/{ => magic-cube-settings}/tabs-styles.vue (100%)
 create mode 100644 src/components/model-data-magic/components/video/index.vue

diff --git a/src/components/model-data-magic/components/magic-carousel.vue b/src/components/model-data-magic/components/carousel/magic-carousel.vue
similarity index 100%
rename from src/components/model-data-magic/components/magic-carousel.vue
rename to src/components/model-data-magic/components/carousel/magic-carousel.vue
diff --git a/src/components/model-data-magic/components/product-list-show.vue b/src/components/model-data-magic/components/carousel/product-list-show.vue
similarity index 100%
rename from src/components/model-data-magic/components/product-list-show.vue
rename to src/components/model-data-magic/components/carousel/product-list-show.vue
diff --git a/src/components/model-data-magic/components/tabs-content.vue b/src/components/model-data-magic/components/magic-cube-settings/tabs-content.vue
similarity index 96%
rename from src/components/model-data-magic/components/tabs-content.vue
rename to src/components/model-data-magic/components/magic-cube-settings/tabs-content.vue
index 305ac0f8..895de2ba 100644
--- a/src/components/model-data-magic/components/tabs-content.vue
+++ b/src/components/model-data-magic/components/magic-cube-settings/tabs-content.vue
@@ -95,7 +95,12 @@
         <div class="bg-f5 divider-line" />
         <card-container>
             <div class="mb-12">视频设置</div>
-
+            <el-form-item label="上传视频">
+                <upload v-model="form.video" :limit="1" type="video"></upload>
+            </el-form-item>
+            <el-form-item label="视频封面">
+                <upload v-model="form.video_img" :limit="1"></upload>
+            </el-form-item>
         </card-container>
     </template>
 </template>
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
similarity index 100%
rename from src/components/model-data-magic/components/tabs-styles.vue
rename to src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
diff --git a/src/components/model-data-magic/components/video/index.vue b/src/components/model-data-magic/components/video/index.vue
new file mode 100644
index 00000000..09c89631
--- /dev/null
+++ b/src/components/model-data-magic/components/video/index.vue
@@ -0,0 +1,52 @@
+<template>
+    <div class="w h" :style="style_container">
+        <div class="re w h oh">
+            <template v-if="video && !video_img">
+                <video :src="video" class="w h"></video>
+            </template>
+            <template v-else>
+                <image-empty v-model="video_img" error-img-style="width:60px;height:60px;"></image-empty>
+            </template>
+            <img :src="video_src" class="middle box-shadow-sm round" width="50" height="50" />
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { commonStore } from '@/store';
+import { padding_computer } from '@/utils';
+const common_store = commonStore();
+/**
+ * @description: 视频 （渲染）
+ * @param value{Object} 传过来的数据，用于数据渲染
+ */
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    dataStyle: {
+        type: Object,
+        default: () => ({}),
+    }
+});
+
+const video_src = ref(common_store.common.config.attachment_host + `/static/diy/images/components/model-video/video.png`);
+const video_img = computed(() => {
+    if (props.value.video_img.length > 0) {
+        return props.value.video_img[0]?.url;
+    } else {
+        return '';
+    }
+});
+const video = computed(() => {
+    if (props.value.video.length > 0) {
+        return props.value.video[0]?.url;
+    } else {
+        return '';
+    }
+});
+// 公共样式
+const style_container = computed(() => padding_computer(props.dataStyle.chunk_padding));
+</script>
+<style lang="scss" scoped>
+</style>
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 97395127..ccd4731f 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -30,6 +30,12 @@
                                         <magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
                                     </div>
                                 </template>
+                                <template v-else-if="item.data_content.data_type == 'custom'">
+                                    <customIndex :value="item" :magic-scale="magic_scale" :data-spacing="new_style.image_spacing"></customIndex>
+                                </template>
+                                <template v-else>
+                                    <videoIndex :value="item.data_content" :data-style="item.data_style"></videoIndex>
+                                </template>
                                 <div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${item.data_style?.indicator_bottom}px;`">
                                     <template v-if="item.data_style.indicator_style == 'num'">
                                         <div :style="item.data_style.indicator_styles" class="dot-item">
@@ -73,6 +79,9 @@
                             <template v-else-if="item.data_content.data_type == 'custom'">
                                 <customIndex :value="item" :magic-scale="magic_scale" :data-spacing="new_style.image_spacing"></customIndex>
                             </template>
+                            <template v-else>
+                                <videoIndex :value="item.data_content" :data-style="item.data_style"></videoIndex>
+                            </template>
                             <div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${item.data_style?.indicator_bottom}px;`">
                                 <template v-if="item.data_style.indicator_style == 'num'">
                                     <div :style="item.data_style.indicator_styles" class="dot-item">
@@ -92,6 +101,7 @@
 </template>
 <script setup lang="ts">
 import customIndex from './components/custom/index.vue';
+import videoIndex from './components/video/index.vue';
 import { background_computer, common_styles_computer, get_math, gradient_computer, radius_computer, padding_computer, common_img_computer, is_number, percentage_count } from '@/utils';
 import { isEmpty, cloneDeep } from 'lodash';
 const props = defineProps({
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
index 20ec75d2..9a19d67d 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -200,7 +200,10 @@ const data_content = {
     // 数据源
     data_source:'',
     // 自定义内容列表
-    custom_list: []
+    custom_list: [],
+    //视频信息
+    video: [],
+    video_img: [],
 }
 
 // 不同风格的数据