修改参数处理

src/components/base/drag/index.vue

@@ -1,7 +1,7 @@
 <template>
     <VueDraggable v-model="from" :animation="500" target=".sort-target" handle=".icon-drag" :scroll="true" :on-sort="on_sort">
         <TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col gap-x-20">
-            <li v-for="(item, index) in from" :key="index" :class="[`flex-row re gap-16 ${ className }`,  ['nav-group', 'tabs-magic'].includes(props.modelType) && modelIndex === index ? 'model-type-index-select' : '']" @click="on_click(item, index)">
+            <li v-for="(item, index) in from" :key="index" :class="[`flex-row re gap-16 ${ className }`,  ['nav-group', 'tabs-magic', 'tabs'].includes(props.modelType) && modelIndex === index ? 'model-type-index-select' : '']" @click="on_click(item, index)">
                 <div class="flex-1 flex-row gap-16">
                     <icon name="drag" size="16" class="cursor-move" />
                     <slot :row="item" :index="index" />

src/components/model-tabs-carousel/index.vue

@@ -79,6 +79,8 @@ watch(
         // 处理数据
         new_data.content.tabs_list = [home_data, ...new_data.content.tabs_list];
         tabs_list.value = new_data;
+        // 当前选中的内容
+        tabs_active_index.value = new_data.content.tabs_active_index;
     },
     { immediate: true, deep: true }
 );

src/components/model-tabs/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div :style="style">
         <div :style="style_img_container">
-            <tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
+            <tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
         </div>
     </div>
 </template>
@@ -20,12 +20,15 @@ const props = defineProps({
 const tabs_list = ref(props.value);
 // 打开滑动固定开关之后，显示的样式
 const tabs_sliding_fixed_bg = ref('');
+const tabs_active_index = ref(0);
 watch(props.value, (val) => {
     let new_data = cloneDeep(val);
     const { home_data } = new_data.content;
     new_data.content.tabs_list = [home_data, ...new_data.content.tabs_list];
     tabs_list.value = new_data;
     tabs_sliding_fixed_bg.value = gradient_computer(props.value.style.common_style);
+    // 当前选中的内容
+    tabs_active_index.value = new_data.content.tabs_active_index;
 }, { immediate: true, deep: true });
 
 const style = computed(() => common_styles_computer(props.value.style.common_style));

src/components/model-tabs/model-tabs-content.vue

@@ -46,7 +46,7 @@
             <card-container>
                 <div class="mb-12">选项卡设置</div>
                 <div class="flex-col gap-x-20">
-                    <div class="card-background box-shadow-sm ptb-25 flex-row gap-16 re align-c">
+                    <div :class="`card-background box-shadow-sm ptb-25 flex-row gap-16 re align-c ${ form.tabs_active_index == 0 ? 'model-type-index-select' : ''}`" @click="tabs_list_click('home', 0)">
                         <el-icon class="iconfont icon-jinzhi size-16 cursor-move" />
                         <div class="flex-col gap-10 w">
                             <el-form-item label="显示类型" class="w mb-0">
@@ -66,7 +66,7 @@
                             <sliding-fixed v-model="form.home_data.is_sliding_fixed" @sliding_fixed_change="sliding_fixed_change($event, 0, 'home_data')"></sliding-fixed>
                         </div>
                     </div>
-                    <drag :data="form.tabs_list" type="card" :space-col="25" @remove="remove" @on-sort="on_sort">
+                    <drag :data="form.tabs_list" type="card" model-type="tabs" :model-index="form.tabs_active_index - 1" :space-col="25" @click="tabs_list_click" @remove="remove" @on-sort="on_sort">
                         <template #default="{ row, index }">
                             <div class="flex-col align-c jc-s gap-20 flex-1 w">
                                 <el-form-item label="数据类型" class="w mb-0">
@@ -160,10 +160,24 @@ const add = () => {
         micro_page_list: {},
         category_list: {},
     });
+    form.value.tabs_active_index = form.value.tabs_list.length;
 };
 const remove = (index: number) => {
     form.value.tabs_list.splice(index, 1);
+    if (form.value.tabs_list.length > index) {
+        form.value.tabs_active_index = index + 1;
+    } else {
+        form.value.tabs_active_index = index;
+    }
 };
