Merge remote-tracking branch 'origin/dev-yxl' into dev-sws

src/components/common/common-styles/index.vue

@@ -63,7 +63,7 @@ const props = defineProps({
     value: {
         type: Object,
         default: () => ({}),
-    },
+    }
 });
 // 初始化表单数据
 const init_form = reactive({

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

@@ -117,20 +117,8 @@ const default_config = {
     },
 };
 const change_theme = (val: string) => {
-    if (val === '1') {
+    if (val) {
-        form.value.style = default_config.style.theme_1;
+        form.value.style = Object.assign({}, form.value.style, (<arrayIndex>default_config.style)[`theme_${Number(val) + 1}`]);
-    } else if (val === '2') {
-        form.value.style = default_config.style.theme_2;
-    } else if (val === '3') {
-        form.value.style = default_config.style.theme_3;
-    } else if (val === '4') {
-        form.value.style = default_config.style.theme_4;
-    } else if (val === '5') {
-        form.value.style = default_config.style.theme_5;
-    } else if (val === '6') {
-        form.value.style = default_config.style.theme_6;
-    } else if (val === '7') {
-        form.value.style = default_config.style.theme_7;
     }
 };
 </script>

src/components/page-settings/index.vue

@@ -2,11 +2,16 @@
     <div class="model-top">
         <div :class="['roll', { 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
             <div class="pt-15 pb-10 pl-25 pr-25 w">
-                <img class="img" :style="`Filter: brightness(${ new_style.function_buttons_type == 'black' ? 0 : 100 })`" :src="url_computer()" />
+                <img class="img" :style="`Filter: brightness(${ new_style.function_buttons_type == 'black' ? 0 : 100 })`" src="@/assets/images/layout/main/main-top.png" />
             </div>
-            <div class="model-head tc">
+            <div class="model-head tc re">
+                <div class="flex align-c jc-c w h">
                     {{ props.pageData.com_data?.content?.title || '新建页面' }}
                 </div>
+                <div class="model-head-icon">
+                    <img class="function-icon" :src="url_computer(new_style.function_buttons_type == 'black' ? 'function-icon-black' : 'function-icon-white')" />
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -30,17 +35,15 @@ const new_style = computed(() => props.pageData.com_data.style);
 const position = computed(() => new_style.value.up_slide_display ? 'absolute' : 'relative');
 const roll_style = computed(() => {
     let style = ``;
-    if (new_style.value.background_type === 'color') {
+    if (new_style.value.background_type === 'color_image') {
-        style += gradient_computer({ color_list: new_style.value.background_color_list, direction: new_style.value.background_direction });
+        style += gradient_computer({ color_list: new_style.value.background_color_list, direction: new_style.value.background_direction }) + background_computer(new_style.value);
-    } else if (new_style.value.background_type === 'image') {
-        style += background_computer(new_style.value);
     } else {
         style += `background: transparent;`;
     }
     return style
 });
-const url_computer = () => {
+const url_computer = (name: string) => {
-    const new_url = ref(new URL(`../../assets/images/layout/main/main-top.png`, import.meta.url).href).value;
+    const new_url = ref(new URL(`../../assets/images/layout/main/${name}.png`, import.meta.url).href).value;
     return new_url;
 };
 </script>
@@ -54,8 +57,7 @@ const url_computer = () => {
     .roll {
         width: 39rem;
         margin: 0 auto;
-        // box-shadow: 0px 0 0px 0.2rem #fff;
+        cursor: pointer;
-        // border-bottom: 0.1rem solid #f5f5f5;
     }
     .img {
         width: 34rem;
@@ -63,8 +65,15 @@ const url_computer = () => {
 }
 .model-head {
     height: 4.3rem;
-    padding: 1.1rem 0;
+}
-    cursor: pointer;
+.model-head-icon {
+    position: absolute;
+    right: 1.2rem;
+    bottom: 0.6rem;
+    height: 3.2rem;
+    .function-icon {
+        height: 3.2rem;
+    }
 }
 .page-settings-border {
     // border: 0.2rem solid $cr-main;

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

@@ -7,13 +7,24 @@
                     <div class="flex-col gap-10">
                         <el-radio-group v-model="form.background_type">
                             <el-radio value="transparent">透明</el-radio>
-                            <el-radio value="color">颜色</el-radio>
+                            <el-radio value="color_image">颜色/图片</el-radio>
-                            <el-radio value="image">图片</el-radio>
                         </el-radio-group>
-                        <template v-if="form.background_type === 'color'">
+                        <template v-if="form.background_type === 'color_image'">
                             <mult-color-picker :value="form.background_color_list" :type="form.background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
-                        </template>
+                            <div class="flex-row jc-sb align-c">
-                        <template v-else-if="form.background_type === 'image'">
+                                <div class="size-12">背景图</div>
+                                <el-radio-group v-model="form.background_img_style" is-button>
+                                    <el-tooltip content="单张" placement="top" effect="light">
+                                        <el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
+                                    </el-tooltip>
+                                    <el-tooltip content="平铺" placement="top" effect="light">
+                                        <el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
+                                    </el-tooltip>
+                                    <el-tooltip content="铺满" placement="top" effect="light">
+                                        <el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
+                                    </el-tooltip>
+                                </el-radio-group>
+                            </div>
                             <upload v-model="form.background_img_url" :limit="1"></upload>
                         </template>
                     </div>

src/layout/components/main/default/header-nav.ts

@@ -9,6 +9,7 @@ interface DefaultFooterNav {
         background_type: string;
         background_color_list: color_list[];
         background_direction: string;
+        background_img_style: number;
         background_img_url: uploadList[];
         background_title_color: string,
         background_title_typeface: string,
@@ -25,9 +26,10 @@ const defaultFooterNav: DefaultFooterNav = {
         title: '',
     },
     style: {
-        background_type: 'color',
+        background_type: 'color_image',
         background_color_list: [{ color: '#fff', color_percentage: '' }],
         background_direction: '180deg',
+        background_img_style: 2,
         background_img_url: [],
         background_title_color: '#000',
         background_title_typeface: '500',