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

修改博客选项卡的内容

v1.3.0
于肖磊 2025-03-03 09:53:05 +08:00
parent 0666e35264
commit 9859ac78c5
4 changed files with 84 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/api/blog.ts Normal file
View File

@ -0,0 +1,35 @@
import request from '@/utils/request';
class ArticleAPI {
/** 链接初始化接口 */
static getInit() {
return request({
url: `diyapi/linkinit`,
method: 'post',
});
}
/** 文章指定数据 */
static getAppointList(data: any) {
return request({
url: `diyapi/articleappointdata`,
method: 'post',
data,
});
}
/** 文章自动数据 */
static getAutoList(data: any) {
return request({
url: `diyapi/articleautodata`,
method: 'post',
data,
});
}
}
export default ArticleAPI;
// 分类树结构
export interface Tree {
/** 主键 */
id: string;
}

8
src/components/common/div-content/index.vue
View File

@ -106,6 +106,14 @@
<template v-else-if="item.key == 'seckill'">
<model-seckill :key="item.com_data" :value="item.com_data"></model-seckill>
</template>
<!-- 文章列表 -->
<template v-else-if="item.key == 'blog'">
<model-blog-list :key="item.com_data" :value="item.com_data"></model-blog-list>
</template>
<!-- 文章选项卡 -->
<template v-else-if="item.key == 'blog-tabs'">
<model-blog-tabs :key="item.com_data" :value="item.com_data"></model-blog-tabs>
</template>
<!-- 工具组件 -->
<!-- 辅助线 -->
<template v-else-if="item.key == 'row-line'">

46
src/components/model-blog-list/index.vue
View File

@ -80,7 +80,7 @@
<script setup lang="ts">
import { common_styles_computer, padding_computer, radius_computer, get_math, is_obj_empty, common_img_computer, background_computer, gradient_handle, gradient_computer, margin_computer, box_shadow_computer, border_computer, old_radius, old_padding, old_margin } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash';
// import blogAPI from '@/api/blog';
import blogAPI from '@/api/blog';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
const modules = [Autoplay];
@ -147,7 +147,7 @@ const blog_img_style = ref('');
const default_data_list: blogList = {
id: 0,
data: {},
new_title: '测试文章标题',
new_title: '测试博客标题',
new_cover: [],
};
// 内容
@ -165,27 +165,27 @@ const get_auto_data_list = async () => {
blog_number: number,
blog_is_cover: is_cover,
};
// const res = await blogAPI.getAutoList(new_data);
// new_content.value.data_auto_list = [];
// if (!isEmpty(res.data)) {
// data_list.value = [];
// res.data.forEach((child: any) => {
// data_list.value.push({
// id: get_math(),
// new_title: '',
// new_cover: [],
// data: child,
// });
// new_content.value.data_auto_list.push({
// id: get_math(),
// new_title: '',
// new_cover: [],
// data: child,
// });
// });
// } else {
// data_list.value = Array(4).fill(default_data_list);
// }
const res = await blogAPI.getAutoList(new_data);
new_content.value.data_auto_list = [];
if (!isEmpty(res.data)) {
data_list.value = [];
res.data.forEach((child: any) => {
data_list.value.push({
id: get_math(),
new_title: '',
new_cover: [],
data: child,
});
new_content.value.data_auto_list.push({
id: get_math(),
new_title: '',
new_cover: [],
data: child,
});
});
} else {
data_list.value = Array(4).fill(default_data_list);
}
};
onMounted(() => {
// 判断数据类型是选择文章且数据不为空

36
src/components/model-blog-tabs/index.vue
View File

@ -3,12 +3,12 @@
<div class="flex-col" :style="style_img_container">
<div class="oh" :style="tabs_container">
<div class="oh" :style="tabs_img_container">
<tabs-view ref="tabs" :value="article_tabs" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
<tabs-view ref="tabs" :value="blog_tabs" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
</div>
</div>
<div class="oh" :style="article_container">
<div class="oh" :style="article_img_container">
<model-article-list :value="article_tabs" :is-common-style="false"></model-article-list>
<div class="oh" :style="blog_container">
<div class="oh" :style="blog_img_container">
<model-blog-list :value="blog_tabs" :is-common-style="false"></model-blog-list>
</div>
</div>
</div>
@ -29,14 +29,14 @@ const props = defineProps({
});
const style_container = ref('');
const style_img_container = ref('');
const article_tabs = ref({});
const blog_tabs = ref({});
const tabs_active_index = ref(0);
// 选项卡独立样式
const tabs_container = ref('');
const tabs_img_container = ref('');
// 区域内边距
const article_container = ref('');
const article_img_container = ref('');
const blog_container = ref('');
const blog_img_container = ref('');
// 打开滑动固定开关之后，显示的样式
const tabs_sliding_fixed_bg = ref('');
watch(
@ -57,20 +57,20 @@ watch(
tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + border_computer(new_style.tabs_content) + box_shadow_computer(new_style.tabs_content);
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
// 文章区域背景设置
const article_content_data = {
color_list: new_style.article_content_color_list,
direction: new_style.article_content_direction,
background_img_style: new_style.article_content_background_img_style,
background_img: new_style.article_content_background_img,
const blog_content_data = {
color_list: new_style.blog_content_color_list,
direction: new_style.blog_content_direction,
background_img_style: new_style.blog_content_background_img_style,
background_img: new_style.blog_content_background_img,
}
article_container.value = gradient_computer(article_content_data) + margin_computer(new_style.article_content_margin) + radius_computer(new_style.article_content_radius) + border_computer(new_style.article_content) + box_shadow_computer(new_style.article_content);
article_img_container.value = background_computer(article_content_data) + padding_computer(new_style.article_content_padding);
blog_container.value = gradient_computer(blog_content_data) + margin_computer(new_style.blog_content_margin) + radius_computer(new_style.blog_content_radius) + border_computer(new_style.blog_content) + box_shadow_computer(new_style.blog_content);
blog_img_container.value = background_computer(blog_content_data) + padding_computer(new_style.blog_content_padding);
//文章内容设置
new_data.content.theme = new_data.content.article_theme;
new_data.content.theme = new_data.content.blog_theme;
new_data.content.data_type = new_data.content.tabs_list[tabs_active_index.value].data_type;
new_data.content.keywords = new_data.content.tabs_list[tabs_active_index.value].keywords;
new_data.content.category_ids = new_data.content.tabs_list[tabs_active_index.value].category_ids;
new_data.content.carousel_col = new_data.content.article_carousel_col;
new_data.content.carousel_col = new_data.content.blog_carousel_col;
new_data.content.data_list = new_data.content.tabs_list[tabs_active_index.value].data_list;
new_data.content.data_auto_list = new_data.content.tabs_list[tabs_active_index.value].data_auto_list;
new_data.content.data_ids = new_data.content.tabs_list[tabs_active_index.value].data_ids;
@ -79,10 +79,10 @@ watch(
new_data.content.order_by_rule = new_data.content.tabs_list[tabs_active_index.value].order_by_rule;
new_data.content.field_show = new_data.content.field_show;
new_data.content.is_cover = new_data.content.tabs_list[tabs_active_index.value].is_cover;
article_tabs.value = new_data;
blog_tabs.value = new_data;
style_container.value = common_styles_computer(new_style.common_style);
style_img_container.value = common_img_computer(new_style.common_style) + `gap: ${new_style.article_content_spacing}px;`;
style_img_container.value = common_img_computer(new_style.common_style) + `gap: ${new_style.blog_content_spacing}px;`;
},
{ immediate: true, deep: true }
);