修改显示数据处理
于肖磊
parent
7bf293494f
commit
66338e8e65
|
|
@ -19,9 +19,9 @@
|
|||
<div class="flex-1 flex-col" :style="content_style">
|
||||
<div class="flex-col jc-sb gap-10">
|
||||
<div class="flex-row jc-sb align-c gap-10">
|
||||
<div class="flex-row align-c gap-3">
|
||||
<div v-if="(item.alias || null) != null" :style="shop_label_style">{{ item.alias }}</div>
|
||||
<div class="text-line-2" :style="trends_config('title')">{{ item.name }}</div>
|
||||
<div class="flex-row align-b gap-3">
|
||||
<div v-if="(item.alias || null) != null" class="nowrap" :style="shop_label_style">{{ item.alias }}</div>
|
||||
<div class="text-line-1" :style="trends_config('title')">{{ item.name }}</div>
|
||||
</div>
|
||||
<div v-if="['0', '2'].includes(theme) && (!isEmpty(item.service_data.service_tel) || ( item.lat != 0 && item.lng != 0 ))" class="flex-row align-c" :style="`gap: ${ new_style.phone_navigation_spacing }px;`">
|
||||
<img-or-icon-or-text v-if="!isEmpty(item.service_data.service_tel)" :value="props.value" type="phone" />
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<div v-if="!isEmpty(item.status_info) && !isEmpty(item.status_info.time)" class="flex-row gap-2 align-c">
|
||||
<img-or-icon-or-text :value="props.value" type="time" />
|
||||
<div class="flex-1 flex-row align-c">
|
||||
<span class="text-line-1" :style="trends_config('state') + `color: ${ item.status_info.status == 1 ? new_style.realstore_state_color : new_style.realstore_default_state_color }`">{{ item.status_info.msg }}</span>
|
||||
<span class="nowrap" :style="trends_config('state') + `color: ${ item.status_info.status == 1 ? new_style.realstore_state_color : new_style.realstore_default_state_color }`">{{ item.status_info.msg }}</span>
|
||||
<span v-if="!isEmpty(item.status_info.msg) || !isEmpty(item.status_info.time)" :style="'color: #ccc;' + margin_computer(new_style.realstore_business_distance)">|</span>
|
||||
<span class="text-line-1" :style="trends_config('business_hours')">{{ item.status_info.time }}</span>
|
||||
</div>
|
||||
|
|
@ -83,14 +83,14 @@
|
|||
</div>
|
||||
</template>
|
||||
<div class="flex-1 flex-col jc-sb gap-10" :style="content_style">
|
||||
<div class="flex-row align-c gap-3">
|
||||
<div v-if="(item.alias || null) != null" :style="shop_label_style">{{ item.alias }}</div>
|
||||
<div class="text-line-2" :style="trends_config('title')">{{ item.name }}</div>
|
||||
<div class="flex-row align-b gap-3">
|
||||
<div v-if="(item.alias || null) != null" class="nowrap" :style="shop_label_style">{{ item.alias }}</div>
|
||||
<div class="text-line-1" :style="trends_config('title')">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="flex-row jc-sb align-c">
|
||||
<div v-if="!isEmpty(item.status_info) && !isEmpty(item.status_info.time)" class="flex-1 flex-row gap-2 align-c">
|
||||
<img-or-icon-or-text :value="props.value" type="time" />
|
||||
<span class="text-line-1" :style="trends_config('state') + `color: ${ item.status_info.status == 1 ? new_style.realstore_state_color : new_style.realstore_default_state_color }`">{{ item.status_info.msg }}</span>
|
||||
<span class="nowrap" :style="trends_config('state') + `color: ${ item.status_info.status == 1 ? new_style.realstore_state_color : new_style.realstore_default_state_color }`">{{ item.status_info.msg }}</span>
|
||||
</div>
|
||||
<img-or-icon-or-text v-if="item.lat != 0 && item.lng != 0" :value="props.value" type="navigation" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,14 +25,14 @@
|
|||
<template v-else>
|
||||
<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;`">
|
||||
<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 :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-slide v-for="(item1, index1) in item.split_list" :key="index1">
|
||||
<div :style="swiper_horizontal_container + 'width: auto;'">
|
||||
<div class="flex-row align-c" :style="swiper_horizontal_img_container + `gap: ${ new_style.content_spacing }px;`">
|
||||
<template v-if="is_show('goods_image')">
|
||||
<image-empty v-model="item1.images" :style="goods_image_radius"></image-empty>
|
||||
</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')">{{ item1.title }}</span>
|
||||
<span v-if="is_show('time')" class="nowrap" :style="trends_config('time')">{{ item1.add_time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -190,16 +190,11 @@ const max_title_width = ref(0);
|
|||
const new_swiper_height = ref(0);
|
||||
// 设置初始偏移量
|
||||
const slides_offset_before = ref(0);
|
||||
type before_list = { is_left: boolean }
|
||||
const slides_offset_before_list = ref<before_list[]>([]);
|
||||
// type before_list = { is_left: boolean }
|
||||
// const slides_offset_before_list = ref<before_list[]>([]);
|
||||
const size_handle = (val: number, type: string) => {
|
||||
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(() => {
|
||||
const { rotation_direction, interval_time, show_number = 1, is_roll } = form.value;
|
||||
|
|
@ -227,16 +222,16 @@ watchEffect(() => {
|
|||
} else {
|
||||
// 设置初始偏移量
|
||||
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 = [];
|
||||
slides_offset_before_list.value = [];
|
||||
// slides_offset_before_list.value = [];
|
||||
// 拆分的数量
|
||||
const split_num = Math.ceil(list.value.length / show_num);
|
||||
let new_num = show_num;
|
||||
for (let i = 0; i < show_num; i++) {
|
||||
if (!isEmpty(list.value[i * 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 });
|
||||
// slides_offset_before_list.value.push({ is_left: true });
|
||||
} else {
|
||||
new_num = i - 1;
|
||||
break;
|
||||
|
|
@ -264,7 +259,7 @@ watchEffect(() => {
|
|||
.swiper-free-mode :deep(.swiper-wrapper) {
|
||||
transition-timing-function: linear !important;
|
||||
}
|
||||
.swiper-horizontal-free-mode :deep(.swiper-slide) {
|
||||
width: auto !important;
|
||||
}
|
||||
// .swiper-horizontal-free-mode :deep(.swiper-slide) {
|
||||
// width: auto !important;
|
||||
// }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,10 +17,11 @@
|
|||
</template>
|
||||
<div class="flex-1 flex-row jc-sb gap-10" :style="content_style">
|
||||
<div class="flex-1 flex-col jc-sb gap-10">
|
||||
<div class="text-line-2" :style="trends_config('title')">
|
||||
<div class="flex-row align-c" :style="trends_config('title')">
|
||||
<template v-for="(item1, index1) in new_url_list(item.icon_list)" :key="index1">
|
||||
<img :src="item1.icon" class="title-img" :style="title_img_style(item.icon_list, index1) + 'vertical-align: middle;'" />
|
||||
</template>{{ item.name }}
|
||||
<img :src="item1.icon" class="title-img" :style="title_img_style(item.icon_list, index1)" />
|
||||
</template>
|
||||
<span class="flex-1 text-line-1">{{ item.name }}</span>
|
||||
</div>
|
||||
<span v-if="form.shop_desc == '1'" :class="form.shop_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="trends_config('desc', 'desc')">{{ item.describe }}</span>
|
||||
</div>
|
||||
|
|
@ -47,10 +48,11 @@
|
|||
</div>
|
||||
</template>
|
||||
<div class="flex-col jc-sb gap-10" :style="content_style">
|
||||
<div class="text-line-2" :style="trends_config('title')">
|
||||
<div class="flex-row align-c" :style="trends_config('title')">
|
||||
<template v-for="(item1, index1) in new_url_list(item.icon_list)" :key="index1">
|
||||
<img :src="item1.icon" class="title-img" :style="title_img_style(item.icon_list, index1) + 'vertical-align: middle;'" />
|
||||
</template>{{ item.name }}
|
||||
<img :src="item1.icon" class="title-img" :style="title_img_style(item.icon_list, index1)" />
|
||||
</template>
|
||||
<span class="flex-1 text-line-1">{{ item.name }}</span>
|
||||
</div>
|
||||
<span v-if="form.shop_desc == '1'" :class="form.shop_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="trends_config('desc', 'desc')">{{ item.describe }}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -285,6 +285,11 @@ const defaultRealstore: defaultRealstore = {
|
|||
padding_bottom: 4,
|
||||
padding_left: 4,
|
||||
padding_right: 4,
|
||||
radius: 4,
|
||||
radius_top_left: 4,
|
||||
radius_top_right: 4,
|
||||
radius_bottom_left: 4,
|
||||
radius_bottom_right: 4,
|
||||
},
|
||||
time_style: cloneDeep(common_icon_style),
|
||||
phone_style: {
|
||||
|
|
@ -296,6 +301,11 @@ const defaultRealstore: defaultRealstore = {
|
|||
padding_bottom: 4,
|
||||
padding_left: 4,
|
||||
padding_right: 4,
|
||||
radius: 4,
|
||||
radius_top_left: 4,
|
||||
radius_top_right: 4,
|
||||
radius_bottom_left: 4,
|
||||
radius_bottom_right: 4,
|
||||
},
|
||||
location_style: cloneDeep(common_icon_style),
|
||||
// 是否滚动
|
||||
|
|
|
|||
Loading…
Reference in New Issue