From 76d28dd3948847dd2deb01cb2e69418b281efecf Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Tue, 3 Sep 2024 16:58:55 +0800
Subject: [PATCH] =?UTF-8?q?1.=E8=BE=85=E5=8A=A9=E7=A9=BA=E7=99=BD=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E8=89=B2=E9=BB=98=E8=AE=A4=E6=94=B9=E4=B8=BA=E9=80=8F?=
 =?UTF-8?q?=E6=98=8E=E8=89=B2=202.=E6=96=87=E6=9C=AC=E6=A0=87=E9=A2=98?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=B1=85=E4=B8=AD=E9=85=8D=E7=BD=AE=203.imag?=
 =?UTF-8?q?e-empty=E7=BB=84=E4=BB=B6=E9=BB=98=E8=AE=A4=E5=8A=A0=E5=9C=86?=
 =?UTF-8?q?=E8=A7=92=20sws=202024-09-03?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/image-empty/index.vue     |   2 +-
 .../common/url-value/link-articles.vue        |   2 +-
 .../common/url-value/link-brand.vue           |   2 +-
 .../common/url-value/link-coupon.vue          | 151 ++++++++++++++++++
 .../common/url-value/link-goods-category.vue  |   2 +-
 .../common/url-value/link-goods.vue           |   2 +-
 .../common/url-value/link-table.vue           |   4 +-
 .../common/url-value/url-value-dialog.vue     |   6 +
 .../model-auxiliary-blank/index.vue           |   2 +-
 src/components/model-coupon/index.vue         |  18 ++-
 .../model-coupon/model-coupon-content.vue     |   2 +-
 src/components/model-text-title/index.vue     |  26 +--
 .../model-text-title-content.vue              |  24 +--
 src/store/modules/common.ts                   |   1 +
 .../main/default/auxiliary-blank.ts           |   2 +-
 .../components/main/default/text-title.ts     |  44 ++---
 16 files changed, 238 insertions(+), 52 deletions(-)
 create mode 100644 src/components/common/url-value/link-coupon.vue

diff --git a/src/components/base/image-empty/index.vue b/src/components/base/image-empty/index.vue
index 653ebde4..a0a08be7 100644
--- a/src/components/base/image-empty/index.vue
+++ b/src/components/base/image-empty/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-image :src="is_obj(image) ? image?.url || '' : image" class="flex align-c jc-c w h" fit="cover" @load="on_load">
+    <el-image :src="is_obj(image) ? image?.url || '' : image" class="flex align-c jc-c w h radius-sm" fit="cover" @load="on_load">
         <template #error>
             <div class="image-slot" :style="errorStyle">
                 <img :src="error_image" :style="errorImgStyle" />
diff --git a/src/components/common/url-value/link-articles.vue b/src/components/common/url-value/link-articles.vue
index 4356ab3c..5dd6c10e 100644
--- a/src/components/common/url-value/link-articles.vue
+++ b/src/components/common/url-value/link-articles.vue
@@ -23,7 +23,7 @@
                 <el-table-column prop="cover" label="文章">
                     <template #default="scope">
                         <div class="flex-row align-c gap-10">
-                            <image-empty v-model="scope.row.cover" class="img"></image-empty>
+                            <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>
diff --git a/src/components/common/url-value/link-brand.vue b/src/components/common/url-value/link-brand.vue
index 8bf0d818..085600a8 100644
--- a/src/components/common/url-value/link-brand.vue
+++ b/src/components/common/url-value/link-brand.vue
@@ -23,7 +23,7 @@
                 <el-table-column prop="images" label="品牌">
                     <template #default="scope">
                         <div class="flex-row align-c gap-10">
-                            <image-empty v-model="scope.row.logo" class="img"></image-empty>
+                            <image-empty v-if="scope.row.logo" v-model="scope.row.logo" class="img"></image-empty>
                             <div class="flex-1">{{ scope.row.name }}</div>
                         </div>
                     </template>
