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

<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view class="home-page">
    <NavBar />
    <template v-if="userStore.userInfo?.banknum">
      <view class="main-container w-345 h-185 mx-auto rounded-14 px-20 pt-70 text-12">
        <Avatar class="absolute right-45 top-100 w-70 h-70" />
        <view>姓名：{{ userStore.userInfo?.realname }}</view>
        <view class="mt-10">社会保障号码：{{ userStore.userInfo?.banknum.substring(0, 4) }}</view>
        <view class="mt-15">中国工商银行卡号</view>
        <view class="mt-5 text-14 text-#333">
          <!-- 每四位数字插入空格 -->
          {{ userStore.userInfo?.banknum.replace(/(\d{4})(?=\d)/g, '$1 ') }}
        </view>
      </view>
    </template>
    <template v-else>
      <view class="main-container w-345 h-185 mx-auto rounded-14 px-20 pt-70 text-12">
        <view>姓名：***</view>
        <view class="mt-15">社会保障号码：***</view>
        <view class="mt-15">中国工商银行卡号：**************</view>
      </view>
      <view
        class="mt-15 btn-gradient w-345 h-45 leading-45 mx-auto text-white rounded-full text-center"
        @click="handleOpenAccount"
      >
        开通个人养老账号
      </view>
    </template>

    <view class="bg-white pt-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="handleNews">查看全部</view> -->
      </view>
      <swiper
        indicator-active-color="#3B81F3"
        indicator-color="rgba(0,0,0,0.1)"
        indicator-dots
        autoplay
        circular
        class="h-240 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" :src="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.source }}</view>
        </view>
      </view>
    </view>
    <wd-popup :lockScroll="false" v-model="showNotice" custom-style="border-radius:40rpx;">
      <view class="px-30 py-30 w-330 h-457 notice-container rounded-20 flex flex-col">
        <view class="text-18 font-bold py-15 text-center">系统公告</view>
        <view class="py-15 flex-1">
          <view
            v-for="(item, index) in announcementList"
            :key="item.id"
            class="flex border-b-1 border-b-gray-300 border-b-solid py-15"
          >
            <text class="whitespace-nowrap text-14 font-bold text-gradient">
              公告{{ ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][index] }}：
            </text>
            <text class="text-14 text-#333 flex-1" v-html="item.content"></text>
          </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,
  getIntroductionAPI,
  getOpenPersonalAccountAPI,
  getRealNameAuthAPI,
} from '@/service'
import { useUserStore } from '@/store'
import { 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('开通个人养老账户时，需邀请一名用户')
}
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  padding-bottom: 100rpx;
  background-image: url('@/static/images/home/bg.jpg');
  background-position: top;
  background-size: cover;
}
.main-container {
  background-image: url('@/static/images/home/main-bg.jpg');
  background-position: top;
  background-size: cover;
}
.notice-container {
  background-image: url('@/static/images/home/notice-bg.jpg');
  background-position: top;
  background-size: cover;
}
</style>