sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

多商户内容调测

v1.3.0
于肖磊 2025-03-06 16:32:26 +08:00
parent b6946150f2
commit 710d84cb85
8 changed files with 213 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/model-realstore/index.vue
View File

@ -18,8 +18,12 @@
</template>
<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">
<span class="text-line-2" :style="trends_config('title')">{{ item.title }}</span>
<div class="flex-row jc-sb align-c gap-10">
<div class="text-line-2" :style="trends_config('title') + 'vertical-align: middle;'">
<template v-for="(item1, index1) in new_url_list(item.title_url)" :key="index1">
<img :src="item1.url" class="title-img" :style="title_img_style(item.title_url, index1)" />
</template>{{ item.title }}
</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,7 +38,7 @@
</div>
</div>
</div>
<template v-if="theme !== '0' && form.is_location_show == '1' && !isEmpty(item.location)">
<template v-if="theme !== '0' && ( form.is_location_show == '1' || !isEmpty(item.location))">
<div :style="border_style"></div>
<div class="flex-row jc-sb align-c gap-10">
<div class="flex-row align-b gap-2">
@ -48,7 +52,7 @@
</template>
</div>
</div>
<template v-if="theme == '0' && form.is_location_show == '1' && !isEmpty(item.location)">
<template v-if="theme == '0' && ( form.is_location_show == '1' || !isEmpty(item.location))">
<div :style="border_style"></div>
<div class="flex-row align-b gap-2">
<img-or-icon-or-text :value="props.value" type="location" />
@ -74,7 +78,11 @@
</div>
</template>
<div class="flex-1 flex-col jc-sb gap-10" :style="content_style">
<span class="text-line-2" :style="trends_config('title')">{{ item.title }}</span>
<div class="text-line-2" :style="trends_config('title') + 'vertical-align: middle;'">
<template v-for="(item1, index1) in new_url_list(item.title_url)" :key="index1">
<img :src="item1.url" class="title-img" :style="title_img_style(item.title_url, index1)" />
</template>{{ item.title }}
</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" />
@ -142,9 +150,13 @@ const border_style = computed(() => {
return border;
});
//#region 列表数据
type url = {
url: string;
}
type data_list = {
title: string;
images: string;
title_url: url[],
new_cover: string[];
state: string;
location: string;
@ -153,12 +165,32 @@ type data_list = {
const default_list = {
title: '测试门店标题',
location: '测试地址',
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: [],
state: '营业中',
business_hours: '7:00-22:00',
};
const list = ref<data_list[]>([]);
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 { realstore_title_img_width = 0, realstore_title_img_height = 0, realstore_title_img_radius, realstore_title_img_inner_spacing, realstore_title_img_outer_spacing} = new_style.value;
let style = `width: ${realstore_title_img_width || 0 }px;height: ${ realstore_title_img_height || 0 }px;${ radius_computer(realstore_title_img_radius) }`;
const list = title_url.filter(item1 => !isEmpty(item1.url));
if (index < list.length - 1) {
style += `margin-right: ${ realstore_title_img_inner_spacing || 0}px;`;
} else {
style += `margin-right: ${ realstore_title_img_outer_spacing || 0}px;`;
}
return style;
}
});
// 初始化的时候执行
onMounted(() => {
// 指定商品并且指定商品数组不为空
@ -242,29 +274,13 @@ 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};`;
}
if (type == 'title') {
style += `line-height: ${size > 0 ? size + 3 : 0}px;height: ${size > 0 ? (size + 3) * 2 : 0}px;color: ${color};`;
} else {
style += `color: ${color};`;
}
return style;
};
// 按钮渐变色处理
const button_gradient = () => {
return gradient_handle(new_style.value.realstore_button_color, '180deg');
};
// 不同风格下的样式
const layout_type = computed(() => {
let class_type = '';
@ -302,20 +318,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;
@ -391,6 +393,9 @@ const content_outer_height = computed(() => new_style.value.content_outer_height
height: 5rem;
}
}
.title-img {
object-fit: contain;
}
.two-columns {
width: calc((100% - v-bind(two_columns)) / 2);
}

26
src/components/model-realstore/model-realstore-styles.vue
View File

@ -6,6 +6,25 @@
<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="标题图标">
<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>
<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>
<el-form-item label="圆角" label-width="60" class="form-item-child-label">
<radius :value="form.realstore_title_img_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>
<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>
</div>
</el-form-item>
<el-form-item label="内容标题">
<color-text-size-group v-model:color="form.realstore_title_color" v-model:typeface="form.realstore_title_typeface" v-model:size="form.realstore_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
@ -50,7 +69,7 @@
<el-form-item v-if="data.theme == '0'" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="多门店间距">
<el-form-item label="门店间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<template v-if="theme == '3'">
@ -150,10 +169,6 @@ const props = defineProps({
type: Object,
default: () => ({}),
},
isCommonStyle: {
type: Boolean,
default: true,
},
defaultConfig: {
type: Object,
default: () => ({
@ -207,7 +222,6 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.realstore_color_list = arry;
form.value.realstore_direction = type.toString();
};
const emit = defineEmits(['update:value']);
const common_style_update = (value: any) => {
form.value.common_style = value;
};

88
src/components/model-shop/index.vue
View File

@ -15,10 +15,17 @@
</template>
</div>
</template>
<div class="flex-1 flex-row jc-sb align-c" :style="content_style">
<div class="flex-col jc-sb gap-10">
<span class="text-line-2" :style="trends_config('title')">{{ item.title }}</span>
<span class="text-line-2" :style="trends_config('title')">{{ item.desc }}</span>
<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') + 'vertical-align: middle;'">
<template v-for="(item1, index1) in new_url_list(item.title_url)" :key="index1">
<img :src="item1.url" class="title-img" :style="title_img_style(item.title_url, index1)" />
</template>{{ item.title }}
</div>
<span :class="form.shop_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="trends_config('desc', 'desc')">{{ item.desc }}</span>
</div>
<div v-if="theme == '0'" class="flex-row align-c">
<img-or-icon-or-text :value="props.value" type="right" />
</div>
</div>
</div>
@ -39,6 +46,14 @@
</template>
</div>
</template>
<div class="flex-col jc-sb gap-10" :style="content_style">
<div class="text-line-2" :style="trends_config('title') + 'vertical-align: middle;'">
<template v-for="(item1, index1) in new_url_list(item.title_url)" :key="index1">
<img :src="item1.url" class="title-img" :style="title_img_style(item.title_url, index1)" />
</template>{{ item.title }}
</div>
<span :class="form.shop_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="trends_config('desc', 'desc')">{{ item.desc }}</span>
</div>
</div>
</div>
</swiper-slide>
@ -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<data_list[]>([]);
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;

72
src/components/model-shop/model-shop-content.vue
View File

@ -34,29 +34,31 @@
<!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
<data-filter type="shop" :value="form" :list="form.data_list" :base-list="base_list" @add="add" @data_list_replace="data_list_replace" @data_list_remove="data_list_remove" @data_list_sort="data_list_sort"></data-filter>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">按钮设置</div>
<el-form-item label="右侧按钮" class="align-s">
<el-row class="w">
<el-col :span="24"><el-switch v-model="form.is_right_show" active-value="1" inactive-value="0"></el-switch></el-col>
</el-row>
<el-row v-if="form.is_right_show == '1'" class="mt-10 w">
<el-col :span="24">
<el-radio-group v-model="form.right_type" class="mb-10">
<el-radio value="img-icon">图片/图标</el-radio>
<el-radio value="text">文字</el-radio>
</el-radio-group>
<template v-if="form.right_type === 'img-icon'">
<upload v-model="form.right_img" v-model:icon-value="form.right_icon" is-icon :limit="1" size="50"></upload>
</template>
<template v-else>
<el-input v-model="form.right_text" placeholder="请输入文字内容" clearable></el-input>
</template>
</el-col>
</el-row>
</el-form-item>
</card-container>
<template v-if="form.theme == '0'">
<div class="divider-line"></div>
<card-container>
<div class="mb-12">按钮设置</div>
<el-form-item label="右侧按钮" class="align-s">
<el-row class="w">
<el-col :span="24"><el-switch v-model="form.is_right_show" active-value="1" inactive-value="0"></el-switch></el-col>
</el-row>
<el-row v-if="form.is_right_show == '1'" class="mt-10 w">
<el-col :span="24">
<el-radio-group v-model="form.right_type" class="mb-10">
<el-radio value="img-icon">图片/图标</el-radio>
<el-radio value="text">文字</el-radio>
</el-radio-group>
<template v-if="form.right_type === 'img-icon'">
<upload v-model="form.right_img" v-model:icon-value="form.right_icon" is-icon :limit="1" size="50"></upload>
</template>
<template v-else>
<el-input v-model="form.right_text" placeholder="请输入文字内容" clearable></el-input>
</template>
</el-col>
</el-row>
</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>
@ -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;
}
}
// 切换风格时，将对应图片的默认值宽度和高度赋值

4
src/components/model-shop/model-shop-setting.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="setting-content">
<template v-if="type == '1'">
<model-realstore-content :value="form.content" :styles="form.style" :default-config="data_config"></model-realstore-content>
<model-shop-content :value="form.content" :styles="form.style" :default-config="data_config"></model-shop-content>
</template>
<template v-else-if="type == '2'">
<model-realstore-styles :value="form.style" :content="form.content" :default-config="data_config"></model-realstore-styles>
<model-shop-styles :value="form.style" :content="form.content" :default-config="data_config"></model-shop-styles>
</template>
</div>
</template>

67
src/components/model-shop/model-shop-styles.vue
View File

@ -6,11 +6,30 @@
<el-form-item label="内容背景">
<background-common v-model:color_list="form.shop_color_list" v-model:direction="form.shop_direction" v-model:img_style="form.shop_background_img_style" v-model:img="form.shop_background_img" @mult_color_picker_event="mult_color_picker_event" />
</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">
<slider v-model="form.shop_title_img_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="高度" label-width="60" class="form-item-child-label">
<slider v-model="form.shop_title_img_height" :max="1000"></slider>
</el-form-item>
<el-form-item label="圆角" label-width="60" class="form-item-child-label">
<radius :value="form.shop_title_img_radius"></radius>
</el-form-item>
<el-form-item label="图标间距" label-width="60" class="form-item-child-label">
<slider v-model="form.shop_title_img_inner_spacing" :max="50"></slider>
</el-form-item>
<el-form-item label="距离标题" label-width="60" class="form-item-child-label">
<slider v-model="form.shop_title_img_outer_spacing" :max="50"></slider>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="内容标题">
<color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="地址">
<color-text-size-group v-model:color="form.shop_location_color" v-model:typeface="form.shop_location_typeface" v-model:size="form.shop_location_size" default-color="#000000"></color-text-size-group>
<el-form-item label="店铺介绍">
<color-text-size-group v-model:color="form.shop_desc_color" v-model:typeface="form.shop_desc_typeface" v-model:size="form.shop_desc_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.shop_margin"></margin>
@ -24,7 +43,7 @@
<el-form-item v-if="data.theme == '0'" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="多门店间距">
<el-form-item label="商户间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<template v-if="theme == '3'">
@ -48,7 +67,7 @@
<!-- 阴影配置 -->
<shadow-config v-model="form"></shadow-config>
</card-container>
<template v-if="data.is_right_show == '1'">
<template v-if="data.is_right_show == '1' && theme == '0'">
<div class="divider-line"></div>
<card-container>
<div class="mb-12">图标设置</div>
@ -75,18 +94,6 @@
</template>
</card-container>
</template>
<template v-else>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">内边线设置</div>
<!-- 边框处理 -->
<border-config v-model:show="form.content_border_is_show" v-model:color="form.content_border_color" v-model:style="form.content_border_style" v-model:size="form.content_border_size">
<el-form-item label="外间距">
<margin :value="form.content_border_margin"></margin>
</el-form-item>
</border-config>
</card-container>
</template>
</el-form>
<div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_style_update" />
@ -94,13 +101,6 @@
</template>
<script setup lang="ts">
import { isEmpty } from "lodash";
// 动态生成 tab 配置
const tabs = [
{ label: "导航", name: "navigation", show: ['0', '1', '2', '3']},
{ label: "时间", name: "time", show: ['0', '1', '2', '3']},
{ label: "电话", name: "phone", show: ['0', '2' ] },
{ label: "地址", name: "location", show: ['0', '1', '2' ]}
];
/**
* @description: 博客列表（样式）
* @param value{Object} 样式数据
@ -116,10 +116,6 @@ const props = defineProps({
type: Object,
default: () => ({}),
},
isCommonStyle: {
type: Boolean,
default: true,
},
defaultConfig: {
type: Object,
default: () => ({
@ -161,26 +157,9 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.shop_color_list = arry;
form.value.shop_direction = type.toString();
};
const emit = defineEmits(['update:value']);
const common_style_update = (value: any) => {
form.value.common_style = value;
};
</script>
<style lang="scss" scoped>
:deep(.el-tabs.content-tabs) {
.el-tabs__header.is-top {
background: #fff;
margin: 0;
padding-top: 0rem;
}
.el-tabs__item.is-top {
padding: 0;
align-items: center;
width: 9rem;
font-size: 1.4rem;
}
.el-tabs__active-bar{
width: 100%;
}
}
</style>

22
src/config/const/realstore.ts
View File

@ -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,// 导航栏之间的间距

56
src/config/const/shop.ts
View File

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