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

修改数据魔方的数据显示

v1.0.0
于肖磊 2024-08-13 17:42:32 +08:00
parent 9171e62315
commit 14089eebc4
6 changed files with 101 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/carousel-indicator/index.vue
View File

@ -48,8 +48,6 @@
import { pick } from 'lodash';
// interface indicator {
// is_show: boolean;
// is_roll: boolean;
// interval_time: number;
// indicator_style: string;
// indicator_location: string;
// indicator_size: number;

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

@ -1,19 +1,21 @@
<template>
<card-container class="mb-8">
<el-form-item label="数据类型">
<el-radio-group v-model="form.display_location" class="ml-4">
<el-radio value="img">图片</el-radio>
<el-radio-group v-model="form.data_type" class="ml-4">
<el-radio value="commodity">商品</el-radio>
<el-radio value="img">图片</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="主标题">
<el-input placeholder="请输入主标题"></el-input>
</el-form-item>
<el-form-item label="副标题">
<el-input placeholder="请输入副标题"></el-input>
</el-form-item>
<template v-if="form.data_type === 'commodity'">
<el-form-item label="主标题">
<el-input placeholder="请输入主标题"></el-input>
</el-form-item>
<el-form-item label="副标题">
<el-input placeholder="请输入副标题"></el-input>
</el-form-item>
</template>
</card-container>
<card-container v-if="form.display_location == 'img'" class="mb-8">
<card-container v-if="form.data_type == 'img'" class="mb-8">
<div class="mb-12">图片设置</div>
<div class="flex-col gap-20">
<div v-for="(item, index) in form.carousel_list" :key="index" class="card-background box-shadow-sm re">
@ -48,7 +50,7 @@
</template>
</drag>
<el-button class="mtb-20 w" @click="product_list_add">+添加</el-button>
</card-container>
</template>
<script setup lang="ts">

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

@ -3,16 +3,52 @@
<el-form-item label="底部背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.user_id_color_list" :type="form.user_id_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<el-radio-group v-model="form.background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>
</div>
<upload v-model="form.background_img_url" :limit="1"></upload>
</div>
</el-form-item>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" size="large" />
</el-form-item>
<el-form-item label="轮播方向">
<el-radio-group v-model="form.rotation_direction" class="ml-4">
<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" :max="100"></slider>
</el-form-item>
<el-form-item label="主标题">
<el-input placeholder="请输入主标题"></el-input>
<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="副标题">
<el-input placeholder="请输入副标题"></el-input>
<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>
</card-container>
<card-container class="mb-8">
<carousel-indicator :value="form"></carousel-indicator>
</card-container>
</template>
<script setup lang="ts">
const props = defineProps({

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

@ -4,13 +4,13 @@
<!-- 风格9 -->
<template v-if="form.style_actived == 8">
<div class="flex-row align-c jc-c style-size flex-wrap">
<div v-for="(item, index) in form.img_magic_list" :key="index" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
<div v-for="(item, index) in form.data_magic_list" :key="index" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
<image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
</div>
</div>
</template>
<template v-else>
<div v-for="(item, index) in form.img_magic_list" :key="index" class="cube-selected img-spacing-border" :style="selected_style(item)">
<div v-for="(item, index) in form.data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="selected_style(item)">
<image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
</div>
</template>

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

@ -37,10 +37,10 @@
</card-container>
<el-tabs v-model="tabs_name" class="content-tabs">
<el-tab-pane label="内容设置" name="content">
<tabs-content :value="form"></tabs-content>
<tabs-content :value="form[selected_active]"></tabs-content>
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles">
<tabs-styles :value="form"></tabs-styles>
<tabs-styles :value="form[selected_active].style"></tabs-styles>
</el-tab-pane>
</el-tabs>
</el-form>
@ -56,17 +56,46 @@ const props = defineProps({
});
const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2'];
const data_style = {
color_list: ['#FFD9C3', '#FFECE2', '#FFFFFF'],
direction: '90deg',
background_img_style: 2,
background_img_url: [],
is_roll: true,
rotation_direction: 'horizontal',
interval_time: 2,
heading_color: '#000',
heading_typeface: 'normal',
heading_size: 12,
subtitle_color: '#000',
subtitle_typeface: 'normal',
subtitle_size: 12,
is_show: true,
indicator_style: 'dot',
indicator_location: 'center',
indicator_size: 5,
indicator_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
actived_color: '#2A94FF',
color: '#DDDDDD',
}
// 风格
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: 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: 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: 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: 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: 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}, 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: 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}, 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: 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: 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: 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: 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: 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: 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}, 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: 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}, 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
]
const tabs_name = ref('content');
//#region 容器大小变更

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

@ -1,15 +1,18 @@
import { get_math } from "@/utils";
import defaultCommon from "./index";
interface img_magic {
import { tr } from "element-plus/es/locale";
interface data_magic {
start: object;
end: object;
img: uploadList[],
img_link: object;
data_type: string;
commodity_list: Array<string>,
img_list: Array<string>;
data_style: object;
}
interface defaultSearch {
content: {
style_actived: number;
img_magic_list: img_magic[];
data_magic_list: data_magic[];
};
style: {
img_radius: object
@ -22,20 +25,7 @@ interface defaultSearch {
const defaultSearch: defaultSearch = {
content: {
style_actived: 0,
img_magic_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: {}
}
],
data_magic_list: [],
},
style: {
img_radius: {