From 0e63f8a69d0ddbbdf0c6eb6293b60f31f8d2d4e0 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Wed, 4 Sep 2024 17:11:32 +0800
Subject: [PATCH] =?UTF-8?q?1.=E8=A7=A3=E5=86=B3=E5=A4=9A=E4=B8=AA=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E6=8A=A5=E9=94=99=EF=BC=8C=E5=87=BA=E7=8E=B0=E5=A4=9A?=
 =?UTF-8?q?=E4=B8=AA=E6=8F=90=E7=A4=BA=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../footer-nav/footer-nav-content.vue         |   8 +-
 src/components/footer-nav/index copy.vue      | 116 ++++++++++++++++++
 src/utils/index.ts                            |   2 +-
 .../layout/components/main/default/coupon.ts  |   2 +-
 .../components/main/default/footer-nav.ts     |  18 +--
 .../layout/components/main/default/seckill.ts |  50 +++++---
 6 files changed, 163 insertions(+), 33 deletions(-)
 create mode 100644 src/components/footer-nav/index copy.vue

diff --git a/src/components/footer-nav/footer-nav-content.vue b/src/components/footer-nav/footer-nav-content.vue
index 753753ae..365ebbaa 100644
--- a/src/components/footer-nav/footer-nav-content.vue
+++ b/src/components/footer-nav/footer-nav-content.vue
@@ -61,19 +61,19 @@ const props = defineProps({
 const form = reactive(props.value);
 const emit = defineEmits(['update:value']);
 const nav_style_change = (style: any) => {
-    form.nav_style = style;
+    form.value.nav_style = style;
     emit('update:value', form);
 };
 const nav_type_change = (type: any) => {
-    form.nav_type = type;
+    form.value.nav_type = type;
     emit('update:value', form);
 };
 const nav_content_remove = (index: number) => {
-    form.nav_content.splice(index, 1);
+    form.value.nav_content.splice(index, 1);
     emit('update:value', form);
 };
 const add = () => {
-    form.nav_content.push({
+    form.value.nav_content.push({
         id: get_math(),
         name: '',
         src: [],
diff --git a/src/components/footer-nav/index copy.vue b/src/components/footer-nav/index copy.vue
new file mode 100644
index 00000000..da83a9b2
--- /dev/null
+++ b/src/components/footer-nav/index copy.vue	
@@ -0,0 +1,116 @@
+<template>
+    <div class="footer-nav flex-row jc-c align-c" :class="showFooter ? 'br-2 br-primary' : ''" @click="footer_nav_event">
+        <div class="footer-nav-content flex-row jc-c align-c w" :style="style_container">
+            <ul class="flex-row jc-sa align-c w">
+                <li v-for="(item, index) in nav_content" :key="index" class="flex-1 flex-col jc-c align-c gap-5" @mouseenter="is_hover = index" @mouseleave="is_hover = 0">
+                    <div v-if="footerData.content.nav_style !== '2'" class="img re">
+                        <div class="img-item abs radius-xs animate-linear w" :class="is_hover != index ? 'active' : ''">
+                            <image-empty v-model="item.src[0]" error-img-style="width:1.5rem;height:1.5rem;"></image-empty>
+                        </div>
+                        <div class="img-item abs radius-xs animate-linear w" :class="is_hover == index ? 'active' : ''">
+                            <image-empty v-model="item.src_checked[0]" error-img-style="width:1.5rem;height:1.5rem;"></image-empty>
+                        </div>
+                    </div>
+                    <span v-if="footerData.content.nav_style !== '1'" class="animate-linear size-12 re z-i" :style="is_hover == index ? text_color_checked : default_text_color">{{ item.name }}</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { cloneDeep } from 'lodash';
+import { common_styles_computer, online_url } from '@/utils';
+import { footerNavCounterStore } from '@/store';
+const footer_nav_counter_store = footerNavCounterStore();
+const props = defineProps({
+    showFooter: {
+        type: Boolean,
+        default: false,
+    },
+    footerData: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+const style_container = ref('');
+const default_text_color = ref('');
+const text_color_checked = ref('');
+const is_hover = ref(0);
+const nav_content = ref<any[]>([]);
+
+watch(
+    props.footerData,
+    async (newVal, oldValue) => {
+        const new_content = newVal?.content || {};
+        const new_style = newVal?.style || {};
+        const url = await online_url('/static/app/tabbar/').then((res) => res);
+        const clone_nav_content = cloneDeep(new_content.nav_content);
+        nav_content.value =
+            clone_nav_content.map((item: any) => {
+                item.src = item.src.map((img: any) => {
+                    return {
+                        ...img,
+                        url: item.src.includes('/') ? img.url : url + img.url,
+                    };
+                });
+                item.src_checked = item.src_checked.map((img: any) => {
+                    return {
+                        ...img,
+                        url: item.src_checked.includes('/') ? img.url : url + img.url,
+                    };
+                });
+                return item;
+            }) || [];
+        default_text_color.value = 'color:' + new_style.default_text_color || 'rgba(0, 0, 0, 1)';
+        text_color_checked.value = 'color:' + new_style.text_color_checked || 'rgba(204, 204, 204, 1)';
+
+        style_container.value = common_styles_computer(new_style.common_style);
+        let footer_height = new_style.common_style.padding_top + new_style.common_style.padding_bottom + new_style.common_style.margin_top + new_style.common_style.margin_bottom + 50;
+        if (footer_height >= 70) {
+            footer_height = footer_height;
+        } else {
+            footer_height = 70;
+        }
+        footer_nav_counter_store.padding_footer_computer(footer_height);
+    },
+    { immediate: true, deep: true }
+);
+const emits = defineEmits(['footer-nav']);
+const footer_nav_event = () => {
+    emits('footer-nav');
+};
+</script>
+<style lang="scss" scoped>
+.footer-nav {
+    width: 39rem;
+    margin: 0 auto;
+    padding: 0rem;
+    cursor: pointer;
+    background-color: transparent;
+    .footer-nav-content {
+        min-height: 7rem;
+        .img {
+            width: 2rem;
+            height: 2rem;
+            .img-item {
+                width: 2.2rem;
+                height: 2.2rem;
+                opacity: 0;
+                &.active {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+}
+.br-2 {
+    &::before {
+        content: '';
+        position: absolute;
+        border: 0.2rem solid $cr-main;
+        inset: 0;
+        width: calc(100% + 0.4rem);
+        height: calc(100% + 0.4rem);
+    }
+}
+</style>
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 80c7c24a..8176d88b 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,6 +1,5 @@
 import { isEmpty } from 'lodash';
 import { commonStore } from '@/store';
-const { common } = commonStore();
 // 定义一组预定义的颜色数组，用于在各种场景中轻松引用这些颜色
 // 这些颜色包括从白色到黑色的不同灰度，以及一些鲜艳的颜色，格式有十六进制、RGB、RGBA、HSV、HSL等
 export const predefine_colors = ['#fff', '#ddd', '#ccc', '#999', '#666', '#333', '#000', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', '#1F93FF', '#c7158577'];
@@ -336,6 +335,7 @@ export const tabs_style = (color: string, style: string | number | boolean | und
  * @returns {Promise<string>} 返回一个Promise，解析为包含资源URL的字符串
  */
 export const online_url = async (directory: string) => {
+    const { common } = commonStore();
     const attachemnt_host = common.config.attachment_host;
     if (import.meta.env.VITE_APP_BASE_API == '/dev-api') {
         let temp_data = await import(import.meta.env.VITE_APP_BASE_API == '/dev-api' ? '../../temp.d' : '../../temp_pro.d');
diff --git a/src/views/layout/components/main/default/coupon.ts b/src/views/layout/components/main/default/coupon.ts
index 771d9c9d..f958ba81 100644
--- a/src/views/layout/components/main/default/coupon.ts
+++ b/src/views/layout/components/main/default/coupon.ts
@@ -56,7 +56,7 @@ const defaultCoupoin: DefaultCoupon = {
         background_inside: [{ color: '#FFF1E1', color_percentage: undefined }],
         direction_inside: '90deg',
         spacing: 20,
-        common_style: { ...defaultCommon, padding_left: 18, padding_right: 18, padding_top: 18, padding_bottom: 18, color_list: [{ color: '#fff', color_percentage: undefined }] },
+        common_style: { ...defaultCommon, padding_left: 10, padding_right: 10, padding_top: 10, padding_bottom: 10, color_list: [{ color: '#fff', color_percentage: undefined }] },
 
         // 风格4字段
         type_color: '#FF3830',
diff --git a/src/views/layout/components/main/default/footer-nav.ts b/src/views/layout/components/main/default/footer-nav.ts
index e8bfe579..3951bc37 100644
--- a/src/views/layout/components/main/default/footer-nav.ts
+++ b/src/views/layout/components/main/default/footer-nav.ts
@@ -1,7 +1,11 @@
 import defaultCommon from './index';
 import { online_url } from '@/utils';
+import { onActivated } from 'vue';
 
-const new_url = await online_url('/static/app/tabbar/');
+const new_url = ref('');
+onActivated(async () => {
+    new_url.value = await online_url('/static/app/tabbar/').then((res) => res);
+});
 interface DefaultFooterNav {
     content: {
         nav_style: string;
@@ -14,15 +18,15 @@ interface DefaultFooterNav {
         common_style: object;
     };
 }
-const defaultFooterNav: DefaultFooterNav = {
+const defaultFooterNav = ref<DefaultFooterNav>({
     content: {
         nav_style: '0',
         nav_type: '0',
         nav_content: [
-            { id: '1', name: '首页', src: [{ id: 1, url: new_url + 'home.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], src_checked: [{ id: 1, url: new_url + 'active/home.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], href: {} },
-            { id: '2', name: '分类', src: [{ id: 1, url: new_url + 'category.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], src_checked: [{ id: 1, url: new_url + 'active/category.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], href: {} },
-            { id: '3', name: '购物车', src: [{ id: 1, url: new_url + 'cart.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], src_checked: [{ id: 1, url: new_url + 'active/cart.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], href: {} },
-            { id: '4', name: '我的', src: [{ id: 1, url: new_url + 'user.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], src_checked: [{ id: 1, url: new_url + 'active/user.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], href: {} },
+            { id: '1', name: '首页', src: [{ id: 1, url: new_url.value + 'home.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], src_checked: [{ id: 1, url: new_url.value + 'active/home.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], href: {} },
+            { id: '2', name: '分类', src: [{ id: 1, url: new_url.value + 'category.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], src_checked: [{ id: 1, url: new_url.value + 'active/category.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], href: {} },
+            { id: '3', name: '购物车', src: [{ id: 1, url: new_url.value + 'cart.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], src_checked: [{ id: 1, url: new_url.value + 'active/cart.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], href: {} },
+            { id: '4', name: '我的', src: [{ id: 1, url: new_url.value + 'user.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], src_checked: [{ id: 1, url: new_url.value + 'active/user.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], href: {} },
         ],
     },
     style: {
@@ -30,6 +34,6 @@ const defaultFooterNav: DefaultFooterNav = {
         default_text_color: 'rgba(0, 0, 0, 1)',
         common_style: { ...defaultCommon, color_list: [{ color: 'rgba(255,255,255,1)', color_percentage: undefined }] },
     },
-};
+});
 
 export default defaultFooterNav;
diff --git a/src/views/layout/components/main/default/seckill.ts b/src/views/layout/components/main/default/seckill.ts
index 7dfa0595..144de01c 100644
--- a/src/views/layout/components/main/default/seckill.ts
+++ b/src/views/layout/components/main/default/seckill.ts
@@ -1,6 +1,13 @@
 import defaultCommon from './index';
 import { online_url } from '@/utils';
-const new_url = await online_url('/static/plugins/seckill/images/diy/');
+import { onMounted } from 'vue';
+
+const new_url = ref('');
+onMounted(() => {
+    online_url('/static/app/tabbar/').then((res) => {
+        new_url.value = res;
+    });
+});
 interface DefaultSeckill {
     content: {
         head_state: string;
@@ -12,7 +19,7 @@ interface DefaultSeckill {
         button_text: string;
         shop_style_type: string;
         single_line_number: number;
-        shop_number: number,
+        shop_number: number;
         is_show: string[];
         seckill_button_show: string;
         seckill_subscript_show: string;
@@ -47,12 +54,12 @@ interface DefaultSeckill {
         seckill_subscript_location: string;
         seckill_subscript_text_color: string;
         seckill_subscript_bg_color: string;
-        progress_bg_color: string,
-        progress_actived_color_list: color_list[],
-        progress_actived_direction: string,
-        progress_button_color: string,
-        progress_button_icon_color: string,
-        progress_text_color: string,
+        progress_bg_color: string;
+        progress_actived_color_list: color_list[];
+        progress_actived_direction: string;
+        progress_button_color: string;
+        progress_button_icon_color: string;
+        progress_text_color: string;
         is_roll: boolean;
         interval_time: number;
         rolling_fashion: string;
@@ -64,7 +71,7 @@ const defaultSeckill: DefaultSeckill = {
         head_state: '1',
         theme: '1',
         topic_type: 'image',
-        topic_src: [{ id: 1, url: new_url + 'header-title.png', original: '标题', title: '标题', ext: '.png', type: 'img' }],
+        topic_src: [{ id: 1, url: new_url.value + 'header-title.png', original: '标题', title: '标题', ext: '.png', type: 'img' }],
         topic_text: '限时秒杀',
         button_status: '1',
         button_text: '更多',
@@ -74,7 +81,7 @@ const defaultSeckill: DefaultSeckill = {
         is_show: ['title', 'price', 'original_price'],
         seckill_button_show: '1',
         seckill_subscript_show: '1',
-        subscript_text: '秒杀'
+        subscript_text: '秒杀',
     },
     style: {
         topic_color: '#fff',
@@ -88,14 +95,14 @@ const defaultSeckill: DefaultSeckill = {
         header_background_color_list: [{ color: '', color_percentage: undefined }],
         header_background_direction: '180deg',
         header_background_img_style: '2',
-        header_background_img_url: [{ id: 1, url: new_url + 'header-bg.png', original: '背景', title: '背景1', ext: '.png', type: 'img' }],
+        header_background_img_url: [{ id: 1, url: new_url.value + 'header-bg.png', original: '背景', title: '背景1', ext: '.png', type: 'img' }],
         shop_radius: {
             radius: 8,
             radius_top_left: 8,
             radius_top_right: 8,
             radius_bottom_left: 8,
             radius_bottom_right: 8,
-        } ,
+        },
         shop_img_radius: {
             radius: 4,
             radius_top_left: 4,
@@ -104,27 +111,30 @@ const defaultSeckill: DefaultSeckill = {
             radius_bottom_right: 4,
         },
         shop_padding: {
-            padding: 10, 
-            padding_top: 10, 
-            padding_bottom: 10, 
-            padding_left: 10, 
+            padding: 10,
+            padding_top: 10,
+            padding_bottom: 10,
+            padding_left: 10,
             padding_right: 10,
         },
         content_outer_spacing: 10, // 商品间距
         content_spacing: 10,
         content_outer_height: 232,
         shop_title_typeface: '500',
-        shop_title_size: 14,    
-        shop_title_color: "#333333",
+        shop_title_size: 14,
+        shop_title_color: '#333333',
         shop_price_typeface: '500',
         shop_price_size: 18,
-        shop_price_color: "#EA3323;",
+        shop_price_color: '#EA3323;',
         original_price_color: '',
         seckill_subscript_location: '',
         seckill_subscript_text_color: '',
         seckill_subscript_bg_color: '',
         progress_bg_color: '#FFEDED',
-        progress_actived_color_list: [{ color: '#FF3131', color_percentage: undefined }, { color: '#FF973D', color_percentage: undefined }],
+        progress_actived_color_list: [
+            { color: '#FF3131', color_percentage: undefined },
+            { color: '#FF973D', color_percentage: undefined },
+        ],
         progress_actived_direction: '180deg',
         progress_button_color: '#FFDE81',
         progress_button_icon_color: '#FF2525',