From 9f51e3c2d60c5ab6470d62301f9c9ac64c102c8c 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, 27 Aug 2024 16:06:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/icon/index.vue            |  2 +-
 .../common/product-show-config/index.vue      | 46 +++++-------------
 src/components/model-shop-list/index.vue      | 48 +++----------------
 .../model-shop-list-styles.vue                | 13 +++--
 .../model-shop-tabs-styles.vue                | 13 +++--
 .../components/main/default/shop-list.ts      | 12 ++++-
 .../components/main/default/shop-tabs.ts      | 12 ++++-
 7 files changed, 62 insertions(+), 84 deletions(-)

diff --git a/src/components/base/icon/index.vue b/src/components/base/icon/index.vue
index 3392437e..9247ab8f 100644
--- a/src/components/base/icon/index.vue
+++ b/src/components/base/icon/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <i class="iconfont" :class="className" :style="'font-size:' + size + 'px;' + (props.color.indexOf('#') !== -1 || props.color.indexOf('rgba') !== -1 ? 'color:' + props.color : '') + styles" @click="onClick">
+    <i class="iconfont" :class="className" :style="'font-size:' + size + 'px;' + (props.color.indexOf('#') !== -1 || props.color.indexOf('rgba') !== -1 ? 'color:' + props.color + ';' : '') + styles" @click="onClick">
         <slot></slot>
     </i>
 </template>
diff --git a/src/components/common/product-show-config/index.vue b/src/components/common/product-show-config/index.vue
index 5ec9a386..901d0a39 100644
--- a/src/components/common/product-show-config/index.vue
+++ b/src/components/common/product-show-config/index.vue
@@ -15,32 +15,19 @@
         <el-form-item label="是否显示">
             <el-switch v-model="form.is_shop_show"></el-switch>
         </el-form-item>
-        <el-form-item label="按钮样式" class="align-c">
-            <div class="flex-row align-c jc-s gap-20 shopping_button_all">
-                <div v-for="item in base_list.shopping_button_list" :key="item.value" :class="['pa-10 re', { 'br-c br-primary radius-sm': shop_type(item) }]" @click="shopping_button_click(item)">
-                    <template v-if="item.value == '0'">
-                        <div :class="['pl-13 pr-13 round size-12 bg-primary cr-f shopping_button', {'disabled': ['3','4','5'].includes(form.theme) }]">{{ item.name }}</div>
-                    </template>
-                    <template v-else-if="item.value == '1'">
-                        <div :class="['pl-13 pr-13 round size-12 bg-primary cr-f shopping_button', {'disabled': ['3','4','5'].includes(form.theme) }]">{{ item.name }}</div>
-                    </template>
-                    <template v-else-if="item.value == '2'">
-                        <icon class="shopping_button round pl-6 pr-6 bg-primary " name="add" color="f" size="16"></icon>
-                    </template>
-                    <template v-else>
-                        <icon class="shopping_button round pl-6 pr-6 bg-primary" name="cart" color="f" size="16"></icon>
-                    </template>
-                    <div v-if="shop_type(item)" class="button-checked">
-                        <icon name="true" color="f" size="8"></icon>
-                    </div>
-                </div>
+        <el-form-item label="按钮样式">
+            <div class="flex-col w gap-10">
+                <el-radio-group v-model="form.shop_type">
+                    <el-radio v-for="item in base_list.shopping_button_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+                </el-radio-group>
+                <template v-if="form.shop_type == 'text'">
+                    <el-input v-model="form.shop_button_text" placeholder="请输入按钮文字"></el-input>
+                </template>
+                <template v-else>
+                    <upload v-model:icon-value="form.shop_button_icon_class" is-icon type="icon" :limit="1" size="50"></upload>
+                </template>
             </div>
         </el-form-item>
-        <el-form-item label="按钮大小" label-width="140">
-            <el-radio-group v-model="form.shop_button_size">
-                <el-radio v-for="item in base_list.shopping_button_size" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
-            </el-radio-group>
-        </el-form-item>
         <el-form-item label="按钮效果">
             <el-radio-group v-model="form.shop_button_effect">
                 <el-radio v-for="item in base_list.shopping_cart_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
@@ -75,19 +62,12 @@ const base_list = {
         { name: '原价单位', value: 'original_price_unit' },
     ],
     shopping_button_list: [
-        { name: '购买', value: '0' },
-        { name: '立即购买', value: '1' },
-        { name: '添加', value: '2' },
-        { name: '购物车', value: '3' },
+        { name: '文字', value: 'text' },
+        { name: 'icon', value: 'icon' },
     ],
     shopping_cart_list: [
         { name: '进入商品详情页', value: '0' },
         { name: '商品加购', value: '1' }
-    ],
-    shopping_button_size: [
-        { name: '大', value: '0' },
-        { name: '中', value: '1' },
-        { name: '小', value: '2' },
     ]
 };
 
diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index 3877ff98..dee93848 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -52,17 +52,11 @@
                                     </div>
                                 </div>
                                 <div v-if="form.is_shop_show">
-                                    <template v-if="form.shop_type == '0'">
-                                        <div class="pl-13 pr-13 round cr-f shopping_button" :style="trends_config('button', 'gradient')">购买</div>
-                                    </template>
-                                    <template v-else-if="form.shop_type == '1'">
-                                        <div class="pl-11 pr-11 round cr-f shopping_button" :style="trends_config('button', 'gradient')">立即购买</div>
-                                    </template>
-                                    <template v-else-if="form.shop_type == '2'">
-                                        <icon :class="['shopping_button round', { 'pl-6 pr-6': shop_icon_size != '8', 'pl-5 pr-5': shop_icon_size == '8' }]" name="add" color="f" :size="shop_icon_size" :styles="button_gradient()"></icon>
+                                    <template v-if="form.shop_type == 'text'">
+                                        <div class="plr-13 ptb-4 round cr-f" :style="trends_config('button', 'gradient') + `color: ${ new_style.shop_button_text_color };`">{{ form.shop_button_text }}</div>
                                     </template>
                                     <template v-else>
-                                        <icon :class="['shopping_button round', { 'pl-6 pr-6': shop_icon_size != '8', 'pl-5 pr-5': shop_icon_size == '8' }]" name="cart" color="f" :size="shop_icon_size" :styles="button_gradient()"></icon>
+                                        <icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
                                     </template>
                                 </div>
                             </div>
@@ -85,17 +79,11 @@
                                 </div>
                             </div>
                             <div v-if="form.is_shop_show">
-                                <template v-if="form.shop_type == '0'">
-                                    <div class="pl-13 pr-13 round cr-f shopping_button" :style="trends_config('button', 'gradient')">购买</div>
-                                </template>
-                                <template v-else-if="form.shop_type == '1'">
-                                    <div class="pl-11 pr-11 round cr-f shopping_button" :style="trends_config('button', 'gradient')">立即购买</div>
-                                </template>
-                                <template v-else-if="form.shop_type == '2'">
-                                    <icon :class="['shopping_button round', { 'pl-6 pr-6': shop_icon_size != '8', 'pl-5 pr-5': shop_icon_size == '8' }]" name="add" color="f" :size="shop_icon_size" :styles="button_gradient()"></icon>
+                                <template v-if="form.shop_type == 'text'">
+                                    <div class="plr-13 ptb-4 round cr-f" :style="trends_config('button', 'gradient') + `color: ${ new_style.shop_button_text_color };`">{{ form.shop_button_text }}</div>
                                 </template>
                                 <template v-else>
-                                    <icon :class="['shopping_button round', { 'pl-6 pr-6': shop_icon_size != '8', 'pl-5 pr-5': shop_icon_size == '8' }]" name="cart" color="f" :size="shop_icon_size" :styles="button_gradient()"></icon>
+                                    <icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
                                 </template>
                             </div>
                         </div>
