From d6c1042cfde0236dbbd5246369396e1d3f5ac919 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 3 Sep 2024 18:26:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=A7=92=E6=9D=80=E7=9A=84?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-seckill/index.vue        | 145 +++++++++++++-
 .../model-seckill/model-seckill-setting.vue   |  10 +
 .../model-seckill/model-seckill-styles.vue    | 179 ++++++++++--------
 src/components/model-shop-list/index.vue      |   1 -
 .../layout/components/main/default/seckill.ts |  14 ++
 5 files changed, 268 insertions(+), 81 deletions(-)

diff --git a/src/components/model-seckill/index.vue b/src/components/model-seckill/index.vue
index 4593f88f..eb22117e 100644
--- a/src/components/model-seckill/index.vue
+++ b/src/components/model-seckill/index.vue
@@ -9,7 +9,7 @@
                     </div>
                     <div v-if="form.theme == '1'" class="pl-6 pr-6 cr-f">|</div>
                     <div class="flex-row align-c gap-4">
-                        <span v-if="form.theme != '4'" class="size-10" :style="`color: ${ new_style.end_text_color }`">距离结束</span>
+                        <span class="size-10" :style="`color: ${ new_style.end_text_color }`">距离结束</span>
                         <div class="flex-row gap-3 jc-c align-c" :style="[form.theme == '4'? `${ time_bg };padding: 0.3rem 0.4rem;border-radius: 1.1rem;` : '']">
                         <img v-if="form.theme == '4'" class="seckill-head-icon radius-xs" :src="url_computer('time')" />
                         <template v-for="(item, index) in time_config" :key="item.key">
@@ -30,11 +30,27 @@
                     <el-icon class="iconfont icon-arrow-right" :color="new_style.head_button_color"></el-icon>
                 </div>
             </div>
