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

修改选项卡在不同组件中的效果

v1.1.0
于肖磊 2024-12-04 11:59:16 +08:00
parent 2d4464fa7d
commit 1352204668
25 changed files with 429 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/base/bg-btn-style/index.vue
View File

@ -1,6 +1,6 @@
<template>
<el-radio-group v-model="modelValue" is-button>
<el-tooltip v-for="item in radio_list" :key="item.value" :content="item.name" placement="top" effect="light">
<el-tooltip v-for="item in radio_list" :key="item.value" :content="item.name" placement="top" effect="dark">
<el-radio-button :value="item.value"><icon :name="item.icon"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>

2
src/components/base/margin/index.vue
View File

@ -2,7 +2,7 @@
<div class="flex-col w">
<div class="flex-row gap-10 align-c">
<slider v-model="form.margin" :max="200" type="retract" @update:model-value="margin_event"></slider>
<el-tooltip effect="light" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
<el-tooltip effect="dark" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
<div class="flex-1 type-icon flex" @click="icon_event(icon_data.name)">
<icon :name="icon_data.name" size="24"></icon>
</div>

2
src/components/base/padding/index.vue
View File

@ -2,7 +2,7 @@
<div class="flex-col w">
<div class="flex-row gap-10 align-c">
<slider v-model="form.padding" :max="200" type="retract" @update:model-value="padding_event"></slider>
<el-tooltip effect="light" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
<el-tooltip effect="dark" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
<div class="flex-1 type-icon flex" @click="icon_event(icon_data.name)">
<icon :name="icon_data.name" size="24"></icon>
</div>

2
src/components/base/radius/index.vue
View File

@ -3,7 +3,7 @@
<div class="flex-col w">
<div class="flex-row gap-10 align-c">
<slider v-model="form.radius" type="retract" @update:model-value="radius_event"></slider>
<el-tooltip effect="light" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
<el-tooltip effect="dark" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
<div class="flex-1 type-icon flex" @click="icon_event(icon_data.name)">
<icon :name="icon_data.name" size="24"></icon>
</div>

6
src/components/common/carousel-indicator/index.vue
View File

@ -21,13 +21,13 @@
</el-form-item>
<el-form-item label="样式">
<el-radio-group v-model="form.indicator_style" is-button>
<el-tooltip content="点" placement="top" effect="light">
<el-tooltip content="点" placement="top" effect="dark">
<el-radio-button value="dot"><icon name="iconfont icon-ellipsis"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="线" placement="top" effect="light">
<el-tooltip content="线" placement="top" effect="dark">
<el-radio-button value="elliptic"><icon name="iconfont icon-elliptic"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="数字" placement="top" effect="light">
<el-tooltip content="数字" placement="top" effect="dark">
<el-radio-button value="num">1/5</el-radio-button>
</el-tooltip>
</el-radio-group>

6
src/components/common/custom-module/model-icon/model-icon-style.vue
View File

@ -37,13 +37,13 @@
</el-form-item>
<el-form-item label="图标位置">
<el-radio-group v-model="form.icon_location" is-button>
<el-tooltip content="左对齐" placement="top" effect="light">
<el-tooltip content="左对齐" placement="top" effect="dark">
<el-radio-button value="left"><icon name="iconfont icon-left"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="居中" placement="top" effect="light">
<el-tooltip content="居中" placement="top" effect="dark">
<el-radio-button value="center"><icon name="iconfont icon-center"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="右对齐" placement="top" effect="light">
<el-tooltip content="右对齐" placement="top" effect="dark">
<el-radio-button value="right"><icon name="iconfont icon-right"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>

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

@ -60,13 +60,13 @@
</el-form-item>
<el-form-item label="文字位置">
<el-radio-group v-model="form.text_location" is-button>
<el-tooltip content="左对齐" placement="top" effect="light">
<el-tooltip content="左对齐" placement="top" effect="dark">
<el-radio-button value="left"><icon name="iconfont icon-left"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="居中" placement="top" effect="light">
<el-tooltip content="居中" placement="top" effect="dark">
<el-radio-button value="center"><icon name="iconfont icon-center"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="右对齐" placement="top" effect="light">
<el-tooltip content="右对齐" placement="top" effect="dark">
<el-radio-button value="right"><icon name="iconfont icon-right"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>

