数据数据魔方显示逻辑

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>

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>

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({

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: [],
 }
 
 // 不同风格的数据