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

修改数据魔方切换问题

v1.0.0
于肖磊 2024-10-21 16:33:58 +08:00
parent 9068153f92
commit 67476b6e68
7 changed files with 39 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/base/radius/index.vue
View File

@ -38,7 +38,13 @@ const props = defineProps({
});
// 用于页面判断显示
const state = reactive({
form: props.value || {},
form: props.value || {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
});
// 如果需要解构，确保使用toRefs
const { form } = toRefs(state);

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

@ -2,10 +2,10 @@
<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" :fit="form.data_content.img_fit"></image-empty>
<image-empty v-model="item1.carousel_img[0]" :style="form.data_style.get_img_radius" :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>
<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="form.data_style.get_img_radius"></product-list-show>
</template>
</el-carousel-item>
</el-carousel>
@ -14,7 +14,6 @@
<script setup lang="ts">
interface Props {
value: any;
contentImgRadius: string;
type: string;
actived: number;
goodStyle?: any;

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

@ -38,6 +38,9 @@
<padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
</el-form-item>
</template>
<el-form-item label="图片圆角">
<radius :key="form.carouselKey" :value="form.img_radius" @update:value="img_radius_change"></radius>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container v-if="tabs_content.data_type === 'goods'">
@ -55,7 +58,7 @@
</card-container>
</template>
<script setup lang="ts">
import { pick } from 'lodash';
import { pick, isEmpty } from 'lodash';
const props = defineProps({
value: {
type: Object,
@ -81,6 +84,17 @@ const mult_color_picker_event = (arry: string[], type: number) => {
const chunk_padding_change = (padding: any) => {
form.value.chunk_padding = Object.assign(form.value.chunk_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
};
// 内容圆角
const img_radius_change = (radius: any) => {
const data = !isEmpty(form.value.img_radius) ? form.value.img_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 };
form.value.img_radius = Object.assign(data, pick(radius, [
'radius',
'radius_top_left',
'radius_top_right',
'radius_bottom_left',
'radius_bottom_right',
]));
}
watchEffect(() => {
form.value = props.value;

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

@ -14,12 +14,12 @@
<p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div>
<div class="w h">
<magic-carousel :value="item" :good-style="item.data_style" :content-img-radius="content_img_radius" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
<magic-carousel :value="item" :good-style="item.data_style" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
</div>
</div>
</template>
<template v-else>
<magic-carousel :value="item" :content-img-radius="content_img_radius" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
<magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
</template>
<div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${item.data_style?.indicator_bottom}px;`">
<template v-if="item.data_style.indicator_style == 'num'">
@ -45,12 +45,12 @@
<p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div>
<div class="w h">
<magic-carousel :value="item" :good-style="item.data_style" :content-img-radius="content_img_radius" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
<magic-carousel :value="item" :good-style="item.data_style" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
</div>
</div>
</template>
<template v-else>
<magic-carousel :value="item" :content-img-radius="content_img_radius" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
<magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
</template>
<div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${item.data_style?.indicator_bottom}px;`">
<template v-if="item.data_style.indicator_style == 'num'">
@ -93,8 +93,6 @@ const outer_sx = computed(() => -((new_style.value?.image_spacing || 0) / 2) + '
const spacing = computed(() => (new_style.value?.image_spacing || 0) / 2 + 'px');
// 内容圆角设置
const content_radius = computed(() => radius_computer(new_style.value.data_radius));
// 图片圆角设置
const content_img_radius = computed(() => radius_computer(new_style.value.img_radius));
//#region 容器大小计算
const div_width = ref(0);
const container_size = computed(() => div_width.value + 'px');
@ -266,6 +264,9 @@ watch(props.value.content, (val) => {
data_style.indicator_styles = indicator_style(data_style);
data_style.background_style = gradient_computer(data_style);
data_style.background_img_style = background_computer(data_style);
const radius = !isEmpty(data_style.img_radius) ? data_style.img_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 };
data_style.get_img_radius = radius_computer(radius);
// 商品名称和价格样式
data_style.goods_title_style = goods_trends_config(item.data_style, 'title');
data_style.goods_price_style = goods_trends_config(item.data_style, 'price');

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

@ -84,6 +84,14 @@ const data_style = {
padding_left: 15,
padding_right: 15,
},
// 图片圆角
img_radius: {
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
is_show: '1',
indicator_style: 'dot',
indicator_location: 'center',

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

@ -9,9 +9,6 @@
<el-form-item label="数据圆角">
<radius :value="form.data_radius" @update:value="data_radius_change"></radius>
</el-form-item>
<el-form-item label="图片圆角">
<radius :value="form.img_radius" @update:value="img_radius_change"></radius>
</el-form-item>
</card-container>
</el-form>
<div class="bg-f5 divider-line" />
@ -38,16 +35,6 @@ const common_style_update = (value: any) => {
form.value.common_style = value;
};
// 内容圆角
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',

9
src/config/const/data-magic.ts
View File

@ -14,7 +14,6 @@ interface defaultSearch {
style: {
img_radius: object
data_radius: object;
image_spacing: number;
common_style: object;
};
}
@ -27,14 +26,6 @@ const defaultSearch: defaultSearch = {
data_magic_list: [],
},
style: {
// 图片圆角
img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
// 内容圆角
data_radius: {
radius: 0,