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

修改数据魔方和图片魔方的显示

v1.0.0
于肖磊 2024-10-15 14:41:55 +08:00
parent bfe591cb1b
commit af0bdba610
9 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@
<icon name="close" color="f" size="8"></icon>
</div>
<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]" :fit="props.imgFit"></image-empty>
</template>
<template v-else>
<div class="cube-selected-text">
@ -61,7 +61,7 @@ interface Props {
cubeWidth: number;
cubeHeight: number;
styleActived?: number;
img_fit?: string;
imgFit?: "" | "cover" | "fill" | "contain" | "none" | "scale-down";
}
const props = withDefaults(defineProps<Props>(), {
list: () => [],
@ -69,7 +69,8 @@ const props = withDefaults(defineProps<Props>(), {
type: 'img',
cubeWidth: 390,
cubeHeight: 390,
styleActived: 0
styleActived: 0,
imgFit: 'cover'
});
const selected_active = ref(0);

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

@ -35,7 +35,7 @@
<el-icon class="iconfont icon-drag size-16 cr-d" />
<div class="text-line-1 flex align-c" style="width: 70%;">
<template v-if="edit_index == index">
<el-input v-model="item.new_name" placeholder="请输入组件别名" size="small" clearable type="textarea" class="flex-1 do-not-trigger" :rows="1" />
<el-input v-model="item.new_name" placeholder="请输入组件别名" size="small" clearable type="textarea" class="flex-1 do-not-trigger" :rows="1" resize="none" />
</template>
<template v-else>
<span class="size-12 cr-6 break">{{ !isEmpty(item.new_name) ? item.new_name : item.name }}</span>
@ -861,7 +861,4 @@ defineExpose({
}
}
}
.el-input__textarea {
resize: none;
}
</style>

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

@ -2,7 +2,7 @@
<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'">
<image-empty v-model="item1.carousel_img[0]" :style="contentImgRadius"></image-empty>
<image-empty v-model="item1.carousel_img[0]" :style="contentImgRadius" :fit="form.data_content.img_fit"></image-empty>
</template>
<template v-else>
<product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="contentImgRadius"></product-list-show>

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

@ -14,6 +14,15 @@
<el-input v-model="form.subtitle" placeholder="请输入副标题" clearable></el-input>
</el-form-item>
</template>
<template v-else-if="form.data_type === 'images'">
<el-form-item label="图片设置">
<el-radio-group v-model="form.img_fit">
<el-radio value="contain">等比缩放</el-radio>
<el-radio value="none">铺满</el-radio>
<el-radio value="cover">等比剪切</el-radio>
</el-radio-group>
</el-form-item>
</template>
</card-container>
<template v-if="form.data_type == 'images'">
<div class="bg-f5 divider-line" />

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

@ -106,6 +106,7 @@ const data_content = {
goods_list:[],
goods_ids: '',
is_show: ['title', 'price'],
img_fit: 'cover',
images_list:[
{
carousel_img: [],

6
src/components/model-img-magic/index.vue
View File

@ -6,7 +6,7 @@
<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>
<image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
</div>
</div>
</template>
@ -14,7 +14,7 @@
<template v-else-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>
<image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
</div>
</div>
</template>
@ -25,7 +25,7 @@
</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)">
<image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
<image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
</div>
</template>
</div>

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

@ -10,7 +10,7 @@
</div>
</div>
</el-form-item>
<el-form-item label="图片设置">
<el-form-item v-if="form.style_actived !== 10" label="图片设置">
<el-radio-group v-model="form.img_fit">
<el-radio value="contain">等比缩放</el-radio>
<el-radio value="none">铺满</el-radio>
@ -27,7 +27,7 @@
<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>
<image-empty v-model="item.img[0]" :fit="form.img_fit" ></image-empty>
</template>
<template v-else>
<div class="cube-selected-text"> 250 x 750 像素</div>
@ -40,7 +40,7 @@
<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])">
<image-empty v-model="item.img[0]"></image-empty>
<image-empty v-model="item.img[0]" :fit="form.img_fit"></image-empty>
</template>
<template v-else>
<div class="cube-selected-text">
@ -52,7 +52,7 @@
</div>
</template>
<template v-else>
<magic-cube :key="form.style_actived" :list="form.img_magic_list" :style-actived="form.style_actived" :flag="form.style_actived == 11" :cube-width="cubeWidth" :cube-height="cubeHeight" :fit="form.img_fit" @selected_click="selected_click"></magic-cube>
<magic-cube :key="form.style_actived" :list="form.img_magic_list" :style-actived="form.style_actived" :flag="form.style_actived == 11" :cube-width="cubeWidth" :cube-height="cubeHeight" :img-fit="form.img_fit" @selected_click="selected_click"></magic-cube>
</template>
</el-form-item>
</card-container>

2
src/components/model-img-magic/model-img-magic-setting.vue
View File

@ -4,7 +4,7 @@
<model-img-magic-content :value="value.content"></model-img-magic-content>
</template>
<template v-if="type == '2'">
<model-img-magic-styles :value="value.style"></model-img-magic-styles>
<model-img-magic-styles :value="value.style" :content="value.content"></model-img-magic-styles>
</template>
</div>
</template>

11
src/components/model-img-magic/model-img-magic-styles.vue
View File

@ -3,7 +3,7 @@
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">图片魔方</div>
<el-form-item label="图片间距">
<el-form-item v-if="new_content.style_actived !== 10" label="图片间距">
<slider v-model="form.image_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="图片圆角">
@ -21,15 +21,20 @@ const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
content: {
type: Object,
default: () => ({}),
}
});
// 默认值
const state = reactive({
form: props.value
form: props.value,
new_content: props.content
});
// 如果需要解构，确保使用toRefs
const { form } = toRefs(state);
const { form, new_content } = toRefs(state);
const common_style_update = (value: any) => {
form.value.common_style = value;