修改数据魔方的商品显示

src/components/model-data-magic/components/magic-carousel.vue

@@ -5,7 +5,7 @@
                 <image-empty v-model="item1.carousel_img[0]" :style="contentImgRadius"></image-empty>
             </template>
             <template v-else>
-                <product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :content-img-radius="contentImgRadius"></product-list-show>
+                <product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="contentImgRadius"></product-list-show>
             </template>
         </el-carousel-item>
     </el-carousel>
@@ -17,18 +17,19 @@ interface Props {
     contentImgRadius: string;
     type: string;
     actived: number;
+    goodStyle?: any;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    goodStyle: {},
+});
+
+const form = computed(() => props.value);
 
-const form = ref(props.value);
 const emits = defineEmits(['carousel_change']);
 const carousel_change = (index: number) => {
     emits('carousel_change', index);
 };
-watchEffect(() => {
-    form.value = props.value;
-});
 </script>
 
 <style lang="scss" scoped>

src/components/model-data-magic/components/product-list-show.vue

@@ -10,8 +10,8 @@
                         <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
                     </template>
                     <div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-10">
-                        <div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title">{{ item.title }}</div>
-                        <div v-if="isShow.includes('price')" class="identifying">
+                        <div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title" :style="goodStyle.goods_title_style">{{ item.title }}</div>
+                        <div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
                             <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
                             <template v-if="isShow.includes('price_unit')">
                                 <span class="num">{{ item.show_price_unit }}</span>
@@ -29,14 +29,14 @@
                         <template v-else>
                             <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
                         </template>
-                        <div v-if="isShow.includes('price')" class="price-suspension text-line-1">
+                        <div v-if="isShow.includes('price')" class="price-suspension text-line-1" :style="goodStyle.goods_price_style">
                             {{ item.show_price_symbol }}{{ item.min_price }}
                             <template v-if="isShow.includes('price_unit')">
                                 {{ item.show_price_unit }}
                             </template>
                         </div>
                     </div>
-                    <div v-if="isShow.includes('title')" class="text-line-1 size-14 shop-title tl w" style="overflow: inherit;">{{ item.title }}</div>
+                    <div v-if="isShow.includes('title')" class="text-line-1 size-14 shop-title tl w" style="overflow: inherit;" :style="goodStyle.goods_title_style">{{ item.title }}</div>
                 </div>
             </template>
             <template v-else>
@@ -48,8 +48,8 @@
                         <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
                     </template>
                     <div v-if="!isEmpty(isShow)" class="flex-col w tl gap-10" :style="`${ padding_computer(props.chunkPadding) }`">
-                        <div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title">{{ item.title }}</div>
-                        <div v-if="isShow.includes('price')" class="identifying">
+                        <div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title" :style="goodStyle.goods_title_style">{{ item.title }}</div>
+                        <div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
                             <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
                             <template v-if="isShow.includes('price_unit')">
                                 <span class="num">{{ item.show_price_unit }}</span>
@@ -71,8 +71,8 @@
                         <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
                     </template>
                     <div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-20">
-                        <div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title">{{ item.title }}</div>
-                        <div v-if="isShow.includes('price')" class="identifying">
+                        <div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title" :style="goodStyle.goods_title_style">{{ item.title }}</div>
+                        <div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
                             <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
                             <template v-if="isShow.includes('price_unit')">
                                 <span class="num">{{ item.show_price_unit }}</span>
