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

修改弹出框提示地址

v1.3.0
于肖磊 2025-03-05 15:50:08 +08:00
parent e07b13628e
commit 872d1870f7
6 changed files with 1049 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/model-shop/components/icon-style.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<card-container class="card-container">
<el-form-item label="背景">
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="大小">
<template v-if="type == 'text' || (type == 'img-icon' && isIcon)">
<color-text-size-group v-model:color="form.color" v-model:size="form.size" :default-color="form.color" :slider-name="type == 'text' ? '字号' : '大小'" :type-list="['color', 'size']"></color-text-size-group>
</template>
<template v-else>
<div class="flex-col w gap-10">
<el-form-item label="宽度" label-width="40" class="form-item-child-label">
<slider v-model="form.img_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="高度" label-width="40" class="form-item-child-label">
<slider v-model="form.img_height" :max="1000"></slider>
</el-form-item>
</div>
</template>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form"></padding>
</el-form-item>
<el-form-item label="内容圆角">
<radius :value="form"></radius>
</el-form-item>
</card-container>
</template>
<script lang="ts" setup>
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
type: {
type: String,
default: '',
},
isIcon: {
type: Boolean,
default: false,
}
});
const form = ref(props.value);
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.color_list = arry;
form.value.direction = type;
};
// 监听数据变化
watch(() => props.value, (new_value) => {
form.value = new_value;
}, { deep: true, immediate: true });
</script>
<style scoped lang="scss">
.card-container {
padding: 0 !important;
}
</style>

423
src/components/model-shop/index.vue Normal file
View File

