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

修改内容图片的显示

v1.1.0
于肖磊 2024-12-16 11:39:24 +08:00
parent ebb4ec7d93
commit fa0f33c5b1
10 changed files with 113 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/common/background-common/index.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<div class="flex-col gap-10 w">
<div class="size-12 flex-row gap-10">
<span>背景色</span>
<el-tooltip effect="dark" :show-after="200" :hide-after="200" :content="props.tooltipContent" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</div>
<mult-color-picker :value="color_list" :type="direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="background_img_style"></bg-btn-style>
</div>
<upload v-model="background_img" :limit="1"></upload>
</div>
</template>
<script lang="ts" setup>
interface Props {
tooltipContent?: string;
}
const props = withDefaults(defineProps<Props>(), {
tooltipContent: '背景图的优先级比背景色的优先级高',
});
const color_list = defineModel('color_list', {
type: Array,
default: () => ([{ color: '', color_percentage: undefined }]),
});
const direction = defineModel('direction', {
type: String,
default: '90deg',
});
const background_img_style = defineModel('img_style', {
type: String,
default: '2',
});
const background_img = defineModel('img', {
type: Array as PropType<uploadList[]>,
default: () => [],
});
const emit = defineEmits(['mult_color_picker_event']);
const mult_color_picker_event = (arry: color_list[], type: number) => {
emit('mult_color_picker_event', arry, type);
};
</script>

4
src/components/model-article-tabs/model-article-tabs-content.vue
View File

