bingyi/shopxo-diy
1
0
Fork 0
mirror of https://gitee.com/zongzhige/shopxo-diy.git synced 2026-07-08 22:40:40 +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

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 {