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

修改定位显示处理

v1.4.0
于肖磊 2025-08-08 16:14:12 +08:00
parent 4d71585c76
commit 782b903ac8
5 changed files with 131 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/common/tabs-magic-config/tabs-magic-common-style.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<card-container class="card-container">
<el-form-item label="是否启用">
<div class="flex-row gap-10">
<el-switch v-model="form.magic_common.is_show" active-value="1" inactive-value="0"></el-switch>
<tooltip content="启用则覆盖选项卡魔方->样式->通用样式"></tooltip>
</div>
</el-form-item>
<template v-if="form.magic_common.is_show == '1'">
<el-form-item label="内容背景">
<background-common v-model:color_list="form.magic_common.color_list" v-model:direction="form.magic_common.direction" v-model:img_style="form.magic_common.background_img_style" v-model:img="form.magic_common.background_img" @mult_color_picker_event="magic_common_mult_color_picker_event" />
</el-form-item>
</template>
</card-container>
</template>
<script lang="ts" setup>
const props = defineProps({
value: {
type: Object,
default: () => {},
}
});
// 魔方独立的内容背景设置
const magic_common_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.magic_common.color_list = arry;
form.value.magic_common.direction = type.toString();
};
const form = ref(props.value);
watch(() => props.value, (newVal) => {
form.value = newVal;
}, {immediate: true, deep: true});
</script>
<style scoped lang="scss">
.card-container {
padding: 1rem !important;
}
</style>

21
src/components/common/tabs-magic-config/tabs-magic-common.vue
View File

