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

修改数据魔方显示

v1.0.0
于肖磊 2024-08-13 16:18:39 +08:00
parent 463874a35a
commit 97f8593da3
10 changed files with 105 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,12 +3,6 @@
<el-form-item label="是否显示">
<el-switch v-model="form.is_show" size="large" />
</el-form-item>
<el-form-item label="是否滚动">
<el-switch v-model="form.is_roll" size="large" />
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :max="100"></slider>
</el-form-item>
<template v-if="form.is_show">
<el-form-item label="指示器样式">
<el-radio-group v-model="form.indicator_style" is-button>
@ -41,8 +35,8 @@
</el-form-item>
<el-form-item label="指示器色值">
<div class="flex-col gap-20">
<color-picker v-model="form.actived_color" default-color="#2A94FF" @update:value="color_picker_change($event, 'actived_color')"></color-picker>
<color-picker v-model="form.color" default-color="#DDDDDD" @update:value="color_picker_change($event, 'color')"></color-picker>
<div class="flex-row gap-20"><span class="size-12 cr-9">选中样式</span><color-picker v-model="form.actived_color" default-color="#2A94FF" @update:value="color_picker_change($event, 'actived_color')"></color-picker></div>
<div class="flex-row gap-20"><span class="size-12 cr-9">常规样式</span><color-picker v-model="form.color" default-color="#DDDDDD" @update:value="color_picker_change($event, 'color')"></color-picker></div>
</div>
</el-form-item>
<el-form-item v-if="form.indicator_style != 'num'" label="指示器圆角">

15
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)">
<icon name="close" color="f" size="8"></icon>
</div>
<template v-if="!isEmpty(item.img[0])">
<template v-if="!isEmpty(item.img[0]) && props.type == 'img'">
<image-empty v-model="item.img[0]"></image-empty>
</template>
<template v-else>
@ -21,6 +21,9 @@
x
{{ Math.round((750 / densityNum) * (item.end.x - item.start.x + 1)) }}
像素
<template v-if="props.type == 'data'">
<div class="mt-12">共有3个商品</div>
</template>
</div>
</template>
</div>
@ -39,18 +42,22 @@ interface CubeItem {
x: number;
y: number;
};
img: uploadList[]
img: uploadList[],
img_list?: any,
data_list?: any
}
interface Props {
flag: boolean;
list: CubeItem[];
type: string;
cubeWidth: number;
cubeHeight: number;
}
const props = withDefaults(defineProps<Props>(), {
list: () => [],
flag: false,
type: 'img',
cubeWidth: 390,
cubeHeight: 390,
});
@ -203,6 +210,10 @@ const selected_click = (index: number) => {
selected_active.value = index;
emits('selected_click', index);
};
const tips = () => {
console.log(selectedList.value[selected_active.value].img_list);
console.log(selectedList.value[selected_active.value].data_list);
};
</script>
<style lang="scss" scoped>
.decorate-cube {

15
src/components/model-carousel/model-carousel-styles.vue
View File

@ -7,6 +7,15 @@
<radius :value="form" @update:value="radius_change"></radius>
</el-form-item>
</card-container>
<card-container class="mb-8">
<div class="mb-12">轮播设置</div>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" size="large" />
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :max="100"></slider>
</el-form-item>
</card-container>
<card-container class="mb-8">
<carousel-indicator :value="form"></carousel-indicator>
</card-container>
@ -49,7 +58,9 @@ const common_styles_update = (val: Object) => {
};
</script>
<style lang="scss" scoped>
.auxiliary-line {
width: 100%;
.card.mb-8 {
.el-form-item:last-child {
margin-bottom: 0;
}
}
</style>

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

@ -1,16 +1,8 @@
<template>
<div ref="container" class="img-magic" :style="style_container">
<div class="w h re outer-style">
<!-- 风格3 -->
<template v-if="form.style_actived == 2">
<div class="flex-row align-c jc-c style-size">
<div v-for="(item, index) in form.img_magic_list" :key="index" class="three img-spacing-border">
<image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
</div>
</div>
</template>
<!-- 风格9 -->
<template v-else-if="form.style_actived == 8">
<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) }]">
<image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>

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

