diff --git a/src/components/model-article-list/index.vue b/src/components/model-article-list/index.vue index 34e15d5f..6ad69c5c 100644 --- a/src/components/model-article-list/index.vue +++ b/src/components/model-article-list/index.vue @@ -30,33 +30,38 @@
- - -
-
- - -
-
-
{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}
-
{{ item.data.describe || '' }}
-
-
-
{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}
-
- -
- {{ item.data.access_count ? item.data.access_count : '16' }} -
+ + +
+ + +
+
+
{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}
+
{{ item.data.describe || '' }}
+
+
+
{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}
+
+ +
+ {{ item.data.access_count ? item.data.access_count : '16' }}
+ + +
@@ -66,6 +71,10 @@ import { common_styles_computer, padding_computer, radius_computer, get_math, is_obj_empty, common_img_computer, background_computer, gradient_handle } from '@/utils'; import { isEmpty, cloneDeep } from 'lodash'; import ArticleAPI from '@/api/article'; +import { Swiper, SwiperSlide } from 'swiper/vue'; +import { Autoplay } from 'swiper/modules'; +import 'swiper/css'; +const modules = [Autoplay]; /** * @description: 文章列表（渲染） * @param value{Object} 样式数据 @@ -132,14 +141,6 @@ const default_data_list: ArticleList = { new_title: '测试文章标题', new_cover: [], }; -// 轮播图列数 -const carousel_col = ref('2'); -// 轮播图key值 -const carousel_key = ref('0'); -// 轮播图定时轮播 -const interval_time = ref(2000); -// 轮播图是否滚动 -const is_roll = ref(1); // 内容 const new_content = computed(() => props.value?.content || {}); // 样式 @@ -271,6 +272,12 @@ const article_img_height = computed(() => { } } }); +// 轮播图列数 +const carousel_col = ref('2'); +// 轮播图key值 +const carousel_key = ref('0'); +const autoplay = ref(false); +const slides_per_group = ref(1); // 监听value数据变化 watch( () => props.value, @@ -317,11 +324,22 @@ watch( } else if (article_theme.value == '4') { // 更新轮播图的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; + carousel_key.value = new_style.interval_time + new_style.is_roll + new_style.rolling_fashion; + // // 滚动时间 + // interval_time.value = (new_style.interval_time || 2) * 1000; + // // 是否滚动修改 + // is_roll.value = new_style.is_roll; + // 是否滚动 + if (new_style.is_roll == '1' && data_list.value.length > 0) { + autoplay.value = { + delay: (new_style.interval_time || 2) * 1000, + pauseOnMouseEnter: true, + }; + } else { + autoplay.value = false; + } + // 判断是平移还是整屏滚动 + slides_per_group.value = new_style.rolling_fashion == 'translation' ? 1 : Number(new_content.carousel_col) + 1; article_item_height.value = `${new_style.article_height}px`; article_style.value += content_radius.value + gradient; article_img_style.value = background_computer(article_data); @@ -348,31 +366,6 @@ const article_theme_class = computed(() => { 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 }]; - } -}); diff --git a/src/components/model-article-list/model-article-list-styles.vue b/src/components/model-article-list/model-article-list-styles.vue index 70b56048..e9f17228 100644 --- a/src/components/model-article-list/model-article-list-styles.vue +++ b/src/components/model-article-list/model-article-list-styles.vue @@ -72,9 +72,17 @@ - - - + diff --git a/src/components/model-article-tabs/model-article-tabs-styles.vue b/src/components/model-article-tabs/model-article-tabs-styles.vue index ef5af740..f3999f8c 100644 --- a/src/components/model-article-tabs/model-article-tabs-styles.vue +++ b/src/components/model-article-tabs/model-article-tabs-styles.vue @@ -98,9 +98,17 @@ - - - + diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue index 002e8bb9..034a157b 100644 --- a/src/components/model-custom/index.vue +++ b/src/components/model-custom/index.vue @@ -1,9 +1,9 @@ diff --git a/src/components/model-nav-group/model-nav-group-content.vue b/src/components/model-nav-group/model-nav-group-content.vue index e8892a9f..87649abb 100644 --- a/src/components/model-nav-group/model-nav-group-content.vue +++ b/src/components/model-nav-group/model-nav-group-content.vue @@ -10,11 +10,11 @@ 文字 - + - 3个 - 4个 - 5个 + 三列展示 + 四列展示 + 五列展示 diff --git a/src/components/model-seckill/model-seckill-content.vue b/src/components/model-seckill/model-seckill-content.vue index b6afc310..f54949da 100644 --- a/src/components/model-seckill/model-seckill-content.vue +++ b/src/components/model-seckill/model-seckill-content.vue @@ -44,12 +44,12 @@ {{ item.name }} - + - 1个 - 2个 - 3个 - 4个 + 单列展示 + 两列展示 + 三列展示 + 四列展示 diff --git a/src/config/const/article-list.ts b/src/config/const/article-list.ts index 12c98e1d..812cb797 100644 --- a/src/config/const/article-list.ts +++ b/src/config/const/article-list.ts @@ -51,6 +51,7 @@ interface DefaultArticleList { content_img_height: number | undefined; interval_time: number; //滚动时间 is_roll: number; + rolling_fashion: string; common_style: object; }; } @@ -118,6 +119,7 @@ const defaultArticleList: DefaultArticleList = { content_img_height: undefined, interval_time: 3, //滚动时间 is_roll: 1, // 是否轮播 + rolling_fashion: 'translation', // 滚动方式 translation 平移 cut-screen 切屏 common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 }, }, }; diff --git a/src/config/const/article-tabs.ts b/src/config/const/article-tabs.ts index 5a2abde6..82d04757 100644 --- a/src/config/const/article-tabs.ts +++ b/src/config/const/article-tabs.ts @@ -70,6 +70,7 @@ interface DefaultArticleTabs { content_img_height: number | undefined; interval_time: number; //滚动时间 is_roll: number; + rolling_fashion: string; common_style: object; }; } @@ -160,6 +161,7 @@ const defaultArticleTabs: DefaultArticleTabs = { content_img_height: undefined, interval_time: 3, //滚动时间 is_roll: 1, // 是否轮播 + rolling_fashion: 'translation', // 滚动方式 translation 平移 cut-screen 切屏 common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_left: 10, padding_right: 10, padding_bottom: 10 }, }, }; diff --git a/src/config/const/custom.ts b/src/config/const/custom.ts index b50a0832..50b6beca 100644 --- a/src/config/const/custom.ts +++ b/src/config/const/custom.ts @@ -1,20 +1,4 @@ import defaultCommon from "./index"; -interface content { - data_ids: Array; - data_list: Array; - data_auto_list: Array; -} -interface defaultSearch { - content: { - height: number; - data_source: string; - data_source_content: content; - custom_list: string[]; - }; - style: { - common_style: object; - }; -} export const source_list = { goods: { // 存放手动输入的id @@ -85,6 +69,35 @@ export const source_list = { data_auto_list: [], } }; +interface content { + data_ids: Array; + data_list: Array; + data_auto_list: Array; +} +interface defaultSearch { + content: { + height: number; + data_source: string; + data_source_content: content; + data_source_direction: string; + data_source_carousel_col: number; + custom_list: string[]; + }; + style: { + is_roll: string; + interval_time: number; + rolling_fashion: string; + is_show: boolean; + actived_color: string; + color: string; + indicator_style: string; + indicator_bottom: number; + indicator_location: string; + indicator_size: number; + indicator_radius: radiusStyle; + common_style: object; + }; +} const defaultSearch: defaultSearch = { content: { // 自定义内容高度 @@ -100,10 +113,33 @@ const defaultSearch: defaultSearch = { }, // 数据源类型 商品(goods) 文章(article) 品牌(brand) 用户信息(user-info) data_source:'', + // 铺满方式 0 横向 1 纵向 + data_source_direction: '1', + // 横向滑动时的显示 轮播数量 + data_source_carousel_col: 1, // 自定义内容列表 custom_list: [] }, style: { + is_roll: '0', + interval_time: 3, + rolling_fashion: 'translation', + is_show: false, + // 指示器选中颜色 + actived_color: '#2A94FF', + // 常规颜色 + color: '#DDDDDD', + indicator_style: 'dot', + indicator_location: 'center', + indicator_size: 5, + indicator_bottom: 6, + indicator_radius: { + radius: 4, + radius_top_left: 4, + radius_top_right: 4, + radius_bottom_left: 4, + radius_bottom_right: 4, + }, common_style: { ...defaultCommon, color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }], diff --git a/src/config/const/goods-list.ts b/src/config/const/goods-list.ts index debbc3e1..c854aecd 100644 --- a/src/config/const/goods-list.ts +++ b/src/config/const/goods-list.ts @@ -40,6 +40,7 @@ interface DefaultProductList { content_img_height: number | undefined; is_roll: string, interval_time: number, + rolling_fashion: string; content_spacing: number; shop_title_typeface: string; shop_title_size: number; @@ -143,6 +144,7 @@ const defaultProductList: DefaultProductList = { // 是否滚动 is_roll: '1', interval_time: 3, + rolling_fashion: 'translation', // 滚动方式 translation 平移 cut-screen 切屏 // 商品内容大小和颜色设置 shop_title_typeface: '500', shop_title_size: 14, diff --git a/src/config/const/goods-tabs.ts b/src/config/const/goods-tabs.ts index f3db9aeb..1ddae694 100644 --- a/src/config/const/goods-tabs.ts +++ b/src/config/const/goods-tabs.ts @@ -61,6 +61,7 @@ interface DefaultProductList { content_img_height: number | undefined; is_roll: string; interval_time: number; + rolling_fashion: string; content_spacing: number; shop_title_typeface: string; shop_title_size: number; @@ -185,6 +186,7 @@ const defaultProductList: DefaultProductList = { // 轮播处理 is_roll: '1', interval_time: 3, + rolling_fashion: 'translation', // 滚动方式 translation 平移 cut-screen 切屏 // 商品标题等内容处理 shop_title_typeface: '500', shop_title_size: 14, diff --git a/src/config/const/seckill.ts b/src/config/const/seckill.ts index 27b85b0d..dc3fe864 100644 --- a/src/config/const/seckill.ts +++ b/src/config/const/seckill.ts @@ -210,7 +210,7 @@ const defaultSeckill: DefaultSeckill = { // 轮播设置 is_roll: '1', interval_time: 3, - rolling_fashion: 'translation', + rolling_fashion: 'translation', // 滚动方式 translation 平移 cut-screen 切屏 common_style: { ...defaultCommon, padding: 0, padding_top: 2, padding_bottom: 10, padding_left: 10, padding_right: 10 }, }, };