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

选项卡新增背景设置

v1.2.0
于肖磊 2025-02-14 15:56:52 +08:00
parent 891ada2f83
commit 2988535c68
16 changed files with 226 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/base/sliding-fixed/index.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<el-form-item label="滑动固定" class="w mb-10">
<div class="flex-row w h">
<el-switch v-model="is_sliding_fixed" class="mr-10" active-value="1" inactive-value="0" @change="sliding_fixed_change" />
<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>
</el-form-item>
</template>
<script lang="ts" setup>
const is_sliding_fixed = defineModel({ type: String, default: '0' });
const emit = defineEmits(['sliding_fixed_change']);
const sliding_fixed_change = (val: string | number | boolean) => {
emit('sliding_fixed_change', val);
};
</script>

65
src/components/common/tabs-view/index.vue
View File

@ -1,39 +1,41 @@
<template>
<div :class="`flex-row gap-10 align-c ${ form.justification == 'center' ? 'jc-c' : form.justification == 'right' ? 'jc-e': 'jc-sb' }`">
<div class="tabs flex-row oh" :style="`column-gap: ${new_style.tabs_spacing}px;height: ${tabs_height}`">
<div class="tabs flex-row oh" :style="`height: ${tabs_height}`">
<template v-for="(item, index) in form.tabs_list" :key="index">
<div class="item nowrap ma-auto" :class="tabs_theme + (index == activeIndex ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" style="flex:0 0 auto;">
<template v-if="!isEmpty(item.img)">
<image-empty v-model="item.img[0]" class="img re z-deep" :style="top_img_style('data')" fit="contain" error-img-style="width:3.9rem;height:3.9rem;"></image-empty>
</template>
<template v-else>
<image-empty class="img re z-deep" :style="top_img_style('noData')" fit="contain" error-img-style="width:3.9rem;height:3.9rem;"></image-empty>
</template>
<template v-if="item.tabs_type == '1'">
<template v-if="!isEmpty(item.tabs_icon)">
<div :class="['title re ', tabs_theme_index == '4' ? 'z-i' : 'z-deep']" :style="title_icon_style(index, 'icon') + (index == activeIndex ? '' : padding_bottom)">
<el-icon :class="`iconfont ${ 'icon-' + item.tabs_icon}`" :style="icon_style(index)" />
</div>
<div class="item nowrap flex-col jc-c align-c" :class="tabs_theme + (index == activeIndex ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" :style="'flex:0 0 auto;' + item_style(index, item.is_sliding_fixed)">
<div class="nowrap ma-auto">
<template v-if="!isEmpty(item.img)">
<image-empty v-model="item.img[0]" class="img re z-deep" :style="top_img_style('data')" fit="contain" error-img-style="width:3.9rem;height:3.9rem;"></image-empty>
</template>
<template v-else>
<div :class="['title re ', tabs_theme_index == '4' ? 'z-i' : 'z-deep']" :style="title_icon_style(index, 'img') + (index == activeIndex ? '' : padding_bottom)">
<image-empty v-model="item.tabs_img[0]" fit="contain" :style="img_style()" error-img-style="width: 2rem;height: 2rem;" />
</div>
<image-empty class="img re z-deep" :style="top_img_style('noData')" fit="contain" error-img-style="width:3.9rem;height:3.9rem;"></image-empty>
</template>
</template>
<template v-else>
<div :class="['title re ', tabs_theme_index == '4' ? 'z-i' : 'z-deep']" :style="title_style(index) + (index == activeIndex ? '' : padding_bottom)">{{ item.title }}</div>
</template>
<div class="desc w re z-i" :style="tabs_sign_spacing + (tabs_theme_index == '1' && index == activeIndex ? tabs_check : '')">{{ item.desc }}</div>
<template v-if="tabs_theme_index == '3' && index == activeIndex">
<template v-if="!isEmpty(form.tabs_adorn_icon)">
<icon :name="form.tabs_adorn_icon" class="icon re z-i" :style="icon_tabs_check() + tabs_sign_spacing" :size="new_style.tabs_adorn_icon_size + ''"></icon>
<template v-if="item.tabs_type == '1'">
<template v-if="!isEmpty(item.tabs_icon)">
<div :class="['title re ', tabs_theme_index == '4' ? 'z-i' : 'z-deep']" :style="title_icon_style(index, 'icon') + (index == activeIndex ? '' : padding_bottom)">
<el-icon :class="`iconfont ${ 'icon-' + item.tabs_icon}`" :style="icon_style(index)" />
</div>
</template>
<template v-else>
<div :class="['title re ', tabs_theme_index == '4' ? 'z-i' : 'z-deep']" :style="title_icon_style(index, 'img') + (index == activeIndex ? '' : padding_bottom)">
<image-empty v-model="item.tabs_img[0]" fit="contain" :style="img_style()" error-img-style="width: 2rem;height: 2rem;" />
</div>
</template>
</template>
<template v-else>
<image-empty v-model="form.tabs_adorn_img[0]" fit="contain" class="re z-i" :style="tabs_adorn_img_style + tabs_sign_spacing" error-img-style="width: 2rem;height: 2rem;" />
<div :class="['title re ', tabs_theme_index == '4' ? 'z-i' : 'z-deep']" :style="title_style(index) + (index == activeIndex ? '' : padding_bottom)">{{ item.title }}</div>
</template>
</template>
<div class="bottom_line re z-i" :class="tabs_bottom_line_theme" :style="tabs_check + tabs_sign_spacing"></div>
<div class="desc w re z-i" :style="tabs_sign_spacing + (tabs_theme_index == '1' && index == activeIndex ? tabs_check : '')">{{ item.desc }}</div>
<template v-if="tabs_theme_index == '3' && index == activeIndex">
<template v-if="!isEmpty(form.tabs_adorn_icon)">
<icon :name="form.tabs_adorn_icon" class="icon re z-i" :style="icon_tabs_check() + tabs_sign_spacing" :size="new_style.tabs_adorn_icon_size + ''"></icon>
</template>
<template v-else>
<image-empty v-model="form.tabs_adorn_img[0]" fit="contain" class="re z-i" :style="tabs_adorn_img_style + tabs_sign_spacing" error-img-style="width: 2rem;height: 2rem;" />
</template>
</template>
<div class="bottom_line re z-i" :class="tabs_bottom_line_theme" :style="tabs_check + tabs_sign_spacing"></div>
</div>
</div>
</template>
</div>
@ -59,6 +61,10 @@ const props = defineProps({
type: Number,
default: 0,
},
tabsSlidingFixedBg: {
type: String,
default: '',
}
});
// const tabs = ref(props.value);
// 用于页面判断显示
@ -83,6 +89,11 @@ const tabs_theme = computed(() => {
}
return tabs_theme;
});
const item_style = computed(() => {
return (index: number, is_sliding_fixed: string) => {
return `padding-left: ${ index == 0 ? '0' : new_style.value.tabs_spacing / 2}px;padding-right:${ index - 1 == form.value.tabs_list.length ? '0' : new_style.value.tabs_spacing / 2 }px;${ is_sliding_fixed == '1' ? props.tabsSlidingFixedBg : ''}`
}
});
const tabs_bottom_line_theme = computed(() => {
return new_style.value.tabs_one_theme == '1' ? 'tabs-bottom-line-theme' : '';
});

