From ec3cd4cc6d8d06e7f34f84dca4f24ec8d5a05270 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Tue, 3 Sep 2024 13:50:36 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96=20sws=20?=
 =?UTF-8?q?2024-09-03?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-coupon/index.vue         | 46 ++++++++++---------
 .../model-coupon/model-coupon-content.vue     | 22 +++++----
 2 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/src/components/model-coupon/index.vue b/src/components/model-coupon/index.vue
index cd2cb766..0a06037e 100644
--- a/src/components/model-coupon/index.vue
+++ b/src/components/model-coupon/index.vue
@@ -5,7 +5,7 @@
                 <template v-if="theme == '1'">
                     <div class="coupon-theme-1">
                         <div v-for="item in list" :key="item" class="item">
-                            <div class="coupon-theme-1-content tc">
+                            <div class="coupon-theme-1-content tc" :style="'background-image: url(' + theme_bg_img.url_1 + ');background-size: 100% 100%;'">
                                 <div class="name">满200元使用</div>
                                 <div class="price">
                                     <span class="symbol">¥</span>
@@ -18,7 +18,7 @@
                 </template>
                 <template v-else-if="theme == '2'">
                     <div class="coupon-theme-2">
-                        <div v-for="item in list" :key="item" class="item">
+                        <div v-for="item in list" :key="item" class="item" :style="'background-image: url(' + theme_bg_img.url_2 + ');background-size: 100% 100%;'">
                             <div class="tc">
                                 <div class="price">
                                     <span class="symbol">¥</span>
@@ -80,7 +80,7 @@
                 <template v-else-if="theme == '5'">
                     <div class="coupon-theme-5">
                         <div v-for="item in list" :key="item" class="item">
-                            <div class="left">
+                            <div class="left" :style="'background-image: url(' + theme_bg_img.url_3 + ');background-size: 100% 100%;'">
                                 <div class="price">
                                     <span class="symbol">¥</span>
                                     <span class="number">30</span>
@@ -145,7 +145,6 @@ watch(
     (newVal, oldValue) => {
         const new_content = newVal?.content || {};
         const new_style = newVal?.style || {};
-        console.log(new_style.common_style);
         style_container.value = common_styles_computer(new_style.common_style);
     },
     { immediate: true, deep: true }
@@ -155,18 +154,6 @@ const theme_style = computed(() => {
     const new_background = gradient_computer({ color_list: props.value?.style?.background, direction: props.value?.style?.direction }, false);
     const new_background_inside = gradient_computer({ color_list: props.value?.style?.background_inside, direction: props.value?.style?.direction_inside }, false);
     const new_btn_background = gradient_computer({ color_list: props.value?.style?.btn_background, direction: props.value?.style?.btn_direction }, false);
-    console.log({
-        price_color: props.value?.style?.price_color,
-        name_color: props.value?.style?.name_color,
-        // 判断是否向对象添加desc_color属性
-        ...(!['1', '5', '6', '7'].includes(theme.value) && { desc_color: props.value?.style?.desc_color }),
-        ...(!['1', '2', '4', '5', '6', '7'].includes(theme.value) && { limit_send_count: props.value?.style?.limit_send_count }),
-        ...(!['3', '5', '6', '7'].includes(theme.value) && { btn_background: new_btn_background }),
-        btn_color: props.value?.style?.btn_color,
-        ...(!['2'].includes(theme.value) && { background: new_background }),
-        ...(!['1', '2', '5', '7'].includes(theme.value) && { background_inside: new_background_inside }),
-        ...(!['3', '4'].includes(theme.value) && { spacing: props.value?.style?.spacing + 'px' }),
-    });
     return {
         price_color: props.value?.style?.price_color,
         name_color: props.value?.style?.name_color,
@@ -194,7 +181,26 @@ const theme_7_background_style = computed(() => {
         return '#fff';
     }
 });
-const new_url = await online_url('/static/plugins/coupon/images/diy/');
+const new_url = ref('');
+interface themeBgImg {
+    url_1: string;
+    url_2: string;
+    url_3: string;
+}
+const theme_bg_img = ref<themeBgImg>({
+    url_1: ``,
+    url_2: ``,
+    url_3: ``,
+});
+onBeforeMount(() => {
+    online_url('/static/plugins/coupon/images/diy/').then((res) => {
+        theme_bg_img.value = {
+            url_1: `${res}theme-1-bg.png`,
+            url_2: `${res}theme-2-content-bg.png`,
+            url_3: `${res}theme-5-bg.png`,
+        };
+    });
+});
 </script>
 <style lang="scss" scoped>
 .coupon-theme-1 {
@@ -232,7 +238,7 @@ const new_url = await online_url('/static/plugins/coupon/images/diy/');
         .coupon-theme-1-content {
             width: calc(100% - 1rem);
             margin: 0 0.5rem;
-            background-image: url('../../assets/images/components/model-coupon/theme-1-bg.png');
+            background-image: v-bind('theme_bg_img.url_1');
             background-size: 100% 100%;
             position: relative;
             top: -1rem;
@@ -260,8 +266,6 @@ const new_url = await online_url('/static/plugins/coupon/images/diy/');
     .item {
         flex-basis: auto;
         flex-shrink: 0;
-        // background-image: url('../../assets/images/components/model-coupon/theme-2-content-bg.png');
-        background-image: url('../../assets/images/components/model-coupon/theme-2-content-bg.png');
         background-size: 100% 100%;
         width: 8.5rem;
         height: 10rem;
@@ -543,8 +547,6 @@ const new_url = await online_url('/static/plugins/coupon/images/diy/');
             left: 0;
             width: 10rem;
             height: 100%;
-            background-image: url('../../assets/images/components/model-coupon/theme-5-bg.png');
-            background-size: 100% 100%;
             padding: 0.6rem;
             display: flex;
             flex-direction: column;
diff --git a/src/components/model-coupon/model-coupon-content.vue b/src/components/model-coupon/model-coupon-content.vue
index 88a30fea..cf6aa0b8 100644
--- a/src/components/model-coupon/model-coupon-content.vue
+++ b/src/components/model-coupon/model-coupon-content.vue
@@ -63,21 +63,23 @@ const props = defineProps({
 });
 const form = reactive(props.value);
 const url_value_dialog_visible = ref(false);
-const new_url = await online_url('/static/plugins/coupon/images/diy/');
+const new_url = ref('');
 const base_list = reactive({
     data_type_list: [
         { name: '默认', value: '0' },
         { name: '手动', value: '1' },
     ],
-    themeList: [
-        { id: '1', name: '风格1', url: new_url + 'theme-1.png' },
-        { id: '2', name: '风格2', url: new_url + 'theme-2.png' },
-        { id: '3', name: '风格3', url: new_url + 'theme-3.png' },
-        { id: '4', name: '风格4', url: new_url + 'theme-4.png' },
-        { id: '5', name: '风格5', url: new_url + 'theme-5.png' },
-        { id: '6', name: '风格6', url: new_url + 'theme-6.png' },
-        { id: '7', name: '风格7', url: new_url + 'theme-7.png' },
-    ],
+    themeList: Array.from({ length: 7 }, (_, index) => ({
+        id: String(index + 1),
+        name: `风格${index + 1}`,
+        url: `${new_url.value}theme-${index + 1}.png`,
+    })),
+});
+onMounted(async () => {
+    new_url.value = await online_url('/static/plugins/coupon/images/diy/').then((res) => res);
+    base_list.themeList.forEach((item) => {
+        item.url = `${new_url.value}${item.url}`;
+    });
 });
 const emit = defineEmits(['update:change-theme']);
 const themeChange = (val: string) => {