diff --git a/src/components/common/url-value/link-coupon.vue b/src/components/common/url-value/link-coupon.vue
new file mode 100644
index 00000000..9a28fcf6
--- /dev/null
+++ b/src/components/common/url-value/link-coupon.vue
@@ -0,0 +1,151 @@
+<template>
+    <!-- 优惠券 -->
+    <div class="container">
+        <div class="flex-row jc-e gap-20 mb-20">
+            <el-select v-model="category_ids" class="search-w" placeholder="请选择" clearable @change="handle_search">
+                <el-option v-for="item in coupon_category_list" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+            <el-input v-model="search_value" placeholder="请输入搜索内容" class="search-w" @change="handle_search">
+                <template #suffix>
+                    <icon name="search" size="16" color="9" class="c-pointer" @click="handle_search"></icon>
+                </template>
+            </el-input>
+        </div>
+        <div class="content">
+            <el-table :data="tableData" class="w" :header-cell-style="{ background: '#f7f7f7' }" row-key="id" height="438" fixed @row-click="row_click" @select="handle_select" @select-all="handle_select">
+                <el-table-column v-if="multiple" type="selection" width="60" />
+                <el-table-column v-else label="#" width="60" type="">
+                    <template #default="scope">
+                        <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="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>
+                <template #empty>
+                    <no-data></no-data>
+                </template>
+            </el-table>
+            <div class="mt-10 flex-row jc-e">
+                <el-pagination :current-page="page" background :page-size="page_size" :pager-count="5" layout="prev, pager, next" :total="data_total" @current-change="get_list" />
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import UrlValueAPI from '@/api/url-value';
+import { commonStore } from '@/store';
+const common_store = commonStore();
+const props = defineProps({
+    // 重置
+    reset: {
+        type: Boolean,
+        default: () => false,
+    },
+    multiple: {
+        type: Boolean,
+        default: () => false,
+    },
+});
+watch(
+    () => props.reset,
+    (val) => {
+        if (val) {
+            init();
+        }
+    }
+);
+onMounted(() => {
+    init();
+});
+const modelValue = defineModel({ type: Object, default: {} });
+const tableData = ref<pageLinkList[]>([]);
+const search_value = ref('');
+const init = () => {
+    template_selection.value = '';
+    category_ids.value = '';
+    search_value.value = '';
+    coupon_category_list.value = common_store.common.plugins.coupon.coupon.coupon_type_list;
+    get_list(1);
+};
+const handle_search = () => {
+    get_list(1);
+};
+const category_ids = ref('');
+interface articleCategory {
+    id: string;
+    name: string;
+    url: string;
+}
+const coupon_category_list = ref<articleCategory[]>([]);
+const template_selection = ref('');
+//#region 分页 -----------------------------------------------start
+// 当前页
+const page = ref(1);
+// 每页数量
+const page_size = ref(30);
+// 总数量
+const data_total = ref(0);
+// 查询文件
+const get_list = (new_page: number) => {
+    let new_data = {
+        page: new_page,
+        keywords: search_value.value,
+        category_ids: category_ids.value,
+        page_size: page_size.value,
+    };
+    UrlValueAPI.getArticleList(new_data).then((res: any) => {
+        tableData.value = res.data.data_list;
+        data_total.value = res.data.data_total;
+        page.value = res.data.page;
+    });
+};
+//#region 分页 -----------------------------------------------end
+const row_click = (row: any) => {
+    if (!props.multiple) {
+        const new_table_data = JSON.parse(JSON.stringify(tableData.value));
+        template_selection.value = new_table_data.findIndex((item: pageLinkList) => item.id == row.id).toString();
+        modelValue.value = [row];
+    }
+};
+const handle_select = (selection: any) => {
+    modelValue.value = selection;
+};
+</script>
+<style lang="scss" scoped>
+.container {
+    .search-w {
+        width: 22.5rem;
+    }
+    .content {
+        :deep(.el-table__inner-wrapper:before) {
+            background-color: transparent;
+        }
+        .img {
+            width: 3.6rem;
+        }
+    }
+}
+</style>
diff --git a/src/components/common/url-value/link-goods-category.vue b/src/components/common/url-value/link-goods-category.vue
index b8718248..2ef185e4 100644
--- a/src/components/common/url-value/link-goods-category.vue
+++ b/src/components/common/url-value/link-goods-category.vue
@@ -19,7 +19,7 @@
                 <el-table-column prop="name" label="分类名称"></el-table-column>
                 <el-table-column prop="icon" label="分类图标">
                     <template #default="scope">
-                        <image-empty v-model="scope.row.icon" class="img"></image-empty>
+                        <image-empty v-if="scope.row.icon" v-model="scope.row.icon" class="img"></image-empty>
                     </template>
                 </el-table-column>
                 <template #empty>
