Merge remote-tracking branch 'origin/dev-yxl' into dev-sws
sws
commit
2af619c6d9
|
|
@ -4,7 +4,12 @@
|
|||
<card-container>
|
||||
<div class="mb-12">展示设置</div>
|
||||
<el-form-item label="选项卡置顶">
|
||||
<el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" />
|
||||
<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>开启沉浸样式时，选项卡置顶功能禁用</span>" raw-content placement="top">
|
||||
<icon name="tips" size="16"></icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="选项卡风格">
|
||||
<el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
|
||||
|
|
@ -254,6 +259,12 @@ 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';
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,12 @@
|
|||
<card-container>
|
||||
<div class="mb-12">展示设置</div>
|
||||
<el-form-item label="选项卡置顶">
|
||||
<el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" />
|
||||
<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>开启沉浸样式时，选项卡置顶功能禁用</span>" raw-content placement="top">
|
||||
<icon name="tips" size="16"></icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="选项卡风格">
|
||||
<el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
|
||||
|
|
@ -272,6 +277,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';
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
|
|
|
|||
|
|
@ -41,15 +41,20 @@
|
|||
<el-radio value="white">白色</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="['1', '2'].includes(search_content.theme)" label="标题名称">
|
||||
<color-text-size-group v-model:color="form.header_background_title_color" v-model:typeface="form.header_background_title_typeface" v-model:size="form.header_background_title_size" default-color="#000000"></color-text-size-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式">
|
||||
<el-switch v-model="form.immersive_style" active-value="1" inactive-value="0"></el-switch>
|
||||
<div class="flex-row align-c gap-10">
|
||||
<el-switch v-model="form.immersive_style" active-value="1" inactive-value="0" :disabled="is_have_tabs" @change="change_immersive_style"></el-switch>
|
||||
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>开启沉浸样式时，不可添加选项卡和选项卡轮播。<br/>并且商品选项卡和文章选项卡的选项卡置顶功能禁用</span>" raw-content placement="top">
|
||||
<icon name="tips" size="16"></icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="上滑展示">
|
||||
<el-switch v-model="form.up_slide_display" active-value="1" inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="['1', '2'].includes(search_content.theme)" label="标题名称">
|
||||
<color-text-size-group v-model:color="form.header_background_title_color" v-model:typeface="form.header_background_title_typeface" v-model:size="form.header_background_title_size" default-color="#000000"></color-text-size-group>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
|
|
@ -79,6 +84,8 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { commonStore } from '@/store';
|
||||
const common_store = commonStore();
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
|
|
@ -91,6 +98,10 @@ const props = defineProps({
|
|||
default: () => {},
|
||||
},
|
||||
});
|
||||
const is_have_tabs = computed(() => {
|
||||
return common_store.is_have_tabs;
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:value']);
|
||||
const state = reactive({
|
||||
form: props.value,
|
||||
|
|
@ -102,8 +113,13 @@ const { form, search_content } = toRefs(state);
|
|||
const header_background_type_change_event = (val: any) => {
|
||||
if (val === 'color_image') {
|
||||
form.value.immersive_style = '0';
|
||||
common_store.set_is_immersion_model(false);
|
||||
} else {
|
||||
form.value.immersive_style = '1';
|
||||
// 没有tabs的情况下，默认开启沉浸模式
|
||||
if (!common_store.is_have_tabs) {
|
||||
form.value.immersive_style = '1';
|
||||
common_store.set_is_immersion_model(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -114,6 +130,13 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
|
|||
form.value.header_background_color_list = arry;
|
||||
form.value.header_background_direction = type.toString();
|
||||
};
|
||||
const change_immersive_style = (val: string | number | boolean) => {
|
||||
if (val === '0') {
|
||||
common_store.set_is_immersion_model(false);
|
||||
return;
|
||||
}
|
||||
common_store.set_is_immersion_model(true);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.styles {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import { defineStore } from 'pinia';
|
|||
export const commonStore = defineStore('common', () => {
|
||||
// 链接是否需要调接口判断
|
||||
const is_common_api = ref(false);
|
||||
const is_immersion_model = ref(false);
|
||||
const is_have_tabs = ref(false);
|
||||
const common = ref({
|
||||
article_category: [] as any[], //---- 文章分类
|
||||
attachment_category: [] as any[], //---- 附件分类
|
||||
|
|
@ -34,10 +36,22 @@ export const commonStore = defineStore('common', () => {
|
|||
is_common_api.value = bool;
|
||||
};
|
||||
|
||||
const set_is_immersion_model = (bool: boolean) => {
|
||||
is_immersion_model.value = bool;
|
||||
};
|
||||
|
||||
const set_is_have_tabs = (bool: boolean) => {
|
||||
is_have_tabs.value = bool;
|
||||
};
|
||||
|
||||
return {
|
||||
common,
|
||||
is_common_api,
|
||||
is_immersion_model,
|
||||
is_have_tabs,
|
||||
set_common,
|
||||
set_is_common_api,
|
||||
set_is_immersion_model,
|
||||
set_is_have_tabs,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -208,6 +208,12 @@ const show_model_border = ref(true);
|
|||
// 点击添加tabs组件
|
||||
const draggable_click = (item: componentsData) => {
|
||||
const type_data = ['tabs', 'tabs-carousel'];
|
||||
|
||||
if (common_store.is_immersion_model) {
|
||||
ElMessage.error('开启沉浸样式下不可以添加该组件');
|
||||
return;
|
||||
}
|
||||
|
||||
if (type_data.includes(item.key) && isEmpty(tabs_data.value)) {
|
||||
// 添加tabs组件
|
||||
tabs_data.value.push({
|
||||
|
|
@ -219,6 +225,7 @@ const draggable_click = (item: componentsData) => {
|
|||
key: item.key,
|
||||
com_data: cloneDeep((defaultSettings as any)[item.key.replace(/-/g, '_')]),
|
||||
});
|
||||
common_store.set_is_have_tabs(true);
|
||||
set_tabs_event(true);
|
||||
} else if (type_data.includes(item.key) && !isEmpty(tabs_data.value)) {
|
||||
if (tabs_data.value[0].key == item.key) {
|
||||
|
|
@ -228,6 +235,12 @@ const draggable_click = (item: componentsData) => {
|
|||
}
|
||||
}
|
||||
};
|
||||
watchEffect(() => {
|
||||
if (tabs_data.value.length <= 0) {
|
||||
common_store.set_is_have_tabs(false);
|
||||
}
|
||||
});
|
||||
|
||||
// 复制
|
||||
const clone_item_com_data = (item: commonComponentData) => {
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in New Issue