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

修改数据魔方的数据传输

v1.0.0
于肖磊 2024-08-13 18:43:12 +08:00
parent 14089eebc4
commit 150f33ebf7
4 changed files with 51 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,7 +12,7 @@
<div v-if="selected_active == index && props.flag" class="cube-del" @click.stop="on_selected_del(index)"> <div v-if="selected_active == index && props.flag" class="cube-del" @click.stop="on_selected_del(index)">
<icon name="close" color="f" size="8"></icon> <icon name="close" color="f" size="8"></icon>
</div> </div>
<template v-if="!isEmpty(item.img[0]) && props.type == 'img'"> <template v-if="item.img && !isEmpty(item.img[0] || '') && props.type == 'img'">
<image-empty v-model="item.img[0]"></image-empty> <image-empty v-model="item.img[0]"></image-empty>
</template> </template>
<template v-else> <template v-else>
@ -42,7 +42,7 @@ interface CubeItem {
x: number; x: number;
y: number; y: number;
}; };
img: uploadList[], img?: uploadList[],
img_list?: any, img_list?: any,
data_list?: any data_list?: any
} }

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

@ -18,7 +18,7 @@
<card-container v-if="form.data_type == 'img'" class="mb-8"> <card-container v-if="form.data_type == 'img'" class="mb-8">
<div class="mb-12">图片设置</div> <div class="mb-12">图片设置</div>
<div class="flex-col gap-20"> <div class="flex-col gap-20">
<div v-for="(item, index) in form.carousel_list" :key="index" class="card-background box-shadow-sm re"> <div v-for="(item, index) in form.img_list" :key="index" class="card-background box-shadow-sm re">
<div class="flex-col align-c jc-c gap-20 w"> <div class="flex-col align-c jc-c gap-20 w">
<div class="upload_style"> <div class="upload_style">
<upload v-model="item.carousel_img" :limit="1" size="100%"></upload> <upload v-model="item.carousel_img" :limit="1" size="100%"></upload>
@ -67,14 +67,16 @@ const state = reactive({
form: props.value form: props.value
}); });
const { form } = toRefs(state); const { form } = toRefs(state);
console.log(form.value);
const img_add = () => { const img_add = () => {
form.value.carousel_list.push({ form.value.img_list.push({
carousel_img: [], carousel_img: [],
carousel_link: {}, carousel_link: {},
}); });
} }
const img_remove = (index: number) => { const img_remove = (index: number) => {
form.value.carousel_list.splice(index, 1); form.value.img_list.splice(index, 1);
} }
const product_list_remove = (index: number) => { const product_list_remove = (index: number) => {
form.value.product_list.splice(index, 1); form.value.product_list.splice(index, 1);

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

@ -15,9 +15,9 @@
<div class="mb-12">展示设置</div> <div class="mb-12">展示设置</div>
<el-form-item label-width="0" class="show-config"> <el-form-item label-width="0" class="show-config">
<!-- 风格9 --> <!-- 风格9 -->
<template v-if="form.style_actived == 8"> <template v-if="form.style_actived == 7">
<div class="flex-row align-c jc-c gap-2 style-size flex-wrap"> <div class="flex-row align-c jc-c gap-2 style-size flex-wrap">
<div v-for="(item, index) in form.img_magic_list" :key="index" :class="['bg-f5', {'cube-selected-active': selected_active == index, 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index)}]" @click="selected_click(index)"> <div v-for="(item, index) in form.data_magic_list" :key="index" :class="['bg-f5', {'cube-selected-active': selected_active == index, 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index)}]" @click="selected_click(index)">
<template v-if="!isEmpty(item.img[0])"> <template v-if="!isEmpty(item.img[0])">
<image-empty v-model="item.img[0]"></image-empty> <image-empty v-model="item.img[0]"></image-empty>
</template> </template>
@ -31,16 +31,17 @@
</div> </div>
</template> </template>
<template v-else> <template v-else>
<magic-cube :key="form.style_actived" :list="form.img_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="false" :cube-width="cubeWidth" type="data" :cube-height="cubeHeight" @selected_click="selected_click"></magic-cube>
</template> </template>
</el-form-item> </el-form-item>
</card-container> </card-container>
<el-tabs v-model="tabs_name" class="content-tabs"> <el-tabs v-model="tabs_name" class="content-tabs">
{{ form.data_magic_list[selected_active] }}
<el-tab-pane label="内容设置" name="content"> <el-tab-pane label="内容设置" name="content">
<tabs-content :value="form[selected_active]"></tabs-content> <tabs-content :value="form.data_magic_list[selected_active].data_content"></tabs-content>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="样式设置" name="styles"> <el-tab-pane label="样式设置" name="styles">
<tabs-styles :value="form[selected_active].style"></tabs-styles> <tabs-styles :value="form.data_magic_list[selected_active].data_style"></tabs-styles>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-form> </el-form>
@ -85,19 +86,29 @@ const data_style = {
color: '#DDDDDD', color: '#DDDDDD',
} }
const data_content = {
data_type: 'commodity',
product_list:[],
img_list:[]
}
// 风格 // 风格
const style_show_list = [ const style_show_list = [
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }], // 风格1 [{ 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}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }], // 风格2 [{ 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}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格3 [{ 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}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格4 [{ 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}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格5 [{ 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}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格6 [{ 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}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格7 [{ 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}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 3, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 4, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 4, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格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} }, { start: {x: 4, y: 3},end: {x: 4, y: 4} }],// 风格8
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 3, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 4, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格9 [{ 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
] ]
const tabs_name = ref('content'); const tabs_name = ref('content');
const state = reactive({
form: props.value
});
const { form } = toRefs(state);
//#region 容器大小变更 //#region 容器大小变更
const cubeWidth = ref(400); const cubeWidth = ref(400);
const cubeHeight = ref(400); const cubeHeight = ref(400);
@ -113,26 +124,36 @@ function handleResize() {
cubeHeight.value = 390; cubeHeight.value = 390;
} }
} }
onBeforeMount(() => {
if (isEmpty(form.value.data_magic_list)) {
form.value.data_magic_list = magic_list(0);
}
})
onMounted(() => { onMounted(() => {
handleResize(); handleResize();
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', handleResize); window.removeEventListener('resize', handleResize);
}); });
//#endregion //#endregion
const selected_active = ref(0); const selected_active = ref(0);
const state = reactive({
form: props.value
});
const { form } = toRefs(state);
const style_click = (index: number) => { const style_click = (index: number) => {
form.value.img_magic_list = cloneDeep(style_show_list[index]); form.value.data_magic_list = cloneDeep(style_show_list[index]);
form.value.style_actived = index; form.value.style_actived = index;
selected_active.value = 0; selected_active.value = 0;
} }
const magic_list = (index: number) => {
return cloneDeep(style_show_list[index]).map((item) => ({
...item,
data_content: cloneDeep(data_content),
data_style: cloneDeep(data_style)
}));
}
// 选中的点击事件 // 选中的点击事件
const selected_click = (index: number) => { const selected_click = (index: number) => {
selected_active.value = index; selected_active.value = index;

5
src/layout/components/main/default/data-magic.ts
View File

@ -4,9 +4,8 @@ import { tr } from "element-plus/es/locale";
interface data_magic { interface data_magic {
start: object; start: object;
end: object; end: object;
data_type: string; img: uploadList[];
commodity_list: Array<string>, data_content: object;
img_list: Array<string>;
data_style: object; data_style: object;
} }
interface defaultSearch { interface defaultSearch {