diff --git a/src/components/common/url-value/link-goods.vue b/src/components/common/url-value/link-goods.vue
index ae0ea335..db8b5fa6 100644
--- a/src/components/common/url-value/link-goods.vue
+++ b/src/components/common/url-value/link-goods.vue
@@ -24,7 +24,7 @@
                 <el-table-column prop="images" label="商品">
                     <template #default="scope">
                         <div class="flex-row align-c gap-10">
-                            <image-empty v-model="scope.row.images" class="img"></image-empty>
+                            <image-empty v-if="scope.row.images" v-model="scope.row.images" class="img"></image-empty>
                             <div class="flex-1">{{ scope.row.title }}</div>
                         </div>
                     </template>
diff --git a/src/components/common/url-value/link-table.vue b/src/components/common/url-value/link-table.vue
index 43b7cf4d..754d0e22 100644
--- a/src/components/common/url-value/link-table.vue
+++ b/src/components/common/url-value/link-table.vue
@@ -17,10 +17,10 @@
                     </template>
                 </el-table-column>
                 <el-table-column prop="id" label="ID" width="80" type="" />
-                <el-table-column prop="logo" label="logo" width="100" type="">
+                <el-table-column prop="logo" label="封面" width="100" type="">
                     <template #default="scope">
                         <div class="flex-row align-c gap-10">
-                            <image-empty v-model="scope.row.logo" class="img"></image-empty>
+                            <image-empty v-if="scope.row.logo" v-model="scope.row.logo" class="img"></image-empty>
                             <div class="flex-1">{{ scope.row.title }}</div>
                         </div>
                     </template>
diff --git a/src/components/common/url-value/url-value-dialog.vue b/src/components/common/url-value/url-value-dialog.vue
index 81465608..cc9bd2d0 100644
--- a/src/components/common/url-value/url-value-dialog.vue
+++ b/src/components/common/url-value/url-value-dialog.vue
@@ -46,6 +46,10 @@
                 <template v-else-if="link_select == 'custom-url'">
                     <link-custom :reset="reset_compontent" :status="component_status" @update:link="custom_link"></link-custom>
                 </template>
+                <!-- 优惠券链接 -->
+                <template v-else-if="link_select == 'coupon'">
+                    <link-coupon v-model="link_value" :multiple="multiple" :reset="reset_compontent"></link-coupon>
+                </template>
             </div>
         </div>
         <template #footer>
