From 6190897e04389dda9d98723432f16043317f000e Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Wed, 4 Sep 2024 09:48:45 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BC=98=E6=83=A0=E5=88=B8=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E8=81=94=E8=B0=83=20sws=202024-09-03?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/coupon.ts                             |  14 ++
 .../common/url-value/link-coupon.vue          |  42 ++--
 src/components/model-coupon/index.vue         | 180 +++++++++++-------
 .../model-coupon/model-coupon-content.vue     |  18 +-
 src/types/global.d.ts                         |   5 +
 .../layout/components/main/default/coupon.ts  |   2 +
 src/views/layout/components/main/index.scss   |   2 +-
 7 files changed, 163 insertions(+), 100 deletions(-)
 create mode 100644 src/api/coupon.ts

diff --git a/src/api/coupon.ts b/src/api/coupon.ts
new file mode 100644
index 00000000..788f865b
--- /dev/null
+++ b/src/api/coupon.ts
@@ -0,0 +1,14 @@
+import request from '@/utils/request';
+
+class CouponAPI {
+    /**  领取优惠券列表 */
+    static getCoupon(data: any) {
+        return request({
+            url: `?s=plugins/index/pluginsname/coupon/pluginscontrol/diyapi/pluginsaction/receivecouponlist`,
+            method: 'post',
+            data,
+        });
+    }
+}
+
+export default CouponAPI;
diff --git a/src/components/common/url-value/link-coupon.vue b/src/components/common/url-value/link-coupon.vue
index 327e9585..4c1eae16 100644
--- a/src/components/common/url-value/link-coupon.vue
+++ b/src/components/common/url-value/link-coupon.vue
@@ -3,7 +3,7 @@
     <div class="container">
         <div class="flex-row jc-e gap-20 mb-20">
             <el-select v-model="type" class="search-w" placeholder="请选择" clearable @change="handle_search">
-                <el-option v-for="item in coupon_category_list" :key="item.name" :label="item.name" :value="item.name" />
+                <el-option v-for="item in coupon_type_list" :key="item.value" :label="item.name" :value="item.value" />
             </el-select>
             <el-input v-model="search_value" placeholder="请输入搜索内容" class="search-w" @change="handle_search">
                 <template #suffix>
@@ -19,28 +19,15 @@
                         <el-radio v-model="template_selection" :label="scope.$index + ''">&nbsp;</el-radio>
                     </template>
                 </el-table-column>
-                <el-table-column prop="id" label="ID" type="" />
-                <el-table-column prop="cover" label="名称">
-                    <template #default="scope">
-                        <div class="flex-row align-c gap-10">
-                            <image-empty v-if="scope.row.cover" v-model="scope.row.cover" class="img"></image-empty>
-                            <div class="flex-1">{{ scope.row.title }}</div>
-                        </div>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="cover" label="类型">
-                    <template #default="scope">
-                        <div class="flex-row align-c gap-10">
-                            <image-empty v-if="scope.row.cover" v-model="scope.row.cover" class="img"></image-empty>
-                            <div class="flex-1">{{ scope.row.title }}</div>
-                        </div>
-                    </template>
-                </el-table-column>
+                <el-table-column prop="id" label="ID" width="80" type="" />
+                <el-table-column prop="name" label="名称"></el-table-column>
+                <el-table-column prop="type_name" label="类型"></el-table-column>
                 <el-table-column prop="cover" label="优惠信息">
                     <template #default="scope">
-                        <div class="flex-row align-c gap-10">
-                            <image-empty v-if="scope.row.cover" v-model="scope.row.cover" class="img"></image-empty>
-                            <div class="flex-1">{{ scope.row.title }}</div>
+                        <div class="flex-row align-c gap-3">
+                            <div>{{ scope.row.type == '0' ? '减' : '打' }}</div>
+                            <div>{{ scope.row.discount_value }}</div>
+                            <div>{{ scope.row.type_unit }}</div>
                         </div>
                     </template>
                 </el-table-column>
@@ -55,6 +42,7 @@
     </div>
 </template>
 <script lang="ts" setup>
+import { is_obj_empty } from '@/utils';
 import UrlValueAPI from '@/api/url-value';
 import { commonStore } from '@/store';
 const common_store = commonStore();
