Merge branch 'dev-sws' into dev

master
gongfuxiang 2024-09-28 20:42:55 +08:00
commit 0670cd9cdd
6 changed files with 170 additions and 88 deletions

View File

@ -1,7 +1,7 @@
<template>
<!-- 文章列表 -->
<view class="article-tabs ou" :style="style_container">
<componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight" :propTabsBackground="tabs_background" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<view class="oh">
<componentDiyArticleList v-if="hackReset" :propValue="article_tabs" :propIsCommonStyle="false"></componentDiyArticleList>
</view>
@ -10,7 +10,7 @@
<script>
const app = getApp();
import { common_styles_computer, padding_computer, margin_computer } from '@/common/js/common/common.js';
import { common_styles_computer, padding_computer, margin_computer, background_computer, gradient_computer } from '@/common/js/common/common.js';
import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
import componentDiyArticleList from '@/components/diy/article-list'; //
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
@ -28,8 +28,8 @@
default: 0,
},
propCustomNavHeight: {
type: String,
default: '66rpx',
type: Number,
default: 33,
},
propScrollTop: {
type: Number,
@ -50,15 +50,28 @@
top_up: '0',
tabs_style: '',
tabs_top: 0,
tabs_background: 'transparent',
tabs_background: 'background:transparent',
custom_nav_height: 33,
};
},
watch: {
propScrollTop(newVal) {
if (newVal >= this.tabs_top) {
this.tabs_background = 'rgba(255,255,255,1)';
if (newVal + this.propTop + this.custom_nav_height >= this.tabs_top) {
let new_style = this.propValue.style || {};
let tabs_bg = new_style.common_style.color_list;
let new_tabs_background = '';
if (tabs_bg.length > 0 && tabs_bg[0].color !== '') {
new_tabs_background = gradient_computer(new_style.common_style);
}
let new_tabs_background_img = background_computer(new_style.common_style);
if (new_tabs_background_img.length > 0) {
new_tabs_background_img += 'background-position: top left;';
}
this.setData({
tabs_background: (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff;') + new_tabs_background_img,
});
} else {
this.tabs_background = 'transparent';
this.tabs_background = 'background:transparent';
}
},
},
@ -66,7 +79,18 @@
this.init();
},
mounted() {
this.getTop();
this.$nextTick(() => {
const self = this;
setTimeout(() => {
self.getTop();
});
// #ifdef H5 || MP-TOUTIAO
//
this.setData({
custom_nav_height: this.propCustomNavHeight,
});
// #endif
});
},
methods: {
init() {
@ -138,7 +162,6 @@
this.setData({
tabs_top: res.top,
});
console.log('article', res);
}
})
.exec();

View File

@ -4,10 +4,10 @@
<view class="pr header">
<componentDiyHeader v-if="hack_reset" :propValue="header_data.com_data"></componentDiyHeader>
</view>
<view class="content flex-col" :style="'padding-top:' + temp_is_header_top ? temp_header_top : '0'">
<view class="content flex-col" :style="'padding-top:' + (temp_is_header_top ? temp_header_top : '0')">
<view v-for="(item, index) in tabs_data" :key="item.key">
<componentDiyTabs v-if="item.key == 'tabs'" :propValue="item.com_data" :propTop="temp_sticky_top" :propNavIsTop="is_header_top" :propTabsIsTop="temp_is_header_top" @computer-height="tabs_height_event" @tabs-click="tabs_click_event"></componentDiyTabs>
<componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propValue="item.com_data" :propTop="temp_sticky_top" :propNavIsTop="is_header_top" :propTabsIsTop="temp_is_header_top" @computer-height="tabs_height_event" @tabs-click="tabs_click_event"></componentDiyTabsCarousel>
<componentDiyTabs v-if="item.key == 'tabs'" :propValue="item.com_data" :propTop="temp_sticky_top" :propNavIsTop="is_header_top" :propTabsIsTop="is_header_top ? is_header_top && temp_is_header_top : temp_is_header_top" @computer-height="tabs_height_event" @tabs-click="tabs_click_event"></componentDiyTabs>
<componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propValue="item.com_data" :propTop="temp_sticky_top" :propNavIsTop="is_header_top" :propTabsIsTop="is_header_top ? is_header_top && temp_is_header_top : temp_is_header_top" @computer-height="tabs_height_event" @tabs-click="tabs_click_event"></componentDiyTabsCarousel>
</view>
<template v-if="is_tabs_type">
<template v-if="diy_data.length > 0">
@ -20,8 +20,8 @@
<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" :propTop="temp_sticky_top + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="is_header_top ? '66rpx' : '0rpx'"></componentDiyArticleTabs>
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :propValue="item.com_data" :propTop="temp_sticky_top + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="is_header_top ? '66rpx' : '0rpx'"></componentDiyGoodsTabs>
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propValue="item.com_data" :propTop="temp_sticky_top + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="is_header_top ? 33 : 0"></componentDiyArticleTabs>
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :propValue="item.com_data" :propTop="temp_sticky_top + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="is_header_top ? 33 : 0"></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>
@ -62,7 +62,7 @@
<!-- 当前diy页面底部菜单非公共底部菜单 -->
<block v-if="is_show_footer == 1">
<componentDiyFooter v-if="hack_reset" :propValue="footer_data.com_data" @footer-height="footer_height_value_event"></componentDiyFooter>
<view v-if="footer_height_value > 0" :style="'height:'+footer_height_value+'rpx;'"></view>
<view v-if="footer_height_value > 0" :style="'height:' + footer_height_value + 'rpx;'"></view>
</block>
<!-- 底部卡槽 -->
@ -115,7 +115,7 @@
propDataId: {
type: [String, Number],
default: '',
}
},
},
components: {
componentDiyHeader,
@ -430,7 +430,7 @@
if (e.detail.scrollTop >= this.sticky_top + 33) {
this.setData({
temp_sticky_top: 0,
temp_header_top: this.tabs_height + 'px',
temp_header_top: 0,
temp_is_header_top: true,
});
} else {
@ -445,11 +445,11 @@
},
//
footer_height_value_event(value) {
footer_height_value_event(value) {
this.setData({
footer_height_value: (value*2)+20
footer_height_value: value * 2 + 20,
});
}
},
},
};
</script>

View File

@ -1,6 +1,6 @@
<template>
<view class="goods-tabs ou" :style="style_container">
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight" :propTabsBackground="tabs_background" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<view class="oh">
<componentGoodsList v-if="hackReset" :propValue="goods_tabs" :propIsCommonStyle="false"></componentGoodsList>
</view>
@ -9,7 +9,7 @@
<script>
const app = getApp();
import { common_styles_computer, padding_computer, margin_computer } from '@/common/js/common/common.js';
import { common_styles_computer, padding_computer, margin_computer, background_computer, gradient_computer } from '@/common/js/common/common.js';
import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
import componentGoodsList from '@/components/diy/goods-list'; //
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
@ -33,8 +33,8 @@
default: 0,
},
propCustomNavHeight: {
type: String,
default: '66rpx',
type: Number,
default: 33,
},
propScrollTop: {
type: Number,
@ -49,15 +49,28 @@
//
top_up: '0',
tabs_top: 0,
tabs_background: 'transparent',
tabs_background: 'background:transparent',
custom_nav_height: 33,
};
},
watch: {
propScrollTop(newVal) {
if (newVal >= this.tabs_top) {
this.tabs_background = 'rgba(255,255,255,1)';
if (newVal + this.propTop + this.custom_nav_height >= this.tabs_top) {
let new_style = this.propValue.style || {};
let tabs_bg = new_style.common_style.color_list;
let new_tabs_background = '';
if (tabs_bg.length > 0 && tabs_bg[0].color !== '') {
new_tabs_background = gradient_computer(new_style.common_style);
}
let new_tabs_background_img = background_computer(new_style.common_style);
if (new_tabs_background_img.length > 0) {
new_tabs_background_img += 'background-position: top left;';
}
this.setData({
tabs_background: (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff;') + new_tabs_background_img,
});
} else {
this.tabs_background = 'transparent';
this.tabs_background = 'background:transparent';
}
},
},
@ -65,7 +78,18 @@
this.init();
},
mounted() {
this.getTop();
this.$nextTick(() => {
const self = this;
setTimeout(() => {
self.getTop();
});
// #ifdef H5 || MP-TOUTIAO
//
this.setData({
custom_nav_height: this.propCustomNavHeight,
});
// #endif
});
},
methods: {
init() {
@ -132,7 +156,6 @@
tabs_top: res.top,
});
}
console.log('goods', res);
})
.exec();
},