@@ -131,6 +135,8 @@ const dialog_title = computed(() => {
             name = '品牌';
         } else if (props.type[0] == 'plugins') {
             name = '插件';
+        } else if (props.type[0] == 'coupon') {
+            name = '优惠券';
         }
         return name + '链接';
     } else {
diff --git a/src/components/model-auxiliary-blank/index.vue b/src/components/model-auxiliary-blank/index.vue
index 890a59ac..3032fd32 100644
--- a/src/components/model-auxiliary-blank/index.vue
+++ b/src/components/model-auxiliary-blank/index.vue
@@ -22,7 +22,7 @@ const state = reactive({
 // 如果需要解构，确保使用toRefs
 const { form, new_style } = toRefs(state);
 
-const style = computed(() => `height: ${form.value.height}px;background: ${new_style.value.line_color || '#fff'};`);
+const style = computed(() => `height: ${form.value.height}px;background: ${new_style.value.line_color || 'transparent'};`);
 const style_container = computed(() => common_styles_computer(new_style.value.common_style));
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/components/model-coupon/index.vue b/src/components/model-coupon/index.vue
index 0a06037e..f9a28ffa 100644
--- a/src/components/model-coupon/index.vue
+++ b/src/components/model-coupon/index.vue
@@ -138,7 +138,8 @@ const props = defineProps({
     },
 });
 const list = 10;
-
+const form = computed(() => props.value?.content || {});
+const new_style = computed(() => props.value?.style || {});
 const style_container = ref('');
 watch(
     props.value,
@@ -149,6 +150,21 @@ watch(
     },
     { 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 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);
diff --git a/src/components/model-coupon/model-coupon-content.vue b/src/components/model-coupon/model-coupon-content.vue
index cf6aa0b8..7e183d44 100644
--- a/src/components/model-coupon/model-coupon-content.vue
+++ b/src/components/model-coupon/model-coupon-content.vue
@@ -43,7 +43,7 @@
             </card-container>
         </el-form>
     </div>
-    <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['article']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
+    <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';
diff --git a/src/components/model-text-title/index.vue b/src/components/model-text-title/index.vue
index 31929cef..351364e3 100644
--- a/src/components/model-text-title/index.vue
+++ b/src/components/model-text-title/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div :style="style_container">
-        <div class="re flex">
-            <div class="z-i pr-15" :style="title_style">{{ form.title || '标题'}}</div>
+        <div class="re flex" :class="title_center">
+            <div class="z-i pr-15" :style="title_style">{{ form.title || '标题' }}</div>
             <div class="flex-row gap-10 align-c right-0 abs">
                 <template v-if="form.keyword_show">
                     <div v-for="item in keyword_list" :key="item.id" :style="keyword_style">
@@ -37,8 +37,8 @@ const { form, new_style } = toRefs(state);
 const keyword_list = computed(() => {
     // 深拷贝一下，确保不会出现问题
     const arry_list = cloneDeep(form.value.keyword_list);
-    return arry_list.filter((item: { is_show: boolean; }) => item.is_show);
-})
+    return arry_list.filter((item: { is_show: boolean }) => item.is_show);
+});
 // 标题的设置
 const title_style = computed(() => {
     let common_styles = '';
@@ -47,18 +47,22 @@ const title_style = computed(() => {
     } else if (new_style.value.title_weight == '500') {
         common_styles += `font-weight: 500`;
     }
-    return `color:${ new_style.value.title_color }; font-size: ${ new_style.value.title_size }px; ${ common_styles }`;
-})
+    return `color:${new_style.value.title_color}; font-size: ${new_style.value.title_size}px; ${common_styles}`;
+});
+// 标题是否居中
+const title_center = computed(() => {
+    return form.value.is_title_center ? 'jc-c' : '';
+});
 // 关键字设置
 const keyword_style = computed(() => {
-    return `color:${ new_style.value.keyword_color }; font-size: ${ new_style.value.keyword_size }px;`;
-})
+    return `color:${new_style.value.keyword_color}; font-size: ${new_style.value.keyword_size}px;`;
+});
 // 右边按钮设置
 const right_style = computed(() => {
-    return `color:${ new_style.value.right_color }; font-size: ${ new_style.value.right_size }px;`;
-})
+    return `color:${new_style.value.right_color}; font-size: ${new_style.value.right_size}px;`;
+});
 // 通用样式区
