|
|
@@ -1,82 +1,80 @@
|
|
|
<template>
|
|
|
- <view class="home-container page-home d-flex flex-col bg-base">
|
|
|
- <template v-if="pageDefine">
|
|
|
- <NImage
|
|
|
- innerClass="main-banner position-absolute"
|
|
|
- width="100%"
|
|
|
- :src="pageContentDefine?.props.homeBanner"
|
|
|
- :showFailed="false"
|
|
|
- mode="widthFix"
|
|
|
+ <view v-for="(tab, i) in tabsDefine" :key="tab.title">
|
|
|
+ <view v-show="currentTab === i">
|
|
|
+ <Home v-if="tab.type === 'home' && pageDefine"
|
|
|
+ :pageDefine="pageDefine"
|
|
|
+ :pageContentDefine="pageContentDefine"
|
|
|
/>
|
|
|
- <view class="content d-flex flex-col wing-l">
|
|
|
-
|
|
|
- <view class="shadow-base radius-l border-all-base main-banner-box mb-25">
|
|
|
- <image
|
|
|
- class="logo"
|
|
|
- src="https://mncdn.wenlvti.net/app_static/minnan/images/home/MainLogo1.png"
|
|
|
- />
|
|
|
- <view>
|
|
|
- <text class="title">{{pageContentDefine?.props.title || ''}}</text>
|
|
|
- <text>{{pageContentDefine?.props.subTitle || ''}}</text>
|
|
|
- </view>
|
|
|
- <image
|
|
|
- class="footer"
|
|
|
- src="https://mncdn.wenlvti.net/app_static/minnan/images/home/MainBanner3.png"
|
|
|
- mode="widthFix"
|
|
|
- />
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="position-relative d-flex flex-row flex-wrap justify-between mt-25 row-gap-sss">
|
|
|
- <HomeButton
|
|
|
- v-for="item in pageContentDefine?.props.homeButtons || []"
|
|
|
- :key="item.title"
|
|
|
- :title="item.showTitle !== false ? item.title : ''"
|
|
|
- :icon="item.icon"
|
|
|
- :size="item.size"
|
|
|
- :buttonStyle="item.style"
|
|
|
- @click="navTo(item.link)"
|
|
|
- />
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 分栏 -->
|
|
|
- <CommonCategoryBlocks :categoryDefine="categoryDefine" />
|
|
|
- </view>
|
|
|
- </template>
|
|
|
+ <FlexCol v-else-if="tab.type === 'list'">
|
|
|
+ <StatusBarSpace backgroundColor="background.page" />
|
|
|
+ <NavBar leftButton="custom" backgroundColor="background.page">
|
|
|
+ <template #left>
|
|
|
+ <Image
|
|
|
+ v-if="tab.pageHeadImage"
|
|
|
+ :src="tab.pageHeadImage"
|
|
|
+ :width="tab.pageHeadImageWidth"
|
|
|
+ mode="widthFix"
|
|
|
+ :innerStyle="{
|
|
|
+ marginLeft: '30rpx', marginTop: '30rpx' ,
|
|
|
+ ...(tab.pageHeadImageStyle || {}),
|
|
|
+ }"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </NavBar>
|
|
|
+ <CommonCategoryList :pageConfigName="tab.pageConfigName" />
|
|
|
+ <Height :height="150" />
|
|
|
+ </FlexCol>
|
|
|
+ <User v-else-if="tab.type === 'user'" />
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <Tabbar v-if="!isEditorPreview" :current="0" />
|
|
|
+ <TabBar
|
|
|
+ v-model:selectedTabIndex="currentTab"
|
|
|
+ :fixed="!isEditorPreview"
|
|
|
+ xbarSpace
|
|
|
+ :innerStyle="{
|
|
|
+ zIndex: 999 ,
|
|
|
+ boxShadow: '0 -2rpx 4rpx rgba(0, 0, 0, 0.1)',
|
|
|
+ backdropFilter: 'blur(10px)',
|
|
|
+ backgroundColor: 'rgba(246, 242, 231, 0.7)',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <TabBarItem
|
|
|
+ v-for="tab in tabsDefine"
|
|
|
+ :key="tab.title"
|
|
|
+ :icon="tab.icon"
|
|
|
+ :activeIcon="tab.activeIcon"
|
|
|
+ :hump="tab.hump"
|
|
|
+ :humpHeight="tab.humpHeight"
|
|
|
+ :humpSpace="tab.humpSpace"
|
|
|
+ :iconSize="tab.iconSize"
|
|
|
+ :text="tab.title"
|
|
|
+ />
|
|
|
+ </TabBar>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { computed, inject } from 'vue';
|
|
|
+import { computed, inject, ref } from 'vue';
|
|
|
import { onShareTimeline, onShareAppMessage } from '@dcloudio/uni-app';
|
|
|
-import { navTo } from '@/components/utils/PageAction';
|
|
|
import { injectCommonCategory } from '../article/data/CommonCategoryGlobalLoader';
|
|
|
-import { CommonCategoryListTabNestCategoryDataToContent, type IHomeCommonCategoryHomeDefine } from '../article/data/CommonCategoryDefine';
|
|
|
-import Tabbar from '@/common/components/tabs/Tabbar.vue';
|
|
|
-import NImage from '@/components/basic/Image.vue';
|
|
|
-import HomeButton from '../parts/HomeButton.vue';
|
|
|
-import CommonCategoryBlocks from '../article/data/CommonCategoryBlocks.vue';
|
|
|
-import type { CategoryDefine } from '../article/data/CommonCategoryBlocks';
|
|
|
+import { type IHomeCommonCategoryHomeDefine } from '../article/data/CommonCategoryDefine';
|
|
|
+import TabBar from '@/components/nav/TabBar.vue';
|
|
|
+import TabBarItem from '@/components/nav/TabBarItem.vue';
|
|
|
+import FlexCol from '@/components/layout/FlexCol.vue';
|
|
|
+import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
|
|
|
+import NavBar from '@/components/nav/NavBar.vue';
|
|
|
+import Image from '@/components/basic/Image.vue';
|
|
|
+import Height from '@/components/layout/space/Height.vue';
|
|
|
+import CommonCategoryList from '../article/data/CommonCategoryList.vue';
|
|
|
+import Home from './home.vue';
|
|
|
+import User from '../user/index.vue';
|
|
|
|
|
|
const commonCategory = injectCommonCategory();
|
|
|
const pageDefine = computed(() => commonCategory.value.page.find((p) => p.name === 'home'));
|
|
|
const pageContentDefine = computed(() => pageDefine.value?.content as IHomeCommonCategoryHomeDefine);
|
|
|
const isEditorPreview = inject('editorPreviewMark', false);
|
|
|
|
|
|
-const categoryDefine = computed(() => pageContentDefine.value?.props.categorys
|
|
|
- .filter((item) => item.visible !== false)
|
|
|
- .map((item) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- showTitle: item.showTitle !== false,
|
|
|
- title: item.text,
|
|
|
- content: CommonCategoryListTabNestCategoryDataToContent(
|
|
|
- item.data, item
|
|
|
- ),
|
|
|
- type: item.type as CategoryDefine['type'],
|
|
|
- }
|
|
|
- })
|
|
|
-);
|
|
|
+const tabsDefine = computed(() => pageContentDefine.value?.props.tabs.filter((item) => item.visible !== false));
|
|
|
+const currentTab = ref(0);
|
|
|
|
|
|
onShareTimeline(() => {
|
|
|
return {};
|
|
|
@@ -87,73 +85,4 @@ onShareAppMessage(() => {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-.page-home {
|
|
|
-
|
|
|
- .main-banner {
|
|
|
- top: -100rpx;
|
|
|
- }
|
|
|
- .content {
|
|
|
- margin-top: 360rpx;
|
|
|
- }
|
|
|
- .main-banner-box {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- overflow: hidden;
|
|
|
- background: linear-gradient(180deg, #f9efe5 0%, #ebcab5 100%), #F7F3E8;
|
|
|
- padding: 50rpx 20rpx;
|
|
|
- font-family: "SongtiSCBlack";
|
|
|
- color: #432A04;
|
|
|
-
|
|
|
- > view {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- margin-left: -20rpx;
|
|
|
- margin-right: 60rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .logo {
|
|
|
- width: 140rpx;
|
|
|
- height: 85rpx;
|
|
|
- margin-left: -10rpx;
|
|
|
- margin-right: 0rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 47rpx;
|
|
|
- letter-spacing: -0.15rem;
|
|
|
- }
|
|
|
- text {
|
|
|
- font-size: 36rpx;
|
|
|
- letter-spacing: -0.04rem;
|
|
|
- margin-top: 10rpx;
|
|
|
- }
|
|
|
- .more {
|
|
|
- margin-top: 30rpx;
|
|
|
- padding: 10rpx 18rpx;
|
|
|
- width: 180rpx;
|
|
|
-
|
|
|
- &.badge {
|
|
|
- background-image: url('https://mncdn.wenlvti.net/app_static/minnan/images/home/MainBanner.png');
|
|
|
- background-size: 100% auto;
|
|
|
- background-repeat: no-repeat;
|
|
|
- }
|
|
|
-
|
|
|
- text {
|
|
|
- font-family: initial;
|
|
|
- font-size: 30rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .footer {
|
|
|
- position: absolute;
|
|
|
- right: -10rpx;
|
|
|
- bottom: -10rpx;
|
|
|
- width: 220rpx;
|
|
|
- z-index: 2;
|
|
|
- height: auto;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|