26
src/components/model-article-list/model-article-list-styles.vue
View File

@ -16,18 +16,20 @@
</el-form-item>
<el-form-item label="文章名称">
<color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size" :label-width="data.theme == '4' && data.name_float == '1' ? 60 : 40">
<el-form-item label="背景" label-width="60" class="mb-0 w form-item-child-label">
<mult-color-picker :value="form.name_bg_color_list" :type="form.name_bg_direction" :is-show-alpha="true" @update:value="name_bg_mult_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="外边距" label-width="60" class="mb-0 w form-item-child-label">
<margin :value="form.name_bg_margin"></margin>
</el-form-item>
<el-form-item label="内间距" label-width="60" class="mb-0 w form-item-child-label">
<padding :value="form.name_bg_padding"></padding>
</el-form-item>
<el-form-item label="圆角" label-width="60" class="mb-0 w form-item-child-label">
<radius :value="form.name_bg_radius"></radius>
</el-form-item>
<template v-if="data.theme == '4' && data.name_float == '1'">
<el-form-item label="背景" label-width="60" class="mb-0 w form-item-child-label">
<mult-color-picker :value="form.name_bg_color_list" :type="form.name_bg_direction" :is-show-alpha="true" @update:value="name_bg_mult_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="外边距" label-width="60" class="mb-0 w form-item-child-label">
<margin :value="form.name_bg_margin"></margin>
</el-form-item>
<el-form-item label="内间距" label-width="60" class="mb-0 w form-item-child-label">
<padding :value="form.name_bg_padding"></padding>
</el-form-item>
<el-form-item label="圆角" label-width="60" class="mb-0 w form-item-child-label">
<radius :value="form.name_bg_radius"></radius>
</el-form-item>
</template>
</color-text-size-group>
</el-form-item>
<el-form-item label="文章描述">

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

