From b143673d26543fa207222daf986a7a0402486c18 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Thu, 12 Sep 2024 18:52:34 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-article-list/index.vue   |  4 +-
 src/components/model-coupon/index.vue         | 51 +++++++++----------
 .../layout/components/main/default/coupon.ts  |  9 ++++
 3 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/components/model-article-list/index.vue b/src/components/model-article-list/index.vue
index dbadb607..69c04307 100644
--- a/src/components/model-article-list/index.vue
+++ b/src/components/model-article-list/index.vue
@@ -103,7 +103,6 @@ const content_padding = ref('');
 const content_spacing = ref('');
 // 文章间距
 const article_spacing = ref('');
-const article_spacing_children = ref('');
 const article_item_height = ref('155');
 
 const article_style = ref({});
@@ -227,8 +226,7 @@ watch(
         if (article_theme.value == '0') {
             article_style.value += content_spacing.value + content_padding.value + content_radius.value;
         } else if (article_theme.value == '1') {
-            article_spacing_children.value = `width: calc(50% - ${new_style.article_spacing / 2}px);`;
-            article_style.value += article_spacing_children.value + content_radius.value;
+            article_style.value += `width: calc(50% - ${new_style.article_spacing / 2}px);` + content_radius.value;
         } else if (article_theme.value == '2') {
             article_style.value += content_radius.value;
         } else if (article_theme.value == '3') {
diff --git a/src/components/model-coupon/index.vue b/src/components/model-coupon/index.vue
index 42d54213..f5a0c267 100644
--- a/src/components/model-coupon/index.vue
+++ b/src/components/model-coupon/index.vue
@@ -4,7 +4,7 @@
             <el-scrollbar class="hide-scrollbar">
                 <template v-if="theme == '1'">
                     <div class="coupon-theme-1">
-                        <div v-for="item in data_list" :key="item" class="item">
+                        <div v-for="(item, index) in data_list" :key="index" class="item">
                             <div class="coupon-theme-1-content tc" :style="'background-image: url(' + theme_bg_img.url_1 + ');background-size: 100% 100%;'">
                                 <div class="name text-line-1">{{ item.name }}</div>
                                 <div class="price">
@@ -19,7 +19,7 @@
                 </template>
                 <template v-else-if="theme == '2'">
                     <div class="coupon-theme-2">
-                        <div v-for="item in data_list" :key="item" class="item" :style="'background-image: url(' + theme_bg_img.url_2 + ');background-size: 100% 100%;'">
+                        <div v-for="(item, index) in data_list" :key="index" class="item" :style="'background-image: url(' + theme_bg_img.url_2 + ');background-size: 100% 100%;'">
                             <div class="tc">
                                 <div class="price">
                                     <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
@@ -35,7 +35,7 @@
                 </template>
                 <template v-else-if="theme == '3'">
                     <div class="coupon-theme-3">
-                        <div v-for="item in data_list" :key="item" class="item">
+                        <div v-for="(item, index) in data_list" :key="index" class="item">
                             <div class="left">
                                 <div class="price">
                                     <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
@@ -61,7 +61,7 @@
                     <div class="coupon-theme-4">
                         <el-scrollbar class="hide-scrollbar">
                             <div class="left">
-                                <div v-for="item in data_list" :key="item" class="item">
+                                <div v-for="(item, index) in data_list" :key="index" class="item">
                                     <div class="type">通用券</div>
                                     <div class="price">
                                         <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
@@ -83,7 +83,7 @@
                 </template>
                 <template v-else-if="theme == '5'">
                     <div class="coupon-theme-5">
-                        <div v-for="item in data_list" :key="item" class="item">
+                        <div v-for="(item, index) in data_list" :key="index" class="item">
                             <div class="left" :style="'background-image: url(' + theme_bg_img.url_3 + ');background-size: 100% 100%;'">
                                 <div class="price">
                                     <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
@@ -100,7 +100,7 @@
                 </template>
                 <template v-else-if="theme == '6'">
                     <div class="coupon-theme-6">
-                        <div v-for="item in data_list" :key="item" class="item">
+                        <div v-for="(item, index) in data_list" :key="index" class="item">
                             <div class="top">
                                 <div class="price">
                                     <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
@@ -117,7 +117,7 @@
                 </template>
                 <template v-else-if="theme == '7'">
                     <div class="coupon-theme-7">
-                        <div v-for="item in data_list" :key="item" class="item">
+                        <div v-for="(item, index) in data_list" :key="index" class="item">
                             <div class="left">
                                 <div class="price">
                                     <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
@@ -172,6 +172,17 @@ const content_title = computed(() => {
 const content_desc = computed(() => {
     return form.value.desc;
 });
+
+interface themeBgImg {
+    url_1: string;
+    url_2: string;
+    url_3: string;
+}
+const theme_bg_img = ref<themeBgImg>({
+    url_1: ``,
+    url_2: ``,
+    url_3: ``,
+});
 onMounted(() => {
     if (!isEmpty(form.value.data_list) && form.value.data_type == '0') {
         data_list.value = form.value.data_list;
@@ -180,6 +191,11 @@ onMounted(() => {
     } else {
         data_list.value = Array(4).fill(default_list);
     }
+    theme_bg_img.value = {
+        url_1: form.value.theme_1_static_img[0].url,
+        url_2: form.value.theme_2_static_img[0].url,
+        url_3: form.value.theme_5_static_img[0].url,
+    };
 });
 const get_coupon = () => {
     const { number, type } = form.value;
@@ -248,26 +264,6 @@ const theme_7_background_style = computed(() => {
         return '#fff';
     }
 });
-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 {
@@ -306,7 +302,6 @@ onBeforeMount(() => {
         .coupon-theme-1-content {
             width: calc(100% - 1rem);
             margin: 0 0.5rem;
-            background-image: v-bind('theme_bg_img.url_1');
             background-size: 100% 100%;
             position: relative;
             top: -1rem;
diff --git a/src/views/layout/components/main/default/coupon.ts b/src/views/layout/components/main/default/coupon.ts
index d76ac65f..e4e6f216 100644
--- a/src/views/layout/components/main/default/coupon.ts
+++ b/src/views/layout/components/main/default/coupon.ts
@@ -1,4 +1,6 @@
 import defaultCommon from './index';
+import { online_url } from '@/utils';
+const new_url = await online_url('/static/plugins/coupon/images/diy/').then((res) => res);
 interface DefaultCoupon {
     content: {
         theme: string;
@@ -10,6 +12,9 @@ interface DefaultCoupon {
         data_list: object[];
         data_ids: string;
         data_auto_list: object[];
+        theme_1_static_img: uploadList[];
+        theme_2_static_img: uploadList[];
+        theme_5_static_img: uploadList[];
     };
     style: {
         price_color: string;
@@ -45,6 +50,10 @@ const defaultCoupoin: DefaultCoupon = {
         data_list: [],
         data_ids: '',
         data_auto_list: [],
+        // 优惠券图片
+        theme_1_static_img: [{ id: 1, url: new_url + 'theme-1-bg.png', original: '', title: '', ext: '.png', type: 'img' }],
+        theme_2_static_img: [{ id: 2, url: new_url + 'theme-2-content-bg.png', original: '', title: '', ext: '.png', type: 'img' }],
+        theme_5_static_img: [{ id: 3, url: new_url + 'theme-5-bg.png', original: '', title: '', ext: '.png', type: 'img' }],
     },
     style: {
         price_color: '#FF3830',