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

修改页面显示问题

v1.0.0
于肖磊 2024-08-28 18:51:03 +08:00
parent 96d66a8ae5
commit 2003572945
11 changed files with 58 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/components/page-settings/theme_1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/images/components/page-settings/theme_2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/images/components/page-settings/theme_3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/images/components/page-settings/theme_4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/images/components/page-settings/theme_5.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/images/components/page-settings/theme_6.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

4
src/components/common/upload/index.vue
View File

@ -204,14 +204,14 @@
<icon name="add" :size="Number(size) / 2 + ''" color="c"></icon>
</div>
</div>
<div v-else>
<template v-else>
<div :class="'upload-btn upload-btn-style-' + styles" :style="'height:' + upload_size + ';width:' + upload_size + ';'" @click="dialog_visible = true">
<div v-if="!isEmpty(icon_value)" class="upload-del-icon" @click.stop="del_icon_event">
<icon name="close-o" color="c" size="14"></icon>
</div>
<icon :name="!isEmpty(icon_value) ? icon_value : 'add'" :size="Number(size) / 2 + ''" color="c"></icon>
</div>
</div>
</template>
<div v-if="isTips" class="size-12 cr-9">{{ tipsText }}</div>
</div>
</template>

12
src/components/page-settings/index.ts
View File

@ -1,12 +0,0 @@
type page_content = {
title: string;
color_list: color_list[];
direction: string;
background_img_style: string;
background_img_url: uploadList[];
}
// type keys = 'title';
// type content = {
// [key in keys] : string;
// }

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

@ -1,46 +1,55 @@
<template>
<div class="w h">
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<card-container class="common-content-height">
<el-form-item label="页面标题">
<el-input v-model="form.title" placeholder="选填不超过30个字" />
<card-container>
<el-form-item label="选择风格">
<theme-select v-model="form.theme" :data="base_list.themeList" @update:model-value="themeChange"></theme-select>
</el-form-item>
<el-form-item label="背景设置">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<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>
</div>
<template v-if="form.theme == '1' || form.theme == '2'">
<el-form-item label="页面标题">
<el-input v-model="form.title" placeholder="请输入标题名称"></el-input>
</el-form-item>
</template>
</card-container>
<div class="bg-f5 partition-line" />
<card-container>
<el-form-item label="底部导航">
<el-radio-group v-model="form.bottom_navigation_show" class="ml-4">
<el-radio v-for="item in base_list.bottom_navigation" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
</card-container>
</el-form>
</div>
</template>
<script setup lang="ts">
interface Props {
value: page_content;
}
const props = defineProps<Props>();
const props = defineProps({
value: {
type: Object,
default: () => ({}),
}
});
const form = reactive(props.value);
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.color_list = arry;
form.direction = type.toString();
};
const base_list = reactive({
themeList: [
{ id: '1', name: '风格1', url: new URL(`../../assets/images/components/page-settings/theme-1.png`, import.meta.url).href },
{ id: '2', name: '风格2', url: new URL(`../../assets/images/components/page-settings/theme-2.png`, import.meta.url).href },
{ id: '3', name: '风格3', url: new URL(`../../assets/images/components/page-settings/theme-3.png`, import.meta.url).href },
{ id: '4', name: '风格4', url: new URL(`../../assets/images/components/page-settings/theme-4.png`, import.meta.url).href },
{ id: '5', name: '风格5', url: new URL(`../../assets/images/components/page-settings/theme-5.png`, import.meta.url).href },
{ id: '6', name: '风格6', url: new URL(`../../assets/images/components/page-settings/theme-6.png`, import.meta.url).href },
],
bottom_navigation: [
{ name: '显示', value: '1' },
{ name: '隐藏', value: '0' },
],
});
const themeChange = (value: string) => {
console.log(value);
}
</script>
<style lang="scss" scoped>
.partition-line {
height: 0.8rem;
}
</style>

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

@ -2,8 +2,9 @@ import defaultCommon from './index';
interface DefaultFooterNav {
content: {
color_list: color_list[];
theme: string;
title: string;
bottom_navigation_show: string;
};
style: {
background_type: string;
@ -22,8 +23,9 @@ interface DefaultFooterNav {
}
const defaultFooterNav: DefaultFooterNav = {
content: {
color_list: [{ color: '#f5f5f5', color_percentage: '' }],
theme: '1',
title: '',
bottom_navigation_show: '1'
},
style: {
background_type: 'color_image',

14
src/layout/components/main/index.vue
View File

@ -30,7 +30,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:${ footer_nav_counter_store.padding_footer }px;`">
<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;`">
<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">
@ -137,7 +137,7 @@
<div class="seat"></div>
</div>
<!-- 底部区域 -->
<div class="model-bottom">
<div v-if="bottom_navigation_show" class="model-bottom">
<footer-nav :show-footer="footer_nav.show_tabs" :footer-data="footer_nav.com_data" @footer-nav="footer_nav_event"></footer-nav>
</div>
</div>
@ -189,9 +189,15 @@ const top_padding = ref(90);
const top_margin = ref(0);
const content_style = ref('');
const main_content_style = ref('');
const bottom_navigation_show = ref(true);
watchEffect(() => {
if (page_data.value.com_data) {
const new_style = page_data.value.com_data.style;
const data = page_data.value.com_data;
if (data) {
// 底部按钮显示
const content = data.content;
bottom_navigation_show.value = content.bottom_navigation_show == '1' ? true: false;
// 通用样式设置
const new_style = data.style;
content_style.value = gradient_computer(new_style.common_style) + background_computer(new_style.common_style);
main_content_style.value = padding_computer(new_style.common_style);