1.diy---置顶开发

master
sws 2024-09-26 18:53:54 +08:00
parent 834fa81488
commit 6f436bb6ca
6 changed files with 46 additions and 42 deletions

View File

@ -1,8 +1,8 @@
<template>
<!-- 文章列表 -->
<view class="ou" :style="style_container">
<componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propStickyTop" :propStyle="tabs_style" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<view class="padding-top oh">
<componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propStickyTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<view class="oh">
<componentDiyArticleList v-if="hackReset" :propValue="article_tabs" :propIsCommonStyle="false"></componentDiyArticleList>
</view>
</view>

View File

@ -5,11 +5,11 @@
<componentDiyHeader v-if="hackReset" :propValue="header_data.com_data"></componentDiyHeader>
</view>
<view class="content flex-col" :style="'padding-top:' + header_top">
<view v-for="(item, index) in tabs_data" :key="index">
<componentDiyTabs v-if="item.key == 'tabs'" :propValue="item.com_data" :propStickyTop="sticky_top" @tabs-click="tabs_click_event"></componentDiyTabs>
<componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propValue="item.com_data" @tabs-click="tabs_click_event"></componentDiyTabsCarousel>
</view>
<block v-if="is_tabs_type">
<template v-for="(item, index) in tabs_data">
<componentDiyTabs v-if="item.key == 'tabs'" :key="index" :propValue="item.com_data" :propStickyTop="sticky_top" @tabs-click="tabs_click_event"></componentDiyTabs>
<componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propValue="item.com_data" :propStickyTop="sticky_top" @tabs-click="tabs_click_event"></componentDiyTabsCarousel>
</template>
<template v-if="is_tabs_type">
<template v-if="diy_data.length > 0">
<view v-for="(item, index) in diy_data" :key="index" :style="{ 'margin-top': ['float-window'].includes(item.key) ? '0rpx' : -(item.com_data.style.common_style.floating_up * 2 || 0) + 'rpx' }">
<!-- 基础组件 -->
@ -20,8 +20,10 @@
<componentDiyNotice v-else-if="item.key == 'notice'" :propValue="item.com_data"></componentDiyNotice>
<componentDiyVideo v-else-if="item.key == 'video'" :propValue="item.com_data"></componentDiyVideo>
<componentDiyArticleList v-else-if="item.key == 'article-list'" :propValue="item.com_data"></componentDiyArticleList>
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propValue="item.com_data" :propStickyTop="sticky_top"></componentDiyArticleTabs>
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :propValue="item.com_data" :propStickyTop="sticky_top"></componentDiyGoodsTabs>
<componentDiyGoodsList v-else-if="item.key == 'goods-list'" :propValue="item.com_data"></componentDiyGoodsList>
<componentDiyDataMagic v-else-if="item.key == 'data-magic'" :propValue="item.com_data"></componentDiyDataMagic>
<componentDiyCustom v-else-if="item.key == 'custom'" :propValue="item.com_data"></componentDiyCustom>
@ -38,8 +40,8 @@
<componentDiyAuxiliaryBlank v-else-if="item.key == 'auxiliary-blank'" :propValue="item.com_data"></componentDiyAuxiliaryBlank>
</view>
</template>
</block>
<block v-else>
</template>
<template v-else>
<!-- goods九宫格数据 -->
<!-- 列表 -->
<scroll-view :scroll-y="true" class="scroll-box" @scrolltolower="scroll_lower" lower-threshold="60">
@ -53,7 +55,7 @@
<!-- 结尾 -->
<component-bottom-line :propStatus="goods_bottom_line_status"></component-bottom-line>
</scroll-view>
</block>
</template>
</view>
<view v-if="is_show_footer == 1" class="footer">
<componentDiyFooter v-if="hackReset" :propValue="footer_data.com_data"></componentDiyFooter>

View File

@ -1,7 +1,7 @@
<template>
<view class="ou" :style="style_container">
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propStickyTop" :propStyle="tabs_style" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<view class="padding-top oh">
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propStickyTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<view class="oh">
<componentGoodsList v-if="hackReset" :propValue="goods_tabs" :propIsCommonStyle="false"></componentGoodsList>
</view>
</view>

View File

