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

修改选项卡内容显示

v1.1.0
于肖磊 2024-12-11 18:50:30 +08:00
parent 86d61b06c9
commit bce7b5966f
15 changed files with 290 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/custom-module/model-text/index.vue
View File

@ -93,7 +93,7 @@ const text_title = computed(() => {
});
text_title += (sourceList?.first || '') + (text == '' && !props.isDisplayPanel ? sourceList?.name || '请在此输入文字' : text ) + (sourceList?.last || '');
} else {
text_title += (sourceList?.first || '') + (data_handling(source_id) == '' && !props.isDisplayPanel ? sourceList?.name || '请在此输入文字' : data_handling(source_id) ) + (sourceList?.last || '');
text_title += (sourceList?.first || '') + (data_handling(source_id) === '' && !props.isDisplayPanel ? sourceList?.name || '请在此输入文字' : data_handling(source_id) ) + (sourceList?.last || '');
}
});
}
@ -105,8 +105,8 @@ const text_title = computed(() => {
}
}
// 确定最终返回的文本，优先使用表单值中的文本标题，如果为空则使用之前获取的标题或默认文本
let text = formValue.text_title || text_title || '';
if (text == '' && !props.isDisplayPanel) {
let text = formValue.text_title || text_title;
if (text === '' && !props.isDisplayPanel) {
text = '请在此输入文字';
}
return text;

42
src/components/common/data-filter/index.vue
View File

@ -5,13 +5,11 @@
<el-radio v-for="item in baseList.product_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.data_type === '0'">
<div class="nav-list">
<drag-group :list="drag_list" img-params="images" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
<el-button class="mt-20 w" @click="add">+添加</el-button>
</div>
</template>
<template v-else>
<div v-show="form.data_type === '0'" class="nav-list">
<drag-group :list="drag_list" img-params="images" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
<el-button class="mt-20 w" @click="add">+添加</el-button>
</div>
<div v-show="form.data_type === '1'" class="w h">
<el-form-item label="关键字">
<el-input v-model="keyword" placeholder="请输入商品关键字" clearable @blur="keyword_blur"></el-input>
</el-form-item>
@ -38,7 +36,7 @@
<el-radio v-for="item in common_store.common.data_order_by_rule_list" :key="item.index" :value="item.index">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
</template>
</div>
</template>
<template v-else-if="type === 'article'">
<el-form-item label="读取方式">
@ -46,13 +44,11 @@
<el-radio v-for="item in baseList.data_type_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.data_type === '0'">
<div class="nav-list">
<drag-group :list="drag_list" img-params="cover" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
<el-button class="mtb-20 w" @click="add">+添加</el-button>
</div>
</template>
<template v-else>
<div v-show="form.data_type === '0'" class="nav-list">
<drag-group :list="drag_list" img-params="cover" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
<el-button class="mtb-20 w" @click="add">+添加</el-button>
</div>
<div v-show="form.data_type === '1'" class="w h">
<el-form-item label="关键字">
<el-input v-model="keyword" placeholder="请输入文章关键字" clearable @blur="keyword_blur"></el-input>
</el-form-item>
@ -77,7 +73,7 @@
<el-form-item label="封面图片">
<el-switch v-model="form.is_cover" active-value="1" inactive-value="0" />
</el-form-item>
</template>
</div>
</template>
<template v-else>
<el-form-item label="读取方式">
@ -85,13 +81,11 @@
<el-radio v-for="item in baseList.brand_data_type_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.data_type === '0'">
<div class="nav-list">
<drag-group :list="drag_list" img-params="logo" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
<el-button class="mt-20 w" @click="add">+添加</el-button>
</div>
</template>
<template v-else>
<div v-show="form.data_type === '0'" class="nav-list">
<drag-group :list="drag_list" img-params="logo" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
<el-button class="mt-20 w" @click="add">+添加</el-button>
</div>
<div v-show="form.data_type === '1'" class="w h">
<el-form-item label="关键字">
<el-input v-model="keyword" placeholder="请输入品牌关键字" clearable @blur="keyword_blur"></el-input>
</el-form-item>
@ -113,7 +107,7 @@
<el-radio v-for="item in common_store.common.data_order_by_rule_list" :key="item.index" :value="item.index">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
</template>
</div>
</template>
</template>

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

@ -9,7 +9,17 @@
<template v-else>
<image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
</template>
<div class="title" :style="title_style(index) + (index == activeIndex ? '' : padding_bottom)">{{ item.title }}</div>
<template v-if="item.tabs_type == '1'">
<template v-if="!isEmpty(item.tabs_icon)">
<el-icon :class="`iconfont ${ 'icon-' + item.tabs_icon}`" class="title" :style="icon_style(index) + (index == activeIndex ? '' : padding_bottom)" />
</template>
<template v-else>
<image-empty v-model="item.tabs_img[0]" fit="contain" class="title" :style="img_style() + (index == activeIndex ? '' : padding_bottom)" error-img-style="width: 2rem;height: 2rem;" />
</template>
</template>
<template v-else>
<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>
<div class="bottom_line" :class="tabs_bottom_line_theme" :style="tabs_check"></div>
@ -21,7 +31,7 @@
</template>
<script lang="ts" setup>
import { gradient_computer } from '@/utils';
import { gradient_computer, radius_computer } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
@ -98,6 +108,29 @@ const title_style = (index: number) => {
}
return style;
};
const icon_style = (index: number) => {
// 默认是未选中的状态
let style = `font-size: ${new_style.value.tabs_icon_size}px;line-height: ${new_style.value.tabs_icon_size}px;color:${new_style.value.tabs_icon_color};`;
// 选中的状态
if (index == props.activeIndex) {
let checked_style = `font-size: ${new_style.value.tabs_icon_size_checked}px;line-height: ${new_style.value.tabs_icon_size_checked}px;color:${new_style.value.tabs_icon_color_checked};`;
if (['2', '4'].includes(tabs_theme_index.value)) {
checked_style += tabs_check.value;
}
style = checked_style;
}
return style;
};
const img_style = () => {
let style = `height: ${new_style.value.tabs_img_height}px;` + radius_computer(new_style.value.tabs_img_radius);
if (new_style.value.is_tabs_img_background == '1' && ['2', '4'].includes(tabs_theme_index.value)) {
style += tabs_check.value;
}
return style;
};
const padding_bottom = computed(() => {
let bottom = 0;
if (form.value.tabs_theme == '0') {

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

@ -34,8 +34,19 @@
<drag :data="form.tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
<template #default="{ row, index }">
<div class="flex-col w">
<el-form-item label="显示标题">
<el-input v-model="row.title" placeholder="请输入标题文字" clearable />
<el-form-item label="数据类型" class="w mb-10">
<div class="flex-col gap-10 w h">
<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="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="row.title" placeholder="请输入标题文字" clearable />
</template>
</div>
</el-form-item>
<template v-if="form.tabs_active_index == index">
<el-form-item v-if="form.tabs_theme == '1'" label="简介配置">

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

@ -16,6 +16,27 @@
<el-form-item label="未选文字">
<color-text-size-group v-model:color="form.tabs_color" v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size" default-color="rgba(51,51,51,1)"></color-text-size-group>
</el-form-item>
<el-form-item label="选中图标">
<color-text-size-group v-model:color="form.tabs_icon_color_checked" v-model:size="form.tabs_icon_size_checked" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']" />
</el-form-item>
<el-form-item label="未选图标">
<color-text-size-group v-model:color="form.tabs_icon_color" v-model:size="form.tabs_icon_size" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']" />
</el-form-item>
<el-form-item label="图片设置">
<div class="flex-col gap-10 w">
<template v-if="['2', '4'].includes(data.tabs_theme)">
<el-form-item label="背景" label-width="40">
<el-switch v-model="form.is_tabs_img_background" active-value="1" inactive-value="0" />
</el-form-item>
</template>
<el-form-item label="圆角" label-width="40">
<radius :value="form.tabs_img_radius"></radius>
</el-form-item>
<el-form-item label="高度" label-width="40">
<slider v-model="form.tabs_img_height" :max="200"></slider>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="上下间距">
<slider v-model="form.tabs_sign_spacing" :max="50"></slider>
</el-form-item>

6
src/components/model-custom/model-custom-content.vue
View File

@ -46,7 +46,7 @@
</div>
</template>
<template v-else>
<filter-form :filter-data="default_type_data?.filter_config?.filter_form_config || {}" direction="vertical" :title-width="70" :data-interface="form.data_source_content" @form-change="filter_form_change"></filter-form>
<filter-form :filter-data="default_type_data?.filter_config?.filter_form_config || {}" direction="vertical" :title-width="58" :data-interface="form.data_source_content" @form-change="filter_form_change"></filter-form>
</template>
</div>
</card-container>
@ -332,10 +332,10 @@ const changeDataSource = (key: string) => {
form.value.data_source_direction = 'vertical';
// 如果存在默认数据类型的时候，就直接赋值给data_list
if (type_data.length > 0 && !isEmpty(type_data[0].appoint_data)) {
emits('data_source_change', type_data[0].name)
emits('data_source_change', type_data[0].name);
form.value.data_source_content.data_list = [ type_data[0].appoint_data ];
} else if (type_data.length > 0 && !isEmpty(type_data[0].custom_config)) {
emits('data_source_change', type_data[0].name)
emits('data_source_change', type_data[0].name);
// 是自定义数据类型
form.value.is_custom_data = '1';
// 自定义数据取值

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

@ -37,8 +37,19 @@
<drag :data="form.tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
<template #default="{ row, index }">
<div class="flex-col w">
<el-form-item label="显示标题">
<el-input v-model="row.title" placeholder="请输入标题文字" clearable />
<el-form-item label="数据类型" class="w mb-10">
<div class="flex-col gap-10 w h">
<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="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="row.title" placeholder="请输入标题文字" clearable />
</template>
</div>
</el-form-item>
<template v-if="form.tabs_active_index == index">
<el-form-item v-if="form.tabs_theme == '4'" label="上传图片">

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

@ -16,6 +16,27 @@
<el-form-item label="未选文字">
<color-text-size-group v-model:color="form.tabs_color" v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size" default-color="rgba(51,51,51,1)"></color-text-size-group>
</el-form-item>
<el-form-item label="选中图标">
<color-text-size-group v-model:color="form.tabs_icon_color_checked" v-model:size="form.tabs_icon_size_checked" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']" />
</el-form-item>
<el-form-item label="未选图标">
<color-text-size-group v-model:color="form.tabs_icon_color" v-model:size="form.tabs_icon_size" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']" />
</el-form-item>
<el-form-item label="图片设置">
<div class="flex-col gap-10 w">
<template v-if="['2', '4'].includes(data.tabs_theme)">
<el-form-item label="背景" label-width="40">
<el-switch v-model="form.is_tabs_img_background" active-value="1" inactive-value="0" />
</el-form-item>
</template>
<el-form-item label="圆角" label-width="40">
<radius :value="form.tabs_img_radius"></radius>
</el-form-item>
<el-form-item label="高度" label-width="40">
<slider v-model="form.tabs_img_height" :max="200"></slider>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="上下间距">
<slider v-model="form.tabs_sign_spacing" :max="50"></slider>
</el-form-item>

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

@ -23,17 +23,39 @@
<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">
<el-input v-model="form.home_data.title" placeholder="请输入标题文字" clearable />
<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>
<drag :data="form.tabs_list" type="card" :space-col="25" @remove="remove" @on-sort="on_sort">
<template #default="scoped">
<div class="flex-col align-c jc-s gap-20 flex-1 w">
<el-form-item label="显示标题" class="w mb-0">
<el-input v-model="scoped.row.title" placeholder="请输入标题文字" clearable />
</el-form-item>
<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 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>
<template v-else>
<el-input v-model="scoped.row.title" placeholder="请输入标题文字" clearable />
</template>
</div>
</el-form-item>
<el-form-item label="链接类型" class="w mb-0">
<el-radio-group v-model="scoped.row.data_type">
<el-radio value="0">DIY页面</el-radio>
<el-radio value="1">商品分类</el-radio>

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

@ -11,10 +11,31 @@
<mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
</el-form-item>
<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>
<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>
<el-form-item label="未选标题">
<color-text-size-group v-model:color="form.tabs_color" v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size" default-color="rgba(51,51,51,1)"></color-text-size-group>
<color-text-size-group v-model:color="form.tabs_color" v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size" default-color="rgba(51,51,51,1)" />
</el-form-item>
<el-form-item label="选中图标">
<color-text-size-group v-model:color="form.tabs_icon_color_checked" v-model:size="form.tabs_icon_size_checked" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']" />
</el-form-item>
<el-form-item label="未选图标">
<color-text-size-group v-model:color="form.tabs_icon_color" v-model:size="form.tabs_icon_size" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']" />
</el-form-item>
<el-form-item label="图片设置">
<div class="flex-col gap-10 w">
<template v-if="['2', '4'].includes(tabsStyle)">
<el-form-item label="背景" label-width="40">
<el-switch v-model="form.is_tabs_img_background" active-value="1" inactive-value="0" />
</el-form-item>
</template>
<el-form-item label="圆角" label-width="40">
<radius :value="form.tabs_img_radius"></radius>
</el-form-item>
<el-form-item label="高度" label-width="40">
<slider v-model="form.tabs_img_height" :max="200"></slider>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="上下间距">
<slider v-model="form.tabs_sign_spacing" :max="50"></slider>

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

@ -9,6 +9,9 @@ interface ArticleList {
}
interface articleTabsList {
id: string;
tabs_type: string;
tabs_img: uploadList[];
tabs_icon: string;
title: string;
desc: string;
data_type: string;
@ -48,6 +51,13 @@ interface DefaultArticleTabs {
tabs_weight: string;
tabs_size: number;
tabs_color: string;
tabs_icon_color_checked: string;
tabs_icon_size_checked: number,
tabs_icon_color: string,
tabs_icon_size: number,
is_tabs_img_background: string,
tabs_img_radius: radiusStyle,
tabs_img_height: number,
tabs_spacing: number;
tabs_bg_direction: string,
tabs_bg_color_list: color_list[],
@ -107,12 +117,12 @@ const defaultArticleTabs: DefaultArticleTabs = {
article_theme: '0',
article_carousel_col: '2',
tabs_list: [
{ id: '1', title: '热门推荐', desc: '简介', data_type: '0', keyword: '', 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', title: '测试一', desc: '简介', data_type: '0', keyword: '', 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', title: '测试二', desc: '简介', data_type: '0', keyword: '', 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', title: '测试三', desc: '简介', data_type: '0', keyword: '', 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', title: '测试四', desc: '简介', data_type: '0', keyword: '', 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', title: '测试五', desc: '简介', data_type: '0', keyword: '', 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: '', title: '热门推荐', desc: '简介', data_type: '0', keyword: '', 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', keyword: '', 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', keyword: '', 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', keyword: '', 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', keyword: '', 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', keyword: '', 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'],
@ -137,6 +147,20 @@ const defaultArticleTabs: DefaultArticleTabs = {
tabs_weight: '500',
tabs_size: 14,
tabs_color: 'rgba(51,51,51,1)',
// 选项卡图标和图片设置
tabs_icon_color_checked: 'rgba(51,51,51,1)',
tabs_icon_size_checked: 14,
tabs_icon_color: 'rgba(51,51,51,1)',
tabs_icon_size: 14,
is_tabs_img_background: '0',
tabs_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
tabs_img_height: 20,
tabs_spacing: 20,
tabs_sign_spacing: 4,
// 选项卡背景设置

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

@ -5,6 +5,9 @@ import { online_url } from '@/utils';
const new_url = await online_url('/static/app/common/').then((res) => res);
interface articleTabsList {
id: string;
tabs_type: string;
tabs_img: uploadList[];
tabs_icon: string;
title: string;
img: uploadList[];
desc: string;
@ -51,6 +54,13 @@ interface DefaultProductList {
tabs_weight: string;
tabs_size: number;
tabs_color: string;
tabs_icon_color_checked: string;
tabs_icon_size_checked: number,
tabs_icon_color: string,
tabs_icon_size: number,
is_tabs_img_background: string,
tabs_img_radius: radiusStyle,
tabs_img_height: number,
tabs_spacing: number;
tabs_sign_spacing: number;
tabs_bg_direction: string,
@ -126,10 +136,10 @@ const defaultProductList: DefaultProductList = {
carousel_col: 3,
// 选项卡数据
tabs_list: [
{ id: '1', title: '热门推荐', img: [], desc: '简介', data_type: '0', keyword: '', 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', title: '测试一', img: [], desc: '简介', data_type: '0', keyword: '', 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', title: '测试二', img: [], desc: '简介', data_type: '0', keyword: '', 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', title: '测试三', img: [], desc: '简介', data_type: '0', keyword: '', 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: '', title: '热门推荐', img: [], desc: '简介', data_type: '0', keyword: '', 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', keyword: '', 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', keyword: '', 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', keyword: '', 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,
@ -167,6 +177,19 @@ const defaultProductList: DefaultProductList = {
tabs_weight: '500',
tabs_size: 14,
tabs_color: 'rgba(51,51,51,1)',
tabs_icon_color_checked: 'rgba(51,51,51,1)',
tabs_icon_size_checked: 14,
tabs_icon_color: 'rgba(51,51,51,1)',
tabs_icon_size: 14,
is_tabs_img_background: '0',
tabs_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
tabs_img_height: 20,
// tabs间距
tabs_spacing: 20,
tabs_sign_spacing: 4,

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

@ -2,6 +2,9 @@ import { get_math } from '@/utils';
import defaultCommon from './index';
interface tabs_page {
id: string;
tabs_type: string;
tabs_img: uploadList[];
tabs_icon: string;
title: string;
desc: string;
data_type: string;
@ -39,6 +42,13 @@ interface defaultTabs {
tabs_weight: string;
tabs_size: number;
tabs_color: string;
tabs_icon_color_checked: string;
tabs_icon_size_checked: number,
tabs_icon_color: string,
tabs_icon_size: number,
is_tabs_img_background: string,
tabs_img_radius: radiusStyle,
tabs_img_height: number,
tabs_spacing: number;
tabs_sign_spacing: number;
tabs_bg_direction: string,
@ -96,11 +106,11 @@ const defaultTabs: defaultTabs = {
// 是否置顶
tabs_top_up: '1',
// 选项卡数据
home_data: { id: get_math(), 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: '', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
tabs_list: [
{ id: get_math(), title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), 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: '', title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
],
// 轮播类型
carousel_type: 'inherit',
@ -147,6 +157,19 @@ const defaultTabs: defaultTabs = {
tabs_weight: '500',
tabs_size: 14,
tabs_color: 'rgba(51,51,51,1)',
tabs_icon_color_checked: 'rgba(51,51,51,1)',
tabs_icon_size_checked: 14,
tabs_icon_color: 'rgba(51,51,51,1)',
tabs_icon_size: 14,
is_tabs_img_background: '0',
tabs_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
tabs_img_height: 20,
tabs_spacing: 20,
tabs_sign_spacing: 4,
// 选项卡背景设置

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

@ -2,6 +2,9 @@ import { get_math } from '@/utils';
import defaultCommon from './index';
interface tabs_page {
id: string;
tabs_type: string;
tabs_img: uploadList[];
tabs_icon: string;
title: string;
desc: string;
data_type: string;
@ -27,6 +30,13 @@ interface defaultTabs {
tabs_weight: string;
tabs_size: number;
tabs_color: string;
tabs_icon_color_checked: string;
tabs_icon_size_checked: number,
tabs_icon_color: string,
tabs_icon_size: number,
is_tabs_img_background: string,
tabs_img_radius: radiusStyle,
tabs_img_height: number,
tabs_spacing: number;
tabs_sign_spacing: number;
tabs_padding: paddingStyle;
@ -40,11 +50,11 @@ const defaultTabs: defaultTabs = {
content: {
tabs_theme: '0',
tabs_top_up: '1',
home_data: { id: get_math(), 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: '', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
tabs_list: [
{ id: get_math(), title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), 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: '', title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
],
},
style: {
@ -60,6 +70,19 @@ const defaultTabs: defaultTabs = {
tabs_weight: '500',
tabs_size: 14,
tabs_color: 'rgba(51,51,51,1)',
tabs_icon_color_checked: 'rgba(51,51,51,1)',
tabs_icon_size_checked: 14,
tabs_icon_color: 'rgba(51,51,51,1)',
tabs_icon_size: 14,
is_tabs_img_background: '0',
tabs_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
tabs_img_height: 20,
tabs_spacing: 20,
tabs_sign_spacing: 4,
tabs_padding: {

2
src/utils/index.ts
View File

@ -43,7 +43,7 @@ export function get_nested_property(obj: any, path: string): string {
// 使用reduce方法遍历属性键数组，逐层访问对象属性
// 如果当前对象存在且拥有下一个属性键，则继续访问；否则返回空字符串
return keys.reduce((o, key) => (o && o[key] ? o[key] : ''), obj) || '';
return keys.reduce((o, key) => (o != undefined && o[key] != undefined ? o[key] : ''), obj) ?? '';
}
/**