From 710d84cb85879921e02ca80fa3c57c6562453674 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com> Date: Thu, 6 Mar 2025 16:32:26 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E5=95=86=E6=88=B7=E5=86=85=E5=AE=B9?= =?UTF-8?q?=E8=B0=83=E6=B5=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/model-realstore/index.vue | 79 +++++++++-------- .../model-realstore-styles.vue | 26 ++++-- src/components/model-shop/index.vue | 88 +++++++++---------- .../model-shop/model-shop-content.vue | 72 +++++++-------- .../model-shop/model-shop-setting.vue | 4 +- .../model-shop/model-shop-styles.vue | 67 +++++--------- src/config/const/realstore.ts | 22 ++++- src/config/const/shop.ts | 56 ++++++------ 8 files changed, 213 insertions(+), 201 deletions(-) diff --git a/src/components/model-realstore/index.vue b/src/components/model-realstore/index.vue index 80158a79..3ebfc323 100644 --- a/src/components/model-realstore/index.vue +++ b/src/components/model-realstore/index.vue @@ -18,8 +18,12 @@
-
- {{ item.title }} +
+
+ {{ item.title }} +
@@ -34,7 +38,7 @@
-
+
+
+ {{ item.title }} +
+ {{ item.desc }} +
@@ -89,17 +104,13 @@ const onter_style = computed(() => { // 公共样式 const style_container = computed(() => common_styles_computer(new_style.value.common_style)); const style_img_container = computed(() => common_img_computer(new_style.value.common_style)); -const border_style = computed(() => { - const { content_border_margin, content_border_size, content_border_is_show, content_border_color, content_border_style } = new_style.value; - let border = ``; - if (content_border_is_show == '1') { - border += `${ margin_computer(content_border_margin) };border-width: ${content_border_size.padding_top}px ${content_border_size.padding_right}px ${content_border_size.padding_bottom}px ${content_border_size.padding_left}px;border-style: ${ content_border_style };border-color: ${content_border_color};` - } - return border; -}); //#region 列表数据 +type url = { + url: string; +} type data_list = { title: string; + title_url: url[], images: string; new_cover: string[]; desc: string; @@ -107,10 +118,30 @@ type data_list = { const default_list = { title: '测试商户标题', desc: '测试商户描述', + title_url: [{ url: 'http://shopxo.com/static/diy/images/layout/siderbar/data-magic.png'}, { url: 'http://shopxo.com/static/diy/images/layout/siderbar/goods-list.png'}], images: '', new_cover: [], }; const list = ref([]); +const new_url_list = computed(() => { + return (title_url: url[]) => { + return title_url.filter(item1 => !isEmpty(item1.url)); + } +}); +// 标题图片样式 +const title_img_style = computed(() => { + return (title_url: url[], index: number) => { + const { shop_title_img_width = 0, shop_title_img_height = 0, shop_title_img_radius, shop_title_img_inner_spacing, shop_title_img_outer_spacing} = new_style.value; + let style = `width: ${shop_title_img_width || 0 }px;height: ${ shop_title_img_height || 0 }px;${ radius_computer(shop_title_img_radius) }`; + const list = title_url.filter(item1 => !isEmpty(item1.url)); + if (index < list.length - 1) { + style += `margin-right: ${ shop_title_img_inner_spacing || 0}px;`; + } else { + style += `margin-right: ${ shop_title_img_outer_spacing || 0}px;`; + } + return style; + } +}); // 初始化的时候执行 onMounted(() => { // 指定商品并且指定商品数组不为空 @@ -193,24 +224,7 @@ const trends_config = (key: string, type?: string) => { }; // 根据传递的值，显示不同的内容 const style_config = (typeface: string, size: number, color: string | object, type?: string) => { - let style = `font-weight:${typeface}; font-size: ${size}px;`; - if (type == 'gradient') { - style += button_gradient(); - } else if (type == 'title') { - if (['1', '6'].includes(theme.value)) { - style += `line-height: ${size}px;height: ${size}px;color: ${color};`; - } else if (['0', '2', '3', '4', '5'].includes(theme.value)) { - style += `line-height: ${size > 0 ? size + 3 : 0}px;height: ${size > 0 ? (size + 3) * 2 : 0}px;color: ${color};`; - } - } else if (type == 'desc') { - if (form.value.simple_desc_row == '2') { - style += `line-height: ${size > 0 ? size + 3 : 0}px;height: ${size > 0 ? (size + 3) * 2 : 0}px;color: ${color};`; - } else { - style += `line-height: ${size}px;height: ${size}px;color: ${color};`; - } - } else { - style += `color: ${color};`; - } + let style = `font-weight:${typeface}; font-size: ${size}px;color: ${color};`; return style; }; // 按钮渐变色处理 @@ -254,20 +268,6 @@ const layout_img_style = computed(() => { } return padding + background_computer(data); }); -// 判断是否显示对应的内容 -const is_show = (index: string) => { - return form.value.is_show.includes(index); -}; -// 超过多少行隐藏 -const text_line = computed(() => { - let line = ''; - if (['1', '6'].includes(theme.value)) { - line = 'text-line-1'; - } else if (['0', '2', '3', '4', '5'].includes(theme.value)) { - line = 'text-line-2'; - } - return line; -}); // 内容区域的样式 const content_style = computed(() => { const spacing_value = new_style.value.content_spacing; diff --git a/src/components/model-shop/model-shop-content.vue b/src/components/model-shop/model-shop-content.vue index 46514844..9f4af749 100644 --- a/src/components/model-shop/model-shop-content.vue +++ b/src/components/model-shop/model-shop-content.vue @@ -34,29 +34,31 @@ -
- -
按钮设置
- - - - - - - - 图片/图标 - 文字 - - - - - - - + @@ -138,20 +140,20 @@ const theme_change = (val: any) => { form.value.field_show = ['0', '1', '3']; } if (val == '0') { - if (data.value.realstore_img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.realstore_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.realstore_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.realstore_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.realstore_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) { - data.value.realstore_img_radius.radius = props.defaultConfig.img_radius_0; - data.value.realstore_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0; - data.value.realstore_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0; - data.value.realstore_img_radius.radius_top_left = props.defaultConfig.img_radius_0; - data.value.realstore_img_radius.radius_top_right = props.defaultConfig.img_radius_0; + if (data.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) { + data.value.shop_img_radius.radius = props.defaultConfig.img_radius_0; + data.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0; + data.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0; + data.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_0; + data.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_0; } } else { - if (data.value.realstore_img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.realstore_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.realstore_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.realstore_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.realstore_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) { - data.value.realstore_img_radius.radius = props.defaultConfig.img_radius_1; - data.value.realstore_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1; - data.value.realstore_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1; - data.value.realstore_img_radius.radius_top_left = props.defaultConfig.img_radius_1; - data.value.realstore_img_radius.radius_top_right = props.defaultConfig.img_radius_1; + if (data.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) { + data.value.shop_img_radius.radius = props.defaultConfig.img_radius_1; + data.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1; + data.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1; + data.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_1; + data.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1; } } // 切换风格时，将对应图片的默认值宽度和高度赋值 diff --git a/src/components/model-shop/model-shop-setting.vue b/src/components/model-shop/model-shop-setting.vue index f8f7eb62..e5b134cc 100644 --- a/src/components/model-shop/model-shop-setting.vue +++ b/src/components/model-shop/model-shop-setting.vue @@ -1,10 +1,10 @@ diff --git a/src/components/model-shop/model-shop-styles.vue b/src/components/model-shop/model-shop-styles.vue index b3918829..7ab863ac 100644 --- a/src/components/model-shop/model-shop-styles.vue +++ b/src/components/model-shop/model-shop-styles.vue @@ -6,11 +6,30 @@ + +
+ + + + + + + + + + + + + + + +
+ - - + + @@ -24,7 +43,7 @@ - + diff --git a/src/config/const/realstore.ts b/src/config/const/realstore.ts index 5d2937b6..5a330653 100644 --- a/src/config/const/realstore.ts +++ b/src/config/const/realstore.ts @@ -29,7 +29,7 @@ type icon_style = { const common_icon_style: icon_style = { color_list: [{ color: '', color_percentage: undefined }], direction: '90deg', - color: '#000', + color: '#ccc', size: 12, img_width: 14, img_height: 14, @@ -91,6 +91,11 @@ 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, realstore_title_color: string; realstore_title_typeface: string; realstore_title_size: number; @@ -199,10 +204,21 @@ 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, + }, + realstore_title_img_inner_spacing: 5, + realstore_title_img_outer_spacing: 5, realstore_title_color: '#333', realstore_title_typeface: 'bold', realstore_title_size: 14, - realstore_location_color: '#333', + realstore_location_color: '#666', realstore_location_typeface: '400', realstore_location_size: 12, realstore_default_state_color: '#000', @@ -216,7 +232,7 @@ const defaultRealstore: defaultRealstore = { margin_left: 5, margin_right: 5, }, - realstore_business_hours_color: '#333', + realstore_business_hours_color: '#666', realstore_business_hours_typeface: '400', realstore_business_hours_size: 12, phone_navigation_spacing: 10,// 导航栏之间的间距 diff --git a/src/config/const/shop.ts b/src/config/const/shop.ts index 8aac942d..036c4d15 100644 --- a/src/config/const/shop.ts +++ b/src/config/const/shop.ts @@ -10,7 +10,7 @@ interface defaultRealstore { shop_desc: string; shop_desc_row: string; data_list: string[]; - is_is_right_show: string; + is_right_show: string; right_type: string; right_img: uploadList[]; right_icon: string; @@ -30,19 +30,17 @@ interface defaultRealstore { content_spacing: number; content_outer_spacing: number; content_outer_height: number; + shop_title_img_width: number, + shop_title_img_height: number, + shop_title_img_radius: radiusStyle, + shop_title_img_inner_spacing: number, + shop_title_img_outer_spacing: number, shop_title_color: string; shop_title_typeface: string; shop_title_size: number; - shop_location_color: string; - shop_location_typeface: string; - shop_location_size: number; - shop_state_color: string; - shop_state_typeface: string; - shop_state_size: number; - shop_business_distance: marginStyle; - shop_business_hours_color: string; - shop_business_hours_typeface: string; - shop_business_hours_size: number; + shop_desc_color: string; + shop_desc_typeface: string; + shop_desc_size: number; right_style: object, is_roll: string; interval_time: number; @@ -70,10 +68,10 @@ const defaultRealstore: defaultRealstore = { shop_desc: '1', shop_desc_row: '1', data_list: [], - is_is_right_show: '1', + is_right_show: '1', right_type: 'img-icon', right_img: [], - right_icon: 'send', + right_icon: 'arrow-right', right_text: '', }, style: { @@ -115,29 +113,27 @@ const defaultRealstore: defaultRealstore = { content_spacing: 10, content_outer_spacing: 10, content_outer_height: 204, + shop_title_img_width: 12, + shop_title_img_height: 12, + shop_title_img_radius: { + radius: 0, + radius_top_left: 0, + radius_top_right: 0, + radius_bottom_left: 0, + radius_bottom_right: 0, + }, + shop_title_img_inner_spacing: 5, + shop_title_img_outer_spacing: 5, shop_title_color: '#333', shop_title_typeface: 'bold', shop_title_size: 14, - shop_location_color: '#333', - shop_location_typeface: '400', - shop_location_size: 12, - shop_state_color: '#52C41A', - shop_state_typeface: '400', - shop_state_size: 12, - shop_business_distance: { - margin: 0, - margin_top: 0, - margin_bottom: 0, - margin_left: 5, - margin_right: 5, - }, - shop_business_hours_color: '#333', - shop_business_hours_typeface: '400', - shop_business_hours_size: 12, + shop_desc_color: '#666', + shop_desc_typeface: '400', + shop_desc_size: 12, right_style: { color_list: [{ color: '', color_percentage: undefined }], direction: '90deg', - color: '#000', + color: '#ccc', size: 12, img_width: 14, img_height: 14,