解决冲突
于肖磊
commit
dd0f8f5e84
Binary file not shown.
|
Before Width: | Height: | Size: 964 B |
Binary file not shown.
|
Before Width: | Height: | Size: 633 B |
Binary file not shown.
|
Before Width: | Height: | Size: 877 B |
Binary file not shown.
|
Before Width: | Height: | Size: 468 B |
Binary file not shown.
|
Before Width: | Height: | Size: 734 B |
Binary file not shown.
|
Before Width: | Height: | Size: 604 B |
Binary file not shown.
|
Before Width: | Height: | Size: 767 B |
Binary file not shown.
|
Before Width: | Height: | Size: 593 B |
|
|
@ -54,7 +54,7 @@
|
|||
<el-button @click="mult_del_event">删除{{ upload_type_name }}</el-button>
|
||||
<!-- <el-cascader :show-all-levels="false" clearable></el-cascader> -->
|
||||
<div class="right-classify ml-12">
|
||||
<transform-category :data="type_data_list" :check-img-ids="check_img_ids" :placeholder="upload_type_name + '移动至'" @call-back="transform_category_event"></transform-category>
|
||||
<transform-category :data="type_data_list" :check-img-ids="check_img_ids" :type="upload_type_name" :placeholder="upload_type_name + '移动至'" @call-back="transform_category_event"></transform-category>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-search">
|
||||
|
|
|
|||
|
|
@ -38,6 +38,10 @@ const props = defineProps({
|
|||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: '图片', // tree/list
|
||||
},
|
||||
});
|
||||
interface cascaderData {
|
||||
value: string;
|
||||
|
|
@ -153,7 +157,7 @@ const confirm = () => {
|
|||
});
|
||||
} else {
|
||||
if (!props.checkImgIds) {
|
||||
ElMessage.warning('请先选择图片!');
|
||||
ElMessage.warning('请先选择' + props.type + '!');
|
||||
}
|
||||
if (!category_id.value) {
|
||||
ElMessage.warning('请先选择分组!');
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="oh" :style="style_container">
|
||||
<div class="re oh" :style="style">
|
||||
<div class="flex-warp" :class="article_theme_class" :style="article_theme !== '3' ? article_spacing : ''">
|
||||
<div v-if="!['4'].includes(article_theme)" class="flex-warp" :class="article_theme_class" :style="article_theme !== '3' ? article_spacing : ''">
|
||||
<template v-for="(item, index) in data_list" :key="index">
|
||||
<div class="item bg-f oh" :class="article_theme == '0' ? 'flex-row' : 'flex-col'" :style="article_style">
|
||||
<template v-if="article_theme !== '3'">
|
||||
|
|
@ -25,6 +25,30 @@
|
|||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else class="oh" :class="article_theme_class">
|
||||
<el-carousel :key="carousel_key" indicator-position="none" :interval="interval_time" arrow="never" :autoplay="is_roll ? true : false">
|
||||
<el-carousel-item v-for="(item1, index1) in article_carousel_list" :key="index1" class="flex" :style="article_spacing">
|
||||
<div v-for="(item, index) in item1.carousel_list" :key="index" class="item bg-f oh flex-col" :style="article_style">
|
||||
<template v-if="item.new_cover.length > 0">
|
||||
<image-empty v-model="item.new_cover[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
|
||||
</template>
|
||||
<template v-else> <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> </template>
|
||||
<div class="jc-sb flex-1 flex-col" :style="article_theme !== '0' ? content_padding : ''">
|
||||
<div class="title text-line-2" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
|
||||
<div class="flex-row jc-sb gap-8 align-e mt-10">
|
||||
<div :style="article_date">{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div>
|
||||
<div v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
|
||||
<icon name="eye"></icon>
|
||||
<div>
|
||||
{{ item.data.access_count ? item.data.access_count : '16' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -57,7 +81,6 @@ interface ArticleList {
|
|||
new_title: string;
|
||||
new_cover: uploadList[];
|
||||
}
|
||||
const containerRef = ref<HTMLElement | null>(null);
|
||||
// 数据
|
||||
const data_list = ref<ArticleList[]>([]);
|
||||
// 风格
|
||||
|
|
@ -81,8 +104,7 @@ const content_spacing = ref('');
|
|||
// 文章间距
|
||||
const article_spacing = ref('');
|
||||
const article_spacing_children = ref('');
|
||||
const article_item_width = ref('104');
|
||||
const article_item_height = ref('104');
|
||||
const article_item_height = ref('155');
|
||||
|
||||
const article_style = ref({});
|
||||
const default_data_list: ArticleList = {
|
||||
|
|
@ -91,8 +113,16 @@ const default_data_list: ArticleList = {
|
|||
new_title: '测试文章标题',
|
||||
new_cover: [],
|
||||
};
|
||||
const get_auto_data_list = async (new_content: any) => {
|
||||
const { category, number, sort, sort_rules, is_cover } = new_content;
|
||||
// 轮播图列数
|
||||
const carousel_col = ref('2');
|
||||
// 轮播图key值
|
||||
const carousel_key = ref('0');
|
||||
// 轮播图定时轮播
|
||||
const interval_time = ref(2000);
|
||||
// 轮播图是否滚动
|
||||
const is_roll = ref(1);
|
||||
const get_auto_data_list = async () => {
|
||||
const { category, number, sort, sort_rules, is_cover } = new_content.value;
|
||||
const new_data = {
|
||||
article_keywords: '',
|
||||
article_category_ids: category.join(','),
|
||||
|
|
@ -116,32 +146,44 @@ const get_auto_data_list = async (new_content: any) => {
|
|||
data_list.value = Array(4).fill(default_data_list);
|
||||
}
|
||||
};
|
||||
const data_type_is_change = ref(0);
|
||||
watch(
|
||||
() => data_type_is_change.value,
|
||||
(newVal, oldValue) => {
|
||||
if (newVal !== oldValue && String(newVal) === '1') {
|
||||
get_auto_data_list(props.value?.content);
|
||||
|
||||
const new_content = computed(() => props.value?.content || {});
|
||||
const new_style = computed(() => props.value?.style || {});
|
||||
watchEffect(() => {
|
||||
if (new_content.value.data_type == '0') {
|
||||
if (!isEmpty(new_content.value.data_list)) {
|
||||
data_list.value = new_content.value.data_list;
|
||||
data_list.value = cloneDeep(new_content.value.data_list);
|
||||
} else {
|
||||
data_list.value = Array(4).fill(default_data_list);
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
} else {
|
||||
get_auto_data_list();
|
||||
}
|
||||
});
|
||||
// 轮播宽度
|
||||
const multicolumn_columns_width = computed(() => {
|
||||
const { carousel_col } = toRefs(new_content.value);
|
||||
// 计算间隔的空间。(gap * gap数量) / 模块数量
|
||||
let gap = carousel_col.value !== '0' ? (new_style.value.article_spacing * carousel_col.value) / (Number(carousel_col.value) + 1) : '0';
|
||||
return `calc(${100 / (Number(carousel_col.value) + 1)}% - ${gap}px)`;
|
||||
});
|
||||
// 文章内容高度
|
||||
const article_name_height_computer = computed(() => {
|
||||
return new_style.value.name_size * 2.4 + 'px';
|
||||
});
|
||||
const article_name_line_height_computer = computed(() => {
|
||||
return new_style.value.name_size * 1.2 + 'px';
|
||||
});
|
||||
// 轮播高度
|
||||
const carousel_height_computer = computed(() => {
|
||||
return new_style.value.name_size * 2 + new_style.value.article_height + 'px';
|
||||
});
|
||||
watch(
|
||||
props.value,
|
||||
(newVal, oldValue) => {
|
||||
const new_content = newVal?.content;
|
||||
const new_style = newVal?.style;
|
||||
// 内容
|
||||
data_type_is_change.value = new_content.data_type;
|
||||
if (String(new_content.data_type) === '0') {
|
||||
if (!isEmpty(new_content.data_list)) {
|
||||
data_list.value = new_content.data_list;
|
||||
data_list.value = cloneDeep(new_content.data_list);
|
||||
} else {
|
||||
data_list.value = Array(4).fill(default_data_list);
|
||||
}
|
||||
}
|
||||
|
||||
article_theme.value = new_content.theme;
|
||||
field_show.value = new_content.field_show;
|
||||
// 样式
|
||||
|
|
@ -169,7 +211,13 @@ watch(
|
|||
} else if (article_theme.value == '3') {
|
||||
style.value = `padding: 0 ${new_style.content_spacing}px;background:#fff;` + content_radius.value;
|
||||
} else if (article_theme.value == '4') {
|
||||
article_item_width.value = `${new_style.article_width}px`;
|
||||
// 更新轮播图的key，确保更换时能重新更新轮播图
|
||||
carousel_col.value = new_content.carousel_col || '1';
|
||||
carousel_key.value = new_style.interval_time + new_style.is_roll;
|
||||
// 滚动时间
|
||||
interval_time.value = (new_style.interval_time || 2) * 1000;
|
||||
// 是否滚动修改
|
||||
is_roll.value = new_style.is_roll;
|
||||
article_item_height.value = `${new_style.article_height}px`;
|
||||
article_style.value += content_radius.value;
|
||||
}
|
||||
|
|
@ -177,7 +225,7 @@ watch(
|
|||
style_container.value = common_styles_computer(new_style.common_style);
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
const article_theme_class = computed(() => {
|
||||
switch (article_theme.value) {
|
||||
|
|
@ -189,10 +237,33 @@ const article_theme_class = computed(() => {
|
|||
return 'style3 flex-col';
|
||||
case '3':
|
||||
return 'style4 flex-col';
|
||||
case '4':
|
||||
return 'style5 flex-row';
|
||||
default:
|
||||
return 'style5';
|
||||
}
|
||||
});
|
||||
|
||||
interface ArticleCarouselList {
|
||||
carousel_list: ArticleList[];
|
||||
}
|
||||
const article_carousel_list = computed(() => {
|
||||
// 深拷贝一下，确保不会出现问题
|
||||
const cloneList = cloneDeep(data_list.value);
|
||||
// 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
|
||||
if (cloneList.length > 0) {
|
||||
// 每页显示的数量
|
||||
const num = Number(carousel_col.value) + 1;
|
||||
// 存储数据显示
|
||||
let nav_list: ArticleCarouselList[] = [];
|
||||
// 拆分的数量
|
||||
const split_num = Math.ceil(cloneList.length / num);
|
||||
for (let i = 0; i < split_num; i++) {
|
||||
nav_list.push({ carousel_list: cloneList.slice(i * num, (i + 1) * num) });
|
||||
}
|
||||
return nav_list;
|
||||
} else {
|
||||
// 否则的话，就返回全部的信息
|
||||
return [{ carousel_list: cloneList }];
|
||||
}
|
||||
return `style${article_theme.value}`;
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -232,12 +303,24 @@ const article_theme_class = computed(() => {
|
|||
}
|
||||
.style5 {
|
||||
.item {
|
||||
min-width: v-bind(article_item_width);
|
||||
width: v-bind(article_item_width);
|
||||
width: v-bind(multicolumn_columns_width);
|
||||
min-width: v-bind(multicolumn_columns_width);
|
||||
.img {
|
||||
width: 100%;
|
||||
height: v-bind(article_item_height);
|
||||
max-height: v-bind(article_item_height);
|
||||
}
|
||||
.title {
|
||||
height: v-bind(article_name_height_computer);
|
||||
line-height: v-bind(article_name_line_height_computer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-carousel) {
|
||||
width: 100%;
|
||||
.el-carousel__container {
|
||||
// height: v-bind(article_item_height);
|
||||
height: v-bind(carousel_height_computer);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@
|
|||
<el-form-item label="内间距">
|
||||
<padding :value="form.padding"></padding>
|
||||
</el-form-item>
|
||||
|
||||
<template v-if="theme == '0'">
|
||||
<el-form-item label="内容间距">
|
||||
<slider v-model="form.content_spacing"></slider>
|
||||
|
|
@ -35,14 +34,24 @@
|
|||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="theme == '4'">
|
||||
<el-form-item label="内容宽度">
|
||||
<slider v-model="form.article_width" :max="1000"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容高度">
|
||||
<slider v-model="form.article_height" :max="1000"></slider>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
<template v-if="theme == '4'">
|
||||
<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>
|
||||
<el-form-item label="间隔时间">
|
||||
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
</template>
|
||||
</el-form>
|
||||
<div class="divider-line"></div>
|
||||
<common-styles :value="form.common_style" @update:value="common_style_update" />
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ watch(
|
|||
new_data.content.theme = new_data.content.article_theme;
|
||||
new_data.content.data_type = new_data.content.tabs_list[0].data_type;
|
||||
new_data.content.category = new_data.content.tabs_list[0].category;
|
||||
new_data.content.carousel_col = new_data.content.article_carousel_col;
|
||||
new_data.content.data_list = new_data.content.tabs_list[0].data_list;
|
||||
new_data.content.data_ids = new_data.content.tabs_list[0].data_ids;
|
||||
new_data.content.number = new_data.content.tabs_list[0].number;
|
||||
|
|
|
|||
|
|
@ -16,6 +16,11 @@
|
|||
<el-radio v-for="item in base_list.article_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 == '4'" label="轮播列数">
|
||||
<el-radio-group v-model="form.article_carousel_col">
|
||||
<el-radio v-for="item in base_list.carousel_col_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
<card-container>
|
||||
|
|
@ -123,6 +128,12 @@ const base_list = reactive({
|
|||
{ name: '无图模式', value: '3' },
|
||||
{ name: '左右滑动展示', value: '4' },
|
||||
],
|
||||
carousel_col_list: [
|
||||
{ name: '单列展示', value: '0' },
|
||||
{ name: '两列展示', value: '1' },
|
||||
{ name: '三列展示', value: '2' },
|
||||
{ name: '四列展示', value: '3' },
|
||||
],
|
||||
data_type_list: [
|
||||
{ name: '选择文章', value: '0' },
|
||||
{ name: '筛选文章', value: '1' },
|
||||
|
|
|
|||
|
|
@ -50,14 +50,24 @@
|
|||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="theme == '4'">
|
||||
<el-form-item label="内容宽度">
|
||||
<slider v-model="form.article_width" :max="1000"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容高度">
|
||||
<slider v-model="form.article_height" :max="1000"></slider>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
<template v-if="theme == '4'">
|
||||
<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>
|
||||
<el-form-item label="间隔时间">
|
||||
<slider v-model="form.interval_time" :max="100"></slider>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
</template>
|
||||
</el-form>
|
||||
<div class="divider-line"></div>
|
||||
<common-styles :value="form.common_style" @update:value="common_styles_update" />
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
</div>
|
||||
<div v-if="form.is_shop_show">
|
||||
<template v-if="form.shop_type == 'text'">
|
||||
<div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${ new_style.shop_button_text_color };`">{{ form.shop_button_text }}</div>
|
||||
<div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
</div>
|
||||
<div v-if="form.is_shop_show">
|
||||
<template v-if="form.shop_type == 'text'">
|
||||
<div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${ new_style.shop_button_text_color };`">{{ form.shop_button_text }}</div>
|
||||
<div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
</div>
|
||||
<div v-if="form.is_shop_show">
|
||||
<template v-if="form.shop_type == 'text'">
|
||||
<div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${ new_style.shop_button_text_color };`">{{ form.shop_button_text }}</div>
|
||||
<div class="plr-11 ptb-3 round cr-f" :style="trends_config('button', 'gradient') + `color: ${new_style.shop_button_text_color};`">{{ form.shop_button_text }}</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
|
||||
|
|
@ -206,23 +206,23 @@ const default_list = {
|
|||
bg_color: '#EA3323',
|
||||
br_color: '',
|
||||
color: '#fff',
|
||||
url: ''
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
name: '包邮',
|
||||
bg_color: '',
|
||||
br_color: '#EA3323',
|
||||
color: '#EA3323',
|
||||
url: ''
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
name: '领劵',
|
||||
bg_color: '',
|
||||
br_color: '#EA9223',
|
||||
color: '#EA9223',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
url: '',
|
||||
},
|
||||
],
|
||||
};
|
||||
const list = ref<data_list[]>([]);
|
||||
|
||||
|
|
@ -369,15 +369,15 @@ const button_gradient = () => {
|
|||
return gradient_handle(new_style.value.shop_button_color, '90deg');
|
||||
};
|
||||
// icon标志显示样式
|
||||
const icon_style = (item: { bg_color: string; color: string; br_color: string; }) => {
|
||||
const icon_style = (item: { bg_color: string; color: string; br_color: string }) => {
|
||||
let style = `background: ${item.bg_color};color: ${item.color};`;
|
||||
if (!isEmpty(item.br_color)) {
|
||||
style += `border: 1px solid ${item.br_color};`
|
||||
style += `border: 1px solid ${item.br_color};`;
|
||||
} else {
|
||||
style += `border: 1px solid ${item.bg_color};`
|
||||
style += `border: 1px solid ${item.bg_color};`;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
};
|
||||
// 公共样式
|
||||
const style_container = computed(() => {
|
||||
if (props.isCommonStyle) {
|
||||
|
|
@ -391,16 +391,16 @@ const style_container = computed(() => {
|
|||
// 记录当前显示的轮播图的数据
|
||||
// 不换行显示
|
||||
const multicolumn_columns_width = computed(() => {
|
||||
const { single_line_number } = toRefs(form.value);
|
||||
// 计算间隔的空间。(gap * gap数量) / 模块数量
|
||||
let gap = (new_style.value.content_outer_spacing * (single_line_number.value - 1)) / single_line_number.value;
|
||||
return `calc(${ 100 / single_line_number.value }% - ${ gap }px)` ;
|
||||
const { carousel_col } = toRefs(form.value);
|
||||
// 计算间隔的空间。(gap * gap数量) / 模块数量
|
||||
let gap = (new_style.value.content_outer_spacing * (carousel_col.value - 1)) / carousel_col.value;
|
||||
return `calc(${100 / carousel_col.value}% - ${gap}px)`;
|
||||
});
|
||||
const multicolumn_columns_height = computed(() => new_style.value.content_outer_height + 'px');
|
||||
const interval_list = ref({
|
||||
time: 2000,
|
||||
is_roll: true,
|
||||
notice_length: 1
|
||||
notice_length: 1,
|
||||
});
|
||||
interface nav_list {
|
||||
split_list: data_list[];
|
||||
|
|
@ -411,7 +411,7 @@ const shop_content_list = computed(() => {
|
|||
// 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
|
||||
if (cloneList.length > 0) {
|
||||
// 每页显示的数量
|
||||
const num = form.value.single_line_number;
|
||||
const num = form.value.carousel_col;
|
||||
// 存储数据显示
|
||||
let nav_list: nav_list[] = [];
|
||||
// 拆分的数量
|
||||
|
|
@ -424,7 +424,7 @@ const shop_content_list = computed(() => {
|
|||
// 否则的话，就返回全部的信息
|
||||
return [{ split_list: cloneList }];
|
||||
}
|
||||
})
|
||||
});
|
||||
// 轮播图定时显示
|
||||
const interval_time = ref(2000);
|
||||
// 轮播图是否滚动
|
||||
|
|
@ -447,7 +447,7 @@ watchEffect(() => {
|
|||
interval_list.value = {
|
||||
time: time,
|
||||
is_roll: display_is_roll,
|
||||
notice_length: notice_length
|
||||
notice_length: notice_length,
|
||||
};
|
||||
// 更新轮播图的key，确保更换时能重新更新轮播图
|
||||
carouselKey.value = get_math();
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
<el-radio v-for="item in base_list.product_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.theme == '5'" label="单行显示">
|
||||
<el-radio-group v-model="form.single_line_number" class="ml-4">
|
||||
<el-form-item v-if="form.theme == '5'" label="轮播列数">
|
||||
<el-radio-group v-model="form.carousel_col" class="ml-4">
|
||||
<el-radio :value="1">1个</el-radio>
|
||||
<el-radio :value="2">2个</el-radio>
|
||||
<el-radio :value="3">3个</el-radio>
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@
|
|||
<el-radio v-for="item in base_list.product_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.theme == '5'" label="单行显示">
|
||||
<el-radio-group v-model="form.single_line_number" class="ml-4">
|
||||
<el-form-item v-if="form.theme == '5'" label="轮播列数">
|
||||
<el-radio-group v-model="form.carousel_col" class="ml-4">
|
||||
<el-radio :value="1">1个</el-radio>
|
||||
<el-radio :value="2">2个</el-radio>
|
||||
<el-radio :value="3">3个</el-radio>
|
||||
|
|
|
|||
|
|
@ -24,16 +24,6 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||
name: 'Dashboard',
|
||||
meta: { title: 'dashboard', icon: 'homepage', affix: true },
|
||||
},
|
||||
{
|
||||
path: '401',
|
||||
component: () => import('@/views/error-page/401.vue'),
|
||||
meta: { hidden: true },
|
||||
},
|
||||
{
|
||||
path: '404',
|
||||
component: () => import('@/views/error-page/404.vue'),
|
||||
meta: { hidden: true },
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
@ -52,7 +42,16 @@ const router = createRouter({
|
|||
* 重置路由
|
||||
*/
|
||||
export function resetRouter() {
|
||||
router.replace({ path: '/login' });
|
||||
router.replace({ path: '/dashboard' });
|
||||
}
|
||||
// 重定向到首页的守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.matched.length === 0) {
|
||||
//如果未匹配到路由
|
||||
from.name ? next({ name: from.name }) : next({ path: '/' });
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
|
|||
|
|
@ -187,12 +187,21 @@ p {
|
|||
}
|
||||
// 链接弹窗表格用到 ------ end
|
||||
|
||||
|
||||
.el-color-predefine__colors .el-color-predefine__color-selector{
|
||||
.el-color-predefine__colors .el-color-predefine__color-selector {
|
||||
box-shadow: 0 0.2rem 0.8rem rgba(50, 55, 58, 0.1);
|
||||
}
|
||||
.el-color-picker .el-color-picker__trigger .el-color-picker__color {
|
||||
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
|
||||
background-size: 12px 12px;
|
||||
background-position: 0 0, 6px 0, 6px -6px, 0 6px;
|
||||
}
|
||||
background-position:
|
||||
0 0,
|
||||
6px 0,
|
||||
6px -6px,
|
||||
0 6px;
|
||||
}
|
||||
|
||||
// 全屏轮播大小调整
|
||||
.loading-custom {
|
||||
--el-loading-spinner-size: 13rem;
|
||||
--el-loading-fullscreen-spinner-size: 13rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -328,14 +328,14 @@ export const tabs_style = (color: string, style: string | number | boolean | und
|
|||
* 如果环境变量VITE_APP_BASE_API被设置为'/dev-api'，则从本地开发环境中导入临时数据
|
||||
* 否则，从cookie中获取资源主机地址
|
||||
* 这种设计允许开发者在不同的环境中灵活切换资源URL的来源，以适应不同的开发和生产需求
|
||||
*
|
||||
* @param directory {string} - 资源目录名称
|
||||
* @returns {Promise<string>} 返回一个Promise，解析为包含资源URL的字符串
|
||||
*/
|
||||
export const online_url = async () => {
|
||||
export const online_url = async (directory: string) => {
|
||||
if (import.meta.env.VITE_APP_BASE_API == '/dev-api') {
|
||||
let temp_data = await import(import.meta.env.VITE_APP_BASE_API == '/dev-api' ? '../../temp.d' : '../../temp_pro.d');
|
||||
return temp_data.default.temp_attachment_host + '/static/app/tabbar/';
|
||||
return temp_data.default.temp_attachment_host + directory;
|
||||
} else {
|
||||
return get_cookie('attachment_host') + '/static/app/tabbar/';
|
||||
return get_cookie('attachment_host') + directory;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,105 +0,0 @@
|
|||
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Page401',
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const state = reactive({
|
||||
errGif: `../../assets/401_images/401.gif`,
|
||||
ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
|
||||
dialogVisible: false,
|
||||
});
|
||||
|
||||
const { errGif, ewizardClap, dialogVisible } = toRefs(state);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function back() {
|
||||
router.back();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="errPage-container">
|
||||
<el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back"> 返回 </el-button>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<h1 class="text-jumbo text-ginormous">Oops!</h1>
|
||||
gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
|
||||
<h2>你没有权限去该页面</h2>
|
||||
<h6>如有不满请联系你领导</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>或者你可以去:</li>
|
||||
<li class="link-type">
|
||||
<router-link to="/dashboard"> 回首页 </router-link>
|
||||
</li>
|
||||
<li class="link-type">
|
||||
<a href="https://www.taobao.com/">随便看看</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click.prevent="dialogVisible = true">点我看图</a>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream." />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog v-model="dialogVisible" title="随便看">
|
||||
<img :src="ewizardClap" class="pan-img" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.errPage-container {
|
||||
width: 800px;
|
||||
max-width: 100%;
|
||||
margin: 100px auto;
|
||||
|
||||
.pan-back-btn {
|
||||
color: #fff;
|
||||
background: #008489;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.pan-gif {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pan-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.text-jumbo {
|
||||
font-size: 60px;
|
||||
font-weight: 700;
|
||||
color: #484848;
|
||||
}
|
||||
|
||||
.list-unstyled {
|
||||
font-size: 14px;
|
||||
|
||||
li {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #008489;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,237 +0,0 @@
|
|||
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Page404',
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
function message() {
|
||||
return 'The webmaster said that you can not enter this page...';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wscn-http404-container"></div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wscn-http404-container {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.wscn-http404 {
|
||||
position: relative;
|
||||
width: 1200px;
|
||||
padding: 0 50px;
|
||||
overflow: hidden;
|
||||
|
||||
.pic-404 {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 600px;
|
||||
overflow: hidden;
|
||||
|
||||
&__parent {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__child {
|
||||
position: absolute;
|
||||
|
||||
&.left {
|
||||
top: 17px;
|
||||
left: 220px;
|
||||
width: 80px;
|
||||
opacity: 0;
|
||||
animation-name: cloudLeft;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-delay: 1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
&.mid {
|
||||
top: 10px;
|
||||
left: 420px;
|
||||
width: 46px;
|
||||
opacity: 0;
|
||||
animation-name: cloudMid;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-delay: 1.2s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
&.right {
|
||||
top: 100px;
|
||||
left: 500px;
|
||||
width: 62px;
|
||||
opacity: 0;
|
||||
animation-name: cloudRight;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-delay: 1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@keyframes cloudLeft {
|
||||
0% {
|
||||
top: 17px;
|
||||
left: 220px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
20% {
|
||||
top: 33px;
|
||||
left: 188px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
top: 81px;
|
||||
left: 92px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 97px;
|
||||
left: 60px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cloudMid {
|
||||
0% {
|
||||
top: 10px;
|
||||
left: 420px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
20% {
|
||||
top: 40px;
|
||||
left: 360px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
70% {
|
||||
top: 130px;
|
||||
left: 180px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 160px;
|
||||
left: 120px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cloudRight {
|
||||
0% {
|
||||
top: 100px;
|
||||
left: 500px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
20% {
|
||||
top: 120px;
|
||||
left: 460px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
top: 180px;
|
||||
left: 340px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 200px;
|
||||
left: 300px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bullshit {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 300px;
|
||||
padding: 30px 0;
|
||||
overflow: hidden;
|
||||
|
||||
&__oops {
|
||||
margin-bottom: 20px;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
color: #1482f0;
|
||||
opacity: 0;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
&__headline {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
color: #222;
|
||||
opacity: 0;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
&__info {
|
||||
margin-bottom: 30px;
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
color: grey;
|
||||
opacity: 0;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
&__return-home {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 110px;
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
line-height: 36px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: #1482f0;
|
||||
border-radius: 100px;
|
||||
opacity: 0;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(60px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -36,8 +36,9 @@ interface DefaultArticleList {
|
|||
padding: paddingStyle;
|
||||
article_spacing: number;
|
||||
content_spacing: number;
|
||||
article_width: number;
|
||||
article_height: number;
|
||||
interval_time: number; //滚动时间
|
||||
is_roll: number;
|
||||
common_style: object;
|
||||
};
|
||||
}
|
||||
|
|
@ -91,8 +92,9 @@ const defaultArticleList: DefaultArticleList = {
|
|||
},
|
||||
content_spacing: 10, // 内容间距
|
||||
article_spacing: 10, // 文章间距
|
||||
article_width: 155, // 文章宽度
|
||||
article_height: 155, // 文章宽度
|
||||
article_height: 155, // 文章高度
|
||||
interval_time: 2, //滚动时间
|
||||
is_roll: 1, // 是否轮播
|
||||
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ interface DefaultArticleTabs {
|
|||
tabs_theme: string;
|
||||
tabs_top_up: boolean;
|
||||
article_theme: string;
|
||||
article_carousel_col: string;
|
||||
tabs_list: articleTabsList[];
|
||||
field_show: string[];
|
||||
};
|
||||
|
|
@ -49,8 +50,9 @@ interface DefaultArticleTabs {
|
|||
padding: paddingStyle;
|
||||
article_spacing: number;
|
||||
content_spacing: number;
|
||||
article_width: number;
|
||||
article_height: number;
|
||||
interval_time: number; //滚动时间
|
||||
is_roll: number;
|
||||
common_style: object;
|
||||
};
|
||||
}
|
||||
|
|
@ -59,6 +61,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
|
|||
tabs_theme: '0',
|
||||
tabs_top_up: true,
|
||||
article_theme: '0',
|
||||
article_carousel_col: '2',
|
||||
tabs_list: [
|
||||
{ id: '1', title: '热门推荐', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
|
||||
{ id: '2', title: '测试一', desc: '简介', data_type: '0', category: [], number: 4, sort: '0', sort_rules: '0', is_cover: true, data_list: [] },
|
||||
|
|
@ -70,7 +73,10 @@ const defaultArticleTabs: DefaultArticleTabs = {
|
|||
field_show: ['0', '1'],
|
||||
},
|
||||
style: {
|
||||
tabs_checked: [{ color: '#FF2222', color_percentage: undefined }, { color: '#FF9898', color_percentage: undefined }],
|
||||
tabs_checked: [
|
||||
{ color: '#FF2222', color_percentage: undefined },
|
||||
{ color: '#FF9898', color_percentage: undefined },
|
||||
],
|
||||
tabs_direction: '90deg',
|
||||
tabs_weight_checked: '500',
|
||||
tabs_size_checked: 14,
|
||||
|
|
@ -114,8 +120,9 @@ const defaultArticleTabs: DefaultArticleTabs = {
|
|||
},
|
||||
content_spacing: 10, // 内容间距
|
||||
article_spacing: 10, // 文章间距
|
||||
article_width: 155, // 文章宽度
|
||||
article_height: 155, // 文章宽度
|
||||
article_height: 155, // 文章高度
|
||||
interval_time: 2, //滚动时间
|
||||
is_roll: 1, // 是否轮播
|
||||
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_left: 10, padding_right: 10, padding_bottom: 10 },
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import defaultCommon from './index';
|
||||
import { online_url } from '@/utils';
|
||||
|
||||
const new_url = await online_url();
|
||||
const new_url = await online_url('/static/app/tabbar/');
|
||||
interface DefaultFooterNav {
|
||||
content: {
|
||||
nav_style: string;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ interface DefaultProductList {
|
|||
content: {
|
||||
theme: string;
|
||||
data_type: string;
|
||||
single_line_number: number;
|
||||
carousel_col: number;
|
||||
category: string[];
|
||||
data_ids: string[];
|
||||
product_show_list: string[];
|
||||
|
|
@ -54,7 +54,7 @@ const defaultProductList: DefaultProductList = {
|
|||
content: {
|
||||
theme: '0',
|
||||
data_type: '0',
|
||||
single_line_number: 3,
|
||||
carousel_col: 3,
|
||||
product_show_list: [],
|
||||
data_list: [],
|
||||
category: [],
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ interface DefaultProductList {
|
|||
tabs_theme: string;
|
||||
tabs_top_up: boolean;
|
||||
theme: string;
|
||||
single_line_number: number,
|
||||
carousel_col: number;
|
||||
tabs_list: articleTabsList[];
|
||||
is_show: string[];
|
||||
is_shop_show: boolean;
|
||||
|
|
@ -31,20 +31,20 @@ interface DefaultProductList {
|
|||
style: {
|
||||
tabs_checked: color_list[];
|
||||
tabs_direction: string;
|
||||
tabs_weight_checked: string,
|
||||
tabs_size_checked: number,
|
||||
tabs_color_checked: string,
|
||||
tabs_weight: string,
|
||||
tabs_size: number,
|
||||
tabs_color: string,
|
||||
tabs_weight_checked: string;
|
||||
tabs_size_checked: number;
|
||||
tabs_color_checked: string;
|
||||
tabs_weight: string;
|
||||
tabs_size: number;
|
||||
tabs_color: string;
|
||||
tabs_spacing: number;
|
||||
shop_padding: paddingStyle;
|
||||
shop_img_radius: radiusStyle;
|
||||
shop_radius: radiusStyle;
|
||||
content_outer_spacing: number;
|
||||
content_outer_height: number;
|
||||
is_roll: boolean,
|
||||
interval_time: number,
|
||||
is_roll: boolean;
|
||||
interval_time: number;
|
||||
content_spacing: number;
|
||||
shop_title_typeface: string;
|
||||
shop_title_size: number;
|
||||
|
|
@ -58,10 +58,10 @@ interface DefaultProductList {
|
|||
shop_score_typeface: string;
|
||||
shop_score_size: number;
|
||||
shop_score_color: string;
|
||||
shop_button_typeface:string;
|
||||
shop_button_typeface: string;
|
||||
shop_button_size: number;
|
||||
shop_button_color: color_list[];
|
||||
shop_button_text_color: string,
|
||||
shop_button_text_color: string;
|
||||
shop_icon_size: number;
|
||||
shop_icon_color: string;
|
||||
common_style: object;
|
||||
|
|
@ -72,10 +72,10 @@ const defaultProductList: DefaultProductList = {
|
|||
tabs_theme: '0',
|
||||
tabs_top_up: false,
|
||||
theme: '0',
|
||||
single_line_number: 3,
|
||||
carousel_col: 3,
|
||||
tabs_list: [
|
||||
{ id: '1', title: '热门推荐', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
|
||||
{ id: '2', title: '测试一', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
|
||||
{ id: '1', title: '热门推荐', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
|
||||
{ id: '2', title: '测试一', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
|
||||
{ id: '3', title: '测试二', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
|
||||
{ id: '4', title: '测试三', img: [], desc: '简介', data_type: '0', category: [], data_ids: [], number: 4, sort: '0', sort_rules: '0', data_list: [] },
|
||||
],
|
||||
|
|
@ -89,7 +89,10 @@ const defaultProductList: DefaultProductList = {
|
|||
shop_button_size: '1',
|
||||
},
|
||||
style: {
|
||||
tabs_checked: [{ color: '#FF2222', color_percentage: undefined }, { color: '#FF9898', color_percentage: undefined }],
|
||||
tabs_checked: [
|
||||
{ color: '#FF2222', color_percentage: undefined },
|
||||
{ color: '#FF9898', color_percentage: undefined },
|
||||
],
|
||||
tabs_direction: '90deg',
|
||||
tabs_weight_checked: '500',
|
||||
tabs_size_checked: 14,
|
||||
|
|
@ -99,10 +102,10 @@ const defaultProductList: DefaultProductList = {
|
|||
tabs_color: 'rgba(51,51,51,1)',
|
||||
tabs_spacing: 20,
|
||||
shop_padding: {
|
||||
padding: 10,
|
||||
padding_top: 10,
|
||||
padding_bottom: 10,
|
||||
padding_left: 10,
|
||||
padding: 10,
|
||||
padding_top: 10,
|
||||
padding_bottom: 10,
|
||||
padding_left: 10,
|
||||
padding_right: 10,
|
||||
},
|
||||
shop_img_radius: {
|
||||
|
|
@ -125,32 +128,32 @@ const defaultProductList: DefaultProductList = {
|
|||
is_roll: true,
|
||||
interval_time: 2,
|
||||
shop_title_typeface: '500',
|
||||
shop_title_size: 14,
|
||||
shop_title_color: "#333333",
|
||||
shop_title_size: 14,
|
||||
shop_title_color: '#333333',
|
||||
shop_price_typeface: '500',
|
||||
shop_price_size: 18,
|
||||
shop_price_color: "#EA3323;",
|
||||
shop_price_color: '#EA3323;',
|
||||
shop_sold_number_typeface: '400',
|
||||
shop_sold_number_size: 10,
|
||||
shop_sold_number_color: "#999999",
|
||||
shop_sold_number_color: '#999999',
|
||||
shop_score_typeface: '400',
|
||||
shop_score_size: 10,
|
||||
shop_score_color: "#999999",
|
||||
shop_button_typeface:'400',
|
||||
shop_score_color: '#999999',
|
||||
shop_button_typeface: '400',
|
||||
shop_button_size: 12,
|
||||
shop_button_color: [
|
||||
{
|
||||
color: '#FF3D53',
|
||||
color_percentage: undefined
|
||||
color_percentage: undefined,
|
||||
},
|
||||
{
|
||||
color: '#D73A3A',
|
||||
color_percentage: undefined
|
||||
}
|
||||
color_percentage: undefined,
|
||||
},
|
||||
],
|
||||
shop_button_text_color: '#fff',
|
||||
shop_icon_size: 10,
|
||||
shop_icon_color: "#fff",
|
||||
shop_icon_color: '#fff',
|
||||
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<!-- 左侧模块 -->
|
||||
<div class="siderbar flex-col">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item v-for="(com, i) in components" :key="i" :title="com.title" :name="com.key">
|
||||
<VueDraggable v-model="com.item" :animation="500" ghost-class="ghost" :group="{ name: 'people', pull: 'clone', put: false }" class="component flex-row flex-wrap" :clone="clone_item_com_data" :on-start="onStart" :sort="false" :force-fallback="true">
|
||||
<div v-for="item in com.item" :key="item.key" class="item">
|
||||
<el-collapse-item v-for="(com, i) in components" :key="i" :title="com.name" :name="com.key">
|
||||
<VueDraggable v-model="com.data" :animation="500" ghost-class="ghost" :group="{ name: 'people', pull: 'clone', put: false }" class="component flex-row flex-wrap" :clone="clone_item_com_data" :on-start="onStart" :sort="false" :force-fallback="true">
|
||||
<div v-for="item in com.data" :key="item.key" class="item">
|
||||
<div class="main-border siderbar-hidden main-show tc">释放鼠标将组件添加到此处</div>
|
||||
<div class="siderbar-show main-hidden flex-col jc-c align-c gap-4">
|
||||
<img class="img radius-xs" :src="url_computer(item.key)" />
|
||||
|
|
@ -168,8 +168,9 @@ import { background_computer, get_math, gradient_computer, padding_computer, rad
|
|||
import { cloneDeep } from 'lodash';
|
||||
import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
|
||||
import defaultSettings from './index';
|
||||
import { footerNavCounterStore } from '@/store';
|
||||
import { footerNavCounterStore, commonStore } from '@/store';
|
||||
const footer_nav_counter_store = footerNavCounterStore();
|
||||
const common_store = commonStore();
|
||||
const app = getCurrentInstance();
|
||||
import { isEmpty } from 'lodash';
|
||||
const props = defineProps({
|
||||
|
|
@ -255,48 +256,50 @@ watch(
|
|||
|
||||
// 父组件调用的方法
|
||||
const emits = defineEmits(['rightUpdate']);
|
||||
const activeNames = reactive(['1', '2', '3']);
|
||||
const components = reactive([
|
||||
{
|
||||
title: '基础组件',
|
||||
key: '1',
|
||||
item: [
|
||||
{ key: 'carousel', name: '轮播图' },
|
||||
{ key: 'search', name: '搜索框' },
|
||||
{ key: 'nav-group', name: '导航组' },
|
||||
{ key: 'notice', name: '公告' },
|
||||
{ key: 'video', name: '视频' },
|
||||
{ key: 'user-info', name: '用户信息' },
|
||||
{ key: 'tabs', name: '选项卡' },
|
||||
{ key: 'article-tabs', name: '文章选项卡' },
|
||||
{ key: 'shop-tabs', name: '商品选项卡' },
|
||||
{ key: 'article-list', name: '文章列表' },
|
||||
{ key: 'shop-list', name: '商品列表' },
|
||||
{ key: 'img-magic', name: '图片魔方' },
|
||||
{ key: 'data-magic', name: '数据魔方' },
|
||||
{ key: 'hot-zone', name: '热区' },
|
||||
{ key: 'custom', name: '自定义' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '营销组件',
|
||||
key: '2',
|
||||
item: [
|
||||
{ key: 'coupon', name: '优惠券' },
|
||||
{ key: 'seckill', name: '秒杀' }
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '工具组件',
|
||||
key: '3',
|
||||
item: [
|
||||
{ key: 'float-window', name: '悬浮按钮' },
|
||||
{ key: 'text-title', name: '文本标题' },
|
||||
{ key: 'auxiliary-blank', name: '辅助空白' },
|
||||
{ key: 'row-line', name: '横线' },
|
||||
{ key: 'rich-text', name: '富文本' },
|
||||
],
|
||||
},
|
||||
const activeNames = reactive(['base', 'plugins', 'tool']);
|
||||
interface componentsData {
|
||||
name: string;
|
||||
key: string;
|
||||
data: componentsData[];
|
||||
}
|
||||
const components = ref<componentsData[]>([
|
||||
// {
|
||||
// name: '基础组件',
|
||||
// key: 'base',
|
||||
// data: [
|
||||
// { key: 'carousel', name: '轮播图' },
|
||||
// { key: 'search', name: '搜索框' },
|
||||
// { key: 'nav-group', name: '导航组' },
|
||||
// { key: 'notice', name: '公告' },
|
||||
// { key: 'video', name: '视频' },
|
||||
// { key: 'user-info', name: '用户信息' },
|
||||
// { key: 'tabs', name: '选项卡' },
|
||||
// { key: 'article-tabs', name: '文章选项卡' },
|
||||
// { key: 'shop-tabs', name: '商品选项卡' },
|
||||
// { key: 'article-list', name: '文章列表' },
|
||||
// { key: 'shop-list', name: '商品列表' },
|
||||
// { key: 'img-magic', name: '图片魔方' },
|
||||
// { key: 'data-magic', name: '数据魔方' },
|
||||
// { key: 'hot-zone', name: '热区' },
|
||||
// { key: 'custom', name: '自定义' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: '营销组件',
|
||||
// key: 'plugins',
|
||||
// data: [{ key: 'coupon', name: '优惠券' }],
|
||||
// },
|
||||
// {
|
||||
// name: '工具组件',
|
||||
// key: 'tool',
|
||||
// data: [
|
||||
// { key: 'float-window', name: '悬浮按钮' },
|
||||
// { key: 'text-title', name: '文本标题' },
|
||||
// { key: 'auxiliary-blank', name: '辅助空白' },
|
||||
// { key: 'row-line', name: '横线' },
|
||||
// { key: 'rich-text', name: '富文本' },
|
||||
// ],
|
||||
// },
|
||||
]);
|
||||
const url_computer = (name: string) => {
|
||||
const new_url = ref(new URL(`../../../../assets/images/layout/siderbar/${name}.png`, import.meta.url).href).value;
|
||||
|
|
@ -555,6 +558,15 @@ const scroll = () => {
|
|||
// 在组件挂载时默认执行
|
||||
onMounted(() => {
|
||||
page_settings();
|
||||
nextTick(() => {
|
||||
const interval = setInterval(() => {
|
||||
// 获取分类
|
||||
if (common_store.common.module_list.length > 0) {
|
||||
components.value = common_store.common.module_list;
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
//页面设置
|
||||
const page_settings = () => {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!-- 顶部导航栏 -->
|
||||
<div class="navbar">
|
||||
<div class="nav-left">
|
||||
<icon name="arrow-left" color="f">返回</icon>
|
||||
<!-- <icon name="arrow-left" color="f">返回</icon> -->
|
||||
<div class="flex-row align-c">
|
||||
<div class="name">
|
||||
<div class="flex-row align-c gap-10 c-pointer" @click="dialog_visible = true">
|
||||
|
|
@ -27,17 +27,17 @@
|
|||
</div>
|
||||
</template>
|
||||
<div class="content pa-20">
|
||||
<el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="70" status-icon>
|
||||
<el-form-item label="上传头像">
|
||||
<el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="50" status-icon>
|
||||
<el-form-item label="封面">
|
||||
<upload v-model="form.logo" :limit="1"></upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="模版名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入模版名称" />
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模版描述">
|
||||
<el-input v-model="form.describe" placeholder="请输入模版描述" :rows="4" type="textarea" />
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.describe" placeholder="请输入描述" :rows="4" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模版开关">
|
||||
<el-form-item label="开关">
|
||||
<el-switch v-model="form.is_enable" active-value="1" inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
|
@ -110,7 +110,7 @@ const confirm_event = async (formEl: FormInstance | undefined) => {
|
|||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
height: 8rem;
|
||||
padding: 0 3.7rem;
|
||||
padding: 0 3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -119,21 +119,21 @@ const confirm_event = async (formEl: FormInstance | undefined) => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
.name {
|
||||
padding-left: 2rem;
|
||||
margin: 0 2rem;
|
||||
// padding-left: 2rem;
|
||||
// margin: 0 2rem;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 0.1rem;
|
||||
height: 65%;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
// &::before {
|
||||
// content: '';
|
||||
// display: inline-block;
|
||||
// width: 0.1rem;
|
||||
// height: 65%;
|
||||
// background-color: #fff;
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
// }
|
||||
.img {
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="app-wrapper no-copy">
|
||||
<div v-loading.fullscreen.lock="loading" class="app-wrapper no-copy" element-loading-background="rgba(255,255,255,1)" element-loading-custom-class="loading-custom">
|
||||
<template v-if="!is_empty">
|
||||
<navbar v-model="form.model" @preview="preview" @save="save" @save-close="save_close" />
|
||||
<div class="app-wrapper-content flex-row">
|
||||
|
|
@ -64,6 +64,7 @@ const form = ref<diy_data_item>({
|
|||
const diy_data_item = ref({});
|
||||
|
||||
const key = ref('');
|
||||
const api_count = ref(0);
|
||||
|
||||
const right_update = (item: any, diy: [Array<any>], header: headerAndFooter, footer: headerAndFooter) => {
|
||||
diy_data_item.value = item;
|
||||
|
|
@ -90,15 +91,20 @@ const init = () => {
|
|||
if (html_index !== -1) {
|
||||
new_data.id = new_data.id.substring(0, html_index);
|
||||
}
|
||||
}
|
||||
if (new_data.id) {
|
||||
DiyAPI.getInit(new_data).then((res: any) => {
|
||||
if (res.data) {
|
||||
form.value = form_data_transfor_diy_data(res.data);
|
||||
} else {
|
||||
is_empty.value = true;
|
||||
}
|
||||
});
|
||||
if (new_data.id) {
|
||||
DiyAPI.getInit(new_data).then((res: any) => {
|
||||
if (res.data) {
|
||||
form.value = form_data_transfor_diy_data(res.data);
|
||||
api_count.value += 1;
|
||||
loading_event(api_count.value);
|
||||
} else {
|
||||
is_empty.value = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
api_count.value = 1;
|
||||
loading_event(api_count.value);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -113,8 +119,19 @@ const common_init = () => {
|
|||
// module_list ---- 模块列表
|
||||
//page_link_list ---- 页面链接
|
||||
common_store.set_common(res.data);
|
||||
api_count.value += 1;
|
||||
loading_event(api_count.value);
|
||||
});
|
||||
};
|
||||
// 加载动画
|
||||
const loading = ref(true);
|
||||
const loading_event = (count: number) => {
|
||||
if (count == 2) {
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
//#endregion 页面初始化数据 ---------------------end
|
||||
|
||||
//#region 顶部导航回调方法 ---------------------start
|
||||
|
|
@ -125,9 +142,9 @@ const save = () => {
|
|||
formmat_form_data(form.value);
|
||||
};
|
||||
const save_close = () => {
|
||||
formmat_form_data(form.value);
|
||||
formmat_form_data(form.value, true);
|
||||
};
|
||||
const formmat_form_data = (data: diy_data_item) => {
|
||||
const formmat_form_data = (data: diy_data_item, close: boolean = false) => {
|
||||
const clone_form = cloneDeep(data);
|
||||
clone_form.header.show_tabs = true;
|
||||
clone_form.footer.show_tabs = false;
|
||||
|
|
@ -143,6 +160,13 @@ const formmat_form_data = (data: diy_data_item) => {
|
|||
const new_data = diy_data_transfor_form_data(clone_form);
|
||||
DiyAPI.save(new_data).then((res) => {
|
||||
ElMessage.success('保存成功');
|
||||
if (!close) return;
|
||||
ElMessageBox.confirm('您确定要关闭本页吗？', '提示')
|
||||
.then(() => {
|
||||
// 关闭页面
|
||||
window.close();
|
||||
})
|
||||
.catch(() => {});
|
||||
});
|
||||
};
|
||||
//#endregion 顶部导航回调方法 ---------------------end
|
||||
|
|
|
|||
Loading…
Reference in New Issue