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

数据魔方商品基本布局添加

v1.0.0
于肖磊 2024-08-15 14:50:48 +08:00
parent 1f5dbf928b
commit 97a996551d
4 changed files with 77 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@
<el-radio value="img">图片</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.data_type === 'commodity'">
<template v-if="form.data_type === 'commodity' && isShowTitle">
<el-form-item label="主标题">
<el-input v-model="form.heading_title" placeholder="请输入主标题"></el-input>
</el-form-item>
@ -60,6 +60,10 @@ const props = defineProps({
type: Object,
default: () => {},
},
isShowTitle: {
type: Boolean,
default: true,
}
});
const form = ref(props.value);

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

@ -33,18 +33,20 @@
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :max="100"></slider>
</el-form-item>
<el-form-item label="主标题">
<div class="flex-col gap-10 w">
<color-picker v-model="form.heading_color" default-color="#000000"></color-picker>
<text-size-type v-model:typeface="form.heading_typeface" v-model:size="form.heading_size"></text-size-type>
</div>
</el-form-item>
<el-form-item label="副标题">
<div class="flex-col gap-10 w">
<color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
<text-size-type v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size"></text-size-type>
</div>
</el-form-item>
<template v-if="tabs_content.data_type === 'commodity' && isShowTitle">
<el-form-item label="主标题">
<div class="flex-col gap-10 w">
<color-picker v-model="form.heading_color" default-color="#000000"></color-picker>
<text-size-type v-model:typeface="form.heading_typeface" v-model:size="form.heading_size"></text-size-type>
</div>
</el-form-item>
<el-form-item label="副标题">
<div class="flex-col gap-10 w">
<color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
<text-size-type v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size"></text-size-type>
</div>
</el-form-item>
</template>
</card-container>
<card-container class="mb-8">
<carousel-indicator :key="form.carouselKey" :value="form"></carousel-indicator>
@ -55,10 +57,19 @@ const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
content: {
type: Object,
default: () => ({}),
},
isShowTitle: {
type: Boolean,
default: true,
}
});
const form = ref(props.value);
const tabs_content = ref(props.content);
const mult_color_picker_event = (arry: string[], type: number) => {
form.value.color_list = arry;
@ -67,6 +78,7 @@ const mult_color_picker_event = (arry: string[], type: number) => {
watchEffect(() => {
form.value = props.value;
tabs_content.value = props.content;
})
</script>
<style lang="scss" scoped>

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

@ -14,7 +14,7 @@
<div class="mt-20 w h">
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
<el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
<a>13666</a>
<a>item1</a>
</el-carousel-item>
</el-carousel>
</div>
@ -34,7 +34,7 @@
</div>
</template>
<template v-else>
<div v-for="(item2, index2) in item.data_content.list" :key="index2" :style="`${ item.data_style.indicator_styles }; ${ style_actived_color(item, index2)}`" class="dot-item" />
<div v-for="(item3, index3) in item.data_content.list" :key="index3" :style="`${ item.data_style.indicator_styles }; ${ style_actived_color(item, index3)}`" class="dot-item" />
</template>
</div>
</div>
@ -51,7 +51,7 @@
<div class="w h">
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
<el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
<a>13666</a>
<product-list-show :outerflex="item.outerflex" :flex="item.flex" :value="item1.split_list" :content-img-radius="content_img_radius"></product-list-show>
</el-carousel-item>
</el-carousel>
</div>
@ -71,7 +71,7 @@
</div>
</template>
<template v-else>
<div v-for="(item2, index2) in item.data_content.list" :key="index2" :style="`${ item.data_style.indicator_styles }; ${ style_actived_color(item, index2)}`" class="dot-item" />
<div v-for="(item3, index3) in item.data_content.list" :key="index3" :style="`${ item.data_style.indicator_styles }; ${ style_actived_color(item, index3)}`" class="dot-item" />
</template>
</div>
</div>
@ -125,6 +125,9 @@ interface data_magic {
x: number;
y: number;
};
num: number;
flex: string;
outerflex: string;
heading_title?: string;
subtitle?: string;
actived_index: number;
@ -176,7 +179,11 @@ watch(props.value.content, (val) => {
const { is_roll, rotation_direction, interval_time } = data_style;
const { product_list, img_list } = data_content;
data_content.list = data_content.data_type == 'commodity' ? data_content.product_list : data_content.img_list;
if (data_content.data_type == 'commodity') {
data_content.list = commodity_list(data_content.product_list, item.num);
} else {
data_content.list = data_content.img_list;
}
const new_data = {
data_type: data_content.data_type,
interval_time: interval_time,
@ -242,6 +249,28 @@ const trends_config = (style: any, key: string) => {
}
const text_style = (typeface: string, size: number, color: string) => {
return `font-weight:${ typeface }; font-size: ${ size }px; color: ${ color };`;
}
/*
** 组装产品的数据
** @param {Array} list 商品列表
** @param {Number} num 显示数量
** @return {Array}
*/
const commodity_list = (list: any[], num: number) => {
if (list.length > 0) {
// 深拷贝一下，确保不会出现问题
const commodity_list = cloneDeep(list);
// 存储数据显示
let nav_list = [];
// 拆分的数量
const split_num = Math.ceil(commodity_list.length / num);
for (let i = 0; i < split_num; i++) {
nav_list.push({ split_list: commodity_list.slice(i * num, (i + 1) * num) });
}
return nav_list;
} else {
return [];
}
}
// 公共样式
const style_container = computed(() => common_styles_computer(new_style.value.common_style));

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

@ -3,7 +3,7 @@
<el-form :model="form" label-width="80">
<card-container class="mb-8">
<div class="mb-12">展示风格</div>
<el-form-item label="选择风格">
<el-form-item label="选择风格" label-width="60">
<div class="flex align-c flex-wrap gap-10">
<div v-for="(item, index) in style_list" :key="index" :class="['flex-item', {'flex-item-actived': form.style_actived === index }]" @click="style_click(index)">
<icon :name="item" :color="`${ form.style_actived === index ? '#E1EEF9' : '#EDEDED'}`" size="48"></icon>
@ -33,10 +33,10 @@
</card-container>
<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"></tabs-content>
<tabs-content :value="form.data_magic_list[selected_active].data_content" :isShowTitle="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"></tabs-styles>
<tabs-styles :value="form.data_magic_list[selected_active].data_style" :content="form.data_magic_list[selected_active].data_content" :isShowTitle="is_show_title"></tabs-styles>
</el-tab-pane>
</el-tabs>
</el-form>
@ -98,15 +98,15 @@ const data_content = {
// 不同风格的数据
const style_show_list = [
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3}, end: {x: 4, y: 4} }], // 风格1
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 4} }], // 风格2
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3}, end: {x: 4, y: 4} }],// 风格3
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3}, end: {x: 2, y: 4} }, { start: {x: 3, y: 3}, end: {x: 4, y: 4} }],// 风格4
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 3, y: 3}, end: {x: 4, y: 4} }],// 风格5
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 1, y: 3}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 4} }],// 风格6
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3}, end: {x: 2, y: 4} }, { start: {x: 3, y: 3}, end: {x: 4, y: 4} }],// 风格7
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 3, y: 3}, end: {x: 3, y: 4} }, { start: {x: 4, y: 3}, end: {x: 4, y: 4} }, { start: {x: 4, y: 3}, end: {x: 4, y: 4} }],// 风格8
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 3, y: 3}, end: {x: 3, y: 4} }, { start: {x: 4, y: 3}, end: {x: 4, y: 4} }],// 风格9
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row'}], // 风格1
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col' }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col' }], // 风格2
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row' }],// 风格3
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row' }],// 风格4
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row' }],// 风格5
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col' }],// 风格6
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row' }],// 风格7
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'row' }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row' }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row' }],// 风格8
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'row' }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row' }],// 风格9
]
const tabs_name = ref('content');
const state = reactive({
@ -183,6 +183,8 @@ const data_title = (item: any) => {
}
return title;
};
// 除了第8个风格下的后3个不显示标题，其他的都显示
const is_show_title = computed(() => !(form.value.style_actived == 7 && ![0, 1].includes(selected_active.value)));
</script>
<style lang="scss" scoped>
.card.mb-8 {