-const style_container = computed(() => common_styles_computer(new_style.value.common_style))
+const style_container = computed(() => common_styles_computer(new_style.value.common_style));
 </script>
 <style lang="scss" scoped>
 .right-0.abs {
diff --git a/src/components/model-text-title/model-text-title-content.vue b/src/components/model-text-title/model-text-title-content.vue
index 14bd3bdf..589b731c 100644
--- a/src/components/model-text-title/model-text-title-content.vue
+++ b/src/components/model-text-title/model-text-title-content.vue
@@ -9,12 +9,18 @@
                 <el-form-item label="标题链接">
                     <url-value v-model="form.title_link"></url-value>
                 </el-form-item>
+                <el-form-item label="是否居中">
+                    <el-radio-group v-model="form.is_title_center">
+                        <el-radio :value="0">默认</el-radio>
+                        <el-radio :value="1">居中</el-radio>
+                    </el-radio-group>
+                </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">关键字设置</div>
                 <el-form-item label="关键字">
-                    <el-radio-group v-model="form.keyword_show" class="ml-4">
+                    <el-radio-group v-model="form.keyword_show">
                         <el-radio :value="true">显示</el-radio>
                         <el-radio :value="false">隐藏</el-radio>
                     </el-radio-group>
@@ -42,7 +48,7 @@
             <card-container>
                 <div class="mb-12">更多设置</div>
                 <el-form-item label="右侧按钮">
-                    <el-radio-group v-model="form.right_show" class="ml-4">
+                    <el-radio-group v-model="form.right_show">
                         <el-radio :value="true">显示</el-radio>
                         <el-radio :value="false">隐藏</el-radio>
                     </el-radio-group>
@@ -60,7 +66,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { get_math } from "@/utils";
+import { get_math } from '@/utils';
 const props = defineProps({
     value: {
         type: Object,
@@ -69,7 +75,7 @@ const props = defineProps({
 });
 
 const state = reactive({
-    form: props.value
+    form: props.value,
 });
 const { form } = toRefs(state);
 const add = () => {
@@ -77,17 +83,17 @@ const add = () => {
         id: get_math(),
         notice_title: '',
         notice_link: '',
-        is_show: true
-    })
-}
+        is_show: true,
+    });
+};
 const remove = (index: number) => {
     form.value.keyword_list.splice(index, 1);
-}
+};
 
 // 拖拽更新之后，更新数据
 const on_sort = (new_list: nav_group[]) => {
     form.value.keyword_list = new_list;
-}
+};
 </script>
 <style lang="scss" scoped>
 .card.mb-8 {
diff --git a/src/store/modules/common.ts b/src/store/modules/common.ts
index b88c810b..8f274c05 100644
--- a/src/store/modules/common.ts
+++ b/src/store/modules/common.ts
@@ -11,6 +11,7 @@ export const commonStore = defineStore('common', () => {
         goods_category: [] as any[], //---- 商品分类
         module_list: [] as any[], //---- 模块列表
         page_link_list: [] as any[], //---- 页面链接
+        plugins: {} as any, //---- 插件
     });
     // 存储链接数据
     const set_common = (data: any) => {
diff --git a/src/views/layout/components/main/default/auxiliary-blank.ts b/src/views/layout/components/main/default/auxiliary-blank.ts
index b75c320a..a4d80aa4 100644
--- a/src/views/layout/components/main/default/auxiliary-blank.ts
+++ b/src/views/layout/components/main/default/auxiliary-blank.ts
@@ -13,7 +13,7 @@ const defaultSearch: defaultSearch = {
         height: 50
     },
     style: {
-        line_color: 'rgba(204, 204, 204, 1)',
+        line_color: '',
         common_style: defaultCommon,
     },
 };
diff --git a/src/views/layout/components/main/default/text-title.ts b/src/views/layout/components/main/default/text-title.ts
index ed7339bd..94642191 100644
--- a/src/views/layout/components/main/default/text-title.ts
+++ b/src/views/layout/components/main/default/text-title.ts
@@ -1,5 +1,5 @@
-import { get_math, padding_computer } from "@/utils";
-import defaultCommon from "./index";
+import { get_math, padding_computer } from '@/utils';
+import defaultCommon from './index';
 
 interface carousel_list {
     id: string;
@@ -9,22 +9,23 @@ interface carousel_list {
 }
 interface defaultSearch {
     content: {
-        title: string,
-        title_link: object,
-        keyword_show: true,
-        keyword_list: carousel_list[]
-        right_show: true,
-        right_title: string,
-        right_link: object,
+        title: string;
+        title_link: object;
+        is_title_center: number;
+        keyword_show: true;
+        keyword_list: carousel_list[];
+        right_show: true;
+        right_title: string;
+        right_link: object;
     };
     style: {
-        title_color: string,
-        title_size: number,
-        title_weight: string,
-        keyword_color: string,
-        keyword_size: number,
-        right_color: string,
-        right_size: number, 
+        title_color: string;
+        title_size: number;
+        title_weight: string;
+        keyword_color: string;
+        keyword_size: number;
+        right_color: string;
+        right_size: number;
         common_style: object;
     };
 }
@@ -32,6 +33,7 @@ const defaultSearch: defaultSearch = {
     content: {
         title: '',
         title_link: {},
+        is_title_center: 0,
         keyword_show: true,
         right_show: true,
         right_title: '更多',
@@ -41,9 +43,9 @@ const defaultSearch: defaultSearch = {
                 id: get_math(),
                 title: '',
                 link: {},
-                is_show: true
-            }
-        ]
+                is_show: true,
+            },
+        ],
     },
     style: {
         title_color: '#000',
@@ -52,7 +54,7 @@ const defaultSearch: defaultSearch = {
         keyword_color: '#000',
         keyword_size: 12,
         right_color: '#999',
-        right_size: 12, 
+        right_size: 12,
         common_style: {
             ...defaultCommon,
             color_list: [{ color: '#fff', color_percentage: undefined }],
@@ -61,7 +63,7 @@ const defaultSearch: defaultSearch = {
             padding_bottom: 15,
             padding_left: 15,
             padding_right: 15,
-        }
+        },
     },
 };