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

修改数据魔方显示问题

v1.1.0
于肖磊 2024-11-21 18:50:26 +08:00
parent ae65baf5d7
commit 25cb400db7
7 changed files with 86 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/base/image-empty/index.vue
View File

@ -44,6 +44,7 @@ const on_load = (e: any) => {
background-color: #f4fcff;
img {
width: 100%;
padding: 0.4rem;
}
}
</style>

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

@ -1,13 +1,13 @@
<template>
<div ref="card_container" class="w h oh" :style="props.type === 'img' ? '' : style_container">
<div class="w re oh" :style="props.type === 'img' ? `height: ${ outer_height }px;` : `height: ${ outer_height }px;${ style_img_container }`">
<div class="w re oh" :style="style_2_container">
<swiper :key="form.data_style.carouselKey" class="w flex" :direction="form.data_style.rotation_direction" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="1" :space-between="props.type === 'img' ? 0 : form.data_style.data_goods_gap" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
<swiper-slide v-for="(item1, index1) in form.data_content.list" :key="index1">
<template v-if="props.type === 'img'">
<template v-if="props.type === 'img' && !isEmpty(item1.carousel_img)">
<image-empty v-model="item1.carousel_img[0]" :style="form.data_style.get_img_radius" :fit="form.data_content.img_fit"></image-empty>
</template>
<template v-else>
<product-list-show :outerflex="form.data_content.goods_outerflex" :flex="form.data_content.goods_flex" :num="show_num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="form.data_style.get_img_radius"></product-list-show>
<product-list-show :outerflex="form.data_content.goods_outerflex" :flex="form.data_content.goods_flex" :num="show_num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="form.data_style.get_img_radius" :data-content="form.data_content"></product-list-show>
</template>
</swiper-slide>
</swiper>
@ -28,6 +28,7 @@ interface Props {
type: string;
actived: number;
goodStyle?: any;
isUnlimitedSize?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
@ -75,6 +76,11 @@ const card_container = ref<HTMLElement | null>(null);
const outer_height = ref(0);
// 不拆分数据的时候为1，让商品内容在内部铺满/拆分数据的时候，为一屏显示数量，用于商品内部处理显示
const show_num = ref(0);
const style_2_container = computed(() => {
const style_actived_style = props.type === 'img' ? `height: ${ outer_height.value }px;` : `height: ${ outer_height.value }px;${ style_img_container.value }`;
const style = props.isUnlimitedSize ? 'height: 100%;' : style_actived_style;
return style;
});
// 内容参数的集合
watchEffect(() => {
// 是否滚动
@ -109,12 +115,15 @@ watchEffect(() => {
slides_per_view.value = 1; // 能够同时显示的slides数量
}
}
nextTick(() => {
// 外层高度
if (card_container.value) {
outer_height.value = card_container.value?.clientHeight;
}
});
// 不是不限尺寸的时候的处理
if (!props.isUnlimitedSize) {
nextTick(() => {
// 外层高度
if (card_container.value) {
outer_height.value = card_container.value?.clientHeight;
}
});
}
});
</script>

27
src/components/model-data-magic/components/carousel/product-list-show.vue
View File

@ -4,13 +4,15 @@
<div v-for="(item, index) in split_list" :key="index" :style="block_size">
<div class="w h oh" :style="style_container(props.goodStyle)">
<div class="w h flex-row gap-10" :style="style_img_container(props.goodStyle)">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb">
<div :style="`width: ${ image_scale }%;`">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
</div>
<div v-if="!isEmpty(isShow)" class="flex-col w tl jc-sb" :style="`width: ${ 100 - image_scale }%;`">
<div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style + `height: ${ (props.goodStyle.goods_title_size + 3) * 2 }px;`">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying" :style="props.goodStyle.goods_price_style">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
@ -86,6 +88,7 @@ interface Props {
isShow: Array<string>;
chunkPadding: paddingStyle;
goodStyle: any;
dataContent: any;
}
const props = withDefaults(defineProps<Props>(), {
@ -107,6 +110,16 @@ const block_size = computed(() => {
return props.outerflex == 'row' ? 'height:100%;width:calc((100% - ' + total_gap + 'px) / ' + props.num + ');' : 'width: 100%;height:calc((100% - ' + total_gap + 'px) / ' + props.num + ');';
});
// 图片显示比例
const image_scale = computed(() => {
const data = ['title', 'price', 'price_unit'];
const list = props.isShow.filter((item: string) => data.includes(item));
if (list.length > 0) {
return props.dataContent.image_scale;
} else {
return 100;
}
});
// 用于样式显示
const style_container = computed(() => {
return (val: new_style) => {

25
src/components/model-data-magic/components/magic-cube-settings/tabs-content.vue
View File

@ -42,6 +42,16 @@
<el-form-item label="每屏数量">
<slider v-model="form.goods_num" :min="1" :max="6"></slider>
</el-form-item>
<template v-if="is_show_image_scale && form.goods_flex == 'row'">
<el-form-item label="图片比例">
<slider v-model="form.image_scale" :min="0" :max="100"></slider>
</el-form-item>
</template>
<el-form-item label="展示信息" label-width="60">
<el-checkbox-group v-model="form.is_show">
<el-checkbox v-for="item in list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</template>
<template v-else-if="form.data_type === 'images'">
<el-form-item label="图片设置">
@ -79,11 +89,6 @@
<div class="mb-12">商品设置</div>
<drag-group :list="form.goods_list" img-params="images" @onsort="goods_list_sort" @remove="goods_list_remove" @replace="goods_list_replace"></drag-group>
<el-button class="mtb-20 w" @click="goods_list_add">+添加</el-button>
<el-form-item label="展示信息" label-width="60">
<el-checkbox-group v-model="form.is_show">
<el-checkbox v-for="item in list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</card-container>
</template>
@ -120,7 +125,15 @@ const list_show_list = [
{ name: '商品售价', value: 'price' },
{ name: '售价单位', value: 'price_unit' },
];
const is_show_image_scale = computed(() => {
const data = ['title', 'price', 'price_unit'];
const list = form.value.is_show.filter((item: string) => data.includes(item));
if (list.length > 0) {
return true;
} else {
return false;
}
});
const form = ref(props.value);
const img_add = () => {

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

@ -51,7 +51,7 @@
</div>
</template>
<template v-else>
<div v-for="(item, index) in data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${ selected_style(item) } ${ item.data_style.background_style } ${ content_radius }`">
<div v-for="(item, index) in data_magic_list" :key="index" :class="['img-spacing-border', is_unlimited_size ? '' : ' cube-selected']" :style="`${ selected_style(item) } ${ item.data_style.background_style } ${ content_radius }`">
<div class="w h re" :style="`${ item.data_style.background_img_style }`">
<template v-if="item.data_content.data_type == 'goods'">
<div class="w h flex-col" :style="`${ padding_computer(item.data_style.chunk_padding) };gap: ${ item.data_style.title_data_gap }px;`">
@ -67,13 +67,13 @@
<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(index, $event)"></magic-carousel>
<magic-carousel :value="item" :good-style="item.data_style" type="product" :actived="form.style_actived" :is-unlimited-size="is_unlimited_size" @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(index, $event)"></magic-carousel>
<magic-carousel :value="item" type="img" :actived="form.style_actived" :is-unlimited-size="is_unlimited_size" @carousel_change="carousel_change(index, $event)"></magic-carousel>
</div>
</template>
<template v-else-if="item.data_content.data_type == 'custom'">
@ -133,8 +133,10 @@ const content_radius = computed(() => radius_computer(new_style.value.data_radiu
const div_width = ref(390);
// 如果容器高度为空，则取容器宽度
const container_height = computed(() => is_number(form.value.container_height) ? form.value.container_height : div_width.value);
// 是否不限尺寸
const is_unlimited_size = computed(() => form.value.style_actived === 9 && form.value.limit_size == '0');
const container_size = computed(() => container_height.value + 'px');
const container_size = computed(() => is_unlimited_size.value ? '100%' : container_height.value + 'px');
//#endregion
//#region 图片位置计算
//计算选中层的宽度。

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

@ -10,15 +10,22 @@
</div>
</div>
</el-form-item>
<el-form-item label="容器高度" label-width="60">
<slider v-model="form.container_height" :min="30" :max="1000" @update:model-value="handleResize"></slider>
</el-form-item>
<template v-if="form.style_actived == 9">
<el-form-item label="限制尺寸" label-width="60">
<el-switch v-model="form.limit_size" active-value="1" inactive-value="0" @change="handleResize"/>
</el-form-item>
</template>
<template v-if="form.style_actived !== 9 || form.limit_size == '1'">
<el-form-item label="容器高度" label-width="60">
<slider v-model="form.container_height" :min="30" :max="1000" @update:model-value="handleResize"></slider>
</el-form-item>
</template>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12 flex-row jc-sb align-c">
展示设置
<template v-if="form.style_actived === 9">
<template v-if="form.style_actived === 10">
<el-radio-group v-model="form.magic_cube_density" @change="density_change">
<el-radio-button label="4X4" :value="4" />
<el-radio-button label="6X6" :value="6" />
@ -40,7 +47,7 @@
</div>
</template>
<template v-else>
<magic-cube :key="form.style_actived" :list="form.data_magic_list" :flag="form.style_actived == 9" :magic-cube-density="form.magic_cube_density" :cube-width="cubeWidth" type="data" :cube-height="cubeHeight" :default-content="data_content" :default-style="data_style" @selected_click="selected_click"></magic-cube>
<magic-cube :key="form.style_actived" :list="form.data_magic_list" :flag="form.style_actived == 10" :magic-cube-density="form.magic_cube_density" :cube-width="cubeWidth" type="data" :cube-height="cubeHeight" :default-content="data_content" :default-style="data_style" @selected_click="selected_click"></magic-cube>
</template>
</el-form-item>
</card-container>
@ -69,7 +76,7 @@ const props = defineProps({
},
});
// 风格数组
const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2', 'a-4x4'];
const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2', 'a-1ge', 'a-4x4'];
// 每个小模块独立的样式
const data_style = {
color_list: [{ color: '#FFD9C3', color_percentage: 0 }, { color: '#FFECE2', color_percentage: 12 }, { color: '#FFFFFF', color_percentage: 30 }],
@ -186,6 +193,7 @@ const data_content = {
goods_outerflex: 'row',
goods_flex: 'row',
goods_num: 1,
image_scale: 50,
is_show: ['title', 'price'],
// 图片数据处理
img_fit: 'cover',
@ -233,7 +241,8 @@ const style_show_list = [
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }],// 风格7
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 20, width: 130 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 20, width: 130 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 20, width: 130 }],// 风格8
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col_price_float', outerflex: 'col', title_text_gap: 10, width: 98 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col_price_float', outerflex: 'col', title_text_gap: 10, width: 98 }],// 风格9
[], //风格10
[{ start: {x: 1, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 390 }],// 风格10
[], //风格11
]
const tabs_name = ref('content');
const state = reactive({
@ -281,13 +290,13 @@ const handleResize = () => {
const selected_active = ref(0);
// 切换风格
const style_click = (index: number) => {
if (index !== 9) {
form.value.style_actived = index;
if (index !== 10) {
form.value.magic_cube_density = 4;
form.value.data_magic_list = magic_list(index);
} else {
form.value.data_magic_list = [];
}
form.value.style_actived = index;
selected_active.value = 0;
tabs_name.value = 'content';
handleResize();
@ -305,6 +314,7 @@ const magic_list = (index: number) => {
goods_outerflex: item.outerflex,
goods_flex: item.flex,
goods_num: item.num,
image_scale: form.value.style_actived == 9 ? 30 : data_content.image_scale, // 风格9的时候是30%，其他都是50%
},
data_style: {
...cloneDeep(data_style),

3
src/config/const/data-magic.ts
View File

@ -11,6 +11,7 @@ interface defaultSearch {
magic_cube_density: number;
style_actived: number;
container_height: number;
limit_size: string;
data_magic_list: data_magic[];
};
style: {
@ -28,6 +29,8 @@ const defaultSearch: defaultSearch = {
style_actived: 0,
// 容器高度
container_height: 390,
// 是否限制尺寸
limit_size: '1',
// 数据列表
data_magic_list: [],
},