designer-hub/packages/app/src/pages/home/index.vue

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

<script lang="ts" setup>
import Card from '@/components/card.vue'
import HotActivity from '@/components/hot-activity.vue'
import MomentItem from '@/components/moment-item.vue'
import useRequest from '../../hooks/useRequest'
import dayjs from 'dayjs'
import Menus from './components/menus.vue'
import ScheduleCard from './components/schedule-card.vue'
import { getCircles } from '../../core/libs/requests'

defineOptions({
  name: 'Home',
})
// 测试 uni API 自动引入
const { data } = useRequest(async () => ({ code: 0, msg: '', data: {} }) as IResData<any>, {
  initialData: {
    banners: [],
    hots: [
      {
        id: 1,
        title: '日本研学·东京艺术大学游学',
        img: '',
        start: dayjs('2024-07-15').toDate(),
        end: dayjs('2024-08-10').toDate(),
      },
      {
        id: 1,
        title: '日本研学·东京艺术大学游学',
        img: '',
        start: dayjs('2024-07-15').toDate(),
        end: dayjs('2024-08-10').toDate(),
      },
    ],
    dynamics: [
      {
        author: {
          avatar: 'https://via.placeholder.com/35x35',
          nickname: '苏小萌',
          level: '0',
        },
        content: '用心做好设计，为客户创造美好家居环境',
        images: ['https://via.placeholder.com/165x220'],
        tags: ['意大利游学设计班'],
        shares: 0,
        comments: 0,
        likes: 0,
        createdAt: dayjs('2024-07-15').toDate(),
      },
      {
        author: {
          avatar: 'https://via.placeholder.com/35x35',
          nickname: '苏小萌',
          level: '0',
        },
        content: '用心做好设计，为客户创造美好家居环境',
        images: ['https://via.placeholder.com/220x165'],
        tags: ['意大利游学设计班'],
        shares: 0,
        comments: 0,
        likes: 0,
        createdAt: dayjs('2024-07-15').toDate(),
      },
      {
        author: {
          avatar: 'https://via.placeholder.com/35x35',
          nickname: '苏小萌',
          level: '0',
        },
        content: '用心做好设计，为客户创造美好家居环境',
        images: [
          'https://via.placeholder.com/104x104',
          'https://via.placeholder.com/104x204',
          'https://via.placeholder.com/204x104',
        ],
        tags: ['意大利游学设计班'],
        shares: 0,
        comments: 0,
        likes: 0,
        createdAt: dayjs('2024-07-15').toDate(),
      },
    ],
    studyTour: null,
  },
})
const { data: circlesData, run } = useRequest(() => getCircles({}), { initialData: { list: [] } })
console.log(data.value)
onShow(async () => {
  await run()
  console.log(circlesData.value)
})
onLoad(() => {})
onShareAppMessage(() => ({}))
</script>

<template>
  <view class="">
    <view class="bg-black w-full pos-relative aspect-[1.26/1]">
      <wd-img custom-class="w-[375px] h-[297px]" src="https://via.placeholder.com/375x297" />
      <div
        class="w-[375px] h-[90px] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
      >
        <!-- <div class="w-[82px] h-[33px] rounded-[60px] border border-white"></div> -->
        <view class="mx-7">
          <wd-button plain custom-class="bg-transparent! border-white! text-white!">
            02:30
          </wd-button>
        </view>
      </div>
    </view>
    <view class="bg-[#f6f6f6] relative bottom-4 rounded-t-2xl py-1">
      <ScheduleCard custom-class="my-6 mx-3.5"></ScheduleCard>
      <menus></menus>
      <view class="my-6 mx-3.5">
        <HotActivity></HotActivity>
      </view>
      <view class="my-6 mx-3.5">
        <Card>一分钟快速了解筑巢荟</Card>
      </view>
      <view class="mx-3.5 text-5 font-400">设计圈</view>
      <view class="mx-3.5">
        <template v-for="it of circlesData.list" :key="it.id">
          <view class="my-6">
            <MomentItem :options="it"></MomentItem>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<style></style>