From 255ca31cfaa92916b25ea51b88c535117035dcce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 7 Feb 2025 11:53:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=86=85=E5=AE=B9=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=E6=A0=B7=E5=BC=8F=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../article/data-article-content.vue          | 195 ++++++++++++++++++
 .../article/data-article-styles.vue           |  57 +++++
 .../goods/data-goods-content.vue              | 169 +++++++++++++++
 .../goods/data-goods-styles.vue               |  57 +++++
 4 files changed, 478 insertions(+)
 create mode 100644 src/components/common/data-tabs-common/article/data-article-content.vue
 create mode 100644 src/components/common/data-tabs-common/article/data-article-styles.vue
 create mode 100644 src/components/common/data-tabs-common/goods/data-goods-content.vue
 create mode 100644 src/components/common/data-tabs-common/goods/data-goods-styles.vue

diff --git a/src/components/common/data-tabs-common/article/data-article-content.vue b/src/components/common/data-tabs-common/article/data-article-content.vue
new file mode 100644
index 00000000..426cb762
--- /dev/null
+++ b/src/components/common/data-tabs-common/article/data-article-content.vue
@@ -0,0 +1,195 @@
+<template>
+    <card-container class="card-container">
+        <div class="mb-12">展示设置</div>
+        <el-form-item label="选择风格">
+            <el-radio-group v-model="form.theme" @change="theme_change">
+                <el-radio v-for="item in base_list.theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="form.theme == '4'" label="轮播列数">
+            <el-radio-group v-model="form.carousel_col">
+                <el-radio v-for="item in base_list.carousel_col_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+            </el-radio-group>
+        </el-form-item>
+    </card-container>
+    <div class="divider-line data-tabs-line"></div>
+    <card-container class="card-container">
+        <div class="mb-12">列表设置</div>
+        <el-form-item label="是否显示">
+            <el-checkbox-group v-model="form.field_show">
+                <el-checkbox v-for="item in base_list.field_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
+            </el-checkbox-group>
+        </el-form-item>
+        <el-form-item v-if="form.field_show.includes('2')" label="描述行数">
+            <el-radio-group v-model="form.field_desc_row">
+                <el-radio v-for="item in base_list.field_desc_row" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+            </el-radio-group>
+        </el-form-item>
+        <template v-if="form.theme == '4'">
+            <el-form-item label="标题浮起">
+                <el-switch v-model="form.name_float" active-value="1" inactive-value="0" @change="switch_chage"></el-switch>
+            </el-form-item>
+        </template>
+    </card-container>
+    <div class="divider-line data-tabs-line"></div>
+    <card-container class="card-container">
+        <div class="mb-12">角标设置</div>
+        <!-- 角标设置 -->
+        <subscript-content :value="form"></subscript-content>
+    </card-container>
+    <div class="divider-line data-tabs-line"></div>
+    <!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
+    <data-filter type="article" :value="form" :list="form.data_list" :base-list="base_list" @add="add" @data_list_replace="data_list_replace" @data_list_remove="data_list_remove" @data_list_sort="data_list_sort"></data-filter>
+    <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['article']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
+</template>
+
+<script lang="ts" setup>
+import { get_math } from '@/utils';
+
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    tabStyle: {
+        type: Object,
+        default: () => ({}),
+    },
+    defaultConfig: {
+        type: Object,
+        default: () => ({
+            // 图片不同风格下的圆角
+            img_radius_0: 4,
+            img_radius_1: 0,
+        }),
+    },
+});
+
+const base_list = reactive({
+    theme_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 },
+    ],
+    carousel_col_list: [
+        { name: '单列展示', value: '0' },
+        { name: '两列展示', value: '1' },
+        { name: '三列展示', value: '2' },
+        { name: '四列展示', value: '3' },
+    ],
+    data_type_list: [
+        { name: '选择文章', value: '0' },
+        { name: '筛选文章', value: '1' },
+    ],
+    field_show_list: [
+        { name: '文章标题', value: '3' },
+        { name: '日期时间', value: '0' },
+        { name: '浏览量', value: '1' },
+        { name: '描述', value: '2' },
+    ],
+    field_desc_row: [
+        { name: '一行', value: '1' },
+        { name: '两行', value: '2' }
+    ]
+});
+
+// 默认值
+const state = reactive({
+    form: props.value,
+    data: props.tabStyle,
+});
+// 如果需要解构，确保使用toRefs
+const { form, data } = toRefs(state);
+watch(() => props.value, (value) => {
+    form.value = value;
+},{deep: true, immediate: true });
+
+watch(() => props.tabStyle, (value) => {
+    data.value = value;
+},{deep: true, immediate: true });
+// 主题改变
+const theme_change = (val: any) => {
+    if (val == '3' || val == '4') {
+        form.value.field_show = ['1', '3'];
+    } else {
+        form.value.field_show = ['0', '1', '3'];
+    }
+    if (val == '0') {
+        if (data.value.img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
+            data.value.img_radius.radius = props.defaultConfig.img_radius_0;
+            data.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
+            data.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
+            data.value.img_radius.radius_top_left = props.defaultConfig.img_radius_0;
+            data.value.img_radius.radius_top_right = props.defaultConfig.img_radius_0;
+        }
+    } else {
+        if (data.value.img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
+            data.value.img_radius.radius = props.defaultConfig.img_radius_1;
+            data.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
+            data.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
+            data.value.img_radius.radius_top_left = props.defaultConfig.img_radius_1;
+            data.value.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
+        }
+    }
+    // 切换风格时，将对应图片的默认值宽度和高度赋值
+    const list = base_list.theme_list.filter(item => item.value == form.value.theme);
+    if (list.length > 0) {
+        data.value.style.content_img_width = list[0].width;
+        data.value.style.content_img_height = list[0].height;
+    }
+};
+// 移除
+const data_list_remove = (index: number) => {
+    form.value.data_list.splice(index, 1);
+};
+const url_value_multiple_bool = ref(true);
+const data_list_replace_index = ref(0);
+// 替换
+const data_list_replace = (index: number) => {
+    data_list_replace_index.value = index;
+    url_value_multiple_bool.value = false;
+    url_value_dialog_visible.value = true;
+};
+// 拖动排序
+const data_list_sort = (item: any) => {
+    form.value.data_list = item;
+};
+//  新增
+const add = () => {
+    url_value_multiple_bool.value = true;
+    url_value_dialog_visible.value = true;
+};
+// 开启关闭链接
+const url_value_dialog_visible = ref(false);
+const url_value_dialog_call_back = (item: any[]) => {
+    if (url_value_multiple_bool.value) {
+        item.forEach((child: any) => {
+            form.value.data_list.push({
+                id: get_math(),
+                new_title: '',
+                new_cover: [],
+                data: child,
+            });
+        });
+    } else {
+        form.value.data_list[data_list_replace_index.value] = {
+            id: get_math(),
+            new_title: '',
+            new_cover: form.value.data_list[data_list_replace_index.value]?.new_cover || [],
+            data: item[0],
+        };
+    }
+};
+// 标题浮起之后文章标题的颜色和字体更新
+const switch_chage = (val: string | number | boolean) => {
+    if (val == '1') {
+        data.value.name_color = '#fff';
+        data.value.name_weight = '400';
+    } else {
+        data.value.name_color = '#333';
+        data.value.name_weight = 'bold';
+    }
+};
+</script>
\ No newline at end of file
diff --git a/src/components/common/data-tabs-common/article/data-article-styles.vue b/src/components/common/data-tabs-common/article/data-article-styles.vue
new file mode 100644
index 00000000..312cf31f
--- /dev/null
+++ b/src/components/common/data-tabs-common/article/data-article-styles.vue
@@ -0,0 +1,57 @@
+<template>
+    <model-article-list-styles :value="form" :content="data" :is-common-style="false"></model-article-list-styles>
+    <div class="divider-line data-tabs-line" />
+    <card-container class="card-container">
+        <div class="mb-12">内容样式</div>
+        <el-form-item label="背景">
+            <background-common v-model:color_list="form.data_content_style.color_list" v-model:direction="form.data_content_style.direction" v-model:img_style="form.data_content_style.background_img_style" v-model:img="form.data_content_style.background_img" @mult_color_picker_event="mult_content_color_picker_event" />
+        </el-form-item>
+        <el-form-item label="外间距">
+            <margin :value="form.data_content_style"></margin>
+        </el-form-item>
+        <el-form-item label="内间距">
+            <padding :value="form.data_content_style"></padding>
+        </el-form-item>
+        <el-form-item label="圆角">
+            <radius :value="form.data_content_style"></radius>
+        </el-form-item>
+        <!-- 边框处理 -->
+        <border-config v-model:show="form.data_content_style.border_is_show" v-model:color="form.data_content_style.border_color" v-model:style="form.data_content_style.border_style" v-model:size="form.data_content_style.border_size"></border-config>
+        <!-- 阴影配置 -->
+        <shadow-config v-model="form.data_content_style"></shadow-config>
+    </card-container>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    content: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+
+const state = reactive({
+    form: props.value,
+    data: props.content,
+});
+// 如果需要解构，确保使用toRefs
+const { form, data } = toRefs(state);
+
+watch(() => props.value, (value) => {
+    form.value = value;
+},{deep: true, immediate: true });
+
+watch(() => props.content, (value) => {
+    data.value = value;
+},{deep: true, immediate: true });
+
+// 内容样式
+const mult_content_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.data_content_style.color_list = arry;
+    form.value.data_content_style.direction = type.toString();
+}
+</script>
\ No newline at end of file
diff --git a/src/components/common/data-tabs-common/goods/data-goods-content.vue b/src/components/common/data-tabs-common/goods/data-goods-content.vue
new file mode 100644
index 00000000..5d072c3b
--- /dev/null
+++ b/src/components/common/data-tabs-common/goods/data-goods-content.vue
@@ -0,0 +1,169 @@
+<template>
+    <card-container class="card-container">
+        <el-form-item label="商品风格">
+            <el-radio-group v-model="form.theme" @change="change_style">
+                <el-radio v-for="item in base_list.product_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="form.theme == '5'" label="轮播列数">
+            <el-radio-group v-model="form.carousel_col">
+                <el-radio :value="1">单列展示</el-radio>
+                <el-radio :value="2">两列展示</el-radio>
+                <el-radio :value="3">三列展示</el-radio>
+                <el-radio :value="4">四列展示</el-radio>
+            </el-radio-group>
+        </el-form-item>
+    </card-container>
+    <div class="divider-line data-tabs-line"></div>
+    <!-- 商品显示的配置信息 -->
+    <product-show-config :value="form" @change_shop_type="change_shop_type"></product-show-config>
+    <div class="divider-line data-tabs-line"></div>
+    <card-container class="card-container">
+        <div class="mb-12">角标设置</div>
+        <!-- 角标设置 -->
+        <subscript-content :value="form"></subscript-content>
+    </card-container>
+    <div class="divider-line data-tabs-line"></div>
+    <!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
+    <data-filter type="goods" :value="form" :list="form.data_list" :base-list="base_list" @add="product_add" @data_list_replace="data_list_replace" @data_list_remove="goods_list_remove" @data_list_sort="goods_list_sort"></data-filter>
+    <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
+</template>
+
+<script lang="ts" setup>
+import { get_math } from '@/utils';
+
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    tabStyle: {
+        type: Object,
+        default: () => ({}),
+    },
+    defaultConfig: {
+        type: Object,
+        default: () => ({
+            // 图片不同风格下的圆角
+            img_radius_0: 4,
+            img_radius_1: 0,
+        }),
+    },
+});
+
+const base_list = reactive({
+    product_style_list: [
+        { name: '单列展示', value: '0', width: 110, height: 120 },
+        { name: '大图展示', value: '2', width: 166, height: 166 },
+        { name: '无图模式', value: '6', width: 0, height: 0 },
+        { name: '两列展示(纵向)', value: '1', width: 180, height: 180 },
+        { name: '两列展示(横向)', value: '4', width: 70, height: 70 },
+        { name: '三列展示', value: '3', width: 116, height: 114 },
+        { name: '左右滑动展示', value: '5', width: 0, height: 0 },
+    ],
+    product_list: [
+        { name: '指定商品', value: '0' },
+        { name: '筛选商品', value: '1' },
+    ],
+});
+const state = reactive({
+    form: props.value,
+    styles: props.tabStyle,
+});
+// 如果需要解构，确保使用toRefs
+const { form, styles } = toRefs(state);
+
+watch(() => props.value, (value) => {
+    form.value = value;
+},{deep: true, immediate: true });
+
+watch(() => props.tabStyle, (value) => {
+    styles.value = value;
+},{deep: true, immediate: true });
+
+const is_revise = ref(false);
+const change_shop_type = () => {
+    is_revise.value = true;
+};
+
+// 选择某些风格时， 切换到对应的按钮
+const change_style = (val: any): void => {
+    form.value.theme = val;
+    if (!is_revise.value) {
+        if (['3', '4', '5'].includes(val) && form.value.shop_type == 'text') {
+            form.value.shop_type = 'icon';
+        } else if (['0', '1', '2'].includes(val) && form.value.shop_type == 'icon') {
+            form.value.shop_type = 'text';
+        }
+    }
+    if (['0', '4'].includes(val)) {
+        if (styles.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (styles.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
+            styles.value.shop_img_radius.radius = props.defaultConfig.img_radius_0;
+            styles.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
+            styles.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
+            styles.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_0;
+            styles.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_0;
+        }
+    } else {
+        if (styles.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (styles.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
+            styles.value.shop_img_radius.radius = props.defaultConfig.img_radius_1;
+            styles.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
+            styles.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
+            styles.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_1;
+            styles.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
+        }
+    }
+    // 切换风格时，将对应图片的默认值宽度和高度赋值
+    const list = base_list.product_style_list.filter(item => item.value == form.value.theme);
+    if (list.length > 0) {
+        styles.value.content_img_width = list[0].width;
+        styles.value.content_img_height = list[0].height;
+    }
+};
+const url_value_multiple_bool = ref(true);
+const data_list_replace_index = ref(0);
+const data_list_replace = (index: number) => {
+    data_list_replace_index.value = index;
+    url_value_multiple_bool.value = false;
+    url_value_dialog_visible.value = true;
+};
+const product_add = () => {
+    url_value_multiple_bool.value = true;
+    url_value_dialog_visible.value = true;
+};
+
+// 打开弹出框
+const url_value_dialog_visible = ref(false);
+// 弹出框选择的内容
+const url_value_dialog_call_back = (item: any[]) => {
+    if (url_value_multiple_bool.value) {
+        item.forEach((item: any) => {
+            form.value.data_list.push({
+                id: get_math(),
+                new_cover: [],
+                new_title: '',
+                data: item,
+            });
+        });
+    } else {
+        form.value.data_list[data_list_replace_index.value] = {
+            id: get_math(),
+            new_cover: form.value.data_list[data_list_replace_index.value]?.new_cover || [],
+            new_title: '',
+            data: item[0],
+        };
+    }
+};
+// 指定商品
+const goods_list_remove = (index: number) => {
+    form.value.data_list.splice(index, 1);
+};
+const goods_list_sort = (item: any) => {
+    form.value.data_list = item;
+};
+
+</script>
+
+<style lang="scss" scoped>
+</style>
+
diff --git a/src/components/common/data-tabs-common/goods/data-goods-styles.vue b/src/components/common/data-tabs-common/goods/data-goods-styles.vue
new file mode 100644
index 00000000..5ba9e379
--- /dev/null
+++ b/src/components/common/data-tabs-common/goods/data-goods-styles.vue
@@ -0,0 +1,57 @@
+<template>
+    <model-goods-list-styles :value="form" :content="data" :is-common-style="false"></model-goods-list-styles>
+    <div class="divider-line data-tabs-line" />
+    <card-container class="card-container">
+        <div class="mb-12">内容样式</div>
+        <el-form-item label="背景">
+            <background-common v-model:color_list="form.data_content_style.color_list" v-model:direction="form.data_content_style.direction" v-model:img_style="form.data_content_style.background_img_style" v-model:img="form.data_content_style.background_img" @mult_color_picker_event="mult_content_color_picker_event" />
+        </el-form-item>
+        <el-form-item label="外间距">
+            <margin :value="form.data_content_style"></margin>
+        </el-form-item>
+        <el-form-item label="内间距">
+            <padding :value="form.data_content_style"></padding>
+        </el-form-item>
+        <el-form-item label="圆角">
+            <radius :value="form.data_content_style"></radius>
+        </el-form-item>
+        <!-- 边框处理 -->
+        <border-config v-model:show="form.data_content_style.border_is_show" v-model:color="form.data_content_style.border_color" v-model:style="form.data_content_style.border_style" v-model:size="form.data_content_style.border_size"></border-config>
+        <!-- 阴影配置 -->
+        <shadow-config v-model="form.data_content_style"></shadow-config>
+    </card-container>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    content: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+
+const state = reactive({
+    form: props.value,
+    data: props.content,
+});
+// 如果需要解构，确保使用toRefs
+const { form, data } = toRefs(state);
+
+watch(() => props.value, (value) => {
+    form.value = value;
+},{deep: true, immediate: true });
+
+watch(() => props.content, (value) => {
+    data.value = value;
+},{deep: true, immediate: true });
+
+// 内容样式
+const mult_content_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.data_content_style.color_list = arry;
+    form.value.data_content_style.direction = type.toString();
+}
+</script>
\ No newline at end of file