Merge remote-tracking branch 'origin/dev-yxl' into dev-sws

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

@@ -0,0 +1,36 @@
+<template>
+    <el-carousel :key="form.data_style.carouselKey" indicator-position="none" :interval="form.data_style.interval_time * 1000" arrow="never" :direction="form.data_style.rotation_direction" :autoplay="form.data_style.is_roll" @change="carousel_change">
+        <el-carousel-item v-for="(item1, index1) in form.data_content.list" :key="index1">
+            <template v-if="props.type === 'img'">
+                <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>
+            </template>
+        </el-carousel-item>
+    </el-carousel>
+</template>
+
+<script setup lang="ts">
+interface Props {
+    value: any;
+    contentImgRadius: string;
+    type: string;
+    actived: number;
+}
+
+const props = defineProps<Props>();
+
+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>
+
+</style>

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

@@ -1,30 +1,63 @@
 <template>
+    <template v-if="props.outerflex == 'row'">
+        <div class="flex-row gap-10 align-c w h">
             <template v-if="props.flex === 'row'">
-        <div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 align-c">
+                <div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 half-width h">
                     <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
-            <div class="flex-col gap-10">
+                    <div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-10">
-                <div>标题</div>
+                        <div v-if="isShow.includes('0')" class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
-                <div>价格</div>
+                        <div v-if="isShow.includes('1')" class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
                     </div>
                 </div>
             </template>
-    <template v-else>
+            <template v-else-if="actived != 7 || props.num !== 1">
-        <div v-for="(item2, index2) in split_list" :key="index2" class="flex-col gap-10 align-c">
+                <div v-for="(item2, index2) in split_list" :key="index2" :class="['flex-col gap-10 h', { 'half-width': props.num !== 1, 'w': props.num == 1 }]">
+                    <div class="w h re">
                         <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
-            <div class="flex-col gap-10">
+                        <div v-if="isShow.includes('1')" class="price-suspension">¥{{ '51' }}</div>
-                <div>标题</div>
-                <div>价格</div>
                     </div>
+                    <div v-if="isShow.includes('0')" class="text-line-1 size-14 tl w" style="overflow: inherit;">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
+                </div>
+            </template>
+            <template v-else>
+                <div v-for="(item2, index2) in split_list" :key="index2" class="flex-col w h">
+                    <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
+                    <div v-if="!isEmpty(isShow)" class="flex-col w tl gap-10" :style="`${ padding_computer(props.chunkPadding) }`">
+                        <div v-if="isShow.includes('0')" class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
+                        <div v-if="isShow.includes('1')" class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </template>
+    <template v-else>
+        <div class="flex-col gap-20 align-c w h">
+            <template v-if="props.flex === 'row'">
+                <div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 align-c w h">
+                    <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
+                    <div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-10">
+                        <div v-if="isShow.includes('0')" class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
+                        <div v-if="isShow.includes('1')" class="identifying"><span class="num">￥</span><span>{{'51' }}</span></div>
+                    </div>
+                </div>
+            </template>
         </div>
     </template>
 </template>
 
 <script setup lang="ts">
