Merge remote-tracking branch 'origin/dev-yxl' into dev-sws

v1.0.0
sws 2024-09-06 17:05:22 +08:00
commit fddabf7f3e
12 changed files with 116 additions and 64 deletions

View File

@ -34,10 +34,7 @@
<card-container class="h">
<div class="mb-12">边框设置</div>
<el-form-item label="边框显示">
<el-radio-group v-model="form.border_show">
<el-radio value="1">显示</el-radio>
<el-radio value="0">隐藏</el-radio>
</el-radio-group>
<el-switch v-model="form.border_show" active-value="1" inactive-value="0"/>
</el-form-item>
<template v-if="form.border_show == '1'">
<el-form-item label="边框颜色">

View File

@ -83,10 +83,7 @@
<card-container>
<div class="mb-12">边框设置</div>
<el-form-item label="边框显示">
<el-radio-group v-model="form.border_show">
<el-radio value="1">显示</el-radio>
<el-radio value="0">隐藏</el-radio>
</el-radio-group>
<el-switch v-model="form.border_show" active-value="1" inactive-value="0"/>
</el-form-item>
<template v-if="form.border_show == '1'">
<el-form-item label="边框颜色">

View File

@ -231,3 +231,8 @@
z-index: 6;
display: none;
}
.clear-selection {
cursor: pointer;
color: $cr-main;
}

View File