@ -162,8 +162,8 @@ onMounted(() => {
const tabs_list = computed(() => {
return form.tabs_list.map((item: any) => ({
...item,
tabs_img: isEmpty(item.data_type) ? [] : item.tabs_img,
tabs_icon: isEmpty(item.data_type) ? '' : item.tabs_icon,
tabs_img: isEmpty(item.tabs_img) ? [] : item.tabs_img,
tabs_icon: isEmpty(item.tabs_icon) ? '' : item.tabs_icon,
tabs_type: isEmpty(item.data_type) ? '0' : item.data_type,
}));
});

26
src/components/model-carousel/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="re" :style="style_container + swiper_bg_style">
<div class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
<div class="re" :style="style_img_container">
<div class="abs top-0 w h" :style="swiper_bg_img_style"></div>
<div class="re" :style="style_img_container + (!isEmpty(swiper_bg_img_style) ? `background-image: url('');` : '')">
<div ref="swiperSize" class="swiper-container w h oh">
<swiper
:key="carouselKey"
@ -154,11 +154,11 @@ const indicator_location_style = computed(() => {
});
//#endregion
const seat_list = computed(() => {
if (form.value.carousel_list.length > 3 || form.value.carousel_type !== 'card') {
let seat_list = [];
const list = cloneDeep(form.value.carousel_list);
if (form.value.carousel_list.length > 3) {
return [];
} else {
let seat_list = [];
const list = cloneDeep(form.value.carousel_list);
switch (list.length) {
case 1:
seat_list = [ ...list, ...list, ...list];
@ -167,13 +167,13 @@ const seat_list = computed(() => {
seat_list.push(...list)
break;
case 3:
seat_list.push(...list.slice(0, 1))
seat_list.push(...list)
break;
default:
break;
}
return seat_list;
}
return seat_list;
})
// 轮播图自适应高度
const newHeight = computed(() => form.value.height + 'px');
@ -222,6 +222,10 @@ const swiper_style = computed(() => {
slidesPerView = 3;
centeredSlides = false
spaceBetween = new_style.value.image_spacing;
} else if (form.value.carousel_type == 'inherit') {
slidesPerView = 1;
centeredSlides = true;
spaceBetween = 0;
}
return {
slidesPerView: slidesPerView,
@ -309,16 +313,16 @@ const swiper_bg_img_style = computed(() => {
return '';
}
if (!isEmpty(form.value.carousel_list[actived_index.value]?.style?.background_img)) {
return background_computer(form.value.carousel_list[actived_index.value].style) + `filter: blur(${form.value.carousel_list[actived_index.value]?.style?.background_img_blur || 0}px);`;
return background_computer(form.value.carousel_list[actived_index.value].style) + (form.value.is_background_img_blur == '1' ? `filter: blur(14px);opacity: 0.6;` : '');
}
return '';
});
const emit = defineEmits(['slideChange']);
const slideChange = (swiper: { realIndex: number }) => {
if (swiper.realIndex > form.value.carousel_list.length - 1 && form.value.carousel_type == 'card') {
if (swiper.realIndex > form.value.carousel_list.length - 1) {
const seat_length = seat_list.value.length;
if (seat_length == 2 && swiper.realIndex == 3) {
actived_index.value = 1;
if (form.value.carousel_list.length > 1) {
actived_index.value = swiper.realIndex - seat_length;
} else {
actived_index.value = 0;
}

17
src/components/model-carousel/model-carousel-content.vue
View File

@ -31,7 +31,10 @@
<div class="divider-line"></div>
<card-container>
<div class="mb-12">内容设置</div>
<div class="tips mt-10 mb-20 size-12">最多添加{{ carousel_list.length }}张图片，建议尺寸750*300px</div>
<div class="tips mt-10 mb-20 size-12">最多添加{{ carousel_list.length }}张图片，建议尺寸750*300px
<br/>
<div class="mt-4" style="color: red;">模式二和模式四最少需要4张图片才能实现轮播，模式三最少需要3张图片， 模式一不限制数量</div>
</div>
<div class="flex-col gap-20">
<div v-for="(item, index) in carousel_list" :key="index" class="card-background box-shadow-sm re">
<el-tabs v-model="item.tabs_name" class="content-tabs">
@ -58,9 +61,9 @@
<el-tab-pane label="样式设置" name="styles">
<el-form-item label-width="0">
<background-common v-model:color_list="item.style.color_list" v-model:direction="item.style.direction" v-model:img_style="item.style.background_img_style" v-model:img="item.style.background_img" :tooltip-content="'1.背景图的优先级比背景色的优先级高<br/>2.覆盖通用背景样式'" @mult_color_picker_event="(...value: [color_list[], number]) => carousel_tabs_mult_color_picker_event(...value, index)" />
<div class="flex-col w gap-10">
<div class="flex-row w gap-10">
<div class="size-12">背景图模糊</div>
<slider v-model="item.style.background_img_blur" :min="0" :max="100"></slider>
<el-switch v-model="form.is_background_img_blur" active-value="1" inactive-value="0" />
</div>
</el-form-item>
</el-tab-pane>
@ -96,7 +99,7 @@ const carousel_list = computed(() => {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
background_img_blur: 0,
background_img_blur: '0',
}
}
});
@ -114,7 +117,7 @@ const add = () => {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
background_img_blur: 0,
background_img_blur: '0',
}
});
};
@ -127,10 +130,6 @@ const carousel_tabs_mult_color_picker_event = (arry: color_list[], type: number,
form.value.carousel_list[index].style.color_list = arry;
form.value.carousel_list[index].style.direction = type.toString();
};
// 内容区域背景图片设置
const carousel_tabs_background_img_change = (arry: uploadList[], index: number) => {
form.value.carousel_list[index].style.background_img = arry;
};
</script>
<style lang="scss" scoped>
.card-background {

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

@ -17,8 +17,8 @@
<padding :value="form.carousel_content_padding"></padding>
</el-form-item>
</card-container>
<div class="divider-line"></div>
</template>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">图片设置</div>
<el-form-item label="圆角">

4
src/components/model-goods-tabs/model-goods-tabs-content.vue
View File

@ -149,8 +149,8 @@ onBeforeMount(() => {
const tabs_list = computed(() => {
return form.value.tabs_list.map((item: any) => ({
...item,
tabs_img: isEmpty(item.data_type) ? [] : item.tabs_img,
tabs_icon: isEmpty(item.data_type) ? '' : item.tabs_icon,
tabs_img: isEmpty(item.tabs_img) ? [] : item.tabs_img,
tabs_icon: isEmpty(item.tabs_icon) ? '' : item.tabs_icon,
tabs_type: isEmpty(item.data_type) ? '0' : item.data_type,
}));
});

5
src/components/model-tabs-carousel/index.vue
View File

@ -1,6 +1,7 @@
<template>
<div :style="style_container + swiper_bg_style">
<div class="flex-col oh" :style="style_img_container + swiper_bg_img_style">
<div class="abs top-0 w h" :style="swiper_bg_img_style"></div>
<div class="flex-col oh" :style="style_img_container + (!isEmpty(swiper_bg_img_style) ? `background-image: url('');` : '')">
<div class="oh" :style="tabs_container">
<div class="oh" :style="tabs_img_container">
<tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :active-index="tabs_active_index"></tabs-view>
@ -93,7 +94,7 @@ const swiper_bg_style = computed(() => {
const swiper_bg_img_style = computed(() => {
if (!isEmpty(form.value?.carousel_list[actived_index.value]?.style?.background_img)) {
return background_computer(form.value.carousel_list[actived_index.value].style);
return background_computer(form.value.carousel_list[actived_index.value].style) + (form.value.is_background_img_blur == '1' ? `filter: blur(14px);opacity: 0.6;` : '');
}
return '';
});

4
src/components/model-tabs/model-tabs-content.vue
View File

@ -104,8 +104,8 @@ const { form, styles } = toRefs(state);
const tabs_list = computed(() => {
return form.value.tabs_list.map((item: any) => ({
...item,
tabs_img: isEmpty(item.data_type) ? [] : item.tabs_img,
tabs_icon: isEmpty(item.data_type) ? '' : item.tabs_icon,
tabs_img: isEmpty(item.tabs_img) ? [] : item.tabs_img,
tabs_icon: isEmpty(item.tabs_icon) ? '' : item.tabs_icon,
tabs_type: isEmpty(item.data_type) ? '0' : item.data_type,
}));
});

21
src/config/const/carousel.ts
View File

@ -11,7 +11,7 @@ interface carousel_list {
color_list: color_list[];
background_img_style: string;
background_img: uploadList[];
background_img_blur: 0,
is_background_img_blur: string,
}
}
interface defaultSearch {
@ -74,7 +74,7 @@ const defaultSearch: defaultSearch = {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
background_img_blur: 0,
is_background_img_blur: '0',
}
},
{
@ -87,7 +87,7 @@ const defaultSearch: defaultSearch = {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
background_img_blur: 0,
is_background_img_blur: '0',
}
},
{
@ -100,7 +100,20 @@ const defaultSearch: defaultSearch = {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
background_img_blur: 0,
is_background_img_blur: '0',
}
},
{
carousel_img: [],
carousel_video: [],
carousel_link: {},
video_title: '视频名称',
style: {
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
is_background_img_blur: '0',
}
}
]

21
src/config/const/tabs-carousel.ts
View File

@ -23,7 +23,7 @@ interface carousel_list {
color_list: color_list[];
background_img_style: string;
background_img: uploadList[];
background_img_blur: number;
is_background_img_blur: string;
}
}
interface defaultTabs {
@ -138,7 +138,7 @@ const defaultTabs: defaultTabs = {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
background_img_blur: 0,
is_background_img_blur: '0',
}
},
{
@ -151,7 +151,7 @@ const defaultTabs: defaultTabs = {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
background_img_blur: 0,
is_background_img_blur: '0',
}
},
{
@ -164,7 +164,20 @@ const defaultTabs: defaultTabs = {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
background_img_blur: 0,
is_background_img_blur: '0',
}
},
{
carousel_img: [],
carousel_video: [],
carousel_link: {},
video_title: '视频名称',
style: {
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
is_background_img_blur: '0',
}
},
],