minnan/src/pages/home/index.vue

<template>
  <view class="home-container page-home d-flex flex-col bg-base">
    <Image 
      innerClass="main-banner position-absolute"
      width="100%"
      :src="pageContentDefine?.props.homeBanner"
      mode="widthFix"
    />
    <view class="content d-flex flex-col wing-l">

      <!-- 分栏 -->
      <view class="shadow-base radius-l bg-base p-3">
        <!--
          点击介绍
          @click="navTo('introduction')"
        -->
        <view 
          class="main-banner-box mb-25"
        >
          <Image 
            innerClass="logo"
            src="https://mncdn.wenlvti.net/app_static/minnan/images/home/MainLogo1.png"
            :width="140"
            :height="85"
          />
          <view>
            <text class="title">{{pageContentDefine?.props.title || ''}}</text>
            <text>{{pageContentDefine?.props.subTitle || ''}}</text>
          </view>
          <Image 
            innerClass="footer"
            src="https://mncdn.wenlvti.net/app_static/minnan/images/home/MainBanner2.png"
            :width="280"
            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.title"
            :icon="item.icon"
            :size="item.size"
            @click="navTo(item.link[0], item.link[1] as Record<string, unknown>)"
          />
        </view>
        <view class="position-relative d-flex flex-row flex-wrap justify-between mt-3">
          <Box1AudioPlay
            class="w-100" 
            :title="indexAudioPlayer.currentTitle.value"
            :image="indexAudioPlayer.currentItem?.value?.image"
            :playState="indexAudioPlayer.isPlaying.value"
            :playTime="indexAudioPlayer.timeString.value"
            @playPauseClick="indexAudioPlayer.playpause"
            @arrowClick="handleGoAudioList"
            @nextClick="indexAudioPlayer.next"
            @prevClick="indexAudioPlayer.prev"
            @click="handleGoAudioList"
          />
        </view>
      </view>

      <CommonCategoryBlocks :categoryDefine="categoryDefine" />
    </view>
  </view>
  <Tabbar :current="0" />
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { onShareTimeline, onShareAppMessage } from '@dcloudio/uni-app';
import { navTo } from '@/components/utils/PageAction';
import { useSimpleListAudioPlayer } from '@/common/composeabe/SimpleAudioPlayer';
import { injectCommonCategory } from '../article/data/CommonCategoryGlobalLoader';
import { CommonCategoryListTabNestCategoryDataToContent, type IHomeCommonCategoryHomeDefine } from '../article/data/CommonCategoryDefine';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import Tabbar from '@/common/components/tabs/Tabbar.vue';
import Box1AudioPlay from '@/pages/parts/Box1AudioPlay.vue';
import Image from '@/components/basic/Image.vue';
import HomeButton from '../parts/HomeButton.vue';
import CommonCategoryBlocks, { type CategoryDefine } from '../article/data/CommonCategoryBlocks.vue';

const commonCategory = injectCommonCategory();
const pageDefine = computed(() => commonCategory.value.page.find((p) => p.name === 'home'));
const pageContentDefine = computed(() => pageDefine.value?.content as IHomeCommonCategoryHomeDefine);

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 indexAudioPlayer = useSimpleListAudioPlayer(async () => {
  return (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(5)
    .setMainBodyColumnId(321)
  , 1, 10)).list.map((p) => {
    return {
      id: p.id,
      title: p.title,
      image: p.thumbnail || p.image,
      src: p.audio as string, 
    }
  });
})
function handleGoAudioList() {
  navTo('/pages/inhert/language/list') 
}



onShareTimeline(() => {
  return {}; 
})
onShareAppMessage(() => {
  return {}; 
})
</script>

<style lang="scss">
.page-home {

  .main-banner {
    top: 0rpx;
  }
  .content {
    margin-top: 400rpx;
  }

  .map-tags {
    left: 0;
    top: 0;
    padding: 15rpx 0;
    font-size: 25rpx;

    .tag-bar {
      padding: 0 20rpx;

      view {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
        border-radius: 40rpx;
        padding: 10rpx 15rpx;
        background-color: #f7f3e8;
        color: #d9492e;
        margin-right: 10rpx;

        .iconfont {
          margin-right: 8rpx;
        }
        &.active {
          background-color: #d9492e;
          color: #f7f3e8;
        }
      }
    }
  }
  ::v-deep .grid4-item {
    width: 320rpx;

    .tag {
      top: 2rpx; 
      right: 2rpx;
      z-index: 20;
    }
  }
  .main-banner-box {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    border-radius: 15rpx;
    background: linear-gradient(180deg, #E5CDAB 0%, #F0E3D6 100%), #F7F3E8;
    padding: 30rpx 20rpx;
    font-family: "SongtiSCBlack";
    color: #432A04;

    > view {
      display: flex;
      flex-direction: column;
      margin-left: -30rpx;
    }

    .logo {
      margin-left: -10rpx;
      margin-right: 0rpx;
    }
    
    .title {
      font-size: 40rpx;
    }
    text {
      font-size: 35rpx;
      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: -80rpx;
      bottom: -10rpx;
      width: 180rpx;
      z-index: 2;
      height: auto;
      opacity: 0.15;
    }
  }
}
</style>