@ -0,0 +1,423 @@
<template>
<div class="oh" :style="style_container">
<div :style="style_img_container">
<div :class="outer_class" :style="onter_style">
<template v-if="!['3'].includes(theme)">
<div v-for="(item, index) in list" :key="index" class="re oh" :class="layout_type" :style="layout_style">
<div class="flex-col" :style="layout_img_style">
<div :class="['oh w h', ['0'].includes(theme) ? 'flex-row' : 'flex-col' ]">
<template v-if="!isEmpty(item)">
<div class="oh re" :class="`flex-img${theme}`">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
</div>
</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 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" />
</div>
</div>
<div class="flex-row gap-2 align-c">
<img_or_icon_or_text :value="props.value" type="time" />
<div class="flex-1 flex-row align-c">
<span class="text-line-1" :style="trends_config('state')">{{ item.state }}</span>
<span v-if="!isEmpty(item.state) || !isEmpty(item.business_hours)" :style="'color: #ccc;' + margin_computer(new_style.realstore_business_distance)">|</span>
<span class="text-line-1" :style="trends_config('business_hours')">{{ item.business_hours }}</span>
</div>
</div>
</div>
<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-c gap-2">
<img_or_icon_or_text :value="props.value" type="location" />
<span class="text-line-2 flex-1" :style="trends_config('location')">{{ item.location }}</span>
</div>
<template v-if="!['0', '2'].includes(theme)">
<img_or_icon_or_text :value="props.value" type="navigation" />
</template>
</div>
</template>
</div>
</div>
<template v-if="theme == '0' && form.is_location_show == '1' && !isEmpty(item.location)">
<div :style="border_style"></div>
<div class="flex-row align-c gap-2">
<img_or_icon_or_text :value="props.value" type="location" />
<span class="text-line-2 flex-1" :style="trends_config('location')">{{ item.location }}</span>
</div>
</template>
</div>
</div>
</template>
<template v-else>
<swiper :key="carouselKey" class="w flex" direction="horizontal" :loop="true" :autoplay="autoplay" :slides-per-view="form.carousel_col" :slides-per-group="slides_per_group" :allow-touch-move="false" :space-between="content_outer_spacing" :pause-on-mouse-enter="true" :modules="modules">
<swiper-slide v-for="(item, index) in list" :key="index">
<div :class="layout_type" :style="layout_style">
<div :class="['oh w h', ['0', '4'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item)">
<div class="oh re" :class="`flex-img${theme}`">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
</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="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" />
<span class="text-line-1" :style="trends_config('state')">{{ item.state }}</span>
</div>
<img_or_icon_or_text :value="props.value" type="navigation" />
</div>
</div>
</div>
</div>
</swiper-slide>
</swiper>
</template>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { common_styles_computer, common_img_computer, get_math, gradient_handle, margin_computer, border_computer, box_shadow_computer, radius_computer, background_computer, padding_computer } from '@/utils';
import { old_margin } from "@/utils/common";
import { isEmpty, cloneDeep } from 'lodash';
import ShopAPI from '@/api/shop';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
const modules = [Autoplay];
/**
* @description: 文章列表（渲染）
* @param value{Object} 样式数据
* @param isCommonStyle{Object} 是否为通用样式
*/
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
isCommonStyle: {
type: Boolean,
default: true,
},
});
const form = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
// 选择的风格
const theme = computed(() => form.value.theme);
// 最外层不同风格下的显示
const outer_class = computed(() => {
const flex = ['0', '2' ].includes(theme.value) ? 'flex-col ' : 'flex-row ';
const wrap = theme.value == '3' ? '' : 'flex-wrap ';
return flex + wrap + 'oh';
});
const onter_style = computed(() => {
const radius = `gap: ${new_style.value.content_outer_spacing + 'px'};`;
return `${radius}`;
});
// 公共样式
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 plugins_icon_data = {
name: string;
bg_color: string;
br_color: string;
color: string;
url: string;
}
type data_list = {
title: string;
images: string;
new_cover: string[];
state: string;
location: string;
business_hours: string;
}
const default_list = {
title: '测试门店标题',
location: '测试地址',
images: '',
new_cover: [],
state: '营业中',
business_hours: '7:00-22:00',
};
const list = ref<data_list[]>([]);
// 初始化的时候执行
onMounted(() => {
// 指定商品并且指定商品数组不为空
if (!isEmpty(form.value.data_list) && form.value.data_type == '0') {
list.value = form.value.data_list.map((item: any) => ({
...item.data,
title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
new_cover: item.new_cover,
}));
} else if (!isEmpty(form.value.data_auto_list) && form.value.data_type == '1') {
// 筛选商品并且筛选商品数组不为空
list.value = form.value.data_auto_list;
} else {
list.value = Array(4).fill(default_list);
}
});
const get_products = () => {
const { category_ids, brand_ids, number, order_by_type, order_by_rule, keywords } = form.value;
const params = {
goods_keywords: keywords,
goods_category_ids: category_ids,
goods_brand_ids: brand_ids,
goods_order_by_type: order_by_type,
goods_order_by_rule: order_by_rule,
goods_number: number,
};
list.value = Array(4).fill(default_list);
// 获取商品列表
// ShopAPI.getShopLists(params).then((res: any) => {
// if (!isEmpty(res.data)) {
// list.value = res.data;
// } else {
// list.value = Array(4).fill(default_list);
// }
// });
};
// 取出监听的数据
const watch_data = computed(() => {
const { category_ids, brand_ids, number, order_by_type, order_by_rule, data_type, data_list, keywords } = form.value;
return { category_ids: category_ids, brand_ids: brand_ids, number: number, order_by_type: order_by_type, order_by_rule: order_by_rule, data_type: data_type, data_list: data_list, keyword: keywords };
})
// 初始化的时候不执行, 监听数据变化
watch(() => watch_data.value, (val, oldVal) => {
// 使用JSON.stringify()进行判断 新值和旧值是否一样 不一样就重新获取数据
if ((JSON.stringify(val) !== JSON.stringify(oldVal)) || props.isCommonStyle) {
if (val.data_type == '0') {
if (!isEmpty(val.data_list)) {
list.value = cloneDeep(val.data_list).map((item: any) => ({
...item.data,
title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
new_cover: item.new_cover,
}));
} else {
list.value = Array(4).fill(default_list);
}
} else {
get_products();
}
}
}, { deep: true });
//#endregion
// 门店间距
const content_outer_spacing = computed(() => new_style.value.content_outer_spacing);
// 圆角设置
const content_radius = computed(() => radius_computer(new_style.value.realstore_radius));
// 图片圆角设置
const content_img_radius = computed(() => radius_computer(new_style.value.realstore_img_radius));
// 内边距设置
const content_padding = computed(() => padding_computer(new_style.value.realstore_padding));
const realstore_left_right_width_margin = computed(() => {
const { realstore_margin = old_margin } = new_style.value;
return realstore_margin.margin_left + realstore_margin.margin_right;
});
// 两列风格
const two_columns = computed(() => content_outer_spacing.value + realstore_left_right_width_margin.value * 2 + 'px' );
// 根据传递的参数，从对象中取值
const trends_config = (key: string, type?: string) => {
return style_config(new_style.value[`realstore_${key}_typeface`], new_style.value[`realstore_${key}_size`], new_style.value[`realstore_${key}_color`], type);
};
// 根据传递的值，显示不同的内容
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};`;
}
return style;
};
// 按钮渐变色处理
const button_gradient = () => {
return gradient_handle(new_style.value.realstore_button_color, '180deg');
};
// 不同风格下的样式
const layout_type = computed(() => {
let class_type = '';
switch (theme.value) {
case '0':
class_type = `oh`;
break;
case '1':
class_type = `two-columns oh`;
break;
case '2':
class_type = `oh`;
break;
case '3':
class_type = `multicolumn-columns oh`;
break;
default:
break;
}
return class_type;
});
// 容器样式
const layout_style = computed(() => {
const radius = theme.value == '6' ? '' : content_radius.value;
const width = theme.value == '0' ? `width: calc(100% - ${ realstore_left_right_width_margin.value }px);` : '';
const gradient = gradient_handle(new_style.value.realstore_color_list, new_style.value.realstore_direction) + margin_computer(new_style.value.realstore_margin) + border_computer(new_style.value) + box_shadow_computer(new_style.value);
return `${radius} ${ gradient } ${ width }`;
});
// 容器图片样式
const layout_img_style = computed(() => {
const padding = theme.value == 0 ? content_padding.value : '';
const data = {
background_img_style: new_style.value.realstore_background_img_style,
background_img: new_style.value.realstore_background_img,
}
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;
let spacing = '';
if (['0'].includes(theme.value)) {
spacing = `margin-left: ${spacing_value}px;`;
} else {
spacing = content_padding.value;
}
return `${spacing}`;
});
//#region 轮播设置
// 轮播图key值
const carouselKey = ref('0');
const autoplay = ref<boolean | object>(false);
const slides_per_group = ref(1);
// 内容参数的集合
watchEffect(() => {
// 是否滚动
if (new_style.value.is_roll == '1' && list.value.length > 0) {
autoplay.value = {
delay: (new_style.value.interval_time || 2) * 1000,
pauseOnMouseEnter: true,
};
} else {
autoplay.value = false;
}
// 判断是平移还是整屏滚动
slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : form.value.carousel_col;
// 更新轮播图的key，确保更换时能重新更新轮播图
carouselKey.value = get_math();
});
//#endregion
const realstore_style_list = [
{ name: '单列展示', value: '0', width: 50, height: 50 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '大图展示', value: '2', width:0, height: 180 },
{ name: '左右滑动展示', value: '3', width:0, height: 0 },
]
// 宽度和高度为空的时候，修改默认值
const realstore_img_width = computed(() => {
if (typeof new_style.value.content_img_width == 'number') {
return new_style.value.content_img_width + 'px';
} else {
const list = realstore_style_list.filter(item => item.value == theme.value);
if (list.length > 0) {
return list[0].width + 'px';
} else {
return 'auto';
}
}
});
// 宽度和高度为空的时候，修改默认值
const realstore_img_height = computed(() => {
if (typeof new_style.value.content_img_height == 'number') {
return new_style.value.content_img_height + 'px';
} else {
const list = realstore_style_list.filter(item => item.value == theme.value);
if (list.length > 0) {
return list[0].height + 'px';
} else {
return 'auto';
}
}
});
const content_outer_height = computed(() => new_style.value.content_outer_height + 'px');
</script>
<style lang="scss" scoped>
:deep(.el-image) {
background-color: #fff;
.image-slot img {
width: 5rem;
height: 5rem;
}
}
.two-columns {
width: calc((100% - v-bind(two_columns)) / 2);
}
.multicolumn-columns {
height: v-bind(content_outer_height);
}
.flex-img0 {
height: v-bind(realstore_img_height);
width: v-bind(realstore_img_width);
}
.flex-img1 {
width: 100%;
height: v-bind(realstore_img_height);
}
.flex-img2 {
width: 100%;
height: v-bind(realstore_img_height);
}
.flex-img3 {
width: 100%;
height: 100%;
}
</style>

283
src/components/model-shop/model-shop-content.vue Normal file
View File

@ -0,0 +1,283 @@
<template>
<div class="content">
<el-form :model="form" label-width="75" class="m-h">
<common-content-top :value="form.content_top"></common-content-top>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">展示设置</div>
<el-form-item label="选择风格">
<el-radio-group v-model="form.theme" @change="theme_change">
<el-radio v-for="item in base_list.theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.theme == '3'" label="轮播列数">
<el-radio-group v-model="form.carousel_col">
<el-radio :value="1">单列展示</el-radio>
<el-radio :value="2">两列展示</el-radio>
<el-radio :value="3">三列展示</el-radio>
<el-radio :value="4">四列展示</el-radio>
</el-radio-group>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container class="card-container-br">
<div class="mb-12">门店设置</div>
<!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
<data-filter type="realstore" :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_navigation_show" active-value="1" inactive-value="0"></el-switch></el-col>
</el-row>
<el-row v-if="form.is_navigation_show == '1'" class="mt-10 w">
<el-col :span="24">
<el-radio-group v-model="form.navigation_type" class="mb-10">
<el-radio value="img-icon">图片/图标</el-radio>
<el-radio value="text">文字</el-radio>
</el-radio-group>
<template v-if="form.navigation_type === 'img-icon'">
<upload v-model="form.navigation_img" v-model:icon-value="form.navigation_icon" is-icon :limit="1" size="50"></upload>
</template>
<template v-else>
<el-input v-model="form.navigation_text" placeholder="请输入文字内容" clearable></el-input>
</template>
</el-col>
</el-row>
</el-form-item>
<el-form-item v-if="['0', '2'].includes(form.theme)" label="电话按钮" class="align-s">
<el-row class="w">
<el-col :span="24"><el-switch v-model="form.is_phone_show" active-value="1" inactive-value="0"></el-switch></el-col>
</el-row>
<el-row v-if="form.is_phone_show == '1'" class="mt-10 w">
<el-col :span="24">
<el-radio-group v-model="form.phone_type" class="mb-10">
<el-radio value="img-icon">图片/图标</el-radio>
<el-radio value="text">文字</el-radio>
</el-radio-group>
<template v-if="form.phone_type === 'img-icon'">
<upload v-model="form.phone_img" v-model:icon-value="form.phone_icon" is-icon :limit="1" size="50"></upload>
</template>
<template v-else>
<el-input v-model="form.phone_text" placeholder="请输入文字内容" clearable></el-input>
</template>
</el-col>
</el-row>
</el-form-item>
</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_time_show" active-value="1" inactive-value="0"></el-switch></el-col>
</el-row>
<el-row v-if="form.is_time_show == '1'" class="mt-10 w">
<el-col :span="24">
<el-radio-group v-model="form.time_type" class="mb-10">
<el-radio value="img-icon">图片/图标</el-radio>
<el-radio value="text">文字</el-radio>
</el-radio-group>
<template v-if="form.time_type === 'img-icon'">
<upload v-model="form.time_img" v-model:icon-value="form.time_icon" is-icon :limit="1" size="50"></upload>
</template>
<template v-else>
<el-input v-model="form.time_text" placeholder="请输入文字内容" clearable></el-input>
</template>
</el-col>
</el-row>
</el-form-item>
<el-form-item v-if="form.theme != '3'" label="地址图标" class="align-s">
<el-row class="w">
<el-col :span="24"><el-switch v-model="form.is_location_show" active-value="1" inactive-value="0"></el-switch></el-col>
</el-row>
<el-row v-if="form.is_location_show == '1'" class="mt-10 w">
<el-col :span="24">
<el-radio-group v-model="form.location_type" class="mb-10">
<el-radio value="img-icon">图片/图标</el-radio>
<el-radio value="text">文字</el-radio>
</el-radio-group>
<template v-if="form.location_type === 'img-icon'">
<upload v-model="form.location_img" v-model:icon-value="form.location_icon" is-icon :limit="1" size="50"></upload>
</template>
<template v-else>
<el-input v-model="form.location_text" placeholder="请输入文字内容" clearable></el-input>
</template>
</el-col>
</el-row>
</el-form-item>
</card-container>
</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>
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
import { commonStore } from '@/store';
const common_store = commonStore();
/**
* @description 博客列表（内容）
* @param value{Object} 传过来的数据，用于数据渲染
* @param styles{Object} 样式
*/
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
styles: {
type: Object,
default: () => ({}),
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
});
// 默认值
const state = reactive({
form: props.value,
data: props.styles,
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
const base_list = reactive({
theme_list: [
{ name: '单列展示', value: '0', width: 50, height: 50 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '大图展示', value: '2', width:0, height: 180 },
{ name: '左右滑动展示', value: '3', width:0, height: 0 },
],
data_type_list: [
{ name: '指定门店', value: '0' },
{ name: '筛选门店', value: '1' },
],
field_show_list: [
{ name: '博客标题', value: '3' },
{ name: '日期时间', value: '0' },
{ name: '浏览量', value: '1' },
{ name: '描述', value: '2' },
],
field_desc_row: [
{ name: '一行', value: '1' },
{ name: '两行', value: '2' }
]
});
const emits = defineEmits(['theme_change']);
onMounted(() => {
// 如果历史数据没有操作，则修改默认值
const { content_img_width = '', content_img_height = '' } = data.value;
// 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
if ((typeof content_img_width != 'number' || typeof content_img_height != 'number') && !['3', '4'].includes(form.value.theme)) {
const list = base_list.theme_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
emits('theme_change', list[0].width, list[0].height);
}
}
});
// 主题改变
const theme_change = (val: any) => {
if (val == '3' || val == '4') {
form.value.field_show = ['1', '3'];
} else {
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;
}
} 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;
}
}
// 切换风格时，将对应图片的默认值宽度和高度赋值
const list = base_list.theme_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
// emits('theme_change', list[0].width, list[0].height);
data.value.content_img_width = list[0].width;
data.value.content_img_height = list[0].height;
}
};
// 移除
const data_list_remove = (index: number) => {
form.value.data_list.splice(index, 1);
};
const url_value_multiple_bool = ref(true);
const data_list_replace_index = ref(0);
// 替换
const data_list_replace = (index: number) => {
data_list_replace_index.value = index;
url_value_multiple_bool.value = false;
url_value_dialog_visible.value = true;
};
// 拖动排序
const data_list_sort = (item: any) => {
form.value.data_list = item;
};
// 新增
const add = () => {
url_value_multiple_bool.value = true;
url_value_dialog_visible.value = true;
};
// 开启关闭链接
const url_value_dialog_visible = ref(false);
const url_value_dialog_call_back = (item: any[]) => {
if (url_value_multiple_bool.value) {
item.forEach((child: any) => {
form.value.data_list.push({
id: get_math(),
new_title: '',
new_cover: [],
data: child,
});
});
} else {
form.value.data_list[data_list_replace_index.value] = {
id: get_math(),
new_title: '',
new_cover: form.value.data_list[data_list_replace_index.value]?.new_cover || [],
data: item[0],
};
}
};
// 标题浮起之后博客标题的颜色和字体更新
const switch_chage = (val: string | number | boolean) => {
if (val == '1') {
data.value.name_color = '#fff';
data.value.name_weight = '400';
} else {
data.value.name_color = '#333';
data.value.name_weight = 'bold';
}
};
</script>
<style lang="scss" scoped>
.content {
width: 100%;
}
.img {
width: 4rem;
height: 4rem;
}
.number-show {
:deep(.el-input__wrapper .el-input__inner) {
text-align: left;
}
}
</style>

33
src/components/model-shop/model-shop-setting.vue Normal file
View File

@ -0,0 +1,33 @@
<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>
</template>
<template v-else-if="type == '2'">
<model-realstore-styles :value="form.style" :content="form.content" :default-config="data_config"></model-realstore-styles>
</template>
</div>
</template>
<script setup lang="ts">
/**
* @description: 文章选项卡列表（设置）
* @param type{String} 类型是进入内容组件还是样式组件
* @param value{Object} 样式数据
*/
const props = defineProps({
type: {
type: String,
default: '1',
},
value: {
type: Object,
default: () => ({}),
},
});
const data_config = reactive({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
});
const form = ref(props.value);
</script>

216
src/components/model-shop/model-shop-styles.vue Normal file
View File

@ -0,0 +1,216 @@
<template>
<div class="h">
<el-form :model="form" label-width="75">
<card-container>
<div class="mb-12">内容样式</div>
<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="内容标题">
<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 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 label="营业状态">
<color-text-size-group v-model:color="form.realstore_state_color" v-model:typeface="form.realstore_state_typeface" v-model:size="form.realstore_state_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<template v-if="data.theme != '3'">
<el-form-item label="营业间距">
<margin :value="form.business_distance"></margin>
</el-form-item>
<el-form-item label="营业时间">
<color-text-size-group v-model:color="form.realstore_business_hours_color" v-model:typeface="form.realstore_business_hours_typeface" v-model:size="form.realstore_business_hours_size" default-color="#000000"></color-text-size-group>
</el-form-item>
</template>
<el-form-item label="外间距">
<margin :value="form.realstore_margin"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.realstore_padding"></padding>
</el-form-item>
<el-form-item label="内容圆角">
<radius :value="form.realstore_radius"></radius>
</el-form-item>
<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="多门店间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<template v-if="theme == '3'">
<el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider>
</el-form-item>
</template>
<template v-else>
<el-form-item v-if="data.theme == '0'" label="图片宽度">
<slider v-model="form.content_img_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.content_img_height" :max="1000"></slider>
</el-form-item>
</template>
<el-form-item label="图片圆角">
<radius :value="form.realstore_img_radius"></radius>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form"></shadow-config>
</card-container>
<template v-if="new_tabs.length > 0">
<div class="divider-line"></div>
<card-container>
<div class="mb-12">图标设置</div>
<el-form-item v-if="is_phone_navigation" label="图标间距">
<slider v-model="form.phone_navigation_spacing" :max="100"></slider>
</el-form-item>
<el-tabs v-model="tabs_name" class="content-tabs">
<el-tab-pane v-for="(tab, index) in new_tabs" :key="index" :label="tab.label" :name="tab.name">
<icon-style :key="index" v-model:value="form[`${ tab.name }_style`]" :type="data[`${ tab.name }_type`]" :is-icon="data[`${ tab.name }_type`] == 'img-icon' && !isEmpty(data[`${ tab.name }_icon`])" />
</el-tab-pane>
</el-tabs>
</card-container>
</template>
<template v-if="theme == '3'">
<div class="divider-line"></div>
<card-container class="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>
<template v-if="form.is_roll == '1'">
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
</el-form-item>
<el-form-item label="滚动方式">
<el-radio-group v-model="form.rolling_fashion">
<el-radio value="translation">平移</el-radio>
<el-radio value="cut-screen">切屏</el-radio>
</el-radio-group>
</el-form-item>
</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" />
</div>
</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} 样式数据
* @param content{Object} 内容数据
* @param defaultConfig{Object} 默认配置
*/
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
content: {
type: Object,
default: () => ({}),
},
isCommonStyle: {
type: Boolean,
default: true,
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
});
// 默认值
const state = reactive({
form: props.value,
data: props.content,
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
const theme = computed(() => data.value.theme);
if (['0', '4'].includes(theme.value)) {
if (form.value.realstore_img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.realstore_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.realstore_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.realstore_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.realstore_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.realstore_img_radius.radius = props.defaultConfig.img_radius_0;
form.value.realstore_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
form.value.realstore_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
form.value.realstore_img_radius.radius_top_left = props.defaultConfig.img_radius_0;
form.value.realstore_img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (form.value.realstore_img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.realstore_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.realstore_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.realstore_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.realstore_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.realstore_img_radius.radius = props.defaultConfig.img_radius_1;
form.value.realstore_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
form.value.realstore_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
form.value.realstore_img_radius.radius_top_left = props.defaultConfig.img_radius_1;
form.value.realstore_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
const is_show = (val: { name: string, show: string[] }) => {
return data.value[`is_${ val.name }_show`] === '1' && val.show.includes(data.value.theme);
};
// 图标数组处理一下，确保打开的都能看到
type tabs_type = { name: string; label: string;};
const new_tabs = ref<tabs_type[]>([]);
const is_phone_navigation = ref(false);
onMounted(() => {
// 判断有哪些打开的图标
new_tabs.value = tabs.filter(item => is_show(item));
// 判断打开的图标中是否包含手机和导航
is_phone_navigation.value = new_tabs.value.filter(item => item.name == 'phone' || item.name == 'navigation').length == 2;
});
const tabs_name = ref('navigation');
// 博客背景渐变设置
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;
};
</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>

34
src/utils/popUp.ts Normal file
View File

@ -0,0 +1,34 @@
// 定义一个MessageType类型，可以根据实际情况进行修改
type MessageType = 'info' | 'success' | 'warning' | 'error';
type Message = 'delete' | 'save' | 'edit' | 'add';
export default {
// massageBox封装
message_box: (msg: string, type: MessageType = 'warning') => {
return new Promise((resolve, reject) => {
ElMessageBox.confirm(msg, '温馨提示', {
type: type,
autofocus: false,
confirmButtonText: '确定',
cancelButtonText: '取消',
})
.then(() => {
resolve(true);
})
.catch(() => {
reject(false);
});
});
},
// alert封装
alert: (msg: string, type: MessageType = 'warning') => {
return new Promise((resolve, reject) => {
ElMessageBox.alert(msg, '温馨提示', {
type: type,
autofocus: false,
confirmButtonText: '确定',
}).then(() => {
resolve(true);
});
});
},
};