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

修改数据魔方的显示逻辑

v1.1.0
于肖磊 2024-11-14 11:34:13 +08:00
parent 6be8e49556
commit 9802d91edf
9 changed files with 214 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,26 +1,24 @@
<template>
<template v-if="data_source_content_list.length > 0">
<div v-for="(item1, index1) in data_source_content_list" :key="index1">
<div :style="style_container">
<div class="w h" :style="style_img_container">
<div class="w h re custom-other">
<div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, div_width), 'height': percentage_count(item.com_data.com_height, form.height), 'z-index': (form.custom_list.length - 1) - index}">
<template v-if="item.key == 'text'">
<model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-panel>
</template>
</div>
<div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="style_container">
<div class="w h" :style="style_img_container">
<div class="w h re custom-other">
<div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, div_width), 'height': percentage_count(item.com_data.com_height, form.height), 'z-index': (form.custom_list.length - 1) - index}">
<template v-if="item.key == 'text'">
<model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-panel>
</template>
</div>
</div>
</div>
@ -32,19 +30,19 @@
<div class="w h re custom-other">
<div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, div_width), 'height': percentage_count(item.com_data.com_height, form.height), 'z-index': (form.custom_list.length - 1) - index}">
<template v-if="item.key == 'text'">
<model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content?.data_list[0] || {}" :source-type="form?.data_source || ''" :is-percentage="true"></model-text>
<model-text :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content?.data_list[0] || {}" :source-type="form?.data_source || ''" :is-percentage="true"></model-image>
<model-image :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content?.data_list[0] || {}" :source-type="form?.data_source || ''" :is-percentage="true"></model-lines>
<model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content?.data_list[0] || {}" :source-type="form?.data_source || ''" :is-percentage="true"></model-icon>
<model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content?.data_list[0] || {}" :source-type="form?.data_source || ''" :is-percentage="true"></model-panel>
<model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-panel>
</template>
</div>
</div>

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

