修改页面显示逻辑
parent
90e1ba26ef
commit
78d4ed88df
|
|
@ -15,9 +15,10 @@
|
||||||
<!-- 商品 -->
|
<!-- 商品 -->
|
||||||
<template v-if="type === 'goods'">
|
<template v-if="type === 'goods'">
|
||||||
<el-form-item label="商品分类">
|
<el-form-item label="商品分类">
|
||||||
<el-select v-model="form.category_ids" multiple collapse-tags filterable placeholder="请选择商品分类">
|
<div class="flex-row gap-10 w h">
|
||||||
<el-option v-for="item in common_store.common.goods_category" :key="item.id" :label="item.name" :value="item.id" />
|
<el-cascader v-model="form.category_ids" placeholder="请选择商品分类" :show-all-levels="false" filterable clearable class="w h" collapse-tags popper-class="filter-form-cascader" placement="left" :props="{'multiple': true, 'checkStrictly': true, 'emitPath': false, 'value': 'id', 'label': 'name', 'children': 'items' }" :options="common_store.common.goods_category" />
|
||||||
</el-select>
|
<tooltip content="父级选中包含所有子级"></tooltip>
|
||||||
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="指定品牌">
|
<el-form-item label="指定品牌">
|
||||||
<el-select v-model="form.brand_ids" multiple collapse-tags filterable placeholder="请选择品牌">
|
<el-select v-model="form.brand_ids" multiple collapse-tags filterable placeholder="请选择品牌">
|
||||||
|
|
|
||||||
|
|
@ -65,16 +65,18 @@ watch(
|
||||||
}
|
}
|
||||||
ask_container.value = gradient_computer(ask_content_data) + margin_computer(new_style.ask_content_margin) + radius_computer(new_style.ask_content_radius) + border_computer(new_style.ask_content) + box_shadow_computer(new_style.ask_content);
|
ask_container.value = gradient_computer(ask_content_data) + margin_computer(new_style.ask_content_margin) + radius_computer(new_style.ask_content_radius) + border_computer(new_style.ask_content) + box_shadow_computer(new_style.ask_content);
|
||||||
ask_img_container.value = background_computer(ask_content_data) + padding_computer(new_style.ask_content_padding);
|
ask_img_container.value = background_computer(ask_content_data) + padding_computer(new_style.ask_content_padding);
|
||||||
|
// 当前数组对应的值
|
||||||
|
const new_tabs_data = new_data.content.tabs_list[tabs_active_index.value] || {};
|
||||||
// 产品的值
|
// 产品的值
|
||||||
new_data.content.data_type = new_data.content.tabs_list[tabs_active_index.value].data_type;
|
new_data.content.data_type = new_tabs_data.data_type;
|
||||||
new_data.content.data_list = new_data.content.tabs_list[tabs_active_index.value].data_list;
|
new_data.content.data_list = new_tabs_data.data_list;
|
||||||
new_data.content.data_auto_list = new_data.content.tabs_list[tabs_active_index.value].data_auto_list;
|
new_data.content.data_auto_list = new_tabs_data.data_auto_list;
|
||||||
new_data.content.keywords = new_data.content.tabs_list[tabs_active_index.value].keywords;
|
new_data.content.keywords = new_tabs_data.keywords;
|
||||||
new_data.content.category_ids = new_data.content.tabs_list[tabs_active_index.value].category_ids;
|
new_data.content.category_ids = new_tabs_data.category_ids;
|
||||||
new_data.content.number = new_data.content.tabs_list[tabs_active_index.value].number;
|
new_data.content.number = new_tabs_data.number;
|
||||||
new_data.content.order_by_type = new_data.content.tabs_list[tabs_active_index.value].order_by_type;
|
new_data.content.order_by_type = new_tabs_data.order_by_type;
|
||||||
new_data.content.order_by_rule = new_data.content.tabs_list[tabs_active_index.value].order_by_rule;
|
new_data.content.order_by_rule = new_tabs_data.order_by_rule;
|
||||||
new_data.content.is_reply = new_data.content.tabs_list[tabs_active_index.value].is_reply;
|
new_data.content.is_reply = new_tabs_data.is_reply;
|
||||||
tabs_list.value = new_data;
|
tabs_list.value = new_data;
|
||||||
// 公共样式
|
// 公共样式
|
||||||
style_container.value += common_styles_computer(new_style.common_style);
|
style_container.value += common_styles_computer(new_style.common_style);
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
</template>
|
</template>
|
||||||
<span v-if="is_show('nick_name')" class="text-line-1" :style="trends_config('nick_name')">{{ item.user.user_name_view }}</span>
|
<span v-if="is_show('nick_name')" class="text-line-1" :style="trends_config('nick_name')">{{ item.user.user_name_view }}</span>
|
||||||
<template v-if="is_show('goods_image')">
|
<template v-if="is_show('goods_image')">
|
||||||
<image-empty v-model="item.goods_url" :style="goods_image_radius"></image-empty>
|
<image-empty v-model="item.images" :style="goods_image_radius"></image-empty>
|
||||||
</template>
|
</template>
|
||||||
<span v-if="is_show('goods_title')" class="flex-1 text-line-1" :style="trends_config('goods_title')">{{ item.title }}</span>
|
<span v-if="is_show('goods_title')" class="flex-1 text-line-1" :style="trends_config('goods_title')">{{ item.title }}</span>
|
||||||
<span v-if="is_show('time')" class="nowrap" :style="trends_config('time')">{{ item.add_time }}</span>
|
<span v-if="is_show('time')" class="nowrap" :style="trends_config('time')">{{ item.add_time }}</span>
|
||||||
|
|
@ -25,12 +25,12 @@
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="swiper-free-mode swiper-horizontal-free-mode" :style="`height: ${ swiper_height }px;`">
|
<div class="swiper-free-mode swiper-horizontal-free-mode" :style="`height: ${ swiper_height }px;`">
|
||||||
<div v-for="(item, index) in new_list" :key="index" :style="`margin-bottom: ${ index < new_list.length - 1 ? space_between : 0 }px;`">
|
<div v-for="(item, index) in new_list" :key="index" :style="`margin-bottom: ${ index < new_list.length - 1 ? space_between : 0 }px;`">
|
||||||
<swiper :key="carouselKey + index" class="w flex" :style="`height: ${ new_swiper_height }px;`" direction="horizontal" :loop="true" :slides-offset-before="slides_offset_before" :speed="swiper_speed + (1000 * index)" :autoplay="autoplay" slides-per-view="auto" :space-between="space_between" :modules="modules">
|
<swiper :key="carouselKey + index" class="w flex" :style="`height: ${ new_swiper_height }px;`" direction="horizontal" :loop="true" :slides-offset-before="slides_offset_before_list[index].is_left ? slides_offset_before : 0" :speed="swiper_speed + (1000 * index)" :autoplay="autoplay" slides-per-view="auto" :space-between="space_between" :modules="modules">
|
||||||
<swiper-slide v-for="(item1, index1) in item.split_list" :key="index1">
|
<swiper-slide v-for="(item1, index1) in item.split_list" :key="index1">
|
||||||
<div :style="swiper_horizontal_container + 'width: auto;'">
|
<div :style="swiper_horizontal_container + 'width: auto;'">
|
||||||
<div class="flex-row align-c" :style="swiper_horizontal_img_container + `gap: ${ new_style.content_spacing }px;`">
|
<div class="flex-row align-c" :style="swiper_horizontal_img_container + `gap: ${ new_style.content_spacing }px;`">
|
||||||
<template v-if="is_show('goods_image')">
|
<template v-if="is_show('goods_image')">
|
||||||
<image-empty v-model="item1.goods_url" :style="goods_image_radius"></image-empty>
|
<image-empty v-model="item1.images" :style="goods_image_radius"></image-empty>
|
||||||
</template>
|
</template>
|
||||||
<span v-if="is_show('goods_title')" class="flex-1 text-line-1" :style="trends_config('goods_title') + `max-width: ${ max_title_width }px;`">{{ item1.title }}</span>
|
<span v-if="is_show('goods_title')" class="flex-1 text-line-1" :style="trends_config('goods_title') + `max-width: ${ max_title_width }px;`">{{ item1.title }}</span>
|
||||||
<span v-if="is_show('time')" class="nowrap" :style="trends_config('time')">{{ item1.add_time }}</span>
|
<span v-if="is_show('time')" class="nowrap" :style="trends_config('time')">{{ item1.add_time }}</span>
|
||||||
|
|
@ -114,7 +114,7 @@ type data_list = {
|
||||||
user_name_view: string,
|
user_name_view: string,
|
||||||
},
|
},
|
||||||
title: string,
|
title: string,
|
||||||
goods_url: string,
|
images: string,
|
||||||
add_time: string
|
add_time: string
|
||||||
}
|
}
|
||||||
const default_list = {
|
const default_list = {
|
||||||
|
|
@ -123,7 +123,7 @@ const default_list = {
|
||||||
user_name_view: '测试昵称测试昵称测试昵称测试昵称',
|
user_name_view: '测试昵称测试昵称测试昵称测试昵称',
|
||||||
},
|
},
|
||||||
title: '测试商品标题测试',
|
title: '测试商品标题测试',
|
||||||
goods_url: '',
|
images: '',
|
||||||
add_time: '02-04 23:01:01'
|
add_time: '02-04 23:01:01'
|
||||||
};
|
};
|
||||||
type split_list = {
|
type split_list = {
|
||||||
|
|
@ -133,7 +133,7 @@ const new_list = ref<split_list[]>([]);
|
||||||
const list = ref<data_list[]>([]);
|
const list = ref<data_list[]>([]);
|
||||||
// 初始化的时候执行
|
// 初始化的时候执行
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (!isEmpty(form.value.data_auto_list) && form.value.data_type == '1') {
|
if (!isEmpty(form.value.data_auto_list)) {
|
||||||
// 筛选商品并且筛选商品数组不为空
|
// 筛选商品并且筛选商品数组不为空
|
||||||
list.value = form.value.data_auto_list;
|
list.value = form.value.data_auto_list;
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -190,9 +190,16 @@ const max_title_width = ref(0);
|
||||||
const new_swiper_height = ref(0);
|
const new_swiper_height = ref(0);
|
||||||
// 设置初始偏移量
|
// 设置初始偏移量
|
||||||
const slides_offset_before = ref(0);
|
const slides_offset_before = ref(0);
|
||||||
|
type before_list = { is_left: boolean }
|
||||||
|
const slides_offset_before_list = ref<before_list[]>([]);
|
||||||
const size_handle = (val: number, type: string) => {
|
const size_handle = (val: number, type: string) => {
|
||||||
return form.value.is_show.includes(type) ? val : 0;
|
return form.value.is_show.includes(type) ? val : 0;
|
||||||
};
|
};
|
||||||
|
const slideChange = (swiper: { realIndex: number }, index: number, value_length: number) => {
|
||||||
|
if (swiper.realIndex >= value_length - 1) {
|
||||||
|
slides_offset_before_list.value[index].is_left = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
// 内容参数的集合
|
// 内容参数的集合
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
const { rotation_direction, interval_time, show_number = 1, is_roll } = form.value;
|
const { rotation_direction, interval_time, show_number = 1, is_roll } = form.value;
|
||||||
|
|
@ -222,12 +229,14 @@ watchEffect(() => {
|
||||||
slides_offset_before.value = 390 - common_style.margin_left + common_style.margin_right - common_style.padding_left - common_style.padding_right;
|
slides_offset_before.value = 390 - common_style.margin_left + common_style.margin_right - common_style.padding_left - common_style.padding_right;
|
||||||
max_title_width.value = goods_title_size * 9;
|
max_title_width.value = goods_title_size * 9;
|
||||||
new_list.value = [];
|
new_list.value = [];
|
||||||
|
slides_offset_before_list.value = [];
|
||||||
// 拆分的数量
|
// 拆分的数量
|
||||||
const split_num = Math.ceil(list.value.length / show_num);
|
const split_num = Math.ceil(list.value.length / show_num);
|
||||||
let new_num = show_num;
|
let new_num = show_num;
|
||||||
for (let i = 0; i < show_num; i++) {
|
for (let i = 0; i < show_num; i++) {
|
||||||
if (!isEmpty(list.value[i * split_num])) {
|
if (!isEmpty(list.value[i * split_num])) {
|
||||||
new_list.value.push({ split_list: list.value.slice(i * split_num, (i + 1) * split_num) });
|
new_list.value.push({ split_list: list.value.slice(i * split_num, (i + 1) * split_num) });
|
||||||
|
slides_offset_before_list.value.push({ is_left: true });
|
||||||
} else {
|
} else {
|
||||||
new_num = i - 1;
|
new_num = i - 1;
|
||||||
break;
|
break;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue