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

修改页面处理逻辑

v1.2.0
于肖磊 2024-12-30 13:33:15 +08:00
parent 2e6a7dcc02
commit 37929a80fc
10 changed files with 287 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/model-article-list/index.vue
View File

@ -76,7 +76,7 @@
</div>
</template>
<script setup lang="ts">
import { common_styles_computer, padding_computer, radius_computer, get_math, is_obj_empty, common_img_computer, background_computer, gradient_handle, gradient_computer, margin_computer } from '@/utils';
import { common_styles_computer, padding_computer, radius_computer, get_math, is_obj_empty, common_img_computer, background_computer, gradient_handle, gradient_computer, margin_computer, box_shadow_computer, border_computer } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash';
import ArticleAPI from '@/api/article';
import { Swiper, SwiperSlide } from 'swiper/vue';
@ -337,16 +337,16 @@ watch(
background_img: new_style.article_background_img,
}
style.value = '';
// 渐变效果
const gradient = gradient_handle(new_style.article_color_list, new_style.article_direction);
// 样式处理
const all_style = gradient_handle(new_style.article_color_list, new_style.article_direction) + margin_computer(new_style.margin) + box_shadow_computer(new_style) + border_computer(new_style);
if (article_theme.value == '0') {
article_style.value += content_radius.value + gradient;
article_style.value += content_radius.value + all_style;
article_img_style.value = content_spacing.value + content_padding.value + background_computer(article_data);
} else if (article_theme.value == '1') {
article_style.value += `width: calc(50% - ${new_style.article_spacing / 2}px);` + content_radius.value + gradient;
article_style.value += `width: calc(50% - ${new_style.article_spacing / 2}px);` + content_radius.value + all_style;
article_img_style.value = background_computer(article_data);
} else if (article_theme.value == '2') {
article_style.value += content_radius.value + gradient;
article_style.value += content_radius.value + all_style;
article_img_style.value = background_computer(article_data);
} else if (article_theme.value == '3') {
style.value = `padding: 0 ${new_style.content_spacing}px;background:#fff;` + content_radius.value;
@ -370,7 +370,7 @@ watch(
// 判断是平移还是整屏滚动
slides_per_group.value = new_style.rolling_fashion == 'translation' ? 1 : Number(new_content.carousel_col) + 1;
article_item_height.value = `${new_style.article_height}px`;
article_style.value += content_radius.value + gradient;
article_style.value += content_radius.value + all_style;
article_img_style.value = background_computer(article_data);
}
if (new_style.common_style && props.isCommonStyle) {

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

@ -37,6 +37,9 @@
<el-form-item label="浏览量">
<color-text-size-group v-model:color="form.page_view_color" v-model:typeface="form.page_view_weight" v-model:size="form.page_view_size"></color-text-size-group>
</el-form-item>
<el-form-item v-if="theme != '3'" label="外间距">
<margin :value="form.margin"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.padding"></padding>
</el-form-item>
@ -62,6 +65,10 @@
<el-form-item label="图片圆角">
<radius :value="form.img_radius"></radius>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form"></shadow-config>
</template>
<template v-if="!['3', '4'].includes(theme)">
<el-form-item v-if="['0'].includes(theme)" label="图片宽度">

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

@ -15,7 +15,7 @@
</div>
</template>
<script setup lang="ts">
import { background_computer, common_img_computer, common_styles_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
import { background_computer, border_computer, box_shadow_computer, common_img_computer, common_styles_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
import { cloneDeep } from 'lodash';
/**
* @description: 文章选项卡列表 （渲染）
@ -51,7 +51,7 @@ watch(
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) + radius_computer(new_style.tabs_radius);
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);
// 文章区域背景设置
const article_content_data = {
@ -60,7 +60,7 @@ watch(
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) + radius_computer(new_style.article_content_radius);
article_container.value = gradient_computer(article_content_data) + margin_computer(new_style.article_content_margin) + radius_computer(new_style.article_content_radius) + border_computer(new_style.article_content) + box_shadow_computer(new_style.article_content);
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;

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

@ -49,9 +49,16 @@
<el-form-item label="圆角">
<radius :value="form.tabs_radius"></radius>
</el-form-item>
<el-form-item label="外边距">
<margin :value="form.tabs_margin"></margin>
</el-form-item>
<el-form-item label="内边距">
<padding :value="form.tabs_padding"></padding>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.tabs_content.border_is_show" v-model:color="form.tabs_content.border_color" v-model:style="form.tabs_content.border_style" v-model:size="form.tabs_content.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form.tabs_content"></shadow-config>
</card-container>
<div class="divider-line"></div>
<card-container>
@ -71,6 +78,10 @@
<el-form-item label="数据间距">
<slider v-model="form.article_content_spacing" :max="100"></slider>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.article_content.border_is_show" v-model:color="form.article_content.border_color" v-model:style="form.article_content.border_style" v-model:size="form.article_content.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form.article_content"></shadow-config>
</card-container>
<div class="divider-line"></div>
<card-container>
@ -109,6 +120,9 @@
<el-form-item label="浏览量">
<color-text-size-group v-model:color="form.page_view_color" v-model:typeface="form.page_view_weight" v-model:size="form.page_view_size"></color-text-size-group>
</el-form-item>
<template v-if="theme != '3'">
<margin :value="form.margin"></margin>
</template>
<el-form-item label="内间距">
<padding :value="form.padding"></padding>
</el-form-item>
@ -134,6 +148,10 @@
<el-form-item label="图片圆角">
<radius :value="form.img_radius"></radius>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form"></shadow-config>
</template>
<template v-if="!['3', '4'].includes(theme)">
<el-form-item v-if="['0'].includes(theme)" label="图片宽度">

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

@ -15,7 +15,7 @@
</div>
</template>
<script setup lang="ts">
import { background_computer, common_img_computer, common_styles_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
import { background_computer, border_computer, box_shadow_computer, common_img_computer, common_styles_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
import { cloneDeep } from 'lodash';
const props = defineProps({
@ -51,7 +51,7 @@ watch(
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) + radius_computer(new_style.tabs_radius);
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);
// 商品区域背景设置
const shop_content_data = {
@ -60,7 +60,7 @@ watch(
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) + radius_computer(new_style.shop_content_radius);
shop_container.value = gradient_computer(shop_content_data) + margin_computer(new_style.shop_content_margin) + radius_computer(new_style.shop_content_radius) + border_computer(new_style.shop_content) + box_shadow_computer(new_style.shop_content);
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;

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

@ -59,9 +59,16 @@
<el-form-item label="圆角">
<radius :value="form.tabs_radius"></radius>
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.tabs_margin"></margin>
</el-form-item>
<el-form-item label="内边距">
<padding :value="form.tabs_padding"></padding>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.tabs_content.border_is_show" v-model:color="form.tabs_content.border_color" v-model:style="form.tabs_content.border_style" v-model:size="form.tabs_content.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form.tabs_content"></shadow-config>
</card-container>
<div class="divider-line"></div>
<card-container>
@ -81,6 +88,10 @@
<el-form-item label="数据间距">
<slider v-model="form.shop_content_spacing" :max="100"></slider>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.shop_content.border_is_show" v-model:color="form.shop_content.border_color" v-model:style="form.shop_content.border_style" v-model:size="form.shop_content.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form.shop_content"></shadow-config>
</card-container>
<div class="divider-line"></div>
<card-container>
@ -126,6 +137,9 @@
</el-form-item>
</template>
<template v-if="theme != '6'">
<el-form-item label="外间距">
<margin :value="form.shop_margin"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.shop_padding"></padding>
</el-form-item>
@ -140,6 +154,10 @@
<radius :value="form.shop_radius"></radius>
</el-form-item>
<template v-if="theme != '6'">
<!-- 边框处理 -->
<border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form"></shadow-config>
<template v-if="theme == '5'">
<el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider>

35
src/config/const/article-list.ts
View File

@ -56,7 +56,18 @@ interface DefaultArticleList {
page_view_color: string;
content_radius: radiusStyle;
img_radius: radiusStyle;
margin: marginStyle;
padding: paddingStyle;
border_is_show: string;
border_color: string;
border_style: string;
border_size: paddingStyle;
// 阴影
box_shadow_color: string;
box_shadow_x: number;
box_shadow_y: number;
box_shadow_blur: number;
box_shadow_spread: number;
article_spacing: number;
content_spacing: number;
article_height: number;
@ -149,6 +160,13 @@ const defaultArticleList: DefaultArticleList = {
radius_bottom_left: 4,
radius_bottom_right: 4,
},
margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
// 内间距
padding: {
padding: 10,
@ -157,6 +175,23 @@ const defaultArticleList: DefaultArticleList = {
padding_left: 10,
padding_right: 10,
},
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
content_spacing: 10, // 内容间距
article_spacing: 10, // 文章间距
article_height: 155, // 文章高度

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

@ -66,7 +66,9 @@ interface DefaultArticleTabs {
tabs_bg_background_img: string[],
tabs_sign_spacing: number;
tabs_radius: radiusStyle;
tabs_margin: marginStyle;
tabs_padding: paddingStyle;
tabs_content: object;
article_content_direction: string;
article_content_color_list: color_list[];
article_content_background_img_style: string;
@ -75,6 +77,7 @@ interface DefaultArticleTabs {
article_content_margin: marginStyle;
article_content_padding: paddingStyle;
article_content_spacing: number;
article_content: object;
article_direction: string,
article_color_list: color_list[],
article_background_img_style: string,
@ -98,7 +101,18 @@ interface DefaultArticleTabs {
page_view_color: string;
content_radius: radiusStyle;
img_radius: radiusStyle;
margin: marginStyle;
padding: paddingStyle;
border_is_show: string;
border_color: string;
border_style: string;
border_size: paddingStyle;
// 阴影
box_shadow_color: string;
box_shadow_x: number;
box_shadow_y: number;
box_shadow_blur: number;
box_shadow_spread: number;
article_spacing: number;
content_spacing: number;
article_height: number;
@ -177,6 +191,13 @@ const defaultArticleTabs: DefaultArticleTabs = {
radius_bottom_left: 0,
radius_bottom_right: 0,
},
tabs_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
tabs_padding: {
padding: 10,
padding_top: 10,
@ -184,6 +205,25 @@ const defaultArticleTabs: DefaultArticleTabs = {
padding_left: 10,
padding_right: 10,
},
tabs_content: {
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
},
// 文章内容设置
article_content_direction: '90deg',
article_content_color_list: [{ color: '', color_percentage: undefined }],
@ -210,6 +250,25 @@ const defaultArticleTabs: DefaultArticleTabs = {
padding_left: 10,
padding_right: 10,
},
article_content: {
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
},
article_content_spacing: 0,
// 文章背景设置
article_direction: '90deg',
@ -267,6 +326,13 @@ const defaultArticleTabs: DefaultArticleTabs = {
radius_bottom_left: 4,
radius_bottom_right: 4,
},
margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
// 内间距
padding: {
padding: 10,
@ -275,6 +341,23 @@ const defaultArticleTabs: DefaultArticleTabs = {
padding_left: 10,
padding_right: 10,
},
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
content_spacing: 10, // 内容间距
article_spacing: 10, // 文章间距
article_height: 155, // 文章高度

38
src/config/const/goods-list.ts
View File

@ -34,30 +34,30 @@ interface DefaultProductList {
subscript_text: string;
};
style: {
shop_direction: string,
shop_color_list: color_list[],
shop_background_img_style: string,
shop_background_img: uploadList[],
shop_direction: string;
shop_color_list: color_list[];
shop_background_img_style: string;
shop_background_img: uploadList[];
shop_padding: paddingStyle;
shop_margin: marginStyle,
border_is_show: string,
border_color: string,
border_style: string,
border_size: paddingStyle,
shop_margin: marginStyle;
border_is_show: string;
border_color: string;
border_style: string;
border_size: paddingStyle;
// 阴影
box_shadow_color: string,
box_shadow_x: number,
box_shadow_y: number,
box_shadow_blur: number,
box_shadow_spread: number,
box_shadow_color: string;
box_shadow_x: number;
box_shadow_y: number;
box_shadow_blur: number;
box_shadow_spread: number;
shop_img_radius: radiusStyle;
shop_radius: radiusStyle;
content_outer_spacing: number;
content_outer_height: number;
content_img_width: number | undefined;
content_img_height: number | undefined;
is_roll: string,
interval_time: number,
is_roll: string;
interval_time: number;
rolling_fashion: string;
content_spacing: number;
shop_title_typeface: string;
@ -66,7 +66,7 @@ interface DefaultProductList {
shop_simple_desc_typeface: string;
shop_simple_desc_size: number;
shop_simple_desc_color: string;
title_simple_desc_spacing: number,
title_simple_desc_spacing: number;
shop_price_typeface: string;
shop_price_size: number;
shop_price_color: string;
@ -85,10 +85,10 @@ interface DefaultProductList {
shop_button_typeface:string;
shop_button_size: number;
shop_button_color: color_list[];
shop_button_text_color: string,
shop_button_text_color: string;
shop_icon_size: number;
shop_icon_color: string;
subscript_style: object,
subscript_style: object;
common_style: object;
};
}

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

@ -56,22 +56,24 @@ interface DefaultProductList {
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_icon_size_checked: number;
tabs_icon_color: string;
tabs_icon_size: number;
is_tabs_img_background: string;
tabs_top_img_radius: radiusStyle;
tabs_top_img_height: number;
tabs_img_radius: radiusStyle,
tabs_img_height: number,
tabs_img_radius: radiusStyle;
tabs_img_height: number;
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_bg_direction: string;
tabs_bg_color_list: color_list[];
tabs_bg_background_img_style: string;
tabs_bg_background_img: string[];
tabs_radius: radiusStyle;
tabs_margin: marginStyle;
tabs_padding: paddingStyle;
tabs_content: object;
shop_content_direction: string;
shop_content_color_list: color_list[];
shop_content_background_img_style: string;
@ -80,10 +82,22 @@ interface DefaultProductList {
shop_content_margin: marginStyle;
shop_content_padding: paddingStyle;
shop_content_spacing: number;
shop_content: object;
shop_direction: string;
shop_color_list: color_list[];
shop_background_img_style: string;
shop_background_img: uploadList[];
border_is_show: string;
border_color: string;
border_style: string;
border_size: paddingStyle;
// 阴影
box_shadow_color: string;
box_shadow_x: number;
box_shadow_y: number;
box_shadow_blur: number;
box_shadow_spread: number;
shop_margin: marginStyle;
shop_padding: paddingStyle;
shop_img_radius: radiusStyle;
shop_radius: radiusStyle;
@ -123,7 +137,7 @@ interface DefaultProductList {
shop_button_text_color: string;
shop_icon_size: number;
shop_icon_color: string;
subscript_style: object,
subscript_style: object;
common_style: object;
};
}
@ -218,6 +232,13 @@ const defaultProductList: DefaultProductList = {
radius_bottom_left: 0,
radius_bottom_right: 0,
},
tabs_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
tabs_padding: {
padding: 10,
padding_top: 10,
@ -225,6 +246,25 @@ const defaultProductList: DefaultProductList = {
padding_left: 10,
padding_right: 10,
},
tabs_content: {
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
},
// 商品内容设置
shop_content_direction: '90deg',
shop_content_color_list: [{ color: '', color_percentage: undefined }],
@ -252,11 +292,54 @@ const defaultProductList: DefaultProductList = {
padding_right: 10,
},
shop_content_spacing: 0,
shop_content: {
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
},
// 商品背景设置
shop_direction: '90deg',
shop_color_list: [{ color: '#fff', color_percentage: undefined }],
shop_background_img_style: '0',
shop_background_img: [],
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
shop_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
// 商品圆角
shop_padding: {
padding: 10,