+import { isEmpty } from 'lodash';
+import { padding_computer } from '@/utils';
+
 interface Props {
     value: Array<any>;
     outerflex: string;
     flex: string;
     contentImgRadius: string;
+    num: number;
+    actived: number;
+    isShow: Array<string>;
+    chunkPadding: internalStyle;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -40,5 +73,36 @@ watchEffect(() => {
 </script>
 
 <style lang="scss" scoped>
-
+:deep(.el-image) {
+    height: 100%;
+    width: 100%;
+    .el-image__inner {
+        object-fit: cover;
+    }
+    .image-slot img {
+        width: 4rem !important;
+    }
+}
+.identifying {
+    font-size: 2rem;
+    color: #EA3323;
+    .num {
+        font-size: 0.9rem;
+    }
+}
+.price-suspension {
+    width: calc(100% - 0.8rem);
+    margin: 0 0.4rem;
+    background: #fff;
+    font-size: 1.2rem;
+    line-height: 1.7rem;
+    color: #EA3323;
+    text-align: center;
+    position: absolute;
+    bottom: 0.4rem;
+    border-radius: 0.8rem;
+}
+.half-width {
+    width: 50%;
+}
 </style>

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

@@ -50,6 +50,11 @@
             </template>
         </drag>
         <el-button class="mtb-20 w" @click="product_list_add">+添加</el-button>
+        <el-form-item label="展示信息">
+            <el-checkbox-group v-model="form.is_show">
+                <el-checkbox v-for="item in list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
+            </el-checkbox-group>
+        </el-form-item>
     </card-container>
 </template>
 <script setup lang="ts">
@@ -66,6 +71,8 @@ const props = defineProps({
     }
 });
 
+const list_show_list = [{ name: '商品名称', value: '0' }, { name: '商品售价', value: '1' }]
+
 const form = ref(props.value);
 
 const img_add = () => {

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

@@ -33,7 +33,8 @@
         <el-form-item label="间隔时间">
             <slider v-model="form.interval_time" :max="100"></slider>
         </el-form-item>
-        <template v-if="tabs_content.data_type === 'commodity' && isShowTitle">
+        <template v-if="tabs_content.data_type === 'commodity'">
+            <template v-if="isShowTitle">
                 <el-form-item label="主标题">
                     <div class="flex-col gap-10 w">
                         <color-picker v-model="form.heading_color" default-color="#000000"></color-picker>
@@ -47,12 +48,17 @@
                     </div>
                 </el-form-item>
             </template>
+            <el-form-item label="内间距">
+                <padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
+            </el-form-item>
+        </template>
     </card-container>
     <card-container class="mb-8">
         <carousel-indicator :key="form.carouselKey" :value="form"></carousel-indicator>
     </card-container>
 </template>
 <script setup lang="ts">
+import { pick } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
@@ -75,6 +81,15 @@ const mult_color_picker_event = (arry: string[], type: number) => {
     form.value.color_list = arry;
     form.value.direction = type.toString();
 };
+const chunk_padding_change = (padding: any) => {
+    form.value.chunk_padding = Object.assign(form.value.chunk_padding, pick(padding, [
+        'padding', 
+        'padding_top', 
+        'padding_bottom', 
+        'padding_left', 
+        'padding_right'
+    ]));
+};
 
 watchEffect(() => {
     form.value = props.value;

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

@@ -4,30 +4,22 @@
             <!-- 风格9 -->
             <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 }`" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
+                    <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) }]">
                         <template v-if="item.data_content.data_type == 'commodity'">
-                            <div class="ptb-20 plr-15 w h">
+                            <div class="w h flex-col gap-20" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`">
-                                <div class="flex-col gap-5 tl">
+                                <div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" class="flex-col gap-5 tl">
                                     <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
                                     <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                 </div>
-                                <div class="mt-20 w h">
+                                <div class="w h">
-                                    <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
+                                    <magic-carousel :value="item" :content-img-radius="content_img_radius" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
-                                        <el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
-                                            <a>item1</a>
-                                        </el-carousel-item>
-                                    </el-carousel>
                                 </div>
                             </div>
                         </template>
                         <template v-else>
-                            <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
+                            <magic-carousel :value="item" :content-img-radius="content_img_radius" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
-                                <el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
-                                    <image-empty v-model="item1.carousel_img[0]" :style="content_img_radius"></image-empty>
-                                </el-carousel-item>
-                            </el-carousel>
                         </template>
-                        <div v-if="item.data_style.is_show" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
+                        <div v-if="item.data_style.is_show && 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">
                             <template v-if="item.data_style.indicator_style == 'num'">
                                 <div :style="item.data_style.indicator_styles" class="dot-item">
                                     <span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.product_list.length }}</span>
@@ -41,39 +33,22 @@
                 </div>
             </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 }`">
+                <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 }`">
                     <template v-if="item.data_content.data_type == 'commodity'">
-                        <div class="ptb-20 plr-15 w h flex-col gap-20">
+                        <div class="w h flex-col gap-20" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
-                            <div class="flex-col gap-5 tl">
+                            <div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" class="flex-col gap-5 tl">
                                 <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
                                 <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">
-                                <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
+                                <magic-carousel :value="item" :content-img-radius="content_img_radius" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
-                                    <el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
-                                        <template v-if="item.outerflex == 'row'">
-                                            <div class="flex-row gap-10 align-c">
-                                                <product-list-show :flex="item.flex" :value="item1.split_list" :content-img-radius="content_img_radius"></product-list-show>
-                                            </div>
-                                        </template>
-                                        <template v-else>
-                                            <div class="flex-col gap-20 align-c">
-                                                <product-list-show :flex="item.flex" :value="item1.split_list" :content-img-radius="content_img_radius"></product-list-show>
-                                            </div>
-                                        </template>
-                                    </el-carousel-item>
-                                </el-carousel>
                             </div>
                         </div>
                     </template>
                     <template v-else>
-                        <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
+                        <magic-carousel :value="item" :content-img-radius="content_img_radius" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
-                            <el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
-                                <image-empty v-model="item1.carousel_img[0]" :style="content_img_radius"></image-empty>
-                            </el-carousel-item>
-                        </el-carousel>
                     </template>
-                    <div v-if="item.data_style.is_show" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
+                    <div v-if="item.data_style.is_show && 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">
                         <template v-if="item.data_style.indicator_style == 'num'">
                             <div :style="item.data_style.indicator_styles" class="dot-item">
                                 <span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.product_list.length }}</span>