@@ -87,19 +75,21 @@ const init = () => {
     template_selection.value = '';
     type.value = '';
     search_value.value = '';
-    coupon_category_list.value = common_store.common.plugins.coupon.coupon_type_list;
+    if (!is_obj_empty(common_store.common.plugins) && !is_obj_empty(common_store.common.plugins.coupon) && common_store.common.plugins.coupon.coupon_type_list.length > 0) {
+        coupon_type_list.value = common_store.common.plugins.coupon.coupon_type_list;
+    }
     get_list(1);
 };
 const handle_search = () => {
     get_list(1);
 };
 const type = ref('');
-interface articleCategory {
-    id: string;
+interface couponType {
+    value: string;
     name: string;
-    url: string;
+    checked?: boolean;
 }
-const coupon_category_list = ref<articleCategory[]>([]);
+const coupon_type_list = ref<couponType[]>([]);
 const template_selection = ref('');
 //#region 分页 -----------------------------------------------start
 // 当前页
diff --git a/src/components/model-coupon/index.vue b/src/components/model-coupon/index.vue
index f9a28ffa..0bfe25a8 100644
--- a/src/components/model-coupon/index.vue
+++ b/src/components/model-coupon/index.vue
@@ -1,15 +1,16 @@
 <template>
     <div class="coupon-theme-container">
         <div class="re" :style="style_container">
-            <el-scrollbar>
+            <el-scrollbar class="hide-scrollbar">
                 <template v-if="theme == '1'">
                     <div class="coupon-theme-1">
-                        <div v-for="item in list" :key="item" class="item">
+                        <div v-for="item in data_list" :key="item" 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">满200元使用</div>
+                                <div class="name text-line-1">{{ item.name }}</div>
                                 <div class="price">
-                                    <span class="symbol">¥</span>
-                                    <span class="number">30</span>
+                                    <span v-if="item.type == '0'" class="symbol">¥</span>
+                                    <span class="number">{{ item.discount_value }}</span>
+                                    <span v-if="item.type == '1'" class="symbol">折</span>
                                 </div>
                             </div>
                             <div class="coupon-btn">立即领取</div>
@@ -18,14 +19,15 @@
                 </template>
                 <template v-else-if="theme == '2'">
                     <div class="coupon-theme-2">
-                        <div v-for="item in list" :key="item" class="item" :style="'background-image: url(' + theme_bg_img.url_2 + ');background-size: 100% 100%;'">
+                        <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 class="tc">
                                 <div class="price">
-                                    <span class="symbol">¥</span>
-                                    <span class="number">30</span>
+                                    <span v-if="item.type == '0'" class="symbol">¥</span>
+                                    <span class="number">{{ item.discount_value }}</span>
+                                    <span v-if="item.type == '1'" class="symbol">折</span>
                                 </div>
-                                <div class="name">满200元使用</div>
-                                <div class="desc">指定商品可用</div>
+                                <div class="name text-line-1">{{ item.name }}</div>
+                                <div class="desc text-line-1">{{ item.desc }}</div>
                             </div>
                             <div class="coupon-btn">立即领取</div>
                         </div>
@@ -33,16 +35,17 @@
                 </template>
                 <template v-else-if="theme == '3'">
                     <div class="coupon-theme-3">
-                        <div v-for="item in list" :key="item" class="item">
+                        <div v-for="item in data_list" :key="item" class="item">
                             <div class="left">
                                 <div class="price">
-                                    <span class="symbol">¥</span>
-                                    <span class="number">30</span>
+                                    <span v-if="item.type == '0'" class="symbol">¥</span>
+                                    <span class="number">{{ item.discount_value }}</span>
+                                    <span v-if="item.type == '1'" class="symbol self-e">折</span>
                                 </div>
-                                <div class="text">
-                                    <div class="name">满200元使用</div>
-                                    <div class="desc">指定商品可用</div>
-                                    <div class="limit">(限领一张)</div>
+                                <div class="text pl-3 pr-8">
+                                    <div class="name text-line-1">{{ item.name }}</div>
+                                    <div class="desc text-line-1">{{ item.use_limit_type_name }}</div>
+                                    <div v-if="item.limit_send_count && item.limit_send_count > 0" class="limit text-line-1">(限领{{ item.limit_send_count }}张)</div>
                                 </div>
                             </div>
                             <div class="right">
@@ -56,22 +59,23 @@
                 </template>
                 <template v-else-if="theme == '4'">
                     <div class="coupon-theme-4">
-                        <el-scrollbar>
+                        <el-scrollbar class="hide-scrollbar">
                             <div class="left">
-                                <div v-for="item in list" :key="item" class="item">
+                                <div v-for="item in data_list" :key="item" class="item">
                                     <div class="type">通用券</div>
                                     <div class="price">
-                                        <span class="symbol">¥</span>
-                                        <span class="number">30</span>
+                                        <span v-if="item.type == '0'" class="symbol">¥</span>
+                                        <span class="number">{{ item.discount_value }}</span>
+                                        <span v-if="item.type == '1'" class="symbol">折</span>
                                     </div>
-                                    <div class="name">满200元使用</div>
+                                    <div class="name text-line-1">{{ item.name }}</div>
                                 </div>
                             </div>
                         </el-scrollbar>
                         <div class="right">
                             <div class="re z-i flex-col jc-c align-c">
-                                <div class="title">先领券 再购物</div>
-                                <div class="desc">领券下单·享购物优惠</div>
+                                <div class="title text-line-1">{{ content_title }}</div>
+                                <div class="desc text-line-1">{{ content_desc }}</div>
                                 <div class="coupon-btn">领取全部</div>
                             </div>
                         </div>
@@ -79,13 +83,14 @@
                 </template>
                 <template v-else-if="theme == '5'">
                     <div class="coupon-theme-5">
-                        <div v-for="item in list" :key="item" class="item">
+                        <div v-for="item in data_list" :key="item" class="item">
                             <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>
+                                    <span v-if="item.type == '0'" class="symbol">¥</span>
+                                    <span class="number">{{ item.discount_value }}</span>
+                                    <span v-if="item.type == '1'" class="symbol">折</span>
                                 </div>
-                                <div class="name">满200元使用</div>
+                                <div class="name text-line-1">{{ item.name }}</div>
                             </div>
                             <div class="right">
                                 <div class="coupon-btn">领取</div>
@@ -95,13 +100,14 @@
                 </template>
                 <template v-else-if="theme == '6'">
                     <div class="coupon-theme-6">
-                        <div v-for="item in list" :key="item" class="item">
+                        <div v-for="item in data_list" :key="item" class="item">
                             <div class="top">
                                 <div class="price">
-                                    <span class="symbol">¥</span>
-                                    <span class="number">30</span>
+                                    <span v-if="item.type == '0'" class="symbol">¥</span>
+                                    <span class="number">{{ item.discount_value }}</span>
+                                    <span v-if="item.type == '1'" class="symbol">折</span>
                                 </div>
-                                <div class="name">满200元使用</div>
+                                <div class="name text-line-1">{{ item.name }}</div>
                             </div>
                             <div class="bottom">
                                 <div class="coupon-btn">立即领取</div>
@@ -111,13 +117,14 @@
                 </template>
                 <template v-else-if="theme == '7'">
                     <div class="coupon-theme-7">
-                        <div v-for="item in list" :key="item" class="item">
+                        <div v-for="item in data_list" :key="item" class="item">
                             <div class="left">
                                 <div class="price">
-                                    <span class="symbol">¥</span>
-                                    <span class="number">30</span>
+                                    <span v-if="item.type == '0'" class="symbol">¥</span>
+                                    <span class="number">{{ item.discount_value }}</span>
+                                    <span v-if="item.type == '1'" class="symbol">折</span>
                                 </div>
-                                <div class="name">满200元使用</div>
+                                <div class="name text-line-1">{{ item.name }}</div>
                             </div>
                             <div class="right">
                                 <div class="coupon-btn">立即领取</div>
@@ -131,40 +138,63 @@
 </template>
 <script setup lang="ts">
 import { common_styles_computer, gradient_computer, online_url } from '@/utils';
+import { isEmpty, cloneDeep } from 'lodash';
+import CouponAPI from '@/api/coupon';
 const props = defineProps({
     value: {
         type: Object,
         default: () => ({}),
     },
 });
-const list = 10;
 const form = computed(() => props.value?.content || {});
 const new_style = computed(() => props.value?.style || {});
-const style_container = ref('');
-watch(
-    props.value,
-    (newVal, oldValue) => {
-        const new_content = newVal?.content || {};
-        const new_style = newVal?.style || {};
-        style_container.value = common_styles_computer(new_style.common_style);
-    },
-    { immediate: true, deep: true }
-);
-// watchEffect(() => {
-//     if (form.value.data_type == '0') {
-//         if (!isEmpty(form.value.data_list)) {
-//             list.value = cloneDeep(form.value.data_list).map((item: any) => ({
-//                 ...item.data,
-//                 title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
-//                 new_cover: item.new_cover,
-//             }));
-//         } else {
-//             list.value = Array(4).fill(default_list);
-//         }
-//     } else {
-//         get_products();
-//     }
-// });
+const data_list = ref<any[]>([]);
+
+const default_list = {
+    name: '满100减50',
+    type: '0',
+    discount_value: '30',
+    desc: '指定商品可用',
+    use_limit_type_name: '限领一张',
+};
+// 公共样式
+const style_container = computed(() => {
+    return common_styles_computer(new_style.value.common_style);
+});
+// 内容标题
+const content_title = computed(() => {
+    return form.value.title;
+});
+// 内容描述
+const content_desc = computed(() => {
+    return form.value.desc;
+});
+const get_coupon = () => {
+    const { number, type } = form.value;
+    const params = {
+        number: number,
+        type: type.length > 0 ? type.join(',') : '',
+    };
+    // 获取商品列表
+    CouponAPI.getCoupon(params).then((res: any) => {
+        if (!isEmpty(res.data)) {
+            data_list.value = res.data;
+        } else {
+            data_list.value = Array(4).fill(default_list);
+        }
+    });
+};
+watchEffect(() => {
+    if (form.value.data_type == '0') {
+        if (!isEmpty(form.value.data_list)) {
+            data_list.value = cloneDeep(form.value.data_list);
+        } else {
+            data_list.value = Array(4).fill(default_list);
+        }
+    } else {
+        get_coupon();
+    }
+});
 const theme = computed(() => props.value?.content?.theme);
 const theme_style = computed(() => {
     const new_background = gradient_computer({ color_list: props.value?.style?.background, direction: props.value?.style?.direction }, false);
@@ -232,7 +262,8 @@ onBeforeMount(() => {
         border-radius: 1rem;
         margin-top: 1rem;
         .name {
-            padding: 0.5rem;
+            padding: 0.5rem 0.5rem 0 0.5rem;
+            margin-bottom: 0.5rem;
             font-size: 1rem;
             color: v-bind('theme_style.name_color');
         }
@@ -245,10 +276,10 @@ onBeforeMount(() => {
                 bottom: 0.3rem;
             }
             .number {
-                font-size: 3.8rem;
+                font-size: 3rem;
                 line-height: 2.4rem;
                 font-weight: 500;
-                padding-left: 0.4rem;
+                padding: 0 0.4rem;
             }
         }
         .coupon-theme-1-content {
@@ -286,6 +317,9 @@ onBeforeMount(() => {
         width: 8.5rem;
         height: 10rem;
         padding: 0.5rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
         .price {
             color: v-bind('theme_style.price_color');
             padding: 0.3rem 0;
@@ -295,7 +329,7 @@ onBeforeMount(() => {
             .number {
                 font-size: 2.6rem;
                 font-weight: 500;
-                padding-left: 0.4rem;
+                padding: 0 0.4rem;
             }
         }
         .name {
@@ -320,6 +354,7 @@ onBeforeMount(() => {
             background: v-bind('theme_style.btn_background');
             border-radius: 2.3rem;
             margin-top: 0.5rem;
+            margin-bottom: 0.2rem;
         }
     }
 }
@@ -361,14 +396,14 @@ onBeforeMount(() => {
                     border-left: 0.1rem dashed v-bind('theme_3_border_style');
                 }
                 .symbol {
-                    font-size: 2.4rem;
+                    font-size: 1.8rem;
                     font-weight: 600;
                 }
                 .number {
-                    font-size: 4.6rem;
+                    font-size: 3.2rem;
                     font-weight: 600;
-                    padding-left: 0.4rem;
-                    line-height: 4rem;
+                    padding: 0 0.4rem;
+                    line-height: 3rem;
                 }
             }
             .text {
@@ -377,6 +412,7 @@ onBeforeMount(() => {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
+                text-align: center;
                 .name {
                     font-size: 1.8rem;
                     color: v-bind('theme_style.name_color');
@@ -392,7 +428,6 @@ onBeforeMount(() => {
                 .limit {
                     color: v-bind('theme_style.limit_send_count');
                     font-size: 1.2rem;
-                    line-height: 1.4rem;
                 }
             }
         }
@@ -794,4 +829,7 @@ onBeforeMount(() => {
         }
     }
 }
+.hide-scrollbar .el-scrollbar__bar {
+    display: none;
+}
 </style>
diff --git a/src/components/model-coupon/model-coupon-content.vue b/src/components/model-coupon/model-coupon-content.vue
index 7e183d44..6b8d73bf 100644
--- a/src/components/model-coupon/model-coupon-content.vue
+++ b/src/components/model-coupon/model-coupon-content.vue
@@ -20,7 +20,7 @@
                         <div class="flex-col gap-20 w">
                             <drag v-if="form.data_list.length > 0" :data="form.data_list" :space-col="20" @remove="remove" @on-sort="on_sort">
                                 <template #default="{ row }">
-                                    <div class="flex-1 cr-6 size-12">{{ row.title }}</div>
+                                    <div class="flex-1 cr-6 size-12">{{ row.name }}</div>
                                 </template>
                             </drag>
                             <el-button class="w" @click="add">+添加</el-button>
@@ -28,6 +28,11 @@
                     </el-form-item>
                 </template>
                 <template v-else>
+                    <el-form-item label="文章分类">
+                        <el-select v-model="form.type" multiple collapse-tags placeholder="请选择优惠券类型">
+                            <el-option v-for="item in base_list.coupon_type_list" :key="item.value" :label="item.name" :value="item.value" />
+                        </el-select>
+                    </el-form-item>
                     <el-form-item label="展示数量">
                         <slider v-model="form.number"></slider>
                     </el-form-item>
@@ -46,7 +51,9 @@
     <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['coupon']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
 </template>
 <script setup lang="ts">
-import { online_url } from '@/utils';
+import { online_url, is_obj_empty } from '@/utils';
+import { commonStore } from '@/store';
+const common_store = commonStore();
 const props = defineProps({
     value: {
         type: Object,
@@ -74,12 +81,19 @@ const base_list = reactive({
         name: `风格${index + 1}`,
         url: `${new_url.value}theme-${index + 1}.png`,
     })),
+    coupon_type_list: [] as select_2[],
 });
 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}`;
     });
+    nextTick(() => {
+        // 定时获取common_store.common.article_category的数据，直到拿到值或者关闭页面为止
+        if (!is_obj_empty(common_store.common.plugins) && !is_obj_empty(common_store.common.plugins.coupon) && common_store.common.plugins.coupon.coupon_type_list.length > 0) {
+            base_list.coupon_type_list = common_store.common.plugins.coupon.coupon_type_list;
+        }
+    });
 });
 const emit = defineEmits(['update:change-theme']);
 const themeChange = (val: string) => {
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index aa479d8c..87cf8869 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -7,6 +7,11 @@ declare global {
         id: string | number;
         name: string;
     }
+    interface select_2 {
+        value: string | number;
+        name: string;
+        checked?: boolean;
+    }
     // 可视化数据
     interface commonComponentData {
         src: string;
diff --git a/src/views/layout/components/main/default/coupon.ts b/src/views/layout/components/main/default/coupon.ts
index 721d45b2..771d9c9d 100644
--- a/src/views/layout/components/main/default/coupon.ts
+++ b/src/views/layout/components/main/default/coupon.ts
@@ -3,6 +3,7 @@ interface DefaultCoupon {
     content: {
         theme: string;
         data_type: string;
+        type: string[];
         number: number;
         title: string;
         desc: string;
@@ -33,6 +34,7 @@ const defaultCoupoin: DefaultCoupon = {
     content: {
         theme: '1',
         data_type: '0',
+        type: [],
         number: 4,
         // 只有主题4用到
         title: '先领券 再购物',
diff --git a/src/views/layout/components/main/index.scss b/src/views/layout/components/main/index.scss
index 6017b270..8a752ca7 100644
--- a/src/views/layout/components/main/index.scss
+++ b/src/views/layout/components/main/index.scss
@@ -153,7 +153,7 @@
                 position: absolute;
                 top: -0.2rem;
                 left: -0.2rem;
-                z-index: 1;
+                // z-index: 1;
                 border: 0.2rem solid $cr-main;
             }
             .plug-in-animation {