@ -20,21 +20,6 @@
<!-- 阴影配置 -->
<shadow-config v-model="form.magic_content"></shadow-config>
</card-container>
<div class="divider-line"></div>
<card-container class="card-container">
<div class="mb-12">通用样式</div>
<el-form-item label="是否启用">
<div class="flex-row gap-10">
<el-switch v-model="form.magic_common.is_show" active-value="1" inactive-value="0"></el-switch>
<tooltip content="启用则覆盖选项卡魔方->样式->通用样式"></tooltip>
</div>
</el-form-item>
<template v-if="form.magic_common.is_show == '1'">
<el-form-item label="内容背景">
<background-common v-model:color_list="form.magic_common.color_list" v-model:direction="form.magic_common.direction" v-model:img_style="form.magic_common.background_img_style" v-model:img="form.magic_common.background_img" @mult_color_picker_event="magic_common_mult_color_picker_event" />
</el-form-item>
</template>
</card-container>
</template>
<script lang="ts" setup>
@ -50,12 +35,6 @@ const magic_content_mult_color_picker_event = (arry: color_list[], type: number)
form.value.magic_content.color_list = arry;
form.value.magic_content.direction = type.toString();
};
// 魔方独立的内容背景设置
const magic_common_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.magic_common.color_list = arry;
form.value.magic_common.direction = type.toString();
};
const form = ref(props.value);
watch(() => props.value, (newVal) => {
form.value = newVal;

4
src/components/model-tabs-magic/index.vue
View File

@ -83,8 +83,8 @@ const tabs_magic_value = computed(() => active_tabs_value.value[tabs_magic_type.
// 判断是否开启轮播图背景设置
const is_rotating_background = computed(() => active_tabs_value.value.rotating_background == '1');
// 选中的公共样式
const style_active_container = computed(() => !isEmpty(tabs_magic_value.value) ? (tabs_magic_value.value.style.magic_common.is_show == '1' ? gradient_computer(tabs_magic_value.value.style.magic_common) : '') : '');
const style_active_img_container = computed(() => !isEmpty(tabs_magic_value.value) ? (tabs_magic_value.value.style.magic_common.is_show == '1' ? background_computer(tabs_magic_value.value.style.magic_common) : '') : '');
const style_active_container = computed(() => !isEmpty(active_tabs_value.value) ? (active_tabs_value.value.magic_common.is_show == '1' ? gradient_computer(active_tabs_value.value.magic_common) : '') : '');
const style_active_img_container = computed(() => !isEmpty(active_tabs_value.value) ? (active_tabs_value.value.magic_common.is_show == '1' ? background_computer(active_tabs_value.value.magic_common) : '') : '');
// 选中的内容区域样式
const magic_container = computed(() => !isEmpty(tabs_magic_value.value) ? (common_styles_computer(tabs_magic_value.value.style.magic_content)) : '');
const magic_img_container = computed(() => !isEmpty(tabs_magic_value.value) ? (common_img_computer(tabs_magic_value.value.style.magic_content)) : '');

99
src/components/model-tabs-magic/model-tabs-magic-content.vue
View File

@ -57,26 +57,33 @@
</el-form-item>
<sliding-fixed v-model="form.home_data.is_sliding_fixed" @sliding_fixed_change="sliding_fixed_change($event, 0, 'home_data')"></sliding-fixed>
<template v-if="form.tabs_active_index == 0">
<el-form-item label="魔方内容" class="w mb-0">
<el-select v-model="form.home_data.magic_type" filterable placeholder="请选择魔方内容" size="default" clearable @change="magic_type_change()">
<el-option v-for="item in magic_option" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item v-if="form.home_data.magic_type == 'carousel'" label="轮播背景" class="w mb-0">
<el-switch v-model="form.home_data.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
<tooltip content="1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景"></tooltip>
</el-form-item>
<template v-if="!isEmpty(form.home_data.magic_type)">
<!-- 魔方内容设置 -->
<el-tabs v-model="tabs_name" class="tabs-magic-content-tabs">
<el-tab-pane label="内容设置" name="content" class="tabs-magic-content">
<tabs-magic-content :magic-type="form.home_data.magic_type" :value="form.home_data[form.home_data.magic_type]"></tabs-magic-content>
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles" class="tabs-magic-content">
<tabs-magic-styles :magic-type="form.home_data.magic_type" :value="form.home_data[form.home_data.magic_type]"></tabs-magic-styles>
</el-tab-pane>
</el-tabs>
</template>
<el-tabs v-model="tabs_name" class="content-tabs">
<el-tab-pane label="内容设置" name="content" class="content">
<el-form-item label="魔方内容" class="w mtb-10">
<el-select v-model="form.home_data.magic_type" filterable placeholder="请选择魔方内容" size="default" clearable @change="magic_type_change()">
<el-option v-for="item in magic_option" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item v-if="form.home_data.magic_type == 'carousel'" label="轮播背景" class="w mtb-10">
<el-switch v-model="form.home_data.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
<tooltip content="1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景"></tooltip>
</el-form-item>
<template v-if="!isEmpty(form.home_data.magic_type)">
<!-- 魔方内容设置 -->
<el-tabs v-model="tabs_magic_name" class="tabs-magic-content-tabs">
<el-tab-pane label="魔方内容" name="content" class="tabs-magic-content">
<tabs-magic-content :magic-type="form.home_data.magic_type" :value="form.home_data[form.home_data.magic_type]"></tabs-magic-content>
</el-tab-pane>
<el-tab-pane label="魔方样式" name="styles" class="tabs-magic-content">
<tabs-magic-styles :magic-type="form.home_data.magic_type" :value="form.home_data[form.home_data.magic_type]"></tabs-magic-styles>
</el-tab-pane>
</el-tabs>
</template>
</el-tab-pane>
<el-tab-pane label="通用样式" name="styles" class="tabs-magic-content">
<tabs-magic-common-style :value="form.home_data"></tabs-magic-common-style>
</el-tab-pane>
</el-tabs>
</template>
</div>
</div>
@ -113,27 +120,34 @@
<url-value v-model="row.classify" :type="['goods-category']"></url-value>
</template>
</el-form-item>
<!-- 魔方内容显示页面 -->
<el-form-item label="魔方内容" class="w mb-0">
<el-select v-model="row.magic_type" filterable placeholder="请选择魔方内容" size="default" clearable @change="magic_type_change()">
<el-option v-for="item in magic_option" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item v-if="row.magic_type == 'carousel'" label="轮播背景" class="w mb-0">
<el-switch v-model="row.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
<tooltip content="1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景"></tooltip>
</el-form-item>
<template v-if="!isEmpty(row.magic_type)">
<!-- 魔方内容设置 -->
<el-tabs v-model="tabs_name" class="tabs-magic-content-tabs">
<el-tab-pane label="内容设置" name="content" class="tabs-magic-content">
<tabs-magic-content :magic-type="row.magic_type" :value="row[row.magic_type]"></tabs-magic-content>
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles" class="tabs-magic-content">
<tabs-magic-styles :magic-type="row.magic_type" :value="row[row.magic_type]"></tabs-magic-styles>
</el-tab-pane>
</el-tabs>
</template>
<el-tabs v-model="tabs_name" class="content-tabs w h">
<el-tab-pane label="内容设置" name="content" class="content">
<!-- 魔方内容显示页面 -->
<el-form-item label="魔方内容" class="w mtb-10">
<el-select v-model="row.magic_type" filterable placeholder="请选择魔方内容" size="default" clearable @change="magic_type_change()">
<el-option v-for="item in magic_option" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item v-if="row.magic_type == 'carousel'" label="轮播背景" class="w mtb-10">
<el-switch v-model="row.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
<tooltip content="1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景"></tooltip>
</el-form-item>
<template v-if="!isEmpty(row.magic_type)">
<!-- 魔方内容设置 -->
<el-tabs v-model="tabs_magic_name" class="tabs-magic-content-tabs">
<el-tab-pane label="魔方内容" name="content" class="tabs-magic-content">
<tabs-magic-content :magic-type="row.magic_type" :value="row[row.magic_type]"></tabs-magic-content>
</el-tab-pane>
<el-tab-pane label="魔方样式" name="styles" class="tabs-magic-content">
<tabs-magic-styles :magic-type="row.magic_type" :value="row[row.magic_type]"></tabs-magic-styles>
</el-tab-pane>
</el-tabs>
</template>
</el-tab-pane>
<el-tab-pane label="通用样式" name="styles" class="tabs-magic-content">
<tabs-magic-common-style :value="row"></tabs-magic-common-style>
</el-tab-pane>
</el-tabs>
</template>
</div>
</template>
@ -257,8 +271,9 @@ const sliding_fixed_change = (val: string | number | boolean, index: number, typ
}
//#region 选项卡魔方内容
const tabs_name = ref('content');
const tabs_magic_name = ref('content');
const magic_type_change = () => {
tabs_name.value = 'content';
tabs_magic_name.value = 'content';
}
//#endregion
// 选项卡是否设置安全距离

38
src/config/const/tabs-magic.ts
View File

@ -34,6 +34,7 @@ interface tabs_page {
micro_page_list: object;
category_list: object;
magic_type: string;
magic_common: object;
rotating_background: string,
carousel: object;
video: object;
@ -142,14 +143,6 @@ const magic_common_config = {
box_shadow_blur: 0,
box_shadow_spread: 0,
},
// 通用样式
magic_common: {
is_show: '0',
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
},
}
// 魔方配置
export const magic_config = {
@ -301,6 +294,14 @@ const defaultTabs: defaultTabs = {
category_list: {},
magic_type: 'carousel',
rotating_background: '0',
// 通用样式
magic_common: {
is_show: '0',
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
},
...cloneDeep(magic_config),
},
tabs_list: [
@ -319,6 +320,13 @@ const defaultTabs: defaultTabs = {
category_list: {},
magic_type: '',
rotating_background: '0',
magic_common: {
is_show: '0',
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
},
...cloneDeep(magic_config),
},
{
@ -336,6 +344,13 @@ const defaultTabs: defaultTabs = {
category_list: {},
magic_type: '',
rotating_background: '0',
magic_common: {
is_show: '0',
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
},
...cloneDeep(magic_config),
},
{
@ -353,6 +368,13 @@ const defaultTabs: defaultTabs = {
category_list: {},
magic_type: '',
rotating_background: '0',
magic_common: {
is_show: '0',
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
},
...cloneDeep(magic_config),
},
],