@ -20,7 +20,7 @@
<slider v-model="center_height" :max="3000"></slider>
</card-container>
<card-container class="h selected">
<div class="mb-12 flex-row align-c jc-sb">已选组件<el-button @click="cancel"></el-button></div>
<div class="mb-12 flex-row align-c jc-sb">已选组件<span class="clear-selection" @click="cancel"></span></div>
<div class="assembly">
<div v-if="!isEmpty(diy_data)" class="flex-row flex-wrap gap-10">
<div v-for="(item, index) in diy_data" :key="index" class="item flex jc-sb align-c size-14 cr-3" :class="{ 'item-active': item.show_tabs == '1' }" @click="on_choose(index, item.show_tabs)">{{ item.name }}<icon name="close" color="3" size="10" class="c-pointer" @click="del(index)"></icon></div>
@ -368,6 +368,10 @@ const end_drag = (event: MouseEvent) => {
init_drag_style.value = ``;
if (rect_end.value.width > 16 && rect_end.value.height > 16) {
hot_list.data = [{ name: '热区' + (hot_list.data.length + 1), link: {}, drag_start: cloneDeep(rect_start.value), drag_end: cloneDeep(rect_end.value) }];
diy_data.value.forEach((item: any) => {
item.show_tabs = '0';
});
emits('rightUpdate', {});
}
rect_start.value = { x: 0, y: 0, width: 0, height: 0 };
rect_end.value = { x: 0, y: 0, width: 0, height: 0 };
@ -565,6 +569,79 @@ const rect_style = computed(() => {
});
//#endregion
//#region
const handleKeyUp = (e: KeyboardEvent) => {
let key_code = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
let x = 0;
let y = 0;
//
if (e.key === 'ArrowUp') { //
y = -1;
} else if (e.key === 'ArrowDown') { //
y = 1;
} else if (e.key === 'ArrowLeft') { //
x = -1;
} else if (e.key === 'ArrowRight') { //
x = 1;
}
e.preventDefault();
//
if (key_code.includes(e.key)) {
data_handling(x, y);
}
};
const data_handling = (x: number, y: number) => {
// ,
if (hot_list.data.length > 0) {
//
const { drag_start, drag_end } = hot_list.data[0];
if (isWithinBounds(drag_start.x + x, drag_end.width, 390)) {
hot_list.data[0].drag_start.x += x;
}
if (isWithinBounds(drag_start.y + y, drag_end.height, center_height.value)) {
hot_list.data[0].drag_start.y += y;
}
// ,
const rect1 = { x: drag_start.x, y: drag_start.y, width: drag_end.width, height: drag_end.height }
diy_data.value.forEach(item => {
const rect2 = { x: item.location.x, y: item.location.y, width: item.com_data.com_width, height: item.com_data.com_height };
// 10
if (isRectangleIntersecting(rect1, rect2) == '1') {
// x 0
if (isWithinBounds(item.location.x + x, item.com_data.com_width, 390)) {
item.location.x += x;
}
// Y0
if (isWithinBounds(item.location.y + y, item.com_data.com_height, center_height.value)) {
item.location.y += y;
}
}
});
} else {
diy_data.value.forEach(item => {
//
if (item.show_tabs == '1') {
// x 0
if (isWithinBounds(item.location.x + x, item.com_data.com_width, 390)) {
item.location.x += x;
}
// Y0
if (isWithinBounds(item.location.y + y, item.com_data.com_height, center_height.value)) {
item.location.y += y;
}
}
});
}
};
// coordinate current_size () max_size
const isWithinBounds = (coordinate:number, current_size: number, max_size: number) => coordinate >= 0 && coordinate + current_size <= max_size;
onMounted(() => {
//
document.addEventListener('keyup', handleKeyUp);
});
onUnmounted(() => {
//
document.removeEventListener('keyup', handleKeyUp);
});
//#endregion
defineExpose({
diy_data,

View File

@ -10,7 +10,7 @@
<div v-if="!isEmpty(form.data_source_content)" class="flex-row mt-20 gap-20">
<div class="re flex align-c">
<image-empty v-model="form.data_source_content[form.img_key]" fit="contain" style="width: 10rem;height: 10rem" error-img-style="width: 3rem; height: 3rem;"></image-empty>
<div class="plr-10 bg-f abs replace-data size-10 box-shadow-sm" @click="replace_data"></div>
<div class="plr-10 bg-f abs replace-data size-10" @click="replace_data"></div>
</div>
<div class="flex-1 size-14 text-line-3">{{ form.data_source_content.title || form.data_source_content.name }}</div>
</div>
@ -230,8 +230,9 @@ const replace_data = () => {
height: 2.4rem;
bottom: 0.5rem;
left: 2.1rem;
line-height: 2.4rem;
line-height: 2.2rem;
border-radius: 2rem;
border: 1px solid #ddd;
cursor: pointer;
}
</style>

View File

@ -141,7 +141,7 @@ const base_list = reactive({
],
product_list: [
{ name: '指定商品', value: '0' },
{ name: '商品', value: '1' },
{ name: '选商品', value: '1' },
],
product_category_list: [] as select_1[],
product_brand_list: [] as select_1[],

View File

@ -28,9 +28,9 @@
</el-form-item>
<el-form-item label="搜索按钮" class="align-s">
<el-row class="w">
<el-col :span="24"><el-switch v-model="form.is_search_show"></el-switch></el-col>
<el-col :span="24"><el-switch v-model="form.is_search_show" active-value="1" inactive-value="0"></el-switch></el-col>
</el-row>
<el-row v-if="form.is_search_show" class="mt-10 w">
<el-row v-if="form.is_search_show == '1'" class="mt-10 w">
<el-col :span="24">
<el-radio-group v-model="form.search_type" class="mb-10">
<el-radio value="img-icon">图片/图标</el-radio>

View File

@ -11,10 +11,7 @@
</el-radio-group>
</el-form-item>
<el-form-item label="滑动置顶">
<el-radio-group v-model="form.tabs_top_up">
<el-radio value="1">启用</el-radio>
<el-radio value="0">不启用</el-radio>
</el-radio-group>
<el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
</card-container>
<div class="divider-line"></div>

View File

@ -10,20 +10,14 @@
<url-value v-model="form.title_link"></url-value>
</el-form-item>
<el-form-item label="是否居中">
<el-radio-group v-model="form.is_title_center">
<el-radio :value="0">默认</el-radio>
<el-radio :value="1">居中</el-radio>
</el-radio-group>
<el-switch v-model="form.is_title_center" active-value="1" inactive-value="0"/>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">关键字设置</div>
<el-form-item label="关键字">
<el-radio-group v-model="form.keyword_show">
<el-radio value="1">显示</el-radio>
<el-radio value="0">隐藏</el-radio>
</el-radio-group>
<el-switch v-model="form.keyword_show" active-value="1" inactive-value="0"/>
</el-form-item>
<template v-if="form.keyword_show == '1'">
<drag :data="form.keyword_list" type="card" :space-col="25" @remove="remove" @on-sort="on_sort">
@ -48,10 +42,7 @@
<card-container>
<div class="mb-12">更多设置</div>
<el-form-item label="右侧按钮">
<el-radio-group v-model="form.right_show">
<el-radio value="1">显示</el-radio>
<el-radio value="0">隐藏</el-radio>
</el-radio-group>
<el-switch v-model="form.right_show" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<template v-if="form.right_show == '1'">
<el-form-item label="右侧文字">

View File

@ -45,10 +45,7 @@
<el-input v-model="form.positioning_name" placeholder="请输入默认定位名称" clearable></el-input>
</el-form-item>
<el-form-item label="箭头按钮">
<el-radio-group v-model="form.is_arrows_show">
<el-radio value="1">显示</el-radio>
<el-radio value="0">隐藏</el-radio>
</el-radio-group>
<el-switch v-model="form.is_arrows_show" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
</template>
</card-container>
@ -59,9 +56,7 @@
</template>
<card-container>
<el-form-item label="底部导航">
<el-radio-group v-model="form.bottom_navigation_show">
<el-radio v-for="item in base_list.bottom_navigation" :key="item.value" :value="item.value">{{item.name }}</el-radio>
</el-radio-group>
<el-switch v-model="form.bottom_navigation_show" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
</card-container>
</el-form>
@ -82,11 +77,7 @@ const base_list = reactive({
{ id: '3', name: '风格3', url: new URL(`../../assets/images/components/page-settings/theme-3.png`, import.meta.url).href },
{ id: '4', name: '风格4', url: new URL(`../../assets/images/components/page-settings/theme-4.png`, import.meta.url).href },
{ id: '5', name: '风格5', url: new URL(`../../assets/images/components/page-settings/theme-5.png`, import.meta.url).href },
],
bottom_navigation: [
{ name: '显示', value: '1' },
{ name: '隐藏', value: '0' },
],
]
});
const emit = defineEmits(['update:change-theme']);

View File

@ -42,16 +42,10 @@
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式">
<el-radio-group v-model="form.immersive_style">
<el-radio value="1">开启</el-radio>
<el-radio value="0">关闭</el-radio>
</el-radio-group>
<el-switch v-model="form.immersive_style" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="上滑展示">
<el-radio-group v-model="form.up_slide_display">
<el-radio value="1">保留</el-radio>
<el-radio value="0">关闭</el-radio>
</el-radio-group>
<el-switch v-model="form.up_slide_display" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<el-form-item v-if="['1', '2'].includes(search_content.theme)" label="标题名称">
<color-text-size-group v-model:color="form.header_background_title_color" v-model:typeface="form.header_background_title_typeface" v-model:size="form.header_background_title_size" default-color="#000000"></color-text-size-group>

View File

@ -264,19 +264,6 @@
}
}
}
@media screen and (max-width: 1680px) {
.main .acticons .el-button {
width: 10rem;
}
}
@media screen and (max-width: 1560px) {
.siderbar {
width: 32rem;
}
.drawer-container {
display: none;
}
}
.seat {
background: transparent;
height: 0.2rem;
@ -372,3 +359,18 @@
transform: rotate(12deg) scale(1.05) translateY(0.2rem);
}
}
@media screen and (max-width: 1680px) {
.main .acticons .el-button {
width: 10rem;
}
}
@media screen and (max-width: 1560px) {
.siderbar {
width: 32rem;
}
.drawer-container, .layout-toggle-bar {
display: none;
}
}