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

选项卡轮播逻辑修改

v1.2.0
于肖磊 2025-01-17 16:34:19 +08:00
parent bcbcf16f38
commit 002451dcd9
13 changed files with 149 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,7 +25,14 @@
<div class="title" :style="title_style(index) + (index == activeIndex ? '' : padding_bottom)">{{ item.title }}</div>
</template>
<div class="desc" :style="tabs_theme_index == '1' && index == activeIndex ? tabs_check : ''">{{ item.desc }}</div>
<icon name="checked-smooth" class="icon" :style="tabs_theme_index == '3' ? icon_tabs_check() : ''"></icon>
<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" :style="tabs_theme_index == '3' ? icon_tabs_check() : ''" :size="new_style.tabs_adorn_icon_size + ''"></icon>
</template>
<template v-else>
<image-empty v-model="form.tabs_adorn_img[0]" fit="contain" :style="tabs_theme_index == '3' ? tabs_adorn_img_style : ''" error-img-style="width: 2rem;height: 2rem;" />
</template>
</template>
<div class="bottom_line" :class="tabs_bottom_line_theme" :style="tabs_check"></div>
</div>
</template>
@ -82,6 +89,10 @@ const tabs_theme_1_style = computed(() => {
return new_style.value.tabs_one_theme == '1';
});
const tabs_adorn_img_style = computed(() => {
return radius_computer(new_style.value.tabs_adorn_img_radius) + `height: ${new_style.value.tabs_adorn_img_height}px;${ new_style.value.is_tabs_adorn_img_background == '1' ? tabs_check.value : ''}`;
});
const tabs_height = computed(() => {
const DEFAULT_HEIGHT_THEME_2 = 12;
const DEFAULT_HEIGHT_THEME_4 = 4;
@ -182,7 +193,7 @@ const padding_bottom = computed(() => {
bottom = 3;
}
} else if (form.value.tabs_theme == '3') {
bottom = 10;
bottom = !isEmpty(form.value.tabs_adorn_icon) ? new_style.value.tabs_adorn_icon_size : new_style.value.tabs_adorn_img_height;
}
return ['1', '2', '4'].includes(form.value.tabs_theme) ? '' : `padding-bottom: ${(new_style.value?.tabs_sign_spacing || 0) + bottom}px;`;
});
@ -233,7 +244,7 @@ const icon_tabs_check = () => {
bottom: 0;
text-align: center;
font-size: 2rem;
line-height: 1rem !important;
// line-height: 1rem !important;
display: none;
}
.img {

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

@ -18,6 +18,9 @@
<el-radio v-for="item in base_list.tabs_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.tabs_theme == '3'" label="选中图标">
<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-radio-group v-model="form.article_theme" @change="article_theme_change">
<el-radio v-for="item in base_list.article_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>

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

@ -10,6 +10,25 @@
</el-radio-group>
<mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
</el-form-item>
<!-- 装饰图标设置 -->
<template v-if="data.tabs_theme == '3'">
<el-form-item v-if="!isEmpty(data.tabs_adorn_icon)" label="装饰图标">
<slider v-model="form.tabs_adorn_icon_size"></slider>
</el-form-item>
<el-form-item v-else label="装饰图片">
<div class="flex-col gap-10 w">
<el-form-item label="背景" label-width="40">
<el-switch v-model="form.is_tabs_adorn_img_background" active-value="1" inactive-value="0" />
</el-form-item>
<el-form-item label="圆角" label-width="40">
<radius :value="form.tabs_adorn_img_radius"></radius>
</el-form-item>
<el-form-item label="高度" label-width="40">
<slider v-model="form.tabs_adorn_img_height" :max="200"></slider>
</el-form-item>
</div>
</el-form-item>
</template>
<el-form-item label="选中文字">
<color-text-size-group v-model:color="form.tabs_color_checked" v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked" default-color="rgba(51,51,51,1)"></color-text-size-group>
</el-form-item>
@ -195,6 +214,7 @@
</div>
</template>
<script setup lang="ts">
import { isEmpty } from 'lodash'
/**
* @description: 文章选项卡列表 （样式）
* @param value{Object} 样式数据

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

@ -18,6 +18,9 @@
<el-radio v-for="item in base_list.tabs_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.tabs_theme == '3'" label="选中图标">
<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-radio-group v-model="form.theme" @change="change_style">
<el-radio v-for="item in base_list.product_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>

20
src/components/model-goods-tabs/model-goods-tabs-styles.vue
View File

@ -10,6 +10,25 @@
</el-radio-group>
<mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
</el-form-item>
<!-- 装饰图标设置 -->
<template v-if="data.tabs_theme == '3'">
<el-form-item v-if="!isEmpty(data.tabs_adorn_icon)" label="装饰图标">
<slider v-model="form.tabs_adorn_icon_size"></slider>
</el-form-item>
<el-form-item v-else label="装饰图片">
<div class="flex-col gap-10 w">
<el-form-item label="背景" label-width="40">
<el-switch v-model="form.is_tabs_adorn_img_background" active-value="1" inactive-value="0" />
</el-form-item>
<el-form-item label="圆角" label-width="40">
<radius :value="form.tabs_adorn_img_radius"></radius>
</el-form-item>
<el-form-item label="高度" label-width="40">
<slider v-model="form.tabs_adorn_img_height" :max="200"></slider>
</el-form-item>
</div>
</el-form-item>
</template>
<el-form-item label="选中文字">
<color-text-size-group v-model:color="form.tabs_color_checked" v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked" default-color="rgba(51,51,51,1)"></color-text-size-group>
</el-form-item>
@ -232,6 +251,7 @@
</div>
</template>
<script setup lang="ts">
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
type: Object,

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

@ -14,6 +14,9 @@
<el-radio value="3">样式三</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.tabs_theme == '3'" label="选中图标">
<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">

2
src/components/model-tabs/model-tabs-setting.vue
View File

@ -4,7 +4,7 @@
<model-tabs-content :value="value.content" :tab-style="value.style"></model-tabs-content>
</template>
<template v-if="type == '2'">
<model-tabs-styles :value="value.style" :tabs-style="value.content.tabs_theme"></model-tabs-styles>
<model-tabs-styles :value="value.style" :content="value.content" :tabs-style="value.content.tabs_theme"></model-tabs-styles>
</template>
</div>
</template>

27
src/components/model-tabs/model-tabs-styles.vue
View File

@ -10,6 +10,25 @@
</el-radio-group>
<mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
</el-form-item>
<!-- 装饰图标设置 -->
<template v-if="data.tabs_theme == '3'">
<el-form-item v-if="!isEmpty(data.tabs_adorn_icon)" label="装饰图标">
<slider v-model="form.tabs_adorn_icon_size"></slider>
</el-form-item>
<el-form-item v-else label="装饰图片">
<div class="flex-col gap-10 w">
<el-form-item label="背景" label-width="40">
<el-switch v-model="form.is_tabs_adorn_img_background" active-value="1" inactive-value="0" />
</el-form-item>
<el-form-item label="圆角" label-width="40">
<radius :value="form.tabs_adorn_img_radius"></radius>
</el-form-item>
<el-form-item label="高度" label-width="40">
<slider v-model="form.tabs_adorn_img_height" :max="200"></slider>
</el-form-item>
</div>
</el-form-item>
</template>
<el-form-item label="选中标题">
<color-text-size-group v-model:color="form.tabs_color_checked" v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked" default-color="rgba(51,51,51,1)" />
</el-form-item>
@ -83,6 +102,7 @@
</div>
</template>
<script setup lang="ts">
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
type: Object,
@ -92,6 +112,10 @@ const props = defineProps({
type: Boolean,
default: true,
},
content: {
type: Object,
default: () => {},
},
tabsStyle: {
type: String,
default: '',
@ -100,9 +124,10 @@ const props = defineProps({
const state = reactive({
form: props.value,
data: props.content,
});
// 如果需要解构，确保使用toRefs
const { form } = toRefs(state);
const { form, data } = toRefs(state);
const common_styles_update = (val: Object) => {
form.value.common_style = val;
};

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

@ -30,6 +30,8 @@ interface DefaultArticleTabs {
content: {
content_top: object;
tabs_theme: string;
tabs_adorn_icon: string;
tabs_adorn_img: uploadList[];
tabs_top_up: string;
article_theme: string;
article_carousel_col: string;
@ -47,6 +49,10 @@ interface DefaultArticleTabs {
style: {
tabs_one_theme: string;
tabs_checked: color_list[];
is_tabs_adorn_img_background: string;
tabs_adorn_icon_size: number,
tabs_adorn_img_radius: radiusStyle,
tabs_adorn_img_height: number,
tabs_direction: string;
tabs_weight_checked: string;
tabs_size_checked: number;
@ -133,6 +139,9 @@ const defaultArticleTabs: DefaultArticleTabs = {
...commonTop,
},
tabs_theme: '0',
// 选中装饰图标
tabs_adorn_icon: 'checked-smooth',
tabs_adorn_img: [],
tabs_top_up: '0',
article_theme: '0',
article_carousel_col: '2',
@ -161,6 +170,16 @@ const defaultArticleTabs: DefaultArticleTabs = {
{ color: '#FF2222', color_percentage: undefined },
{ color: '#FF9898', color_percentage: undefined },
],
is_tabs_adorn_img_background: '0',
tabs_adorn_icon_size: 10,
tabs_adorn_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
tabs_adorn_img_height: 10,
tabs_direction: '90deg',
tabs_weight_checked: 'bold',
tabs_size_checked: 14,

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

@ -27,6 +27,8 @@ interface DefaultProductList {
content: {
content_top: object;
tabs_theme: string;
tabs_adorn_icon: string;
tabs_adorn_img: uploadList[];
tabs_top_up: string;
theme: string;
carousel_col: number;
@ -50,6 +52,10 @@ interface DefaultProductList {
style: {
tabs_one_theme: string;
tabs_checked: color_list[];
is_tabs_adorn_img_background: string;
tabs_adorn_icon_size: number,
tabs_adorn_img_radius: radiusStyle,
tabs_adorn_img_height: number,
tabs_direction: string;
tabs_weight_checked: string;
tabs_size_checked: number;
@ -150,6 +156,9 @@ const defaultProductList: DefaultProductList = {
},
// 选项卡风格
tabs_theme: '0',
// 选中装饰图标
tabs_adorn_icon: 'checked-smooth',
tabs_adorn_img: [],
// 是否置顶
tabs_top_up: '0',
// 商品风格
@ -194,6 +203,16 @@ const defaultProductList: DefaultProductList = {
{ color: '#FF2222', color_percentage: undefined },
{ color: '#FF9898', color_percentage: undefined },
],
is_tabs_adorn_img_background: '0',
tabs_adorn_icon_size: 10,
tabs_adorn_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
tabs_adorn_img_height: 10,
tabs_direction: '90deg',
tabs_weight_checked: 'bold',
tabs_size_checked: 14,

2
src/config/const/header-nav.ts
View File

@ -145,7 +145,7 @@ const defaultFooterNav: DefaultFooterNav = {
// 搜索提示信息
tips: '请输入搜索内容',
// 是否显示右侧icon
is_right_icon_show: '1',
is_right_icon_show: '0',
right_icon_link: {},
right_icon_img: [],
right_icon_class: '',

2
src/config/const/search.ts
View File

@ -64,7 +64,7 @@ const defaultSearch: defaultSearch = {
is_tips_show: '1',
tips: '请输入搜索内容',
// 是否显示右侧icon
is_right_icon_show: '1',
is_right_icon_show: '0',
right_icon_link: {},
right_icon_img: [],
right_icon_class: '',

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

@ -18,6 +18,8 @@ interface defaultTabs {
content: {
content_top: object;
tabs_theme: string;
tabs_adorn_icon: string;
tabs_adorn_img: uploadList[];
tabs_top_up: string;
home_data: tabs_page;
tabs_list: tabs_page[];
@ -25,6 +27,10 @@ interface defaultTabs {
style: {
tabs_one_theme: string;
tabs_checked: color_list[];
is_tabs_adorn_img_background: string;
tabs_adorn_icon_size: number,
tabs_adorn_img_radius: radiusStyle,
tabs_adorn_img_height: number,
tabs_direction: string;
tabs_weight_checked: string;
tabs_size_checked: number;
@ -54,6 +60,9 @@ const defaultTabs: defaultTabs = {
...commonTop,
},
tabs_theme: '0',
// 选中装饰图标
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: {} },
tabs_list: [
@ -68,6 +77,16 @@ const defaultTabs: defaultTabs = {
{ color: '#FF2222', color_percentage: undefined },
{ color: '#FF9898', color_percentage: undefined },
],
is_tabs_adorn_img_background: '0',
tabs_adorn_icon_size: 10,
tabs_adorn_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
tabs_adorn_img_height: 10,
tabs_direction: '90deg',
tabs_weight_checked: 'bold',
tabs_size_checked: 14,