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

修改自定义内容显示

v1.1.0
于肖磊 2024-12-23 17:33:52 +08:00
parent 1f2ddf21aa
commit 152e7aedfb
9 changed files with 91 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,14 +2,18 @@
<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 v-for="(item1, index1) in data_source_content_list" :key="index1" :style="style_chunk_container">
<div class="w h" :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 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" :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>
</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" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
<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" :style="style_chunk_img_container">
@ -77,6 +81,13 @@ onBeforeMount(() => {
}
}
});
// 计算纵向显示的宽度
const gap_width = computed(() => {
const model_number = Number(form.value.data_source_carousel_col);
// 计算间隔的空间。(gap * gap数量) / 模块数量
let gap = (new_style.value.column_gap * (model_number - 1)) / model_number;
return `calc(${100 / model_number}% - ${gap}px)`;
});
//#region 计算比例大小，和每块当前的大小
const scale = ref(1);
// 计算整体宽度和比例
@ -124,6 +135,7 @@ const slides_per_group = ref(1);
const dot_list = ref<unknown[]>([]);
const swiper_height = ref(390);
const slides_per_view = ref(1);
const space_between = ref(0);
// 内容参数的集合
watchEffect(() => {
// 是否滚动
@ -135,22 +147,26 @@ watchEffect(() => {
} else {
autoplay.value = false;
}
// 间距
space_between.value = form.value.data_source_direction == 'horizontal' ? new_style.value.column_gap : new_style.value.row_gap;
// 显示数量
const data_source_carousel_col = Number(form.value.data_source_carousel_col);
// 判断是平移还是整屏滚动
slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : Number(form.value.data_source_carousel_col);
slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : Number(data_source_carousel_col);
// 商品数量大于列数的时候，高度是列数，否则是当前的数量
const col = data_source_content_list.value.length > Number(form.value.data_source_carousel_col) ? Number(form.value.data_source_carousel_col) : data_source_content_list.value.length;
const col = data_source_content_list.value.length > Number(data_source_carousel_col) ? Number(data_source_carousel_col) : data_source_content_list.value.length;
slides_per_view.value = col;
let num = 0;
// 轮播图数量
if (!isEmpty(data_source_content_list.value)) {
num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / Number(form.value.data_source_carousel_col));
num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / Number(data_source_carousel_col));
}
const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.value.data_style;
// 轮播图高度控制
if (form.value.data_source_direction == 'horizontal') {
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) * col;
swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((data_source_carousel_col - 1) * space_between.value);
}
dot_list.value = Array(num);
// 更新轮播图的key，确保更换时能重新更新轮播图

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