5
src/components/model-article-tabs/index.vue
View File

@ -3,7 +3,7 @@
<div class="flex-col" :style="style_img_container">
<div class="oh" :style="tabs_container">
<div class="oh" :style="tabs_img_container">
<tabs-view ref="tabs" :value="article_tabs" :active-index="tabs_active_index"></tabs-view>
<tabs-view ref="tabs" :value="article_tabs" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
</div>
</div>
<div class="oh" :style="article_container">
@ -37,6 +37,8 @@ const tabs_img_container = ref('');
// 区域内边距
const article_container = ref('');
const article_img_container = ref('');
// 打开滑动固定开关之后，显示的样式
const tabs_sliding_fixed_bg = ref('');
watch(
() => props.value,
(val) => {
@ -51,6 +53,7 @@ watch(
background_img_style: new_style.tabs_bg_background_img_style,
background_img: new_style.tabs_bg_background_img,
}
tabs_sliding_fixed_bg.value = gradient_computer(tabs_data);
tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + border_computer(new_style.tabs_content) + box_shadow_computer(new_style.tabs_content);
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
// 文章区域背景设置

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

@ -60,6 +60,7 @@
</template>
</div>
</el-form-item>
<sliding-fixed v-model="row.is_sliding_fixed" @sliding_fixed_change="sliding_fixed_change($event, index)"></sliding-fixed>
<template v-if="form.tabs_active_index == index">
<el-form-item v-if="form.tabs_theme == '1'" label="简介配置">
<el-input v-model="row.desc" placeholder="请输入简介" clearable />
@ -180,6 +181,7 @@ onMounted(() => {
}
if (form.tabs_list.length > 1) {
form.tabs_list.forEach((item: any) => {
item.is_sliding_fixed = !isEmpty(item.is_sliding_fixed) ? item.is_sliding_fixed : '0';
item.tabs_img = !isEmpty(item.tabs_img) ? item.tabs_img : [];
item.tabs_icon = !isEmpty(item.tabs_icon) ? item.tabs_icon : '';
item.tabs_type = !isEmpty(item.tabs_type) ? item.tabs_type : '0';
@ -253,6 +255,7 @@ const tabs_add = () => {
tabs_type: '0',
tabs_img: [],
tabs_icon: '',
is_sliding_fixed: '0',
title: '',
desc: '',
data_type: '0',
@ -314,6 +317,26 @@ const url_value_dialog_call_back = (item: any[]) => {
};
}
};
/**
* 处理滑动固定状态变化的函数
* 当某个标签页的滑动固定状态发生变化时，确保同时只有一个标签页被设置为滑动固定
*
* @param val 新的滑动固定状态值，可以是字符串、数字或布尔值
* @param index 当前标签页的索引
*/
const sliding_fixed_change = (val: string | number | boolean, index: number) => {
// 查找除当前标签页外，其他标签页中是否已有滑动固定的
const tabs_list_is_sliding_fixed = form.value.tabs_list.findIndex((item: any, index1: number) => item.is_sliding_fixed == '1' && index != index1);
// 如果当前标签页的滑动固定状态为'1'，且已存在其他滑动固定的标签页
if (val == '1' && tabs_list_is_sliding_fixed != -1) {
// 遍历所有标签页，将其他标签页的滑动固定状态设置为'0'
form.value.tabs_list.forEach((item: any, index1: number) => {
if (index != index1) {
item.is_sliding_fixed = '0';
}
});
}
}
const styles = reactive(props.tabStyle);
// 颜色主题切换

5
src/components/model-data-tabs/index.vue
View File

@ -3,7 +3,7 @@
<div class="flex-col" :style="style_img_container">
<div class="oh" :style="tabs_container">
<div class="oh" :style="tabs_img_container">
<tabs-view ref="tabs" :value="props.value" :active-index="tabs_active_index"></tabs-view>
<tabs-view ref="tabs" :value="props.value" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
</div>
</div>
<div class="oh" :style="data_container">
@ -60,6 +60,8 @@ const outer_container_width = ref(0);
// 数据内容样式
const data_content_container = ref('');
const data_content_img_container = ref('');
// 打开滑动固定开关之后，显示的样式
const tabs_sliding_fixed_bg = ref('');
watch(
() => props.value,
(val) => {
@ -74,6 +76,7 @@ watch(
background_img_style: new_style.tabs_bg_background_img_style,
background_img: new_style.tabs_bg_background_img,
}
tabs_sliding_fixed_bg.value = gradient_computer(tabs_data);
tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + border_computer(new_style.tabs_content) + box_shadow_computer(new_style.tabs_content);
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
// 内容区域背景设置

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

@ -48,6 +48,7 @@
<el-input v-else v-model="row.title" placeholder="请输入标题文字" clearable />
</div>
</el-form-item>
<sliding-fixed v-model="row.is_sliding_fixed" @sliding_fixed_change="sliding_fixed_change($event, index)"></sliding-fixed>
<template v-if="form.tabs_active_index == index">
<el-form-item v-if="form.tabs_theme == '4'" label="上传图片">
<upload v-model="row.img" :limit="1" size="40" styles="2"></upload>
@ -91,7 +92,7 @@ import defaultDataGoodsStyles from '@/components/common/data-tabs-common/goods/d
import defaultDataArticleStyles from '@/components/common/data-tabs-common/article/data-article-styles.vue';
import defaultDataCustomStyles from '@/components/model-custom/model-custom-styles.vue';
import { cloneDeep } from 'lodash';
import { cloneDeep, isEmpty } from 'lodash';
import { article_default_parameter, goods_default_parameter } from "@/config/const/data-tabs";
import defaultCustom from '@/config/const/custom';
import { get_math, tabs_style } from '@/utils';
@ -145,6 +146,7 @@ const arry_list = form.value.tabs_list;
// 历史数据处理
arry_list.forEach((item: any) => {
item.tabs_name = `content`;
item.is_sliding_fixed = !isEmpty(item.is_sliding_fixed) ? item.is_sliding_fixed : '0';
if (item.tabs_data_type == 'goods') {
item.article_config = cloneDeep(article_default_parameter);
item.custom_config = cloneDeep(defaultCustom);
@ -275,6 +277,7 @@ const tabs_list_remove = (index: number) => {
const tabs_list_copy = (index: number) => {
const data = {
...cloneDeep(form.value.tabs_list[index]),
is_sliding_fixed: '0',
tabs_name: 'content',
title: (form.value.tabs_list[index]?.title || '') + '(复制)',
};
@ -294,6 +297,7 @@ const tabs_add = () => {
tabs_type: '0',
tabs_img: [],
tabs_icon: '',
is_sliding_fixed: '0',
title: '',
img: [],
desc: '',
@ -309,6 +313,26 @@ const tabs_add = () => {
const tabs_theme_change = (val: string | number | boolean | undefined): void => {
styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
};
/**
* 处理滑动固定状态变化的函数
* 当某个标签页的滑动固定状态发生变化时，确保同时只有一个标签页被设置为滑动固定
*
* @param val 新的滑动固定状态值，可以是字符串、数字或布尔值
* @param index 当前标签页的索引
*/
const sliding_fixed_change = (val: string | number | boolean, index: number) => {
// 查找除当前标签页外，其他标签页中是否已有滑动固定的
const tabs_list_is_sliding_fixed = form.value.tabs_list.findIndex((item: any, index1: number) => item.is_sliding_fixed == '1' && index != index1);
// 如果当前标签页的滑动固定状态为'1'，且已存在其他滑动固定的标签页
if (val == '1' && tabs_list_is_sliding_fixed != -1) {
// 遍历所有标签页，将其他标签页的滑动固定状态设置为'0'
form.value.tabs_list.forEach((item: any, index1: number) => {
if (index != index1) {
item.is_sliding_fixed = '0';
}
});
}
}
// #endregion
// const is_immersion_model = computed(() => common_store.is_immersion_model);

5
src/components/model-goods-tabs/index.vue
View File

@ -3,7 +3,7 @@
<div class="flex-col" :style="style_img_container">
<div class="oh" :style="tabs_container">
<div class="oh" :style="tabs_img_container">
<tabs-view ref="tabs" :value="props.value" :active-index="tabs_active_index"></tabs-view>
<tabs-view ref="tabs" :value="props.value" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
</div>
</div>
<div class="oh" :style="shop_container">
@ -37,6 +37,8 @@ const tabs_img_container = ref('');
// 商品区域样式设置
const shop_container = ref('');
const shop_img_container = ref('');
// 打开滑动固定开关之后，显示的样式
const tabs_sliding_fixed_bg = ref('');
watch(
() => props.value,
(val) => {
@ -51,6 +53,7 @@ watch(
background_img_style: new_style.tabs_bg_background_img_style,
background_img: new_style.tabs_bg_background_img,
}
tabs_sliding_fixed_bg.value = gradient_computer(tabs_data);
tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + border_computer(new_style.tabs_content) + box_shadow_computer(new_style.tabs_content);
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
// 商品区域背景设置

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

@ -63,6 +63,7 @@
</template>
</div>
</el-form-item>
<sliding-fixed v-model="row.is_sliding_fixed" @sliding_fixed_change="sliding_fixed_change($event, index)"></sliding-fixed>
<template v-if="form.tabs_active_index == index">
<el-form-item v-if="form.tabs_theme == '4'" label="上传图片">
<upload v-model="row.img" :limit="1" size="40" styles="2"></upload>
@ -158,6 +159,7 @@ onBeforeMount(() => {
}
if (form.value.tabs_list.length > 1) {
form.value.tabs_list.forEach((item: any) => {
item.is_sliding_fixed = !isEmpty(item.is_sliding_fixed) ? item.is_sliding_fixed : '0';
item.tabs_img = !isEmpty(item.tabs_img) ? item.tabs_img : [];
item.tabs_icon = !isEmpty(item.tabs_icon) ? item.tabs_icon : '';
item.tabs_type = !isEmpty(item.tabs_type) ? item.tabs_type : '0';
@ -191,6 +193,7 @@ const tabs_add = () => {
tabs_type: '0',
tabs_img: [],
tabs_icon: '',
is_sliding_fixed: '0',
title: '',
img: [],
desc: '',
@ -254,6 +257,26 @@ const url_value_dialog_call_back = (item: any[]) => {
const tabs_theme_change = (val: string | number | boolean | undefined): void => {
styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
};
/**
* 处理滑动固定状态变化的函数
* 当某个标签页的滑动固定状态发生变化时，确保同时只有一个标签页被设置为滑动固定
*
* @param val 新的滑动固定状态值，可以是字符串、数字或布尔值
* @param index 当前标签页的索引
*/
const sliding_fixed_change = (val: string | number | boolean, index: number) => {
// 查找除当前标签页外，其他标签页中是否已有滑动固定的
const tabs_list_is_sliding_fixed = form.value.tabs_list.findIndex((item: any, index1: number) => item.is_sliding_fixed == '1' && index != index1);
// 如果当前标签页的滑动固定状态为'1'，且已存在其他滑动固定的标签页
if (val == '1' && tabs_list_is_sliding_fixed != -1) {
// 遍历所有标签页，将其他标签页的滑动固定状态设置为'0'
form.value.tabs_list.forEach((item: any, index1: number) => {
if (index != index1) {
item.is_sliding_fixed = '0';
}
});
}
}
// 选择某些风格时， 切换到对应的按钮
const change_style = (val: any): void => {
form.value.theme = val;

5
src/components/model-tabs-carousel/index.vue
View File

@ -4,7 +4,7 @@
<div class="flex-col oh" :style="style_img_container + (!isEmpty(swiper_bg_img_style) ? `background-image: url('');` : '')">
<div class="oh" :style="tabs_container">
<div class="oh" :style="tabs_img_container">
<tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :active-index="tabs_active_index"></tabs-view>
<tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
</div>
</div>
<div class="oh" :style="carousel_container">
@ -38,6 +38,8 @@ const tabs_img_container = ref('');
// 轮播区域背景设置
const carousel_container = ref('');
const carousel_img_container = ref('');
// 打开滑动固定开关之后，显示的样式
const tabs_sliding_fixed_bg = ref('');
watch(
props.value,
(val) => {
@ -57,6 +59,7 @@ watch(
...new_style.tabs_padding,
padding_top: (new_style.tabs_padding?.padding_top || 0) + (is_general_safe_distance ? common_store.header_height : 0),
}
tabs_sliding_fixed_bg.value = gradient_computer(tabs_data);
tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + box_shadow_computer(new_style.tabs_content) + border_computer(new_style.tabs_content) + `margin-top: ${ new_style.tabs_margin.margin_top - (is_general_safe_distance ? common_store.header_height : 0) }px;`;
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_tabs_padding);
// 轮播区域背景设置

7
src/components/model-tabs/index.vue
View File

@ -1,12 +1,12 @@
<template>
<div :style="style">
<div :style="style_img_container">
<tabs-view ref="tabs" :value="tabs_list" :is-tabs="true"></tabs-view>
<tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
</div>
</div>
</template>
<script setup lang="ts">
import { common_styles_computer, common_img_computer } from '@/utils';
import { common_styles_computer, common_img_computer, gradient_computer } from '@/utils';
import { cloneDeep } from 'lodash';
const props = defineProps({
value: {
@ -18,11 +18,14 @@ const props = defineProps({
});
const tabs_list = ref(props.value);
// 打开滑动固定开关之后，显示的样式
const tabs_sliding_fixed_bg = ref('');
watch(props.value, (val) => {
let new_data = cloneDeep(val);
const { home_data } = new_data.content;
new_data.content.tabs_list = [home_data, ...new_data.content.tabs_list];
tabs_list.value = new_data;
tabs_sliding_fixed_bg.value = gradient_computer(props.value.style.common_style);
}, { immediate: true, deep: true });
const style = computed(() => common_styles_computer(props.value.style.common_style));

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

@ -46,50 +46,54 @@
<div class="flex-col gap-x-20">
<div class="card-background box-shadow-sm ptb-25 flex gap-y-16 re align-c">
<el-icon class="iconfont icon-jinzhi size-16 cursor-move" />
<el-form-item label="显示类型" class="w mb-0">
<div class="flex-col gap-10 w h">
<el-radio-group v-model="form.home_data.tabs_type">
<el-radio value="0">文本</el-radio>
<el-radio value="1">图片/图标</el-radio>
</el-radio-group>
<template v-if="form.home_data.tabs_type == '1'">
<upload v-model="form.home_data.tabs_img" v-model:icon-value="form.home_data.tabs_icon" is-icon :limit="1" size="50"></upload>
</template>
<template v-else>
<el-input v-model="form.home_data.title" placeholder="请输入标题文字" clearable />
</template>
</div>
</el-form-item>
<div class="flex-col gap-10 w">
<el-form-item label="显示类型" class="w mb-0">
<div class="flex-col gap-10 w h">
<el-radio-group v-model="form.home_data.tabs_type">
<el-radio value="0">文本</el-radio>
<el-radio value="1">图片/图标</el-radio>
</el-radio-group>
<template v-if="form.home_data.tabs_type == '1'">
<upload v-model="form.home_data.tabs_img" v-model:icon-value="form.home_data.tabs_icon" is-icon :limit="1" size="50"></upload>
</template>
<template v-else>
<el-input v-model="form.home_data.title" placeholder="请输入标题文字" clearable />
</template>
</div>
</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>
</div>
</div>
<drag :data="form.tabs_list" type="card" :space-col="25" @remove="remove" @on-sort="on_sort">
<template #default="scoped">
<template #default="{ row, index }">
<div class="flex-col align-c jc-s gap-20 flex-1 w">
<el-form-item label="数据类型" class="w mb-0">
<div class="flex-col gap-10 w h">
<el-radio-group v-model="scoped.row.tabs_type">
<el-radio-group v-model="row.tabs_type">
<el-radio value="0">文本</el-radio>
<el-radio value="1">图片/图标</el-radio>
</el-radio-group>
<template v-if="scoped.row.tabs_type == '1'">
<upload v-model="scoped.row.tabs_img" v-model:icon-value="scoped.row.tabs_icon" is-icon :limit="1" size="50"></upload>
<template v-if="row.tabs_type == '1'">
<upload v-model="row.tabs_img" v-model:icon-value="row.tabs_icon" is-icon :limit="1" size="50"></upload>
</template>
<template v-else>
<el-input v-model="scoped.row.title" placeholder="请输入标题文字" clearable />
<el-input v-model="row.title" placeholder="请输入标题文字" clearable />
</template>
</div>
</el-form-item>
<sliding-fixed v-model="row.is_sliding_fixed" @sliding_fixed_change="sliding_fixed_change($event, index, 'tabs_list')"></sliding-fixed>
<el-form-item label="链接类型" class="w mb-0">
<el-radio-group v-model="scoped.row.data_type">
<el-radio-group v-model="row.data_type">
<el-radio value="0">DIY页面</el-radio>
<el-radio value="1">商品分类</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="scoped.row.data_type == '0' ? 'DIY页面' : '商品分类'" class="w mb-0">
<template v-if="scoped.row.data_type == '0'">
<url-value v-model="scoped.row.micro_page_list" :type="['diy']"></url-value>
<el-form-item :label="row.data_type == '0' ? 'DIY页面' : '商品分类'" class="w mb-0">
<template v-if="row.data_type == '0'">
<url-value v-model="row.micro_page_list" :type="['diy']"></url-value>
</template>
<template v-else>
<url-value v-model="scoped.row.classify" :type="['goods-category']"></url-value>
<url-value v-model="row.classify" :type="['goods-category']"></url-value>
</template>
</el-form-item>
</div>
@ -131,11 +135,13 @@ const { form, styles } = toRefs(state);
onBeforeMount(() => {
if (form.value.tabs_list.length > 1) {
form.value.tabs_list.forEach((item: any) => {
item.is_sliding_fixed = !isEmpty(item.is_sliding_fixed) ? item.is_sliding_fixed : '0';
item.tabs_img = !isEmpty(item.tabs_img) ? item.tabs_img : [];
item.tabs_icon = !isEmpty(item.tabs_icon) ? item.tabs_icon : '';
item.tabs_type = !isEmpty(item.tabs_type) ? item.tabs_type : '0';
});
}
form.value.home_data.is_sliding_fixed = !isEmpty(form.value.home_data.is_sliding_fixed) ? form.value.home_data.is_sliding_fixed : '0';
});
const add = () => {
@ -167,6 +173,27 @@ 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 sliding_fixed_change = (val: string | number | boolean, index: number, type: string) => {
const home_data_is_sliding_fixed = form.value.home_data.is_sliding_fixed == '1';
const tabs_list_is_sliding_fixed = form.value.tabs_list.findIndex((item: any, index1: number) => item.is_sliding_fixed == '1' && index != index1);
// 如果是选中的话，判断是否其他选项卡是否选中，如果有的话，就将其他选项卡设置为0
if (val == '1' && ( home_data_is_sliding_fixed || tabs_list_is_sliding_fixed != -1)) {
// 如果是首页的话，直接将选项卡的数据全部设置为0
if (type == 'home_data') {
form.value.tabs_list.forEach((item: any) => {
item.is_sliding_fixed = '0';
});
} else {
// 如果是其他的话，将首页的数据全部设置为0，不符合当前index也设置为0
form.value.home_data.is_sliding_fixed = '0';
form.value.tabs_list.forEach((item: any, index1: number) => {
if (index != index1) {
item.is_sliding_fixed = '0';
}
});
}
}
}
// 选项卡是否设置安全距离
const is_general_safe_distance = computed(() => common_store.is_general_safe_distance);
watchEffect(() => {

13
src/config/const/article-tabs.ts
View File

@ -13,6 +13,7 @@ interface articleTabsList {
tabs_type: string;
tabs_img: uploadList[];
tabs_icon: string;
is_sliding_fixed: string,
title: string;
desc: string;
data_type: string;
@ -149,12 +150,12 @@ const defaultArticleTabs: DefaultArticleTabs = {
article_theme: '0',
article_carousel_col: '2',
tabs_list: [
{ id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
{ id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
{ id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
{ id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试三', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
{ id: '5', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试四', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
{ id: '6', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试五', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
{ id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '热门推荐', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
{ id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试一', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
{ id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试二', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
{ id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试三', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
{ id: '5', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试四', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
{ id: '6', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试五', desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
],
tabs_active_index: 0,
field_show: ['0', '1', '3'],

9
src/config/const/data-tabs.ts
View File

@ -10,6 +10,7 @@ interface articleTabsList {
tabs_type: string;
tabs_img: uploadList[];
tabs_icon: string;
is_sliding_fixed: string,
title: string;
img: uploadList[];
desc: string;
@ -152,10 +153,10 @@ const defaultProductList: DefaultProductList = {
tabs_top_up: '0',
// 选项卡数据
tabs_list: [
{ id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter) },
{ id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter) },
{ id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter) },
{ id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试三', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter) },
{ id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '热门推荐', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter) },
{ id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试一', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter) },
{ id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试二', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter) },
{ id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试三', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter) },
],
// 选中的内容索引
tabs_active_index: 0,

9
src/config/const/goods-tabs.ts
View File

@ -9,6 +9,7 @@ interface articleTabsList {
tabs_type: string;
tabs_img: uploadList[];
tabs_icon: string;
is_sliding_fixed: string,
title: string;
img: uploadList[];
desc: string;
@ -169,10 +170,10 @@ const defaultProductList: DefaultProductList = {
carousel_col: 3,
// 选项卡数据
tabs_list: [
{ id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', img: [], desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
{ id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', img: [], desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
{ id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', img: [], desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
{ id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试三', img: [], desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
{ id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '热门推荐', img: [], desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
{ id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试一', img: [], desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
{ id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试二', img: [], desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
{ id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试三', img: [], desc: '简介', data_type: '0', keywords: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
],
// 选中的内容索引
tabs_active_index: 0,

9
src/config/const/tabs-carousel.ts
View File

@ -6,6 +6,7 @@ interface tabs_page {
tabs_type: string;
tabs_img: uploadList[];
tabs_icon: string;
is_sliding_fixed: string,
title: string;
desc: string;
data_type: string;
@ -138,11 +139,11 @@ const defaultTabs: defaultTabs = {
// 是否支持安全距离
is_tabs_safe_distance: '0',
// 选项卡数据
home_data: { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
home_data: { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
tabs_list: [
{ id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
],
// 轮播类型
carousel_type: 'inherit',

9
src/config/const/tabs.ts
View File

@ -6,6 +6,7 @@ interface tabs_page {
tabs_type: string;
tabs_img: uploadList[];
tabs_icon: string;
is_sliding_fixed: string;
title: string;
desc: string;
data_type: string;
@ -68,11 +69,11 @@ const defaultTabs: defaultTabs = {
tabs_adorn_icon: 'checked-smooth',
tabs_adorn_img: [],
tabs_top_up: '0',
home_data: { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
home_data: { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
tabs_list: [
{ id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', is_sliding_fixed: '0', title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
],
},
style: {