From 03e2ff8fc61cbaa6f111fe2685b2c3c3731b4395 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 26 Aug 2024 18:52:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=80=89=E9=A1=B9=E5=8D=A1?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/tabs-view/index.vue        |  4 ++--
 .../model-article-tabs-content.vue               | 13 +++++++++++--
 .../model-article-tabs-setting.vue               |  2 +-
 .../model-shop-tabs/model-shop-tabs-content.vue  | 15 ++++++++++++---
 .../model-shop-tabs/model-shop-tabs-setting.vue  |  2 +-
 .../model-shop-tabs/model-shop-tabs-styles.vue   |  2 +-
 src/components/model-tabs/model-tabs-content.vue | 16 ++++++++++++----
 src/components/model-tabs/model-tabs-setting.vue |  2 +-
 src/layout/components/main/default/shop-tabs.ts  |  2 +-
 src/utils/index.ts                               | 16 ++++++++++++++++
 10 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/src/components/common/tabs-view/index.vue b/src/components/common/tabs-view/index.vue
index ed90ba70..feb86220 100644
--- a/src/components/common/tabs-view/index.vue
+++ b/src/components/common/tabs-view/index.vue
@@ -139,10 +139,10 @@ const tabs_theme_style = computed(() => {
             padding-bottom: 1.8rem;
             &.active {
                 .title {
-                    color: red;
+                    color: #FF2222;
                 }
                 .icon {
-                    color: red;
+                    color: #FF2222;
                     display: block;
                 }
             }
diff --git a/src/components/model-article-tabs/model-article-tabs-content.vue b/src/components/model-article-tabs/model-article-tabs-content.vue
index f1f1c2a0..43b4343c 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -4,7 +4,7 @@
             <card-container class="mb-8">
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选项卡风格">
-                    <el-radio-group v-model="form.tabs_theme">
+                    <el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
                         <el-radio v-for="item in base_list.tabs_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
@@ -84,7 +84,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { get_math } from '@/utils';
+import { get_math, tabs_style } from '@/utils';
 import ArticleAPI from '@/api/article';
 import { articleStore } from '@/store/article';
 const article_store = articleStore();
@@ -93,6 +93,10 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    tabStyle: {
+        type: Object,
+        default: () => ({}),
+    }
 });
 const form = reactive(props.value);
 const base_list = reactive({
@@ -210,6 +214,11 @@ const url_value_dialog_call_back = (item: any[]) => {
         });
     });
 };
+
+const styles = reactive(props.tabStyle);
+const tabs_theme_change = (val: string | number | boolean | undefined):void => {
+    styles.tabs_color_checked = tabs_style(styles.tabs_color_checked, val);
+};
 </script>
 <style lang="scss" scoped>
 .content {
diff --git a/src/components/model-article-tabs/model-article-tabs-setting.vue b/src/components/model-article-tabs/model-article-tabs-setting.vue
index fd0beb59..4a3db026 100644
--- a/src/components/model-article-tabs/model-article-tabs-setting.vue
+++ b/src/components/model-article-tabs/model-article-tabs-setting.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="setting-content">
         <template v-if="type == '1'">
-            <model-article-tabs-content :value="value.content"></model-article-tabs-content>
+            <model-article-tabs-content :value="value.content" :tab-style="value.style"></model-article-tabs-content>
         </template>
         <template v-else-if="type == '2'">
             <model-article-tabs-styles :value="value.style" :content="value.content"></model-article-tabs-styles>
diff --git a/src/components/model-shop-tabs/model-shop-tabs-content.vue b/src/components/model-shop-tabs/model-shop-tabs-content.vue
index 3411b9be..afd2f40c 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-content.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-content.vue
@@ -4,7 +4,7 @@
             <card-container class="mb-8">
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选项卡风格">
-                    <el-radio-group v-model="form.tabs_theme">
+                    <el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
                         <el-radio v-for="item in base_list.tabs_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
@@ -83,7 +83,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { get_math } from '@/utils';
+import { get_math, tabs_style } from '@/utils';
 import ShopAPI from '@/api/shop';
 import { shopStore } from '@/store';
 const shop_store = shopStore();
@@ -93,12 +93,17 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    tabStyle: {
+        type: Object,
+        default: () => ({}),
+    }
 });
 const state = reactive({
     form: props.value,
+    styles: props.tabStyle,
 });
 // 如果需要解构，确保使用toRefs
-const { form } = toRefs(state);
+const { form, styles } = toRefs(state);
 
 const base_list = reactive({
     tabs_style_list: [
@@ -217,6 +222,10 @@ const url_value_dialog_call_back = (item: any[]) => {
         });
     });
 };
