From 78a99a3c8cee718481629505c2cedcf274ab35f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 2 Sep 2024 13:36:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E7=9A=84=E6=95=B0=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-shop-list/index.vue      | 267 +++++++++++++-----
 .../model-shop-list-content.vue               |   8 +
 .../model-shop-list-styles.vue                |  15 +-
 .../components/main/default/shop-list.ts      |   8 +-
 4 files changed, 220 insertions(+), 78 deletions(-)

diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index acb59259..19242681 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -1,56 +1,84 @@
 <template>
     <div class="oh" :style="style_container">
         <div :class="outer_class" :style="onter_style">
-            <div v-for="(item, index) in list" :key="index" class="re" :class="layout_type" :style="layout_style">
-                <template v-if="theme == '6'">
-                    <div :class="['flex-row align-c jc-sb ptb-15 mlr-10 gap-20', { 'br-b-e': index != list.length - 1 }]">
-                        <div v-if="is_show('title')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
-                        <div v-if="is_show('price')" class="num nowrap" :style="`color: ${new_style.shop_price_color}`">
-                            <span class="identifying">{{ item.show_price_symbol }}</span
-                            ><span :style="trends_config('price')">{{ item.min_price }}</span>
-                            <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
-                        </div>
-                    </div>
-                </template>
-                <template v-else>
-                    <template v-if="!isEmpty(item)">
-                        <template v-if="!isEmpty(item.new_cover)">
-                            <image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
-                        </template>
-                        <template v-else>
-                            <image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
-                        </template>
-                    </template>
-                    <div class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
-                        <div class="flex-col gap-10 top-title">
+            <template v-if="!['5'].includes(theme)">
+                <div v-for="(item, index) in list" :key="index" class="re" :class="layout_type" :style="layout_style">
+                    <template v-if="theme == '6'">
+                        <div :class="['flex-row align-c jc-sb ptb-15 mlr-10 gap-20', { 'br-b-e': index != list.length - 1 }]">
                             <div v-if="is_show('title')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
-                            <div v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
-                                <div v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius-sm size-9 pl-3 pr-3" :style="icon_style(icon_data)">{{ icon_data.name }}</div>
+                            <div v-if="is_show('price')" class="num nowrap" :style="`color: ${new_style.shop_price_color}`">
+                                <span class="identifying">{{ item.show_price_symbol }}</span
+                                ><span :style="trends_config('price')">{{ item.min_price }}</span>
+                                <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
                             </div>
                         </div>
-                        <div v-if="!['3', '4', '5'].includes(form.theme)" class="flex-col gap-5 oh">
-                            <div :class="[form.is_price_solo ? 'flex-row align-c nowrap' : 'flex-col gap-5']">
-                                <div v-if="is_show('price')" class="num" :style="`color: ${new_style.shop_price_color}`">
-                                    <span class="identifying">{{ item.show_price_symbol }}</span
-                                    ><span :style="trends_config('price')">{{ item.min_price }}</span>
-                                    <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
-                                </div>
-                                <div v-if="show_content && is_show('original_price')" class="size-10 flex">
-                                    <span class="original-price-left"></span
-                                    ><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo }]"
-                                        >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
-                                        <template v-if="is_show('original_price_unit')">
-                                            {{ item.show_original_price_unit }}
-                                        </template>
-                                    </span>
+                    </template>
+                    <template v-else>
+                        <template v-if="!isEmpty(item)">
+                            <template v-if="!isEmpty(item.new_cover)">
+                                <image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
+                            </template>
+                            <template v-else>
+                                <image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
+                            </template>
+                        </template>
+                        <div class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
+                            <div class="flex-col gap-10 top-title">
+                                <div v-if="is_show('title')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
+                                <div v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
+                                    <div v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius-sm size-9 pl-3 pr-3" :style="icon_style(icon_data)">{{ icon_data.name }}</div>
                                 </div>
                             </div>