@ -20,7 +20,7 @@
<el-radio v-for="(item, index) in default_type_data?.show_type" :key="index" :value="item">{{ item == 'vertical' ? '纵向展示' : item == 'vertical-scroll' ? '纵向滑动' : '横向滑动' }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="default_type_data?.show_number.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)">
<template v-if="default_type_data?.show_number.length > 0">
<el-form-item label="每屏显示">
<el-radio-group v-model="form.data_source_carousel_col">
<el-radio v-for="(item, index) in default_type_data?.show_number" :key="index" :value="item">{{ item }}{{ form.data_source_direction == 'vertical-scroll' ? '行' : '列' }}展示</el-radio>
@ -117,8 +117,8 @@ const form = ref(props.value);
const center_width = ref(props.magicWidth);
// 可拖拽区域的宽度
const custom_width = computed(() => {
// 如果是横向展示，那么就需要根据每屏显示的数量来计算宽度 data_source_direction == horizontal 为横向滑动
if (form.value.is_custom_data == '1' && form.value.data_source_direction == 'horizontal') {
// 如果是横向展示，那么就需要根据每屏显示的数量来计算宽度 data_source_direction != vertical-scroll 不为纵向滑动的都是横向宽度变化
if (form.value.is_custom_data == '1' && form.value.data_source_direction != 'vertical-scroll') {
return center_width.value / form.value.data_source_carousel_col;
} else {
return center_width.value;

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

@ -39,6 +39,16 @@
<el-form-item label="圆角">
<radius :value="form.data_style"></radius>
</el-form-item>
<el-form-item label="数据间距">
<div class="flex-col w h gap-10">
<el-form-item v-if="['vertical', 'horizontal'].includes(data.data_source_direction)" label="横向" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="form.column_gap" :max="100"></slider>
</el-form-item>
<el-form-item v-if="['vertical', 'vertical-scroll'].includes(data.data_source_direction)" label="纵向" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="form.row_gap" :max="100"></slider>
</el-form-item>
</div>
</el-form-item>
</card-container>
</el-form>
<div class="bg-f5 divider-line" />

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

@ -1,13 +1,17 @@
<template>
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
<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" :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 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" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
<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" :style="style_img_container">
@ -119,6 +123,13 @@ 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;
})
// 计算纵向显示的宽度
const gap_width = computed(() => {
const model_number = Number(form.value.data_source_carousel_col);
// 计算间隔的空间。(gap * gap数量) / 模块数量
let gap = (new_style.value.column_gap * (model_number - 1)) / model_number;
return `calc(${100 / model_number}% - ${gap}px)`;
});
//#region 轮播图操作
// 轮播图key值
const carouselKey = ref('0');
@ -126,6 +137,7 @@ const autoplay = ref<boolean | object>(false);
const slides_per_group = ref(1);
const slides_per_view = ref(1);
const swiper_height = ref(150);
const space_between = ref(0);
const emit = defineEmits(['carousel_change']);
// 内容参数的集合
watchEffect(() => {
@ -138,6 +150,9 @@ watchEffect(() => {
} else {
autoplay.value = false;
}
// 间距
space_between.value = form.value.data_source_direction == 'horizontal' ? new_style.value.column_gap : new_style.value.row_gap;
// 显示数量
const carousel_col = Number(form.value?.data_source_carousel_col) || 1;
// 判断是平移还是整屏滚动
slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : carousel_col;
@ -151,7 +166,7 @@ watchEffect(() => {
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) * col;
swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((carousel_col - 1) * space_between.value);
}
// 更新轮播图的key，确保更换时能重新更新轮播图
carouselKey.value = get_math();

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

@ -79,6 +79,16 @@
<el-form-item label="圆角">
<radius :key="form.carouselKey" :value="form.data_radius" @update:value="data_radius_change"></radius>
</el-form-item>
<el-form-item v-if="tabs_content.data_type == 'custom'" label="数据间距">
<div class="flex-col w h gap-10">
<el-form-item v-if="['vertical', 'horizontal'].includes(tabs_content.data_source_direction)" label="横向" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="form.column_gap" :max="100"></slider>
</el-form-item>
<el-form-item v-if="['vertical', 'vertical-scroll'].includes(tabs_content.data_source_direction)" label="纵向" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="form.row_gap" :max="100"></slider>
</el-form-item>
</div>
</el-form-item>
<el-form-item v-if="tabs_content.data_type == 'goods'" label="数据间距">
<slider v-model="form.data_goods_gap" :min="0" :max="50"></slider>
</el-form-item>

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

@ -186,6 +186,8 @@ const data_style = {
radius_bottom_left: 4,
radius_bottom_right: 4,
},
column_gap: 0,
row_gap: 0,
indicator_style: 'dot',
indicator_new_location: 'bottom',
indicator_location: 'center',

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

@ -9,7 +9,7 @@
<image-empty v-if="form.location_left_img.length > 0" v-model="form.location_left_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
<icon v-else :name="form.location_left_icon" :size="new_style?.location_left_icon_size + '' || '12'"></icon>
</template>
<span class="location-name size-12 text-line-1">{{ form.positioning_name }}</span>
<span class="location-name size-12 text-line-1" :style="`max-width: ${ form.theme == '4' ? '150px' : '100px;' }`">{{ form.positioning_name }}</span>
<template v-if="form.is_location_right_icon_show == '1'">
<image-empty v-if="form.location_right_img.length > 0" v-model="form.location_right_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
<icon v-else :name="form.location_right_icon" :size="new_style?.location_right_icon_size + '' || '12'"></icon>

21
src/components/page-settings/index.vue
View File

@ -41,7 +41,7 @@
<image-empty v-if="form.location_left_img.length > 0" v-model="form.location_left_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
<icon v-else :name="form.location_left_icon" :size="new_style?.location_left_icon_size + '' || '12'"></icon>
</template>
<span class="location-name size-14 text-line-1">{{ form.positioning_name }}</span>
<span class="location-name size-14 text-line-1" :style="location_name_style">{{ form.positioning_name }}</span>
<template v-if="form.is_location_right_icon_show == '1'">
<image-empty v-if="form.location_right_img.length > 0" v-model="form.location_right_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
<icon v-else :name="form.location_right_icon" :size="new_style?.location_right_icon_size + '' || '12'"></icon>
@ -64,7 +64,7 @@
<div v-if="is_search_alone_row || is_icon_alone_row" class="model-head-content flex-row align-c gap-16">
<template v-if="['3', '5'].includes(form.theme) && is_search_alone_row">
<div class="flex-1">
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
<model-search :value="pageData.com_data" :is-page-settings="true" search-type="header" :header-location-style="style_location_container" :header-location-img-style="style_location_img_container"></model-search>
</div>
</template>
<div v-if="!isEmpty(form.icon_setting) && is_icon_alone_row" class="flex-row align-c" :class="'gap-' + new_style.img_space">
@ -199,6 +199,21 @@ const style_location_img_container = computed(() => {
const height = 32 - location_margin.margin_top - location_margin.margin_bottom;
return background_computer(style) + padding_computer(location_padding) + radius_computer(new_style.value.location_radius) + border + `height: ${height}px;line-height: ${height}px;`;
});
const location_name_style = computed(() => {
let width = 0;
if (is_search_alone_row.value && is_icon_alone_row.value) {
width = 200;
} else if (is_search_alone_row.value || is_icon_alone_row.value) {
width = 100;
}
if (form.value.theme == '4') {
return `max-width: ${ 150 + width }px;`;
} else {
return `max-width: ${ 100 + width }px;`;
}
});
// 文字样式
const text_style = computed(() => `font-weight:${new_style.value.header_background_title_typeface}; font-size: ${new_style.value.header_background_title_size}px; color: ${new_style.value.header_background_title_color};`);
const position_class = computed(() => (form.value?.indicator_location == 'center' ? `indicator-center` : ''));
@ -230,8 +245,6 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
.model-head-content {
height: 3.2rem;
.location-name {
// line-height: 100%;
max-width: 15rem;
width: 100%;
flex-basis: content;
flex-shrink: 1;

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

@ -99,6 +99,8 @@ interface defaultSearch {
indicator_size: number;
indicator_radius: radiusStyle;
data_style: object;
row_gap: number;
column_gap: number;
// 通用样式
common_style: object;
};
@ -174,6 +176,8 @@ const defaultSearch: defaultSearch = {
margin_left: 0,
margin_right: 0,
},
row_gap: 0,
column_gap: 0,
common_style: {
...defaultCommon,
color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }],