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

<route lang="json">
{
  "layout": "tabbar",
  "style": {
    "navigationBarTitleText": "消息",
    "navigationBarBackgroundColor": "#fff"
  }
}
</route>

<script setup lang="ts">
import Card from '@/components/card.vue'
import PageHelper from '@/components/page-helper.vue'
import { getMessages } from '../../core/libs/requests'
import { integral, interact, system } from '../../core/libs/svgs'
import { beforeNow } from '../../utils/date-util'
import dayjs from 'dayjs'

const tab = ref('integral')
const tabs = ref([
  { label: '积分消息', value: 'integral' },
  { label: '系统消息', value: 'system' },
  { label: '互动消息', value: 'interact' },
])
const msgs = ref({
  integral: [
    { title: '积分变动通知', createdAt: Date.now() },
    { title: '请确认积分', createdAt: '2023-05-05' },
  ],
  system: [
    {
      title: '新豪轩门窗入驻筑巢荟',
      createdAt: Date.now(),
      content: '新豪轩材料商加入筑巢荟，为筑巢荟设计师提供更好的材料和服务！',
      img: 'https://via.placeholder.com/279x164',
    },
    { title: '平台通知', createdAt: Date.now(), content: '有新的材料商入驻平台，点击查看!' },
  ],
  interact: [
    {
      title: '王磊回复了你',
      createdAt: Date.now(),
      content: '设计师李家豪刚刚点赞了你的设计圈点击前往查看',
    },
    {
      title: '李琳赞了你的设计圈',
      createdAt: Date.now(),
      content: '设计师李家豪刚刚点赞了你的设计圈点击前往查看',
    },
  ],
})
const messageTypes = ref([{}])
</script>

<template>
  <view class="flex-grow flex flex-col">
    <wd-tabs v-model="tab">
      <block v-for="({ label, value }, i) in tabs" :key="i">
        <wd-tab :title="`${label}`" :name="value"></wd-tab>
      </block>
    </wd-tabs>
    <PageHelper
      :request="() => ({ list: [] })"
      :query="{ messageType: '1' }"
      class="flex-grow flex flex-col"
    >
      <template #default="{ source }">
        <div class="p-3.5 gap-3.5 flex flex-col">
          <template v-for="(it, i) in source.list" :key="i">
            <Card>
              <div class="grid items-center grid-cols-[38px_auto_100px]">
                <div class="row-start-1 col-start-1">
                  <div
                    class="w-[30px] h-[30px] bg-neutral-100 rounded-full mr-2 flex items-center justify-center"
                  >
                    <wd-img
                      width="18"
                      height="18"
                      :src="{ integral: integral, system: system, interact: interact }[tab]"
                    ></wd-img>
                  </div>
                </div>
                <div class="row-start-1 col-start-2 text-start">
                  <div
                    class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-[30px]"
                  >
                    {{ it.title }}
                  </div>
                </div>
                <div class="row-start-1 col-start-3 text-end">
                  <div
                    class="text-black/30 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]"
                  >
                    {{ beforeNow(dayjs(it.createdAt).toDate()) }}
                  </div>
                </div>
                <div class="row-start-2 col-start-2 col-end-4">
                  <div
                    class="my-3 text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[25px]"
                  >
                    {{ it.content }}
                  </div>
                </div>
                <div v-if="it.img" class="row-start-3 col-start-2 col-end-4">
                  <img class="w-[279px] h-[164px] rounded-md" :src="it.img" />
                </div>
                <div class="row-start-4 col-start-1 col-end-4 my-2">
                  <div v-if="!it.img" class="bg-[#dadada] w-full h-[1px]"></div>
                </div>
                <div class="row-start-5 col-start-2 col-end-4">
                  <div
                    class="text-black/90 text-xs font-normal font-['PingFang_SC'] leading-[25px]"
                  >
                    查看详情
                  </div>
                </div>
              </div>
            </Card>
          </template>
        </div>
      </template>
    </PageHelper>
  </view>
</template>

<style scoped lang="scss"></style>