From cf357bf9298d11f9065208693d9fff9376e67abe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 14 Mar 2025 18:42:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=94=80=E5=94=AE=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E6=98=BE=E7=A4=BA=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/data-filter/index.vue   |  2 +-
 src/components/model-realstore/index.vue      | 31 +++++++---
 .../model-realstore-content.vue               | 18 +++++-
 .../model-realstore-styles.vue                | 34 +++++++---
 src/components/model-salerecords/index.vue    | 62 ++++++++++---------
 .../model-salerecords-content.vue             | 13 ++--
 src/config/const/realstore.ts                 | 52 +++++++++++-----
 7 files changed, 138 insertions(+), 74 deletions(-)

diff --git a/src/components/common/data-filter/index.vue b/src/components/common/data-filter/index.vue
index ea14c60d..58e42c23 100644
--- a/src/components/common/data-filter/index.vue
+++ b/src/components/common/data-filter/index.vue
@@ -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>
     <!-- 商品 -->
diff --git a/src/components/model-realstore/index.vue b/src/components/model-realstore/index.vue
index 2ea86fed..0618e0f9 100644
--- a/src/components/model-realstore/index.vue
+++ b/src/components/model-realstore/index.vue
@@ -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: '',
diff --git a/src/components/model-realstore/model-realstore-content.vue b/src/components/model-realstore/model-realstore-content.vue
index e8c6fb6c..1bac41ea 100644
--- a/src/components/model-realstore/model-realstore-content.vue
+++ b/src/components/model-realstore/model-realstore-content.vue
@@ -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>
diff --git a/src/components/model-realstore/model-realstore-styles.vue b/src/components/model-realstore/model-realstore-styles.vue
index c59bfc2a..d118b65a 100644
--- a/src/components/model-realstore/model-realstore-styles.vue
+++ b/src/components/model-realstore/model-realstore-styles.vue
@@ -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();
diff --git a/src/components/model-salerecords/index.vue b/src/components/model-salerecords/index.vue
index 53fc0263..5c77ac68 100644
--- a/src/components/model-salerecords/index.vue
+++ b/src/components/model-salerecords/index.vue
@@ -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 {
         // 设置初始偏移量
diff --git a/src/components/model-salerecords/model-salerecords-content.vue b/src/components/model-salerecords/model-salerecords-content.vue
index 64ec406a..37baffea 100644
--- a/src/components/model-salerecords/model-salerecords-content.vue
+++ b/src/components/model-salerecords/model-salerecords-content.vue
@@ -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>
diff --git a/src/config/const/realstore.ts b/src/config/const/realstore.ts
index 8d7575a3..7960ae88 100644
--- a/src/config/const/realstore.ts
+++ b/src/config/const/realstore.ts
@@ -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',