@@ -311,26 +299,6 @@ const text_line = computed(() => {
 const is_show = (index: string) => {
     return form.value.is_show.includes(index);
 };
-// 按钮大小设置
-const button_size = computed(() => {
-    let button_size = '22px';
-    if (form.value.shop_button_size == '0') {
-        button_size = '27px';
-    } else if (form.value.shop_button_size == '2') {
-        button_size = '18px';
-    }
-    return button_size;
-});
-// 不同大小下的icon显示
-const shop_icon_size = computed(() => {
-    let size = '8';
-    if (form.value.shop_button_size == '0') {
-        size = '15';
-    } else if (form.value.shop_button_size == '1') {
-        size = '10';
-    }
-    return size;
-});
 // 根据传递的参数，从对象中取值
 const trends_config = (key: string, type?: string) => {
     return style_config(new_style.value[`shop_${key}_typeface`], new_style.value[`shop_${key}_size`], new_style.value[`shop_${key}_color`], type);
@@ -393,10 +361,6 @@ const style_container = computed(() => {
     border-top-right-radius: 1rem;
     padding: 0 1rem 0 0;
 }
-.shopping_button {
-    height: v-bind(button_size);
-    line-height: v-bind(button_size);
-}
 .two-columns {
     width: calc((100% - v-bind(two_columns)) / 2);
 }
diff --git a/src/components/model-shop-list/model-shop-list-styles.vue b/src/components/model-shop-list/model-shop-list-styles.vue
index 3ed4d2f5..c2704878 100644
--- a/src/components/model-shop-list/model-shop-list-styles.vue
+++ b/src/components/model-shop-list/model-shop-list-styles.vue
@@ -51,9 +51,16 @@
                 <el-form-item label="按钮颜色" class="topic">
                     <flex-gradients-create :color-list="form.shop_button_color" default-color="#FF3D53"></flex-gradients-create>
                 </el-form-item>
-                <el-form-item label="立即购买">
-                    <color-text-size-group v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" :type-list="['typeface', 'size']"></color-text-size-group>
-                </el-form-item>
+                <template v-if="data.shop_type == 'text'">
+                    <el-form-item label="文字设置">
+                        <color-text-size-group v-model:color="form.shop_button_text_color" v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" default-color="#fff"></color-text-size-group>
+                    </el-form-item>
+                </template>
+                <template v-else>
+                    <el-form-item label="icon设置">
+                        <color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
+                    </el-form-item>
+                </template>
             </card-container>
         </el-form>
         <common-styles :value="form.common_style" @update:value="common_style_update" />
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 3743276a..e3be4d5d 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-styles.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-styles.vue
@@ -63,9 +63,16 @@
                 <el-form-item label="按钮颜色" class="topic">
                     <flex-gradients-create :color-list="form.shop_button_color" default-color="#2a94ff"></flex-gradients-create>
                 </el-form-item>
-                <el-form-item label="立即购买">
-                    <color-text-size-group v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" :type-list="['typeface', 'size']"></color-text-size-group>
-                </el-form-item>
+                <template v-if="data.shop_type == 'text'">
+                    <el-form-item label="文字设置">
+                        <color-text-size-group v-model:color="form.shop_button_text_color" v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" default-color="#fff"></color-text-size-group>
+                    </el-form-item>
+                </template>
+                <template v-else>
+                    <el-form-item label="icon设置">
+                        <color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
+                    </el-form-item>
+                </template>
             </card-container>
         </el-form>
         <common-styles :value="form.common_style" @update:value="common_style_update" />
diff --git a/src/layout/components/main/default/shop-list.ts b/src/layout/components/main/default/shop-list.ts
index 766d2217..a6c747fb 100644
--- a/src/layout/components/main/default/shop-list.ts
+++ b/src/layout/components/main/default/shop-list.ts
@@ -14,6 +14,8 @@ interface DefaultProductList {
         is_show: string[];
         is_shop_show: boolean;
         shop_type: string;
+        shop_button_text: string;
+        shop_button_icon_class: string;
         shop_button_effect: string;
         shop_button_size: string;
     };
@@ -40,6 +42,9 @@ interface DefaultProductList {
         shop_button_typeface:string;
         shop_button_size: number;
         shop_button_color: color_list[];
+        shop_button_text_color: string,
+        shop_icon_size: number;
+        shop_icon_color: string;
         common_style: object;
     };
 }
@@ -57,7 +62,9 @@ const defaultProductList: DefaultProductList = {
         sort_rules: '0',
         is_show: ['title', 'plugins_view_icon', 'price', 'sales_count', 'original_price'],
         is_shop_show: true,
-        shop_type: '0',
+        shop_type: 'text',
+        shop_button_text: '购买',
+        shop_button_icon_class: '',
         shop_button_effect: '0',
         shop_button_size: '1',
     },
@@ -111,6 +118,9 @@ const defaultProductList: DefaultProductList = {
                 color_percentage: ''
             }
         ],
+        shop_button_text_color: '#fff',
+        shop_icon_size: 10,
+        shop_icon_color: "#fff",
         common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
     },
 };
diff --git a/src/layout/components/main/default/shop-tabs.ts b/src/layout/components/main/default/shop-tabs.ts
index 317659fe..997ac850 100644
--- a/src/layout/components/main/default/shop-tabs.ts
+++ b/src/layout/components/main/default/shop-tabs.ts
@@ -22,6 +22,8 @@ interface DefaultProductList {
         is_shop_show: boolean;
         is_price_solo: boolean;
         shop_type: string;
+        shop_button_text: string;
+        shop_button_icon_class: string;
         shop_button_effect: string;
         shop_button_size: string;
     };
@@ -56,6 +58,9 @@ interface DefaultProductList {
         shop_button_typeface:string;
         shop_button_size: number;
         shop_button_color: color_list[];
+        shop_button_text_color: string,
+        shop_icon_size: number;
+        shop_icon_color: string;
         common_style: object;
     };
 }
@@ -73,7 +78,9 @@ const defaultProductList: DefaultProductList = {
         is_show: ['title', 'plugins_view_icon', 'price', 'sales_count', 'original_price'],
         is_shop_show: true,
         is_price_solo: true,
-        shop_type: '0',
+        shop_type: 'text',
+        shop_button_text: '购买',
+        shop_button_icon_class: '',
         shop_button_effect: '0',
         shop_button_size: '1',
     },
@@ -135,6 +142,9 @@ const defaultProductList: DefaultProductList = {
                 color_percentage: ''
             }
         ],
+        shop_button_text_color: '#fff',
+        shop_icon_size: 10,
+        shop_icon_color: "#fff",
         common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
     },
 };