-                            <div class="flex-row jc-sb align-e">
-                                <div>
-                                    <div v-if="show_content" class="flex-row align-c size-10">
-                                        <div v-if="is_show('sales_count')" class="pr-5" :style="trends_config('sold_number')">已售{{ item.sales_count }}件</div>
-                                        <!-- <div v-if="is_show('sales_count')" :class="['pr-5', {'br-r-e': is_show('sales_count') && is_show('4')}]" :style="trends_config('sold_number')">已售{{ item.sales_count }}件</div> -->
-                                        <!-- <div v-if="is_show('4')" class="pl-5" :style="trends_config('score')">评分0</div> -->
+                            <div v-if="!['3', '4', '5'].includes(form.theme)" class="flex-col gap-5 oh">
+                                <div :class="[form.is_price_solo ? 'flex-row align-c nowrap' : 'flex-col gap-5']">
+                                    <div v-if="is_show('price')" class="num" :style="`color: ${new_style.shop_price_color}`">
+                                        <span class="identifying">{{ item.show_price_symbol }}</span
+                                        ><span :style="trends_config('price')">{{ item.min_price }}</span>
+                                        <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
+                                    </div>
+                                    <div v-if="show_content && is_show('original_price')" class="size-10 flex">
+                                        <span class="original-price-left"></span
+                                        ><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo }]"
+                                            >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
+                                            <template v-if="is_show('original_price_unit')">
+                                                {{ item.show_original_price_unit }}
+                                            </template>
+                                        </span>
+                                    </div>
+                                </div>
+                                <div class="flex-row jc-sb align-e">
+                                    <div>
+                                        <div v-if="show_content" class="flex-row align-c size-10">
+                                            <div v-if="is_show('sales_count')" class="pr-5" :style="trends_config('sold_number')">已售{{ item.sales_count }}件</div>
+                                            <!-- <div v-if="is_show('sales_count')" :class="['pr-5', {'br-r-e': is_show('sales_count') && is_show('4')}]" :style="trends_config('sold_number')">已售{{ item.sales_count }}件</div> -->
+                                            <!-- <div v-if="is_show('4')" class="pl-5" :style="trends_config('score')">评分0</div> -->
+                                        </div>
+                                    </div>
+                                    <div v-if="form.is_shop_show">
+                                        <template v-if="form.shop_type == 'text'">
+                                            <div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${ new_style.shop_button_text_color };`">{{ form.shop_button_text }}</div>
+                                        </template>
+                                        <template v-else>
+                                            <icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
+                                        </template>
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-else class="flex-row align-c jc-sb">
+                                <div class="flex-row align-c nowrap">
+                                    <div v-if="is_show('price')" class="num" :style="`color: ${new_style.shop_price_color}`">
+                                        <span class="identifying">{{ item.show_price_symbol }}</span
+                                        ><span :style="trends_config('price')">{{ item.min_price }}</span>
+                                        <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
+                                    </div>
+                                    <div v-if="show_content && is_show('original_price')" class="size-10 flex">
+                                        <span class="original-price-left"></span
+                                        ><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo }]"
+                                            >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
+                                            <template v-if="is_show('original_price_unit')">
+                                                {{ item.show_original_price_unit }}
+                                            </template>
+                                        </span>
                                     </div>
                                 </div>
                                 <div v-if="form.is_shop_show">
@@ -63,40 +91,64 @@
                                 </div>
                             </div>
                         </div>
-                        <div v-else class="flex-row align-c jc-sb">
-                            <div class="flex-row align-c nowrap">
-                                <div v-if="is_show('price')" class="num" :style="`color: ${new_style.shop_price_color}`">
-                                    <span class="identifying">{{ item.show_price_symbol }}</span
-                                    ><span :style="trends_config('price')">{{ item.min_price }}</span>
-                                    <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
-                                </div>
-                                <div v-if="show_content && is_show('original_price')" class="size-10 flex">
-                                    <span class="original-price-left"></span
-                                    ><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo }]"
-                                        >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
-                                        <template v-if="is_show('original_price_unit')">
-                                            {{ item.show_original_price_unit }}
-                                        </template>
-                                    </span>
-                                </div>
-                            </div>
-                            <div v-if="form.is_shop_show">
-                                <template v-if="form.shop_type == 'text'">
-                                    <div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${ new_style.shop_button_text_color };`">{{ form.shop_button_text }}</div>
+                    </template>
+                </div>
+            </template>
+            <template v-else>
+                <el-carousel :key="carouselKey" indicator-position="none" :interval="interval_time" arrow="never" :autoplay="is_roll">
+                    <el-carousel-item v-for="(item1, index1) in shop_content_list" :key="index1" class="flex-row" :style="onter_style">
+                        <div v-for="(item, index) in item1.split_list" :key="index" class="re" :class="layout_type" :style="layout_style">
+                            <template v-if="!isEmpty(item)">
+                                <template v-if="!isEmpty(item.new_cover)">
+                                    <image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
                                 </template>
                                 <template v-else>