+
+const tabs_theme_change = (val: string | number | boolean | undefined):void => {
+    styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
+};
 // 选择某些风格时， 切换到对应的按钮
 const change_style = (val: any): void => {
     form.value.theme = val;
diff --git a/src/components/model-shop-tabs/model-shop-tabs-setting.vue b/src/components/model-shop-tabs/model-shop-tabs-setting.vue
index 499a767a..a06a8e75 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-setting.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-setting.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="auxiliary-line-setting">
         <template v-if="type == '1'">
-            <model-shop-tabs-content :value="value.content"></model-shop-tabs-content>
+            <model-shop-tabs-content :value="value.content" :tab-style="value.style"></model-shop-tabs-content>
         </template>
         <template v-if="type == '2'">
             <model-shop-tabs-styles :value="value.style" :content="value.content"></model-shop-tabs-styles>
diff --git a/src/components/model-shop-tabs/model-shop-tabs-styles.vue b/src/components/model-shop-tabs/model-shop-tabs-styles.vue
index 4e07a592..6a746328 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-styles.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-styles.vue
@@ -10,7 +10,7 @@
                     <text-size-type v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked"></text-size-type>
                 </el-form-item>
                 <el-form-item label="文字色值">
-                    <color-picker v-model="form.tabs_color_checked" default-color="#000000"></color-picker>
+                    <color-picker v-model="form.tabs_color_checked" default-color="rgba(51,51,51,1)"></color-picker>
                 </el-form-item>
                 <el-form-item label="未选文字">
                     <text-size-type v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size"></text-size-type>
diff --git a/src/components/model-tabs/model-tabs-content.vue b/src/components/model-tabs/model-tabs-content.vue
index ff136b24..df929db7 100644
--- a/src/components/model-tabs/model-tabs-content.vue
+++ b/src/components/model-tabs/model-tabs-content.vue
@@ -4,7 +4,7 @@
             <card-container class="mb-8">
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选择风格">
-                    <el-radio-group v-model="form.tabs_theme" class="ml-4">
+                    <el-radio-group v-model="form.tabs_theme" class="ml-4" @change="tabs_theme_change">
                         <el-radio value="0">样式一</el-radio>
                         <el-radio value="2">样式二</el-radio>
                         <el-radio value="3">样式三</el-radio>
@@ -44,19 +44,24 @@
     </div>
 </template>
 <script setup lang="ts">
-import { get_math } from '@/utils';
+import { get_math, tabs_style } from '@/utils';
 
 const props = defineProps({
     value: {
         type: Object,
         default: () => {},
     },
+    tabStyle: {
+        type: Object,
+        default: () => ({}),
+    }
 });
 
 const state = reactive({
-    form: props.value
+    form: props.value,
+    styles: props.tabStyle
 });
-const { form } = toRefs(state);
+const { form, styles } = toRefs(state);
 const add = () => {
     form.value.tabs_list.push({
         id: get_math(),
@@ -75,6 +80,9 @@ const remove = (index: number) => {
 const on_sort = (new_list: nav_group[]) => {
     form.value.tabs_list = new_list;
 }
+const tabs_theme_change = (val: string | number | boolean | undefined):void => {
+    styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
+};
 </script>
 <style lang="scss" scoped>
 .card.mb-8 {
diff --git a/src/components/model-tabs/model-tabs-setting.vue b/src/components/model-tabs/model-tabs-setting.vue
index 891442c5..f68cc4c2 100644
--- a/src/components/model-tabs/model-tabs-setting.vue
+++ b/src/components/model-tabs/model-tabs-setting.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="setting-content">
         <template v-if="type == '1'">
-            <model-tabs-content :value="value.content"></model-tabs-content>
+            <model-tabs-content :value="value.content" :tab-style="value.style"></model-tabs-content>
         </template>
         <template v-if="type == '2'">
             <model-tabs-styles :value="value.style"></model-tabs-styles>
diff --git a/src/layout/components/main/default/shop-tabs.ts b/src/layout/components/main/default/shop-tabs.ts
index 37495f50..abaf3ae6 100644
--- a/src/layout/components/main/default/shop-tabs.ts
+++ b/src/layout/components/main/default/shop-tabs.ts
@@ -82,7 +82,7 @@ const defaultProductList: DefaultProductList = {
         tabs_direction: '90deg',
         tabs_weight_checked: '500',
         tabs_size_checked: 14,
-        tabs_color_checked: '#000',
+        tabs_color_checked: 'rgba(51,51,51,1)',
         tabs_weight: '500',
         tabs_size: 14,
         tabs_color: 'rgba(51,51,51,1)',
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 101c7850..348f6bad 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -299,3 +299,19 @@ export const set_cookie = (name: string, value: string, expire_time?: number) =>
         document.cookie = cookie_str;
     }
 };
+
+// style 风格
+export const tabs_style = (color: string, style: string | number | boolean | undefined) => {
+    const color_list = ['rgba(51,51,51,1)', 'rgba(255, 34, 34, 1)', 'rgba(255, 255, 255, 1)'];
+    if (color_list.includes(color)) {
+        if ((style == '2' || style == '4')) {
+            return 'rgba(255, 255, 255, 1)';
+        } else if (style == '3') {
+            return 'rgba(255, 34, 34, 1)';
+        } else {
+            return 'rgba(51,51,51,1)';
+        }
+    } else {
+        return color;
+    }
+}
\ No newline at end of file