组合搭配内容修改

src/components/model-binding/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="oh" :style="style_container">
         <div :style="style_img_container">
-            <div class="">
+            <div v-for="(match_item, match_index) in list" :key="match_index">
                 <!-- 商品信息区域 -->
                 <div :class="outer_class" :style="onter_style">
                     <template v-if="!['3'].includes(theme)">

src/components/model-binding/model-binding-styles.vue

@@ -53,6 +53,18 @@
                         <shadow-config v-model="form"></shadow-config>
                     </card-container>
                     <div class="divider-line"></div>
+                    <template v-if="new_tabs.length > 0">
+                        <div class="divider-line"></div>
+                        <card-container>
+                            <div class="mb-12">图标设置</div>
+                            <el-tabs v-model="tabs_icon_name" class="content-tabs">
+                                <el-tab-pane v-for="(tab, index) in new_tabs" :key="index" :label="tab.label" :name="tab.name">
+                                    <img-or-icon-or-text-style :key="index" v-model:value="form[`${ tab.name }_style`]" :type="data[`${ tab.name }_type`]" :is-icon="data[`${ tab.name }_type`] == 'img-icon' && !isEmpty(data[`${ tab.name }_icon`])" />
+                                </el-tab-pane>
+                            </el-tabs>
+                        </card-container>
+                    </template>
+                    <div class="divider-line"></div>
                     <common-styles :value="form.common_style" @update:value="common_style_update" />
                 </el-tab-pane>
                 <el-tab-pane label="商品样式" name="goods">
@@ -96,7 +108,21 @@ const state = reactive({
 // 如果需要解构，确保使用toRefs
 const { form, data } = toRefs(state);
 const tabs_name = ref('data');
-const theme = computed(() => data.value.theme);
+// 动态生成 tab 配置
+const tabs = [
+    { label: "详情按钮", name: "details" },
+    { label: "数据优惠", name: "data_discounts" },
+    { label: "商品优惠", name: "goods_discounts" },
+];
+// 图标数组处理一下，确保打开的都能看到
+type tabs_type = { name: string; label: string;};
+const new_tabs = ref<tabs_type[]>([]);
+const tabs_icon_name = ref<string>('details');
+onMounted(() => {
+    // 判断有哪些打开的图标
+    new_tabs.value = tabs.filter(item => data.value[`is_${ item.name }_show`] === '1');
+    tabs_icon_name.value = new_tabs.value[0].name || '';
+});
 // 多商户背景渐变设置
 const mult_color_picker_event = (arry: color_list[], type: number) => {
     form.value.data_color_list = arry;

src/config/const/binding.ts

@@ -54,13 +54,13 @@ interface defaultRealstore {
         content_top: object;
         host_graph_theme: string;
         is_host_graph_show: string;
-        list_show_list: string[];
-        is_default_show_shop: string;
         theme: string;
         carousel_col: number;
         goods_save_price: string;
         goods_save_price_row: string;
         data_list: string[];
+        is_goods_show: string[];
+        is_default_show_goods: string;
         is_details_show: string;
         details_type: string;
         details_img: uploadList[];
@@ -161,13 +161,13 @@ const defaultRealstore: defaultRealstore = {
         },
         host_graph_theme: '0',
         is_host_graph_show: '1',
-        list_show_list: ['title', 'goods_img', 'price', 'save_price'],
-        is_default_show_shop: '1',
         theme: '0',
         carousel_col: 1,
         goods_save_price: '1',
         goods_save_price_row: '1',
         data_list: [],
+        is_goods_show: ['title', 'goods_img', 'price', 'save_price'],
+        is_default_show_goods: '1',
         is_details_show: '1',
         details_type: 'img-icon',
         details_img: [],