@ -1,17 +1,21 @@
<template>
<div :style="style_container">
<div :style="style_img_container">
<div :style="tabs_padding_style">
<tabs-view ref="tabs" :value="article_tabs" :active-index="tabs_active_index"></tabs-view>
<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>
</div>
</div>
<div class="pt-10">
<model-article-list :value="article_tabs" :is-common-style="false"></model-article-list>
<div class="oh" :style="article_container">
<div class="oh" :style="article_img_container">
<model-article-list :value="article_tabs" :is-common-style="false"></model-article-list>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { common_img_computer, common_styles_computer, padding_computer } from '@/utils';
import { background_computer, common_img_computer, common_styles_computer, gradient_computer, margin_computer, padding_computer } from '@/utils';
import { cloneDeep } from 'lodash';
/**
* @description: 文章选项卡列表 （渲染）
@ -27,7 +31,12 @@ const style_container = ref('');
const style_img_container = ref('');
const article_tabs = ref({});
const tabs_active_index = ref(0);
const tabs_padding_style = ref('');
// 选项卡独立样式
const tabs_container = ref('');
const tabs_img_container = ref('');
// 区域内边距
const article_container = ref('');
const article_img_container = ref('');
watch(
() => props.value,
(val) => {
@ -35,8 +44,25 @@ watch(
const new_style = newVal?.style;
let new_data = newVal;
tabs_active_index.value = new_data.content.tabs_active_index;
// 选项卡内边距
tabs_padding_style.value = padding_computer(new_style?.tabs_padding);
// 选项卡背景设置
const tabs_data = {
color_list: new_style.tabs_bg_color_list,
direction: new_style.tabs_bg_direction,
background_img_style: new_style.tabs_bg_background_img_style,
background_img: new_style.tabs_bg_background_img,
}
tabs_container.value = gradient_computer(tabs_data);
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
// 文章区域背景设置
const article_content_data = {
color_list: new_style.article_content_color_list,
direction: new_style.article_content_direction,
background_img_style: new_style.article_content_background_img_style,
background_img: new_style.article_content_background_img,
}
article_container.value = gradient_computer(article_content_data) + margin_computer(new_style.article_content_margin);
article_img_container.value = background_computer(article_content_data) + padding_computer(new_style.article_content_padding);
//文章内容设置
new_data.content.theme = new_data.content.article_theme;
new_data.content.data_type = new_data.content.tabs_list[tabs_active_index.value].data_type;
new_data.content.keyword = new_data.content.tabs_list[tabs_active_index.value].keyword;

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

@ -22,6 +22,17 @@
<el-form-item label="左右间距">
<slider v-model="form.tabs_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="选项卡背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.tabs_bg_color_list" :type="form.tabs_bg_direction" @update:value="tabs_bg_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.tabs_bg_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.tabs_bg_background_img" :limit="1" @update:model-value="tabs_bg_background_img_change"></upload>
</div>
</el-form-item>
<el-form-item label="内边距">
<padding :value="form.tabs_padding"></padding>
</el-form-item>
@ -29,6 +40,27 @@
<div class="divider-line"></div>
<card-container>
<div class="mb-12">内容样式</div>
<el-form-item label="内容背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.article_content_color_list" :type="form.article_content_direction" @update:value="article_content_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.article_content_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.article_content_background_img" :limit="1" @update:model-value="article_content_background_img_change"></upload>
</div>
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.article_content_margin"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.article_content_padding"></padding>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">文章样式</div>
<el-form-item v-if="theme != '3'" label="文章背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
@ -41,19 +73,21 @@
</div>
</el-form-item>
<el-form-item label="文章名称">
<color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size" :label-width="data.theme == '4' && data.name_float == '1' ? 60 : 40">
<el-form-item label="背景" label-width="60" class="mb-0 w form-item-child-label">
<mult-color-picker :value="form.name_bg_color_list" :type="form.name_bg_direction" :is-show-alpha="true" @update:value="name_bg_mult_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="外边距" label-width="60" class="mb-0 w form-item-child-label">
<margin :value="form.name_bg_margin"></margin>
</el-form-item>
<el-form-item label="内间距" label-width="60" class="mb-0 w form-item-child-label">
<padding :value="form.name_bg_padding"></padding>
</el-form-item>
<el-form-item label="圆角" label-width="60" class="mb-0 w form-item-child-label">
<radius :value="form.name_bg_radius"></radius>
</el-form-item>
<color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size" :label-width="data.article_theme == '4' && data.name_float == '1' ? 60 : 40">
<template v-if="data.article_theme == '4' && data.name_float == '1'">
<el-form-item label="背景" label-width="60" class="mb-0 w form-item-child-label">
<mult-color-picker :value="form.name_bg_color_list" :type="form.name_bg_direction" :is-show-alpha="true" @update:value="name_bg_mult_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="外边距" label-width="60" class="mb-0 w form-item-child-label">
<margin :value="form.name_bg_margin"></margin>
</el-form-item>
<el-form-item label="内间距" label-width="60" class="mb-0 w form-item-child-label">
<padding :value="form.name_bg_padding"></padding>
</el-form-item>
<el-form-item label="圆角" label-width="60" class="mb-0 w form-item-child-label">
<radius :value="form.name_bg_radius"></radius>
</el-form-item>
</template>
</color-text-size-group>
</el-form-item>
<el-form-item label="文章描述">
@ -196,6 +230,25 @@ const tabs_checked_event = (arry: string[], type: number) => {
form.value.tabs_checked = arry;
form.value.tabs_direction = type.toString();
};
// 选项卡背景渐变设置
const tabs_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.tabs_bg_color_list = arry;
form.value.tabs_bg_direction = type.toString();
};
// 选项卡背景图片设置
const tabs_bg_background_img_change = (arry: uploadList[]) => {
form.value.tabs_bg_background_img = arry;
};
// 内容区域背景渐变设置
const article_content_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.article_content_color_list = arry;
form.value.article_content_direction = type.toString();
};
// 内容区域背景图片设置
const article_content_background_img_change = (arry: uploadList[]) => {
form.value.article_content_background_img = arry;
};
// 文章背景渐变设置
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.article_color_list = arry;

39
src/components/model-carousel/model-carousel-styles.vue
View File

@ -1,6 +1,28 @@
<template>
<div class="common-style-height">
<el-form :model="form" label-width="70">
<template v-if="!isCommon">
<card-container>
<div class="mb-12">内容设置</div>
<el-form-item label="内容背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.carousel_content_color_list" :type="form.carousel_content_direction" @update:value="carousel_content_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.carousel_content_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.carousel_content_background_img" :limit="1" @update:model-value="carousel_content_background_img_change"></upload>
</div>
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.carousel_content_margin"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.carousel_content_padding"></padding>
</el-form-item>
</card-container>
</template>
<card-container>
<div class="mb-12">图片设置</div>
<el-form-item label="圆角">
@ -45,13 +67,13 @@
</el-form-item>
<el-form-item label="位置">
<el-radio-group v-model="form.video_location" is-button>
<el-tooltip content="左对齐" placement="top" effect="light">
<el-tooltip content="左对齐" placement="top" effect="dark">
<el-radio-button value="flex-start"><icon name="iconfont icon-left"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="居中" placement="top" effect="light">
<el-tooltip content="居中" placement="top" effect="dark">
<el-radio-button value="center"><icon name="iconfont icon-center"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="右对齐" placement="top" effect="light">
<el-tooltip content="右对齐" placement="top" effect="dark">
<el-radio-button value="flex-end"><icon name="iconfont icon-right"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>
@ -113,10 +135,21 @@ const radius_change = (radius: any) => {
form.value = Object.assign(form.value, pick(radius, ['radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right']));
};
// 内容区域背景渐变设置
const carousel_content_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.carousel_content_color_list = arry;
form.value.carousel_content_direction = type.toString();
};
// 内容区域背景图片设置
const carousel_content_background_img_change = (arry: uploadList[]) => {
form.value.carousel_content_background_img = arry;
};
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.video_color_list = arry;
form.value.video_direction = type.toString();
};
// 通用样式处理
const common_styles_update = (val: Object) => {
form.value.common_style = val;

2
src/components/model-custom/components/custom-dialog/index.vue
View File

@ -6,7 +6,7 @@
</div>
</template>
<div class="flex-col gap-20 w h pa-20 oh">
<filter-form :filter-data="config.filter_form_config" direction="horizontal" :data-interface="default_data" @form-change="filter_form_change"></filter-form>
<filter-form v-if="dialogVisible" :filter-data="config.filter_form_config" direction="horizontal" :data-interface="default_data" @form-change="filter_form_change"></filter-form>
<table-config v-loading="loading" :table-data="tableData" :multiple="multiple" :table-column-list="config.header" @select="table_select"></table-config>
<div class="flex-row jc-e">
<el-pagination :current-page="pagination_data.page" background :page-size="pagination_data.page_size" :pager-count="5" layout="prev, pager, next" :total="pagination_data.data_total" @current-change="get_list" />

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

@ -336,9 +336,11 @@ const add = () => {
// 拖拽更新之后，更新数据
const data_list_sort = (new_list: any) => {
form.value.data_source_content.data_list = new_list;
data_list_index_update();
};
const data_list_remove = (index: number) => {
form.value.data_source_content.data_list.splice(index, 1);
data_list_index_update();
};
// 弹出框选择的内容
const url_value_dialog_call_back = (item: any[]) => {
@ -360,6 +362,14 @@ const url_value_dialog_call_back = (item: any[]) => {
data: item[0],
};
}
data_list_index_update();
};
const data_list_index_update = () => {
if (form.value.data_source_content.data_list.length > 0) {
form.value.data_source_content.data_list.forEach((item: any, index: number) => {
item.data.data_index = index + 1;
});
}
};
// 数据来源的内容
let data_source_content_list = computed(() => {

6
src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
View File

@ -101,13 +101,13 @@
<template v-if="tabs_content.goods_flex == 'col_price_float'">
<el-form-item label="对齐方式" label-width="60" class="mb-0 w form-item-child-label">
<el-radio-group v-model="form.goods_price_location" is-button>
<el-tooltip content="左对齐" placement="top" effect="light">
<el-tooltip content="左对齐" placement="top" effect="dark">
<el-radio-button value="left"><icon name="iconfont icon-left"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="居中" placement="top" effect="light">
<el-tooltip content="居中" placement="top" effect="dark">
<el-radio-button value="center"><icon name="iconfont icon-center"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="右对齐" placement="top" effect="light">
<el-tooltip content="右对齐" placement="top" effect="dark">
<el-radio-button value="right"><icon name="iconfont icon-right"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>

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

@ -1,17 +1,21 @@
<template>
<div :style="style_container">
<div :style="style_img_container">
<div :style="tabs_padding_style">
<tabs-view ref="tabs" :value="props.value" :active-index="tabs_active_index"></tabs-view>
<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>
</div>
</div>
<div class="pt-10">
<model-goods-list :value="tabs_list" :is-common-style="false"></model-goods-list>
<div class="oh" :style="shop_container">
<div class="oh" :style="shop_img_container">
<model-goods-list :value="tabs_list" :is-common-style="false"></model-goods-list>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { common_img_computer, common_styles_computer, padding_computer } from '@/utils';
import { background_computer, common_img_computer, common_styles_computer, gradient_computer, margin_computer, padding_computer } from '@/utils';
import { cloneDeep } from 'lodash';
const props = defineProps({
@ -27,7 +31,12 @@ const style_container = ref('');
const style_img_container = ref('');
const tabs_list = ref({});
const tabs_active_index = ref(0);
const tabs_padding_style = ref('');
// 选项卡内容样式设置
const tabs_container = ref('');
const tabs_img_container = ref('');
// 商品区域样式设置
const shop_container = ref('');
const shop_img_container = ref('');
watch(
() => props.value,
(val) => {
@ -35,7 +44,24 @@ watch(
const new_style = new_val?.style;
let new_data = new_val;
tabs_active_index.value = new_data.content.tabs_active_index;
tabs_padding_style.value = padding_computer(new_style?.tabs_padding);
// 选项卡背景设置
const tabs_data = {
color_list: new_style.tabs_bg_color_list,
direction: new_style.tabs_bg_direction,
background_img_style: new_style.tabs_bg_background_img_style,
background_img: new_style.tabs_bg_background_img,
}
tabs_container.value = gradient_computer(tabs_data);
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
// 商品区域背景设置
const shop_content_data = {
color_list: new_style.shop_content_color_list,
direction: new_style.shop_content_direction,
background_img_style: new_style.shop_content_background_img_style,
background_img: new_style.shop_content_background_img,
}
shop_container.value = gradient_computer(shop_content_data) + margin_computer(new_style.shop_content_margin);
shop_img_container.value = background_computer(shop_content_data) + padding_computer(new_style.shop_content_padding);
// 产品的值
new_data.content.data_type = new_data.content.tabs_list[tabs_active_index.value].data_type;
new_data.content.keyword = new_data.content.tabs_list[tabs_active_index.value].keyword;

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

@ -22,6 +22,17 @@
<el-form-item label="左右间距">
<slider v-model="form.tabs_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="选项卡背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.tabs_bg_color_list" :type="form.tabs_bg_direction" @update:value="tabs_bg_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.tabs_bg_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.tabs_bg_background_img" :limit="1" @update:model-value="tabs_bg_background_img_change"></upload>
</div>
</el-form-item>
<el-form-item label="内边距">
<padding :value="form.tabs_padding"></padding>
</el-form-item>
@ -29,6 +40,27 @@
<div class="divider-line"></div>
<card-container>
<div class="mb-12">内容样式</div>
<el-form-item label="内容背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.shop_content_color_list" :type="form.shop_content_direction" @update:value="shop_content_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.shop_content_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.shop_content_background_img" :limit="1" @update:model-value="shop_content_background_img_change"></upload>
</div>
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.shop_content_margin"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.shop_content_padding"></padding>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">商品样式</div>
<el-form-item v-if="theme != '6'" label="商品背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
@ -219,6 +251,25 @@ if (['0', '4'].includes(theme.value)) {
const common_style_update = (value: any) => {
form.value.common_style = value;
};
// 选项卡背景渐变设置
const tabs_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.tabs_bg_color_list = arry;
form.value.tabs_bg_direction = type.toString();
};
// 选项卡背景图片设置
const tabs_bg_background_img_change = (arry: uploadList[]) => {
form.value.tabs_bg_background_img = arry;
};
// 内容区域背景渐变设置
const shop_content_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.shop_content_color_list = arry;
form.value.shop_content_direction = type.toString();
};
// 内容区域背景图片设置
const shop_content_background_img_change = (arry: uploadList[]) => {
form.value.shop_content_background_img = arry;
};
// 商品背景渐变设置
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.shop_color_list = arry;

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

@ -1,17 +1,21 @@
<template>
<div :style="style_container">
<div class="flex-col oh" :style="style_img_container">
<div :style="tabs_padding_style">
<tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :active-index="tabs_active_index"></tabs-view>
<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>
</div>
</div>
<div class="pt-10">
<model-carousel :value="value" :is-common="false"></model-carousel>
<div class="oh" :style="carousel_container">
<div class="oh" :style="carousel_img_container">
<model-carousel :value="value" :is-common="false"></model-carousel>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { common_styles_computer, common_img_computer, padding_computer } from '@/utils';
import { common_styles_computer, common_img_computer, padding_computer, gradient_computer, background_computer, margin_computer } from '@/utils';
import { cloneDeep } from 'lodash';
const props = defineProps({
value: {
@ -24,15 +28,37 @@ const props = defineProps({
const tabs_list = ref(props.value);
const tabs_active_index = ref(0);
const tabs_padding_style = ref('');
// 选项卡内容样式
const tabs_container = ref('');
const tabs_img_container = ref('');
// 轮播区域背景设置
const carousel_container = ref('');
const carousel_img_container = ref('');
watch(
props.value,
(val) => {
let new_data = cloneDeep(val);
const { home_data } = new_data.content;
// 选项卡内边距
tabs_padding_style.value = padding_computer(val.style?.tabs_padding);
const new_style = new_data?.style;
// 选项卡背景设置
const tabs_data = {
color_list: new_style.tabs_bg_color_list,
direction: new_style.tabs_bg_direction,
background_img_style: new_style.tabs_bg_background_img_style,
background_img: new_style.tabs_bg_background_img,
}
tabs_container.value = gradient_computer(tabs_data);
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
// 轮播区域背景设置
const carousel_content_data = {
color_list: new_style.carousel_content_color_list,
direction: new_style.carousel_content_direction,
background_img_style: new_style.carousel_content_background_img_style,
background_img: new_style.carousel_content_background_img,
}
carousel_container.value = gradient_computer(carousel_content_data) + margin_computer(new_style.carousel_content_margin);
carousel_img_container.value = background_computer(carousel_content_data) + padding_computer(new_style.carousel_content_padding);
// 处理数据
new_data.content.tabs_list = [home_data, ...new_data.content.tabs_list];
tabs_list.value = new_data;
},

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

@ -12,7 +12,7 @@
</el-form-item>
<el-form-item label="滑动置顶">
<el-switch v-model="form.tabs_top_up" class="mr-10" active-value="1" inactive-value="0"></el-switch>
<el-tooltip effect="light" :show-after="200" :hide-after="200" content="滑动置顶仅手机端有效" raw-content placement="top">
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="滑动置顶仅手机端有效" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</el-form-item>

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

@ -23,6 +23,17 @@
<slider v-model="form.tabs_spacing" :max="100"></slider>
</el-form-item>
<template v-if="!isCommon">
<el-form-item label="选项卡背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.tabs_bg_color_list" :type="form.tabs_bg_direction" @update:value="tabs_bg_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.tabs_bg_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.tabs_bg_background_img" :limit="1" @update:model-value="tabs_bg_background_img_change"></upload>
</div>
</el-form-item>
<el-form-item label="内边距">
<padding :value="form.tabs_padding"></padding>
</el-form-item>
@ -81,5 +92,14 @@ const tabs_checked_event = (arry: string[], type: number) => {
form.value.tabs_checked = arry;
form.value.tabs_direction = type.toString();
};
// 选项卡背景渐变设置
const tabs_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.tabs_bg_color_list = arry;
form.value.tabs_bg_direction = type.toString();
};
// 选项卡背景图片设置
const tabs_bg_background_img_change = (arry: uploadList[]) => {
form.value.tabs_bg_background_img = arry;
};
</script>
<style lang="scss" scoped></style>

6
src/components/page-settings/page-content.vue
View File

@ -23,17 +23,17 @@
</el-form-item>
<el-form-item label="展示位置">
<el-radio-group v-model="form.indicator_location" is-button>
<el-tooltip content="左对齐" placement="top" effect="light">
<el-tooltip content="左对齐" placement="top" effect="dark">
<el-radio-button value="flex-start">
<icon name="iconfont icon-left"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="居中" placement="top" effect="light">
<el-tooltip content="居中" placement="top" effect="dark">
<el-radio-button value="center">
<icon name="iconfont icon-center"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="右对齐" placement="top" effect="light">
<el-tooltip content="右对齐" placement="top" effect="dark">
<el-radio-button value="flex-end">
<icon name="iconfont icon-right"></icon>
</el-radio-button>

6
src/components/page-settings/page-styles.vue
View File

@ -31,7 +31,7 @@
<el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.immersive_style" active-value="1" inactive-value="0" :disabled="is_have_tabs" @change="change_immersive_style"></el-switch>
<el-tooltip effect="light" :show-after="200" :hide-after="200" content="<span>开启沉浸样式时，不可添加选项卡和选项卡轮播。<br/>并且商品选项卡和文章选项卡的选项卡置顶功能禁用</span>" raw-content placement="top">
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>开启沉浸样式时，不可添加选项卡和选项卡轮播。<br/>并且商品选项卡和文章选项卡的选项卡置顶功能禁用</span>" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</div>
@ -39,7 +39,7 @@
<el-form-item v-if="form.header_background_type == 'transparent' && form.immersive_style === '1'" label="安全距离">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.general_safe_distance_value" active-value="1" inactive-value="0"></el-switch>
<el-tooltip effect="light" :show-after="200" :hide-after="200" content="开启后第一个组件上内边距将增加顶部安全距离+导航高度" placement="top">
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="开启后第一个组件上内边距将增加顶部安全距离+导航高度" placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</div>
@ -64,7 +64,7 @@
</template>
<el-form-item label="返回颜色">
<color-picker v-model="form.left_back_btn_color" class="mr-10" default-color="#333"></color-picker>
<el-tooltip effect="light" :show-after="200" :hide-after="200" content="打开新页面才会出现返回按钮" raw-content placement="top">
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="打开新页面才会出现返回按钮" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</el-form-item>

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

@ -49,8 +49,18 @@ interface DefaultArticleTabs {
tabs_size: number;
tabs_color: string;
tabs_spacing: number;
tabs_bg_direction: string,
tabs_bg_color_list: color_list[],
tabs_bg_background_img_style: string,
tabs_bg_background_img: string[],
tabs_sign_spacing: number;
tabs_padding: paddingStyle;
article_content_direction: string;
article_content_color_list: color_list[];
article_content_background_img_style: string;
article_content_background_img: string[];
article_content_margin: marginStyle;
article_content_padding: paddingStyle;
article_direction: string,
article_color_list: color_list[],
article_background_img_style: string,
@ -126,6 +136,11 @@ const defaultArticleTabs: DefaultArticleTabs = {
tabs_color: 'rgba(51,51,51,1)',
tabs_spacing: 20,
tabs_sign_spacing: 4,
// 选项卡背景设置
tabs_bg_direction: '90deg',
tabs_bg_color_list: [{ color: '', color_percentage: undefined }],
tabs_bg_background_img_style: '2',
tabs_bg_background_img: [],
tabs_padding: {
padding: 0,
padding_top: 0,
@ -133,6 +148,25 @@ const defaultArticleTabs: DefaultArticleTabs = {
padding_left: 0,
padding_right: 0,
},
// 文章内容设置
article_content_direction: '90deg',
article_content_color_list: [{ color: '', color_percentage: undefined }],
article_content_background_img_style: '2',
article_content_background_img: [],
article_content_margin: {
margin: 0,
margin_top: 10,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
article_content_padding: {
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 0,
padding_right: 0,
},
// 文章背景设置
article_direction: '90deg',
article_color_list: [{ color: '#fff', color_percentage: undefined }],

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

@ -53,11 +53,21 @@ interface DefaultProductList {
tabs_color: string;
tabs_spacing: number;
tabs_sign_spacing: number;
tabs_bg_direction: string,
tabs_bg_color_list: color_list[],
tabs_bg_background_img_style: string,
tabs_bg_background_img: string[],
tabs_padding: paddingStyle;
shop_direction: string,
shop_color_list: color_list[],
shop_background_img_style: string,
shop_background_img: uploadList[],
shop_content_direction: string;
shop_content_color_list: color_list[];
shop_content_background_img_style: string;
shop_content_background_img: string[];
shop_content_margin: marginStyle;
shop_content_padding: paddingStyle;
shop_direction: string;
shop_color_list: color_list[];
shop_background_img_style: string;
shop_background_img: uploadList[];
shop_padding: paddingStyle;
shop_img_radius: radiusStyle;
shop_radius: radiusStyle;
@ -157,6 +167,11 @@ const defaultProductList: DefaultProductList = {
// tabs间距
tabs_spacing: 20,
tabs_sign_spacing: 4,
// 选项卡背景设置
tabs_bg_direction: '90deg',
tabs_bg_color_list: [{ color: '', color_percentage: undefined }],
tabs_bg_background_img_style: '2',
tabs_bg_background_img: [],
tabs_padding: {
padding: 0,
padding_top: 0,
@ -164,6 +179,25 @@ const defaultProductList: DefaultProductList = {
padding_left: 0,
padding_right: 0,
},
// 商品内容设置
shop_content_direction: '90deg',
shop_content_color_list: [{ color: '', color_percentage: undefined }],
shop_content_background_img_style: '2',
shop_content_background_img: [],
shop_content_margin: {
margin: 0,
margin_top: 10,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
shop_content_padding: {
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 0,
padding_right: 0,
},
// 商品背景设置
shop_direction: '90deg',
shop_color_list: [{ color: '#fff', color_percentage: undefined }],

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

@ -41,7 +41,17 @@ interface defaultTabs {
tabs_color: string;
tabs_spacing: number;
tabs_sign_spacing: number;
tabs_bg_direction: string,
tabs_bg_color_list: color_list[],
tabs_bg_background_img_style: string,
tabs_bg_background_img: string[],
tabs_padding: paddingStyle;
carousel_content_direction: string;
carousel_content_color_list: color_list[];
carousel_content_background_img_style: string;
carousel_content_background_img: string[];
carousel_content_margin: marginStyle;
carousel_content_padding: paddingStyle;
more_icon_class: string;
more_icon_color: string;
more_icon_size: number;
@ -137,6 +147,11 @@ const defaultTabs: defaultTabs = {
tabs_color: 'rgba(51,51,51,1)',
tabs_spacing: 20,
tabs_sign_spacing: 4,
// 选项卡背景设置
tabs_bg_direction: '90deg',
tabs_bg_color_list: [{ color: '', color_percentage: undefined }],
tabs_bg_background_img_style: '2',
tabs_bg_background_img: [],
tabs_padding: {
padding: 0,
padding_top: 0,
@ -144,6 +159,25 @@ const defaultTabs: defaultTabs = {
padding_left: 0,
padding_right: 0,
},
// 轮播内间距设置
carousel_content_direction: '90deg',
carousel_content_color_list: [{ color: '', color_percentage: undefined }],
carousel_content_background_img_style: '2',
carousel_content_background_img: [],
carousel_content_margin: {
margin: 0,
margin_top: 10,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
carousel_content_padding: {
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 0,
padding_right: 0,
},
// 更多设置
more_icon_class: 'category-more',
more_icon_color: '#000',

1
src/utils/request.ts
View File

@ -91,7 +91,6 @@ service.interceptors.response.use(
}
},
(error: any) => {
console.log(error);
if (error.response && error.response.data) {
const { msg, message } = error.response.data;
message_error(msg || message || '系统出错');