@ -1,6 +1,6 @@
<template>
<!-- 文章列表 66rpx是自定义顶部导航栏的高度-->
<uv-sticky :disabled="!propIsTop" :offset-top="propTop" zIndex="101" customNavHeight="66rpx">
<uv-sticky :disabled="!propIsTop" :offset-top="propTop" zIndex="101" customNavHeight="66rpx" bgColor="#fff">
<view class="flex-row gap-10 jc-sb align-c" :style="propStyle">
<view class="tabs flex-1 flex-width">
<scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true" :scroll-into-view="'one-nav-item-' + active_index" class="wh-auto">

View File

@ -1,17 +1,17 @@
<template>
<div class="flex-col oh" :style="style_container">
<componentDiyTabs :propValue="value" :propIsCommon="false" :propSpacingCommonStyle="spacing_common_style" @tabs-click="tabs_click_event"></componentDiyTabs>
<componentDiycarousel :propValue="value" :propIsCommon="false"></componentDiycarousel>
</div>
<view class="flex-col ou" :style="style_container">
<componentDiyModulesTabsView :propValue="propValue" :propIsTop="top_up == '1'" :propTop="propStickyTop" :propStyle="tabs_style" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<componentDiycarousel :propValue="propValue" :propIsCommon="false"></componentDiycarousel>
</view>
</template>
<script>
import { common_styles_computer } from '@/common/js/common/common.js';
import componentDiyTabs from '@/components/diy/tabs';
import { common_styles_computer, padding_computer, margin_computer } from '@/common/js/common/common.js';
import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
import componentDiycarousel from '@/components/diy/carousel';
export default {
components: {
componentDiyTabs,
componentDiyModulesTabsView,
componentDiycarousel,
},
props: {
@ -21,6 +21,10 @@
return {};
},
},
propStickyTop: {
type: Number,
default: 0,
},
},
data() {
return {
@ -37,6 +41,8 @@
margin_left: 0,
margin_right: 0,
},
top_up: '0',
tabs_style: '',
};
},
created() {
@ -44,21 +50,25 @@
},
methods: {
init() {
const new_content = this.propValue.content || {};
const new_style = this.propValue.style || {};
let tabs_style_obj = {
padding_top: new_style.common_style.padding_top,
padding_left: new_style.common_style.padding_left,
padding_right: new_style.common_style.padding_right,
margin_top: new_style.common_style.margin_top,
margin_left: new_style.common_style.margin_left,
margin_right: new_style.common_style.margin_right,
};
let new_tabs_style = padding_computer(tabs_style_obj) + margin_computer(tabs_style_obj) + `position:relative;left: -${tabs_style_obj.padding_left * 2}rpx;right: -${tabs_style_obj.padding_right * 2}rpx;width:100%;`;
let common_style = Object.assign({}, new_style.common_style, {
padding_top: 0,
margin_top: 0,
});
this.setData({
style_container: `${common_styles_computer(new_style.common_style)};gap:${new_style.data_spacing * 2}rpx`,
spacing_common_style: {
padding: 0,
padding_top: new_style.common_style.padding_top,
padding_bottom: 0,
padding_left: new_style.common_style.padding_left,
padding_right: new_style.common_style.padding_right,
margin: 0,
margin_top: new_style.common_style.margin_top,
margin_bottom: 0,
margin_left: new_style.common_style.margin_left,
margin_right: new_style.common_style.margin_right,
},
style_container: `${common_styles_computer(common_style)};gap:${new_style.data_spacing * 2}rpx`,
top_up: new_content.tabs_top_up,
tabs_style: new_tabs_style,
});
},
tabs_click_event(tabs_id, is_micro_page) {

View File

@ -18,14 +18,6 @@
type: Object,
default: () => ({}),
},
propIsCommon: {
type: Boolean,
default: true,
},
propSpacingCommonStyle: {
type: Object,
default: () => ({}),
},
propStickyTop: {
type: Number,
default: 0,
@ -55,7 +47,7 @@
new_tabs_data.content.tabs_list.unshift(new_tabs_data.content.home_data);
this.setData({
tabs_data: new_tabs_data,
style_container: this.propIsCommon ? common_styles_computer(new_style.common_style) : new_content.tabs_top_up == '1' ? padding_computer(this.propSpacingCommonStyle) + margin_computer(this.propSpacingCommonStyle) : '',
style_container: common_styles_computer(new_style.common_style),
top_up: new_content.tabs_top_up,
});
},