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> </template>
<div class="flex-1 flex-col" :style="content_style"> <div class="flex-1 flex-col" :style="content_style">
<div class="flex-col jc-sb gap-10"> <div class="flex-col jc-sb gap-10">
<div class="flex-row jc-sb align-c"> <div class="flex-row jc-sb align-c gap-10">
<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 v-if="['0', '2'].includes(theme)" class="flex-row align-c" :style="`gap: ${ new_style.phone_navigation_spacing }px;`"> <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="phone" />
<img-or-icon-or-text :value="props.value" type="navigation" /> <img-or-icon-or-text :value="props.value" type="navigation" />
@ -34,7 +38,7 @@
</div> </div>
</div> </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 :style="border_style"></div>
<div class="flex-row jc-sb align-c gap-10"> <div class="flex-row jc-sb align-c gap-10">
<div class="flex-row align-b gap-2"> <div class="flex-row align-b gap-2">
@ -48,7 +52,7 @@
</template> </template>
</div> </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 :style="border_style"></div>
<div class="flex-row align-b gap-2"> <div class="flex-row align-b gap-2">
<img-or-icon-or-text :value="props.value" type="location" /> <img-or-icon-or-text :value="props.value" type="location" />
@ -74,7 +78,11 @@
</div> </div>
</template> </template>
<div class="flex-1 flex-col jc-sb gap-10" :style="content_style"> <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-row jc-sb align-c">
<div class="flex-1 flex-row gap-2 align-c"> <div class="flex-1 flex-row gap-2 align-c">
<img-or-icon-or-text :value="props.value" type="time" /> <img-or-icon-or-text :value="props.value" type="time" />
@ -142,9 +150,13 @@ const border_style = computed(() => {
return border; return border;
}); });
//#region 列表数据 //#region 列表数据
type url = {
url: string;
}
type data_list = { type data_list = {
title: string; title: string;
images: string; images: string;
title_url: url[],
new_cover: string[]; new_cover: string[];
state: string; state: string;
location: string; location: string;
@ -153,12 +165,32 @@ type data_list = {
const default_list = { const default_list = {
title: '测试门店标题', title: '测试门店标题',
location: '测试地址', 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: '', images: '',
new_cover: [], new_cover: [],
state: '营业中', state: '营业中',
business_hours: '7:00-22:00', business_hours: '7:00-22:00',
}; };
const list = ref<data_list[]>([]); 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(() => { onMounted(() => {
// 指定商品并且指定商品数组不为空 // 指定商品并且指定商品数组不为空
@ -242,29 +274,13 @@ const trends_config = (key: string, type?: string) => {
// 根据传递的值，显示不同的内容 // 根据传递的值，显示不同的内容
const style_config = (typeface: string, size: number, color: string | object, type?: string) => { const style_config = (typeface: string, size: number, color: string | object, type?: string) => {
let style = `font-weight:${typeface}; font-size: ${size}px;`; let style = `font-weight:${typeface}; font-size: ${size}px;`;
if (type == 'gradient') { if (type == 'title') {
style += button_gradient(); style += `line-height: ${size > 0 ? size + 3 : 0}px;height: ${size > 0 ? (size + 3) * 2 : 0}px;color: ${color};`;
} 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 { } else {
style += `color: ${color};`; style += `color: ${color};`;
} }
return style; return style;
}; };
// 按钮渐变色处理
const button_gradient = () => {
return gradient_handle(new_style.value.realstore_button_color, '180deg');
};
// 不同风格下的样式 // 不同风格下的样式
const layout_type = computed(() => { const layout_type = computed(() => {
let class_type = ''; let class_type = '';
@ -302,20 +318,6 @@ const layout_img_style = computed(() => {
} }
return padding + background_computer(data); 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 content_style = computed(() => {
const spacing_value = new_style.value.content_spacing; 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; height: 5rem;
} }
} }
.title-img {
object-fit: contain;
}
.two-columns { .two-columns {
width: calc((100% - v-bind(two_columns)) / 2); 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="内容背景"> <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" /> <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>
<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="内容标题"> <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> <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> </el-form-item>
@ -50,7 +69,7 @@
<el-form-item v-if="data.theme == '0'" label="内容间距"> <el-form-item v-if="data.theme == '0'" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider> <slider v-model="form.content_spacing" :max="100"></slider>
</el-form-item> </el-form-item>
<el-form-item label="多门店间距"> <el-form-item label="门店间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider> <slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item> </el-form-item>
<template v-if="theme == '3'"> <template v-if="theme == '3'">
@ -150,10 +169,6 @@ const props = defineProps({
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
isCommonStyle: {
type: Boolean,
default: true,
},
defaultConfig: { defaultConfig: {
type: Object, type: Object,
default: () => ({ default: () => ({
@ -207,7 +222,6 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.realstore_color_list = arry; form.value.realstore_color_list = arry;
form.value.realstore_direction = type.toString(); form.value.realstore_direction = type.toString();
}; };
const emit = defineEmits(['update:value']);
const common_style_update = (value: any) => { const common_style_update = (value: any) => {
form.value.common_style = value; form.value.common_style = value;
}; };

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

@ -15,10 +15,17 @@
</template> </template>
</div> </div>
</template> </template>
<div class="flex-1 flex-row jc-sb align-c" :style="content_style"> <div class="flex-1 flex-row jc-sb gap-10" :style="content_style">
<div class="flex-col jc-sb gap-10"> <div class="flex-1 flex-col jc-sb gap-10">
<span class="text-line-2" :style="trends_config('title')">{{ item.title }}</span> <div class="text-line-2" :style="trends_config('title') + 'vertical-align: middle;'">
<span class="text-line-2" :style="trends_config('title')">{{ item.desc }}</span> <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> </div>
</div> </div>
@ -39,6 +46,14 @@
</template> </template>
</div> </div>
</template> </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>
</div> </div>
</swiper-slide> </swiper-slide>
@ -89,17 +104,13 @@ const onter_style = computed(() => {
// 公共样式 // 公共样式
const style_container = computed(() => common_styles_computer(new_style.value.common_style)); 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 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 列表数据 //#region 列表数据
type url = {
url: string;
}
type data_list = { type data_list = {
title: string; title: string;
title_url: url[],
images: string; images: string;
new_cover: string[]; new_cover: string[];
desc: string; desc: string;
@ -107,10 +118,30 @@ type data_list = {
const default_list = { const default_list = {
title: '测试商户标题', title: '测试商户标题',
desc: '测试商户描述', 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: '', images: '',
new_cover: [], new_cover: [],
}; };
const list = ref<data_list[]>([]); 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(() => { onMounted(() => {
// 指定商品并且指定商品数组不为空 // 指定商品并且指定商品数组不为空
@ -193,24 +224,7 @@ const trends_config = (key: string, type?: string) => {
}; };
// 根据传递的值，显示不同的内容 // 根据传递的值，显示不同的内容
const style_config = (typeface: string, size: number, color: string | object, type?: string) => { const style_config = (typeface: string, size: number, color: string | object, type?: string) => {
let style = `font-weight:${typeface}; font-size: ${size}px;`; let style = `font-weight:${typeface}; font-size: ${size}px;color: ${color};`;
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};`;
}
return style; return style;
}; };
// 按钮渐变色处理 // 按钮渐变色处理
@ -254,20 +268,6 @@ const layout_img_style = computed(() => {
} }
return padding + background_computer(data); 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 content_style = computed(() => {
const spacing_value = new_style.value.content_spacing; 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> <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> </card-container>
<div class="divider-line"></div> <template v-if="form.theme == '0'">
<card-container> <div class="divider-line"></div>
<div class="mb-12">按钮设置</div> <card-container>
<el-form-item label="右侧按钮" class="align-s"> <div class="mb-12">按钮设置</div>
<el-row class="w"> <el-form-item label="右侧按钮" class="align-s">
<el-col :span="24"><el-switch v-model="form.is_right_show" active-value="1" inactive-value="0"></el-switch></el-col> <el-row class="w">
</el-row> <el-col :span="24"><el-switch v-model="form.is_right_show" active-value="1" inactive-value="0"></el-switch></el-col>
<el-row v-if="form.is_right_show == '1'" class="mt-10 w"> </el-row>
<el-col :span="24"> <el-row v-if="form.is_right_show == '1'" class="mt-10 w">
<el-radio-group v-model="form.right_type" class="mb-10"> <el-col :span="24">
<el-radio value="img-icon">图片/图标</el-radio> <el-radio-group v-model="form.right_type" class="mb-10">
<el-radio value="text">文字</el-radio> <el-radio value="img-icon">图片/图标</el-radio>
</el-radio-group> <el-radio value="text">文字</el-radio>
<template v-if="form.right_type === 'img-icon'"> </el-radio-group>
<upload v-model="form.right_img" v-model:icon-value="form.right_icon" is-icon :limit="1" size="50"></upload> <template v-if="form.right_type === 'img-icon'">
</template> <upload v-model="form.right_img" v-model:icon-value="form.right_icon" is-icon :limit="1" size="50"></upload>
<template v-else> </template>
<el-input v-model="form.right_text" placeholder="请输入文字内容" clearable></el-input> <template v-else>
</template> <el-input v-model="form.right_text" placeholder="请输入文字内容" clearable></el-input>
</el-col> </template>
</el-row> </el-col>
</el-form-item> </el-row>
</card-container> </el-form-item>
</card-container>
</template>
</el-form> </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> <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> </div>
@ -138,20 +140,20 @@ const theme_change = (val: any) => {
form.value.field_show = ['0', '1', '3']; form.value.field_show = ['0', '1', '3'];
} }
if (val == '0') { 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)) { 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.realstore_img_radius.radius = props.defaultConfig.img_radius_0; data.value.shop_img_radius.radius = props.defaultConfig.img_radius_0;
data.value.realstore_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0; data.value.shop_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.shop_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.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_0;
data.value.realstore_img_radius.radius_top_right = props.defaultConfig.img_radius_0; data.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_0;
} }
} else { } 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)) { 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.realstore_img_radius.radius = props.defaultConfig.img_radius_1; data.value.shop_img_radius.radius = props.defaultConfig.img_radius_1;
data.value.realstore_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1; data.value.shop_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.shop_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.shop_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.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> <template>
<div class="setting-content"> <div class="setting-content">
<template v-if="type == '1'"> <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>
<template v-else-if="type == '2'"> <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> </template>
</div> </div>
</template> </template>

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

@ -6,11 +6,30 @@
<el-form-item label="内容背景"> <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" /> <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>
<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="内容标题"> <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> <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>
<el-form-item label="地址"> <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> <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>
<el-form-item label="外间距"> <el-form-item label="外间距">
<margin :value="form.shop_margin"></margin> <margin :value="form.shop_margin"></margin>
@ -24,7 +43,7 @@
<el-form-item v-if="data.theme == '0'" label="内容间距"> <el-form-item v-if="data.theme == '0'" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider> <slider v-model="form.content_spacing" :max="100"></slider>
</el-form-item> </el-form-item>
<el-form-item label="多门店间距"> <el-form-item label="商户间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider> <slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item> </el-form-item>
<template v-if="theme == '3'"> <template v-if="theme == '3'">
@ -48,7 +67,7 @@
<!-- 阴影配置 --> <!-- 阴影配置 -->
<shadow-config v-model="form"></shadow-config> <shadow-config v-model="form"></shadow-config>
</card-container> </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> <div class="divider-line"></div>
<card-container> <card-container>
<div class="mb-12">图标设置</div> <div class="mb-12">图标设置</div>
@ -75,18 +94,6 @@
</template> </template>
</card-container> </card-container>
</template> </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> </el-form>
<div class="divider-line"></div> <div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_style_update" /> <common-styles :value="form.common_style" @update:value="common_style_update" />
@ -94,13 +101,6 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { isEmpty } from "lodash"; 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: 博客列表（样式） * @description: 博客列表（样式）
* @param value{Object} 样式数据 * @param value{Object} 样式数据
@ -116,10 +116,6 @@ const props = defineProps({
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
isCommonStyle: {
type: Boolean,
default: true,
},
defaultConfig: { defaultConfig: {
type: Object, type: Object,
default: () => ({ default: () => ({
@ -161,26 +157,9 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.shop_color_list = arry; form.value.shop_color_list = arry;
form.value.shop_direction = type.toString(); form.value.shop_direction = type.toString();
}; };
const emit = defineEmits(['update:value']);
const common_style_update = (value: any) => { const common_style_update = (value: any) => {
form.value.common_style = value; form.value.common_style = value;
}; };
</script> </script>
<style lang="scss" scoped> <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> </style>

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

@ -29,7 +29,7 @@ type icon_style = {
const common_icon_style: icon_style = { const common_icon_style: icon_style = {
color_list: [{ color: '', color_percentage: undefined }], color_list: [{ color: '', color_percentage: undefined }],
direction: '90deg', direction: '90deg',
color: '#000', color: '#ccc',
size: 12, size: 12,
img_width: 14, img_width: 14,
img_height: 14, img_height: 14,
@ -91,6 +91,11 @@ interface defaultRealstore {
content_spacing: number; content_spacing: number;
content_outer_spacing: number; content_outer_spacing: number;
content_outer_height: 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_color: string;
realstore_title_typeface: string; realstore_title_typeface: string;
realstore_title_size: number; realstore_title_size: number;
@ -199,10 +204,21 @@ const defaultRealstore: defaultRealstore = {
content_spacing: 10, content_spacing: 10,
content_outer_spacing: 10, content_outer_spacing: 10,
content_outer_height: 204, 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_color: '#333',
realstore_title_typeface: 'bold', realstore_title_typeface: 'bold',
realstore_title_size: 14, realstore_title_size: 14,
realstore_location_color: '#333', realstore_location_color: '#666',
realstore_location_typeface: '400', realstore_location_typeface: '400',
realstore_location_size: 12, realstore_location_size: 12,
realstore_default_state_color: '#000', realstore_default_state_color: '#000',
@ -216,7 +232,7 @@ const defaultRealstore: defaultRealstore = {
margin_left: 5, margin_left: 5,
margin_right: 5, margin_right: 5,
}, },
realstore_business_hours_color: '#333', realstore_business_hours_color: '#666',
realstore_business_hours_typeface: '400', realstore_business_hours_typeface: '400',
realstore_business_hours_size: 12, realstore_business_hours_size: 12,
phone_navigation_spacing: 10,// 导航栏之间的间距 phone_navigation_spacing: 10,// 导航栏之间的间距

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

@ -10,7 +10,7 @@ interface defaultRealstore {
shop_desc: string; shop_desc: string;
shop_desc_row: string; shop_desc_row: string;
data_list: string[]; data_list: string[];
is_is_right_show: string; is_right_show: string;
right_type: string; right_type: string;
right_img: uploadList[]; right_img: uploadList[];
right_icon: string; right_icon: string;
@ -30,19 +30,17 @@ interface defaultRealstore {
content_spacing: number; content_spacing: number;
content_outer_spacing: number; content_outer_spacing: number;
content_outer_height: 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_color: string;
shop_title_typeface: string; shop_title_typeface: string;
shop_title_size: number; shop_title_size: number;
shop_location_color: string; shop_desc_color: string;
shop_location_typeface: string; shop_desc_typeface: string;
shop_location_size: number; shop_desc_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;
right_style: object, right_style: object,
is_roll: string; is_roll: string;
interval_time: number; interval_time: number;
@ -70,10 +68,10 @@ const defaultRealstore: defaultRealstore = {
shop_desc: '1', shop_desc: '1',
shop_desc_row: '1', shop_desc_row: '1',
data_list: [], data_list: [],
is_is_right_show: '1', is_right_show: '1',
right_type: 'img-icon', right_type: 'img-icon',
right_img: [], right_img: [],
right_icon: 'send', right_icon: 'arrow-right',
right_text: '', right_text: '',
}, },
style: { style: {
@ -115,29 +113,27 @@ const defaultRealstore: defaultRealstore = {
content_spacing: 10, content_spacing: 10,
content_outer_spacing: 10, content_outer_spacing: 10,
content_outer_height: 204, 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_color: '#333',
shop_title_typeface: 'bold', shop_title_typeface: 'bold',
shop_title_size: 14, shop_title_size: 14,
shop_location_color: '#333', shop_desc_color: '#666',
shop_location_typeface: '400', shop_desc_typeface: '400',
shop_location_size: 12, shop_desc_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,
right_style: { right_style: {
color_list: [{ color: '', color_percentage: undefined }], color_list: [{ color: '', color_percentage: undefined }],
direction: '90deg', direction: '90deg',
color: '#000', color: '#ccc',
size: 12, size: 12,
img_width: 14, img_width: 14,
img_height: 14, img_height: 14,