修改销售记录显示内容

v1.3.0
于肖磊 2025-03-14 18:42:47 +08:00
parent 5e20a07b1f
commit cf357bf929
7 changed files with 138 additions and 74 deletions

View File

@ -5,7 +5,7 @@
</el-radio-group>
</el-form-item>
<div v-show="form.data_type === '0'" class="nav-list">
<drag-group :list="drag_list" :img-params="img_params" :titleParams="title_params" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
<drag-group :list="drag_list" :img-params="img_params" :title-params="title_params" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
<el-button class="mt-20 w" @click="add">+</el-button>
</div>
<!-- 商品 -->

View File

@ -19,7 +19,10 @@
<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="text-line-2" :style="trends_config('title')">{{ item.name }}</div>
<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>
<div v-if="['0', '2'].includes(theme)" class="flex-row align-c" :style="`gap: ${ new_style.phone_navigation_spacing }px;`">
<img-or-icon-or-text :value="props.value" type="phone" />
<img-or-icon-or-text :value="props.value" type="navigation" />
@ -34,15 +37,15 @@
</div>
</div>
</div>
<template v-if="theme !== '0' && form.is_location_show == '1'">
<template v-if="theme !== '0' && (form.is_location_show == '1' || form.is_location_distance_show == '1' || form.is_location_title_show == '1')">
<div :style="border_style"></div>
<div class="flex-row jc-sb align-c gap-10">
<div class="flex-row align-c jc-sb">
<div class="flex-1 flex-row align-c jc-sb">
<div class="flex-1 flex-row align-b gap-2">
<img-or-icon-or-text :value="props.value" type="location" />
<span class="text-line-2 flex-1" :style="trends_config('location')">{{ item.province_name }}{{ item.city_name }}{{ item.county_name }}{{ item.address }}</span>
<span v-if="form.is_location_title_show == '1'" class="text-line-2 flex-1" :style="trends_config('location')">{{ item.province_name }}{{ item.city_name }}{{ item.county_name }}{{ item.address }}</span>
</div>
<span v-if="!isEmpty(item.distance) && theme != '1'" :style="trends_config('location')">{{ item.distance }}</span>
<span v-if="!isEmpty(item.distance) && theme != '1' && form.is_location_distance_show == '1'" :style="trends_config('distance')">{{ item.distance || '0km' }}</span>
</div>
<template v-if="!['0', '2'].includes(theme)">
<img-or-icon-or-text :value="props.value" type="navigation" />
@ -51,14 +54,14 @@
</template>
</div>
</div>
<template v-if="theme == '0' && form.is_location_show == '1'">
<template v-if="theme == '0' && (form.is_location_show == '1' || form.is_location_distance_show == '1' || form.is_location_title_show == '1')">
<div :style="border_style"></div>
<div class="flex-row align-c jc-sb">
<div class="flex-1 flex-row align-b gap-2">
<img-or-icon-or-text :value="props.value" type="location" />
<span class="text-line-2 flex-1" :style="trends_config('location')">{{ item.province_name }}{{ item.city_name }}{{ item.county_name }}{{ item.address }}</span>
<span v-if="form.is_location_title_show == '1'" class="text-line-2 flex-1" :style="trends_config('location')">{{ item.province_name }}{{ item.city_name }}{{ item.county_name }}{{ item.address }}</span>
</div>
<span v-if="!isEmpty(item.distance)" :style="trends_config('location')">{{ item.distance }}</span>
<span v-if="form.is_location_distance_show == '1'" :style="trends_config('distance')">{{ item.distance || '0km' }}</span>
</div>
</template>
</div>
@ -80,7 +83,10 @@
</div>
</template>
<div class="flex-1 flex-col jc-sb gap-10" :style="content_style">
<div class="text-line-2" :style="trends_config('title')">{{ item.name }}</div>
<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>
<div class="flex-row jc-sb align-c">
<div class="flex-1 flex-row gap-2 align-c">
<img-or-icon-or-text :value="props.value" type="time" />
@ -135,6 +141,11 @@ const onter_style = computed(() => {
const radius = `gap: ${new_style.value.content_outer_spacing + 'px'};`;
return `${radius}`;
});
//
const shop_label_style = computed(() => {
const { shop_lable_color, shop_lable_size, shop_lable_padding, shop_lable_radius, shop_lable_color_list, shop_lable_direction, shop_lable_border_color, shop_lable_border_size } = new_style.value;
return `color: ${ shop_lable_color };font-size: ${ shop_lable_size }px;${ padding_computer(shop_lable_padding) };${ radius_computer(shop_lable_radius) };${ gradient_handle(shop_lable_color_list, shop_lable_direction) };border: ${ shop_lable_border_size }px solid ${ shop_lable_border_color };`
});
//
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
@ -158,6 +169,7 @@ type data_list = {
name: string;
logo: string;
new_cover: string[];
alias: string;
msg: string;
province_name: string;
city_name: string;
@ -170,6 +182,7 @@ type data_list = {
const default_list = {
name: '测试门店标题',
province_name: '测试地址',
alias: '上海门店',
city_name: '',
county_name: '',
address: '',

View File

@ -41,10 +41,22 @@
<el-form-item label="时间图标" class="align-s">
<img-or-icon-or-text-content :value="form" type="time"></img-or-icon-or-text-content>
</el-form-item>
<el-form-item v-if="form.theme != '3'" label="地址图标" class="align-s">
<img-or-icon-or-text-content :value="form" type="location"></img-or-icon-or-text-content>
</el-form-item>
</card-container>
<template v-if="form.theme != '3'">
<div class="divider-line"></div>
<card-container>
<div class="mb-12">地址设置</div>
<el-form-item label="左侧图标" class="align-s">
<img-or-icon-or-text-content :value="form" type="location"></img-or-icon-or-text-content>
</el-form-item>
<el-form-item label="地址" class="align-s">
<el-switch v-model="form.is_location_title_show" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<el-form-item v-if="['0', '2'].includes(form.theme)" label="地址距离" class="align-s">
<el-switch v-model="form.is_location_distance_show" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
</card-container>
</template>
</el-form>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['realstore']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</div>

View File

@ -6,22 +6,28 @@
<el-form-item label="内容背景">
<background-common v-model:color_list="form.realstore_color_list" v-model:direction="form.realstore_direction" v-model:img_style="form.realstore_background_img_style" v-model:img="form.realstore_background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item label="标题图标">
<el-form-item label="别名">
<div class="flex-col gap-10 w h">
<el-form-item label="宽度" label-width="60" class="form-item-child-label">
<slider v-model="form.realstore_title_img_width" :max="1000"></slider>
<el-form-item label="字体颜色" label-width="60" class="form-item-child-label">
<color-picker v-model="form.shop_lable_color" default-color="#000"></color-picker>
</el-form-item>
<el-form-item label="高度" label-width="60" class="form-item-child-label">
<slider v-model="form.realstore_title_img_height" :max="1000"></slider>
<el-form-item label="字体大小" label-width="60" class="form-item-child-label">
<slider v-model="form.shop_lable_size" :max="100"></slider>
</el-form-item>
<el-form-item label="内边距" label-width="60" class="form-item-child-label">
<padding :value="form.shop_lable_padding"></padding>
</el-form-item>
<el-form-item label="圆角" label-width="60" class="form-item-child-label">
<radius :value="form.realstore_title_img_radius"></radius>
<radius :value="form.shop_lable_radius"></radius>
</el-form-item>
<el-form-item label="图标间距" label-width="60" class="form-item-child-label">
<slider v-model="form.realstore_title_img_inner_spacing" :max="50"></slider>
<el-form-item label="背景" label-width="60" class="form-item-child-label">
<mult-color-picker :value="form.shop_lable_color_list" :type="form.shop_lable_direction" @update:value="shop_lable_mult_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="距离标题" label-width="60" class="form-item-child-label">
<slider v-model="form.realstore_title_img_outer_spacing" :max="50"></slider>
<el-form-item label="边框颜色" label-width="60" class="form-item-child-label">
<color-picker v-model="form.shop_lable_border_color" default-color="#000"></color-picker>
</el-form-item>
<el-form-item label="边框粗细" label-width="60" class="form-item-child-label">
<slider v-model="form.shop_lable_border_size" :max="100"></slider>
</el-form-item>
</div>
</el-form-item>
@ -31,6 +37,9 @@
<el-form-item label="地址">
<color-text-size-group v-model:color="form.realstore_location_color" v-model:typeface="form.realstore_location_typeface" v-model:size="form.realstore_location_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item v-if="['0', '2'].includes(theme)" label="距离提示">
<color-text-size-group v-model:color="form.realstore_distance_color" v-model:typeface="form.realstore_distance_typeface" v-model:size="form.realstore_distance_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="营业状态">
<div class="flex-col gap-10 w h">
<el-form-item label="默认" label-width="60" class="form-item-child-label">
@ -218,6 +227,11 @@ onMounted(() => {
});
const tabs_name = ref('navigation');
//
const shop_lable_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.shop_lable_color_list = arry;
form.value.shop_lable_direction = type.toString();
};
//
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.realstore_color_list = arry;
form.value.realstore_direction = type.toString();

View File

@ -1,32 +1,34 @@
<template>
<div class="oh" :style="style_container">
<div class="swiper-free-mode" :style="style_img_container + `height: ${ swiper_outer_height }px;`">
<template v-if="form.rotation_direction == 'vertical'">
<swiper :key="carouselKey" class="w flex" :style="`height: ${ swiper_height }px;`" direction="vertical" :loop="true" :speed="swiper_speed" :autoplay="autoplay" :slides-per-view="slides_per_view" :space-between="space_between" :modules="modules">
<swiper-slide v-for="(item, index) in list" :key="index">
<div class="flex-row align-c gap-5">
<template v-if="!isEmpty(item) && is_show('head')">
<div class="oh re">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :style="heading_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.head_img" :style="heading_img_radius"></image-empty>
</template>
</div>
</template>
<span v-if="is_show('nick_name')" class="flex-1 text-line-1" :style="trends_config('nick_name')">{{ item.nick_name }}</span>
<template v-if="is_show('goods_image')">
<image-empty v-model="item.goods_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')">{{ item.goods_title }}</span>
<span v-if="is_show('time')" class="nowarp" :style="trends_config('time')">{{ item.time }}</span>
</div>
</swiper-slide>
</swiper>
<div :style="style_img_container + `height: ${ swiper_outer_height }px;`">
<template v-if="['translation', 'vertical'].includes(form.rotation_direction)">
<div :class="form.rotation_direction == 'vertical' ? 'swiper-free-mode' : ''" :style="`height: ${ swiper_height }px;`">
<swiper :key="carouselKey" class="w flex" :style="`height: ${ swiper_height }px;`" direction="vertical" :loop="true" :speed="swiper_speed" :autoplay="autoplay" :slides-per-view="slides_per_view" :space-between="space_between" :modules="modules">
<swiper-slide v-for="(item, index) in list" :key="index">
<div class="flex-row align-c gap-5">
<template v-if="!isEmpty(item) && is_show('head')">
<div class="oh re">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :style="heading_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.head_img" :style="heading_img_radius"></image-empty>
</template>
</div>
</template>
<span v-if="is_show('nick_name')" class="flex-1 text-line-1" :style="trends_config('nick_name')">{{ item.nick_name }}</span>
<template v-if="is_show('goods_image')">
<image-empty v-model="item.goods_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')">{{ item.goods_title }}</span>
<span v-if="is_show('time')" class="nowarp" :style="trends_config('time')">{{ item.time }}</span>
</div>
</swiper-slide>
</swiper>
</div>
</template>
<template v-else>
<div class="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;`">
<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">
@ -219,11 +221,11 @@ const size_handle = (val: number, type: string) => {
};
//
watchEffect(() => {
const { rotation_direction, interval_time, show_number = 1, is_roll, is_show } = form.value;
const { rotation_direction, interval_time, show_number = 1, is_roll } = form.value;
//
if (is_roll == '1' && list.value.length > 0) {
if ((is_roll == '1' || rotation_direction == 'horizontal') && list.value.length > 0) {
autoplay.value = {
delay: 0,
delay: rotation_direction == 'translation' ? interval_time * 1000 : 0,
waitForTransition: true,
pauseOnMouseEnter: true,
};
@ -236,10 +238,10 @@ watchEffect(() => {
const show_num = show_number || 1;
slides_per_view.value = show_num;
//
swiper_speed.value = interval_time * 1000;
swiper_speed.value = rotation_direction == 'translation' ? 1000 : interval_time * 1000;
//
const { heading_img_height, nick_name_size, goods_img_height, goods_title_size, time_size, data_spacing, common_style, content_padding } = new_style.value;
if (rotation_direction == 'vertical') {
if (['translation', 'vertical'].includes(rotation_direction)) {
swiper_height.value = Math.max(size_handle(heading_img_height, 'head'), size_handle(nick_name_size, 'nick_name'), size_handle(goods_img_height, 'goods_image'), size_handle(goods_title_size, 'goods_title'), size_handle(time_size, 'time')) * show_num + (data_spacing * (show_num - 1));
} else {
//

View File

@ -5,15 +5,16 @@
<div class="divider-line"></div>
<card-container>
<div class="mb-12">展示设置</div>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" active-value="1" inactive-value="0" />
</el-form-item>
<el-form-item label="轮播方向">
<el-form-item label="动画风格">
<el-radio-group v-model="form.rotation_direction">
<el-radio value="vertical">纵向</el-radio>
<el-radio value="horizontal">横向</el-radio>
<el-radio value="vertical">上下</el-radio>
<el-radio value="horizontal">左右</el-radio>
<el-radio value="translation">平移</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.rotation_direction != 'horizontal'" label="自动轮播">
<el-switch v-model="form.is_roll" active-value="1" inactive-value="0" />
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :min="1" :max="50"></slider>
</el-form-item>

View File

@ -79,6 +79,8 @@ interface defaultRealstore {
time_icon: string;
time_text: string;
is_location_show: string;
is_location_title_show: string;
is_location_distance_show: string;
location_type: string;
location_img: uploadList[];
location_icon: string;
@ -98,17 +100,23 @@ interface defaultRealstore {
content_spacing: number;
content_outer_spacing: number;
content_outer_height: number;
realstore_title_img_width: number,
realstore_title_img_height: number,
realstore_title_img_radius: radiusStyle,
realstore_title_img_inner_spacing: number,
realstore_title_img_outer_spacing: number,
shop_lable_color: string;
shop_lable_size: number;
shop_lable_padding: paddingStyle;
shop_lable_radius: radiusStyle;
shop_lable_color_list: color_list[];
shop_lable_direction: string;
shop_lable_border_color: string;
shop_lable_border_size: number;
realstore_title_color: string;
realstore_title_typeface: string;
realstore_title_size: number;
realstore_location_color: string;
realstore_location_typeface: string;
realstore_location_size: number;
realstore_distance_color: string,
realstore_distance_typeface: string,
realstore_distance_size: number,
realstore_default_state_color: string;
realstore_state_color: string;
realstore_state_typeface: string;
@ -174,6 +182,8 @@ const defaultRealstore: defaultRealstore = {
time_icon: 'time',
time_text: '',
is_location_show: '1',
is_location_title_show: '1',
is_location_distance_show: '1',
location_type: 'img-icon',
location_img: [],
location_icon: 'location',
@ -218,23 +228,35 @@ const defaultRealstore: defaultRealstore = {
content_spacing: 10,
content_outer_spacing: 10,
content_outer_height: 204,
realstore_title_img_width: 12,
realstore_title_img_height: 12,
realstore_title_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
shop_lable_color: '#ff0036',
shop_lable_size: 12,
shop_lable_padding: {
padding: 3,
padding_top: 3,
padding_left: 3,
padding_right: 3,
padding_bottom: 3,
},
realstore_title_img_inner_spacing: 5,
realstore_title_img_outer_spacing: 5,
shop_lable_radius: {
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
shop_lable_color_list: [{ color: '', color_percentage: undefined }],
shop_lable_direction: '90deg',
shop_lable_border_color: '#ff0036',
shop_lable_border_size: 1,
realstore_title_color: '#333',
realstore_title_typeface: 'bold',
realstore_title_size: 14,
realstore_location_color: '#666',
realstore_location_typeface: '400',
realstore_location_size: 12,
realstore_distance_color: '#666',
realstore_distance_typeface: '400',
realstore_distance_size: 12,
realstore_default_state_color: '#000',
realstore_state_color: '#52C41A',
realstore_state_typeface: '400',