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

修改数据魔方显示效果

v1.1.0^2
于肖磊 2024-12-24 15:19:42 +08:00
parent cb95eff636
commit 110f8a2c8f
6 changed files with 202 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/model-custom/index.vue
View File

@ -1,48 +1,51 @@
<template>
<div :style="style_container">
<div class="w h re" :style="style_img_container">
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
<div class="flex-row flex-wrap" :style="`row-gap: ${ new_style.row_gap }px;column-gap: ${ new_style.column_gap }px;`">
<div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="`width: ${ gap_width }`">
<div :style="style_chunk_container">
<div class="w h oh" :style="style_chunk_img_container">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="form.height" :scale="scale" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"></data-rendering>
<div :style="style_img_container">
<div :style="style_content_container">
<div class="w h re" :style="style_content_img_container">
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
<div class="flex-row flex-wrap" :style="`row-gap: ${ new_style.row_gap }px;column-gap: ${ new_style.column_gap }px;`">
<div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="`width: ${ gap_width }`">
<div :style="style_chunk_container">
<div class="w h oh" :style="style_chunk_img_container">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="form.height" :scale="scale" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"></data-rendering>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<div v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh" :style="form.data_source_direction == 'horizontal' ? `height:100%;` : `height: ${ swiper_height }px;`">
<swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == 'horizontal' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="slides_per_group" :space-between="space_between" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
<div :style="style_chunk_container">
<div class="w h oh" :style="style_chunk_img_container">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="form.height" :scale="scale" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"></data-rendering>
</div>
</div>
</swiper-slide>
</swiper>
<div v-if="new_style.is_show == '1' && dot_list.length > 1" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
<template v-if="new_style.indicator_style == 'num'">
<div :style="indicator_style" class="dot-item">
<span class="num-active">{{ actived_index + 1 }}</span><span>/{{ dot_list.length }}</span>
</div>
</template>
<div v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh" :style="form.data_source_direction == 'horizontal' ? `height:100%;` : `height: ${ swiper_height }px;`">
<swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == 'horizontal' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="slides_per_group" :space-between="space_between" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
<div :style="style_chunk_container">
<div class="w h oh" :style="style_chunk_img_container">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="form.height" :scale="scale" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"></data-rendering>
</div>
</div>
</swiper-slide>
</swiper>
<div v-if="new_style.is_show == '1' && dot_list.length > 1" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
<template v-if="new_style.indicator_style == 'num'">
<div :style="indicator_style" class="dot-item">
<span class="num-active">{{ actived_index + 1 }}</span><span>/{{ dot_list.length }}</span>
</div>
</template>
<template v-else>
<div v-for="(item, index) in dot_list" :key="index" :style="indicator_style" :class="{ 'dot-item': true, active: actived_index == index }" />
</template>
</div>
</div>
<template v-else>
<div v-for="(item, index) in dot_list" :key="index" :style="indicator_style" :class="{ 'dot-item': true, active: actived_index == index }" />
<div :style="style_chunk_container">
<div class="w h oh" :style="style_chunk_img_container">
<data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="scale"></data-rendering>
</div>
</div>
</template>
</div>
</div>
<template v-else>
<div :style="style_chunk_container">
<div class="w h oh" :style="style_chunk_img_container">
<data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="scale"></data-rendering>
</div>
</div>
</template>
</div>
</div>
</template>
<script setup lang="ts">
import { isEmpty, cloneDeep } from 'lodash';
@ -92,11 +95,15 @@ const gap_width = computed(() => {
const scale = ref(1);
// 计算整体宽度和比例
watchEffect(() => {
const { common_style, data_style } = new_style.value;
const { common_style, data_style, data_content_style } = new_style.value;
// 外层左右间距
const outer_spacing = common_style.margin_left + common_style.margin_right + common_style.padding_left + common_style.padding_right;
// 内容左右间距
const content_spacing = data_content_style.margin_left + data_content_style.margin_right + data_content_style.padding_left + data_content_style.padding_right;
// 数据左右间距
const internal_spacing = data_style.margin_left + data_style.margin_right + data_style.padding_left + data_style.padding_right;
// 根据容器宽度来计算内部大小
const width = 390 - outer_spacing - internal_spacing - props.outerContainerPadding;
const width = 390 - outer_spacing - internal_spacing - content_spacing - props.outerContainerPadding;
// 获得对应宽度的比例
scale.value = width / 390;
});
@ -104,7 +111,10 @@ watchEffect(() => {
// 公共样式
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
// 内容样式
const style_content_container = computed(() => common_styles_computer(new_style.value.data_content_style));
const style_content_img_container = computed(() => common_img_computer(new_style.value.data_content_style));
// 数据样式
const style_chunk_container = computed(() => common_styles_computer(new_style.value.data_style));
const style_chunk_img_container = computed(() => common_img_computer(new_style.value.data_style));

23
src/components/model-custom/model-custom-styles.vue
View File

@ -50,6 +50,22 @@
</div>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">内容样式</div>
<el-form-item label="背景">
<background-common v-model:color_list="form.data_content_style.color_list" v-model:direction="form.data_content_style.direction" v-model:img_style="form.data_content_style.background_img_style" v-model:img="form.data_content_style.background_img" @mult_color_picker_event="mult_content_color_picker_event" />
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.data_content_style"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.data_content_style"></padding>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.data_content_style"></radius>
</el-form-item>
</card-container>
</el-form>
<div class="bg-f5 divider-line" />
<common-styles :value="form.common_style" />
@ -72,7 +88,12 @@ const state = reactive({
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
// 内容样式
const mult_content_color_picker_event = (arry: color_list[], type: number) => {
form.value.data_content_style.color_list = arry;
form.value.data_content_style.direction = type.toString();
}
// 数据样式
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.data_style.color_list = arry;
form.value.data_style.direction = type.toString();

90
src/components/model-data-magic/components/custom/index.vue
View File

@ -1,36 +1,40 @@
<template>
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
<div class="flex-row flex-wrap" :style="`row-gap: ${ new_style.row_gap }px;column-gap: ${ new_style.column_gap }px;`">
<div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="`width: ${ gap_width }`">
<div :style="style_container">
<div class="w h oh" :style="style_img_container">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :data-height="form.height" :scale="scale"></data-rendering>
<div :style="style_content_container">
<div :style="style_content_img_container">
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
<div class="flex-row flex-wrap" :style="`row-gap: ${ new_style.row_gap }px;column-gap: ${ new_style.column_gap }px;`">
<div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="`width: ${ gap_width }`">
<div :style="style_container">
<div class="w h oh" :style="style_img_container">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :data-height="form.height" :scale="scale"></data-rendering>
</div>
</div>
</div>
</div>
</template>
<div v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh" :style="form.data_source_direction == 'horizontal' ? `height:100%;` : `height: ${ swiper_height }px;`">
<swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == 'horizontal' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="slides_per_group" :space-between="space_between" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
<div :style="style_container">
<div class="w h oh" :style="style_img_container">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :data-height="form.height" :scale="scale"></data-rendering>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</template>
<div v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh" :style="form.data_source_direction == 'horizontal' ? `height:100%;` : `height: ${ swiper_height }px;`">
<swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == 'horizontal' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="slides_per_group" :space-between="space_between" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
<div :style="style_container">
<template v-else>
<div class="oh" :style="style_container">
<div class="w h oh" :style="style_img_container">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :data-height="form.height" :scale="scale"></data-rendering>
<data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="scale"></data-rendering>
</div>
</div>
</swiper-slide>
</swiper>
</template>
</div>
</div>
<template v-else>
<div class="oh" :style="style_container">
<div class="w h oh" :style="style_img_container">
<data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="scale"></data-rendering>
</div>
</div>
</template>
</template>
<script setup lang="ts">
import { background_computer, get_math, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
import { background_computer, common_img_computer, common_styles_computer, get_math, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
import { isEmpty } from "lodash";
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
@ -86,6 +90,46 @@ interface new_style {
data_background_img: uploadList[];
data_background_img_style: string;
}
console.log(new_style.value.data_content_style);
const defalt_style: any = {
color_list: [{ color: '', color_percentage: undefined }],
direction: '180deg',
background_img_style: '2',
background_img: [],
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 0,
padding_right: 0,
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
};
// 内容样式
const style_content_container = computed(() => {
if (!isEmpty(new_style.value.data_content_style)) {
return common_styles_computer(new_style.value.data_content_style);
} else {
// 没有样式的时候，使用默认样式
return common_styles_computer(defalt_style);
}
});
const style_content_img_container = computed(() => {
if (!isEmpty(new_style.value.data_content_style)) {
return common_img_computer(new_style.value.data_content_style);
} else {
return common_img_computer(defalt_style);
}
});
// 用于样式显示
const style_container = computed(() => {
if (!isEmpty(new_style.value)) {

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

@ -94,6 +94,24 @@
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<template v-if="tabs_content.data_type == 'custom'">
<card-container>
<div class="mb-12">内容样式</div>
<el-form-item label="背景">
<background-common :key="form.carouselKey" v-model:color_list="form.data_content_style.color_list" v-model:direction="form.data_content_style.direction" v-model:img_style="form.data_content_style.background_img_style" v-model:img="form.data_content_style.background_img" @mult_color_picker_event="data_content_mult_color_picker_event" />
</el-form-item>
<el-form-item v-if="tabs_content.data_type == 'custom'" label="外间距">
<margin :key="form.carouselKey" :value="form.data_content_style"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :key="form.carouselKey" :value="form.data_content_style"></padding>
</el-form-item>
<el-form-item label="圆角">
<radius :key="form.carouselKey" :value="form.data_content_style"></radius>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
</template>
</template>
<template v-if="tabs_content.data_type === 'goods'">
<card-container>
@ -200,6 +218,11 @@ const img_radius_change = (radius: radiusStyle) => {
'radius_bottom_right',
]));
}
// 内容底板颜色
const data_content_mult_color_picker_event = (arry: string[], type: number) => {
form.value.data_content_style.color_list = arry;
form.value.data_content_style.direction = type.toString();
}
// 数据底板颜色
const data_mult_color_picker_event = (arry: string[], type: number) => {
form.value.data_color_list = arry;

21
src/components/model-data-magic/model-data-magic-content.vue
View File

@ -186,6 +186,27 @@ const data_style = {
radius_bottom_left: 4,
radius_bottom_right: 4,
},
data_content_style: {
color_list: [{ color: '', color_percentage: undefined }],
direction: '180deg',
background_img_style: '2',
background_img: [],
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 0,
padding_right: 0,
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
column_gap: 0,
row_gap: 0,
indicator_style: 'dot',

22
src/config/const/custom.ts
View File

@ -99,6 +99,7 @@ interface defaultSearch {
indicator_size: number;
indicator_radius: radiusStyle;
data_style: object;
data_content_style: object;
row_gap: number;
column_gap: number;
// 通用样式
@ -176,6 +177,27 @@ const defaultSearch: defaultSearch = {
margin_left: 0,
margin_right: 0,
},
data_content_style: {
color_list: [{ color: '', color_percentage: undefined }],
direction: '180deg',
background_img_style: '2',
background_img: [],
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 0,
padding_right: 0,
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
row_gap: 0,
column_gap: 0,
common_style: {