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

修改选项卡的逻辑处理

v1.2.0
于肖磊 2025-02-10 17:55:52 +08:00
parent 0187d79a6b
commit efd15ad94d
7 changed files with 83 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/model-article-tabs/model-article-tabs-content.vue
View File

@ -7,8 +7,8 @@
<div class="mb-12">展示设置</div>
<el-form-item label="选项卡置顶">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" :disabled="is_immersion_model" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>1.开启沉浸样式时，选项卡置顶功能禁用</span><br/><span>2.滑动置顶仅手机端有效</span>" raw-content placement="top">
<el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>滑动置顶仅手机端有效</span>" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</div>
@ -313,14 +313,14 @@ const styles = reactive(props.tabStyle);
const tabs_theme_change = (val: string | number | boolean | undefined): void => {
styles.tabs_color_checked = tabs_style(styles.tabs_color_checked, val);
};
// 监听是否开启沉浸式
const is_immersion_model = computed(() => common_store.is_immersion_model);
// 监听沉浸式开启
watchEffect(() => {
if (is_immersion_model.value) {
form.tabs_top_up = '0';
}
});
// // 监听是否开启沉浸式
// const is_immersion_model = computed(() => common_store.is_immersion_model);
// // 监听沉浸式开启
// watchEffect(() => {
// if (is_immersion_model.value) {
// form.tabs_top_up = '0';
// }
// });
// 标题浮起之后文章标题的颜色和字体更新
const switch_chage = (val: string | number | boolean) => {
if (val == '1') {

16
src/components/model-data-tabs/model-data-tabs-content.vue
View File

@ -7,8 +7,8 @@
<div class="mb-12">选项卡设置</div>
<el-form-item label="置顶">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" :disabled="is_immersion_model" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>1.开启沉浸样式时，选项卡置顶功能禁用</span><br/><span>2.滑动置顶仅手机端有效</span>" raw-content placement="top">
<el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>滑动置顶仅手机端有效</span>" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</div>
@ -303,13 +303,13 @@ const tabs_theme_change = (val: string | number | boolean | undefined): void =>
styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
};
// #endregion
const is_immersion_model = computed(() => common_store.is_immersion_model);
// const is_immersion_model = computed(() => common_store.is_immersion_model);
watchEffect(() => {
if (is_immersion_model.value) {
form.value.tabs_top_up = '0';
}
});
// watchEffect(() => {
// if (is_immersion_model.value) {
// form.value.tabs_top_up = '0';
// }
// });
</script>
<style lang="scss" scoped>
.content {

16
src/components/model-goods-tabs/model-goods-tabs-content.vue
View File

@ -7,8 +7,8 @@
<div class="mb-12">展示设置</div>
<el-form-item label="选项卡置顶">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" :disabled="is_immersion_model" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>1.开启沉浸样式时，选项卡置顶功能禁用</span><br/><span>2.滑动置顶仅手机端有效</span>" raw-content placement="top">
<el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>滑动置顶仅手机端有效</span>" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</div>
@ -286,12 +286,12 @@ const is_revise = ref(false);
const change_shop_type = () => {
is_revise.value = true;
};
const is_immersion_model = computed(() => common_store.is_immersion_model);
watchEffect(() => {
if (is_immersion_model.value) {
form.value.tabs_top_up = '0';
}
});
// const is_immersion_model = computed(() => common_store.is_immersion_model);
// watchEffect(() => {
// if (is_immersion_model.value) {
// form.value.tabs_top_up = '0';
// }
// });
</script>
<style lang="scss" scoped>
.content {

18
src/components/model-tabs/model-tabs-content.vue
View File

@ -18,8 +18,8 @@
<upload v-model="form.tabs_adorn_img" v-model:icon-value="form.tabs_adorn_icon" is-icon :limit="1" size="50"></upload>
</el-form-item>
<el-form-item label="滑动置顶">
<el-switch v-model="form.tabs_top_up" class="mr-10" active-value="1" inactive-value="0" :disabled="is_immersion_model" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>1.开启沉浸样式时，选项卡置顶功能禁用</span><br/><span>2.滑动置顶仅手机端有效</span>" raw-content placement="top">
<el-switch v-model="form.tabs_top_up" class="mr-10" active-value="1" inactive-value="0" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>滑动置顶仅手机端有效</span>" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</el-form-item>
@ -151,13 +151,13 @@ const on_sort = (new_list: nav_group[]) => {
const tabs_theme_change = (val: string | number | boolean | undefined): void => {
styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
};
// 选项卡是否可以滑动置顶
const is_immersion_model = computed(() => common_store.is_immersion_model);
watchEffect(() => {
if (is_immersion_model.value) {
form.value.tabs_top_up = '0';
}
});
// // 选项卡是否可以滑动置顶
// const is_immersion_model = computed(() => common_store.is_immersion_model);
// watchEffect(() => {
// if (is_immersion_model.value) {
// form.value.tabs_top_up = '0';
// }
// });
</script>
<style lang="scss" scoped>
.cursor-move {

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 {

10
src/store/modules/common.ts
View File

@ -4,7 +4,7 @@ export const commonStore = defineStore('common', () => {
// 链接是否需要调接口判断
const is_common_api = ref(false);
const is_immersion_model = ref(false);
const is_have_tabs = ref(false);
const is_tabs_0_up = ref(false);
const header_height = ref(0);
const common = ref({
article_category: [] as any[], //---- 文章分类
@ -49,8 +49,8 @@ export const commonStore = defineStore('common', () => {
is_immersion_model.value = bool;
};
const set_is_have_tabs = (bool: boolean) => {
is_have_tabs.value = bool;
const set_is_tabs_0_up = (bool: boolean) => {
is_tabs_0_up.value = bool;
};
const set_header_height = (height: number) => {
@ -61,12 +61,12 @@ export const commonStore = defineStore('common', () => {
common,
is_common_api,
is_immersion_model,
is_have_tabs,
is_tabs_0_up,
header_height,
set_common,
set_is_common_api,
set_is_immersion_model,
set_is_have_tabs,
set_is_tabs_0_up,
set_header_height,
};
});

28
src/views/layout/components/main/index.vue
View File

@ -323,11 +323,29 @@ const draggable_click = (item: componentsData) => {
}
}
};
// watchEffect(() => {
// if (tabs_data.value.length <= 0) {
// common_store.set_is_have_tabs(false);
// }
// });
// 定义常量
const TABS_TOP_UP_ENABLED = '1';
const DEFAULT_TABS_TOP_UP = '0';
// 判断是否是选项卡
watchEffect(() => {
if (tabs_data.value.length > 0) {
const tabs_top_up = tabs_data.value[0]?.com_data?.content?.tabs_top_up || DEFAULT_TABS_TOP_UP;
if (tabs_top_up == TABS_TOP_UP_ENABLED) {
common_store.set_is_tabs_0_up(true);
} else {
common_store.set_is_tabs_0_up(false);
}
} else if (diy_data.value.length > 0) {
const tabs_top_up = diy_data.value[0]?.com_data?.content?.tabs_top_up || DEFAULT_TABS_TOP_UP;
if (tabs_top_up == TABS_TOP_UP_ENABLED) {
common_store.set_is_tabs_0_up(true);
} else {
common_store.set_is_tabs_0_up(false);
}
} else {
common_store.set_is_tabs_0_up(false);
}
});
// 复制
const clone_item_com_data = (item: commonComponentData) => {