bingyi/shopxo-diy
1
0
Fork 0
mirror of https://gitee.com/zongzhige/shopxo-diy.git synced 2026-07-08 14:40:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

修改选项卡的逻辑处理

Browse Source
This commit is contained in:
于肖磊
2025-02-10 17:55:52 +08:00
parent 0187d79a6b
commit efd15ad94d
7 changed files with 83 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/page-settings/page-styles.vue
View File

@ -31,15 +31,15 @@
<el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.immersive_style" active-value="1" inactive-value="0" @change="change_immersive_style"></el-switch>
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>开启沉浸样式时，不可添加选项卡和选项卡轮播。<br/>并且商品选项卡和文章选项卡的选项卡置顶功能禁用</span>" raw-content placement="top">
<!-- <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>开启沉浸样式时，不可添加选项卡和选项卡轮播。<br/>并且商品选项卡和文章选项卡的选项卡置顶功能禁用</span>" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</el-tooltip> -->
</div>
</el-form-item>
<el-form-item v-if="form.header_background_type == 'transparent' && form.immersive_style === '1'" label="安全距离">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.general_safe_distance_value" active-value="1" inactive-value="0"></el-switch>
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="开启后第一个组件上内边距将增加顶部安全距离+导航高度" placement="top">
<el-switch v-model="form.general_safe_distance_value" active-value="1" inactive-value="0" :disabled="is_tabs_0_up"></el-switch>
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>1.第一个组件包含选项卡置顶,并开启置顶,则强制开启安全距离。<br/>2.开启后第一个组件上内边距将增加顶部安全距离+导航高度</span>" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</div>
@ -170,12 +170,12 @@ const header_background_type_change_event = (val: any) => {
form.value.immersive_style = '0';
// 沉浸模式关闭的时候，安全距离关闭
form.value.general_safe_distance_value = '0';
common_store.set_is_immersion_model(false);
// common_store.set_is_immersion_model(false);
} else {
// 没有tabs的情况下，默认开启沉浸模式
// if (!common_store.is_have_tabs) {
form.value.immersive_style = '1';
common_store.set_is_immersion_model(true);
// common_store.set_is_immersion_model(true);
// }
}
};
@ -196,16 +196,28 @@ const location_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.location_color_list = arry;
form.value.location_direction = type.toString();
};
const is_tabs_0_up = computed(() => common_store.is_tabs_0_up );
const change_immersive_style = (val: string | number | boolean) => {
if (val === '0') {
// 沉浸模式关闭的时候，安全距离关闭
form.value.general_safe_distance_value = '0';
common_store.set_is_immersion_model(false);
// common_store.set_is_immersion_model(false);
return;
} else {
// 沉浸模式开启的时候，并且第一个是选项卡置顶，安全距离打开
if (is_tabs_0_up.value) {
form.value.general_safe_distance_value = '1';
}
}
common_store.set_is_immersion_model(true);
// common_store.set_is_immersion_model(true);
};
// 监听tabs是否置顶
watchEffect(() => {
if (is_tabs_0_up.value) {
form.value.general_safe_distance_value = '1';
}
});
</script>
<style lang="scss" scoped>
.styles {