+            <div class="flex flex-wrap" :style="`gap: ${ content_outer_spacing }px;`">
+                <div v-for="(item, index) in list" :key="index" :class="layout_type" :style="`${ content_radius }; ${ content_padding }`">
+                    <template v-if="!isEmpty(item)">
+                        <template v-if="!isEmpty(item.new_cover)">
+                            <image-empty v-model="item.new_cover[0]" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
+                        </template>
+                        <template v-else>
+                            <image-empty v-model="item.images" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
+                        </template>
+                    </template>
+                    <div class="flex-col gap-10">
+
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-import { background_computer, common_styles_computer, gradient_computer } from '@/utils';
+import { background_computer, common_styles_computer, gradient_computer, padding_computer, radius_computer } from '@/utils';
+import { isEmpty } from 'lodash';
 
 const props = defineProps({
     value: {
@@ -74,6 +90,106 @@ const seckill_head_style = computed(() => {
 });
 
 const style = computed(() => common_styles_computer(props.value.style.common_style));
+interface plugins_icon_data {
+    name: string;
+    bg_color: string;
+    br_color: string;
+    color: string;
+    url: string;
+}
+interface data_list {
+    title: string;
+    images: string;
+    new_cover: string[];
+    min_original_price: string;
+    show_original_price_symbol: string;
+    show_original_price_unit: string;
+    min_price: string;
+    show_price_symbol: string;
+    show_price_unit: string;
+    sales_count: string;
+    plugins_view_icon_data: plugins_icon_data[];
+}
+const default_list = {
+    title: '测试商品标题',
+    min_original_price: '41.2',
+    show_original_price_symbol: '￥',
+    show_original_price_unit: '/ 台',
+    min_price: '51',
+    show_price_symbol: '￥',
+    show_price_unit: '/ 台',
+    sales_count: '1000',
+    images: '',
+    new_cover: [],
+    plugins_view_icon_data: [
+        {
+            name: '满减活动',
+            bg_color: '#EA3323',
+            br_color: '',
+            color: '#fff',
+            url: '',
+        },
+        {
+            name: '包邮',
+            bg_color: '',
+            br_color: '#EA3323',
+            color: '#EA3323',
+            url: '',
+        },
+        {
+            name: '领劵',
+            bg_color: '',
+            br_color: '#EA9223',
+            color: '#EA9223',
+            url: '',
+        },
+    ],
+};
+const list = ref<data_list[]>([]);
+onBeforeMount(() => {
+    list.value = Array(4).fill(default_list);
+})
+// 商品间距
+const content_outer_spacing = computed(() => new_style.value.content_outer_spacing);
+// 圆角设置
+const content_radius = computed(() => radius_computer(new_style.value.shop_radius));
+// 选择的风格
+const shop_style_type = computed(() => form.value.shop_style_type);
+// 内边距设置
+const content_padding = computed(() => padding_computer(new_style.value.shop_padding));
+// 不同风格下的样式
+const layout_type = computed(() => {
+    let class_type = '';
+    switch (shop_style_type.value) {
+        case '1':
+            class_type = `flex-row bg-f oh multicolumn-columns`;
+            break;
+        case '2':
+            class_type = `flex-col bg-f oh multicolumn-columns`;
+            break;
+        case '3':
+            class_type = `flex-col bg-f oh multicolumn-columns`;
+            break;
+        default:
+            break;
+    }
+    return class_type;
+});
+// 不换行显示
+const multicolumn_columns_width = computed(() => {
+    const { single_line_number } = toRefs(form.value);
+    let model_number = single_line_number.value;
+    if (shop_style_type.value == '1') {
+        model_number = 1;
+    } else if (shop_style_type.value == '2') {
+        model_number = 2;
+    }
+    // 计算间隔的空间。(gap * gap数量) / 模块数量
+    let gap = (new_style.value.content_outer_spacing * (model_number - 1)) / model_number;
+    return `calc(${100 / model_number}% - ${gap}px)`;
+});
+// 图片圆角设置
+const content_img_radius = computed(() => radius_computer(new_style.value.shop_img_radius));
 
 const url_computer = (name: string) => {
     const new_url = ref(new URL(`../../assets/images/components/model-seckill/${name}.png`, import.meta.url).href).value;
@@ -81,6 +197,12 @@ const url_computer = (name: string) => {
 };
 </script>
 <style lang="scss" scoped>
+:deep(.el-image) {
+    .image-slot img {
+        width: 5rem;
+        height: 5rem;
+    }
+}
 .seckill-head {
     padding: 1.5rem 1.3rem;
     width: 100%;
@@ -103,4 +225,23 @@ const url_computer = (name: string) => {
     position: relative;
     top: -0.1rem;
 }
+.multicolumn-columns {
+    height: 100%;
+    width: v-bind(multicolumn_columns_width);
+    min-width: v-bind(multicolumn_columns_width);
+}
+.flex-img1 {
+    height: auto;
+    min-height: 11rem;
+    max-height: 12rem;
+    width: 11rem;
+}
+.flex-img2 {
+    width: 100%;
+    height: 18rem;
+}
+.flex-img3 {
+    width: 100%;
+    min-height: 10.4rem;
+}
 </style>
diff --git a/src/components/model-seckill/model-seckill-setting.vue b/src/components/model-seckill/model-seckill-setting.vue
index 34b5af3a..39c0ab75 100644
--- a/src/components/model-seckill/model-seckill-setting.vue
+++ b/src/components/model-seckill/model-seckill-setting.vue
@@ -62,6 +62,16 @@ onBeforeMount(async () => {
                 radius_bottom_left: 4,
                 radius_bottom_right: 4,
             },
+            shop_padding: {
+                padding: 10, 
+                padding_top: 10, 
+                padding_bottom: 10, 
+                padding_left: 10, 
+                padding_right: 10,
+            },
+            content_outer_spacing: 10, // 商品间距
+            content_spacing: 10,
+            content_outer_height: 232,
             shop_title_color: '',
             shop_title_typeface: '',
             shop_title_size: 12,
diff --git a/src/components/model-seckill/model-seckill-styles.vue b/src/components/model-seckill/model-seckill-styles.vue
index b22abdb6..522b1535 100644
--- a/src/components/model-seckill/model-seckill-styles.vue
+++ b/src/components/model-seckill/model-seckill-styles.vue
@@ -1,51 +1,53 @@
 <template>
     <div class="w">
         <el-form :model="form" label-width="70">
-            <card-container>
-                <div class="mb-12">头部样式</div>
-                <el-form-item label="标题设置">
-                    <color-text-size-group v-model:color="form.topic_color" v-model:size="form.topic_size" :type-list="['color', 'size']"></color-text-size-group>
-                </el-form-item>
-                <el-form-item label="按钮设置">
-                    <color-text-size-group v-model:color="form.head_button_color" v-model:size="form.head_button_size" :type-list="['color', 'size']"></color-text-size-group>
-                </el-form-item>
-                <el-form-item v-if="data.theme != '4'" label="距离结束">
-                    <color-picker v-model="form.end_text_color"></color-picker>
-                </el-form-item>
-                <el-form-item label="数字背景">
-                    <mult-color-picker :value="form.countdown_bg_color_list" :type="form.countdown_direction" @update:value="countdown_color_picker_event"></mult-color-picker>
-                </el-form-item>
-                <el-form-item label="数字">
-                    <color-picker v-model="form.countdown_color"></color-picker>
-                </el-form-item>
-                <el-form-item label="顶部背景">
-                    <div class="flex-col gap-10">
-                        <mult-color-picker :value="form.header_background_color_list" :type="form.header_background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
-                        <div class="flex-row jc-sb align-c">
-                            <div class="size-12">背景图</div>
-                            <el-radio-group v-model="form.header_background_img_style" is-button>
-                                <el-tooltip content="单张" placement="top" effect="light">
-                                    <el-radio-button value="0">
-                                        <icon name="single-sheet"></icon>
-                                    </el-radio-button>
-                                </el-tooltip>
-                                <el-tooltip content="平铺" placement="top" effect="light">
-                                    <el-radio-button value="1">
-                                        <icon name="tile"></icon>
-                                    </el-radio-button>
-                                </el-tooltip>
-                                <el-tooltip content="铺满" placement="top" effect="light">
-                                    <el-radio-button value="2">
-                                        <icon name="spread-over"></icon>
-                                    </el-radio-button>
-                                </el-tooltip>
-                            </el-radio-group>
+            <template v-if="form.head_state == '1'">
+                <card-container>
+                    <div class="mb-12">头部样式</div>
+                    <el-form-item v-if="form.topic_type == 'text'" label="标题设置">
+                        <color-text-size-group v-model:color="form.topic_color" v-model:size="form.topic_size" :default-color="clone_form.topic_color" :type-list="['color', 'size']"></color-text-size-group>
+                    </el-form-item>
+                    <el-form-item v-if="form.button_status == '1'" label="按钮设置">
+                        <color-text-size-group v-model:color="form.head_button_color" v-model:size="form.head_button_size" :default-color="clone_form.head_button_color" :type-list="['color', 'size']"></color-text-size-group>
+                    </el-form-item>
+                    <el-form-item label="秒杀提示">
+                        <color-picker v-model="form.end_text_color" :default-color="clone_form.end_text_color"></color-picker>
+                    </el-form-item>
+                    <el-form-item label="数字背景">
+                        <mult-color-picker :value="form.countdown_bg_color_list" :type="form.countdown_direction" @update:value="countdown_color_picker_event"></mult-color-picker>
+                    </el-form-item>
+                    <el-form-item label="数字">
+                        <color-picker v-model="form.countdown_color" :default-color="clone_form.countdown_color"></color-picker>
+                    </el-form-item>
+                    <el-form-item label="顶部背景">
+                        <div class="flex-col gap-10">
+                            <mult-color-picker :value="form.header_background_color_list" :type="form.header_background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
+                            <div class="flex-row jc-sb align-c">
+                                <div class="size-12">背景图</div>
+                                <el-radio-group v-model="form.header_background_img_style" is-button>
+                                    <el-tooltip content="单张" placement="top" effect="light">
+                                        <el-radio-button value="0">
+                                            <icon name="single-sheet"></icon>
+                                        </el-radio-button>
+                                    </el-tooltip>
+                                    <el-tooltip content="平铺" placement="top" effect="light">
+                                        <el-radio-button value="1">
+                                            <icon name="tile"></icon>
+                                        </el-radio-button>
+                                    </el-tooltip>
+                                    <el-tooltip content="铺满" placement="top" effect="light">
+                                        <el-radio-button value="2">
+                                            <icon name="spread-over"></icon>
+                                        </el-radio-button>
+                                    </el-tooltip>
+                                </el-radio-group>
+                            </div>
+                            <upload v-model="form.header_background_img_url" :limit="1"></upload>
                         </div>
-                        <upload v-model="form.header_background_img_url" :limit="1"></upload>
-                    </div>
-                </el-form-item>
-            </card-container>
-            <div class="divider-line"></div>
+                    </el-form-item>
+                </card-container>
+                <div class="divider-line"></div>
+            </template>
             <card-container>
                 <div class="mb-12">商品样式</div>
                 <el-form-item label="内容圆角">
@@ -63,6 +65,20 @@
                 <el-form-item label="原价价格">
                     <color-picker v-model="form.original_price_color"></color-picker>
                 </el-form-item>
+                <el-form-item label="内间距">
+                    <padding :value="form.shop_padding"></padding>
+                </el-form-item>
+                <el-form-item v-if="form.shop_style_type == '1'" label="内容间距">
+                    <slider v-model="form.content_spacing" :max="100"></slider>
+                </el-form-item>
+                <el-form-item label="商品间距">
+                    <slider v-model="form.content_outer_spacing" :max="100"></slider>
+                </el-form-item>
+                <template v-if="form.shop_style_type == '3'">
+                    <el-form-item label="内容高度">
+                        <slider v-model="form.content_outer_height" :max="1000"></slider>
+                    </el-form-item>
+                </template>
                 <el-form-item label="秒杀角标">
                     <div class="flex-col gap-10">
                         <el-radio-group v-model="form.seckill_subscript_location">
@@ -77,46 +93,51 @@
                     </div>
                 </el-form-item>
             </card-container>
-            <div class="divider-line"></div>
-            <card-container>
-                <div class="mb-12">进度条设置</div>
-                <el-form-item label="背景色">
-                    <color-picker v-model="form.progress_bg_color"></color-picker>
-                </el-form-item>
-                <el-form-item label="选中色">
-                    <mult-color-picker :value="form.progress_actived_color_list" :type="form.progress_actived_direction" @update:value="progress_color_picker_event"></mult-color-picker>
-                </el-form-item>
-                <el-form-item label="按钮背景">
-                    <color-picker v-model="form.progress_button_color"></color-picker>
-                </el-form-item>
-                <el-form-item label="图标颜色">
-                    <color-picker v-model="form.progress_button_icon_color"></color-picker>
-                </el-form-item>
-                <el-form-item label="文字颜色">
-                    <color-picker v-model="form.progress_text_color"></color-picker>
-                </el-form-item>
-            </card-container>
-            <div class="divider-line"></div>
-            <card-container>
-                <div class="mb-12">轮播设置</div>
-                <el-form-item label="自动轮播">
-                    <el-switch v-model="form.is_roll" />
-                </el-form-item>
-                <el-form-item label="间隔时间">
-                    <slider v-model="form.interval_time" :min="1" :max="100"></slider>
-                </el-form-item>
-                <el-form-item label="滚动方式">
-                    <el-radio-group v-model="form.rolling_fashion">
-                        <el-radio v-for="item in base_list.rolling_fashion_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
-                    </el-radio-group>
-                </el-form-item>
-            </card-container>
+            <template v-if="form.shop_style_type == '1'">
+                <div class="divider-line"></div>
+                <card-container>
+                    <div class="mb-12">进度条设置</div>
+                    <el-form-item label="背景色">
+                        <color-picker v-model="form.progress_bg_color"></color-picker>
+                    </el-form-item>
+                    <el-form-item label="选中色">
+                        <mult-color-picker :value="form.progress_actived_color_list" :type="form.progress_actived_direction" @update:value="progress_color_picker_event"></mult-color-picker>
+                    </el-form-item>
+                    <el-form-item label="按钮背景">
+                        <color-picker v-model="form.progress_button_color"></color-picker>
+                    </el-form-item>
+                    <el-form-item label="图标颜色">
+                        <color-picker v-model="form.progress_button_icon_color"></color-picker>
+                    </el-form-item>
+                    <el-form-item label="文字颜色">
+                        <color-picker v-model="form.progress_text_color"></color-picker>
+                    </el-form-item>
+                </card-container>
+            </template>
+            <template v-if="form.shop_style_type == '3'">
+                <div class="divider-line"></div>
+                <card-container>
+                    <div class="mb-12">轮播设置</div>
+                    <el-form-item label="自动轮播">
+                        <el-switch v-model="form.is_roll" />
+                    </el-form-item>
+                    <el-form-item label="间隔时间">
+                        <slider v-model="form.interval_time" :min="1" :max="100"></slider>
+                    </el-form-item>
+                    <el-form-item label="滚动方式">
+                        <el-radio-group v-model="form.rolling_fashion">
+                            <el-radio v-for="item in base_list.rolling_fashion_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                </card-container>
+            </template>
         </el-form>
         <div class="divider-line"></div>
         <common-styles :value="form.common_style" @update:value="common_style_update" />
     </div>
 </template>
 <script setup lang="ts">
+import { cloneDeep } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
@@ -136,6 +157,8 @@ const state = reactive({
 // 如果需要解构，确保使用toRefs
 const { form, data } = toRefs(state);
 
+let clone_form = cloneDeep(props.value);
+
 const base_list = {
     location_list: [
         { name: '左上', value: 'left-top' },
diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index f21f0d5b..4a062992 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -168,7 +168,6 @@ const props = defineProps({
 const form = computed(() => props.value?.content || {});
 const new_style = computed(() => props.value?.style || {});
 
-// 目前显示假数据，日后通过分类或者选择的商品来显示真实数据
 interface plugins_icon_data {
     name: string;
     bg_color: string;
diff --git a/src/views/layout/components/main/default/seckill.ts b/src/views/layout/components/main/default/seckill.ts
index 891c3779..0a46c59d 100644
--- a/src/views/layout/components/main/default/seckill.ts
+++ b/src/views/layout/components/main/default/seckill.ts
@@ -33,6 +33,10 @@ interface DefaultSeckill {
         header_background_img_url: uploadList[];
         shop_radius: radiusStyle;
         shop_img_radius: radiusStyle;
+        shop_padding: paddingStyle;
+        content_outer_spacing: number;
+        content_spacing: number;
+        content_outer_height: number;
         shop_title_color: string;
         shop_title_typeface: string;
         shop_title_size: number;
@@ -97,6 +101,16 @@ const defaultSeckill: DefaultSeckill = {
             radius_bottom_left: 4,
             radius_bottom_right: 4,
         },
+        shop_padding: {
+            padding: 10, 
+            padding_top: 10, 
+            padding_bottom: 10, 
+            padding_left: 10, 
+            padding_right: 10,
+        },
+        content_outer_spacing: 10, // 商品间距
+        content_spacing: 10,
+        content_outer_height: 232,
         shop_title_color: '',
         shop_title_typeface: '',
         shop_title_size: 12,