修改页面显示逻辑

v1.3.0
于肖磊 2025-04-01 16:37:51 +08:00
parent 90e1ba26ef
commit 78d4ed88df
3 changed files with 30 additions and 18 deletions

View File

@ -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="请选择品牌">

View File

@ -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);

View File

@ -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;