View File

@ -1,40 +1,42 @@
<template>
<view v-if="(propValue || null) !== null" class="header-container" :style="roll_style + position">
<view class="bg-white" :style="top_content_style">
<view class="header-content flex-row align-c">
<view class="model-top flex-1">
<view class="roll pr z-i">
<view class="model-head pr padding-horizontal-sm flex-row align-c" :style="header_style">
<view class="flex-row align-c jc-sb gap-16 wh-auto padding-horizontal-main pr">
<view v-if="['1', '2', '3'].includes(form.content.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16" :style="text_style + 'justify-content:' + form.content.indicator_location || 'center'">
<template v-if="['2', '3'].includes(form.content.theme)">
<view class="logo-outer-style">
<imageEmpty :propImageSrc="form.content.logo[0]" propImgFit="heightFix" propErrorStyle="width:40rpx;height:40rpx;"></imageEmpty>
</view>
</template>
<view v-if="['1', '2'].includes(form.content.theme)">{{ form.content.title }}</view>
<template v-if="['3', '5'].includes(form.content.theme)">
<view class="flex-1">
<componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
</view>
</template>
</view>
<view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c h gap-10">
<view class="flex-row align-c gap-2" @tap="go_map_event">
<iconfont name="icon-location" size="12" color="0"></iconfont>
<text class="size-14 cr-3 text-line-1">{{ form.content.positioning_name }}</text>
<iconfont v-if="form.content.is_arrows_show == '1'" name="icon-arrow-right" size="24rpx" color="#000"></iconfont>
<view v-if="(propValue || null) !== null" class="header-container">
<view class="wh-auto header-z-3" :style="roll_style + position">
<view class="bg-white" :style="top_content_style">
<view class="header-content flex-row align-c">
<view class="model-top flex-1">
<view class="roll pr z-i">
<view class="model-head pr flex-row align-c" :style="header_style">
<view class="flex-row align-c jc-sb gap-16 wh-auto">
<view v-if="['1', '2', '3'].includes(form.content.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16 padding-left-main" :style="text_style + 'justify-content:' + form.content.indicator_location || 'center'">
<template v-if="['2', '3'].includes(form.content.theme)">
<view class="logo-outer-style">
<imageEmpty :propImageSrc="form.content.logo[0]" propImgFit="heightFix" propErrorStyle="width:40rpx;height:40rpx;"></imageEmpty>
</view>
</template>
<view v-if="['1', '2'].includes(form.content.theme)">{{ form.content.title }}</view>
<template v-if="['3', '5'].includes(form.content.theme)">
<view class="flex-1">
<componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
</view>
</template>
</view>
<template v-if="['5'].includes(form.content.theme)">
<view class="flex-1">
<componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
<view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c h gap-10 padding-left-main">
<view class="flex-row align-c gap-2" @tap="go_map_event">
<iconfont name="icon-location" size="12" color="0"></iconfont>
<text class="size-14 cr-3 text-line-1">{{ form.content.positioning_name }}</text>
<iconfont v-if="form.content.is_arrows_show == '1'" name="icon-arrow-right" size="24rpx" color="#000"></iconfont>
</view>
<template v-if="['5'].includes(form.content.theme)">
<view class="flex-1">
<componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
</view>
</template>
</view>
<view v-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c" :class="['1'].includes(form.content.theme) ? 'right-0 padding-right-main' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
<view v-for="(item, index) in form.content.icon_setting" :key="index" :style="{ width: form.style.img_size * 2 + 'rpx', height: form.style.img_size * 2 + 'rpx' }" :data-value="item.link.page" @tap="url_event">
<imageEmpty v-if="item.img.length > 0" :propImageSrc="item.img[0].url" :propErrorStyle="'width: ' + Number(form.style.img_size) * 2 + 'rpx;height:' + Number(form.style.img_size) * 2 + 'rpx;'"></imageEmpty>
<iconfont v-else :name="'icon-' + item.icon" :size="form.style.img_size * 2 + 'rpx'" color="#666"></iconfont>
</view>
</template>
</view>
<view v-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c" :class="['1'].includes(form.content.theme) ? 'right-0 padding-right-main' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
<view v-for="(item, index) in form.content.icon_setting" :key="index" :style="{ width: form.style.img_size * 2 + 'rpx', height: form.style.img_size * 2 + 'rpx' }" :data-value="item.link.page" @tap="url_event">
<imageEmpty v-if="item.img.length > 0" :propImageSrc="item.img[0].url" :propErrorStyle="'width: ' + Number(form.style.img_size) * 2 + 'rpx;height:' + Number(form.style.img_size) * 2 + 'rpx;'"></imageEmpty>
<iconfont v-else :name="'icon-' + item.icon" :size="form.style.img_size * 2 + 'rpx'" color="#666"></iconfont>
</view>
</view>
</view>
@ -42,8 +44,15 @@
</view>
</view>
</view>
<hotWordList v-if="is_click" :propValue="form.content.hot_word_list" :prophotWordsColor="form.style.hot_words_color" :propIsPageSettings="true" @search_hot_close="search_hot_close"></hotWordList>
</view>
<hotWordList v-if="is_click" :propValue="form.content.hot_word_list" :prophotWordsColor="form.style.hot_words_color" :propIsPageSettings="true" @search_hot_close="search_hot_close"></hotWordList>
<!-- #ifndef H5 || MP-TOUTIAO -->
<view v-if="is_positon_realative" class="wh-auto pf top-0 left-0 right-0" :style="roll_style">
<view class="bg-white" :style="top_content_style">
<view style="height: 66rpx"></view>
</view>
</view>
<!-- #endif -->
</view>
</template>
@ -89,6 +98,7 @@
// #ifdef APP
top_content_style: 'padding-top:' + bar_height + 'px;padding-bottom:12px;',
// #endif
is_positon_realative: false,
};
},
created() {
@ -117,11 +127,12 @@
// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU
const custom = uni.getMenuButtonBoundingClientRect();
menuButtonInfo = `max-width:calc(100% - ${custom.width + 30}px);`;
menuButtonInfo = `max-width:calc(100% - ${custom.width + 10}px);`;
// #endif
this.setData({
form: this.propValue,
position: new_style.up_slide_display == '1' ? 'position:fixed;' : 'position:relative;',
is_positon_realative: new_style.up_slide_display == '1' ? false : true,
roll_style: new_roll_style,
text_style: `font-weight:${new_style.header_background_title_typeface}; font-size: ${new_style.header_background_title_size * 2}rpx; color: ${new_style.header_background_title_color};`,
header_style: menuButtonInfo,
@ -132,13 +143,13 @@
},
search_tap(value) {
this.setData({
is_click: value
})
is_click: value,
});
},
search_hot_close() {
this.setData({
is_click: false
})
is_click: false,
});
},
url_event(e) {
app.globalData.url_event(e);
@ -149,8 +160,12 @@
<style lang="scss" scoped>
.header-container {
z-index: 102;
position: relative;
z-index: 4;
width: 100%;
.header-z-3 {
z-index: 3;
}
.header-content {
height: 66rpx;
}

View File

@ -1,7 +1,7 @@
<template>
<!-- 文章列表 66rpx是自定义顶部导航栏的高度-->
<uv-sticky :disabled="!propIsTop" :offset-top="propTop" :zIndex="propZIndex" :customNavHeight="propCustomNavHeight">
<view class="flex-row gap-10 jc-sb align-c" :style="propStyle + 'background:' + propTabsBackground">
<uv-sticky :disabled="!propIsTop" :offset-top="propTop" :zIndex="propZIndex" :customNavHeight="custom_nav_height">
<view class="tabs-view flex-row gap-10 jc-sb align-c" :style="propStyle + propTabsBackground">
<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 class="flex-row" :style="'column-gap: ' + tabs_spacing + 'rpx;'">
@ -122,10 +122,20 @@
// #ifdef APP
tabs_top: 'calc(' + bar_height + 0 + 12 + 'px+ 66rpx);',
// #endif
custom_nav_height: '66rpx',
};
},
mounted() {
this.init();
// dom
this.$nextTick(() => {
// #ifdef H5 || MP-TOUTIAO
//
this.setData({
custom_nav_height: this.propCustomNavHeight,
});
// #endif
});
},
methods: {
isEmpty,

View File

@ -1,8 +1,10 @@
<template>
<!-- 选项卡 -->
<view class="tabs pr" :style="'padding-top:' + tabs_padding_top">
<view :class="top_up == '1' ? 'tabs-top bg-white' : ''" :style="style_container">
<componentDiyModulesTabsView :propValue="tabs_data" propIsTabsIcon :propStyle="propStyle" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<view :class="top_up == '1' ? 'tabs-top bg-white' : ''" :style="tabs_top_style">
<view class="max-w tabs-content" :style="style_container">
<componentDiyModulesTabsView :propValue="tabs_data" propIsTabsIcon :propStyle="propStyle" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
</view>
</view>
<view v-if="top_up == '1'" class="tabs-seat" :style="'height:' + tabs_seat_height + 'px'"></view>
</view>
@ -58,11 +60,15 @@
tabs_seat_height: 0,
//
tabs_padding_top: 0,
//
tabs_top_style: '',
};
},
created() {
this.init();
this.$nextTick(() => {
},
mounted() {
setTimeout(() => {
this.get_tabs_height();
});
},
@ -83,20 +89,24 @@
let new_tabs_data = JSON.parse(JSON.stringify(this.propValue));
new_tabs_data.content.tabs_list.unshift(new_tabs_data.content.home_data);
//
let other_style = '';
if (new_content.tabs_top_up == '1') {
other_style = 'calc(' + this.propTop + 'px' + ' + 66rpx)';
// #ifdef H5 || MP-TOUTIAO
if (this.propTabsIsTop) {
other_style = '0';
}
// #endif
let other_style = 'calc(' + this.propTop + 'px' + ' + 66rpx)';
let new_tabs_top_style = this.propNavIsTop || this.propTabsIsTop || new_content.tabs_top_up == '1' ? (new_content.tabs_top_up == '1' ? 'top:' + other_style + ';z-index:3;' : '') : '';
let new_top_up = new_content.tabs_top_up;
// #ifdef H5 || MP-TOUTIAO
if (this.propTabsIsTop) {
other_style = '0';
}
new_tabs_top_style = 'top:' + other_style + ';z-index:3;';
new_top_up = this.propNavIsTop || this.propTabsIsTop ? new_content.tabs_top_up : '0';
// #endif
this.setData({
tabs_data: new_tabs_data,
style_container: common_styles_computer(new_style.common_style) + 'top:' + other_style + ';z-index:3;',
style_container: common_styles_computer(new_style.common_style),
tabs_top_style: new_tabs_top_style,
//
top_up: this.propNavIsTop || this.propTabsIsTop ? new_content.tabs_top_up : '0',
top_up: new_top_up,
tabs_padding_top: this.propNavIsTop || this.propTabsIsTop ? other_style : '0',
});
},
@ -107,7 +117,7 @@
//
query
.in(this)
.select('.tabs-top')
.select('.tabs-content')
.boundingClientRect((res) => {
if ((res || null) != null) {
// data
@ -144,6 +154,7 @@
<style lang="scss" scoped>
.tabs {
z-index: 4;
.tabs-top {
position: fixed;
left: 0;