@ -14,21 +14,8 @@
<card-container class="mb-8">
<div class="mb-12">展示设置</div>
<el-form-item label-width="0" class="show-config">
<!-- 风格3 -->
<template v-if="form.style_actived == 2">
<div class="flex-row align-c jc-c gap-2 style-size">
<div v-for="(item, index) in form.img_magic_list" :key="index" :class="['three bg-f5', {'cube-selected-active': selected_active == index}]" @click="selected_click(index)">
<template v-if="!isEmpty(item.img[0])">
<image-empty v-model="item.img[0]"></image-empty>
</template>
<template v-else>
<div class="cube-selected-text">250 x 750 像素</div>
</template>
</div>
</div>
</template>
<!-- 风格9 -->
<template v-else-if="form.style_actived == 8">
<template v-if="form.style_actived == 8">
<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)">
<template v-if="!isEmpty(item.img[0])">
@ -44,21 +31,18 @@
</div>
</template>
<template v-else>
<magic-cube :key="form.style_actived" :list="form.img_magic_list" :flag="form.style_actived == 11" :cube-width="cubeWidth" :cube-height="cubeHeight" @selected_click="selected_click"></magic-cube>
<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>
</template>
</el-form-item>
</card-container>
<card-container class="mb-8">
<div class="mb-12">内容设置</div>
<template v-if="!isEmpty(form.img_magic_list[selected_active])">
<el-form-item label="上传图片">
<upload v-model="form.img_magic_list[selected_active].img" :limit="1" size="40"></upload>
</el-form-item>
<el-form-item label="链接">
<url-value v-model="form.img_magic_list[selected_active].img_link"></url-value>
</el-form-item>
</template>
</card-container>
<el-tabs v-model="tabs_name" class="content-tabs">
<el-tab-pane label="内容设置" name="content">
<tabs-content :value="form"></tabs-content>
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles">
<tabs-styles :value="form"></tabs-styles>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
</template>
@ -74,16 +58,17 @@ const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zu
// 风格
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
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, img: [], img_link: {} }, { start: {x: 3, y: 1},end: {x: 4, y: 4},img: [], img_link: {}}], // 风格2
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, img: [], img_link: {} }, { start: {x: 3, y: 1},end: {x: 4, y: 2},img: [], img_link: {}}, { start: {x: 1, y: 3},end: {x: 4, y: 4},img: [], img_link: {}}],// 风格3
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, img: [], img_link: {} }, { start: {x: 1, y: 3},end: {x: 2, y: 4},img: [], img_link: {}}, { start: {x: 3, y: 3},end: {x: 4, y: 4},img: [], img_link: {}}],// 风格4
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, img: [], img_link: {} }, { start: {x: 3, y: 1},end: {x: 4, y: 2},img: [], img_link: {}}, { start: {x: 3, y: 3},end: {x: 4, y: 4},img: [], img_link: {}}],// 风格5
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, img: [], img_link: {} }, { start: {x: 1, y: 3},end: {x: 2, y: 4},img: [], img_link: {}}, { start: {x: 3, y: 1},end: {x: 4, y: 4},img: [], img_link: {}}],// 风格6
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, img: [], img_link: {} }, { start: {x: 3, y: 1},end: {x: 4, y: 2},img: [], img_link: {}}, { start: {x: 1, y: 3},end: {x: 2, y: 4},img: [], img_link: {}}, { start: {x: 3, y: 3},end: {x: 4, y: 4},img: [], img_link: {}}],// 风格7
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, img: [], img_link: {} }, { start: {x: 3, y: 1},end: {x: 4, y: 2},img: [], img_link: {}}, { start: {x: 3, y: 3},end: {x: 3, y: 4},img: [], img_link: {}}, { start: {x: 4, y: 3},end: {x: 4, y: 4},img: [], img_link: {}}, { start: {x: 4, y: 3},end: {x: 4, y: 4},img: [], img_link: {}}],// 风格8
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, img: [], img_link: {} }, { start: {x: 3, y: 1},end: {x: 4, y: 2},img: [], img_link: {}}, { start: {x: 3, y: 3},end: {x: 3, y: 4},img: [], img_link: {}}, { start: {x: 4, y: 3},end: {x: 4, y: 4},img: [], img_link: {}}],// 风格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 容器大小变更
const cubeWidth = ref(400);
const cubeHeight = ref(400);
@ -154,11 +139,6 @@ const selected_click = (index: number) => {
.style-size {
width: v-bind(style_width);
height: v-bind(style_height);
.three {
width: 33%;
height: 100%;
position: relative;
}
.style9-top {
width: calc(50% - 0.2rem);
height: 50%;
@ -183,15 +163,20 @@ const selected_click = (index: number) => {
text-align: center;
color: $cr-primary;
}
:deep(.el-image) {
height: 100%;
width: 100%;
background-color: #fff;
.el-image__inner {
object-fit: cover;
:deep(.el-tabs.content-tabs) {
.el-tabs__header.is-top {
background: #fff;
margin: 0;
padding-top: 2rem;
}
.image-slot img {
width: 6rem;
.el-tabs__item.is-top {
padding: 0;
align-items: center;
width: 10rem;
font-size: 1.4rem;
}
.el-tabs__active-bar{
width: 100%;
}
}
</style>

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

@ -1,5 +1,5 @@
<template>
<div class="auxiliary-line-setting">
<div class="w">
<template v-if="type == '1'">
<model-data-magic-content :value="value.content"></model-data-magic-content>
</template>
@ -20,8 +20,4 @@ const props = defineProps({
},
});
</script>
<style lang="scss" scoped>
.auxiliary-line-setting {
width: 100%;
}
</style>
<style lang="scss" scoped></style>

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

@ -7,10 +7,10 @@
<slider v-model="form.image_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="数据圆角">
<radius :value="form.data" @update:value="radius_change"></radius>
<radius :value="form.data_radius" @update:value="data_radius_change"></radius>
</el-form-item>
<el-form-item label="图片圆角">
<radius :value="form" @update:value="radius_change"></radius>
<radius :value="form.img_radius" @update:value="img_radius_change"></radius>
</el-form-item>
</card-container>
</el-form>
@ -37,8 +37,18 @@ const common_style_update = (value: any) => {
form.value.common_style = value;
};
// 内容圆角
const radius_change = (radius: any) => {
form.value = Object.assign(form.value, pick(radius, [
const img_radius_change = (radius: any) => {
form.value.img_radius = Object.assign(form.value.img_radius, pick(radius, [
'radius',
'radius_top_left',
'radius_top_right',
'radius_bottom_left',
'radius_bottom_right',
]));
}
// 内容圆角
const data_radius_change = (radius: any) => {
form.value.data_radius = Object.assign(form.value.data_radius, pick(radius, [
'radius',
'radius_top_left',
'radius_top_right',

23
src/components/model-nav-group/model-nav-group-styles.vue
View File

@ -7,9 +7,20 @@
<radius :value="form" @update:value="radius_change"></radius>
</el-form-item>
</card-container>
<card-container v-if="display_style_show" class="mb-8">
<carousel-indicator :value="form"></carousel-indicator>
</card-container>
<template v-if="display_style_show">
<card-container class="mb-8">
<div class="mb-12">轮播设置</div>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" size="large" />
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :max="100"></slider>
</el-form-item>
</card-container>
<card-container class="mb-8">
<carousel-indicator :value="form"></carousel-indicator>
</card-container>
</template>
<card-container class="mb-8">
<div class="mb-12">标题样式</div>
<el-form-item label="标题颜色">
@ -90,7 +101,9 @@ const display_style_show = computed(() => {
});
</script>
<style lang="scss" scoped>
.auxiliary-line {
width: 100%;
.card.mb-8 {
.el-form-item:last-child {
margin-bottom: 0;
}
}
</style>

4
src/components/model-shop-list/model-shop-list-content.vue
View File

@ -29,7 +29,9 @@
</div>
</template>
</el-image>
<url-value v-model="row.href"></url-value>
<div class="flex-1 flex-width">
<url-value v-model="row.href"></url-value>
</div>
</template>
</drag>
<el-button class="mtb-20 w" @click="add">+添加</el-button>

6
src/types/components.d.ts vendored
View File

@ -13,6 +13,7 @@ declare module 'vue' {
ColorPicker: typeof import('./../components/base/color-picker/index.vue')['default']
CommonStyles: typeof import('./../components/common/common-styles/index.vue')['default']
Components: typeof import('./../components/model-custom/components/index.vue')['default']
Content: typeof import('./../components/model-data-magic/components/content.vue')['default']
copy: typeof import('./../components/model-img-magic copy/index.vue')['default']
Cube: typeof import('./../components/common/cube/index.vue')['default']
Dialog: typeof import('./../components/model-custom/components/dialog.vue')['default']
@ -51,6 +52,8 @@ declare module 'vue' {
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
ElTree: typeof import('element-plus/es')['ElTree']
ElUpload: typeof import('element-plus/es')['ElUpload']
@ -177,6 +180,9 @@ declare module 'vue' {
RouterView: typeof import('vue-router')['RouterView']
Settings: typeof import('./../layout/components/settings/index.vue')['default']
Slider: typeof import('./../components/base/slider/index.vue')['default']
Styles: typeof import('./../components/model-data-magic/components/styles.vue')['default']
TabsContent: typeof import('./../components/model-data-magic/components/tabs-content.vue')['default']
TabsStyles: typeof import('./../components/model-data-magic/components/tabs-styles.vue')['default']
TabsView: typeof import('./../components/common/tabs-view/index.vue')['default']
TextSizeType: typeof import('./../components/common/text-size-type/index.vue')['default']
TMap: typeof import('./../components/base/maps/t-map.vue')['default']