x-forend/src/pages/index/index.vue

<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view class="home-page">
    <NavBar />

    <swiper
      indicator-active-color="#EFB85A"
      indicator-color="rgba(0,0,0,0.1)"
      indicator-dots
      autoplay
      circular
      class="w-345 h-170 mx-auto mt-10"
    >
      <swiper-item v-for="item in bannerList" :key="item.id">
        <image
          class="block w-345 h-170 rounded-10 overflow-hidden"
          :src="getImageUrl(item.image)"
          mode="aspectFill"
        />
      </swiper-item>
    </swiper>

    <view class="flex bg-white py-15 rounded-10 m-15 border-2 border-white border-solid">
      <view class="flex-1 flex flex-col items-center" @click="handleIntroduction">
        <image class="w-30 h-30" src="@/static/images/home/nav-1.png" mode="aspectFill" />
        <text class="mt-8 text-14 text-#333">简介</text>
      </view>
      <!-- <view class="flex-1 flex flex-col items-center" @click="handleInvite">
        <image class="w-30 h-30" src="@/static/images/home/nav-2.png" mode="aspectFill" />
        <text class="mt-8 text-14 text-#333">抽奖转盘</text>
      </view> -->
      <view class="flex-1 flex flex-col items-center" @click="handleOfficialCommunity">
        <image class="w-30 h-30" src="@/static/images/home/nav-2.png" mode="aspectFill" />
        <text class="mt-8 text-14 text-#333">官方社群</text>
      </view>
      <view class="flex-1 flex flex-col items-center" @click="handleOfficialCommunity">
        <image class="w-30 h-30" src="@/static/images/home/nav-3.png" mode="aspectFill" />
        <text class="mt-8 text-14 text-#333">在线客服</text>
      </view>
      <view class="flex-1 flex flex-col items-center" @click="handleDownload">
        <image class="w-30 h-30" src="@/static/images/home/nav-4.png" mode="aspectFill" />
        <text class="mt-8 text-14 text-#333">下载APP</text>
      </view>
    </view>

    <view class="bg-white pt-15 px-15 rounded-10 m-15">
      <view class="flex justify-center items-center">
        <view class="text-14 text-#333">最新时讯</view>
        <!-- <view class="text-12 text-#999" @click="handleNews">查看全部</view> -->
      </view>
      <swiper
        indicator-active-color="#3B81F3"
        indicator-color="rgba(0,0,0,0.1)"
        indicator-dots
        autoplay
        circular
        class="h-200 mt-10"
      >
        <swiper-item v-for="item in newsList" :key="item.id">
          <video class="w-full h-160" :src="item.image" mode="aspectFill" />
        </swiper-item>
      </swiper>
    </view>

    <view class="bg-white py-15 px-15 rounded-10 m-15">
      <view class="flex justify-between items-center">
        <view class="text-14 text-#333">热点新闻</view>
        <view class="text-12 text-#999" @click="handleHotNews">查看全部</view>
      </view>
      <view
        class="flex mt-15"
        v-for="item in hotNewsList"
        :key="item.id"
        @click="handleNewsDetail(item.id)"
      >
        <image
          class="w-85 h-85 rounded-10 bg-gray-100"
          :src="getImageUrl(item.image)"
          mode="aspectFill"
        />
        <view class="ml-15 flex-1 flex flex-col justify-between">
          <view text-14>{{ item.name }}</view>
          <view class="text-12 text-#999">{{ item.createtime }}</view>
        </view>
      </view>
    </view>
    <wd-popup :lockScroll="false" v-model="showNotice" custom-style="border-radius:0.2rem;">
      <view class="px-30 py-30 w-330 h-457 notice-container rounded-20 flex flex-col">
        <view class="text-18 font-bold pb-15 text-center">系统公告</view>
        <view class="flex-1 overflow-y-auto">
          <view v-for="(item, index) in announcementList" :key="item.id" class="mb-15">
            <view class="mt-12 text-14 text-#333 flex-1" v-html="item.content"></view>
          </view>
        </view>
        <view
          @click="showNotice = false"
          class="btn-gradient rounded-full text-center text-14 text-white py-8 mt-15"
        >
          确定
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script lang="ts" setup>
import Avatar from '@/components/Avatar.vue'
import NavBar from '@/components/NavBar.vue'
import {
  downloadAppAPI,
  getBannerAPI,
  getIntroductionAPI,
  getOpenPersonalAccountAPI,
} from '@/service'
import { useUserStore } from '@/store'
import { getImageUrl, showModal } from '@/utils'

defineOptions({
  name: 'Home',
})

// 热门咨询
const { list: hotNewsList } = useListPageRequest((params) =>
  getIntroductionAPI({ type: 1, ...params }),
)

const handleIntroduction = () => {
  uni.navigateTo({
    url: '/pages-sub/introduction/index',
  })
}

const handleNewsDetail = (id: number) => {
  uni.navigateTo({
    url: `/pages-sub/news-detail/index?id=${id}`,
  })
}

const handleInvite = () => {
  uni.navigateTo({
    url: '/pages/invite/index',
  })
}

const handleOfficialCommunity = () => {
  uni.navigateTo({
    url: '/pages-sub/official-community/index',
  })
}

const handleDownload = () => {
  downloadAppAPI()
}

const showNotice = ref(false)

const handleNews = () => {
  uni.navigateTo({
    url: '/pages-sub/news/index',
  })
}

const handleHotNews = () => {
  uni.navigateTo({
    url: '/pages-sub/hot-news/index',
  })
}

// 系统公告
const { list: announcementList } = useListPageRequest((params) =>
  getIntroductionAPI({ type: 2, ...params }),
)
// 最新时讯
const { list: newsList } = useListPageRequest((params) =>
  getIntroductionAPI({ type: 3, ...params }),
)
watch(
  () => announcementList.value.length,
  (newVal) => {
    if (newVal > 0) {
      showNotice.value = true
    }
  },
)

const userStore = useUserStore()
const handleOpenAccount = async () => {
  await getOpenPersonalAccountAPI()
  await showModal('开通个人养老账户成功')
  userStore.loadUserInfo()
  // showModal('开通个人养老账户时，需邀请一名用户')
}

// 获取轮播图
const bannerList = ref([])
const getBanner = async () => {
  const res = await getBannerAPI()
  bannerList.value = res.data
}
onLoad(getBanner)
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  padding-bottom: 50px;
  background: linear-gradient(180deg, #fff3da 0%, #f8f8f8 100%);
}
.notice-container {
  background-image: url('@/static/images/home/notice-bg.jpg');
  background-position: top;
  background-size: cover;
}
</style>