-                                    <icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
+                                    <image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
                                 </template>
+                            </template>
+                            <div class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
+                                <div class="flex-col gap-10 top-title">
+                                    <div v-if="is_show('title')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
+                                    <div v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
+                                        <div v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius-sm size-9 pl-3 pr-3" :style="icon_style(icon_data)">{{ icon_data.name }}</div>
+                                    </div>
+                                </div>
+                                <div class="flex-row align-c jc-sb">
+                                    <div class="flex-row align-c nowrap">
+                                        <div v-if="is_show('price')" class="num" :style="`color: ${new_style.shop_price_color}`">
+                                            <span class="identifying">{{ item.show_price_symbol }}</span
+                                            ><span :style="trends_config('price')">{{ item.min_price }}</span>
+                                            <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
+                                        </div>
+                                        <div v-if="show_content && is_show('original_price')" class="size-10 flex">
+                                            <span class="original-price-left"></span
+                                            ><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo }]"
+                                                >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
+                                                <template v-if="is_show('original_price_unit')">
+                                                    {{ item.show_original_price_unit }}
+                                                </template>
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div v-if="form.is_shop_show">
+                                        <template v-if="form.shop_type == 'text'">
+                                            <div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${ new_style.shop_button_text_color };`">{{ form.shop_button_text }}</div>
+                                        </template>
+                                        <template v-else>
+                                            <icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
+                                        </template>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </template>
-            </div>
+                    </el-carousel-item>
+                </el-carousel>
+            </template>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer, gradient_handle, padding_computer, radius_computer } from '@/utils';
+import { common_styles_computer, get_math, gradient_handle, padding_computer, radius_computer } from '@/utils';
 import { isEmpty, cloneDeep } from 'lodash';
 import ShopAPI from '@/api/shop';
 
@@ -224,9 +276,6 @@ const content_outer_spacing = computed(() => new_style.value.content_outer_spaci
 const two_columns = computed(() => content_outer_spacing.value + 'px');
 // 三列风格
 const three_columns = computed(() => content_outer_spacing.value * 2 + 'px');
-// 不换行显示
-const multicolumn_columns_width = computed(() => new_style.value.content_outer_width + 'px');
-const multicolumn_columns_height = computed(() => new_style.value.content_outer_height + 'px');
 
 // 最外层不同风格下的显示
 const outer_class = computed(() => {
@@ -337,6 +386,72 @@ const style_container = computed(() => {
         return '';
     }
 });
+
+//#region 轮播设置
+// 记录当前显示的轮播图的数据
+// 不换行显示
+const multicolumn_columns_width = computed(() => {
+    const { single_line_number } = toRefs(form.value);
+    // 计算间隔的空间。(gap * gap数量) / 模块数量 
+    let gap = (new_style.value.content_outer_spacing * (single_line_number.value - 1)) / single_line_number.value;
+    return `calc(${ 100 / single_line_number.value }% - ${ gap }px)` ;
+});
+const multicolumn_columns_height = computed(() => new_style.value.content_outer_height + 'px');
+const interval_list = ref({
+    time: 2000,
+    is_roll: true,
+    notice_length: 1
+});
+interface nav_list {
+    split_list: data_list[];
+}
+const shop_content_list = computed(() => {
+    // 深拷贝一下，确保不会出现问题
+    const cloneList = cloneDeep(list.value);
+    // 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
+    if (cloneList.length > 0) {
+        // 每页显示的数量
+        const num = form.value.single_line_number;
+        // 存储数据显示
+        let nav_list: nav_list[] = [];
+        // 拆分的数量
+        const split_num = Math.ceil(cloneList.length / num);
+        for (let i = 0; i < split_num; i++) {
+            nav_list.push({ split_list: cloneList.slice(i * num, (i + 1) * num) });
+        }
+        return nav_list;
+    } else {
+        // 否则的话，就返回全部的信息
+        return [{ split_list: cloneList }];
+    }
+})
+// 轮播图定时显示
+const interval_time = ref(2000);
+// 轮播图是否滚动
+const is_roll = ref(true);
+// 轮播图key值
+const carouselKey = ref('0');
+// 内容参数的集合
+watchEffect(() => {
+    const time = (new_style.value.interval_time || 2) * 1000;
+    const display_is_roll =  new_style.value.is_roll;
+    // 判断长度是否相等
+    const notice_length = shop_content_list.value.length;
+    // 判断跟历史的是否相等，不相等更新组件时间
+    if (interval_list.value.time != time || interval_list.value.is_roll != display_is_roll || notice_length != interval_list.value.notice_length) {
+        // 滚动时间
+        interval_time.value = time;
+        // 记录历史保存的时间
+        interval_list.value = {
+            time: time,
+            is_roll: display_is_roll,
+            notice_length: notice_length
+        };
+        // 更新轮播图的key，确保更换时能重新更新轮播图
+        carouselKey.value = get_math();
+    }
+});
+//#endregion
 </script>
 <style lang="scss" scoped>
 :deep(.el-image) {
@@ -400,4 +515,10 @@ const style_container = computed(() => {
     width: 100%;
     min-height: 10.4rem;
 }
+:deep(.el-carousel) {
+    width: 100%;
+    .el-carousel__container {
+        height: v-bind(multicolumn_columns_height);
+    }
+}
 </style>
diff --git a/src/components/model-shop-list/model-shop-list-content.vue b/src/components/model-shop-list/model-shop-list-content.vue
index bfd20612..6ec65e6b 100644
--- a/src/components/model-shop-list/model-shop-list-content.vue
+++ b/src/components/model-shop-list/model-shop-list-content.vue
@@ -8,6 +8,14 @@
                         <el-radio v-for="item in base_list.product_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
+                <el-form-item v-if="form.theme == '5'" label="单行显示">
+                    <el-radio-group v-model="form.single_line_number" class="ml-4">
+                        <el-radio :value="1">1个</el-radio>
+                        <el-radio :value="2">2个</el-radio>
+                        <el-radio :value="3">3个</el-radio>
+                        <el-radio :value="4">4个</el-radio>
+                    </el-radio-group>
+                </el-form-item>
             </card-container>
             <div class="divider-line"></div>
             <card-container>
diff --git a/src/components/model-shop-list/model-shop-list-styles.vue b/src/components/model-shop-list/model-shop-list-styles.vue
index bbf2551a..9029365e 100644
--- a/src/components/model-shop-list/model-shop-list-styles.vue
+++ b/src/components/model-shop-list/model-shop-list-styles.vue
@@ -37,9 +37,6 @@
                         <slider v-model="form.content_outer_spacing" :max="100"></slider>
                     </el-form-item>
                     <template v-if="theme == '5'">
-                        <el-form-item label="内容宽度">
-                            <slider v-model="form.content_outer_width" :max="1000"></slider>
-                        </el-form-item>
                         <el-form-item label="内容高度">
                             <slider v-model="form.content_outer_height" :max="1000"></slider>
                         </el-form-item>
@@ -47,6 +44,18 @@
                 </template>
             </card-container>
             <div class="divider-line"></div>
+            <template v-if="theme == '5'">
+                <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" :max="100"></slider>
+                    </el-form-item>
+                </card-container>
+                <div class="divider-line"></div>
+            </template>
             <card-container>
                 <div class="mb-12">购物车按钮</div>
                 <el-form-item label="按钮颜色" class="topic">
diff --git a/src/views/layout/components/main/default/shop-list.ts b/src/views/layout/components/main/default/shop-list.ts
index b3dc5b11..61c8d6af 100644
--- a/src/views/layout/components/main/default/shop-list.ts
+++ b/src/views/layout/components/main/default/shop-list.ts
@@ -3,6 +3,7 @@ interface DefaultProductList {
     content: {
         theme: string;
         data_type: string;
+        single_line_number: number;
         category: string[];
         data_ids: string[];
         product_show_list: string[];
@@ -24,8 +25,9 @@ interface DefaultProductList {
         shop_img_radius: radiusStyle;
         shop_radius: radiusStyle;
         content_outer_spacing: number;
-        content_outer_width: number;
         content_outer_height: number;
+        is_roll: boolean,
+        interval_time: number,
         content_spacing: number;
         shop_title_typeface: string;
         shop_title_size: number;
@@ -52,6 +54,7 @@ const defaultProductList: DefaultProductList = {
     content: {
         theme: '0',
         data_type: '0',
+        single_line_number: 1,
         product_show_list: [],
         data_list: [],
         category: [],
@@ -92,8 +95,9 @@ const defaultProductList: DefaultProductList = {
         },
         content_outer_spacing: 10, // 商品间距
         content_spacing: 10,
-        content_outer_width: 140,
         content_outer_height: 232,
+        is_roll: true,
+        interval_time: 2,
         shop_title_typeface: '500',
         shop_title_size: 14,    
         shop_title_color: "#333333",