@@ -89,7 +64,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { background_computer, common_styles_computer, get_math, gradient_computer, percentage_count, radius_computer } from '@/utils';
+import { background_computer, common_styles_computer, get_math, gradient_computer, percentage_count, radius_computer, padding_computer } from '@/utils';
 import { isEmpty, cloneDeep } from 'lodash';
 const props = defineProps({
     value: {
@@ -106,13 +81,14 @@ const state = reactive({
 });
 // 如果需要解构，确保使用toRefs
 const { form, new_style } = toRefs(state);
-// const data_list = computed(() => form.value.data_magic_list);
 const outer_spacing = computed(() => new_style.value.image_spacing + 'px');
 const outer_sx = computed(() => -(new_style.value.image_spacing / 2) + 'px');
 // 图片间距设置
 const spacing = computed(() => new_style.value.image_spacing / 2 + 'px');
+// 内容圆角设置
+const content_radius = computed(() => radius_computer(new_style.value.data_radius));
 // 图片圆角设置
-const content_img_radius = computed(() => radius_computer(new_style.value));
+const content_img_radius = computed(() => radius_computer(new_style.value.img_radius));
 //#region 容器大小计算
 const div_width = ref(0);
 const container_size = computed(() => div_width.value + 'px');
@@ -165,7 +141,7 @@ const getSelectedLeft = (item: data_magic) => {
 };
 // 根据当前页面大小计算成百分比
 const selected_style = (item: data_magic) => {
-    return `width: calc(${percentage(getSelectedWidth(item))} - ${ outer_spacing.value } ); height: calc(${percentage(getSelectedHeight(item))} - ${ outer_spacing.value } ); top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
+    return `overflow: hidden;width: calc(${percentage(getSelectedWidth(item))} - ${ outer_spacing.value } ); height: calc(${percentage(getSelectedHeight(item))} - ${ outer_spacing.value } ); top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
 };
 // 计算成百分比
 const percentage = (num: number) => {
@@ -313,20 +289,17 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
 .style-size {
     height: 100%;
     width: 100%;
-    .three {
-        width: 33%;
-        height: 100%;
-        position: relative;
-    }
     .style9-top {
-        width: calc(50% - 0.2rem);
+        width: calc(50% - v-bind(outer_spacing));
-        height: 50%;
+        height: calc(50% - v-bind(outer_spacing));
         position: relative;
+        overflow: hidden;
     }
     .style9-bottom {
-        width: calc(33% - 0.1rem);
+        width: calc(33% - v-bind(outer_spacing));
-        height: 50%;
+        height: calc(50% - v-bind(outer_spacing));
         position: relative;
+        overflow: hidden;
     }
 }
 .dot-center {

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

@@ -33,10 +33,10 @@
             </card-container>
             <el-tabs v-model="tabs_name" class="content-tabs">
                 <el-tab-pane label="内容设置" name="content">
-                    <tabs-content :value="form.data_magic_list[selected_active].data_content" :isShowTitle="is_show_title"></tabs-content>
+                    <tabs-content :value="form.data_magic_list[selected_active].data_content" :is-show-title="is_show_title"></tabs-content>
                 </el-tab-pane>
                 <el-tab-pane label="样式设置" name="styles">
-                    <tabs-styles :value="form.data_magic_list[selected_active].data_style" :content="form.data_magic_list[selected_active].data_content" :isShowTitle="is_show_title"></tabs-styles>
+                    <tabs-styles :value="form.data_magic_list[selected_active].data_style" :content="form.data_magic_list[selected_active].data_content" :is-show-title="is_show_title"></tabs-styles>
                 </el-tab-pane>
             </el-tabs>
         </el-form>
@@ -68,6 +68,13 @@ const data_style = {
     subtitle_color: '#FF852A',
     subtitle_typeface: 'normal',
     subtitle_size: 14,
+    chunk_padding: {
+        padding: 0,
+        padding_top: 20, 
+        padding_bottom: 20, 
+        padding_left: 15,
+        padding_right: 15,
+    },
     is_show: true,
     indicator_style: 'dot',
     indicator_location: 'center',
@@ -85,9 +92,10 @@ const data_style = {
 // 每个小模块独立的内容
 const data_content = {
     data_type: 'commodity',
-    heading_title: '',
+    heading_title: '主标题',
-    subtitle: '',
+    subtitle: '副标题',
     product_list:[],
+    is_show: ['0', '1'],
     img_list:[
         {
             carousel_img: [],
@@ -155,12 +163,19 @@ const style_click = (index: number) => {
 }
 // 规整复制的数据
 const magic_list = (index: number) => {
-    return cloneDeep(style_show_list[index]).map((item) => ({
+    return cloneDeep(style_show_list[index]).map((item, map_index) => ({
         ...item,
         actived_index: 0,
         data_content: cloneDeep(data_content),
         data_style: {
             ...cloneDeep(data_style),
+            chunk_padding: {
+                padding: show_padding(index, map_index) ? 10 : 0,
+                padding_top: show_padding(index, map_index) ? 10 : 20,
+                padding_bottom: show_padding(index, map_index) ? 10 : 20,
+                padding_left: show_padding(index, map_index) ? 10 : 15,
+                padding_right: show_padding(index, map_index) ? 10 : 15,
+            },
             carouselKey: get_math(),
         }
     }));
@@ -171,6 +186,9 @@ const selected_click = (index: number) => {
     selected_active.value = index;
     tabs_name.value = 'content';
 }
+const show_padding = (index:number, map_index:number) => {
+    return index == 7 && ![0, 1].includes(map_index)
+}
 //#endregion
 const data_title = (item: any) => {
     let title = `共有`;

src/components/model-shop-list/model-shop-list-content.vue

@@ -71,7 +71,6 @@
 </template>
 <script setup lang="ts">
 import { get_math } from '@/utils';
-import { ElButton } from 'element-plus';
 const props = defineProps({
     value: {
         type: Object,