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

修改页面显示逻辑

v1.1.0
于肖磊 2024-11-05 17:46:59 +08:00
parent 537fbf47a3
commit dbc76ff97d
11 changed files with 262 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/common/magic-cube/index.vue
View File

@ -35,12 +35,12 @@
</template>
<script setup lang="ts">
import { isEmpty } from 'lodash';
interface content {
data_type: string;
goods_list: Array<string>;
images_list: Array<string>;
}
import { isEmpty, cloneDeep } from 'lodash';
// interface content {
// data_type: string;
// goods_list: Array<string>;
// images_list: Array<string>;
// }
interface CubeItem {
start: {
x: number;
@ -51,7 +51,8 @@ interface CubeItem {
y: number;
};
img?: uploadList[];
data_content?: content
data_content?: any,
data_style?: object,
}
interface Props {
@ -62,6 +63,9 @@ interface Props {
cubeHeight: number;
styleActived?: number;
imgFit?: "" | "cover" | "fill" | "contain" | "none" | "scale-down";
magicCubeDensity?: number;
defaultContent?: object;
defaultStyle?: object;
}
const props = withDefaults(defineProps<Props>(), {
list: () => [],
@ -70,12 +74,24 @@ const props = withDefaults(defineProps<Props>(), {
cubeWidth: 390,
cubeHeight: 390,
styleActived: 0,
imgFit: 'cover'
imgFit: 'cover',
magicCubeDensity: 4,
defaultContent: () => ({
data_type: '',
goods_list: [],
images_list: []
}),
defaultStyle: () => ({}),
});
const selected_active = ref(0);
// 选中的数据
const selectedList = ref(props.list);
//#region 容器大小变更
const density = ref('4');
const density = computed(() => props?.magicCubeDensity || 4);
watchEffect(() => {
selectedList.value = props.list;
});
//#endregion
const selectingItem = reactive<any>({
@ -100,14 +116,12 @@ const outerClick = (e: any) => {
}
};
const selectedList = ref(props.list);
//单元魔方宽度。
const cubeCellWidth = computed(() => props.cubeWidth / parseInt(density.value));
const cubeCellWidth = computed(() => props.cubeWidth / density.value);
//密度值。
const densityNum = computed(() => parseInt(density.value));
const densityNum = computed(() => density.value);
//单元魔方高度。
const cubeCellHeight = computed(() => props.cubeHeight / parseInt(density.value));
const cubeCellHeight = computed(() => props.cubeHeight / density.value);
const emits = defineEmits(['selected_click']);
// 判断选择的内容的长度是否发生变化
@ -171,13 +185,23 @@ const onClickCubeItem = (event: any) => {
selectingItem.tempEnd = coord;
updateSelecting();
let selectedItem = {} as CubeItem;
//加入选中的。
let selectedItem = {
start: selectingItem.start,
end: selectingItem.end,
img: [],
};
if (props.type == 'data') {
console.log(props.defaultContent);
selectedItem = {
start: selectingItem.start,
end: selectingItem.end,
data_content: cloneDeep(props.defaultContent),
data_style: cloneDeep(props.defaultStyle),
};
} else {
selectedItem = {
start: selectingItem.start,
end: selectingItem.end,
img: [],
};
}
selectedList.value.push(selectedItem);
clearSelecting();
};

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

@ -7,7 +7,7 @@
<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.outerflex" :flex="form.flex" :num="form.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="form.data_content.goods_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>
</template>
</el-carousel-item>
</el-carousel>

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

@ -1,104 +1,75 @@
<template>
<template v-if="props.outerflex == 'row'">
<div class="flex-row gap-10 align-c w h">
<template v-if="props.flex === 'row'">
<div v-for="(item, index) in split_list" :key="index" class="half-width h">
<div class="w h oh" :style="style_container(goodStyle)">
<div class="w h flex-row gap-10" :style="style_img_container(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 v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
</div>
</div>
</div>
</div>
</div>
</template>
<template v-else-if="actived != 7 || props.num != 1">
<div v-for="(item, index) in split_list" :key="index" :class="['h', { 'half-width': props.num != 1, 'w': props.num == 1 }]">
<div class="w h oh" :style="style_container(goodStyle)">
<div class="w h flex-col gap-10" :style="style_img_container(goodStyle)">
<div class="w h re flex-1">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
<div :class="['align-c w h', ( props.outerflex == 'row' ? 'flex-row' : 'flex-col')]" :style="'gap:' + props.goodStyle.data_goods_gap + 'px;'">
<template v-if="props.flex === 'row'">
<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 v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style">{{ 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 }}
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
<template v-else>
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</div>
</div>
</div>
</div>
</div>
</template>
<template v-else-if="props.flex == 'col'">
<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-col gap-10" :style="style_img_container(props.goodStyle)">
<div class="w h re flex-1">
<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="isShow.includes('price')" class="price-suspension text-line-1" :style="props.goodStyle.goods_price_style">
{{ item.show_price_symbol }}{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
{{ item.show_price_unit }}
</template>
<div v-if="isShow.includes('price')" class="price-suspension text-line-1" :style="goodStyle.goods_price_style">
{{ item.show_price_symbol }}{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
{{ item.show_price_unit }}
</template>
</div>
</div>
<div v-if="isShow.includes('title')" class="text-line-1 size-14 tl w" :style="goodStyle.goods_title_style">{{ item.title }}</div>
</div>
<div v-if="isShow.includes('title')" class="text-line-1 size-14 tl w" :style="props.goodStyle.goods_title_style">{{ item.title }}</div>
</div>
</div>
</template>
<template v-else>
<div v-for="(item, index) in split_list" :key="index" class="w h">
<div class="w h oh" :style="style_container(goodStyle)">
<div class="w h flex-col" :style="style_img_container(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 tl jc-sb" :style="`${ padding_computer(props.chunkPadding) }`">
<div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
</div>
</div>
</template>
<template v-else>
<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-col" :style="style_img_container(props.goodStyle, 'fill')">
<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 tl jc-sb" :style="`${ padding_computer(props.goodStyle.goods_chunk_padding) }`">
<div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style">{{ 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 }}
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
</div>
</div>
</div>
</div>
</template>
</div>
</template>
<template v-else>
<div class="flex-col gap-10 align-c w h">
<template v-if="props.flex === 'row'">
<div v-for="(item, index) in split_list" :key="index" class="w h shop-max-height">
<div class="w h oh" :style="style_container(goodStyle)">
<div class="w h flex-row gap-10 align-c" :style="style_img_container(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 v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</template>
<script setup lang="ts">
@ -131,6 +102,11 @@ interface new_style {
goods_background_img_style: string;
}
const block_size = computed(() => {
const total_gap: number = props.goodStyle.data_goods_gap * (split_list.value.length - 1);
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 style_container = computed(() => {
return (val: new_style) => {
@ -147,14 +123,14 @@ const style_container = computed(() => {
}
});
const style_img_container = computed(() => {
return (val: new_style) => {
return (val: new_style, type?: string) => {
if (!isEmpty(val)) {
const { goods_background_img = [], goods_background_img_style = '2', goods_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = val;
const data = {
background_img: goods_background_img,
background_img_style: goods_background_img_style,
}
return padding_computer(goods_chunk_padding) + background_computer(data);
return type == 'fill' ? background_computer(data) : padding_computer(goods_chunk_padding) + background_computer(data);
} else {
return '';
}

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

@ -4,9 +4,11 @@
<el-radio-group v-model="form.data_type">
<el-radio value="goods">商品</el-radio>
<el-radio value="images">图片</el-radio>
<el-radio value="custom">自定义</el-radio>
<el-radio value="video">视频</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.data_type === 'goods' && isShowTitle">
<template v-if="form.data_type === 'goods'">
<el-form-item label="主标题">
<div class="flex-col gap-10 w">
<el-radio-group v-model="form.heading_title_type">
@ -24,6 +26,22 @@
<el-form-item label="副标题">
<el-input v-model="form.subtitle" placeholder="请输入副标题" clearable></el-input>
</el-form-item>
<el-form-item label="商品排列">
<el-radio-group v-model="form.goods_outerflex">
<el-radio value="row">横排</el-radio>
<el-radio value="col">竖排</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="内容排列">
<el-radio-group v-model="form.goods_flex">
<el-radio value="row">左图右文</el-radio>
<el-radio value="fill">上图下文</el-radio>
<el-radio value="col">上图下文<span class="size-8">(价格浮动)</span></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="每屏数量">
<slider v-model="form.goods_num" :min="1" :max="6"></slider>
</el-form-item>
</template>
<template v-else-if="form.data_type === 'images'">
<el-form-item label="图片设置">
@ -163,4 +181,8 @@ const url_value_dialog_call_back = (item: any[]) => {
:deep(.el-checkbox-group .el-checkbox) {
margin-right: 2rem;
}
:deep(.el-radio-group .el-radio) {
margin-right: 2rem;
}
</style>

35
src/components/model-data-magic/components/tabs-styles.vue
View File

@ -11,24 +11,32 @@
<upload v-model="form.background_img" :limit="1"></upload>
</div>
</el-form-item>
<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-radio-group v-model="form.rotation_direction">
<el-radio value="horizontal">横向</el-radio>
<el-radio value="vertical">纵向</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
<template v-if="['goods', 'images'].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-radio-group v-model="form.rotation_direction">
<el-radio value="horizontal">横向</el-radio>
<el-radio value="vertical">纵向</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
</el-form-item>
</template>
</template>
<template v-if="tabs_content.data_type === 'goods'">
<el-form-item label="内间距">
<padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
</el-form-item>
<el-form-item label="标题间距">
<slider v-model="form.title_gap" :min="1" :max="100"></slider>
</el-form-item>
<el-form-item label="标题内容间距">
<slider v-model="form.title_data_gap" :min="1" :max="100"></slider>
</el-form-item>
</template>
<el-form-item label="图片圆角">
<radius :key="form.carouselKey" :value="form.img_radius" @update:value="img_radius_change"></radius>
@ -77,6 +85,9 @@
<el-form-item label="圆角">
<radius :key="form.carouselKey" :value="form.data_radius" @update:value="data_radius_change"></radius>
</el-form-item>
<el-form-item label="数据间距">
<slider v-model="form.data_goods_gap" :min="0" :max="50"></slider>
</el-form-item>
</card-container>
</template>
<template v-if="tabs_content.data_type === 'goods'">

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

@ -8,8 +8,8 @@
<div v-for="(item, index) in data_magic_list" :key="index" :style="`${ item.data_style.background_style } ${ content_radius }`" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
<div class="w h" :style="`${ item.data_style.background_img_style }`">
<template v-if="item.data_content.data_type == 'goods'">
<div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`">
<div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c gap-10' : ' flex-col gap-5')">
<div :class="`w h flex-col ${ 'gap-' + item.data_style.title_data_gap }`" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
<div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle))" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c' : ' flex-col')" :style="'gap:' + item.data_style.title_gap + 'px;'">
<template v-if="item.data_content.heading_title_type && item.data_content.heading_title_type == 'image'">
<div v-if="item.data_content.heading_title_img.length > 0" class="re" :style="`height: ${ item.data_style?.heading_img_height || 0 }px`">
<img :style="`height: ${ item.data_style?.heading_img_height || 0 }px`" :src="item.data_content.heading_title_img[0].url" fit="contain" />
@ -46,8 +46,8 @@
<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 class="w h" :style="`${ item.data_style.background_img_style }`">
<template v-if="item.data_content.data_type == 'goods'">
<div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
<div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" :class="'gap-5 tl' + (item.data_style.title_line == '1' ? ' flex-row align-c gap-10' : ' flex-col gap-5')">
<div :class="`w h flex-col ${ 'gap-' + item.data_style.title_data_gap }`" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
<div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c' : ' flex-col')" :style="'gap:' + item.data_style.title_gap + 'px;'">
<template v-if="item.data_content.heading_title_type && item.data_content.heading_title_type == 'image'">
<div v-if="item.data_content.heading_title_img.length > 0" class="re" :style="`height: ${ item.data_style?.heading_img_height || 0 }px`">
<img :style="`height: ${ item.data_style?.heading_img_height || 0 }px`" :src="item.data_content.heading_title_img[0].url" fit="contain" />
@ -136,7 +136,7 @@ interface data_magic {
data_style: any;
}
// 屏幕分块
const density = ref('4');
const density = computed(() => form.value?.magic_cube_density || 4);
//单元魔方宽度。
const cubeCellWidth = computed(() => div_width.value / parseInt(density.value));
//单元魔方高度。
@ -285,7 +285,7 @@ watch(props.value.content, (val) => {
const { is_roll, rotation_direction, interval_time } = data_style;
const { goods_list, images_list } = data_content;
if (data_content.data_type == 'goods') {
data_content.list = commodity_list(data_content.goods_list, item.num);
data_content.list = commodity_list(data_content.goods_list, data_content.goods_num);
} else {
data_content.list = data_content.images_list;
}

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

@ -16,7 +16,16 @@
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">展示设置</div>
<div class="mb-12 flex-row jc-sb align-c">
展示设置
<template v-if="form.style_actived === 9">
<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" />
<el-radio-button label="8X8" :value="8" />
</el-radio-group>
</template>
</div>
<el-form-item label-width="0" class="show-config">
<!-- 风格9 -->
<template v-if="form.style_actived == 7">
@ -31,20 +40,22 @@
</div>
</template>
<template v-else>
<magic-cube :key="form.style_actived" :list="form.data_magic_list" :flag="false" :cube-width="cubeWidth" type="data" :cube-height="cubeHeight" @selected_click="selected_click"></magic-cube>
<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>
</template>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<!-- 内容和样式组件 -->
<el-tabs v-model="tabs_name" class="content-tabs">
<el-tab-pane label="内容设置" name="content">
<tabs-content :value="form.data_magic_list[selected_active].data_content" :is-show-title="is_show_title"></tabs-content>
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles">
<tabs-styles :value="form.data_magic_list[selected_active].data_style" :content="form.data_magic_list[selected_active].data_content" :is-show-title="is_show_title"></tabs-styles>
</el-tab-pane>
</el-tabs>
<template v-if="!isEmpty(form.data_magic_list[selected_active])">
<div class="bg-f5 divider-line" />
<el-tabs v-model="tabs_name" class="content-tabs">
<el-tab-pane label="内容设置" name="content">
<tabs-content :value="form.data_magic_list[selected_active].data_content" :is-show-title="is_show_title"></tabs-content>
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles">
<tabs-styles :value="form.data_magic_list[selected_active].data_style" :content="form.data_magic_list[selected_active].data_content" :is-show-title="is_show_title"></tabs-styles>
</el-tab-pane>
</el-tabs>
</template>
</el-form>
</div>
</template>
@ -58,16 +69,19 @@ const props = defineProps({
},
});
// 风格数组
const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2'];
const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2', 'a-4x4'];
// 每个小模块独立的样式
const data_style = {
color_list: [{ color: '#FFD9C3', color_percentage: 0 }, { color: '#FFECE2', color_percentage: 12 }, { color: '#FFFFFF', color_percentage: 30 }],
direction: '180deg',
background_img_style: '2',
background_img: [],
carouselKey: get_math(),
is_roll: '0',
rotation_direction: 'horizontal',
interval_time: 3,
title_gap: 5,
title_data_gap: 10,
heading_color: '#000',
heading_typeface: '400',
heading_size: 20,
@ -115,6 +129,7 @@ const data_style = {
radius_bottom_right: 4,
},
is_show: '1',
data_goods_gap: 10,
data_color_list: [{ color: '', color_percentage: undefined }],
data_direction: '180deg',
data_background_img_style: '2',
@ -156,6 +171,9 @@ const data_content = {
subtitle: '副标题',
goods_list:[],
goods_ids: '',
goods_outerflex: 'row',
goods_flex: 'row',
goods_num: 1,
is_show: ['title', 'price'],
img_fit: 'cover',
images_list:[
@ -175,8 +193,9 @@ const style_show_list = [
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }],// 风格5
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }],// 风格6
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }],// 风格7
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'row', title_text_gap: 20 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row', title_text_gap: 20 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row', title_text_gap: 20 }],// 风格8
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row', title_text_gap: 10 }],// 风格9
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'fill', outerflex: 'col', title_text_gap: 20 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'fill', outerflex: 'col', title_text_gap: 20 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'fill', outerflex: 'col', title_text_gap: 20 }],// 风格8
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 10 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 10 }],// 风格9
[], //风格10
]
const tabs_name = ref('content');
const state = reactive({
@ -224,7 +243,12 @@ const handleResize = () => {
const selected_active = ref(0);
// 切换风格
const style_click = (index: number) => {
form.value.data_magic_list = magic_list(index);
if (index !== 9) {
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';
@ -235,16 +259,31 @@ const magic_list = (index: number) => {
return cloneDeep(style_show_list[index]).map((item, map_index) => ({
...item,
actived_index: 0,
data_content: cloneDeep(data_content),
data_content: {
...cloneDeep(data_content),
heading_title: module_7_handle(index, map_index) ? '' : data_content.heading_title,
subtitle: module_7_handle(index, map_index) ? '' : data_content.subtitle,
goods_outerflex: item.outerflex,
goods_flex: item.flex,
goods_num: item.num,
},
data_style: {
...cloneDeep(data_style),
goods_price_size: show_padding(index, map_index) ? 12 : 18,
title_data_gap: item.title_text_gap,
goods_price_size: different_styles(index, map_index) ? 12 : 18,
chunk_padding: {
padding: show_padding(index, map_index) ? 10 : 0,
padding_top: show_padding(index, map_index) ? 10 : 20,
padding_bottom: show_padding(index, map_index) ? 10 : 20,
padding_left: show_padding(index, map_index) ? 10 : 15,
padding_right: show_padding(index, map_index) ? 10 : 15,
padding: module_7_handle(index, map_index) ? 0 : 0,
padding_top: module_7_handle(index, map_index) ? 0 : 20,
padding_bottom: module_7_handle(index, map_index) ? 0 : 20,
padding_left: module_7_handle(index, map_index) ? 0 : 15,
padding_right: module_7_handle(index, map_index) ? 0 : 15,
},
goods_chunk_padding: {
padding: module_7_handle(index, map_index) ? 10 : 0,
padding_top: module_7_handle(index, map_index) ? 10 : 0,
padding_bottom: module_7_handle(index, map_index) ? 10 : 0,
padding_left: module_7_handle(index, map_index) ? 10 : 0,
padding_right: module_7_handle(index, map_index) ? 10 : 0,
},
carouselKey: get_math(),
}
@ -263,15 +302,23 @@ const padding_handle = [
{ index: 5, index_index: [0, 1] },
{ index: 6, index_index: [0, 1, 2, 3] },
{ index: 7, index_index: [0, 1] },
{ index: 8, index_index: [1] },
{ index: 8, index_index: [1, 2, 3] },
]
const show_padding = (index:number, map_index:number) => {
const different_styles = (index:number, map_index:number) => {
const list = padding_handle.filter(item => item.index == index && item.index_index.includes(map_index))
if (list.length > 0 || (index == 7 && ![0, 1].includes(map_index))) {
if (list.length > 0) {
return true;
}
return false;
}
const module_7_handle = (index:number, map_index:number) => {
return index == 7 && ![0, 1].includes(map_index);
}
// 密度切换时情况数据
const density_change = () => {
form.value.data_magic_list = [];
}
//#endregion
const data_title = (item: any) => {
let title = `共有`;

4
src/components/model-img-magic/index.vue
View File

@ -86,7 +86,7 @@ interface CubeItem {
};
img: string;
}
const density = ref('4');
const density = computed(() => form.value?.magic_cube_density || 4);
//单元魔方宽度。
const cubeCellWidth = computed(() => div_width.value / parseInt(density.value));
//单元魔方高度。
@ -170,7 +170,7 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
object-fit: cover;
}
.image-slot img {
width: 6rem;
width: 4rem;
}
}
</style>

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

@ -42,7 +42,16 @@
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">展示设置</div>
<div class="mb-12 flex-row jc-sb align-c">
展示设置
<template v-if="form.style_actived === 11">
<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" />
<el-radio-button label="8X8" :value="8" />
</el-radio-group>
</template>
</div>
<el-form-item label-width="0" class="show-config">
<!-- 风格3 -->
<template v-if="form.style_actived == 2">
@ -74,7 +83,7 @@
</div>
</template>
<template v-else>
<magic-cube :key="form.style_actived" :list="form.img_magic_list" :style-actived="form.style_actived" :flag="form.style_actived == 11" :cube-width="cubeWidth" :cube-height="cubeHeight" :img-fit="form.img_fit" @selected_click="selected_click"></magic-cube>
<magic-cube :key="form.style_actived" :list="form.img_magic_list" :style-actived="form.style_actived" :flag="form.style_actived == 11" :magic-cube-density="form.magic_cube_density" :cube-width="cubeWidth" :cube-height="cubeHeight" :img-fit="form.img_fit" @selected_click="selected_click"></magic-cube>
</template>
</el-form-item>
</card-container>
@ -102,7 +111,6 @@ const props = defineProps({
},
});
const style_list = ['heng2', 'shu2', 'shu3', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2', 'a-1ge', 'a-4x4'];
const img_fit_10 = 'contain';
// 风格
const style_show_list = [
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, img: [], img_link: {} }, { start: {x: 1, y: 3},end: {x: 4, y: 4},img: [], img_link: {}}], // 风格1
@ -123,7 +131,6 @@ const cubeWidth = ref(400);
const cubeHeight = ref(400);
const style_width = computed(() => cubeWidth.value + 'px');
const style_height = computed(() => cubeHeight.value + 'px');
onMounted(() => {
handleResize();
window.addEventListener('resize', handleResize);
@ -154,6 +161,9 @@ const style_click = (index: number) => {
form.value.img_magic_list = cloneDeep(style_show_list[index]);
form.value.style_actived = index;
selected_active.value = 0;
if (index != 11) {
form.value.magic_cube_density = 4;
}
if (index === 10) {
if (window.innerWidth <= 1560) {
cubeWidth.value = 330;
@ -166,6 +176,9 @@ const style_click = (index: number) => {
handleResize();
}
}
const density_change = () => {
form.value.img_magic_list = [];
}
// 选中的点击事件
const selected_click = (index: number) => {
selected_active.value = index;

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

@ -8,6 +8,7 @@ interface data_magic {
}
interface defaultSearch {
content: {
magic_cube_density: number;
style_actived: number;
container_height: number;
data_magic_list: data_magic[];
@ -21,6 +22,8 @@ interface defaultSearch {
const defaultSearch: defaultSearch = {
content: {
// 数据密度 4 x 4 | 6 x 6 | 8 x 8
magic_cube_density: 4,
// 样式风格
style_actived: 0,
// 容器高度

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

@ -14,6 +14,7 @@ interface defaultSearch {
img_fit: string;
limit_size: string,
image_height: number;
magic_cube_density: number;
};
style: {
radius: number;
@ -53,6 +54,8 @@ const defaultSearch: defaultSearch = {
limit_size: '0',
// 图片高度
image_height: 100,
// 魔方密度
magic_cube_density: 4,
},
style: {
// 图片圆角