sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改页面设置显示

v1.0.0
于肖磊 2024-08-29 17:39:54 +08:00
parent 713d4cea1a
commit e890abff42
8 changed files with 114 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/model-nav-group/index.ts
View File

@ -2,7 +2,7 @@ interface nav_group {
id: string;
nav_image: uploadList[];
title: string;
title_link: string,
title_link: object,
}
interface nav_group_content {

10
src/components/model-nav-group/model-nav-group-content.vue
View File

@ -73,25 +73,25 @@ const props = withDefaults(defineProps<Props>(),{
id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
nav_image: [],
title: '',
title_link: '',
title_link: {},
},
{
id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
nav_image: [],
title: '',
title_link: '',
title_link: {},
},
{
id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
nav_image: [],
title: '',
title_link: '',
title_link: {},
},
{
id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
nav_image: [],
title: '',
title_link: '',
title_link: {},
}
]
})
@ -106,7 +106,7 @@ const add = () => {
id: get_math(),
nav_image: [],
title: '',
title_link: '',
title_link: {},
});
}
const remove = (index: number) => {

1
src/components/model-shop-list/model-shop-list-content.vue
View File

@ -49,6 +49,7 @@
</el-form-item>
</template>
</card-container>
<div class="divider-line"></div>
<!-- 商品显示的配置信息 -->
<product-show-config :value="form" @change_shop_type="change_shop_type"></product-show-config>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>

1
src/components/model-shop-tabs/model-shop-tabs-content.vue
View File

@ -77,6 +77,7 @@
<el-button class="mtb-20 w" @click="tabs_add">+添加</el-button>
</div>
</card-container>
<div class="divider-line"></div>
<!-- 商品显示的配置信息 -->
<product-show-config :value="form" @change_shop_type="change_shop_type"></product-show-config>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>

10
src/components/page-settings/index.vue
View File

@ -5,8 +5,11 @@
<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 re">
<div class="flex align-c jc-c w h" :style="[{ 'justify-content': form?.indicator_location || 'center', 'padding-right': form?.indicator_location == 'flex-end' ? '90px' : '0'}, text_style]">
{{ props.pageData.com_data?.content?.title || '新建页面' }}
<div class="flex align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center', 'padding-right': form?.indicator_location == 'flex-end' ? '90px' : '0'}, text_style]">
<template v-if="form.theme == '2'">
<image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:3.2rem;height:3.2rem;"></image-empty>
</template>
<div>{{ form?.title || '新建页面' }}</div>
</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')" />
@ -85,4 +88,7 @@ const text_style = computed(() => `font-weight:${ new_style.value.background_tit
z-index: 1;
box-sizing: border-box;
}
.logo-style {
max-height: 3.2rem;
}
</style>

9
src/components/page-settings/page-content.vue
View File

@ -6,6 +6,9 @@
<theme-select v-model="form.theme" :data="base_list.themeList" @update:model-value="themeChange"></theme-select>
</el-form-item>
<template v-if="form.theme == '1' || form.theme == '2'">
<el-form-item v-if="form.theme == '2'" label="logo">
<upload v-model="form.logo" :limit="1"></upload>
</el-form-item>
<el-form-item label="页面标题">
<el-input v-model="form.title" placeholder="请输入标题名称"></el-input>
</el-form-item>
@ -60,8 +63,10 @@ const base_list = reactive({
{ name: '隐藏', value: '0' },
],
});
const themeChange = (value: string) => {
console.log(value);
const emit = defineEmits(['update:change-theme']);
const themeChange = (val: string) => {
emit('update:change-theme', val);
};
</script>
<style lang="scss" scoped></style>

91
src/components/page-settings/page-setting.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="setting-content">
<template v-if="type == '1'">
<page-content :value="value.content"></page-content>
<page-content :value="value.content" @update:change-theme="change_theme"></page-content>
</template>
<template v-else-if="type == '2'">
<page-styles :value="value.style"></page-styles>
@ -19,5 +19,92 @@ const props = defineProps({
default: () => ({}),
},
});
const default_config = {
style: {
theme_1: {
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: undefined }],
background_direction: '180deg',
background_img_style: 2,
background_img_url: [],
background_title_color: '#000',
background_title_typeface: '500',
background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
},
theme_2: {
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: undefined }],
background_direction: '180deg',
background_img_style: 2,
background_img_url: [],
background_title_color: '#000',
background_title_typeface: '500',
background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
},
theme_3: {
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: undefined }],
background_direction: '180deg',
background_img_style: 2,
background_img_url: [],
background_title_color: '#000',
background_title_typeface: '500',
background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
},
theme_4: {
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: undefined }],
background_direction: '180deg',
background_img_style: 2,
background_img_url: [],
background_title_color: '#000',
background_title_typeface: '500',
background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
},
theme_5: {
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: undefined }],
background_direction: '180deg',
background_img_style: 2,
background_img_url: [],
background_title_color: '#000',
background_title_typeface: '500',
background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
},
theme_6: {
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: undefined }],
background_direction: '180deg',
background_img_style: 2,
background_img_url: [],
background_title_color: '#000',
background_title_typeface: '500',
background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
},
},
};
const form = ref(props.value);
const change_theme = (val: string) => {
if (val) {
form.value.style = Object.assign({}, form.value.style, (<arrayIndex>default_config.style)[`theme_${Number(val)}`]);
}
};
</script>

2
src/layout/components/main/default/header-nav.ts
View File

@ -3,6 +3,7 @@ import defaultCommon from './index';
interface DefaultFooterNav {
content: {
theme: string;
logo: uploadList[];
title: string;
link: object;
indicator_location: string;
@ -26,6 +27,7 @@ interface DefaultFooterNav {
const defaultFooterNav: DefaultFooterNav = {
content: {
theme: '1',
logo: [],
title: '',
link: {},
indicator_location: 'center',