From f57adb58591ae4af1d451245cc9ccd320bc227be 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, 24 Sep 2024 16:30:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=80=89=E9=A1=B9=E5=8D=A1?=
 =?UTF-8?q?=E8=BD=AE=E6=92=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/carousel.vue            |  6 ++-
 components/diy/diy.vue                 | 16 +++---
 components/diy/goods-list.vue          |  8 ++-
 components/diy/modules/image-empty.vue |  2 +-
 components/diy/modules/tabs-view.vue   |  2 +-
 components/diy/seckill.vue             |  2 +-
 components/diy/tabs-carousel.vue       | 72 ++++++++++++++++++++++++++
 components/diy/tabs.vue                | 12 ++++-
 8 files changed, 106 insertions(+), 14 deletions(-)
 create mode 100644 components/diy/tabs-carousel.vue

diff --git a/components/diy/carousel.vue b/components/diy/carousel.vue
index 6a07ca1f..392bd46c 100644
--- a/components/diy/carousel.vue
+++ b/components/diy/carousel.vue
@@ -69,6 +69,10 @@
                     return {};
                 },
             },
+            isCommon: {
+                type: Boolean,
+                default: true,
+            }
         },
         data() {
             return {
@@ -127,7 +131,7 @@
                     new_list: this.seat_list.concat(this.form.carousel_list),
                     popup_width: block * 16 * 2 + 'rpx',
                     popup_height: block * 9 * 2 + 'rpx',
-                    style_container: common_styles_computer(common_style), // 用于样式显示
+                    style_container: this.isCommon ? common_styles_computer(common_style) : '', // 用于样式显示
                     img_style: radius_computer(this.new_style), // 图片的设置
                     indicator_style: this.get_indicator_style(), // 指示器的样式
                     dot_style: `bottom: ${common_style.padding_bottom * 2 + 12}rpx;`, // 指示器位置
diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index 2767019d..396c9b94 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -4,7 +4,10 @@
             <componentDiyHeader :key="key" :value="header_data.com_data"></componentDiyHeader>
         </view>
         <view class="pr" :style="diy_content_style">
-            <componentDiyTabs v-if="is_tabs" :value="tabs_data" :key="key" @tabs-click="tabs_click_event"></componentDiyTabs>
+            <view v-for="(item, index) in tabs_data" :key="index">
+                <componentDiyTabs v-if="item.key == 'tabs'" :value="item.com_data" :key="key" @tabs-click="tabs_click_event"></componentDiyTabs>
+                <componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :value="item.com_data" :key="key + 'tabs-carousel'" @tabs-click="tabs_click_event"></componentDiyTabsCarousel>
+            </view>
             <view v-if="is_tabs_type" class="diy-content">
                 <template v-if="diy_data.length > 0">
                     <view v-for="(item, index) in diy_data" :key="index">
@@ -80,7 +83,8 @@
     import componentDiyDataMagic from '@/components/diy/data-magic';
     import componentDiyCustom from '@/components/diy/custom';
     import componentDiyImgMagic from '@/components/diy/img-magic';
-    import componentDiySeckill from '@/components/diy/seckill.vue';
+    import componentDiySeckill from '@/components/diy/seckill';
+    import componentDiyTabsCarousel from '@/components/diy/tabs-carousel';
     import componentGoodsList from '@/components/goods-list/goods-list';
     import componentNoData from '@/components/no-data/no-data';
     import componentBottomLine from '@/components/bottom-line/bottom-line';
@@ -127,9 +131,10 @@
             componentDiyCustom,
             componentDiyImgMagic,
             componentDiySeckill,
+            componentDiyTabsCarousel,
             componentGoodsList,
             componentNoData,
-            componentBottomLine,
+            componentBottomLine
         },
         data() {
             return {
@@ -180,14 +185,13 @@
         methods: {
             init() {
                 // tabs选项卡数据过滤
-                const filter_tabs_list = this.value.tabs_data || [];
+                // const filter_tabs_list = this.value.tabs_data || [];
                 this.setData({
                     key: get_math(),
                     header_data: this.value.header,
                     footer_data: this.value.footer,
                     diy_data: this.value.diy_data,
-                    tabs_data: filter_tabs_list.length > 0 ? filter_tabs_list[0].com_data : {},
-                    is_tabs: true,
+                    tabs_data: this.value.tabs_data,
                 });
                 uni.setStorageSync('diy-data-' + this.propId, this.value.diy_data);
             },
diff --git a/components/diy/goods-list.vue b/components/diy/goods-list.vue
index 425065c5..4ea04ce2 100644
--- a/components/diy/goods-list.vue
+++ b/components/diy/goods-list.vue
@@ -72,7 +72,7 @@
                                         <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
                                     </view>
                                     <view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex-row">
-                                        <img class="original-price-left" :src="form.static_img[0].url" />
+                                        <image class="original-price-left" :src="form.static_img[0].url" />
                                         <span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
                                             >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
                                             <block v-if="is_show('original_price_unit')">
@@ -121,7 +121,7 @@
                                             <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
                                         </view>
                                         <view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex">
-                                            <img class="original-price-left" :src="form.static_img[0].url" />
+                                            <image class="original-price-left" :src="form.static_img[0].url" />
                                             <span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
                                                 >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
                                                 <block v-if="is_show('original_price_unit')">
@@ -494,6 +494,10 @@
     .gap-20 {
         gap: 40rpx;
     }
+    .original-price-left {
+        width: 20rpx;
+        height: 28rpx;
+    }
     .br-b-e {
         border-bottom: 2rpx solid #eee;
     }
diff --git a/components/diy/modules/image-empty.vue b/components/diy/modules/image-empty.vue
index b1bbfa09..1c547c62 100644
--- a/components/diy/modules/image-empty.vue
+++ b/components/diy/modules/image-empty.vue
@@ -37,7 +37,7 @@
                 defaultImage: '/static/images/common/image-empty.png',
             };
         },
-        created() {
+        mounted() {
             this.init();
         },
         methods: {
diff --git a/components/diy/modules/tabs-view.vue b/components/diy/modules/tabs-view.vue
index 4943d09d..7234b217 100644
--- a/components/diy/modules/tabs-view.vue
+++ b/components/diy/modules/tabs-view.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- 文章列表 -->
     <view class="container">
-        <view class="flex-row gap-10 jc-sb align-s">
+        <view class="flex-row gap-10 jc-sb align-c">
             <view class="tabs flex-1 flex-width">
                 <scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true" :scroll-into-view="'one-nav-item-' + active_index" class="wh-auto">
                     <view class="flex-row" :style="'column-gap: ' + tabs_spacing + 'px;'">
diff --git a/components/diy/seckill.vue b/components/diy/seckill.vue
index 3c26dfd5..921ea825 100644
--- a/components/diy/seckill.vue
+++ b/components/diy/seckill.vue
@@ -11,7 +11,7 @@
                     <view v-if="intervalId != undefined" class="flex-row align-c gap-4">
                         <span class="text-size-xss" :style="{ 'color': new_style.end_text_color }">{{ seckill_time.time_first_text }}</span>
                         <view class="flex-row gap-3 jc-c align-c" :style="[form.theme == '4' ? time_bg + 'padding: 6rpx 8rpx;border-radius: 22rpx;' : '']">
-                            <img v-if="form.theme == '4'" class="seckill-head-icon radius-xs" :src="form.theme_4_static_img[0].url" />
+                            <image v-if="form.theme == '4'" class="seckill-head-icon radius-xs" :src="form.theme_4_static_img[0].url" />
                             <view v-for="(item, index) in time_config" :key="item.key" class="flex-row gap-3 jc-c align-c">
                                 <template v-if="form.theme == '4'">
                                     <view class="text-size-xs" :style="{ color: new_style.countdown_color }">{{ item.value }}</view>
diff --git a/components/diy/tabs-carousel.vue b/components/diy/tabs-carousel.vue
new file mode 100644
index 00000000..c5cbcee7
--- /dev/null
+++ b/components/diy/tabs-carousel.vue
@@ -0,0 +1,72 @@
+<template>
+    <div class="flex-col oh" :style="style_container">
+        <componentDiyTabs :value="value" :is-common="false" :spacing-common-style="spacing_common_style" @tabs-click="tabs_click_event"></componentDiyTabs>
+        <componentDiycarousel :value="value" :is-common="false"></componentDiycarousel>
+    </div>
+</template>
+
+<script>
+    import { common_styles_computer } from '@/common/js/common/common.js';
+    import componentDiyTabs from '@/components/diy/tabs';
+    import componentDiycarousel from '@/components/diy/carousel';
+    export default {
+        components: {
+            componentDiyTabs,
+            componentDiycarousel
+        },
+        props: {
+            value: {
+                type: Object,
+                default: () => {
+                    return {};
+                },
+            },
+        },
+        data() {
+            return {
+                style_container: '',
+                spacing_common_style: {
+                    padding: 0,
+                    padding_top: 0,
+                    padding_bottom: 0,
+                    padding_left: 0,
+                    padding_right: 0,
+                    margin: 0,
+                    margin_top: 0,
+                    margin_bottom: 0,
+                    margin_left: 0,
+                    margin_right: 0,
+                }
+            };
+        },
+        created() {
+            this.init();
+        },
+        methods: {
+            init() {
+                const new_style = this.value.style || {};
+                this.setData({
+                    style_container: `${ common_styles_computer(new_style.common_style)};gap:${new_style.data_spacing * 2}rpx`,
+                    spacing_common_style: {
+                        padding: 0,
+                        padding_top: new_style.common_style.padding_top,
+                        padding_bottom: 0,
+                        padding_left: new_style.common_style.padding_left,
+                        padding_right: new_style.common_style.padding_right,
+                        margin: 0,
+                        margin_top: new_style.common_style.margin_top,
+                        margin_bottom: 0,
+                        margin_left: new_style.common_style.margin_left,
+                        margin_right: new_style.common_style.margin_right,
+                    }
+                })
+            },
+            tabs_click_event(tabs_id, is_micro_page) {
+                this.$emit('tabs-click', tabs_id, is_micro_page);
+            }
+        },
+    };
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/components/diy/tabs.vue b/components/diy/tabs.vue
index 714fb1cb..82e8d23d 100644
--- a/components/diy/tabs.vue
+++ b/components/diy/tabs.vue
@@ -18,7 +18,7 @@
 
 <script>
     const app = getApp();
-    import { common_styles_computer } from '@/common/js/common/common.js';
+    import { common_styles_computer, padding_computer, margin_computer } from '@/common/js/common/common.js';
     import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
     // 状态栏高度
     var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
@@ -31,6 +31,14 @@
                 type: Object,
                 default: () => ({}),
             },
+            isCommon: {
+                type: Boolean,
+                default: true,
+            },
+            spacingCommonStyle: {
+                type: Object,
+                default: () => ({}),
+            }
         },
         components: {
             componentDiyModulesTabsView,
@@ -57,7 +65,7 @@
                 new_tabs_data.content.tabs_list.unshift(new_tabs_data.content.home_data);
                 this.setData({
                     tabs_data: new_tabs_data,
-                    style_container: common_styles_computer(new_style.common_style),
+                    style_container: this.isCommon ? common_styles_computer(new_style.common_style) : new_content.tabs_top_up == '1' ? padding_computer(this.spacingCommonStyle) + margin_computer(this.spacingCommonStyle) : '',
                     top_up: new_content.tabs_top_up,
                 });
             },