<!-- 使用 type="home" 属性设置首页,其他页面不需要设置,默认为page;推荐使用json5,更强大,且允许注释 --> <route lang="json5" type="home"> { layout: 'tabbar', style: { navigationStyle: 'custom', navigationBarTitleText: '首页', }, } </route> <script lang="ts" setup> 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' import SectionHeading from '@designer-hub/app/src/components/section-heading.vue' import Card from '@designer-hub/app/src/components/card.vue' import { merchantPageHeaderBg } from '@designer-hub/assets/src/svgs' 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="flex-grow relative"> <div class="aspect-[0.96/1] absolute left-0 right-0 top--1"> <wd-img width="100%" height="100%" :src="merchantPageHeaderBg" custom-class="vertical-bottom" ></wd-img> </div> 1 <wd-navbar custom-class="bg-transparent!" safe-area-inset-top :bordered="false"> <template #left> <div class="ml-1 text-center text-white text-lg font-normal font-['PingFang SC'] leading-relaxed" > 今日待办 </div> </template> </wd-navbar> <div class="flex flex-col gap-8 p-4 relative box-border"> <div> <SectionHeading title="渠道任务" path="/pages/home/index" end-text="查看全部" custom-class="mb-5" ></SectionHeading> <Card><wd-status-tip image="search" tip="当前暂无未开始/进行中的任务" /></Card> </div> <div> <SectionHeading title="设计师" path="" custom-class="mb-5"></SectionHeading> <div class="flex flex-col gap-4"> <template v-for="{ label, color } of [ { label: '重点跟进设计师', color: '#FF523F' }, { label: '全部设计师', color: '#7199FF' }, { label: '本月新增设计师', color: '#FFE786' }, { label: '超过30天未跟进', color: '#89F4E3' }, { label: '超过60天未产生积分设计师', color: '#FFBA6A' }, { label: '超过60天未消耗积分设计师', color: '#C494FF' }, { label: '未成交过设计师', color: '#FF9EE2' }, ]" :key="label" > <div class="h-12 bg-white rounded-lg shadow flex items-center hover:bg-[#fff6f5]"> <div class="w-1.5 h-12 rounded-tl-lg rounded-bl-lg shadow" :style="{ background: color }" ></div> <div class="flex-1 mx-3"> <SectionHeading :title="label" path="/pages/home/index" size="sm"></SectionHeading> </div> </div> </template> </div> </div> <div> <SectionHeading title="设计师最新动态" path="" custom-class="mb-5"></SectionHeading> <div class="flex flex-col gap-4"> <template v-for="{ title, date } of [ { title: '苏小萌报名了日本设计游学', date: new Date() }, { title: '苏小萌报名了骑行活动', date: new Date() }, { title: '苏小萌获取imola16000积分', date: new Date() }, ]" :key="title" > <Card> <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-none"> {{ title }} </div> <div class="mt-3 text-black/30 text-xs font-normal font-['PingFang SC'] leading-none"> {{ dayjs(date).format('YYYY-MM-DD hh:mm') }} </div> </Card> </template> </div> </div> </div> <!-- <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" > <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>