From 668c930f6e41b427c6094e46473afba9fe18f89c 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, 25 Mar 2025 15:22:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=9A=E5=AE=A2=E5=A4=9A=E9=97=A8=E5=BA=97?=
 =?UTF-8?q?=E5=A4=9A=E5=95=86=E6=88=B7=E6=95=B0=E6=8D=AE=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/blog-list.vue                  | 430 +++++++++++++++++
 components/diy/blog-tabs.vue                  | 264 +++++++++++
 .../diy/modules/img-or-icon-or-text.vue       |  85 ++++
 components/diy/realstore.vue                  | 434 ++++++++++++++++++
 components/diy/shop.vue                       | 362 +++++++++++++++
 5 files changed, 1575 insertions(+)
 create mode 100644 components/diy/blog-list.vue
 create mode 100644 components/diy/blog-tabs.vue
 create mode 100644 components/diy/modules/img-or-icon-or-text.vue
 create mode 100644 components/diy/realstore.vue
 create mode 100644 components/diy/shop.vue

diff --git a/components/diy/blog-list.vue b/components/diy/blog-list.vue
new file mode 100644
index 00000000..b53a089c
--- /dev/null
+++ b/components/diy/blog-list.vue
@@ -0,0 +1,430 @@
+<template>
+    <!-- 博客列表 -->
+    <view class="oh" :style="style_container">
+        <view class="oh" :style="style_img_container">
+            <view class="pr oh" :style="style">
+                <view v-if="!['4'].includes(blog_theme)" class="flex-wrap" :class="blog_theme_class" :style="blog_theme !== '3' ? blog_spacing : ''">
+                    <view v-for="(item, index) in data_list" :key="index" class="item oh" :style="blog_style" :data-value="item.data.url" @tap="url_event">
+                        <view :class="blog_theme == '0' ? 'flex-row oh' : 'flex-col oh ht-auto'" :style="blog_img_style">
+                            <template v-if="blog_theme !== '3'">
+                                <view class="oh pr flex-row">
+                                    <template v-if="item.new_cover.length > 0">
+                                        <image :src="item.new_cover[0].url" class="img" :style="img_radius + img_size" mode="aspectFill" />
+                                    </template>
+                                    <template v-else>
+                                        <image :src="item.data.cover" class="img" :style="img_radius + img_size" mode="aspectFill" />
+                                    </template>
+                                    <!-- 角标 -->
+                                    <subscriptIndex :propValue="propValue"></subscriptIndex>
+                                </view>
+                            </template>
+                            <view v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || field_show.includes('3')" class="jc-sb flex-1" :class="blog_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="blog_theme !== '0' ? content_padding : ''">
+                                <view class="flex-col" :class="blog_theme == '3' ? 'flex-1 flex-width' : ''" :style="'gap:' + name_desc_space + 'px;'">
+                                    <view v-if="field_show.includes('3')" class="title" :class="blog_theme == '3' ? 'text-line-1' : 'text-line-2'" :style="blog_name">{{ item.new_title ? item.new_title : item.data.title }}</view>
+                                    <view v-if="field_show.includes('2')" :class="'desc ' + field_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="blog_desc">{{ item.data.describe || '' }}</view>
+                                </view>
+                                <view class="flex-row jc-sb gap-8" :class="blog_theme == '3' ? 'margin-left' : 'align-e margin-top'">
+                                    <view :style="blog_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</view>
+                                    <view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="blog_page_view">
+                                        <iconfont name="icon-eye" propContainerDisplay="flex"></iconfont>
+                                        <view>
+                                            {{ item.data.access_count ? item.data.access_count : '' }}
+                                        </view>
+                                    </view>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <view v-else class="oh" :class="blog_theme_class">
+                    <swiper class="swiper" circular :autoplay="is_roll ? true : false" :interval="interval_time" :next-margin="next_margin" :display-multiple-items="slides_per_group" :style="'height:' + carousel_height_computer">
+                        <swiper-item v-for="(item1, index1) in blog_carousel_list" :key="index1">
+                            <view class="flex-row ht-auto" :style="blog_spacing">
+                                <view v-for="(item, index) in item1.carousel_list" :key="index" class="item oh ht-auto" :style="blog_style" :data-value="item.data.url" @tap="url_event">
+                                    <view class="oh flex-col ht-auto" :style="blog_img_style">
+                                        <view class="oh pr wh-auto ht-auto flex-row">
+                                            <template v-if="item.new_cover.length > 0">
+                                                <image :src="item.new_cover[0].url" class="img" :style="img_radius + 'height:100%;'" mode="aspectFill" />
+                                            </template>
+                                            <template v-else>
+                                                <image :src="item.data.cover" class="img" :style="img_radius + 'height:100%;'" mode="aspectFill" />
+                                            </template>
+                                            <template v-if="field_show.includes('3') && name_float == '1'">
+                                                <view class="text-line-1" :style="blog_name + float_name_style">{{ item.new_title ? item.new_title : item.data.title }}</view>
+                                            </template>
+                                            <!-- 角标 -->
+                                            <subscriptIndex :propValue="propValue"></subscriptIndex>
+                                        </view>
+                                        <view v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || (field_show.includes('3') && name_float == '0')" class="jc-sb flex-1 flex-col" :style="blog_theme !== '0' ? content_padding : ''">
+                                            <view class="flex-col" :style="'gap:' + name_desc_space + 'px;'">
+                                                <view v-if="field_show.includes('3') && name_float == '0'" class="title text-line-2" :style="blog_name + blog_name_height_computer">{{ item.new_title ? item.new_title : item.data.title }}</view>
+                                                <view v-if="field_show.includes('2')" :class="'desc ' + field_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="blog_desc">{{ item.data.describe || '' }}</view>
+                                            </view>
+                                            <view :class="'flex-row jc-sb gap-8 align-e' + ((field_show.includes('3') && name_float == '0') || field_show.includes('2') ? ' margin-top' : '')">
+                                                <view :style="blog_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</view>
+                                                <view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="blog_page_view">
+                                                    <iconfont name="icon-eye" propContainerDisplay="flex"></iconfont>
+                                                    <view>
+                                                        {{ item.data.access_count ? item.data.access_count : '' }}
+                                                    </view>
+                                                </view>
+                                            </view>
+                                        </view>
+                                    </view>
+                                </view>
+                            </view>
+                        </swiper-item>
+                    </swiper>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    const app = getApp();
+    import { isEmpty, common_styles_computer, common_img_computer, padding_computer, radius_computer, get_math, gradient_handle, background_computer, gradient_computer, margin_computer, box_shadow_computer, border_computer, old_margin } from '@/common/js/common/common.js';
+    import subscriptIndex from '@/components/diy/modules/subscript/index.vue';
+    var system = app.globalData.get_system_info(null, null, true);
+    var sys_width = app.globalData.window_width_handle(system.windowWidth);
+    export default {
+        components: {
+            subscriptIndex,
+        },
+        props: {
+            propValue: {
+                type: Object,
+                default: () => {},
+            },
+            // 是否使用公共样式
+            propIsCommonStyle: {
+                type: Boolean,
+                default: true,
+            },
+            // 关键key
+            propKey: {
+                type: [String, Number],
+                default: '',
+            },
+            // 组件渲染的下标
+            propIndex: {
+                type: Number,
+                default: 1000000,
+            },
+        },
+        data() {
+            return {
+                style_container: '',
+                style_img_container: '',
+                style: '',
+                // 数据
+                data_list: [],
+                // 风格
+                blog_theme: '0',
+
+                // 是否显示
+                field_show: ['0', '1'],
+                // 博客
+                blog_name: '',
+                // 描述
+                blog_desc: '',
+                // 日期
+                blog_date: '',
+                // 浏览量
+                blog_page_view: '',
+                // 内容圆角
+                content_radius: '',
+                // 图片圆角
+                img_radius: '',
+                // 内间距
+                content_padding: '',
+                // 内容间距
+                content_spacing: '',
+                // 博客间距
+                blog_spacing: '',
+                // blog_item_height: '',
+
+                blog_style: '',
+                blog_img_style: '',
+                // 轮播图定时轮播
+                interval_time: 2000,
+                // 轮播图是否滚动
+                is_roll: 1,
+
+                blog_theme_class: '',
+                // 轮播高度
+                carousel_height_computer: '',
+                // 博客内容高度
+                blog_name_height_computer: '',
+                // 博客名称浮动样式
+                float_name_style: '',
+                name_float: '0',
+                // 图片大小
+                img_size: '',
+                // 博客轮播数据
+                blog_carousel_list: [],
+                // 博客描述间距
+                name_desc_space: 0,
+                // 一行显示的数量
+                slides_per_group: 1,
+                next_margin: '0rpx',
+                field_desc_row: '1',
+            };
+        },
+        watch: {
+            propKey(val) {
+                // 初始化
+                this.init();
+            },
+        },
+        created() {
+            this.init();
+        },
+        methods: {
+            // 初始化数据
+            init() {
+                const new_content = this.propValue.content || {};
+                const new_style = this.propValue.style || {};
+                // 描述样式
+                const desc_size = new_style.desc_size;
+                let desc_style = 'font-size:' + desc_size + 'px;line-height:' + desc_size + 'px;height:' + desc_size + 'px;color:' + new_style.desc_color + ';';
+                if (new_content.field_desc_row == '2') {
+                    desc_style = 'font-size:' + desc_size + 'px;line-height:' + (desc_size > 0 ? desc_size + 3 : 0 ) + 'px;height:'+ (desc_size > 0 ? (desc_size + 3) * 2 : 0) + 'px;color:' + new_style.desc_color + ';';
+                }
+                this.setData({
+                    field_desc_row: new_content.field_desc_row,
+                    name_float: !isEmpty(new_content.name_float) ? new_content.name_float : '0',
+                    // 判断是自动还是手动
+                    data_list:
+                        new_content.data_type == '0'
+                            ? new_content.data_list
+                            : new_content.data_auto_list && new_content.data_auto_list.length > 0
+                            ? new_content.data_auto_list.map((item) => ({
+                                  id: get_math(),
+                                  new_title: '',
+                                  new_cover: [],
+                                  data: item,
+                              }))
+                            : [],
+                    blog_theme_class: this.blog_theme_class_computer(new_content.theme),
+                    blog_theme: new_content.theme,
+                    field_show: new_content.field_show,
+                    // 样式
+                    blog_name: 'font-size:' + new_style.name_size + 'px;' + 'font-weight:' + new_style.name_weight + ';' + 'color:' + new_style.name_color + ';',
+                    blog_desc: desc_style,
+                    blog_date: 'font-size:' + new_style.time_size + 'px;' + 'font-weight:' + new_style.time_weight + ';' + 'color:' + new_style.time_color + ';',
+                    blog_page_view: 'font-size:' + new_style.page_view_size + 'px;' + 'font-weight:' + new_style.page_view_weight + ';' + 'color:' + new_style.page_view_color + ';',
+                    content_radius: radius_computer(new_style.content_radius),
+                    img_radius: radius_computer(new_style.img_radius),
+                    // 内间距
+                    content_padding: padding_computer(new_style.padding),
+                    // 内容间距
+                    content_spacing: `gap: ${new_style.content_spacing}px;`,
+                    // 博客间距
+                    blog_spacing: `gap: ${new_style.blog_spacing}px;`,
+                    // 描述间距
+                    name_desc_space: parseInt(new_style.name_desc_space),
+                    next_margin: new_style.rolling_fashion == 'translation' ? '-' + new_style.blog_spacing_margin + 'px' : '0rpx',
+                    // 博客内容高度
+                    slides_per_group: new_style.rolling_fashion == 'translation' ?  Number(new_content.carousel_col) + 1 : 1,
+
+                });
+                // 默认数据
+                const product_style_list = [
+                    { name: '单列展示', value: '0', width:110, height: 83 },
+                    { name: '两列展示（纵向）', value: '1', width:180, height: 180 },
+                    { name: '大图展示', value: '2', width:0, height: 180 },
+                    { name: '无图模式', value: '3', width:0, height: 0 },
+                    { name: '左右滑动展示', value: '4', width:0, height: 0 },
+                ];
+                const scale = sys_width / 390;
+                let img_style = ``;
+                if (['0'].includes(new_content.theme)) {
+                    // 图片宽度
+                    if (typeof new_style.content_img_width == 'number') {
+                        img_style += `width: ${ new_style.content_img_width * scale }px;`;
+                    } else {
+                        const list = product_style_list.filter(item => item.value == new_content.theme);
+                        if (list.length > 0) {
+                            img_style += `width: ${ list[0].width * scale }px;`;
+                        } else {
+                            img_style += 'width: auto;';
+                        }
+                    }
+                }
+                if (!['3', '4'].includes(new_content.theme)) {
+                    // 图片宽度
+                    if (typeof new_style.content_img_height == 'number') {
+                        img_style += `height: ${ new_style.content_img_height * scale }px;`;
+                    } else {
+                        const list = product_style_list.filter(item => item.value == new_content.theme);
+                        if (list.length > 0) {
+                            img_style += `height: ${ list[0].height * scale }px;`;
+                        } else {
+                            img_style += 'height: auto;';
+                        }
+                    }
+                }
+                // 背景图的处理
+                const blog_data = {
+                    background_img_style: new_style?.blog_background_img_style || '',
+                    background_img: new_style?.blog_background_img || '',
+                }
+                const blog_margin = new_style.value?.margin || old_margin;
+                const margin_width = blog_margin.margin_left + blog_margin.margin_right;
+                // 渐变效果
+                const all_style = gradient_handle(new_style?.blog_color_list || [], new_style?.blog_direction || '') + margin_computer(blog_margin) + box_shadow_computer(new_style) + border_computer(new_style);
+                // 博客样式
+                if (this.blog_theme == '0') {
+                    this.setData({
+                        img_size: img_style,
+                        blog_style:  this.content_radius + all_style,
+                        blog_img_style: this.content_spacing + this.content_padding + background_computer(blog_data)
+                    });
+                } else if (this.blog_theme == '1') {
+                    this.setData({
+                        img_size: img_style,
+                        blog_style: `width: calc(50% - ${new_style.blog_spacing + (margin_width * 2) / 2}px);` + this.content_radius + all_style,
+                        blog_img_style: background_computer(blog_data)
+                    });
+                } else if (this.blog_theme == '2') {
+                    this.setData({
+                        img_size: img_style,
+                        blog_style: this.content_radius + all_style,
+                        blog_img_style: background_computer(blog_data)
+                    });
+                } else if (this.blog_theme == '3') {
+                    this.setData({
+                        style: `padding: 0 ${new_style.content_spacing}px;background:#fff;` + this.content_radius,
+                    });
+                } else if (this.blog_theme == '4') {
+                    // 更新轮播图的key，确保更换时能重新更新轮播图
+                    const temp_carousel_col = new_content.carousel_col || '1';
+                    // 计算间隔的空间。(gap * gap数量) / 模块数量
+                    let gap = temp_carousel_col !== '0' ? ((new_style.blog_spacing * temp_carousel_col - 1) + (margin_width * temp_carousel_col)) / temp_carousel_col : '0';
+                    const multicolumn_columns_width = new_style.rolling_fashion == 'translation' ? `margin-right: ${ new_style.blog_spacing + blog_margin.margin_right }px;width:100%;` : `width:calc(${100 / (Number(temp_carousel_col) + 1)}% - ${gap * 2}rpx);min-width:calc(${100 / (Number(temp_carousel_col) + 1)}% - ${gap * 2}rpx);`;
+                    const { name_bg_color_list = [], name_bg_direction = '180deg', name_bg_radius, name_bg_padding, name_bg_margin } = new_style;
+                    const data = {
+                        color_list: name_bg_color_list,
+                        direction: name_bg_direction,
+                    }
+                    let location = 'position:absolute;bottom:0;left:0;right:0;'
+                    // 轮播宽度
+                    this.setData({
+                        // 滚动时间
+                        interval_time: (new_style.interval_time || 2) * 1000,
+                        // 是否滚动修改
+                        is_roll: new_style.is_roll,
+                        // blog_item_height: `height: ${new_style.blog_height }px`,
+                        blog_style: this.content_radius + all_style + multicolumn_columns_width,
+                        // 轮播高度
+                        carousel_height_computer: new_style.blog_height * scale + 'px',
+                        // 博客内容高度
+                        blog_name_height_computer: `height:${new_style.name_size * 2.4 * 2}rpx;line-height:${new_style.name_size * 1.2 * 2}rpx;`,
+                        float_name_style: gradient_computer(data) + (!isEmpty(name_bg_radius) ? radius_computer(name_bg_radius) : '') + (!isEmpty(name_bg_padding) ? padding_computer(name_bg_padding) : '' ) + (!isEmpty(name_bg_padding) ? margin_computer(name_bg_margin) : '') + location,
+                        blog_img_style: background_computer(blog_data)
+                    });
+                    // 博客轮播数据
+                    const cloneList = JSON.parse(JSON.stringify(this.data_list));
+                    // 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
+                    if (new_style.rolling_fashion != 'translation') {
+                        if (cloneList.length > 0) {
+                            // 每页显示的数量
+                            const num = Number(temp_carousel_col) + 1;
+                            // 存储数据显示
+                            let nav_list = [];
+                            // 拆分的数量
+                            const split_num = Math.ceil(cloneList.length / num);
+                            for (let i = 0; i < split_num; i++) {
+                                nav_list.push({ carousel_list: cloneList.slice(i * num, (i + 1) * num) });
+                            }
+                            this.setData({
+                                blog_carousel_list: nav_list,
+                            });
+                        } else {
+                            // 否则的话，就返回全部的信息
+                            this.setData({
+                                blog_carousel_list: [{ carousel_list: cloneList }],
+                            });
+                        }
+                    } else {
+                        // 存储数据显示
+                        let nav_list = [];
+                        cloneList.forEach((item) => {
+                            nav_list.push({
+                                carousel_list: [item],
+                            });
+                        });
+                        this.setData({
+                            blog_carousel_list: nav_list,
+                        });
+                    }
+                }
+
+                if (this.propIsCommonStyle) {
+                    this.setData({
+                        style_container: common_styles_computer(new_style.common_style),
+                        style_img_container: common_img_computer(new_style.common_style, this.propIndex),
+                    });
+                }
+            },
+            // 博客主题样式
+            blog_theme_class_computer(theme) {
+                switch (theme) {
+                    case '0':
+                        return 'style1 flex-col';
+                    case '1':
+                        return 'style2 flex-row flex-wrap';
+                    case '2':
+                        return 'style3 flex-col';
+                    case '3':
+                        return 'style4 flex-col';
+                    default:
+                        return 'style5';
+                }
+            },
+            // 跳转链接
+            url_event(e) {
+                app.globalData.url_event(e);
+            },
+        },
+    };
+</script>
+<style lang="scss" scoped>
+    .style1 {
+        .item {
+            max-width: 100%;
+        }
+    }
+    .style2 {
+        .item {
+            .img {
+                width: 100%;
+            }
+        }
+    }
+    .style3 {
+        .item {
+            width: 100%;
+            .img {
+                width: 100%;
+            }
+        }
+    }
+    .style4 {
+        .item {
+            width: 100%;
+            &:not(:last-child) {
+                border-bottom: 2rpx solid #eee;
+            }
+        }
+    }
+    .style5 {
+        .item {
+            width: 100%;
+            .img {
+                width: 100%;
+            }
+        }
+    }
+</style>
diff --git a/components/diy/blog-tabs.vue b/components/diy/blog-tabs.vue
new file mode 100644
index 00000000..9cf1771c
--- /dev/null
+++ b/components/diy/blog-tabs.vue
@@ -0,0 +1,264 @@
+<template>
+    <!-- 文章列表 -->
+    <view class="blog-tabs" :class="'blog-tabs-' + propKey" :style="style_container">
+        <view :style="style_img_container">
+            <componentDiyModulesTabsView :propKey="propKey" :propValue="blog_tabs" :propIsTop="top_up == '1'" :propTop="sticky_top" :propStyle="tabs_style" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propCustomNavHeight="propIsTabsUseSafeDistance ? (propCustomNavHeight * 2 + 'rpx') : '0rpx'" :propTabsBackground="tabs_background" :propTabsSlidingFixedBg="tabs_sliding_fixed_bg" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
+            <view :style="blog_margin_top">
+                <view :style="blog_container">
+                    <view :style="blog_img_container">
+                        <componentDiyBlogList :propKey="diy_key" :propValue="blog_tabs" :propIsCommonStyle="false"></componentDiyBlogList>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    const app = getApp();
+    import { common_styles_computer, common_img_computer, padding_computer, margin_computer, background_computer, gradient_computer, radius_computer, isEmpty, box_shadow_computer, border_computer, old_border_and_box_shadow, old_margin, old_padding } from '@/common/js/common/common.js';
+    import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
+    import componentDiyBlogList from '@/components/diy/blog-list'; // 状态栏高度
+    var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
+    // #ifdef MP-TOUTIAO
+    bar_height = 0;
+    // #endif
+    export default {
+        props: {
+            propValue: {
+                type: Object,
+                default: () => {},
+            },
+            // 距离顶部高度
+            propTop: {
+                type: Number,
+                default: 0,
+            },
+            // 自定义导航栏高度
+            propCustomNavHeight: {
+                type: Number,
+                default: 33,
+            },
+            // 滚动距离
+            propScrollTop: {
+                type: Number,
+                default: 0,
+            },
+            // 顶部导航是否开启沉浸模式
+            propIsImmersionModel: {
+                type: Boolean,
+                default: false,
+            },
+            propKey: {
+                type: [String, Number],
+                default: '',
+            },
+            // 组件渲染的下标
+            propIndex: {
+                type: Number,
+                default: 1000000,
+            },
+            // 选项卡是否使用安全距离
+            propIsTabsUseSafeDistance: {
+                type: Boolean,
+                default: true
+            }
+        },
+        components: {
+            componentDiyModulesTabsView,
+            componentDiyBlogList,
+        },
+        data() {
+            return {
+                style_container: '',
+                style_img_container: '',
+                style: '',
+                blog_tabs: {},
+                // 是否滑动置顶
+                top_up: '0',
+                tabs_style: '',
+                tabs_top: 0,
+                tabs_background: 'background:transparent',
+                custom_nav_height: 33,
+                diy_key: '',
+                // 选项卡背景设置
+                blog_margin_top: '',
+                tabs_container: '',
+                tabs_img_container: '',
+                tabs_sliding_fixed_bg: '',
+                // 商品区域背景设置
+                blog_container: '',
+                blog_img_container: '',
+                // #ifdef MP
+                nav_safe_space: bar_height + 5,
+                // #endif
+                // #ifdef H5 || MP-TOUTIAO
+                nav_safe_space: bar_height + 7,
+                // #endif
+                // #ifdef APP
+                nav_safe_space: bar_height + 0,
+                // #endif
+                // 选项卡默认数据
+                tabs_index: 0,
+                sticky_top: 0,
+            };
+        },
+        watch: {
+            // 监听滚动距离
+            propScrollTop(newVal) {
+                if (newVal + this.sticky_top + this.custom_nav_height > this.tabs_top + this.nav_safe_space && this.top_up == '1') {
+                    let new_style = this.propValue.style || {};
+                    let tabs_bg = new_style.common_style.color_list;
+                    let new_tabs_background = '';
+                    if (tabs_bg.length > 0 && (tabs_bg[0].color || null) != null) {
+                        new_tabs_background = gradient_computer(new_style.common_style);
+                    }
+                    let new_tabs_background_img = background_computer(new_style.common_style);
+                    if (new_tabs_background_img.length > 0) {
+                        new_tabs_background_img += 'background-position: top left;';
+                    }
+                    this.tabs_background = (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff;') + new_tabs_background_img;
+                } else {
+                    this.tabs_background = 'background:transparent';
+                }
+            },
+            propTop(val) {
+                this.init();
+            },
+            propKey(val) {
+                this.setData({
+                    diy_key: val,
+                });
+                // 初始化
+                this.init();
+            },
+        },
+        created() {
+            this.init();
+        },
+        mounted() {
+            this.$nextTick(() => {
+                const self = this;
+                setTimeout(() => {
+                    self.getTop();
+                });
+                // #ifdef H5 || MP-TOUTIAO
+                // 获取自定义导航栏高度
+                this.setData({
+                    custom_nav_height: this.propCustomNavHeight,
+                });
+                // #endif
+            });
+        },
+        methods: {
+            // 初始化数据
+            init() {
+                let new_content = this.propValue.content || {};
+                let new_style = this.propValue.style || {};
+                let new_data = JSON.parse(JSON.stringify(this.propValue));
+
+                const new_tabs_data = new_data.content.tabs_list[this.tabs_index] || {};
+                new_data.content.theme = new_data.content.blog_theme;
+                new_data.content.data_type = new_tabs_data.data_type;
+                new_data.content.category = new_tabs_data.category;
+                new_data.content.carousel_col = new_data.content.blog_carousel_col;
+                new_data.content.data_list = new_tabs_data.data_list;
+                new_data.content.data_auto_list = new_tabs_data.data_auto_list;
+                new_data.content.data_ids = new_tabs_data.data_ids;
+                new_data.content.number = new_tabs_data.number;
+                new_data.content.sort = new_tabs_data.sort;
+                new_data.content.sort_rules = new_tabs_data.sort_rules;
+                new_data.content.field_show = new_data.content.field_show;
+                new_data.content.is_cover = new_tabs_data.is_cover;
+                // 公共样式
+                const common_style = new_style.common_style;
+                let tabs_style_obj = {
+                    padding_top: common_style.padding_top - this.propCustomNavHeight < 0 ? 0 : common_style.padding_top - this.propCustomNavHeight,
+                    padding_left: common_style.padding_left,
+                    padding_right: common_style.padding_right,
+                };
+                let new_tabs_style = padding_computer(tabs_style_obj) + margin_computer(tabs_style_obj) + `position:relative;left: -${tabs_style_obj.padding_left * 2}rpx;right: -${tabs_style_obj.padding_right * 2}rpx;width:100%;`;
+                // 如果是历史数据的话，就执行默认添加下边距
+                if (isEmpty(new_style.tabs_padding)) {
+                    new_tabs_style += 'padding-bottom: 20rpx;';
+                }
+                const { tabs_bg_color_list = [], tabs_bg_direction = '', tabs_bg_background_img_style = '', tabs_bg_background_img = [], tabs_radius = old_radius, tabs_padding = old_padding, blog_content_color_list = [], blog_content_direction = '', blog_content_background_img_style = '', blog_content_background_img = [], blog_content_margin = old_margin, blog_content_padding = old_padding, blog_content_radius = old_radius } = new_style;
+                // 选项卡背景设置
+                const tabs_data = {
+                    color_list: tabs_bg_color_list,
+                    direction: tabs_bg_direction,
+                    background_img_style: tabs_bg_background_img_style,
+                    background_img: tabs_bg_background_img,
+                };
+                // 文章区域背景设置
+                const blog_content_data = {
+                    color_list: blog_content_color_list,
+                    direction: blog_content_direction,
+                    background_img_style: blog_content_background_img_style,
+                    background_img: blog_content_background_img,
+                };
+                const blog_content = new_style?.blog_content || old_border_and_box_shadow;
+                const tabs_content = new_style?.tabs_content || old_border_and_box_shadow;
+                this.setData({
+                    top_up: new_content.tabs_top_up,
+                    sticky_top: this.propTop + (new_style?.tabs_margin?.margin_top || 0),
+                    blog_tabs: new_data,
+                    style_container: common_styles_computer(common_style) + (new_content.tabs_top_up == '1' ? 'overflow: unset;' : ''),
+                    style_img_container: common_img_computer(common_style, this.propIndex) + radius_computer(common_style) +(new_content.tabs_top_up == '1' ? 'overflow: unset;' : ''),
+                    tabs_style: new_tabs_style,
+                    blog_margin_top:  'margin-top:' + (new_style?.blog_content_spacing || 0) * 2 + 'rpx',
+                    tabs_sliding_fixed_bg: gradient_computer(tabs_data),
+                    tabs_container: gradient_computer(tabs_data) + radius_computer(tabs_radius) + margin_computer(new_style?.tabs_margin || old_margin) + border_computer(tabs_content) + box_shadow_computer(tabs_content) + 'overflow: hidden;',
+                    tabs_img_container: background_computer(tabs_data) + padding_computer(tabs_padding) + 'box-sizing: border-box;overflow: hidden;',
+                    blog_container: gradient_computer(blog_content_data) + margin_computer(blog_content_margin) + radius_computer(blog_content_radius) + box_shadow_computer(blog_content) + border_computer(blog_content) + 'overflow: hidden;',
+                    blog_img_container: background_computer(blog_content_data) + padding_computer(blog_content_padding) + 'box-sizing: border-box;overflow: hidden;',
+                });
+            },
+            // tabs切换事件
+            tabs_click_event(index) {
+                let new_data = JSON.parse(JSON.stringify(this.propValue));
+                new_data.content.theme = new_data.content.blog_theme;
+                new_data.content.data_type = new_data.content.tabs_list[index].data_type;
+                new_data.content.category = new_data.content.tabs_list[index].category;
+                new_data.content.carousel_col = new_data.content.blog_carousel_col;
+                new_data.content.data_list = new_data.content.tabs_list[index].data_list;
+                new_data.content.data_auto_list = new_data.content.tabs_list[index].data_auto_list;
+                new_data.content.data_ids = new_data.content.tabs_list[index].data_ids;
+                new_data.content.number = new_data.content.tabs_list[index].number;
+                new_data.content.sort = new_data.content.tabs_list[index].sort;
+                new_data.content.sort_rules = new_data.content.tabs_list[index].sort_rules;
+                new_data.content.field_show = new_data.content.field_show;
+                new_data.content.is_cover = new_data.content.tabs_list[index].is_cover;
+                this.setData({
+                    tabs_index: index,
+                    blog_tabs: new_data,
+                    diy_key: Math.random(),
+                });
+            },
+            // 获取商品距离顶部的距离
+            getTop() {
+                const query = uni.createSelectorQuery().in(this);
+                query
+                    .select('.blog-tabs-' + this.propKey)
+                    .boundingClientRect((res) => {
+                        if ((res || null) != null) {
+                            let new_data = typeof this.propValue == 'string' ? JSON.parse(JSON.stringify(this.propValue)) : this.propValue;
+                            const new_style = new_data.style || {};
+                            this.setData({
+                                tabs_top: res.top - (new_style.common_style?.margin_top || 0) + (new_style?.tabs_margin?.margin_top || 0),
+                            });
+                        }
+                    })
+                    .exec();
+            },
+        },
+    };
+</script>
+<style lang="scss" scoped>
+    .tabs-container {
+        position: relative;
+        width: 100%;
+        left: 0;
+        right: 0;
+    }
+</style>
diff --git a/components/diy/modules/img-or-icon-or-text.vue b/components/diy/modules/img-or-icon-or-text.vue
new file mode 100644
index 00000000..b9d58e10
--- /dev/null
+++ b/components/diy/modules/img-or-icon-or-text.vue
@@ -0,0 +1,85 @@
+<template>
+    <view v-if="is_show" :style="corner_marker">
+        <view class="flex-row nowrap oh" :style="corner_img_marker">
+            <template v-if="type_boolean">
+                <template v-if="!isEmpty(type_img)">
+                    <image-empty v-model="type_img[0]" :style="img_style"></image-empty>
+                </template>
+                <template v-else>
+                    <iconfont :name="'icon-' + type_icon" :size="new_type_size + ''" :color="new_type_color"></iconfont>
+                </template>
+            </template>
+            <template v-else>
+                <span class="text-line-1" :style="'font-size:' + new_type_size * 2 + 'rpx;color:' + new_type_color">{{ type_text }}</span>
+            </template>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { isEmpty, common_styles_computer, padding_computer } from '@/common/js/common/common.js';
+    export default {
+        props: {
+            propValue: {
+                type: Object,
+                default: () => {
+                    return {};
+                },
+            },
+            propType: {
+                type: String,
+                default: '',
+            },
+        },
+        data() {
+            return {
+                is_show: false,
+                type_boolean: false,
+                type_img: [],
+                type_icon: '',
+                type_text: '',
+                new_type_size: 0,
+                new_type_color: '',
+                img_style: '',
+            };
+        },
+        watch: {
+            propValue(val) {
+                this.init();
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods: {
+            isEmpty,
+            init() {
+                const content = this.propValue.content || {};
+                const new_style = this.propValue.style || {};
+                // 取出某一个对应的数据信息
+                const new_type_style = new_style[`${ this.propType }_style`] || {};
+                this.setData({
+                    is_show: content[`is_${ this.propType }_show`] == '1',
+                    type_boolean: content[`${ this.propType }_type`] == 'img-icon',
+                    type_img: content[`${ this.propType }_img`] || [],
+                    type_icon: content[`${ this.propType }_icon`] || '',
+                    type_text: content[`${ this.propType }_text`] || '',
+                    // 取出对应的大小显示
+                    new_type_size: new_type_style?.size || 0,
+                    new_type_color: new_type_style?.color || '',
+                    // 大小设置
+                    corner_marker: common_styles_computer(new_type_style),
+                    corner_img_marker: padding_computer(new_type_style),
+                    // 图片设置
+                    img_style: `height: ${ new_type_style.img_height }px; width: ${ new_type_style.img_width }px`,
+                })
+            },
+        },
+    };
+</script>
+<style lang="scss" scoped>
+    .img_wh {
+        width: 100%;
+        height: 100%;
+    }
+</style>
diff --git a/components/diy/realstore.vue b/components/diy/realstore.vue
new file mode 100644
index 00000000..d91676c0
--- /dev/null
+++ b/components/diy/realstore.vue
@@ -0,0 +1,434 @@
+<template>
+    <view class="oh" :style="style_container">
+        <view :style="style_img_container">
+            <view :class="outer_class" :style="onter_style">
+                <template v-if="!['3'].includes(theme)">
+                    <view v-for="(item, index) in list" :key="index" class="pr oh" :style="layout_style" :data-value="item.url" @tap.stop="url_event">
+                        <view class="flex-col" :style="layout_img_style">
+                            <view :class="['oh wh-auto ht-auto', ['0'].includes(theme) ? 'flex-row' : 'flex-col' ]">
+                                <template v-if="!isEmpty(item)">
+                                    <view class="oh pr" :style="img_size">
+                                        <view v-if="!isEmpty(item.new_cover)" :style="img_size">
+                                            <imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
+                                        </view>
+                                        <view v-else :style="img_size">
+                                            <imageEmpty :propImageSrc="item.logo" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
+                                        </view>
+                                    </view>
+                                </template>
+                                <view class="flex-1 flex-col" :style="content_style">
+                                    <view class="flex-col jc-sb gap-10">
+                                        <view class="flex-row jc-sb align-c gap-10">
+                                            <view class="flex-row align-c gap-3">
+                                                <view v-if="(item.alias || null) != null" :style="shop_label_style">{{ item.alias }}</view>
+                                                <view class="text-line-2" :style="title_style">{{ item.name }}</view>
+                                            </view>
+                                            <view v-if="['0', '2'].includes(theme) && (!isEmpty(item.service_data.service_tel) || (item.lat != 0 && item.lng != 0))" class="flex-row align-c" :style="'gap:' + new_style.phone_navigation_spacing * 2 + 'rpx;'">
+                                                <view v-if="!isEmpty(item.service_data.service_tel)" :data-value="item.service_data.service_tel" @tap.stop="tel_event">
+                                                    <imgOrIconOrText :propValue="propValue" propType="phone"/>
+                                                </view>
+                                                <view v-if="item.lat != 0 && item.lng != 0" :data-index="index" @tap.stop="address_map_event">
+                                                    <imgOrIconOrText :propValue="propValue" propType="navigation"  />
+                                                </view>
+                                            </view>
+                                        </view>
+                                        <view class="flex-row gap-2 align-c">
+                                            <imgOrIconOrText :propValue="propValue" propType="time" />
+                                            <view v-if="!isEmpty(item.status_info)" class="flex-1 flex-row align-c">
+                                                <span class="text-line-1" :style="state_style + `color: ${ item.status_info.status == 1 ? new_style.realstore_state_color : new_style.realstore_default_state_color }`">{{ item.status_info.msg }}</span>
+                                                <span v-if="!isEmpty(item.status_info.msg) || !isEmpty(item.status_info.time)" :style="'color: #ccc;' + margin_computer(new_style.realstore_business_distance)">|</span>
+                                                <span class="text-line-1" :style="business_hours_style">{{ item.status_info.time }}</span>
+                                            </view>
+                                        </view>
+                                    </view>
+                                    <template v-if="theme !== '0' && (form.is_location_show == '1' || form.is_location_distance_show == '1' || form.is_location_title_show == '1')">
+                                        <view :style="border_style"></view>
+                                        <view class="flex-row jc-sb align-c gap-10">
+                                            <view class="flex-1 flex-row align-c jc-sb">
+                                                <view class="flex-1 flex-row align-b gap-2">
+                                                    <imgOrIconOrText :propValue="propValue" propType="location" />
+                                                    <span v-if="form.is_location_title_show == '1'" class="text-line-2 flex-1" :style="location_style">{{ item.province_name }}{{ item.city_name }}{{ item.county_name }}{{ item.address }}</span>
+                                                </view>
+                                                <span v-if="!isEmpty(item.distance) && theme != '1' && form.is_location_distance_show == '1'" :style="distance_style">距您{{ item.distance || '0km' }}</span>
+                                            </view>
+                                            <view v-if="!['0', '2'].includes(theme) && item.lat != 0 && item.lng != 0" :data-index="index" @tap.stop="address_map_event" >
+                                                <imgOrIconOrText :propValue="propValue" propType="navigation" />
+                                            </view>
+                                        </view>
+                                    </template>
+                                </view>
+                            </view>
+                            <template v-if="theme == '0' && (form.is_location_show == '1' || form.is_location_distance_show == '1' || form.is_location_title_show == '1')">
+                                <view :style="border_style"></view>
+                                <view class="flex-row align-c jc-sb">
+                                    <view class="flex-1 flex-row align-b gap-2">
+                                        <imgOrIconOrText :propValue="propValue" propType="location" />
+                                        <span v-if="form.is_location_title_show == '1'" class="text-line-2 flex-1" :style="location_style">{{ item.province_name }}{{ item.city_name }}{{ item.county_name }}{{ item.address }}</span>
+                                    </view>
+                                    <span v-if="form.is_location_distance_show == '1' && !isEmpty(item.distance)" :style="distance_style">距您{{ item.distance || '' }}</span>
+                                </view>
+                            </template>
+                        </view>
+                    </view>
+                </template>
+                <template v-else>
+                    <swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :next-margin="new_style.rolling_fashion == 'translation' ? '-' + content_outer_spacing_magin : '0rpx'" :display-multiple-items="slides_per_group" :style="{ width: '100%', height: new_style.content_outer_height * new_scale + 'px' }">
+                        <swiper-item v-for="(item1, index1) in realstore_content_list" :key="index1">
+                            <view class="flex-row wh-auto ht-auto" :style="onter_style">
+                                <view v-for="(item, index) in item1.split_list" :key="index" class="pr oh" :style="layout_style" :data-value="item.url" @tap.stop="url_event">
+                                    <view :class="['oh wh-auto ht-auto', ['0', '4'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
+                                        <template v-if="!isEmpty(item)">
+                                            <view class="oh pr wh-auto ht-auto">
+                                                <view v-if="!isEmpty(item.new_cover)" class="wh-auto ht-auto">
+                                                    <imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
+                                                </view>
+                                                <view v-else class="wh-auto ht-auto">
+                                                    <imageEmpty :propImageSrc="item.logo" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
+                                                </view>
+                                            </view>
+                                        </template>
+                                        <view class="flex-1 flex-col jc-sb gap-10" :style="content_style">
+                                            <view class="flex-row align-c gap-3">
+                                                <view v-if="(item.alias || null) != null" :style="shop_label_style">{{ item.alias }}</view>
+                                                <view class="text-line-2" :style="title_style">{{ item.name }}</view>
+                                            </view>
+                                            <view class="flex-row jc-sb align-c">
+                                                <view class="flex-1 flex-row gap-2 align-c">
+                                                    <imgOrIconOrText :propValue="propValue" propType="time" />
+                                                    <span v-if="!isEmpty(item.status_info)" class="text-line-1" :style="state_style + `color: ${ item.status_info.status == 1 ? new_style.realstore_state_color : new_style.realstore_default_state_color }`">{{ item.status_info.msg }}</span>
+                                                </view>
+                                                <view v-if="item.lat != 0 && item.lng != 0" :data-index="index1" :data-split="index" @tap.stop="address_map_event">
+                                                    <imgOrIconOrText :propValue="propValue" propType="navigation" />
+                                                </view>
+                                            </view>
+                                        </view>
+                                    </view>
+                                </view>
+                            </view>
+                        </swiper-item>
+                    </swiper>
+                </template>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    const app = getApp();
+    import { isEmpty, common_styles_computer, common_img_computer, gradient_handle, padding_computer, radius_computer, background_computer, border_computer, box_shadow_computer, old_margin, margin_computer } from '@/common/js/common/common.js';
+    import imageEmpty from '@/components/diy/modules/image-empty.vue';
+    import subscriptIndex from '@/components/diy/modules/subscript/index.vue';
+    import imgOrIconOrText from '@/components/diy/modules/img-or-icon-or-text.vue';
+    var system = app.globalData.get_system_info(null, null, true);
+    var sys_width = app.globalData.window_width_handle(system.windowWidth);
+    export default {
+        components: {
+            imageEmpty,
+            imgOrIconOrText,
+            subscriptIndex
+        },
+        props: {
+            propValue: {
+                type: Object,
+                default: () => ({}),
+            },
+            propKey: {
+                type: [String, Number],
+                default: '',
+            },
+            // 组件渲染的下标
+            propIndex: {
+                type: Number,
+                default: 0,
+            },
+        },
+        data() {
+            return {
+                form: {},
+                new_style: {},
+                propIsCartParaCurve: false,
+                list: [],
+                content_radius: '', // 圆角设置
+                content_img_radius: '', // 图片圆角设置
+                content_padding: '', // 内边距设置
+                theme: '', // 选择的风格
+                content_outer_spacing: '', // 商品间距
+                content_outer_spacing_magin: '', // 商品间距
+                // 最外层不同风格下的显示
+                outer_class: '',
+                onter_style: '',
+                // 不同风格下的样式
+                layout_style: '',
+                layout_img_style: '',
+                content_style: '', // 内容区域的样式
+                show_content: false, // 显示除标题外的其他区域
+                text_line: '', // 超过多少行隐藏
+                style_container: '', // 公共样式
+                style_img_container: '',
+                realstore_content_list: [],
+                slides_per_group: 1,
+                border_style: '',
+                // 内容样式
+                title_style: '',
+                state_style: '',
+                business_hours_style: '',
+                distance_style: '',
+                location_style: '',
+                // 图片大小
+                img_size: '',
+                shop_label_style: '',
+                new_scale: 1,
+            };
+        },
+        watch: {
+            propKey(val) {
+                this.init();
+            },
+            propValue(new_value, old_value) {
+                this.init();
+            },
+        },
+        created() {
+            this.init();
+        },
+        methods: {
+            isEmpty, margin_computer,
+            init() {
+                const new_form = this.propValue.content || null;
+                const new_style = this.propValue.style || null;
+                if (new_form != null && new_style != null) {
+                    const default_list = {
+                        name: '测试门店标题',
+                        province_name: '测试地址',
+                        alias: '上海门店',
+                        city_name: '',
+                        county_name: '',
+                        address: '',
+                        logo: '',
+                        new_cover: [],
+                        distance: '12km',
+                        status_info: {
+                            msg: '营业中',
+                            time: '7:00-22:00',
+                            status: 1,
+                            type: 0,
+                        },
+                    };
+                    let new_list = [];
+                    // 指定商品并且指定商品数组不为空
+                    if (!isEmpty(new_form.data_list) && new_form.data_type == '0') {
+                        new_list = new_form.data_list.map((item) => ({
+                            ...item.data,
+                            title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
+                            new_cover: item.new_cover,
+                        }));
+                    } else if (!isEmpty(new_form.data_auto_list) && new_form.data_type == '1') {
+                        // 筛选商品并且筛选商品数组不为空
+                        new_list = new_form.data_auto_list;
+                    } else {
+                        new_list = Array(4).fill(default_list);
+                    }
+                    console.log(new_list);
+                    // 最外层不同风格下的显示
+                    const flex = ['0', '2'].includes(new_form.theme) ? 'flex-col ' : 'flex-row ';
+                    const wrap = new_form.theme == '3' ? '' : 'flex-wrap ';
+                    // 默认数据
+                    const realstore_style_list = [
+                        { name: '单列展示', value: '0', width: 50, height: 50 },
+                        { name: '两列展示（纵向）', value: '1', width:180, height: 180 },
+                        { name: '大图展示', value: '2', width:0, height: 180 },
+                        { name: '左右滑动展示', value: '3', width:0, height: 0 },
+                    ];
+                    const scale = sys_width / 390;
+                    let img_style = ``;
+                    if (['0'].includes(new_form.theme)) {
+                        // 图片宽度
+                        if (typeof new_style.content_img_width == 'number') {
+                            img_style += `width: ${ new_style.content_img_width * scale }px;`;
+                        } else {
+                            const list = realstore_style_list.filter(item => item.value == new_form.theme);
+                            if (list.length > 0) {
+                                img_style += `width: ${ list[0].width * scale }px;`;
+                            } else {
+                                img_style += 'width: auto;';
+                            }
+                        }
+                    }
+                    if (!['3'].includes(new_form.theme)) {
+                        // 图片宽度
+                        if (typeof new_style.content_img_height == 'number') {
+                            img_style += `height: ${ new_style.content_img_height * scale }px;`;
+                        } else {
+                            const list = realstore_style_list.filter(item => item.value == new_form.theme);
+                            if (list.length > 0) {
+                                img_style += `height: ${ list[0].height * scale }px;`;
+                            } else {
+                                img_style += 'height: auto;';
+                            }
+                        }
+                    }
+                    this.setData({
+                        form: new_form,
+                        new_style: new_style,
+                        outer_class: flex + wrap + 'oh',
+                        onter_style: `gap: ${new_style.content_outer_spacing * 2 + 'rpx'};`,
+                        list: new_list,
+                        new_scale: scale,
+                        content_radius: radius_computer(new_style.realstore_radius), // 圆角设置
+                        content_img_radius: radius_computer(new_style.realstore_img_radius), // 图片圆角设置
+                        content_padding: padding_computer(new_style.realstore_padding) + 'box-sizing: border-box;', // 内边距设置
+                        theme: new_form.theme, // 选择的风格
+                        title_style: this.trends_config('title', new_style),
+                        state_style: this.trends_config('state', new_style),
+                        business_hours_style: this.trends_config('business_hours', new_style),
+                        distance_style: this.trends_config('distance', new_style),
+                        location_style: this.trends_config('location', new_style),
+                        realstore_content_list: this.get_realstore_content_list(new_list, new_form, new_style),
+                        img_size: img_style,
+                        shop_label_style: this.get_shop_label_style(new_style),
+                        border_style: this.get_border_style(new_style),
+                        layout_style: this.get_layout_style(new_form, new_style),
+                        layout_img_style: this.get_layout_img_style(new_form, new_style),
+                        content_style: this.get_content_style(new_form, new_style),
+                        slides_per_group: new_style.rolling_fashion == 'translation' ? new_form.carousel_col : 1,
+                        style_container: common_styles_computer(new_style.common_style), // 公共样式
+                        style_img_container: common_img_computer(new_style.common_style, this.propIndex), // 图片样式
+                    });
+                }
+            },
+            // 标签显示
+            get_shop_label_style(new_style) {
+                const { shop_lable_color, shop_lable_size, shop_lable_padding, shop_lable_radius, shop_lable_color_list, shop_lable_direction, shop_lable_border_color, shop_lable_border_size } = new_style;
+                return `color: ${ shop_lable_color };font-size: ${ shop_lable_size }px;${ padding_computer(shop_lable_padding) };${ radius_computer(shop_lable_radius) };${ gradient_handle(shop_lable_color_list, shop_lable_direction) };border: ${ shop_lable_border_size }px solid ${ shop_lable_border_color };` 
+            },
+            // 根据传递的参数，从对象中取值
+            trends_config(key, new_style) {
+                return this.style_config(new_style[`realstore_${key}_typeface`], new_style[`realstore_${key}_size`], new_style[`realstore_${key}_color`]);
+            },
+            // 根据传递的值，显示不同的内容
+            style_config(typeface, size, color) {
+                return `font-weight:${typeface}; font-size: ${size}px;color: ${color};`;
+            },
+            get_realstore_content_list(list, form, new_style) {
+                // 深拷贝一下，确保不会出现问题
+                const cloneList = JSON.parse(JSON.stringify(list));
+                if (new_style.rolling_fashion != 'translation') {
+                    // 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
+                    if (cloneList.length > 0) {
+                        // 每页显示的数量
+                        const num = form.carousel_col;
+                        // 存储数据显示
+                        let 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,
+                            },
+                        ];
+                    }
+                } else {
+                    // 存储数据显示
+                    let nav_list = [];
+                    cloneList.forEach((item) => {
+                        nav_list.push({
+                            split_list: [item],
+                        });
+                    });
+                    return nav_list;
+                }
+            },
+            get_border_style(new_style) {
+                const { content_border_margin, content_border_size, content_border_is_show, content_border_color, content_border_style } = new_style;
+                let border = ``;
+                if (content_border_is_show == '1') {
+                    border += `${ margin_computer(content_border_margin) };border-width: ${content_border_size}px 0px 0px 0px;border-style: ${ content_border_style };border-color: ${content_border_color};`
+                }
+                return border;
+            },
+            // 容器样式
+            get_layout_style(form, new_style) {
+                const { realstore_margin, realstore_radius, realstore_color_list, realstore_direction } = new_style;
+                const radius = radius_computer(realstore_radius);
+                // 计算每个容器的大小
+                let size_style = ``;
+                const realstore_left_right_width = realstore_margin.margin_left + realstore_margin.margin_right;
+                if (['1'].includes(form.theme)) {
+                    size_style = `width: calc((100% - ${new_style.content_outer_spacing * 2 + (realstore_left_right_width * 4) + 'rpx'}) / 2);`;;
+                } else if (form.theme == '3') {
+                    // 如果不是平移的时候执行
+                    if (new_style.rolling_fashion != 'translation') {
+                        size_style = `width: ${this.get_multicolumn_columns_width(new_style, form)};min-width: ${this.get_multicolumn_columns_width(new_style, form)};height: ${new_style.content_outer_height * (sys_width / 390) + 'px'};`;
+                    } else {
+                        size_style = `margin-right: ${ (new_style.content_outer_spacing * 2) + (realstore_margin.margin_right * 2) }rpx;width: 100%;height: 100%;`;
+                    }
+                } else if (form.theme == '0') {
+                    size_style = `width: calc(100% - ${ realstore_left_right_width }px);`;
+                }
+                const gradient = gradient_handle(realstore_color_list, realstore_direction) + margin_computer(realstore_margin) + border_computer(new_style) + box_shadow_computer(new_style);
+                return `${radius} ${ gradient } ${ size_style }`;
+            },
+            get_multicolumn_columns_width(new_style, form) {
+                const { carousel_col } = form;
+                // 计算间隔的空间。(gap * gap数量) / 模块数量
+                let gap = (new_style.content_outer_spacing * (carousel_col - 1)) / carousel_col;
+                return `calc(${100 / carousel_col}% - ${gap * 2}rpx)`;
+            },
+            // 容器图片样式
+            get_layout_img_style(form, new_style) {
+                const { realstore_padding, realstore_background_img_style, realstore_background_img } = new_style;
+                const padding = form.theme == '0' ? padding_computer(realstore_padding) : '';
+                const data = {
+                    background_img_style: realstore_background_img_style,
+                    background_img: realstore_background_img,
+                }
+                return padding + background_computer(data);
+            },
+            get_content_style(form, new_style) {
+                const spacing_value = new_style.content_spacing;
+                let spacing = '';
+                if (['0'].includes(form.theme)) {
+                    spacing = `margin-left: ${spacing_value}px;`;
+                } else {
+                    spacing = padding_computer(new_style.realstore_padding);
+                }
+                return `${spacing}`;
+            },
+            // 电话
+            tel_event(e) {
+                console.log(e);
+                
+                app.globalData.call_tel(e);
+            },
+            // 地图查看
+            address_map_event(e) {
+                let info = this.list[e.currentTarget.dataset.index] || {};
+                // 判断是否是轮播传递过来的数据
+                if (!isEmpty(e.currentTarget.dataset.split)) {
+                    const old_info = this.realstore_content_list[e.currentTarget.dataset.index].split_list || {};
+                    info = old_info[e.currentTarget.dataset.split] || {};
+                }
+                if (info.lat == 0 || info.lng == 0) {
+                    app.globalData.showToast(this.$t('user-order-detail.user-order-detail.i876o3'));
+                    return false;
+                }
+                var address = (info.province_name || "") + (info.city_name || "") + (info.county_name || "") + (info.address || "");
+                app.globalData.open_location(info.lng, info.lat, info.name, address);
+            },
+            url_event(e) {
+                app.globalData.url_event(e);
+            },
+        },
+    };
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/components/diy/shop.vue b/components/diy/shop.vue
new file mode 100644
index 00000000..ac79d244
--- /dev/null
+++ b/components/diy/shop.vue
@@ -0,0 +1,362 @@
+<template>
+    <view class="oh" :style="style_container">
+        <view :style="style_img_container">
+            <view :class="outer_class" :style="onter_style">
+                <template v-if="!['3'].includes(theme)">
+                    <view v-for="(item, index) in list" :key="index" class="pr oh" :style="layout_style" :data-value="item.url" @tap.stop="url_event">
+                        <view :class="['oh', ['0'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
+                            <template v-if="!isEmpty(item)">
+                                <view class="oh pr" :style="img_size">
+                                    <view v-if="!isEmpty(item.new_cover)" :style="img_size">
+                                        <imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
+                                    </view>
+                                    <view v-else :style="img_size">
+                                        <imageEmpty :propImageSrc="item.logo" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
+                                    </view>
+                                </view>
+                            </template>
+                            <view class="flex-1 flex-row jc-sb gap-10" :style="content_style">
+                                <view class="flex-1 flex-col jc-sb gap-10">
+                                    <view class="text-line-2" :style="title_style">
+                                        <template v-for="(item1, index1) in item.icon_list">
+                                            <template v-if="!isEmpty(item1.icon)">
+                                                <img :key="index1" :src="item1.icon" class="title-img" :style="title_img_style + 'margin-right: ' + (index < item.icon_list.length - 1 ? new_style.shop_title_img_inner_spacing * 2 : new_style.shop_title_img_outer_spacing * 2) + 'rpx;vertical-align: middle;'" />
+                                            </template>
+                                        </template>{{ item.name }}
+                                    </view>
+                                    <span v-if="form.shop_desc == '1'" :class="form.shop_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="desc_style">{{ item.describe }}</span>
+                                </view>
+                                <view v-if="theme == '0'" class="flex-row align-c">
+                                    <img-or-icon-or-text :propValue="propValue" propType="right" />
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </template>
+                <template v-else>
+                    <swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :next-margin="new_style.rolling_fashion == 'translation' ? '-' + content_outer_spacing_magin : '0rpx'" :display-multiple-items="slides_per_group" :style="{ width: '100%', height: new_style.content_outer_height * new_scale + 'px' }">
+                        <swiper-item v-for="(item1, index) in shop_content_list" :key="index">
+                            <view class="flex-row wh-auto ht-auto" :style="onter_style">
+                                <view v-for="(item, index) in item1.split_list" :key="index" class="pr oh" :style="layout_style" :data-value="item.url" @tap.stop="url_event">
+                                    <view :class="['oh ht-auto', ['0', '4'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
+                                        <template v-if="!isEmpty(item)">
+                                            <view class="oh pr wh-auto ht-auto">
+                                                <view v-if="!isEmpty(item.new_cover)" class="wh-auto ht-auto">
+                                                    <imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
+                                                </view>
+                                                <view v-else class="wh-auto ht-auto">
+                                                    <imageEmpty :propImageSrc="item.logo" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
+                                                </view>
+                                            </view>
+                                        </template>
+                                        <view class="flex-col jc-sb gap-10" :style="content_style">
+                                            <view class="text-line-2" :style="title_style">
+                                                <template v-for="(item1, index1) in item.icon_list">
+                                                    <template v-if="!isEmpty(item1.icon)">
+                                                        <image :key="index1" :src="item1.icon" mode="aspectFit" :style="title_img_style + 'margin-right: ' + (index < item.icon_list.length - 1 ? new_style.shop_title_img_inner_spacing * 2 : new_style.shop_title_img_outer_spacing * 2) + 'rpx;vertical-align: middle;'" :data-value="item1.url" @tap.stop="url_event" />
+                                                    </template>
+                                                </template>{{ item.name }}
+                                            </view>
+                                            <span v-if="form.shop_desc == '1'" :class="form.shop_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="desc_style">{{ item.describe }}</span>
+                                        </view>
+                                    </view>
+                                </view>
+                            </view>
+                        </swiper-item>
+                    </swiper>
+                </template>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    const app = getApp();
+    import { isEmpty, common_styles_computer, common_img_computer, gradient_handle, padding_computer, radius_computer, background_computer, border_computer, box_shadow_computer, old_margin, margin_computer } from '@/common/js/common/common.js';
+    import imageEmpty from '@/components/diy/modules/image-empty.vue';
+    import subscriptIndex from '@/components/diy/modules/subscript/index.vue';
+    import imgOrIconOrText from '@/components/diy/modules/img-or-icon-or-text.vue';
+    var system = app.globalData.get_system_info(null, null, true);
+    var sys_width = app.globalData.window_width_handle(system.windowWidth);
+    export default {
+        components: {
+            imageEmpty,
+            imgOrIconOrText,
+            subscriptIndex
+        },
+        props: {
+            propValue: {
+                type: Object,
+                default: () => ({}),
+            },
+            propKey: {
+                type: [String, Number],
+                default: '',
+            },
+            // 组件渲染的下标
+            propIndex: {
+                type: Number,
+                default: 0,
+            },
+        },
+        data() {
+            return {
+                form: {},
+                new_style: {},
+                propIsCartParaCurve: false,
+                list: [],
+                content_radius: '', // 圆角设置
+                content_img_radius: '', // 图片圆角设置
+                content_padding: '', // 内边距设置
+                theme: '', // 选择的风格
+                content_outer_spacing: '', // 商品间距
+                content_outer_spacing_magin: '', // 商品间距
+                // 最外层不同风格下的显示
+                outer_class: '',
+                onter_style: '',
+                // 不同风格下的样式
+                layout_style: '',
+                layout_img_style: '',
+                content_style: '', // 内容区域的样式
+                show_content: false, // 显示除标题外的其他区域
+                text_line: '', // 超过多少行隐藏
+                style_container: '', // 公共样式
+                style_img_container: '',
+                shop_content_list: [],
+                slides_per_group: 1,
+                border_style: '',
+                // 内容样式
+                title_style: '',
+                desc_style: '',
+                title_img_style: '',
+                // 图片大小
+                img_size: '',
+                shop_label_style: '',
+                new_scale: 1,
+            };
+        },
+        watch: {
+            propKey(val) {
+                this.init();
+            },
+            propValue(new_value, old_value) {
+                this.init();
+            },
+        },
+        created() {
+            this.init();
+        },
+        methods: {
+            isEmpty, margin_computer,
+            init() {
+                const new_form = this.propValue.content || null;
+                const new_style = this.propValue.style || null;
+                if (new_form != null && new_style != null) {
+                    const default_list = {
+                        name: '测试商户标题',
+                        describe: '测试商户描述',
+                        icon_list: [{ icon: `http://shopxo.com/static/diy/images/components/model-shop/auth.png`}, { icon: ''}],
+                        logo: '',
+                        new_cover: [],
+                    };
+                    let new_list = [];
+                    // 指定商品并且指定商品数组不为空
+                    if (!isEmpty(new_form.data_list) && new_form.data_type == '0') {
+                        new_list = new_form.data_list.map((item) => ({
+                            ...item.data,
+                            title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
+                            new_cover: item.new_cover,
+                        }));
+                    } else if (!isEmpty(new_form.data_auto_list) && new_form.data_type == '1') {
+                        // 筛选商品并且筛选商品数组不为空
+                        new_list = new_form.data_auto_list;
+                    } else {
+                        new_list = Array(4).fill(default_list);
+                    }
+                    // 最外层不同风格下的显示
+                    const flex = ['0', '2'].includes(new_form.theme) ? 'flex-col ' : 'flex-row ';
+                    const wrap = new_form.theme == '3' ? '' : 'flex-wrap ';
+                    // 默认数据
+                    const shop_style_list = [
+                        { name: '单列展示', value: '0', width: 50, height: 50 },
+                        { name: '两列展示（纵向）', value: '1', width:180, height: 180 },
+                        { name: '大图展示', value: '2', width:0, height: 180 },
+                        { name: '左右滑动展示', value: '3', width:0, height: 0 },
+                    ];
+                    const scale = sys_width / 390;
+                    let img_style = ``;
+                    if (['0'].includes(new_form.theme)) {
+                        // 图片宽度
+                        if (typeof new_style.content_img_width == 'number') {
+                            img_style += `width: ${ new_style.content_img_width * scale }px;`;
+                        } else {
+                            const list = shop_style_list.filter(item => item.value == new_form.theme);
+                            if (list.length > 0) {
+                                img_style += `width: ${ list[0].width * scale }px;`;
+                            } else {
+                                img_style += 'width: auto;';
+                            }
+                        }
+                    }
+                    if (!['3'].includes(new_form.theme)) {
+                        // 图片宽度
+                        if (typeof new_style.content_img_height == 'number') {
+                            img_style += `height: ${ new_style.content_img_height * scale }px;`;
+                        } else {
+                            const list = shop_style_list.filter(item => item.value == new_form.theme);
+                            if (list.length > 0) {
+                                img_style += `height: ${ list[0].height * scale }px;`;
+                            } else {
+                                img_style += 'height: auto;';
+                            }
+                        }
+                    }
+                    this.setData({
+                        form: new_form,
+                        new_style: new_style,
+                        outer_class: flex + wrap + 'oh',
+                        onter_style: `gap: ${new_style.content_outer_spacing * 2 + 'rpx'};`,
+                        list: new_list,
+                        new_scale: scale,
+                        content_radius: radius_computer(new_style.shop_radius), // 圆角设置
+                        content_img_radius: radius_computer(new_style.shop_img_radius), // 图片圆角设置
+                        content_padding: padding_computer(new_style.shop_padding) + 'box-sizing: border-box;', // 内边距设置
+                        theme: new_form.theme, // 选择的风格
+                        title_style: this.trends_config('title', new_style),
+                        desc_style: this.trends_config('desc', new_style),
+                        shop_content_list: this.get_shop_content_list(new_list, new_form, new_style),
+                        title_img_style: this.get_title_img_style(new_style),
+                        img_size: img_style,
+                        shop_label_style: this.get_shop_label_style(new_style),
+                        border_style: this.get_border_style(new_style),
+                        layout_style: this.get_layout_style(new_form, new_style),
+                        layout_img_style: this.get_layout_img_style(new_form, new_style),
+                        content_style: this.get_content_style(new_form, new_style),
+                        slides_per_group: new_style.rolling_fashion == 'translation' ? new_form.carousel_col : 1,
+                        style_container: common_styles_computer(new_style.common_style), // 公共样式
+                        style_img_container: common_img_computer(new_style.common_style, this.propIndex), // 图片样式
+                    });
+                }
+            },
+            // 标签显示
+            get_shop_label_style(new_style) {
+                const { shop_lable_color, shop_lable_size, shop_lable_padding, shop_lable_radius, shop_lable_color_list, shop_lable_direction, shop_lable_border_color, shop_lable_border_size } = new_style;
+                return `color: ${ shop_lable_color };font-size: ${ shop_lable_size }px;${ padding_computer(shop_lable_padding) };${ radius_computer(shop_lable_radius) };${ gradient_handle(shop_lable_color_list, shop_lable_direction) };border: ${ shop_lable_border_size }px solid ${ shop_lable_border_color };` 
+            },
+            // 根据传递的参数，从对象中取值
+            trends_config(key, new_style) {
+                return this.style_config(new_style[`shop_${key}_typeface`], new_style[`shop_${key}_size`], new_style[`shop_${key}_color`]);
+            },
+            // 根据传递的值，显示不同的内容
+            style_config(typeface, size, color) {
+                return `font-weight:${typeface}; font-size: ${size}px;color: ${color};`;
+            },
+            get_title_img_style(new_style) {
+                const { shop_title_img_width = 0, shop_title_img_height = 0, shop_title_img_radius } = new_style;
+                return `width: ${shop_title_img_width || 0 }px;height: ${ shop_title_img_height || 0 }px;${ radius_computer(shop_title_img_radius) }`;
+            },
+            get_shop_content_list(list, form, new_style) {
+                // 深拷贝一下，确保不会出现问题
+                const cloneList = JSON.parse(JSON.stringify(list));
+                if (new_style.rolling_fashion != 'translation') {
+                    // 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
+                    if (cloneList.length > 0) {
+                        // 每页显示的数量
+                        const num = form.carousel_col;
+                        // 存储数据显示
+                        let 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,
+                            },
+                        ];
+                    }
+                } else {
+                    // 存储数据显示
+                    let nav_list = [];
+                    cloneList.forEach((item) => {
+                        nav_list.push({
+                            split_list: [item],
+                        });
+                    });
+                    return nav_list;
+                }
+            },
+            get_border_style(new_style) {
+                const { content_border_margin, content_border_size, content_border_is_show, content_border_color, content_border_style } = new_style;
+                let border = ``;
+                if (content_border_is_show == '1') {
+                    border += `${ margin_computer(content_border_margin) };border-width: ${content_border_size}px 0px 0px 0px;border-style: ${ content_border_style };border-color: ${content_border_color};`
+                }
+                return border;
+            },
+            // 容器样式
+            get_layout_style(form, new_style) {
+                const { shop_margin, shop_radius, shop_color_list, shop_direction } = new_style;
+                const radius = radius_computer(shop_radius);
+                // 计算每个容器的大小
+                let size_style = ``;
+                const shop_left_right_width = shop_margin.margin_left + shop_margin.margin_right;
+                if (['1'].includes(form.theme)) {
+                    size_style = `width: calc((100% - ${new_style.content_outer_spacing * 2 + (shop_left_right_width * 4) + 'rpx'}) / 2);`;;
+                } else if (form.theme == '3') {
+                    // 如果不是平移的时候执行
+                    if (new_style.rolling_fashion != 'translation') {
+                        size_style = `width: ${this.get_multicolumn_columns_width(new_style, form)};min-width: ${this.get_multicolumn_columns_width(new_style, form)};height: ${new_style.content_outer_height * (sys_width / 390) + 'px'};`;
+                    } else {
+                        size_style = `margin-right: ${ (new_style.content_outer_spacing * 2) + (shop_margin.margin_right * 2) }rpx;width: 100%;height: 100%;`;
+                    }
+                } else if (form.theme == '0') {
+                    size_style = `width: calc(100% - ${ shop_left_right_width }px);`;
+                }
+                const gradient = gradient_handle(shop_color_list, shop_direction) + margin_computer(shop_margin) + border_computer(new_style) + box_shadow_computer(new_style);
+                return `${radius} ${ gradient } ${ size_style }`;
+            },
+            get_multicolumn_columns_width(new_style, form) {
+                const { carousel_col } = form;
+                // 计算间隔的空间。(gap * gap数量) / 模块数量
+                let gap = (new_style.content_outer_spacing * (carousel_col - 1)) / carousel_col;
+                return `calc(${100 / carousel_col}% - ${gap * 2}rpx)`;
+            },
+            // 容器图片样式
+            get_layout_img_style(form, new_style) {
+                const { shop_padding, shop_background_img_style, shop_background_img } = new_style;
+                const padding = form.theme == '0' ? padding_computer(shop_padding) : '';
+                const data = {
+                    background_img_style: shop_background_img_style,
+                    background_img: shop_background_img,
+                }
+                return padding + background_computer(data);
+            },
+            get_content_style(form, new_style) {
+                const spacing_value = new_style.content_spacing;
+                let spacing = '';
+                if (['0'].includes(form.theme)) {
+                    spacing = `margin-left: ${spacing_value}px;`;
+                } else {
+                    spacing = padding_computer(new_style.shop_padding);
+                }
+                return `${spacing}`;
+            },
+            url_event(e) {
+                app.globalData.url_event(e);
+            },
+        },
+    };
+</script>
+
+<style scoped lang="scss">
+    .title-img {
+        object-fit: contain;
+    }
+</style>