Merge branch 'dev-sws' into dev-yxl

src/components/model-article-list/model-article-list-styles.vue

@@ -39,8 +39,8 @@
                     </el-form-item>
                 </template>
             </card-container>
-            <div class="divider-line"></div>
             <template v-if="theme == '4'">
+                <div class="divider-line"></div>
                 <card-container>
                     <div class="mb-12">轮播设置</div>
                     <el-form-item label="自动轮播">
@@ -50,7 +50,6 @@
                         <slider v-model="form.interval_time" :min="1" :max="100"></slider>
                     </el-form-item>
                 </card-container>
-                <div class="divider-line"></div>
             </template>
         </el-form>
         <div class="divider-line"></div>

src/components/model-article-tabs/model-article-tabs-styles.vue

@@ -55,8 +55,8 @@
                     </el-form-item>
                 </template>
             </card-container>
-            <div class="divider-line"></div>
             <template v-if="theme == '4'">
+                <div class="divider-line"></div>
                 <card-container>
                     <div class="mb-12">轮播设置</div>
                     <el-form-item label="自动轮播">
@@ -66,7 +66,6 @@
                         <slider v-model="form.interval_time" :max="100"></slider>
                     </el-form-item>
                 </card-container>
-                <div class="divider-line"></div>
             </template>
         </el-form>
         <div class="divider-line"></div>

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>
@@ -130,7 +130,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer, gradient_computer } from '@/utils';
+import { common_styles_computer, gradient_computer, online_url } from '@/utils';
 const props = defineProps({
     value: {
         type: Object,
@@ -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,6 +181,26 @@ 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 {
@@ -231,7 +238,7 @@ const theme_7_background_style = computed(() => {
         .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;
@@ -259,7 +266,6 @@ const theme_7_background_style = computed(() => {
     .item {
         flex-basis: auto;
         flex-shrink: 0;
-        background-image: url('../../assets/images/components/model-coupon/theme-2-content-bg.png');
         background-size: 100% 100%;
         width: 8.5rem;
         height: 10rem;
@@ -541,8 +547,6 @@ const theme_7_background_style = computed(() => {
             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;

src/components/model-coupon/model-coupon-content.vue

@@ -46,6 +46,7 @@
     <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>
 </template>
 <script setup lang="ts">
+import { online_url } from '@/utils';
 const props = defineProps({
     value: {
         type: Object,
@@ -62,20 +63,23 @@ const props = defineProps({
 });
 const form = reactive(props.value);
 const url_value_dialog_visible = ref(false);
+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(`../../assets/images/components/model-coupon/theme-1.png`, import.meta.url).href },
-        { id: '2', name: '风格2', url: new URL(`../../assets/images/components/model-coupon/theme-2.png`, import.meta.url).href },
-        { id: '3', name: '风格3', url: new URL(`../../assets/images/components/model-coupon/theme-3.png`, import.meta.url).href },
-        { id: '4', name: '风格4', url: new URL(`../../assets/images/components/model-coupon/theme-4.png`, import.meta.url).href },
-        { id: '5', name: '风格5', url: new URL(`../../assets/images/components/model-coupon/theme-5.png`, import.meta.url).href },
-        { id: '6', name: '风格6', url: new URL(`../../assets/images/components/model-coupon/theme-6.png`, import.meta.url).href },
-        { id: '7', name: '风格7', url: new URL(`../../assets/images/components/model-coupon/theme-7.png`, import.meta.url).href },
-    ],
+    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) => {

src/components/model-coupon/model-coupon-styles.vue

@@ -56,7 +56,7 @@
             </card-container>
         </el-form>
         <div class="divider-line"></div>
-        <common-styles class="styles-height" :value="form.common_style" :is-mult-background="theme !== '7'" @update:value="common_styles_update" />
+        <common-styles :value="form.common_style" :is-mult-background="theme !== '7'" @update:value="common_styles_update" />
     </div>
 </template>
 <script setup lang="ts">
@@ -96,11 +96,4 @@ const common_styles_update = (val: Object) => {
     form.common_style = val;
 };
 </script>
-<style lang="scss" scoped>
-.styles {
-    width: 100%;
-    .styles-height {
-        min-height: calc(100vh - 16.8rem);
-    }
-}
-</style>
+<style lang="scss" scoped></style>

src/components/model-hot-zone/model-hot-zone-styles.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="styles">
-        <common-styles class="styles-height" :value="form.common_style" @update:value="common_styles_update" />
+        <common-styles :value="form.common_style" @update:value="common_styles_update" />
     </div>
 </template>
 <script setup lang="ts">
@@ -18,11 +18,4 @@ const common_styles_update = (val: Object) => {
     form.value.common_style = val;
 };
 </script>
-<style lang="scss" scoped>
-.styles {
-    width: 100%;
-    .styles-height {
-        min-height: calc(100vh - 16.8rem);
-    }
-}
-</style>
+<style lang="scss" scoped></style>

src/components/model-rich-text/model-rich-text-styles.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="styles">
-        <common-styles class="styles-height" :value="form.common_style" @update:value="common_styles_update" />
+        <common-styles :value="form.common_style" @update:value="common_styles_update" />
     </div>
 </template>
 <script setup lang="ts">
@@ -19,11 +19,4 @@ const common_styles_update = (val: Object) => {
     form.common_style = val;
 };
 </script>
-<style lang="scss" scoped>
-.styles {
-    width: 100%;
-    .styles-height {
-        min-height: calc(100vh - 16.8rem);
-    }
-}
-</style>
+<style lang="scss" scoped></style>

src/components/model-video/model-video-styles.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="styles">
-        <common-styles class="styles-height" :value="form.common_style" @update:value="common_styles_update" />
+        <common-styles :value="form.common_style" @update:value="common_styles_update" />
     </div>
 </template>
 <script setup lang="ts">
@@ -19,11 +19,4 @@ const common_styles_update = (val: Object) => {
     form.common_style = val;
 };
 </script>
-<style lang="scss" scoped>
-.styles {
-    width: 100%;
-    .styles-height {
-        min-height: calc(100vh - 16.8rem);
-    }
-}
-</style>
+<style lang="scss" scoped></style>

src/components/page-settings/page-styles.vue

@@ -58,8 +58,8 @@
                 </el-form-item>
             </card-container>
         </el-form>
-        <div class="bg-f5 divider-line" />
         <template v-if="['3', '5'].includes(content.theme)">
+            <div class="bg-f5 divider-line" />
             <model-search-styles :value="form" :content="props.content" :is-show-common="false"></model-search-styles>
         </template>
         <div class="bg-f5 divider-line" />
@@ -76,7 +76,7 @@ const props = defineProps({
     },
     content: {
         type: Object,
-        default: () => { },
+        default: () => {},
     },
 });
 const emit = defineEmits(['update:value']);

src/views/layout/components/main/index.scss

@@ -73,9 +73,11 @@
         justify-content: center;
         overflow: hidden;
         height: 100%;
+        padding: 2rem 0;
         .model-content {
             position: relative;
-            height: 84.6rem;
+            max-height: 84.6rem;
+            height: 100%;
             .model-bottom {
                 position: absolute;
                 bottom: 0;
@@ -95,6 +97,7 @@
                 overflow-y: auto;
                 padding-top: 0.2rem;
                 max-height: 84.4rem;
+                height: 100%;
                 &::-webkit-scrollbar {
                     display: none;
                 }
@@ -102,6 +105,10 @@
                     width: 39rem;
                     background: #f5f5f5;
                     margin: 0 auto;
+                    min-height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: stretch;
                     .drag-area .float-window {
                         position: fixed;
                         max-width: 39rem;
@@ -112,6 +119,13 @@
                         max-width: 39rem;
                         overflow: hidden;
                     }
+                    .model-wall-content {
+                        min-height: 100%;
+                        flex: 1;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: stretch;
+                    }
                 }
             }
             // 悬浮按钮控制， 未选中情况下宽度自适应
@@ -139,6 +153,7 @@
                 position: absolute;
                 top: -0.2rem;
                 left: -0.2rem;
+                z-index: 1;
                 border: 0.2rem solid $cr-main;
             }
             .plug-in-animation {
@@ -279,7 +294,7 @@
         transition: 0.4s ease;
     }
     .drawer-drag-bg {
-        background: #F2F8FF;
+        background: #f2f8ff;
     }
     .drawer-drag-area {
         height: calc(100% - 6rem);
@@ -288,8 +303,8 @@
     .drawer-drag {
         cursor: move;
     }
-    .drawer-drag:hover{
-        background: #F2F8FF;
+    .drawer-drag:hover {
+        background: #f2f8ff;
         .iconfont.icon-close-b {
             display: block !important;
         }
@@ -297,7 +312,7 @@
     .iconfont.icon-close-b {
         right: 1rem;
         top: 1.4rem;
-        color: #8A8A8A;
+        color: #8a8a8a;
         cursor: pointer;
     }
-}
+}

src/views/layout/components/main/index.vue

@@ -46,7 +46,7 @@
                     <!-- 页面设置 -->
                     <page-settings :show-page="page_data.show_tabs" :page-data="page_data" @page_settings="page_settings"></page-settings>
                     <div class="model-wall" :style="content_style">
-                        <div :style="`padding-top:${top_padding}px; margin-top: ${top_margin}px;padding-bottom:${bottom_navigation_show ? footer_nav_counter_store.padding_footer : 0}px;`">
+                        <div class="model-wall-content" :style="`padding-top:${top_padding}px; margin-top: ${top_margin}px;padding-bottom:${bottom_navigation_show ? footer_nav_counter_store.padding_footer : 0}px;`">
                             <VueDraggable v-model="diy_data" :animation="500" :touch-start-threshold="2" group="people" class="drag-area re" ghost-class="ghost" :on-sort="on_sort" :on-start="on_start" :on-end="on_end">
                                 <div v-for="(item, index) in diy_data" :key="item.id" :class="model_class(item)" :style="model_style(item)" @click="on_choose(index, item.show_tabs)">
                                     <div v-if="item.show_tabs" class="plug-in-right" chosenClass="close">
@@ -210,8 +210,6 @@ const top_margin = ref(0);
 const content_style = ref('');
 const main_content_style = ref('');
 const bottom_navigation_show = ref(true);
-const container_min_height = ref(681);
-const height = computed(() => container_min_height.value + 'px');
 watchEffect(() => {
     const data = page_data.value.com_data;
     if (data) {
@@ -226,11 +224,9 @@ watchEffect(() => {
         const { immersive_style, up_slide_display } = new_style;
         // 不开启沉浸式 和 上滑显示
         if (immersive_style || !up_slide_display) {
-            top_padding.value = 2;
-            container_min_height.value = 681 + 88;
+            top_padding.value = 0;
         } else {
             top_padding.value = 90;
-            container_min_height.value = 681;
         }
         // 开启沉浸式并且没有开通上滑显示
         if (immersive_style && !up_slide_display) {
@@ -238,12 +234,6 @@ watchEffect(() => {
         } else {
             top_margin.value = 0;
         }
-        // 开启沉浸式时要加上顶部的高度，关闭底部导航的时候要加上底部的高度
-        if (bottom_navigation_show.value) {
-            container_min_height.value = container_min_height.value - footer_nav_counter_store.padding_footer;
-        } else {
-            container_min_height.value = container_min_height.value + footer_nav_counter_store.padding_footer;
-        }
     }
 });
 
@@ -581,6 +571,10 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
 <style lang="scss" scoped>
 @import 'index.scss';
 .drag-area {
-    min-height: v-bind(height);
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    flex: 1;
 }
 </style>

src/views/layout/components/navbar/index.vue

@@ -109,7 +109,7 @@ const confirm_event = async (formEl: FormInstance | undefined) => {
 </script>
 <style lang="scss" scoped>
 .navbar {
-    height: 8rem;
+    height: 6rem;
     padding: 0 3rem;
     display: flex;
     justify-content: space-between;

src/views/layout/components/settings/index.vue

@@ -149,7 +149,7 @@ const radio = ref('1'); // 创建一个响应式的数字变量，初始值为0
         }
     }
     .setting-content {
-        height: calc(100vh - 16.8rem);
+        height: calc(100vh - 14.8rem);
         overflow: auto;
         background-color: #fff;
     }

src/views/layout/index.vue

@@ -220,7 +220,7 @@ const form_data_transfor_diy_data = (clone_form: diyData) => {
 .app-wrapper {
     background-color: #f0f2f5;
     .app-wrapper-content {
-        height: calc(100vh - 8rem);
+        height: calc(100vh - 6rem);
     }
 }
 .no-copy {