designer-hub/packages/merchant/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 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>