+// 选项卡点击事件
+const tabs_list_click = (item: any, index: number) => { 
+    if (item == 'home') {
+        form.value.tabs_active_index = index;
+    } else {
+        form.value.tabs_active_index = index + 1;
+    }
+}
 // 拖拽更新之后，更新数据
 const on_sort = (new_list: nav_group[]) => {
     form.value.tabs_list = new_list;

src/config/const/tabs-carousel.ts

@@ -39,6 +39,8 @@ interface defaultTabs {
         tabs_adorn_icon: string;
         tabs_adorn_img: uploadList[];
         tabs_top_up: string;
+        // 选项卡索引
+        tabs_active_index: number;
         is_tabs_safe_distance: string;
         home_data: tabs_page;
         tabs_list: tabs_page[];
@@ -147,6 +149,8 @@ const defaultTabs: defaultTabs = {
         tabs_top_up: '0',
         // 是否支持安全距离
         is_tabs_safe_distance: '0',
+        // 选项卡索引
+        tabs_active_index: 0,
         // 选项卡数据
         home_data: { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
         tabs_list: [

src/config/const/tabs.ts

@@ -24,6 +24,7 @@ interface defaultTabs {
         tabs_adorn_icon: string;
         tabs_adorn_img: uploadList[];
         tabs_top_up: string;
+        tabs_active_index: number;
         home_data: tabs_page;
         tabs_list: tabs_page[];
     };
@@ -69,6 +70,7 @@ const defaultTabs: defaultTabs = {
         tabs_adorn_icon: 'checked-smooth',
         tabs_adorn_img: [],
         tabs_top_up: '0',
+        tabs_active_index: 0,
         home_data: { id: get_math(), tabs_type: '0',  tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
         tabs_list: [
             { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },

src/views/layout/components/main/index.vue

@@ -87,9 +87,27 @@
                         <div class="model-wall-content" :style="`padding-top:${top_padding}px;padding-bottom:${bottom_navigation_show ? footer_nav_counter_store.padding_footer : 0}px;`">
                             <div-content :diy-data="tabs_data" :show-model-border="show_model_border" :is-tabs="true" :main-content-style="main_content_style" :outer-container-padding="outer_container_padding" @on_choose="set_tabs_event(true)" @del="del"></div-content>
                             <div v-if="tabs_data.length > 0" class="seat"></div>
-                            <VueDraggable v-model="diy_data" :animation="500" :touch-start-threshold="2" group="people" class="drag-area re" ghost-class="ghost" :on-sort="on_sort" :on-start="on_start" :on-end="on_end">
-                                <div-content :diy-data="diy_data" :show-model-border="show_model_border" :main-content-style="main_content_style" :outer-container-padding="outer_container_padding" @on_choose="on_choose" @del="del" @copy="copy" @move-up="moveUp" @move-down="moveDown"></div-content>
-                            </VueDraggable>
+                            <template v-if="(tabs_data.length > 0 && tabs_data[0].com_data.content.tabs_active_index == 0) || (tabs_data.length == 0)">
+                                <VueDraggable v-model="diy_data" :animation="500" :touch-start-threshold="2" group="people" class="drag-area re" ghost-class="ghost" :on-sort="on_sort" :on-start="on_start" :on-end="on_end">
+                                    <div-content :diy-data="diy_data" :show-model-border="show_model_border" :main-content-style="main_content_style" :outer-container-padding="outer_container_padding" @on_choose="on_choose" @del="del" @copy="copy" @move-up="moveUp" @move-down="moveDown"></div-content>
+                                </VueDraggable>
+                            </template>
+                            <template v-else>
+                                <div v-if="tabs_data.length > 0" class="tabs-list-content w h flex-col align-c jc-c gap-10">
+                                    <div class="size-16">{{ tabs_data_name.data_type == '0' ? 'DIY页面' : '商品分类' }}
+                                        <template v-if="tabs_data_name.data_type == '0' && !isEmpty(tabs_data_name.micro_page_list)">
+                                            <span class="size-16">({{ tabs_data_name.micro_page_list.name }})</span>
+                                        </template>
+                                        <template v-else-if="tabs_data_name.data_type == '1' && !isEmpty(tabs_data_name.classify)">
+                                            <span class="size-16">({{ tabs_data_name.classify.name }})</span>
+                                        </template>
+                                        <template v-else>
+                                            <span class="size-16 cr-6">(未选择)</span>
+                                        </template>
+                                    </div>
+                                    <div class="size-12 cr-6 re">请在预览里边查看实际效果</div>
+                                </div>
+                            </template>
                         </div>
                     </div>
                     <!-- <div class="seat"></div> -->
@@ -129,6 +147,16 @@ const props = defineProps({
         default: () => {},
     },
 });
+// 获取tabs数据
+const tabs_data_name = computed(() => {
+    const data = tabs_data.value;
+    if (data.length > 0) {
+        const tabs_active_index = data[0].com_data.content.tabs_active_index;
+        const tabs_list = data[0].com_data.content.tabs_list;
+        return tabs_list[tabs_active_index - 1];
+    }
+    return '';
+});
 // 时间处理
 const new_date_value = computed(() => {
     return (item: any) => {
@@ -611,4 +639,9 @@ const footer_nav_event = () => {
     top: -1.4rem;
     left: -0.6rem;
 }
+// 列表
+.tabs-list-content {
+    z-index: 2;
+    height: 20rem;
+}
 </style>