@@ -98,6 +98,7 @@ interface Props {
     actived: number;
     isShow: Array<string>;
     chunkPadding: paddingStyle;
+    goodStyle: any;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -105,11 +106,8 @@ const props = withDefaults(defineProps<Props>(), {
     outerflex: 'row',
     flex: 'row',
 });
-const split_list = ref(props.value);
 
-watchEffect(() => {
-    split_list.value = props.value;
-})
+const split_list = computed(() => props.value || {});
 </script>
 
 <style lang="scss" scoped>
@@ -123,13 +121,10 @@ watchEffect(() => {
         width: 4rem !important;
     }
 }
-.identifying {
-    font-size: 1.4rem;
-    color: #EA3323;
-    .num {
-        font-size: 0.9rem;
-    }
+.identifying .num {
+    font-size: 0.9rem;
 }
+
 .price-suspension {
     width: calc(100% - 0.8rem);
     margin: 0 0.4rem;
@@ -148,7 +143,4 @@ watchEffect(() => {
 .half-width {
     width: 50%;
 }
-.shop-title {
-    line-height: 2rem;
-}
 </style>

src/components/model-data-magic/components/tabs-styles.vue

@@ -40,13 +40,13 @@
         </template>
     </card-container>
     <div class="bg-f5 divider-line" />
-    <card-container>
+    <card-container v-if="tabs_content.data_type === 'goods'">
         <div class="mb-12">商品样式</div>
         <el-form-item label="商品名称">
-            <color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
+            <color-text-size-group v-model:color="form.goods_title_color" v-model:typeface="form.goods_title_typeface" v-model:size="form.goods_title_size" default-color="#000000"></color-text-size-group>
         </el-form-item>
         <el-form-item label="商品价格">
-            <color-text-size-group v-model:color="form.shop_price_color" v-model:typeface="form.shop_price_typeface" v-model:size="form.shop_price_size" default-color="#000000"></color-text-size-group>
+            <color-text-size-group v-model:color="form.goods_price_color" v-model:typeface="form.goods_price_typeface" v-model:size="form.goods_price_size" default-color="#000000"></color-text-size-group>
         </el-form-item>
     </card-container>
     <div class="bg-f5 divider-line" />

src/components/model-data-magic/index.vue

@@ -6,7 +6,7 @@
                 <template v-if="form.style_actived == 7">
                     <div class="flex-row align-c jc-c style-size flex-wrap">
                         <div v-for="(item, index) in data_magic_list" :key="index" :style="`${ item.data_style.background_style } ${ content_radius }`" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
-                            <div class="w h" :style="`${ item.data_style.background_style }`">
+                            <div class="w h" :style="`${ item.data_style.background_img_style }`">
                                 <template v-if="item.data_content.data_type == 'goods'">
                                     <div class="w h flex-col gap-20" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`">
                                         <div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" class="flex-col gap-5 tl">
@@ -14,7 +14,7 @@
                                             <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                         </div>
                                         <div class="w h">
-                                            <magic-carousel :value="item" :content-img-radius="content_img_radius" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
+                                            <magic-carousel :value="item" :good-style="item.data_style" :content-img-radius="content_img_radius" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
                                         </div>
                                     </div>
                                 </template>
@@ -37,7 +37,7 @@
                 </template>
                 <template v-else>
                     <div v-for="(item, index) in data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${ selected_style(item) } ${ item.data_style.background_style } ${ content_radius }`">
-                        <div class="w h" :style="`${ item.data_style.background_style }`">
+                        <div class="w h" :style="`${ item.data_style.background_img_style }`">
                             <template v-if="item.data_content.data_type == 'goods'">
                                 <div :class="[spacing_processing(index) ? 'gap-20 w h flex-col' : 'gap-10 w h flex-col']" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
                                     <div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" class="flex-col gap-5 tl">
@@ -45,7 +45,7 @@
                                         <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                     </div>
                                     <div class="w h">
-                                        <magic-carousel :value="item" :content-img-radius="content_img_radius" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
+                                        <magic-carousel :value="item" :good-style="item.data_style" :content-img-radius="content_img_radius" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
                                     </div>
                                 </div>
                             </template>
@@ -254,6 +254,9 @@ watch(props.value.content, (val) => {
         data_style.indicator_styles = indicator_style(data_style);
         data_style.background_style = gradient_computer(data_style);
         data_style.background_img_style = background_computer(data_style);
+        // 商品名称和价格样式
+        data_style.goods_title_style = goods_trends_config(item.data_style, 'title');
+        data_style.goods_price_style = goods_trends_config(item.data_style, 'price');
 
         const { is_roll, rotation_direction, interval_time } = data_style;
         const { goods_list, images_list } = data_content;
@@ -296,6 +299,9 @@ const carousel_change = (index: number, key: number) => {
     }
 }
 // 根据传递的参数，从对象中取值
+const goods_trends_config = (style: any, key: string) => {
+    return text_style(style[`goods_${key}_typeface`], style[`goods_${key}_size`], style[`goods_${key}_color`]);
+}
 const trends_config = (style: any, key: string) => {
     return text_style(style[`${key}_typeface`], style[`${key}_size`], style[`${key}_color`]);
 }

src/components/model-data-magic/model-data-magic-content.vue

@@ -70,6 +70,12 @@ const data_style = {
     subtitle_color: '#FF852A',
     subtitle_typeface: '400',
     subtitle_size: 14,
+    goods_title_typeface: '500',
+    goods_title_size: 14,    
+    goods_title_color: "#333333",
+    goods_price_typeface: '500',
+    goods_price_size: 18,
+    goods_price_color: "#EA3323;",
     chunk_padding: {
         padding: 0,
         padding_top: 20, 

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

@@ -181,16 +181,19 @@ watchEffect(() => {
 
 // 已选组件逻辑处理
 const drawer_selected = ref(false);
+const is_show_drawer = ref(true);
 watchEffect(() => {
-    if (diy_data.value.length > 0 || tabs_data.value.length > 0) {
+    if ((diy_data.value.length > 0 || tabs_data.value.length > 0) && is_show_drawer.value) {
         drawer_selected.value = true;
     } else {
         drawer_selected.value = false;
     }
 });
 const toggle_drawer = () => {
+    is_show_drawer.value = !is_show_drawer.value;
     drawer_selected.value = !drawer_selected.value;
 };
+
 // 父组件调用的方法
 const emits = defineEmits(['rightUpdate', 'import', 'export', 'clear']);
 const activeNames = reactive(['base', 'plugins', 'tool']);