From 3907922759527685a639dd8eab3a156fd1c95b97 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Wed, 28 Aug 2024 18:09:48 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BC=98=E6=83=A0=E5=88=B8=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=20sws=202024-08-28?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-coupon/model-coupon-content.vue     |  9 ++--
 .../model-coupon/model-coupon-setting.vue     |  4 +-
 .../model-coupon/model-coupon-styles.vue      | 42 ++++++++++++++++++-
 src/layout/components/main/default/coupon.ts  |  4 ++
 4 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/src/components/model-coupon/model-coupon-content.vue b/src/components/model-coupon/model-coupon-content.vue
index 181c90c6..5531ec2c 100644
--- a/src/components/model-coupon/model-coupon-content.vue
+++ b/src/components/model-coupon/model-coupon-content.vue
@@ -70,11 +70,10 @@ const base_list = reactive({
         { id: '1', name: '风格1', url: new URL(`../../assets/images/components/model-coupon/theme-1.png`, import.meta.url).href },
         { id: '2', name: '风格2', url: new URL(`../../assets/images/components/model-coupon/theme-2.png`, import.meta.url).href },
         { id: '3', name: '风格3', url: new URL(`../../assets/images/components/model-coupon/theme-3.png`, import.meta.url).href },
-        { id: '4', name: '风格3', url: new URL(`../../assets/images/components/model-coupon/theme-3.png`, import.meta.url).href },
-        { id: '5', name: '风格4', url: new URL(`../../assets/images/components/model-coupon/theme-4.png`, import.meta.url).href },
-        { id: '6', name: '风格5', url: new URL(`../../assets/images/components/model-coupon/theme-5.png`, import.meta.url).href },
-        { id: '7', name: '风格6', url: new URL(`../../assets/images/components/model-coupon/theme-6.png`, import.meta.url).href },
-        { id: '8', name: '风格7', url: new URL(`../../assets/images/components/model-coupon/theme-7.png`, import.meta.url).href },
+        { id: '4', name: '风格4', url: new URL(`../../assets/images/components/model-coupon/theme-4.png`, import.meta.url).href },
+        { id: '5', name: '风格5', url: new URL(`../../assets/images/components/model-coupon/theme-5.png`, import.meta.url).href },
+        { id: '6', name: '风格6', url: new URL(`../../assets/images/components/model-coupon/theme-6.png`, import.meta.url).href },
+        { id: '7', name: '风格7', url: new URL(`../../assets/images/components/model-coupon/theme-7.png`, import.meta.url).href },
     ],
 });
 const emit = defineEmits(['update:change-theme']);
diff --git a/src/components/model-coupon/model-coupon-setting.vue b/src/components/model-coupon/model-coupon-setting.vue
index ee315a64..6ff35024 100644
--- a/src/components/model-coupon/model-coupon-setting.vue
+++ b/src/components/model-coupon/model-coupon-setting.vue
@@ -4,7 +4,7 @@
             <model-coupon-content :value="form.content" @update:change-theme="change_theme"></model-coupon-content>
         </template>
         <template v-else-if="type == '2'">
-            <model-coupon-styles :value="form.style"></model-coupon-styles>
+            <model-coupon-styles :value="form.style" :theme="form.content.theme"></model-coupon-styles>
         </template>
     </div>
 </template>
@@ -118,7 +118,7 @@ const default_config = {
 };
 const change_theme = (val: string) => {
     if (val) {
-        form.value.style = Object.assign({}, form.value.style, (<arrayIndex>default_config.style)[`theme_${Number(val) + 1}`]);
+        form.value.style = Object.assign({}, form.value.style, (<arrayIndex>default_config.style)[`theme_${Number(val)}`]);
     }
 };
 </script>
diff --git a/src/components/model-coupon/model-coupon-styles.vue b/src/components/model-coupon/model-coupon-styles.vue
index a19685a8..22b41e94 100644
--- a/src/components/model-coupon/model-coupon-styles.vue
+++ b/src/components/model-coupon/model-coupon-styles.vue
@@ -2,22 +2,62 @@
     <div class="styles">
         <el-form :model="form" label-width="70">
             <card-container class="mb-8">
-                
+                <div class="mb-12">优惠券样式</div>
+                <el-form-item label="金额">
+                    <color-picker v-model="form.price_color" :default-color="clone_form.price_color"></color-picker>
+                </el-form-item>
+                <el-form-item label="名称">
+                    <color-picker v-model="form.name_color" :default-color="clone_form.name_color"></color-picker>
+                </el-form-item>
+                <template v-if="['1', '5', '6', '7'].includes(theme)">
+                    <el-form-item label="描述">
+                        <color-picker v-model="form.desc_color" :default-color="clone_form.desc_color"></color-picker>
+                    </el-form-item>
+                </template>
+                <template v-if="['1', '2', '4', '5', '6', '7'].includes(theme)">
+                    <el-form-item label="数量限制">
+                        <color-picker v-model="form.limit_send_count" :default-color="clone_form.limit_send_count"></color-picker>
+                    </el-form-item>
+                </template>
+                <template v-if="['2'].includes(theme)">
+                    <el-form-item label="背景">
+                        <mult-color-picker :value="form.background" :type="form.direction"></mult-color-picker>
+                    </el-form-item>
+                </template>
+                <template v-if="['3', '4'].includes(theme)">
+                    <el-form-item label="间距">
+                        <slider v-model="form.spacing"></slider>
+                    </el-form-item>
+                </template>
+                <template v-if="['5', '6', '7'].includes(theme)">
+                    <el-form-item label="按钮背景">
+                        <mult-color-picker :value="form.btn_background" :type="form.btn_direction"></mult-color-picker>
+                    </el-form-item>
+                </template>
+                <el-form-item label="按钮文字">
+                    <color-picker v-model="form.btn_color" :default-color="clone_form.btn_color"></color-picker>
+                </el-form-item>
             </card-container>
         </el-form>
         <common-styles class="styles-height" :value="form.common_style" @update:value="common_styles_update" />
     </div>
 </template>
 <script setup lang="ts">
+import { cloneDeep } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
         default: () => {},
     },
+    theme: {
+        type: String,
+        default: '1',
+    },
 });
 const emit = defineEmits(['update:value']);
 // 默认值
 let form = reactive(props.value);
+let clone_form = cloneDeep(props.value);
 const common_styles_update = (val: Object) => {
     form.common_style = val;
 };
diff --git a/src/layout/components/main/default/coupon.ts b/src/layout/components/main/default/coupon.ts
index 7b3524f1..a7582401 100644
--- a/src/layout/components/main/default/coupon.ts
+++ b/src/layout/components/main/default/coupon.ts
@@ -14,8 +14,10 @@ interface DefaultCoupon {
         desc_color: string;
         limit_send_count: string;
         btn_background: color_list[];
+        btn_direction: string;
         btn_color: string;
         background: color_list[];
+        direction: string;
         spacing: number;
         common_style: object;
     };
@@ -37,8 +39,10 @@ const defaultCoupoin: DefaultCoupon = {
         desc_color: '#FF3830',
         limit_send_count: '#999',
         btn_background: [{ color: '#FFF1E1', color_percentage: '' }],
+        btn_direction: '90deg',
         btn_color: '#FF3830',
         background: [{ color: '#FFF1E1', color_percentage: '' }],
+        direction: '90deg',
         spacing: 10,
         common_style: defaultCommon,
     },