@ -192,6 +192,8 @@ const accomplish = () => {
const url_value_dialog_visible = ref(false);
const source_list = {
goods: {
// 存放手动输入的id
data_ids: [],
// 商品类型
data_type: '0',
// 商品分类
@ -206,6 +208,8 @@ const source_list = {
order_by_rule: '0',
},
article: {
// 存放手动输入的id
data_ids: [],
data_type: '0',
number: 4,
order_by_type: '0',
@ -216,6 +220,8 @@ const source_list = {
category_ids: [],
},
brand: {
// 存放手动输入的id
data_ids: [],
// 商品类型
data_type: '0',
// 商品分类
@ -412,15 +418,18 @@ const get_brand = () => {
console.log('品牌分类数据');
form.data_source_content.data_auto_list = [];
}
watch(() => form.data_source_content_value, (new_val, old_val) => {
if (form.data_source == 'goods') {
get_products();
} else if (form.data_source == 'article') {
get_article();
} else if (form.data_source == 'brand') {
get_brand();
watch(() => form.data_source_content_value, (new_val) => {
// 数据发生变化时，如果是自动获取数据，则调用接口获取数据
if (new_val.data_type != '0') {
if (form.data_source == 'goods') {
get_products();
} else if (form.data_source == 'article') {
get_article();
} else if (form.data_source == 'brand') {
get_brand();
}
}
},{ immediate: true, deep: true });
},{ deep: true });
//#endregion
</script>
<style lang="scss" scoped>

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

@ -1,6 +1,6 @@
<template>
<div class="w h oh" :style="props.type === 'img' ? '' : style_container(form.data_style)">
<div class="w h" :style="props.type === 'img' ? '' : style_img_container(form.data_style)">
<div class="w h oh" :style="props.type === 'img' ? '' : style_container">
<div class="w h" :style="props.type === 'img' ? '' : style_img_container">
<el-carousel :key="form.data_style.carouselKey" indicator-position="none" :interval="form.data_style.interval_time * 1000" arrow="never" :direction="form.data_style.rotation_direction" :autoplay="form.data_style.is_roll == '1' ? true : false" @change="carousel_change">
<el-carousel-item v-for="(item1, index1) in form.data_content.list" :key="index1">
<template v-if="props.type === 'img'">
@ -41,31 +41,27 @@ interface new_style {
// 用于样式显示
const style_container = computed(() => {
return (val: new_style) => {
if (!isEmpty(val)) {
const { data_color_list = [], data_direction = '180deg', data_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }} = val;
const data = {
color_list: data_color_list,
direction: data_direction,
}
return gradient_computer(data) + radius_computer(data_radius);
} else {
return '';
if (!isEmpty(form.value.data_style)) {
const { data_color_list = [], data_direction = '180deg', data_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }} = form.value.data_style;
const data = {
color_list: data_color_list,
direction: data_direction,
}
return gradient_computer(data) + radius_computer(data_radius);
} else {
return '';
}
});
const style_img_container = computed(() => {
return (val: new_style) => {
if (!isEmpty(val)) {
const { data_background_img = [], data_background_img_style = '2', data_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = val;
const data = {
background_img: data_background_img,
background_img_style: data_background_img_style,
}
return padding_computer(data_chunk_padding) + background_computer(data);
} else {
return '';
if (!isEmpty(form.value.data_style)) {
const { data_background_img = [], data_background_img_style = '2', data_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = form.value.data_style;
const data = {
background_img: data_background_img,
background_img_style: data_background_img_style,
}
return padding_computer(data_chunk_padding) + background_computer(data);
} else {
return '';
}
});

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

@ -1,28 +1,58 @@
<template>
<div class="w h oh" :style="style_container">
<div class="w h re custom-other oh">
<div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
<template v-if="item.key == 'text'">
<model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-panel>
</template>
<template v-if="data_source_content_list.length > 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">
<div class="w h re custom-other oh">
<div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
<template v-if="item.key == 'text'">
<model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-panel>
</template>
</div>
</div>
</div>
</div>
</div>
</template>
<template v-else>
<div class="oh" :style="style_container">
<div class="w h oh" :style="style_img_container">
<div class="w h re custom-other oh">
<div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
<template v-if="item.key == 'text'">
<model-text :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-panel>
</template>
</div>
</div>
</div>
</div>
</template>
</template>
<script setup lang="ts">
import { padding_computer } from '@/utils';
import { background_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
import { isEmpty } from "lodash";
const props = defineProps({
value: {
@ -51,20 +81,69 @@ const scale = ref(1);
const percentage_count = (val: number) => {
return val * scale.value + 'px';
};
// 公共样式
const style_container = computed(() => padding_computer(new_style.value.chunk_padding));
// 数据来源的内容
let data_source_content_list = computed(() => {
if (['goods', 'article', 'brand'].includes(form.value.data_source)) {
if (form.value.data_source_content_value.data_type == '0') {
return form.value.data_source_content.data_list;
} else {
return form.value.data_source_content.data_auto_list;
}
} else {
return form.value.data_source_content.data_list;
}
})
interface new_style {
data_color_list: color_list[];
data_direction: string;
data_radius: radiusStyle;
data_chunk_margin: marginStyle;
data_chunk_padding: paddingStyle;
data_background_img: uploadList[];
data_background_img_style: string;
}
// 用于样式显示
const style_container = computed(() => {
if (!isEmpty(new_style.value)) {
const { data_color_list = [], data_direction = '180deg', data_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }, data_chunk_margin = { margin: 0, margin_top: 0, margin_bottom: 0, margin_left: 0, margin_right: 0 }} = new_style.value;
const data = {
color_list: data_color_list,
direction: data_direction,
}
return gradient_computer(data) + radius_computer(data_radius) + margin_computer(data_chunk_margin);
} else {
return '';
}
});
const style_img_container = computed(() => {
if (!isEmpty(new_style.value)) {
const { data_background_img = [], data_background_img_style = '2', data_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = new_style.value;
const data = {
background_img: data_background_img,
background_img_style: data_background_img_style,
}
return padding_computer(data_chunk_padding) + background_computer(data);
} else {
return '';
}
});
const custom_height = computed(() => form.value.height * scale.value + 'px');
watchEffect(() => {
// 重新赋值
form.value = props.value.data_content;
new_style.value = props.value.data_style;
const { padding_left, padding_right } = new_style.value.chunk_padding;
const { margin_left, margin_right } = new_style.value.data_chunk_margin;
// 当前容器的宽度 减去 左右两边的padding值 再减去 数据间距的一半 再除以 容器的宽度 得到比例 再乘以数据魔方的比例
const width = form.value.width - padding_left - padding_right - (props.dataSpacing / 2);
const width = form.value.width - padding_left - padding_right - margin_left - margin_right - (props.dataSpacing / 2);
scale.value = (width / form.value.width) * props.magicScale;
})
</script>
<style lang="scss" scoped>
.custom-other {
height: v-bind(custom_height);
}
.main-content {
position: absolute;
overflow: hidden;

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

@ -27,7 +27,7 @@
</el-form-item>
</template>
</template>
<el-form-item label="内间距">
<el-form-item v-if="tabs_content.data_type != 'custom'" label="内间距">
<padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
</el-form-item>
<template v-if="tabs_content.data_type === 'goods'">
@ -38,7 +38,7 @@
<slider v-model="form.title_data_gap" :min="0" :max="100"></slider>
</el-form-item>
</template>
<el-form-item label="图片圆角">
<el-form-item v-if="tabs_content.data_type != 'custom'" :label="tabs_content.data_type != 'video' ? '图片圆角' : '视频圆角'">
<radius :key="form.carouselKey" :value="form.img_radius" @update:value="img_radius_change"></radius>
</el-form-item>
</card-container>
@ -64,7 +64,7 @@
</el-form-item>
</card-container>
</template>
<template v-if="tabs_content.data_type === 'goods'">
<template v-if="['goods', 'custom'].includes(tabs_content.data_type)">
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">数据样式</div>
@ -79,13 +79,16 @@
<upload v-model="form.data_background_img" :limit="1"></upload>
</div>
</el-form-item>
<el-form-item v-if="tabs_content.data_type == 'custom'" label="外间距">
<margin :key="form.carouselKey" :value="form.data_chunk_margin" @update:value="data_chunk_margin_change"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :key="form.carouselKey" :value="form.data_chunk_padding" @update:value="data_chunk_padding_change"></padding>
</el-form-item>
<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="数据间距">
<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>
</card-container>
@ -169,6 +172,10 @@ const data_mult_color_picker_event = (arry: string[], type: number) => {
const data_chunk_padding_change = (padding: paddingStyle) => {
form.value.data_chunk_padding = Object.assign(form.value.data_chunk_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
};
const data_chunk_margin_change = (margin: marginStyle) => {
form.value.data_chunk_margin = Object.assign(form.value.data_chunk_margin, pick(margin, ['margin', 'margin_top', 'margin_bottom', 'margin_left', 'margin_right']));
};
// 内容圆角
const data_radius_change = (radius: radiusStyle) => {
const data = !isEmpty(form.value.data_radius) ? form.value.data_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 };

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

@ -13,7 +13,7 @@
</template>
<script setup lang="ts">
import { commonStore } from '@/store';
import { padding_computer } from '@/utils';
import { padding_computer, radius_computer } from '@/utils';
const common_store = commonStore();
/**
* @description: 视频 （渲染）
@ -46,7 +46,7 @@ const video = computed(() => {
}
});
// 公共样式
const style_container = computed(() => padding_computer(props.dataStyle.chunk_padding));
const style_container = computed(() => padding_computer(props.dataStyle.chunk_padding) + radius_computer(props.value.img_radius));
</script>
<style lang="scss" scoped>
video {

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

@ -134,6 +134,13 @@ const data_style = {
data_direction: '180deg',
data_background_img_style: '2',
data_background_img: [],
data_chunk_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
data_chunk_padding: {
padding: 0,
padding_top: 0,
@ -194,10 +201,18 @@ const data_content = {
// 图片key
img_key: '',
// 存放数据内容的id
data_source_content_value: '',
data_source_content_value: {
// 存放手动输入的id
data_ids: [],
},
// 数据源内容
data_source_content: {},
// 数据源
data_source_content: {
// 手动输入
data_list: [],
// 自动
data_auto_list: [],
},
// 数据源类型 商品(goods) 文章(article) 品牌(brand) 用户信息(user-info)
data_source:'',
// 自定义内容列表
custom_list: [],

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

@ -1,15 +1,18 @@
import defaultCommon from "./index";
interface content {
data_ids: Array<string>;
data_list: Array<object>;
data_auto_list: Array<object>;
}
interface content_value {
data_ids: Array<string>;
}
interface defaultSearch {
content: {
height: number;
img_key: string;
data_source: string;
data_source_content_value: string | object;
data_source_content_value: content_value;
data_source_content: content;
custom_list: string[];
};
@ -24,11 +27,12 @@ const defaultSearch: defaultSearch = {
// 图片key
img_key: '',
// 存放数据内容的id
data_source_content_value: '',
// 数据源内容
data_source_content: {
data_source_content_value: {
// 存放手动输入的id
data_ids: [],
},
// 数据源内容
data_source_content: {
// 手动输入
data_list: [],
// 自动

16
src/views/layout/index.vue
View File

@ -305,12 +305,22 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
data_id: item3.data.id,
};
});
item1.data_content.data_source_content_value = item1.data_content.data_source_content.id;
item1.data_content.data_source_content = {};
// 数据改造,存放手动的id
item1.data_content.data_source_content_value.data_ids = item1.data_content.data_source_content.data_list.map((item4: any) => item4.data.id).join(',') || '';
// 自动数据清空
item1.data_content.data_source_content.data_auto_list = [];
// 数据改造,存放手动的清除里边的data
item1.data_content.data_source_content.data_list = item1.data_content.data_source_content.data_list.map((item5: any) => {
return {
...item5,
data: [],
data_id: item5.data.id,
};
});
});
} else if (new_array_5.includes(item.key)) {
// 数据改造,存放手动的id
item.com_data.content.data_source_content.data_ids = item.com_data.content.data_source_content.data_list.map((item: any) => item.data.id).join(',') || '';
item.com_data.content.data_source_content_value.data_ids = item.com_data.content.data_source_content.data_list.map((item: any) => item.data.id).join(',') || '';
// 自动数据清空
item.com_data.content.data_source_content.data_auto_list = [];
// 数据改造,存放手动的清除里边的data