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

数据魔方自定义处理显示

v1.1.0
于肖磊 2024-11-19 10:53:59 +08:00
parent 1fb3a45e89
commit bade4b326f
6 changed files with 99 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,7 @@
</div>
</swiper-slide>
</swiper>
<div v-if="new_style.is_show == '1' && dot_list.length > 0" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
<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>

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

@ -114,7 +114,8 @@ const form = ref(props.value);
const center_width = ref(props.magicWidth);
const custom_width = computed(() => {
if (['goods', 'article', 'brand'].includes(form.value.data_source) && form.value.data_source_direction == '0') {
// 如果是横向展示，那么就需要根据每屏显示的数量来计算宽度 data_source_direction == 2 为横向滑动
if (['goods', 'article', 'brand'].includes(form.value.data_source) && form.value.data_source_direction == '2') {
return center_width.value / form.value.data_source_carousel_col;
} else {
return center_width.value;

2
src/components/model-data-magic/components/carousel/magic-carousel.vue
View File

@ -93,7 +93,7 @@ watchEffect(() => {
// 商品时的处理逻辑
const { goods_outerflex, goods_num } = form.value.data_content;
const { rotation_direction, rolling_fashion } = form.value.data_style;
// 判断是平移还是整屏滚动, 平移的时候是一个为1组
// 判断是平移还是整屏滚动, 平移的时候是一个为1组，如果是整屏滚动，就为一屏为一组
if (rolling_fashion == 'translation') {
// 如果是商品是横排的，轮播也是横排的，就不对商品进行拆分/如果商品是竖排的，轮播也是竖排的，不对商品进行拆分
if ((goods_outerflex == 'row' && rotation_direction == 'horizontal') || (goods_outerflex == 'col' && rotation_direction == 'vertical')) {

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

@ -1,11 +1,22 @@
<template>
<template v-if="data_source_content_list.length > 0">
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == '0'">
<div v-for="(item1, index1) in data_source_content_list" :key="index1" class="oh" :style="style_container">
<div class="w h oh" :style="style_img_container">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
</div>
</div>
</template>
<div v-else-if="data_source_content_list.length > 0 && ['1', '2'].includes(form.data_source_direction)" class="oh" :style="form.data_source_direction == '2' ? `height:100%;` : `height: ${ swiper_height }px;`">
<swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == '2' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="form.data_source_carousel_col" :slides-per-group="slides_per_group" :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" :style="style_img_container">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
</div>
</div>
</swiper-slide>
</swiper>
</div>
<template v-else>
<div class="oh" :style="style_container">
<div class="w h oh" :style="style_img_container">
@ -15,8 +26,12 @@
</template>
</template>
<script setup lang="ts">
import { background_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
import { background_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';
import 'swiper/css';
const modules = [Autoplay];
const props = defineProps({
value: {
@ -42,9 +57,6 @@ const state = reactive({
// 如果需要解构，确保使用toRefs
const { form, new_style } = toRefs(state);
const scale = ref(1);
const percentage_count = (val: number) => {
return val * scale.value + 'px';
};
// 数据来源的内容
let data_source_content_list = computed(() => {
if (['goods', 'article', 'brand'].includes(form.value.data_source)) {
@ -64,7 +76,7 @@ let data_source_content_list = computed(() => {
})
interface new_style {
data_color_list: color_list[];
data_direction: string;
data_direction: string;
data_radius: radiusStyle;
data_chunk_margin: marginStyle;
data_chunk_padding: paddingStyle;
@ -107,6 +119,47 @@ watchEffect(() => {
const width = form.value.width - padding_left - padding_right - margin_left - margin_right - (props.dataSpacing / 2);
scale.value = (width / form.value.width) * props.magicScale;
})
//#region 轮播图操作
// 轮播图key值
const carouselKey = ref('0');
const autoplay = ref<boolean | object>(false);
const slides_per_group = ref(1);
const dot_list = ref<unknown[]>([]);
const swiper_height = ref(150);
const emit = defineEmits(['carousel_change']);
// 内容参数的集合
watchEffect(() => {
// 是否滚动
if (new_style.value.is_roll == '1') {
autoplay.value = {
delay: (new_style.value.interval_time || 2) * 1000,
pauseOnMouseEnter: true,
};
} else {
autoplay.value = false;
}
const carousel_col = form.value?.data_source_carousel_col || 1;
// 判断是平移还是整屏滚动
slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : carousel_col;
const { margin_bottom, margin_top } = new_style.value.data_chunk_margin;
const { padding_top, padding_bottom } = new_style.value.data_chunk_padding;
// 轮播图高度控制
if (form.value.data_source_direction == '2') {
swiper_height.value = form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top;
} else {
swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * carousel_col;
}
// 更新轮播图的key，确保更换时能重新更新轮播图
carouselKey.value = get_math();
});
const slideChange = (swiper: { realIndex: number }) => {
const carousel_col = form.value?.data_source_carousel_col || 1;
// 轮播图滚动时，更新当前激活的下标， 如果不是平移的时候，需要除以列数，否则就是当前的下标
const index = new_style.value.rolling_fashion == 'translation' ? swiper.realIndex : (swiper.realIndex / carousel_col) > 0 ? (swiper.realIndex / carousel_col) : 0;
emit('carousel_change', index);
};
//#endregion
</script>
<style lang="scss" scoped>
</style>

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

@ -1,13 +1,13 @@
<template>
<template v-if="tabs_content.data_type != 'custom'">
<template v-if="tabs_content.data_type != 'video'">
<card-container>
<div class="mb-12">基础样式</div>
<template v-if="['goods', 'images'].includes(tabs_content.data_type)">
<template v-if="['goods', 'images', 'custom'].includes(tabs_content.data_type)">
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" active-value="1" inactive-value="0" />
</el-form-item>
<template v-if="form.is_roll == '1'">
<el-form-item label="轮播方向">
<el-form-item v-if="tabs_content.data_type != 'custom'" label="轮播方向">
<el-radio-group v-model="form.rotation_direction">
<el-radio value="horizontal">横向</el-radio>
<el-radio value="vertical">纵向</el-radio>
@ -116,7 +116,7 @@
</card-container>
<div class="bg-f5 divider-line" />
</template>
<template v-if="['goods', 'images'].includes(tabs_content.data_type)">
<template v-if="['goods', 'images', 'custom'].includes(tabs_content.data_type)">
<card-container>
<carousel-indicator :key="form.carouselKey" :value="form"></carousel-indicator>
</card-container>

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

@ -21,17 +21,17 @@
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div>
<div class="w h">
<magic-carousel :value="item" :good-style="item.data_style" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
<magic-carousel :value="item" :good-style="item.data_style" :actived="form.style_actived" type="product" @carousel_change="carousel_change(index, $event)"></magic-carousel>
</div>
</div>
</template>
<template v-else-if="item.data_content.data_type == 'images'">
<div class="w h" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
<magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
<magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change(index, $event)"></magic-carousel>
</div>
</template>
<template v-else-if="item.data_content.data_type == 'custom'">
<customIndex :value="item" :magic-scale="magic_scale" :data-spacing="new_style.image_spacing"></customIndex>
<customIndex :value="item" :magic-scale="magic_scale" :data-spacing="new_style.image_spacing" @carousel_change="carousel_change(index, $event)"></customIndex>
</template>
<template v-else>
<videoIndex :value="item.data_content" :data-style="item.data_style"></videoIndex>
@ -67,17 +67,17 @@
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div>
<div class="w h flex-1">
<magic-carousel :value="item" :good-style="item.data_style" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
<magic-carousel :value="item" :good-style="item.data_style" type="product" :actived="form.style_actived" @carousel_change="carousel_change(index, $event)"></magic-carousel>
</div>
</div>
</template>
<template v-else-if="item.data_content.data_type == 'images'">
<div class="w h" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
<magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
<magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change(index, $event)"></magic-carousel>
</div>
</template>
<template v-else-if="item.data_content.data_type == 'custom'">
<customIndex :value="item" :magic-scale="magic_scale" :data-spacing="new_style.image_spacing"></customIndex>
<customIndex :value="item" :magic-scale="magic_scale" :data-spacing="new_style.image_spacing" @carousel_change="carousel_change(index, $event)"></customIndex>
</template>
<template v-else>
<videoIndex :value="item.data_content" :data-style="item.data_style"></videoIndex>
@ -346,7 +346,23 @@ const rotation_calculation = (list: Array<any>, num: number, data_content: any,
}
return nav_list;
}
// 数据来源的内容
let data_source_content_list = (data_content: any) => {
if (['goods', 'article', 'brand'].includes(data_content.data_source)) {
if (data_content.data_source_content.data_type == '0') {
return data_content.data_source_content.data_list;
} else {
return data_content.data_source_content.data_auto_list.map((item: any) => ({
id: Math.random(),
new_cover: [],
new_title: '',
data: item,
}));
}
} else {
return data_content.data_source_content.data_list;
}
};
const old_list = ref<any>({});
const data_magic_list = ref<data_magic[]>([]);
watch(props.value.content, (val) => {
@ -371,9 +387,17 @@ watch(props.value.content, (val) => {
const { is_roll, rotation_direction, interval_time, rolling_fashion } = data_style;
const { goods_list, images_list } = data_content;
// 商品时的处理逻辑
if (data_content.data_type == 'goods') {
data_content.list = commodity_list(data_content.goods_list, data_content.goods_num, data_content, data_style);
} else if (data_content.data_type == 'custom' && ['1', '2'].includes(data_content.data_source_direction)) {
// 是自定义并且是轮播状态的时候，添加数据
const list = data_source_content_list(data_content);
const carousel_col = data_style?.data_source_carousel_col || 1;
const num = new_style.value.rolling_fashion == 'translation' ? list.length : Math.ceil(list.length / carousel_col);
data_content.list = Array(num);
} else {
// 是图片的时候，直接赋值
data_content.list = data_content.images_list;
}
const new_data = {
@ -405,7 +429,7 @@ watch(props.value.content, (val) => {
data_magic_list.value = data;
}, {immediate: true, deep: true})
//#endregion
const carousel_change = (index: number, key: number) => {
const carousel_change = (key: number, index: number, type?: string, list?: any[]) => {
if (data_magic_list.value[key]) {
data_magic_list.value[key].actived_index = index;
}